.section-hero {
  background-image: url(../img/message/hero.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.section-faq {
  padding-top: 21px;
  padding-bottom: 160px;
}

@media only screen and (max-width: 767px) {
  .section-faq {
    padding-top: 10px;
    padding-bottom: 80px;
  }
}

.section-faq .headline {
  position: relative;
  margin-bottom: 110px;
  text-align: right;
}

@media only screen and (max-width: 767px) {
  .section-faq .headline {
    text-align: center;
    margin-bottom: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .section-faq .headline .img {
    margin-left: -15px;
    margin-right: -15px;
  }
  .section-faq .headline .img img {
    width: 100%;
  }
}

.section-faq .headline .txt {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  color: #0d1828;
  letter-spacing: 0.15em;
  padding-right: 97px;
}

@media only screen and (max-width: 767px) {
  .section-faq .headline .txt {
    position: static;
    transform: translate(0);
    padding-right: 0;
    margin-top: -19px;
  }
}

.section-faq .headline .txt > p {
  background: #e42121;
  color: #fff;
  margin-bottom: 30px;
  display: inline-block;
  padding: 11px 34px;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .section-faq .headline .txt > p {
    font-size: 1.6rem;
    padding: 5px 20px;
  }
}

.section-faq .headline .txt > p::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 0 0;
  border-color: #e42121 transparent transparent transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(20px, 100%);
}

@media only screen and (max-width: 767px) {
  .section-faq .headline .txt > p::after {
    border-width: 8px 8px 0 0;
    transform: translate(15px, 100%);
  }
}

.section-faq .headline .txt h2 {
  font-size: 3.3rem;
  margin-bottom: 20px;
  line-height: 1.5;
  letter-spacing: 0.18em;
}

@media only screen and (max-width: 767px) {
  .section-faq .headline .txt h2 {
    font-size: 5.3vw;
  }
}

.section-faq .headline .txt .overview .ttl {
  font-size: 1.5rem;
  margin-bottom: 0.5em;
}

@media only screen and (max-width: 767px) {
  .section-faq .headline .txt .overview .ttl {
    font-size: 1.3rem;
  }
}

.section-faq .headline .txt .overview .name {
  font-size: 3rem;
  line-height: 1;
}

@media only screen and (max-width: 767px) {
  .section-faq .headline .txt .overview .name {
    font-size: 2.1rem;
  }
}

.section-faq .headline .txt .overview .name span {
  font-size: 1.5rem;
  color: #e42121;
  margin-right: 20px;
}

@media only screen and (max-width: 767px) {
  .section-faq .headline .txt .overview .name span {
    font-size: 1.3rem;
    display: block;
    margin-right: 0;
    margin-bottom: 12px;
  }
}

.section-faq .content {
  padding: 0 120px;
}

@media only screen and (max-width: 767px) {
  .section-faq .content {
    padding: 0;
  }
}

.section-faq .content dl {
  border-top: 1px solid #0d1828;
  position: relative;
  padding: 70px 0 120px;
  letter-spacing: 0.15em;
}

@media only screen and (max-width: 767px) {
  .section-faq .content dl {
    padding: 50px 0 70px;
    font-size: 1.4rem;
  }
}

.section-faq .content dl::before {
  content: "Q";
  display: block;
  background: #fff;
  padding: 0 20px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  font-size: 4.9rem;
  font-family: 'Cormorant Garamond', serif;
}

@media only screen and (max-width: 767px) {
  .section-faq .content dl::before {
    font-size: 3.1rem;
    padding: 0 15px;
  }
}

.section-faq .content dl dt {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 60px;
}

@media only screen and (max-width: 767px) {
  .section-faq .content dl dt {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }
}

.section-faq .content dl dd p:not(:last-of-type) {
  line-height: 2;
  margin-bottom: 1.5em;
}

.section-faq .content dl dd .imgarea {
  margin-top: 50px;
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  margin-left: -0.5em;
  margin-right: -0.5em;
}

@media only screen and (max-width: 767px) {
  .section-faq .content dl dd .imgarea {
    margin-top: 30px;
  }
}

.section-faq .content dl dd .imgarea .img {
  width: calc(100% / 3 - 1em);
  margin-left: .5em;
  margin-right: .5em;
}

.section-faq .content dl dd .imgarea .img:not(:nth-last-of-type(-n+3)) {
  margin-bottom: 1em;
}

.section-faq .content dl dd .imgarea .img img {
  width: 100%;
}

.section-faq .content dl dd > .img {
  margin-top: 50px;
}

@media only screen and (max-width: 767px) {
  .section-faq .content dl dd > .img {
    margin-top: 30px;
  }
  .section-faq .content dl dd > .img img {
    width: 100%;
  }
}

.section-message {
  background: #0d1828;
  padding: 0 0 120px;
  margin-left: -40px;
  margin-right: -40px;
  color: #fff;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .section-message {
    margin-left: -25px;
    margin-right: -25px;
    padding: 0 38px 60px;
  }
}

.section-message .headline {
  position: relative;
  letter-spacing: 0.15em;
  line-height: 2;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .section-message .headline {
    padding-top: 70px;
  }
}

.section-message .headline::before {
  content: "";
  display: block;
  width: 235px;
  height: 300px;
  background-image: url(../img/message/message.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-53%, -100%);
}

@media only screen and (max-width: 767px) {
  .section-message .headline::before {
    width: 155px;
    height: 240px;
    transform: translate(-56%, -100%);
    top: 115px;
  }
}

.section-message .headline .hukidasi {
  background: #e42121;
  width: 120px;
  line-height: 120px;
  font-size: 1.9rem;
  margin: 0 auto 16px;
  transform: translateY(-30px);
}

@media only screen and (max-width: 767px) {
  .section-message .headline .hukidasi {
    width: 90px;
    line-height: 90px;
    font-size: 1.4rem;
    transform: translateY(0);
  }
}

.section-message .headline .hukidasi::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #e42121 transparent transparent transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(45px, 100%);
}

@media only screen and (max-width: 767px) {
  .section-message .headline .hukidasi::after {
    border-width: 15px 15px 0 0;
    transform: translate(34px, 100%);
  }
}

.section-message .headline h2 {
  margin-bottom: 32px;
  font-size: 3.1rem;
  line-height: 1.5;
  letter-spacing: 0.21em;
}

@media only screen and (max-width: 767px) {
  .section-message .headline h2 {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }
}

.section-message .headline .lead {
  margin: 0 150px 50px;
  line-height: 2;
  display: inline-block;
  text-align: left;
}

@media only screen and (max-width: 767px) {
  .section-message .headline .lead {
    font-size: 1.4rem;
    margin: 0 0px 40px;
  }
}

.section-message .content p a {
  display: inline-block;
  width: 600px;
  background: #f8d176;
  color: #0d1828;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.15em;
  padding: 36px 0 34px;
}

.section-message .content p a:hover {
  opacity: .7;
}

@media only screen and (max-width: 767px) {
  .section-message .content p a {
    width: 100%;
    font-size: 1.7rem;
    padding: 29px 0 27px;
  }
}

.section-message .content p a span {
  display: block;
  color: #e42121;
  font-size: 1.3rem;
  margin-top: 14px;
}

@media only screen and (max-width: 767px) {
  .section-message .content p a span {
    font-size: 1.1rem;
    margin-top: 8px;
  }
}