section {
  max-width: 100%;
}

.page__title {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 16px;
}

/* hover */
a:hover {
  cursor: pointer;
  opacity: 0.5;
  color: #ea9c80;
}
a:not(.kodawari__title_japanese) {
  color: #3b3b3b;
}

/* btn */
@media screen and (min-width: 769px) {
  .expc {
      display: none;
  }
}

section.page__contents {
  z-index: 1;
  position: relative;
}

.page__title {
  background: #f5f5f5;
  margin-bottom: clamp(1.125rem, 0.9583rem + 0.8889vw, 1.625rem);
}
.page__title_text {
  grid-column: col-start 3 / span 8;
}
@media screen and (max-width: 1365px) {
  .page__title_text {
      grid-column: col-start 2 / span 10;
  }
}
@media screen and (min-width: 769px) and (max-width: 1007px) {
  .page__title_text {
      grid-column: col-start 1 / span 12;
  }
}
@media screen and (max-width: 768px) {
  .page__title_text {
      grid-column: col-start 1 / span 12;
  }
}
.page__title_text {
  padding-top: clamp(2.125rem, 1.7614rem + 1.8182vw, 3.125rem);
  padding-bottom: clamp(2.125rem, 1.7614rem + 1.8182vw, 3.125rem);
}
.page__title_text h1 {
  font-size: clamp(1.625rem, 1.3068rem + 1.5909vw, 2.5rem);
  font-weight: 700;
  color: #000;
  text-align: center;
}
.page__title_text__smaller h1 {
  font-size: clamp(1.625rem, 1.3068rem + 1.5909vw, 2.5rem);
}
@media screen and (max-width: 863px) {
  .page__title_text h1 {
      max-width: 80%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 0rem;
  }
}

.page__wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 16px;
}
@media screen and (min-width: 769px) and (max-width: 1007px) {
  .page__wrapper {
      padding-left: 16px;
      padding-right: 16px;
  }
}
@media screen and (max-width: 768px) {
  .page__wrapper {
      display: block;
      padding-right: 16px;
      padding-left: 16px;
  }
}
.page__box {
  grid-column: col-start 3 / span 8;
  max-width: 1200px;
  background-color: rgba(255, 255, 255, 0.8);
  margin: 0 auto;
}
@media screen and (max-width: 1365px) {
  .page__box {
      grid-column: col-start 2 / span 10;
  }
}
@media screen and (min-width: 769px) and (max-width: 1007px) {
  .page__box {
      grid-column: col-start 1 / span 12;
  }
}
.page__wrapper h2 {
  font-size: clamp(1.375rem, 1.1023rem + 1.3636vw, 2.125rem);
  font-weight: 600;
  margin: clamp(2.125rem, 1.7614rem + 1.8182vw, 3.125rem) 0
      clamp(10px, 2.5vw, 22px);
  color: #ea9c80;
  text-align: center;
}
.page__wrapper h3 {
  font-size: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem);
  font-weight: 600;
  margin-bottom: 12px;
  color: #000;
}
.page__wrapper p {
  font-size: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem);
  color: #000;
  margin-bottom: clamp(1.125rem, 0.9583rem + 0.8889vw, 1.625rem);
}

/* flex style */
.flex {
  display: flex;
}
@media screen and (max-width: 768px) {
  .flex {
      display: block;
  }
}

@media screen and (max-width: 768px) {
  .contact-faq-content h2 {
      margin: clamp(2.125rem, 1.7614rem + 1.8182vw, 3.125rem) auto
          clamp(10px, 2.5vw, 22px);
  }
}
.contact-faq-content .faq-area-content h2 {
  color: #ea9c80;
}
.faq-area-content .faq-content {
  font-size: 1.6rem;
  margin-bottom: 1.6rem;
}
.faq-area-content .faq-content a {
  text-decoration: underline;
}
.faq-area-content .faq-content a:hover {
  color: #ea9c80;
}
#faq__contents__body {
  padding-top: 5rem;
  border-top: solid #ddd 1px;
  margin-top: 2rem;
}
@media screen and (max-width: 768px) {
  #faq__contents__body {
      padding-top: 3rem;
      margin-top: 1rem;
  }
}
.faq-content a {
  color: #ea9c80;
  text-decoration: underline;
}
.faq-area-content input {
  display: none;
}
.faq-area-content label {
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #000;
  position: relative;
  padding: 1.5rem 2rem 1.5rem 4rem;
  background-color: #f6f6f6;
  border: solid 1px #efefef;
  font-size: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem);
}
@media screen and (max-width: 768px) {
  .faq-area-content label {
      padding: 1.5rem 3.3rem 1.5rem 4rem;
  }
}
.faq-content label:before {
  content: "Q";
  display: inline-block;
  width: 3.4rem;
  font-family: "Jost", sans-serif;
  font-size: clamp(1.5rem, 1.3182rem + 0.9091vw, 2rem);
  vertical-align: sub;
  color: #ea9c80;
  position: absolute;
      top: 20px;
      left: 14px;
}
@media screen and (max-width: 768px) {
  .faq-content label:before {
      width: 2.4rem;
      position: absolute;
      top: 16px;
      left: 14px;
  }
}
.acc-show {
  height: 0;
  overflow-y: hidden;
  transition: padding-bottom 0.5s, padding-top 0.5s;
  -webkit-transition: padding-bottom 0.5s, padding-top 0.5s;
  -moz-transition: padding-bottom 0.5s, padding-top 0.5s;
  -ms-transition: padding-bottom 0.5s, padding-top 0.5s;
  -o-transition: padding-bottom 0.5s, padding-top 0.5s;
  background-color: #fff;
}
.faq-area-content label:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: #ea9c80 2px solid;
  border-right: #ea9c80 2px solid;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0%;
  margin: auto;
  transition: all 0.5s 0s ease;
}
.faq-area-content input[type="checkbox"]:checked + label:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: #ea9c80 2px solid;
  border-right: #ea9c80 2px solid;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  right: 20px;
  top: 7%;
  bottom: 0;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .faq-area-content label:after {
      position: absolute;
      right: 14px;
      top: 18px;
      bottom: auto;
      margin: 0;
  }
  .faq-area-content input[type="checkbox"]:checked + label:after {
      position: absolute;
      right: 14px;
      top: 22px;
      bottom: auto;
      margin: 0;
  }
}
.faq-area-content .link-list {
  margin-bottom: 3.2rem;
}
.faq-area-content .css-acc:checked ~ .acc-show {
  height: auto;
  opacity: 1;
  padding-top: clamp(1.125rem, 0.9583rem + 0.8889vw, 1.625rem);
  padding-bottom: clamp(1.125rem, 0.9583rem + 0.8889vw, 1.625rem);
}
.acc-show p,
.acc-show ul {
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: left;
  font-size: clamp(0.875rem, 0.75rem + 0.6667vw, 1.25rem);
}
.faq-area-list {
  margin-top: 3rem;
  margin-bottom: 3rem;
  background: #f7f7f7;
  padding: 2rem 5rem 2.8rem;
}
@media screen and (max-width: 768px) {
  .faq-area-list {
      margin-top: 1rem;
      margin-bottom: 3rem;
      padding: 1.6rem 1.6rem 2rem;
  }
}
.contact-faq-content .faq-area-list h2 {
  font-family: "Antonio", sans-serif;
  font-size: clamp(0.7875rem, 0.675rem + 0.6vw, 1.125rem);
  color: #000;
  font-weight: 400;
  text-align: center;
  margin: 0 0 2rem;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .contact-faq-content .faq-area-list h2 {
      margin: 0 0 1.6rem;
  }
}
.faq-area-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.faq-area-list ul li {
  font-size: clamp(0.625rem, 0.4886rem + 0.6818vw, 1rem);
}
.faq-area-list ul li a {
  display: block;
  border: solid 1px #cbcbcb;
  padding: 0.8rem 3rem 1rem 1.6rem;
  border-radius: 3rem;
  text-align: left;
  position: relative;
  background: #fff;
  transition: all 0.3s cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
.faq-area-list ul li a span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #ea9c80;
  border-right: 1.5px solid #ea9c80;
  transform: rotate(45deg);
  position: absolute;
  top: 40%;
  right: 1.5rem;
}
@media screen and (max-width: 768px) {
  .faq-area-list ul li {
      font-size: clamp(0.75rem, 0.6591rem + 0.4545vw, 1rem);
      padding: 0;
  }
  .faq-area-list ul li a {
      display: block;
      border: solid 1px #cbcbcb;
      padding: 1rem 2rem 1.2rem 1.6rem;
      border-radius: 2rem;
      text-align: left;
      position: relative;
  }
  .faq-area-list ul li a span {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-top: 1.5px solid #ea9c80;
      border-right: 1.5px solid #ea9c80;
      transform: rotate(45deg);
      position: absolute;
      top: 42%;
      right: 1rem;
  }
}
@media screen and (max-width: 375px) {
  .faq-area-list ul li {
  }
  .faq-area-list ul li a {
      display: block;
      border: solid 1px #cbcbcb;
      padding: 0.5rem 2rem 0.7rem 1.6rem;
      border-radius: 2rem;
      text-align: left;
      position: relative;
  }
}
.faq-area-list ul li a:hover,
.faq-area-list ul li a:hover span {
  border-color: #ea9c80;
  color: #ea9c80;
  opacity: 1;
}
.faq-area-content h3 {
  text-align: center;
  padding: clamp(2.125rem, 1.7614rem + 1.8182vw, 3.125rem) 0
      clamp(10px, 2.5vw, 22px);
  font-size: clamp(1.375rem, 1.1023rem + 1.3636vw, 2.125rem);
}
@media screen and (max-width: 768px) {
  .faq-area-content h3 {
      padding: clamp(2.125rem, 1.7614rem + 1.8182vw, 3.125rem) 0
          clamp(10px, 2.5vw, 22px);
  }
}
.page__wrapper p.pagetop-area-contents {
  margin: 5rem 0 2rem;
  text-align: center;
  border-top: solid 1px #ddd;
}
@media screen and (max-width: 768px) {
  .page__wrapper p.pagetop-area-contents {
      margin: 5rem 0 1rem;
  }
}

p.pagetop-area-contents a {
  padding: 4px 36px 7px 16px;
  position: relative;
  top: -11px;
  background: #fff;
}
p.pagetop-area-contents a:hover {
  opacity: 1;
  color: #ea9c80;
  border-color: #ea9c80;
}
p.pagetop-area-contents a span {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: #999 1.5px solid;
  border-right: #999 1.5px solid;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  right: 16px;
  top: 7%;
  bottom: 0;
  margin: auto;
}
p.pagetop-area-contents a:hover span {
  border-color: #ea9c80;
}
.faq-content a.link-blank {
  display: block;
  border: solid 1px #ea9c80;
  border-radius: 10px;
  padding: 4px 23px 7px 12px;
  text-decoration: none;
  background: url(/view/common/arrow_qac.svg) no-repeat 96% center;
}

.headertoppng a{
  width: 100%;
  display: flex;
  justify-content: right;
}

.headertoppng img{
  width: 40%;
}
@media screen and (max-width: 500px) {
  .headertoppng img{
    width: 60%;
  }
}