@charset "utf-8";
@font-face {
font-family: Archivo_Black;
font-display: swap;
src: url("/faq/fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("TrueType");
}
@font-face {
font-family: Cabin;
font-display: swap;
src: url("/faq/fonts/Cabin/Cabin-Bold.ttf") format("TrueType");
}

:root {
  --color-faq: #029220;
  --color-faq: #0e6cbc;
  --color-faq: #757a7e;
  --color-faqhover: rgb(20, 110, 190);

  --font-archivo: "Archivo_Black", serif;
  --font-cabin: "Cabin", serif;
}

.container-fluid {
  padding: 0;
}

.contents-wrap {
  max-width: 1200px;
  margin-inline: auto;
  font-size: max(15px, min(2vw, 16px));
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}
.contents-wrap a {
  transition: all 0.3s;
}
.contents-wrap a:hover {
  color: var(--color-faqhover);
}

h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  line-height: 1.4;
}

.breadcrumb-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: max(11px, min(2vw, 14px));
  line-height: 1.8;
}
.breadcrumb-list li {
  position: relative;
  display: inline-block;
}
.breadcrumb-list li:not(:last-child) {
  margin-right: 20px;
}
.breadcrumb-list li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 6px;
  height: 6px;
  border: 1px solid;
  border-color: #8e8e8e #8e8e8e transparent transparent;
  transform: translateY(-50%) rotate(45deg);
  -moz-transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
}

.faq-title {
  margin: 0.8em 0 0.6em;
  font-size: max(24px, min(3vw, 30px));
  line-height: 1.5;
}
.faq-title.top {
  font-size: max(32px, min(5vw, 46px));
}
.faq-title .title-main {
  font-family: var(--font-archivo);
  font-weight: 900;
  margin-right: 0.35em;
}
.faq-title.top .title-main {
  margin-right: 0.6em;
}
.faq-title .title-sub {
  font-size: 58%;
  font-weight: 700;
}

.item-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  justify-content: center;
}
.item-wrap .item {
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  border: 2px solid #cacbce;
}
.item-title {
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  background: #f0f1f3;
  padding: 1.5em 0;
  position: absolute;
  width: 100%;
}
.item-wrap .item .item-inner {
  padding: 7.5em 1.5em 2.1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.item ul {
  padding-left: 3em;
  list-style: none;
  margin-bottom: 0;
  font-size: max(14px, min(2vw, 15px));
  line-height: 1.6;
}
.item ul li:not(:last-child) {
  margin-bottom: 1.8em;
}
.item ul li a {
  color: inherit;
  display: block;
  position: relative;
}
.item ul li a::before {
  content: "Q";
  color: #757a7e;
  font-weight: 700;
  border-radius: 50px;
  width: 1.6em;
  display: inline-block;
  height: 1.6em;
  line-height: 1.6em;
  text-align: center;
  font-size: 120%;
  font-family: var(--font-cabin);
  position: relative;
  top: -0.2em;
  background: #e7e8eb;
  position: absolute;
  left: -2.4em;
  transition: all 0.3s;
}
.item ul li a:hover {
  color: var(--color-faqhover);
}
.item ul li a:hover::before {
  color: var(--color-faqhover);
  background: #d9e9f7;
}

.more-btn {
  text-align: center;
  margin-top: 1.4em;
}
/* .more-btn a,
.detail-btn a {
  color: var(--color-faq);
  padding: 0.8em 1.6em;
  font-size: 14px;
  border-radius: 50px;
  display: inline-block;
  position: relative;
  border: 2px solid var(--color-faq);
  font-weight: 700;
  width: max(135px, min(10vw, 140px));
} */
.more-btn a,
.detail-btn a {
  color: inherit;
  padding: 0.5em 2em;
}
.more-btn a span,
.detail-btn a span {
  position: relative;
}
.more-btn a span::before,
.detail-btn a span::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  width: 9px;
  height: 9px;
  border: 1px solid;
  transform: translateY(-50%) rotate(45deg);
  -moz-transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
  border-color: #333 #333 transparent transparent;
}
.more-btn a:hover,
.detail-btn a:hover {
  text-decoration: none;
  border-color: var(--color-faqhover);
  color: var(--color-faqhover);
}
.more-btn a:hover span::before,
.detail-btn a:hover span::before {
  border-color: var(--color-faqhover) var(--color-faqhover) transparent
    transparent;
}

.inquiry-wrap {
  margin: 3em auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.inquiry-wrap p {
  font-size: max(12px, min(2vw, 14px));
}

.inquiry-wrap .inquiry-btn {
  display: inline-block;
  padding: 1.4em 8em;
  font-size: 18px;
  border-radius: 50px;
  font-weight: 700;
  position: relative;
  border: 2px solid #cacbce;
  color: var(--color-faq);
}
.inquiry-wrap .inquiry-btn:hover {
  text-decoration: none;
  color: var(--color-faqhover);
  border-color: var(--color-faqhover);
}
.inquiry-wrap .inquiry-btn .arrow {
  text-align: center;
  border-radius: 50%;
  position: absolute;
  display: block;
  transition: all 0.3s ease;
  transform: translateY(-50%);
  top: 50%;
  background: var(--color-faq);
  right: 17px;
  width: 43px;
  height: 43px;
}
.inquiry-wrap .inquiry-btn .arrow::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  margin: auto;
  transform: rotate(45deg);
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  border-radius: 2px;
}
.inquiry-wrap .inquiry-btn:hover .arrow {
  background: var(--color-faqhover);
  border-color: var(--color-faqhover);
}

@media (max-width: 1200px) {
  .item-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .item-title {
    font-size: 17px;
    padding: 1.3em 0;
  }
  .item-wrap .item .item-inner {
    padding: 6.3em 1.2em 1.8em;
  }

  .item-wrap .item {
    border-radius: 20px;
  }
}

@media (max-width: 640px) {
  .item-wrap {
    grid-template-columns: auto;
    gap: 20px;
  }

  .faq-title {
    margin: 0.5em auto 0.7em;
  }

  .faq-title.top .title-sub {
    /* font-size: 48%; */
    display: block;
  }

  .more-btn a,
  .detail-btn a {
    /* padding-top: .6em; */
    /* padding-bottom: .6em; */
  }

  .inquiry-wrap .inquiry-btn {
    display: block;
    padding: 1em 2em;
    font-size: 16px;
    max-width: 300px;
    margin-inline: auto;
  }
  .inquiry-wrap .inquiry-btn .arrow {
    right: 13px;
    width: 35px;
    height: 35px;
  }
  .inquiry-wrap .inquiry-btn .arrow::before {
    right: 13px;
    width: 10px;
    height: 10px;
  }
  .more-btn a span::before,
  .detail-btn a span::before {
    /* right: -17px; */
  }
}

@media (max-width: 320px) {
  .faq-title.top {
    align-items: center;
    line-height: 1.4;
  }
}

/* グループindex
------------------------------- */

.group-wrap {
  background: #fff;
  padding: 25px 25px 30px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 5vw;
  border: 1px solid #cacbce;
}

.group-wrap p {
  margin-bottom: 1.2em;
}

.group-wrap .main-menu {
  line-height: 1.8;
}

/* サイドメニュー */
.category-head {
  margin: 0 0 1.4em;
  font-size: max(16px, min(2.5vw, 17px));
  font-weight: 700;
  position: relative;
  line-height: 1.4;
}
.category-head::before {
  content: "";
  width: 100%;
  height: 1px;
  background: #333;
  position: absolute;
  left: 0;
  top: 11px;
}
.category-head span {
  padding: 0 10px 0 0;
  background: #fff;
  position: relative;
}

.group.item ul {
  font-size: max(14px, min(2vw, 16px));
}

.group-wrap .side-menu .item:not(:first-of-type) {
  margin-top: 1em;
}
.group-wrap .side-menu .item-title {
  position: relative;
  font-size: 14px;
  padding: 0.9em 0.65em;
  border-radius: 4px;
  display: block;
  box-shadow: none;
  border: none;
  transition: all 0.3s;
}

.group-wrap .side-menu .item-title span {
  position: relative;
  display: block;
}
button.item-title span::before,
button.item-title span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.5px;
  height: 8px;
  background-color: #757a7e;
  transition: 0.3s;
}
button.item-title span::before {
  transform: translateY(-50%) rotate(-45deg);
  right: 15px;
}
button.item-title span::after {
  transform: translateY(-50%) rotate(45deg);
  right: 10px;
}

button.item-title.active span::before {
  transform: translateY(-50%) rotate(-135deg);
  transition: 0.3s;
}
button.item-title.active span::after {
  transform: translateY(-50%) rotate(135deg);
  transition: 0.3s;
}

@media (hover: hover) {
  .group-wrap .side-menu .item-title:hover {
    background: var(--color-faqhover);
    color: #fff;
  }
  button.item-title:hover span::after,
  button.item-title:hover span::before {
    background-color: #fff;
  }
}

.group-wrap .side-menu .item-inner {
  overflow: hidden;
  height: 0;
  transition: 0.1s;
}
.group-wrap .side-menu .item-inner.active {
  overflow: initial;
  height: auto;
  margin-bottom: 2.4em;
  margin-top: 1.7em;
}

.group-wrap .side-menu .item ul {
  font-size: max(13px, min(2vw, 14px));
  /* padding-left: 3.8em; */
}

.side-menu:not(.group) .item ul li a.active {
  font-weight: 700;
}

.group-wrap .side-menu .item ul li a::before {
  left: -2.2em;
  font-size: 110%;
  top: -0.15em;
}

.group-wrap .side-menu .item .more-btn {
  margin-top: 1em;
}
.group-wrap .side-menu .item .more-btn a {
  font-size: 12px;
}
.group-wrap .side-menu .item .more-btn a span::before {
  left: -25px;
}

/* グループメインメニュー */
.group-head {
  text-align: center;
  font-weight: 700;
  margin: 0 0 2em;
  font-size: 26px;
}

.group-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.group-menu a {
  font-size: 16px;
  border: 2px solid var(--color-faq);
  border-radius: 8px;
  padding: 0.4em 1.2em 0.7em;
  font-weight: 700;
  color: var(--color-faq);
  display: grid;
  align-items: center;
  min-height: 70px;
  box-shadow: 4px 4px var(--color-faq);
  line-height: 1.5;
}
.group-menu a span {
  display: flex;
  align-items: baseline;
}
.group-menu a span::before {
  content: "Q";
  color: var(--color-faq);
  font-weight: 700;
  display: inline-block;
  font-size: 145%;
  margin-right: 0.7em;
  font-family: var(--font-cabin);
  position: relative;
  top: 1px;
  transition: all 0.3s;
}
.group-menu a:hover {
  text-decoration: none;
  border-color: var(--color-faqhover);
  box-shadow: 4px 4px var(--color-faqhover);
  color: var(--color-faqhover);
}
.group-menu a:hover span::before {
  color: var(--color-faqhover);
}

/* Q&A
------------------------------- */

.q-head {
  font-weight: 700;
  font-size: 28px;
  margin: 0 0 2.4em;
  line-height: 1.6;
}
.q-head .sub {
  display: block;
  color: var(--color-faqhover);
  font-size: 52%;
  margin-bottom: 1em;
}

.qa-box h4:not([class]) {
  font-weight: 700;
  border-left: 6px solid var(--color-faq);
  padding: 12px 15px;
  font-size: 22px;
  margin-top: 2.8em;
  margin-bottom: 1.2em;
  background: #f4f4f7;
}

.qa-box ul,
.qa-box ol {
  padding-left: 20px;
  margin: 0 0 1.2em;
}
.qa-box :is(ul, ol) + h4 {
}

.qa-box ol:not([class]) {
  counter-reset: reference;
  list-style: none;
  padding-left: 0;
  margin-top: 2em;
}
.qa-box ol:not([class]) > li::before {
  counter-increment: reference 1;
  content: "STEP " counter(reference);
  color: var(--color-faq);
  font-weight: 700;
  display: inline-block;
  left: -30px;
  min-width: 80px;
  height: 35px;
  line-height: 30px;
  text-align: center;
  border-radius: 3px;
  border: 2px solid var(--color-faq);
  font-size: 18px;
  margin-bottom: 0.8em;
  padding: 0 10px;
}

.qa-box ol:not([class]) > li:not(:last-child) {
  margin-bottom: 2em;
  position: relative;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 2em;
}
.qa-box ol > li p:last-of-type:not(+ ul, + ol) {
  margin-bottom: 0;
}
.qa-box ol:not([class]) li > *:last-child {
  margin-bottom: 0;
}

.qa-box ul:not([class]) > li:not(:last-child),
.qa-box ol[class] > li:not(:last-child),
.copy-box ul > li:not(:last-child) {
  margin-bottom: 0.6em;
}

.detail-btn {
  text-align: center;
}
.detail-btn a {
  font-size: 16px;
  padding: 1em 4.2em 1em 5.2em;
}
.detail-btn a span::before {
  left: -22px;
  top: 53%;
  width: 9px;
  height: 9px;
}

.reference-box {
  padding: 1.4em 1.2em 1.2em;
  border: 3px solid #dcdcdc;
  font-size: 85%;
  margin-top: 2.4em;
  margin-bottom: 10px;
  line-height: 1.6;
  position: relative;
}
.reference-box::before {
  content: "\95A2\9023\3059\308BQ&A";
  position: absolute;
  top: -12px;
  background: #fff;
  padding: 0 8px;
  left: 14px;
  color: #95999e;
}
.reference-box p {
  margin-bottom: 0.5em;
}
.reference-box p:last-of-type {
  margin-bottom: 0;
}

.main-menu .fa-sistrix {
  background: var(--color-yodosha);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50px;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
  margin: 0 4px;
}

.qa-box figure {
  margin: 2em auto 1em;
  border: 1px solid #b1b1b1;
  width: fit-content;
}

.group-wrap time {
  margin: 2em 0 0;
  color: #999;
  text-align: right;
  font-size: 11px;
  display: block;
}

/* クリップボードにコピー */
.copy-box {
  background: #f8f8f8;
  padding: max(1.4em, min(3vw, 2em));
  margin: 2em 0;
  border-radius: 10px;
  font-size: 90%;
}

.copy-btn {
  margin-top: 30px;
}
.copy-btn a {
  color: rgb(8 19 26 / 66%);
  padding: 0px max(28px, min(3vw, 30px));
  font-weight: 700;
  font-size: 97%;
  width: fit-content;
  display: block;
  margin-inline: auto;
  position: relative;
  text-align: center;
  text-decoration: underline;
}
.copy-btn a i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0px;
  color: var(--color-faqhover);
  font-size: 130%;
}

@media (max-width: 920px) {
  .group-wrap {
    display: flex;
    flex-direction: column-reverse;
  }

  .group-wrap {
    gap: 16vw;
  }

  .group-wrap .side-menu .item-title::before {
    top: 3.35em;
  }
}

@media (max-width: 767px) {
  .group-head {
    font-size: max(20px, min(1.5vw, 24px));
  }

  .q-head {
    font-size: max(22px, min(3vw, 28px));
  }
  .q-head .sub {
    font-size: 62%;
  }

  .qa-box h4:not([class]) {
    font-size: max(18px, min(2.5vw, 22px));
  }

  .qa-box ol:not([class]) > li::before {
    min-width: 75px;
    height: 31px;
    line-height: 28px;
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .group-wrap {
    padding: 25px 15px 30px;
  }

  .group-menu {
    grid-template-columns: auto;
  }
}

/*--------margin--------*/
.mt-2:not(:root) {
  margin-top: -2em;
}
.mt0 {
  margin-top: 0em !important;
}
.mt0-5:not(:root) {
  margin-top: 0.5em;
}
.mt1:not(:root) {
  margin-top: 1em;
}
.mt1-2:not(:root) {
  margin-top: 1.2em;
}
.mt1-4:not(:root) {
  margin-top: 1.4em;
}
.mt1-5:not(:root) {
  margin-top: 1.5em;
}
.mt1-6:not(:root) {
  margin-top: 1.6em;
}
.mt1-8:not(:root) {
  margin-top: 1.8em;
}
.mt2:not(:root) {
  margin-top: 2em;
}
.mt2-2:not(:root) {
  margin-top: 2.2em;
}
.mt2-4:not(:root) {
  margin-top: 2.4em;
}
.mt2-5:not(:root) {
  margin-top: 2.5em;
}
.mt2-6:not(:root) {
  margin-top: 2.6em;
}
.mt2-8:not(:root) {
  margin-top: 2.8em;
}
.mt3:not(:root) {
  margin-top: 3em;
}
.mt3-2:not(:root) {
  margin-top: 3.2em;
}
.mt3-4:not(:root) {
  margin-top: 3.4em;
}
.mt3-6:not(:root) {
  margin-top: 3.6em;
}
.mt3-8:not(:root) {
  margin-top: 3.8em;
}
.mt4:not(:root) {
  margin-top: 4em;
}
.mt5:not(:root) {
  margin-top: 5em;
}
.mt6:not(:root) {
  margin-top: 6em;
}
.mt7:not(:root) {
  margin-top: 7em;
}
.mt8:not(:root) {
  margin-top: 8em;
}
.mt10:not(:root) {
  margin-top: 10em;
}
.mt11:not(:root) {
  margin-top: 11em;
}
.mt12:not(:root) {
  margin-top: 12em;
}
.mt15:not(:root) {
  margin-top: 15em;
}
.mt20:not(:root) {
  margin-top: 20em;
}
.mt30:not(:root) {
  margin-top: 30em;
}

.mb0:not(:root) {
  margin-bottom: 0em;
}
.mb0-5:not(:root) {
  margin-bottom: 0.5em;
}
.mb1:not(:root) {
  margin-bottom: 1em;
}
.mb1-2:not(:root) {
  margin-bottom: 1.2em;
}
.mb1-4:not(:root) {
  margin-bottom: 1.4em;
}
.mb1-5:not(:root) {
  margin-bottom: 1.5em;
}
.mb1-6:not(:root) {
  margin-bottom: 1.6em;
}
.mb1-8:not(:root) {
  margin-bottom: 1.8em;
}
.mb2:not(:root) {
  margin-bottom: 2em;
}
.mb2-2:not(:root) {
  margin-bottom: 2.2em;
}
.mb2-4:not(:root) {
  margin-bottom: 2.4em;
}
.mb2-5:not(:root) {
  margin-bottom: 2.5em;
}
.mb2-6:not(:root) {
  margin-bottom: 2.6em;
}
.mb2-8:not(:root) {
  margin-bottom: 2.8em;
}
.mb3:not(:root) {
  margin-bottom: 3em;
}
.mb3-2:not(:root) {
  margin-bottom: 3.2em;
}
.mb3-4:not(:root) {
  margin-bottom: 3.4em;
}
.mb3-5:not(:root) {
  margin-bottom: 3.5em;
}
.mb3-6:not(:root) {
  margin-bottom: 3.6em;
}
.mb3-8:not(:root) {
  margin-bottom: 2.8em;
}
.mb4:not(:root) {
  margin-bottom: 4em;
}
.mb5:not(:root) {
  margin-bottom: 5em;
}
.mb6:not(:root) {
  margin-bottom: 6em;
}
.mb7:not(:root) {
  margin-bottom: 7em;
}
.mb8:not(:root) {
  margin-bottom: 8em;
}
.mb10:not(:root) {
  margin-bottom: 10em;
}
.mb11:not(:root) {
  margin-bottom: 11em;
}
.mb12:not(:root) {
  margin-bottom: 12em;
}
.mb15:not(:root) {
  margin-bottom: 15em;
}
.mb20:not(:root) {
  margin-bottom: 20em;
}
.mb30:not(:root) {
  margin-bottom: 30em;
}