@charset "utf-8";

/*------------------------------------------------------------
  base
------------------------------------------------------------*/
:root {
  --color-main: #63bcb8;
  --color-sub: #deebea;
  --transition: .2s ease-out;
}
.p-faq-contents {
  max-width: 1040px;
  padding-top: 50px;
  display: grid;
  gap: 60px;
}
@media screen and (min-width: 992px) {
  .p-faq-contents {
    padding-top: 80px;
    gap: 80px;
  }
}

/*------------------------------------------------------------
  c-faq-image
------------------------------------------------------------*/
.c-faq-image {
  max-width: 100%;
  height: auto;
}

/*------------------------------------------------------------
  c-faq-title-primary
------------------------------------------------------------*/
.c-faq-title-primary {
  display: flex;
  justify-content: center;
  gap: .3em;
  margin: 0 0 1.25em;
  color: var(--color-main);
  font-size: 20px;
  font-weight: bold;
}
.c-faq-title-primary::before {
  content: "";
  width: 44px;
  height: 44px;
  margin-top: -.3em;
  background: url("../img/support/faq/ico-question.png") no-repeat 0 50% / contain;
}
@media screen and (min-width: 992px) {
  .c-faq-title-primary {
    font-size: 25px;
  }
  .c-faq-title-primary::before {
    margin-top: 0;
  }
}

/*------------------------------------------------------------
  c-faq-title-secondary
------------------------------------------------------------*/
.c-faq-title-secondary {
  margin: 0 0 1.25em;
  color: var(--color-main);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
@media screen and (min-width: 992px) {
  .c-faq-title-secondary {
    font-size: 25px;
  }
}

/*------------------------------------------------------------
  c-faq-category
------------------------------------------------------------*/
.c-faq-category {
  display: grid;
}
.c-faq-category-list {
  display: flex;
  flex-wrap: wrap;
}
.c-faq-category-list__item:not(:first-child)::before {
  content: "/";
  padding: 0 .25em;
}
@media screen and (min-width: 768px) {
  .c-faq-category {
    grid-template-columns: 5em auto;
  }
}

/*------------------------------------------------------------
  c-button-primary
------------------------------------------------------------*/
.c-button-primary {
  display: inline-block;
  width: min(100%, 260px);
  padding: 15px 20px;
  border-radius: 100vh;
  background: #263238;
  color: #fff;
  font-size: 16px;
  text-align: center;
  transition: var(--transition);
}
.c-button-primary:hover {
  color: #fff;
  box-shadow: 0 6px 8px rgb(0 0 0 / .3);
}

/*------------------------------------------------------------
  c-faq-box-primary
------------------------------------------------------------*/
.c-faq-box-primary {
  height: 100%;
  background: #f3f5f6;
}
.c-faq-box-primary__head {
  padding: .5em;
  background: #b2dfdb;
  font-weight: 500;
  text-align: center;
}
.c-faq-box-primary__body {
  padding: 1em;
}

/*------------------------------------------------------------
  c-faq-list-primary
------------------------------------------------------------*/
.c-faq-list-primary {
  display: grid;
  gap: 15px;
}
.c-faq-list-primary__item {
  position: relative;
  border-radius: 4px;
  border: 1px solid #b2dfdb;
  background: #fff;
}
.c-faq-list-primary__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 10px;
  height: 36px;
  background: #B2DFDC;
  transform: translateY(-50%)
}
.c-faq-list-primary__link { 
  display: block;
  padding: 15px 15px 15px 30px;
  color: #263238;
  transition: var(--transition);
}
.c-faq-list-primary__link:hover { 
  color: #f45b69;
}

/*------------------------------------------------------------
  u-margin-top
------------------------------------------------------------*/
.u-mt-05-xs { margin-top:  5px; }
.u-mt-10-xs { margin-top: 10px; }
.u-mt-15-xs { margin-top: 15px; }
.u-mt-20-xs { margin-top: 20px; }
.u-mt-25-xs { margin-top: 25px; }
.u-mt-30-xs { margin-top: 30px; }
.u-mt-40-xs { margin-top: 40px; }
.u-mt-50-xs { margin-top: 50px; }
.u-mt-60-xs { margin-top: 60px; }

@media screen and (min-width: 576px) {
  .u-mt-05-sm { margin-top:  5px; }
  .u-mt-10-sm { margin-top: 10px; }
  .u-mt-15-sm { margin-top: 15px; }
  .u-mt-20-sm { margin-top: 20px; }
  .u-mt-25-sm { margin-top: 25px; }
  .u-mt-30-sm { margin-top: 30px; }
  .u-mt-40-sm { margin-top: 40px; }
}
@media screen and (min-width: 768px) {
  .u-mt-10-md { margin-top: 10px; }
  .u-mt-15-md { margin-top: 15px; }
  .u-mt-20-md { margin-top: 20px; }
  .u-mt-25-md { margin-top: 25px; }
  .u-mt-30-md { margin-top: 30px; }
  .u-mt-35-md { margin-top: 35px; }
  .u-mt-40-md { margin-top: 40px; }
  .u-mt-45-md { margin-top: 45px; }
  .u-mt-50-md { margin-top: 50px; }
}
@media screen and (min-width: 992px) {
  .u-mt-10-lg { margin-top: 10px; }
  .u-mt-15-lg { margin-top: 15px; }
  .u-mt-20-lg { margin-top: 20px; }
  .u-mt-25-lg { margin-top: 25px; }
  .u-mt-30-lg { margin-top: 30px; }
  .u-mt-35-lg { margin-top: 35px; }
  .u-mt-40-lg { margin-top: 40px; }
  .u-mt-45-lg { margin-top: 45px; }
  .u-mt-50-lg { margin-top: 50px; }
  .u-mt-60-lg { margin-top: 60px; }
  .u-mt-70-lg { margin-top: 70px; }
  .u-mt-80-lg { margin-top: 80px; }
}
@media screen and (min-width: 1200px) {
  .u-mt-10-xl { margin-top: 10px; }
  .u-mt-15-xl { margin-top: 15px; }
  .u-mt-20-xl { margin-top: 20px; }
  .u-mt-25-xl { margin-top: 25px; }
  .u-mt-30-xl { margin-top: 30px; }
  .u-mt-35-xl { margin-top: 35px; }
  .u-mt-40-xl { margin-top: 40px; }
  .u-mt-45-xl { margin-top: 45px; }
  .u-mt-50-xl { margin-top: 50px; }
  .u-mt-60-xl { margin-top: 60px; }
  .u-mt-70-xl { margin-top: 70px; }
  .u-mt-80-xl { margin-top: 80px; }
}
@media screen and (min-width: 1400px) {
  .u-mt-10-xxl { margin-top: 10px; }
  .u-mt-15-xxl { margin-top: 15px; }
  .u-mt-20-xxl { margin-top: 20px; }
  .u-mt-30-xxl { margin-top: 30px; }
  .u-mt-40-xxl { margin-top: 40px; }
  .u-mt-50-xxl { margin-top: 50px; }
  .u-mt-60-xxl { margin-top: 60px; }
  .u-mt-70-xxl { margin-top: 70px; }
  .u-mt-80-xxl { margin-top: 80px; }
}

/*------------------------------------------------------------
  p-faq-container
------------------------------------------------------------*/
.p-faq-container {
  padding: 30px 15px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #b2dfdb;
}
.p-faq-container__head {
  background: url("../img/support/faq/ico-question.png") no-repeat;
  background-position: 0% 50%;
  background-size: 50px auto;
  min-height: 50px;
  padding: 10px 0 10px 55px;
  color: var(--color-main);
  font-size: 18px;
  font-weight: bold;
  text-align: left;
}
.p-faq-container__body {
  background: url("../img/support/faq/ico-answer.png") no-repeat;
  background-position: 0% 0%;
  background-size: 50px auto;
  padding: 15px 0 0 55px;
}
.p-faq-container__body a {
  color: var(--color-main);
  transition: var(--transition);
}
@media screen and (min-width: 992px) {
  .p-faq-container {
    padding: 40px 50px;
  }
  .p-faq-container__head {
    padding: 20px 0 20px 65px;
    min-height: 60px;
    background-size: 60px auto;
    font-size: 22px;
  }
  .p-faq-container__body {
    background-size: 60px auto;
    padding: 15px 0 0 65px;
  }
}
@media (hover: hover) {
  .p-faq-container__body a:hover {
    opacity: .7;
  }
}

/*------------------------------------------------------------
  p-faq-search
------------------------------------------------------------*/
.p-faq-search {
  display: grid;
  gap: 15px;
}
.p-faq-search-keyword {
  background: var(--color-sub);
}
.p-faq-search-keyword__input {
  padding: 10px 20px;
  background: #f8f8f8;
}
.p-faq-search-keyword__input .submit_button03 {
  display: inline-block;
  width: 100%;
  margin: 10px 0 0;
  text-align: center;
}
.p-faq-search-keyword__input .submit_button03 input[type="submit"] {
  display: inline-block;
  width: 144px;
  margin: 0 auto;
  padding: 8px 20px;
  background: #263238;
  border-radius: 36px;
  border: none;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.p-faq-search-keyword__input input[type="text"] {
  padding: 8px 10px;
  transition: border var(--transition);
}
.p-faq-search-keyword__input input[type="text"]:focus {
  box-shadow: 0 0 4px rgb(0 0 0 / .1) inset;
  border-color: #263238;
}
.p-faq-search-title {
  padding: 15px 10px 15px 55px;
  background: var(--color-sub) url("../img/support/faq/ico-search-btn.png") no-repeat 15px 50% / 36px auto;
  font-size: 16px;
  font-weight: 500;
}
.p-faq-search-category-wrap--pc {
  display: none;
}
.p-faq-search-category-wrap--sp {
  background: #f8f8f8;
  padding: 10px 20px;
}
.p-faq-search-category {
  display: grid;
}
.p-faq-category-select {
  display: block;
  padding: 8px 10px;
  max-width: 640px;
  margin: 0 auto;
}
.p-faq-search-category-list {
  display: grid;
  row-gap: 15px;
  grid-template-columns: repeat(2,1fr);
}
.p-faq-search-category-list__item {
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-right: 1px solid var(--color-main);
  text-align: center;
}
.p-faq-search-category-list__item:nth-child(2n+1) {
  border-left: 1px solid var(--color-main);
}
.p-faq-search-category-list__item a {
  padding: 5px 10px;
}
.p-faq-search-category-list__item a:hover {
  color: #263238;
}
.p-faq-search-category-list__item a span {
  position: relative;
  display: inline-block;
}
.p-faq-search-category-list__item a span::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin: 0 auto;
  width: 0;
  border-bottom: 3px solid #b2dfdb;
  transform: translateX(-50%);
  transition: width .3s ease;
}
.p-faq-search-category-list__item.is-active a span::after,
.p-faq-search-category-list__item a:hover span::after {
  width: 100%;
}
@media screen and (min-width: 576px) {
  .p-faq-search-keyword {
    display: grid;
    grid-template-columns: min(240px, 38%) auto;
    align-items: center;
  }
  .p-faq-search-keyword__input {
    padding: 10px 10px 10px 0;
    background: var(--color-sub);
  }
  .p-faq-search-keyword__input form {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .p-faq-search-keyword__input .submit_button03 {
    margin: 0;
    text-align: left;
  }
  .p-faq-search-category-list {
    grid-template-columns: repeat(3,1fr);
  }
  .p-faq-search-category-list__item:nth-child(2n+1) {
    border-left: none;
  }
  .p-faq-search-category-list__item:nth-child(3n+1) {
    border-left: 1px solid var(--color-main);
  }
}
@media screen and (min-width: 992px) {
  .p-faq-search {
    gap: 40px;
  }
  .p-faq-search-title {
    font-size: 20px;
  }
  .p-faq-search-keyword__input .submit_button03 input[type="submit"] {
    font-size: 18px;
  }
  .p-faq-search-category {
    gap: 20px;
  }
  .p-faq-search-category-wrap--pc {
    display: block;
  }
  .p-faq-search-category-wrap--sp {
    display: none;
  }
  .p-faq-search-category-list {
    margin: 0 40px;
    row-gap: 20px;
    grid-template-columns: repeat(5,1fr);
  }
  .p-faq-search-category-list__item:nth-child(3n+1) {
    border-left: none;
  }
  .p-faq-search-category-list__item:nth-child(5n+1) {
    border-left: 1px solid var(--color-main);
  }
  .p-faq-search-category-list__item a {
    padding: 10px;
  }
}

/*------------------------------------------------------------
  p-faq-result
------------------------------------------------------------*/
.p-faq-result-list {
  display: grid;
  gap: 40px;
}
.p-faq-result-list__title {
  position: relative;
  margin: 0 0 .5em 0;
  padding: 0 0 .5em 24px;
  border-bottom: 2px solid var(--color-main);
  color: var(--color-main);
  font-size: 18px;
  font-weight: bold;
}
.p-faq-result-list__title::before {
  content: "";
  position: absolute;
  top: .6em;
  left: 0;
  width: 8px;
  height: 8px;
  border-top: solid 2px var(--color-main);
  border-right: solid 2px var(--color-main);
  transform: rotate(45deg);
}
.p-faq-result-list__link {
  transition: var(--transition);
}
.p-faq-result-nav {
  margin: 0;
}
@media screen and (min-width: 992px) {
  .p-faq-result-list__title {
    font-size: 20px;
  }
}