@charset "UTF-8";

/* font
------------------------------ */
@font-face {
  font-display: swap;
  font-family: "ShipporiMincho";
  src:
    url("https://lenoble.itembox.design/item/images/font/ShipporiMincho.eot?") format("eot"),
    url("https://lenoble.itembox.design/item/images/font/ShipporiMincho.woff") format("woff"),
    url("https://lenoble.itembox.design/item/images/font/ShipporiMincho.otf") format("opentype");
}

/* common
------------------------------ */
.wrapper_accordion_QA,
.wrap_accordion_QA,
.section_accordion_QA,
.ColumnBox_accordion_QA_01,
.ColumnBox_accordion_QA_02,
.ColumnBox_accordion_QA_03,
.ColumnBox_accordion_QA_04,
.ColumnBox_accordion_QA_05,
.ColumnBox_accordion_QA_06,
.ColumnBox_accordion_QA_07,
.ColumnBox_accordion_QA_08,
.ColumnBox_accordion_QA_heading,
.ColumnBox_accordion_QA_comment,
.contents_accordion_QA_01,
.contents_accordion_QA_02,
.contents_heading_QA,
.contents_comment_QA {
  width: 100%;
  margin: 0 auto;
}

.wrapper_accordion_QA,
.section_accordion_QA,
.ColumnBox_accordion_QA_01,
.ColumnBox_accordion_QA_02,
.ColumnBox_accordion_QA_03,
.ColumnBox_accordion_QA_04,
.ColumnBox_accordion_QA_05,
.ColumnBox_accordion_QA_06,
.ColumnBox_accordion_QA_07,
.ColumnBox_accordion_QA_08,
.ColumnBox_accordion_QA_heading,
.ColumnBox_accordion_QA_comment {
  padding: 0;
}

/* wrapper
------------------------------ */
.wrapper_accordion_QA {
  overflow: hidden;
}

/* wrap
------------------------------ */
.wrap_accordion_QA {
  padding: 3% 0;

  @media screen and (max-width: 639px) {
    padding: 0 0 8%;
  }
}

/* flex
------------------------------ */
.flexColumn_accordion_QA {
  margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-direction: column;
}

/* contents
------------------------------ */
.contents_accordion_QA_01,
.contents_accordion_QA_02 {
  padding: 4% 0 2%;
}

.contents_accordion_QA_01 {
  @media screen and (max-width: 639px) {
    width: 94%;
    padding: 4% 0;
  }
}

.contents_heading_QA {
  padding: 2% 0 1% 1.5%;

  @media screen and (max-width: 639px) {
    padding: 3% 0 1.5% 1.5%;
  }
}

.contents_comment_QA {
  padding: 3% 0;

  @media screen and (max-width: 639px) {
    padding: 5% 3%;
  }
}

.contents_wrap {
  font-family: "Noto Sans JP", sans-serif;
}

/* border
------------------------------ */
.ttlBorder_blue_QA {
  border-left: 15px solid #282764;
  border-bottom: 2px solid #282764;

  @media screen and (max-width: 639px) {
    border-left-width: 11px;
  }
}

/* space
------------------------------ */
.spaceTop_QA {
  margin-top: 5%;
}

/* text
------------------------------ */
h4.header_QA,
p.comment_QA {
  color: #111;
  text-align: left;
  margin: 0;
}

h4.header_QA {
  font-family: "ShipporiMincho";
  font-size: calc(2.4rem * 1.5);
  line-height: calc(3rem * 1.5);

  @media screen and (max-width: 639px) {
    font-size: calc(1.5rem * 1.5);
    line-height: calc(1.6rem * 1.5);
  }
}

p.comment_QA {
  font-family: Lato, "Noto Sans JP", sans-serif;
  font-size: calc(1.1rem * 1.5);
  line-height: calc(2.2rem * 1.5);
  letter-spacing: .2rem;

  @media screen and (max-width: 639px) {
    font-size: calc(.95rem * 1.5);
    line-height: calc(1.7rem * 1.5);
    letter-spacing: .1rem;
  }
}

/* accordion
------------------------------ */
details.accordion_QA {
  border: 1px solid #ccc;

  &:not(:last-child) {
    margin-bottom: 20px;
  }

  &[open] {
    summary.accordion_ttl_QA {
      &::before {
        content: "\2212";
      }
    }
  }

  summary.accordion_ttl_QA {
    list-style: none;
    cursor: pointer;
    padding: 20px;
    background: #e4e4e4;
    color: #242323;
    font-size: 2rem;
    font-weight: bold;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      content: "\002B";
      margin-right: 10px;
      font-size: 3rem;
    }

    @media screen and (max-width: 639px) {
      padding: 2% 0 3% 2%;
      font-size: 1.5rem;

      &::before {
        margin-right: 5px;
        font-size: 2.4rem;
      }
    }
  }

  h5.accordion_heading_QA,
  p.accordion_inner_QA {
    margin: 0;
    padding: 20px;
  }

  h5.accordion_heading_QA {
    font-size: 1.9rem;
    line-height: 3.8rem;

    @media screen and (max-width: 639px) {
      padding: 5% 0 0 3%;
      font-size: 1.6rem;
      line-height: 2.6rem;
    }
  }

  p.accordion_inner_QA {
    font-size: 1.7rem;
    line-height: 3.4rem;

    @media screen and (max-width: 639px) {
      padding: 4% 0 4% 4%;
      font-size: 1.5rem;
      line-height: 2.5rem;
    }
  }
}