@charset "UTF-8";
/* 日本語 */
/**********************************************/
body {
  background-color: #17ACB7; }

/**********************************************/
section h1 {
  height: 135px;
  color: #fff;
  font: 5rem/1em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-weight: 700;
  letter-spacing: 0.1em;
  position: relative; }
  section h1 span {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    background: url("../img/faq_ttl.svg") center center no-repeat;
    background-size: contain;
    aspect-ratio: 102/80;
    width: 100%;
    max-width: 102px;
    height: auto; }
  section h1:before {
    position: absolute;
    content: "FAQ";
    left: 0;
    top: 0;
    font: 16rem/1em "Urbanist", Arial, Helvetica, "sans-serif";
    font-weight: 700;
    color: #059DA8; }

@media (max-width: 1280px) {
  section h1:before {
    top: auto;
    bottom: -10%;
    font: 11.5vw/1em "Urbanist", Arial, Helvetica, "sans-serif";
    font-weight: 700; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  section h1 {
    height: 110px; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  section h1 {
    height: auto;
    margin: 0 auto 50px; }
    section h1 span {
      margin: 0 auto; }
    section h1:before {
      display: none; } }
/*max-width:768px*/
@media (max-width: 480px) {
  section h1 {
    margin: 0 auto 35px; } }
/*max-width:480px*/
/**********************************************/
.faq_all {
  padding: 70px 0 130px;
  max-width: 1500px;
  width: calc(100% - 100px);
  margin: 0 auto; }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .faq_all {
    width: calc(100% - 50px);
    margin: 0 auto; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .faq_all {
    width: 100%; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .faq_all {
    padding: 70px 0 100px; } }
/*max-width:480px*/
/**********************************************/
.faq_box {
  position: relative;
  z-index: 10;
  width: 100%;
  border-radius: 15px;
  padding: 70px;
  background-color: #fff;
  margin: 0 auto 60px; }
  .faq_box h2 {
    border-bottom: 3px solid #17ACB7;
    color: #17ACB7;
    font: 3.2rem/1.5em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0 0 20px 70px;
    position: relative;
    margin: 0 0 50px;
    text-align: justify;
    text-justify: inter-ideograph; }
    .faq_box h2 span {
      position: absolute;
      left: 0;
      width: 70px;
      text-align: center;
      top: 0; }
  .faq_box h3 {
    font: 1.8rem/2em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    font-weight: 700;
    border-bottom: 1px solid #707070;
    margin: 0 0 10px;
    padding: 0 5px 5px; }
  .faq_box dl {
    max-width: 1360px;
    margin: 0 auto;
    width: 100%;
    counter-reset: privacy; }
  .faq_box dt {
    transition: .3s;
    font: 2rem/2em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    font-weight: 700;
    background-color: #EEFEFF;
    color: #17ACB7;
    border-bottom: 1px solid #17ACB7;
    border-top: 1px solid #17ACB7;
    padding: 5px 60px 5px 90px;
    position: relative;
    margin: 0 0 20px;
    text-align: justify;
    text-justify: inter-ideograph; }
    .faq_box dt:before {
      position: absolute;
      width: 90px;
      height: 100%;
      padding: 5px 0;
      text-align: center;
      counter-increment: privacy;
      content: "Q." counter(privacy);
      left: 0;
      top: 0;
      transition: .3s; }
    .faq_box dt:after {
      transition: .3s;
      position: absolute;
      width: 45px;
      height: auto;
      text-align: center;
      content: "+";
      top: 50%;
      left: auto;
      right: 0;
      -webkit-transform: translate(0%, -50%);
      /* Safari用 */
      transform: translate(0%, -50%);
      font: 2.6rem/1.9em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 700; }
    .faq_box dt.active:after {
      content: "-";
      font: 2.6rem/1.7em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 700; }
  .faq_box dd {
    text-align: justify;
    text-justify: inter-ideograph;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
    padding: 0 45px 0 90px;
    font: 1.8rem/2em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    font-weight: 400;
    letter-spacing: 0.03em; }
    .faq_box dd > div {
      position: relative;
      padding-bottom: 45px;
      transition: opacity 0.3s ease;
      opacity: 0; }
      .faq_box dd > div::before {
        content: "A.";
        position: absolute;
        left: -30px;
        color: #B0137B;
        font-weight: 700; }
    .faq_box dd .item {
      margin-bottom: 50px;
      padding: 0; }
      .faq_box dd .item:last-of-type {
        padding: 0;
        margin: 0; }
      .faq_box dd .item p {
        margin: 0 0 25px; }
        .faq_box dd .item p:last-of-type {
          margin: 0; }
      .faq_box dd .item .sub_ttl {
        position: relative; }
        .faq_box dd .item .sub_ttl::before {
          content: "A.";
          position: absolute;
          left: -30px;
          color: #B0137B;
          font-weight: 700; }
    .faq_box dd.open {
      max-height: 5000px; }
      .faq_box dd.open > div {
        opacity: 1; }
  .faq_box .kome {
    padding: 25px 0 0 0;
    counter-reset: hoge; }
    .faq_box .kome li {
      position: relative;
      padding: 0 0 0 45px; }
      .faq_box .kome li:before {
        position: absolute;
        content: "※" counter(hoge) "）";
        left: 0;
        counter-increment: hoge; }

@media (hover: hover) {
  .faq_box dt:hover {
    color: #96DEEC;
    cursor: pointer; }
    .faq_box dt:hover:after {
      font: 3.5rem/1.9em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 700; }
  .faq_box dd a:hover {
    border-bottom: 1px #179EA9 dashed; } }
@media (max-width: 1024px) {
  .faq_box {
    padding: 50px; }
    .faq_box h2 {
      border-bottom: 3px solid #17ACB7;
      color: #17ACB7;
      font: 3rem/1.5em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 0 0 20px 70px;
      position: relative;
      margin: 0 0 50px; }
      .faq_box h2 span {
        position: absolute;
        left: 0;
        width: 70px;
        text-align: center;
        top: 0; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .faq_box {
    padding: 40px 30px; }
    .faq_box h2 {
      font: 2.6rem/1.5em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 700;
      padding: 0 0 20px 50px;
      position: relative;
      margin: 0 0 40px; }
      .faq_box h2 span {
        width: 50px; }
    .faq_box h3 {
      font: 1.7rem/2em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 700;
      margin: 0 0 10px;
      padding: 0 5px 5px; }
    .faq_box dt {
      font: 1.8rem/2em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 700;
      padding: 5px 60px 5px 75px; }
      .faq_box dt:before {
        width: 75px;
        height: 100%; }
    .faq_box dd {
      padding: 0;
      font: 1.7rem/2em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 400;
      letter-spacing: 0.03em; }
      .faq_box dd > div {
        padding: 0 10px 0 30px; }
        .faq_box dd > div::before {
          left: 5px; }
      .faq_box dd .item .sub_ttl::before {
        left: -25px; }
      .faq_box dd.open {
        padding: 0 0 40px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .faq_box {
    padding: 40px 20px 50px; }
    .faq_box h2 {
      font: 2.4rem/1.5em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 700;
      padding: 0 0 15px 50px;
      position: relative;
      margin: 0 0 25px; }
      .faq_box h2 span {
        padding: 0 0 0 5px;
        text-align: left;
        width: 50px;
        font: 2.8rem/1.3em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
        font-weight: 700; }
    .faq_box h3 {
      font: 1.7rem/2em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 700;
      margin: 0 0 10px;
      padding: 0 5px 5px; }
    .faq_box dt {
      font: 1.7rem/1.8em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 700;
      padding: 5px 50px 5px 65px;
      letter-spacing: 0; }
      .faq_box dt:before {
        width: 60px; }
      .faq_box dt:after {
        width: 40px; }
    .faq_box dd {
      font: 1.6rem/1.8em "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
      font-weight: 400;
      letter-spacing: 0.03em; } }
/*max-width:480px*/
