@charset "UTF-8";

/**
 * home-building-seminar.css
 *
 * # YDA向け ハウスメーカー選び方講座 （/home-building-seminar/）のcss
 * # ハウスメーカー無料相談 （/soudan-homebuilding/）でも使用。
 *
 * # LP
 * # 下層（会社概要・利用規約・プライバシーポリシー）
 * # フォーム
 *
*/

main {
  letter-spacing: normal;
  color: #333;
}

a { color: #509309; }

h1,h2,h3,h4,h5 {
  font-family: NotoSansJP-bold;
}


/* ==========================================================================
   # 共通ヘッダー
   ========================================================================== */
.l-hbs-header {
  padding: 2.917vw 5.208vw;
  border-bottom: 1px solid #509407;
}
.hbs-header-logo {
  display: block;
  width: 40.833vw;
}

/* ==========================================================================
   # 共通フッター
   ========================================================================== */
.l-hbs-footer {
  padding: 5.417vw 0 0;
  color: #fff;
  background-color: #115236;
}

.hbs-footer-nav {
  display: flex;
  justify-content: center;
  font-size: 3.333vw;
  line-height: 1.4;
  font-family: NotoSansJP-bold;
}
.hbs-footer-nav li {
  padding: 0 2.5vw;
}

.hbs-footer-nav li + li {
  border-left: 1px solid #fff;
}

.hbs-footer-nav li a {
  text-decoration: none;
  color: #fff;
}

.hbs-copyright {
  display: block;
  padding: 4.167vw 0;
  font-size: 2.917vw;
  line-height: 1;
  text-align: center;
}


/* ==========================================================================
   # LP
   ========================================================================== */

/* # CTA
-------------------------------------------------------------------- */
.l-hbs-cta {
  padding: 7.292vw 0 10.417vw;
  background: #2F8F65 url("/sp/images/home-building-seminar/top/cta/bg_cta01.jpg") no-repeat center center / cover;
}

/* 最下部のCTA背景 */
.l-hbs-cta02 {
  padding: 5.833vw 0 9.375vw;
  background: #2F8F65 url("/sp/images/home-building-seminar/top/cta/bg_cta02.jpg") no-repeat center center / cover;
}

.hbs-cta-txt {
  position: relative;
  width: fit-content;
  margin: 0 auto 2.5vw;
  font-family: NotoSansJP-bold;
  text-align: center;
  line-height: 1.4;
  color: #fff;
}

.hbs-cta-txt .txt01 {
  display: block;
  font-size: 5.625vw;
}
.hbs-cta-txt .txt02 {
  display: block;
  font-size: 4.583vw;
}
.hbs-cta-txt .txt03 {
  display: block;
  font-size: 5vw;
}
.hbs-cta-txt .point {
  color: #FFFB00;
}
.hbs-cta-txt::before {
  content: "";
  position: absolute;
  bottom: 0.417vw;
  left: -9.167vw;
  width: 7.083vw;
  height: 11.042vw;
  background: url("/sp/images/home-building-seminar/top/cta/img_line_left.svg") no-repeat center top / contain;
}
.hbs-cta-txt::after {
  content: "";
  position: absolute;
  bottom: 0.417vw;
  right: -9.167vw;
  width: 7.083vw;
  height: 11.042vw;
  background: url("/sp/images/home-building-seminar/top/cta/img_line_right.svg") no-repeat center top / contain;
}

.hbs-cta-txt02 {
  position: relative;
  width: fit-content;
  margin: 0 auto 2.5vw;
  font-family: NotoSansJP-bold;
  text-align: center;
  line-height: 1.4;
  color: #2F8F65;
}

.hbs-cta-txt02 .txt01 {
  display: block;
  font-size: 4.792vw;
}
.hbs-cta-txt02 .txt02 {
  display: block;
  font-size: 6.042vw;
}
.hbs-cta-txt02 .point {
  color: #F87103;
}
.hbs-cta-txt02::before {
  content: "";
  position: absolute;
  bottom: 0.417vw;
  left: -7.083vw;
  width: 7.083vw;
  height: 11.042vw;
  background: url("/sp/images/home-building-seminar/top/cta/img_line_left02.svg") no-repeat center top / contain;
}
.hbs-cta-txt02::after {
  content: "";
  position: absolute;
  bottom: 0.417vw;
  right: -7.083vw;
  width: 7.083vw;
  height: 11.042vw;
  background: url("/sp/images/home-building-seminar/top/cta/img_line_right02.svg") no-repeat center top / contain;
}

.hbs-cta-btn {
  position: relative;
  display: block;
  width: 89.583vw;
  margin: 0 auto;
  padding: 3.125vw 0.417vw 3.75vw 0;
  font-family: NotoSansJP-bold;
  text-align: center;
  font-size: 5.625vw;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  border-radius: 1.667vw;
  background: linear-gradient(90deg, #FF9429 0%, #FF3C06 100%);
  box-shadow: 0 1.25vw 0 #762707;
}

.hbs-cta-btn .head {
  display: block;
  width: fit-content;
  margin: 0 auto 1.667vw;
  padding: 1.042vw 6.667vw;
  font-size: 3.75vw;
  color: #FF480B;
  background-color: #fff;
  border-radius: 2.917vw;
}
.hbs-cta-btn::before {
  content: "";
  position: absolute;
  right: 4.167vw;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5vw;
  height: 4.167vw;
  background: url("/sp/images/home-building-seminar/top/cta/img_btn_arrow.svg") no-repeat center top / contain;
}


/* # この講座でなにが学べるの？
-------------------------------------------------------------------- */
.l-hbs-outline {
  padding: 8.333vw 0;
  background-color: #F3F9EB;
}

.hbs-outline-subttl {
  position: relative;
  width: fit-content;
  margin: 0 auto 4.583vw;
  padding: 0.625vw 3.75vw;
  font-size: 4.167vw;
  font-family: NotoSansJP-bold;
  color: #fff;
  background-color: #2A302B;
  border-radius: 4.583vw;
}

.hbs-outline-subttl::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.875vw;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style:solid;
  border-width: 2.083vw 2.083vw 0 2.083vw;
  border-color: #2A302B transparent transparent transparent;
}

.hbs-outline-ttl {
  margin-bottom: 7.292vw;
  text-align: center;
  font-size: 7.292vw;
  line-height: 1.23;
}

.hbs-outline-ttl .point {
  color: #2F8F65;
  text-decoration: #2F8F65 wavy underline;
  text-decoration-thickness: 0.417vw; /* 線の太さ */
  text-underline-offset: 2.083vw; /* 文字列との距離 */
}

.hbs-outline-list {
  padding: 0 5.208vw;
  margin-bottom: 6.25vw;
}

.hbs-outline-list li {
  position: relative;
  min-height: 41.667vw;
  padding: 5vw 3.333vw;
  background-color: #fff;
  border-radius: 5vw;
}

.hbs-outline-list li + li {
  margin-top: 3.333vw;
}

.hbs-outline-list li:nth-child(2) {
  padding: 5vw 3.333vw 10.417vw 39.583vw;
}

.hbs-outline-headline {
  margin-bottom: 3.333vw;
  font-size: 5vw;
  line-height: 1;
}

.hbs-outline-headline .wrap {
  display: block;
  width: fit-content;
  padding: 1.458vw 2.5vw;
  color: #fff;
  background-color: #2F8F65;
}
.hbs-outline-headline .wrap + .wrap {
  margin-top: 0.833vw;
}

.hbs-outline-txt {
  width: 50vw;
  font-size: 3.333vw;
  line-height: 1.6;
}

.hbs-outline-img01 {
  position: absolute;
  top: 7.708vw;
  right: 3.333vw;
  width: 33.333vw;
}
.hbs-outline-img02 {
  position: absolute;
  top: 6.25vw;
  left: 3.333vw;
  width: 33.333vw;
}
.hbs-outline-img03 {
  position: absolute;
  top: 6.25vw;
  right: 2.708vw;
  width: 33.333vw;
}

.hbs-outline-point-ttl {
  width: 80vw;
  margin: 0 auto 1.25vw;
}

.hbs-outline-point-txt {
  text-align: center;
  font-size: 3.333vw;
  line-height: 1.5;
}
.hbs-outline-point-txt .point {
  color: #2F8F65;
}


/* # 参加された方の感動の声
-------------------------------------------------------------------- */
.l-hbs-voice {
  padding: 6.25vw 0 9.375vw;
  background-color: #F3F9EB;
}

.hbs-voice-ttl {
  position: relative;
  padding-top: 16.667vw;
  margin-bottom: 7.292vw;
  text-align: center;
  font-size: 6.25vw;
  line-height: 1;
}

.hbs-voice-ttl .subttl {
  display: block;
  margin-top: 3.125vw;
  font-family: "NotoSansJP-regular";
  font-size: 3.75vw;
  color: #2F8F65;
}

.hbs-voice-ttl::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  content: "VOICE";
  font-size: 22.708vw;
  opacity: 0.1;
  color: #2F8F65;
}

.hbs-voice-list {
  margin-bottom: 7.292vw;
  padding: 0 5.208vw;
}

.hbs-voice-list li {
  padding: 5.208vw;
  background-color: #fff;
  border-radius: 6.25vw 6.25vw 0 6.25vw;
}

.hbs-voice-list li + li {
  margin-top: 6.25vw;
}

.hbs-voice-head {
  display: flex;
  gap: 2.917vw;
  margin-bottom: 3.125vw;
  padding: 0 0.625vw 2.708vw;
  border-bottom: 1px solid #606060;
}

.hbs-voice-pic {
  width: 22.917vw;
  margin-bottom: 1.042vw;
}
.hbs-voice-name {
  font-size: 3.125vw;
  line-height: 1.5;
  text-align: center;
}

.hbs-voice-star {
  width: 22.917vw;
  height: 3.75vw;
  margin-bottom: 2.5vw;
  background: url("/sp/images/home-building-seminar/top/voice/ico_star.svg") no-repeat left center / contain;
}

.hbs-voice-headline {
  font-size: 5vw;
  line-height: 1.29;
  letter-spacing: -0.1vw;
  color: #2F8F65;
}

.hbs-voice-txt {
  padding: 0 1.042vw 1.042vw;
  font-size: 3.75vw;
  line-height: 1.83;
}

.hbs-voice-txt .point {
  font-family: NotoSansJP-bold;
  color: #F87103;
}

/* # 3つのメリット
-------------------------------------------------------------------- */
.l-hbs-merit {
  position: relative;
  padding: 0 0 4.167vw;
  background-color: #2F8F65;
}

.l-hbs-merit::before {
  content: "";
  position: absolute;
  bottom: -10.208vw;
  z-index: 2;
  left: 0;
  width:0;
  height:0;
  border-style:solid;
  border-width: 10.417vw 50vw 0 50vw;
  border-color: #2F8F65 transparent transparent transparent;
}

.hbs-merit-ttl {
  position: relative;
  padding-top: 16.667vw;
  margin-bottom: 6.25vw;
  text-align: center;
  font-size: 6.25vw;
  line-height: 1.2;
  color: #fff;
}

.hbs-merit-ttl .subttl {
  display: block;
  margin-bottom: 1.667vw;
  font-size: 3.542vw;
  color: #fff;
}
.hbs-merit-ttl .point {
  color: #FFF653;
}

.hbs-merit-ttl::before {
  position: absolute;
  top: 1.042vw;
  left: 50%;
  transform: translateX(-50%);
  content: "MERIT";
  font-size: 22.708vw;
  opacity: 0.1;
  color: #B4FFDE;
}

.hbs-merit-list {
  list-style: none;
  margin: 0;
  padding: 0 5.208vw;
}

.hbs-merit-list li {
  padding-bottom: 4.167vw;
  background-color: #fff;
  border-radius: 2.083vw;
}

.hbs-merit-list li + li {
  margin-top: 6.667vw;
}

.hbs-merit-headline {
  margin-bottom: 3.75vw;
  padding: 1.667vw;
  font-size: 5vw;
  line-height: 1.5;
  text-align: center;
  color: #2F8F65;;
  background-color: #FFFF76;
  border-radius: 2.083vw 2.083vw 0 0;
  border-bottom: 1px solid #2F8F65;
}

.hbs-merit-main-txt {
  font-size: 4.167vw;
  line-height: 1.6;
  text-align: center;
  font-family: NotoSansJP-bold;
}

.hbs-merit-pic {
  display: block;
  width: 81.25vw;
  padding-bottom: 4.167vw;
  margin: 4.167vw auto;
  border-bottom: 2px solid #E6E6E6;
}

.hbs-merit-txt {
  padding: 0 5vw;
  font-size: 3.75vw;
  line-height: 1.66;
}

.hbs-merit-txt .point {
  font-family: NotoSansJP-bold;
  background-color: #FFF653;
}

.hbs-merit-figure {
  margin: 4.167vw 0;
}

.hbs-merit-figure figcaption {
  margin-top: 2.083vw;
  padding: 0 5vw;
  font-size: 2.5vw;
  line-height: 1.6;
}


/* # 3つのお約束
-------------------------------------------------------------------- */
.l-hbs-promise {
  position: relative;
  padding: 13.542vw 0 11.25vw;
  background-color: #F3F9EB;
}

.hbs-promise-ttl {
  position: relative;
  padding-top: 11.25vw;
  margin-bottom: 9.375vw;
  text-align: center;
  font-size: 7.708vw;
  line-height: 1;
}

.hbs-promise-ttl .subttl {
  display: block;
  margin-bottom: -0.833vw;
  font-size: 3.542vw;
}
.hbs-promise-ttl .point {
  font-size: 11.667vw;
  color: #2F8F65;
}

.hbs-promise-ttl::before {
  position: absolute;
  top: 1.042vw;
  left: 50%;
  transform: translateX(-50%);
  content: "PROMISE";
  font-size: 20.208vw;
  opacity: 0.1;
  color: #2F8F65;
}

.hbs-promise-list {
  list-style: none;
  margin: 0;
  padding: 0 5.208vw;
}

.hbs-promise-list li {
  display: flex;
  align-items: flex-start;
  gap: 4.792vw;
  padding: 5.625vw 4.167vw 4.792vw;
  background-color: #fff;
  border-radius: 2.083vw;
}

.hbs-promise-list li + li {
  margin-top: 4.167vw;
}

.hbs-promise-ico {
  width: 15.417vw;
}

.hbs-promise-txt {
  padding-right: 2.083vw;
  font-family: NotoSansJP-bold;
  font-size: 3.75vw;
  line-height: 1.66;
}

.hbs-promise-txt .point {
  color: #2F8F65;
}

/* # よくあるご質問
-------------------------------------------------------------------- */
.l-hbs-faq {
  padding: 3.75vw 5.208vw 12.083vw;
  background-color: #fff;
}

.hbs-faq-ttl {
  position: relative;
  padding-top: 17.917vw;
  margin-bottom: 6.25vw;
  text-align: center;
  font-size: 6.25vw;
  line-height: 1;
}

.hbs-faq-ttl::before {
  position: absolute;
  top: 1.042vw;
  left: 50%;
  transform: translateX(-50%);
  content: "FAQ";
  font-size: 20.208vw;
  opacity: 0.1;
  color: #2F8F65;
}

.hbs-faq-list li {
  padding: 0 3.125vw;
  background-color: #fff;
  border-radius: 2.083vw;
  border: 1px solid #2F8F65;
}

.hbs-faq-list li + li {
  margin-top: 5vw;
}

.hbs-faq-item {
  position: relative;
  z-index: 1;
}

.hbs-faq-question {
  position: relative;
  padding: 5.417vw 8.333vw 5.417vw 12.5vw;
  font-size: 3.333vw;
  line-height: 1.3;
}

.hbs-faq-question::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3.125vw;
  bottom: 0;
  margin: auto;
  width: 5vw;
  height: 9.792vw;
  background: url('/sp/images/home-building-seminar/top/faq/ico_q.svg') no-repeat 0 0 / contain;
}

.hbs-faq-answer {
  display: none;
  border-top: 1px solid #2F8F65;
}

.hbs-faq-answer-txt {
  position: relative;
  padding: 3.333vw 3.333vw 4.167vw 12.5vw;
  font-size: 3.333vw;
  line-height: 1.5;
}

.hbs-faq-answer-txt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3.125vw;
  bottom: 0;
  margin: auto;
  width: 5vw;
  height: 9.792vw;
  background: url('/sp/images/home-building-seminar/top/faq/ico_a.svg') no-repeat 0 0 / contain;
}

/* アコーディオンのアイコン */
.hbs-faq-accordion-ico {
  position: absolute;
  right: 1.042vw;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  width: 4.583vw;
  height: 4.583vw;
}

.hbs-faq-accordion-ico::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 0.417vw;
  background-color: #2F8F65;
  border-radius: 1.6vw;
  transition: all .3s;
}
.hbs-faq-accordion-ico::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0.417vw;
  height: 100%;
  background-color: #2F8F65;
  border-radius: 1.6vw;
  transition: all .3s;
}

.accordion-close.hbs-faq-accordion-ico::before {
  opacity: 0;
}
.accordion-close.hbs-faq-accordion-ico::after {
  transform: rotate(90deg);
}


/* # そもそも「おうちキャンバス」とは？
-------------------------------------------------------------------- */
.l-hbs-about {
  padding: 8.75vw 5.208vw 10.417vw;
  background-color: #FDF9F4;
}

.hbs-about-ttl {
  width: 79.792vw;
  margin: 0 auto 3.75vw;
}

.hbs-about-txt {
  margin-bottom: 4.167vw;
  text-align: center;
  font-size: 3.333vw;
  line-height: 1.69;
}

.hbs-about-pic {
  margin-bottom: 5.208vw;
}

.hbs-about-mission {
  width: 75.833vw;
  margin: 0 auto 6.667vw;
}

.hbs-about-item + .hbs-about-item {
  margin-top: 5vw;
}


/* # 家づくりをもっとわかりやすく、もっと安心に。
-------------------------------------------------------------------- */
.l-hbs-message {
  padding: 0 0 6.25vw;
  color: #533F27;
  background-color: #FDFBFB;
}

.hbs-message-ttl {
  position: relative;
  padding-top: 15.833vw;
  margin-bottom: 6.25vw;
  text-align: center;
  line-height: 1;
}

.hbs-message-ttl img {
  position: relative;
  z-index: 2;
  width: 67.083vw;
}

.hbs-message-ttl::before {
  position: absolute;
  z-index: 1;
  top: 1.042vw;
  left: 50%;
  transform: translateX(-50%);
  content: "MESSAGE";
  font-size: 20.208vw;
  color: #FBF5ED;
}

.hbs-message-figure {
  margin: 4.167vw 0 7.083vw;
}

.hbs-message-figure figcaption {
  margin-top: 2.083vw;
  padding: 0 5vw;
  text-align: center;
  font-size: 3.125vw;
  line-height: 1.6;
}

.hbs-message-inner {
  padding: 0 5.208vw;
  margin-bottom: 12.917vw;
}

.hbs-message-inner p {
  margin-bottom: 7.083vw;
  font-size: 3.75vw;
  line-height: 1.89;
}
.hbs-message-inner p .point {
  font-family: NotoSansJP-bold;
  color: #CD4C4C;
}

.hbs-message-headline {
  margin: 7.5vw 0;
  font-size: 5vw;
  line-height: 1.54;
}

.hbs-message-headline .point {
  background: linear-gradient(transparent 60%, #FFF653 0%);
}

/* # おうちキャンバスでできること
-------------------------------------------------------------------- */
.l-hbs-service {
  padding-top: 5.208vw;
  background-color: #FDFFF9;
}

.hbs-service-ttl {
  position: relative;
  padding-top: 18.75vw;
  margin-bottom: 1.25vw;
  text-align: center;
  font-size: 6.25vw;
  line-height: 1.3;
}

.hbs-service-ttl::before {
  position: absolute;
  top: 1.042vw;
  left: 50%;
  transform: translateX(-50%);
  content: "SERVICE";
  font-size: 20.208vw;
  opacity: 0.1;
  color: #2F8F65;
}

.hbs-service-list {
  list-style: none;
  margin: 0 0 6.667vw;
  padding: 0 5vw;
  text-align: center;
}

.hbs-service-list li {
  padding: 5vw 0;
}

.hbs-service-list li + li {
  border-top: 1px dashed #333;
}

.hbs-service-headline {
  margin-bottom: 4.167vw;
  font-size: 4.583vw;
  line-height: 1.34;
  color: #2F8F65;
}

.hbs-service-headline .ico {
  display: block;
  margin: 0 auto 2.917vw;
  width: 7.5vw;
}

.hbs-service-txt {
  padding: 0 3.333vw;
  font-size: 3.333vw;
  line-height: 1.84;
}


/* ==========================================================================
   # 下層（会社概要・利用規約・プライバシーポリシー）
   ========================================================================== */
/* # 会社概要
-------------------------------------------------------------------- */
.hbs-layer-inner {
  padding: 14.583vw 5.208vw 10.417vw;
  background-color: #FDFBFB;
}

.hbs-company-ttl {
  position: relative;
  margin: 0 auto 18.75vw;
  padding-left: 6.875vw;
  width: fit-content;
  font-size: 7.5vw;
  line-height: 1;
}

.hbs-company-ttl::before {
  content: "";
  position: absolute;
  top: 2.083vw;
  left: 0;
  width: 3.75vw;
  height: 3.75vw;
  border-radius: 50%;
  background-color: #2F8F65;
}

.hbs-company-ttl::after {
  content: "COMPANY";
  position: absolute;
  bottom: -5.833vw;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3.75vw;
  letter-spacing: 0.15vw;
  font-family: "NotoSansJP-medium";
}

.hbs-company-pic {
  margin-bottom: 10.417vw;
}

.l-hbs-vision {
  padding-bottom: 6.25vw;
  border-bottom: 1px solid #606060;
}

.hbs-vision-heading {
  margin-bottom: 4.167vw;
  padding: 1.042vw;
  font-size: 4.167vw;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background-color: #2F8F65;
  border-radius: 4.167vw;
}

.hbs-vision-txt {
  margin-bottom: 8.333vw;
  text-align: center;
  font-family: "NotoSansJP-bold";
  font-size: 5vw;
  line-height: 1.45;
  letter-spacing: 0.35vw;
}

.hbs-layer-headline01 {
  position: relative;
  margin: 14.583vw 0 6.25vw;
  padding-bottom: 4.167vw;
  font-size: 5vw;
  line-height: 1.24;
  text-align: center;
}
.hbs-layer-headline01::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8.125vw;
  height: 0.625vw;
  background-color: #2F8F65;
}

.hbs-layer-txt {
  margin-bottom: 7.5vw;
  font-size: 3.75vw;
  line-height: 2;
}

.hbs-layer-txt .point {
  font-family: NotoSansJP-bold;
  color: #2F8F65;
}

.hbs-company-figure {
  margin: 8.333vw -5.208vw;
}
.hbs-company-figure figcaption {
  margin-top: 2.083vw;
  padding: 0 5.208vw;
  font-size: 2.5vw;
  line-height: 1.6;
}

.hbs-company-list {
  padding-top: 6.25vw;
}

.hbs-company-list li {
  padding-bottom: 10.417vw;
}

.hbs-company-list li + li {
  padding-top: 10.417vw;
  border-top: 1px dashed #333;
}

.hbs-company-list p {
  padding-left: 5vw;
  font-size: 3.75vw;
  line-height: 1.63;
}

.hbs-company-list-heading {
  position: relative;
  margin-bottom: 4.167vw;
  padding-left: 5vw;
  font-size: 4.583vw;
  line-height: 1.34;
  color: #2F8F65;
}

.hbs-company-list-heading::before {
  content: "";
  position: absolute;
  top: 0.208vw;
  left: 0;
  width: 1.667vw;
  height: 5.833vw;
  background-color: #2F8F65;
}

.l-hbs-company-area {
  margin-bottom: 10.417vw;
  padding: 3.75vw;
  text-align: center;
  font-family: NotoSansJP-bold;
  border: 1px solid #333;
}
.hbs-company-area-head {
  position: relative;
  width: fit-content;
  margin: 0 auto 1.042vw;
  padding: 0 4.583vw;
  font-size: 3.125vw;
  line-height: 1.53;
}
.hbs-company-area-head::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 3.333vw;
  height: 0.208vw;
  background-color: #333;
}
.hbs-company-area-head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 3.333vw;
  height: 0.208vw;
  background-color: #333;
}

.hbs-company-area-txt {
  font-size: 3.333vw;
  line-height: 1.68;
  color: #2F8F65;
}

.hbs-company-table {
  width: 100%;
  font-size: 3.333vw;
  line-height: 1.5;
  border-collapse: collapse;
}

.hbs-company-table tr + tr {
  border-top: 1px solid #555;
}

.hbs-company-table th {
  width: 25.833vw;
  padding-right: 2.083vw;
  font-family: NotoSansJP-bold;
  text-align: left;
}

.hbs-company-table td {
  padding: 5vw 0;
  color: #555;
}

.hbs-company-table td a {
  color: #555;
}

/* # 利用規約・プライバシーポリシー
-------------------------------------------------------------------- */
.layer-table {
  width: 89.372vw;
  margin: 0 auto 9.662vw;
  text-align: left;
  word-break: break-all;
  font-size: 3.382vw;
  line-height: 1.5;
  border: 2px solid #e9e3d0;
  border-collapse: collapse;
}
.layer-table th {
  padding: 2.899vw 3.623vw;
  font-weight: normal;
  background-color: #fcf9ee;
  border: 2px solid #e9e3d0;
}
.layer-table td {
  padding: 2.899vw 3.623vw;
  background-color: #fff;
  border: 2px solid #e9e3d0;
}
.layer-table a {
  color: #412807;
}


.hbs-body {
  background-color: #FDFBFB;
}

.hbs-body .layer-ttl {
  color: #47856A;
}

.hbs-body .l-layer-ttl {
  background-color: #FDFBFB;
  border-bottom: 1px dashed #555;
}

.hbs-body .layer-date {
  color: #848484;
}

.hbs-body .layer-headline01 {
  background-color: #47856A;
}

.hbs-body .layer-headline02 {
  color: #47856A;
  border-bottom: 1px dashed #555;
}

.hbs-body .layer-list-ul,
.hbs-body .layer-list-ol {
  background-color: #FFFBEB;
}

.hbs-body .layer-list-ol li:before {
  color: #73C175;
}

.hbs-body .layer-list-ul li:before {
  background-color: #73C175;
}

.hbs-body .layer-table a {
  color: #333;
}




/* ==========================================================================
   # フォーム
   ========================================================================== */
/* # 入力画面
-------------------------------------------------------------------- */
.l-hbs-form {
  padding: 7.5vw 5.208vw 10.417vw;
  background-color: #FDF9F4;
}
.hbs-form-ttl {
  margin-bottom: 3.75vw;
  font-family: NotoSansJP-bold;
  text-align: center;
  font-size: 3.958vw;
  line-height: 1.5;
  color: #2F8F65;
}
.hbs-form-txt {
  padding: 2.917vw 0;
  text-align: center;
  font-size: 3.333vw;
  line-height: 1.5;
  border-top: 1px dashed; #333;
  border-bottom: 1px dashed; #333;
}

.hbs-form {
  margin-top: 9.375vw;
}
.hbs-form-table {
  width: 100%;
  border-collapse: collapse;
}
.hbs-form-table th,
.hbs-form-table td {
  display: block;
  width: 100%;
}
.hbs-form-table th {
  text-align: left;
}
.hbs-input-flex {
  display: flex;
  justify-content: space-between;
  gap: 1.667vw;
}
.hbs-input-2col {
  width: 100%;
}
.hbs-form-table td {
  padding-bottom: 8.333vw;
}
.l-hbs-input-headline {
  display: flex;
  align-items: center;
  margin-bottom: 2.083vw;
}
.hbs-input-headline {
  position: relative;
  padding-left: 4.167vw;
  font-size: 4.167vw;
  line-height: 1.8;
  font-family: NotoSansJP-bold;
}
.hbs-input-headline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1.667vw;
  height: 6.667vw;
  background-color: #2F8F65;
  border-radius: 0.833vw;
}
.hbs-form-hissu-ico {
  position: relative;
  display: inline-block;
  margin-left: 3.125vw;
  padding: 0.833vw 1.667vw;
  font-size: 3.333vw;
  line-height: 1;
  background-color: #FF5148;
  color: #fff;
  border-radius: 1.042vw;
}
.hbs-form-hissu-ico:before { content: "必須"; }

.hbs-form-ninni-ico {
  position: relative;
  display: inline-block;
  margin-left: 3.125vw;
  padding: 0.833vw 1.667vw;
  font-size: 3.333vw;
  line-height: 1;
  background-color: #fff;
  border: 1px solid #888;
  color: #888;
  border-radius: 1.042vw;
}
.hbs-form-ninni-ico:before { content: "任意"; }

/* 入力完了 */
.js-hbs-input-wrap.complete .hbs-form-hissu-ico,
.js-hbs-input-wrap.complete .hbs-form-ninni-ico {
  background-color: #5AD39A;
  border: none;
  color: #fff;
}
.js-hbs-input-wrap.complete .hbs-form-hissu-ico:before,
.js-hbs-input-wrap.complete .hbs-form-ninni-ico:before { content: "済"; }

.js-hbs-input-wrap.complete .hbs-input,
.js-hbs-input-wrap.complete .hbs-select,
.js-hbs-input-wrap.complete .hbs-textarea {
  border: 1px solid #5AD39A;
}

.hbs-input {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  display: block;
  width: 100%;
  padding: 2.708vw 5vw;
  font-size: 3.75vw;
  line-height: 1;
  color: #333;
  background-color: #fff;
  border-radius: 2.083vw;
  border: 1px solid #939393;
}
.hbs-textarea {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  display: block;
  width: 100%;
  height: 29.167vw;
  min-height: 35.417vw;
  max-height: 83.333vw;
  padding: 3.75vw 5vw;
  font-size: 3.75vw;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  border-radius: 2.083vw;
  resize: vertical;
  border: 1px solid #939393;
}
.l-hbs-select {
  position: relative;
  width: 100%;
}
.l-hbs-select:before {
  content: "";
  position: absolute;
  top: 4.167vw;
  right: 5vw;
  width: 2.5vw;
  height: 2.5vw;
  border-bottom: 2px solid #5AD39A;
  border-right: 2px solid #5AD39A;
  transform: rotate(45deg);
  pointer-events: none;
}
.hbs-select {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  display: block;
  width: 100%;
  padding: 3.75vw 5vw;
  font-size: 3.75vw;
  line-height: 1;
  background-color: #fff;
  border-radius: 2.083vw;
  resize: vertical;
  border: 1px solid #939393;
}
.l-hbs-calendar .reserve-v2-calendar {
  max-width: 94.583vw;
  margin: 0 -5.208vw 5.208vw 0;
  padding-right: 5.208vw;
}

/* Chrome 例文 */
.hbs-input::-webkit-input-placeholder,
.hbs-textarea::-webkit-input-placeholder {
  color: #939393;
}

/* Firefox 例文 */
.hbs-input::-moz-placeholder,
.hbs-textarea::-moz-placeholder {
  color: #939393;
}

/* 入力したらチェックマーク表示 */
.hbs-input:not(:placeholder-shown) {
  padding: 2.708vw 10.417vw 2.708vw 5vw;
  background: #fff url('/sp/images/shokai/ico_check.svg') no-repeat center right 4.167vw / 3.542vw 3.542vw;
}
/* 入力欄エラー表示 */
.err {
  background-color: #FFECEC;
  border: 1px solid #FF5148;
}
/* 入力欄エラーのときはチェックマーク非表示 */
.hbs-input.err:not(:placeholder-shown) {
  background: #FFECEC;
}
/* 画面幅が小さい時用のスタイル */
@media (width <= 430px) {
  .hbs-select,
  .hbs-textarea,
  .hbs-input { font-size: 16px }
}

.hbs-textarea-ex-btn {
  margin-top: 3.125vw;
  padding: 2.708vw 3.125vw;
  font-size: 3.333vw;
  line-height: 1;
  border-radius: 5.208vw;
  color: #333;
  border: 1px solid #D4D4D4;
  background: #FFF;
}
/* 送信ボタン */
.hbs-submit-btn {
  display: block;
  width: 85.833vw;
  margin: 0 auto 8.333vw;
  padding: 2.917vw 0;
  text-align: center;
  font-family: NotoSansJP-bold;
  font-weight: normal;
  font-size: 6.667vw;
  line-height: 1.3;
  color: #fff;
  border-radius: 9.375vw;
  background: linear-gradient(94deg, #FF5A08 1.7%, rgba(255, 111, 0, 0.67) 100.58%);
  box-shadow: 0 0.833vw 0 0 #DE6E37;
}
/* 未入力ボタン */
.hbs-no-submit-btn {
  background: #c4c4c4;
  box-shadow: 0 1.042vw 0 #a6a6a6;
  pointer-events: none;
}
.hbs-submit-btn .min {
  display: block;
  font-size: 3.333vw;
}
.hbs-privacy-notes {
  text-align: center;
  font-size: 3.333vw;
}

/* # 完了画面・エラー画面
-------------------------------------------------------------------- */
.l-hbs-form-finish-ttl {
  position: relative;
  margin-bottom: 7.246vw;
  padding: 5.556vw 3.382vw 5.314vw;
  border: 0.483vw solid #33b143;
  background-color: #fff;
}
.hbs-form-finish-ttl {
  text-align: center;
  font-family: "NotoSansJP-bold";
  font-weight: normal;
  font-size: 4.831vw;
  line-height: 1.5;
  color: #33b143;
}
.hbs-form-layer p {
  margin-bottom: 5.417vw;
  padding: 0 2.5vw;
  font-size: 3.721vw;
  line-height: 1.56;
}
.hbs-form-layer ul {
  margin-bottom: 5.417vw;
  padding: 0 2.5vw;
  font-size: 3.721vw;
  line-height: 1.56;
}
.hbs-form-layer ul li {
  margin-bottom: 2.083vw;
  padding-left: 3.721vw;
  text-indent: -1em;
}
.hbs-form-layer ul li::before {
  content: "・";
}
.hbs-form-maker {
  background: linear-gradient(transparent 50%, #eaff00de 70%);
}


/* # フォーム用コピーライト
-------------------------------------------------------------------- */
.hbs-form-footer {
  padding: 4.167vw 0;
  line-height: 1;
  text-align: center;
  background-color: #FDF9F4;
}
.hbs-form-copyright {
  font-size: 2.917vw;
}