@charset "UTF-8";

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

html {
  background-color: #f8f6f2;
}

body {
  font-family: YakuHanJPs, NotoSansJP-regular, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 17.39px;
  line-height: 1.9;
  font-weight: normal;
  color: #5A4633;
  background-color: #FDFCF9;
  width: 480px;
  min-width: auto;
  margin: 0 auto;
}

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

a { color: #509309; }

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


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

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

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

.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: 20.002px 0;
  font-size: 14.002px;
  line-height: 1;
  text-align: center;
}


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

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

/* 最下部のCTA背景 */
.l-hbs-cta02 {
  padding: 27.998px 0 45px;
  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 12px;
  font-family: NotoSansJP-bold;
  text-align: center;
  line-height: 1.4;
  color: #fff;
}

.hbs-cta-txt .txt01 {
  display: block;
  font-size: 27px;
}
.hbs-cta-txt .txt02 {
  display: block;
  font-size: 21.998px;
}
.hbs-cta-txt .txt03 {
  display: block;
  font-size: 24px;
}
.hbs-cta-txt .point {
  color: #FFFB00;
}
.hbs-cta-txt::before {
  content: "";
  position: absolute;
  bottom: 2.002px;
  left: -44.002px;
  width: 33.998px;
  height: 53.002px;
  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: 2.002px;
  right: -44.002px;
  width: 33.998px;
  height: 53.002px;
  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 12px;
  font-family: NotoSansJP-bold;
  text-align: center;
  line-height: 1.4;
  color: #2F8F65;
}

.hbs-cta-txt02 .txt01 {
  display: block;
  font-size: 23.002px;
}
.hbs-cta-txt02 .txt02 {
  display: block;
  font-size: 29.002px;
}
.hbs-cta-txt02 .point {
  color: #F87103;
}
.hbs-cta-txt02::before {
  content: "";
  position: absolute;
  bottom: 2.002px;
  left: -33.998px;
  width: 33.998px;
  height: 53.002px;
  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: 2.002px;
  right: -33.998px;
  width: 33.998px;
  height: 53.002px;
  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: 429.998px;
  margin: 0 auto;
  padding: 15px 2.002px 18px 0;
  font-family: NotoSansJP-bold;
  text-align: center;
  font-size: 27px;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  border-radius: 8.002px;
  background: linear-gradient(90deg, #FF9429 0%, #FF3C06 100%);
  box-shadow: 0 6px 0 #762707;
}

.hbs-cta-btn .head {
  display: block;
  width: fit-content;
  margin: 0 auto 8.002px;
  padding: 5.002px 32.002px;
  font-size: 18px;
  color: #FF480B;
  background-color: #fff;
  border-radius: 14.002px;
}
.hbs-cta-btn::before {
  content: "";
  position: absolute;
  right: 20.002px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 20.002px;
  background: url("/sp/images/home-building-seminar/top/cta/img_btn_arrow.svg") no-repeat center top / contain;
}


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

.hbs-outline-subttl {
  position: relative;
  width: fit-content;
  margin: 0 auto 21.998px;
  padding: 3px 18px;
  font-size: 20.002px;
  font-family: NotoSansJP-bold;
  color: #fff;
  background-color: #2A302B;
  border-radius: 21.998px;
}

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

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

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

.hbs-outline-list {
  padding: 0 24.998px;
  margin-bottom: 30px;
}

.hbs-outline-list li {
  position: relative;
  min-height: 200.002px;
  padding: 24px 15.998px;
  background-color: #fff;
  border-radius: 24px;
}

.hbs-outline-list li + li {
  margin-top: 15.998px;
}

.hbs-outline-list li:nth-child(2) {
  padding: 24px 15.998px 50.002px 189.998px;
}

.hbs-outline-headline {
  margin-bottom: 15.998px;
  font-size: 24px;
  line-height: 1;
}

.hbs-outline-headline .wrap {
  display: block;
  width: fit-content;
  padding: 6.998px 12px;
  color: #fff;
  background-color: #2F8F65;
}
.hbs-outline-headline .wrap + .wrap {
  margin-top: 3.998px;
}

.hbs-outline-txt {
  width: 240px;
  font-size: 15.998px;
  line-height: 1.6;
}

.hbs-outline-img01 {
  position: absolute;
  top: 36.998px;
  right: 15.998px;
  width: 159.998px;
}
.hbs-outline-img02 {
  position: absolute;
  top: 30px;
  left: 15.998px;
  width: 159.998px;
}
.hbs-outline-img03 {
  position: absolute;
  top: 30px;
  right: 12.998px;
  width: 159.998px;
}

.hbs-outline-point-ttl {
  width: 384px;
  margin: 0 auto 6px;
}

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


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

.hbs-voice-ttl {
  position: relative;
  padding-top: 80.002px;
  margin-bottom: 35.002px;
  text-align: center;
  font-size: 30px;
  line-height: 1;
}

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

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

.hbs-voice-list {
  margin-bottom: 35.002px;
  padding: 0 24.998px;
}

.hbs-voice-list li {
  padding: 24.998px;
  background-color: #fff;
  border-radius: 30px 30px 0 30px;
}

.hbs-voice-list li + li {
  margin-top: 30px;
}

.hbs-voice-head {
  display: flex;
  gap: 14.002px;
  margin-bottom: 15px;
  padding: 0 3px 12.998px;
  border-bottom: 1px solid #606060;
}

.hbs-voice-pic {
  width: 110.002px;
  margin-bottom: 5.002px;
}
.hbs-voice-name {
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

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

.hbs-voice-headline {
  font-size: 24px;
  line-height: 1.29;
  letter-spacing: -0.48px;
  color: #2F8F65;
}

.hbs-voice-txt {
  padding: 0 5.002px 5.002px;
  font-size: 18px;
  line-height: 1.83;
}

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

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

.l-hbs-merit::before {
  content: "";
  position: absolute;
  bottom: -48.998px;
  z-index: 2;
  left: 0;
  width:0;
  height:0;
  border-style:solid;
  border-width: 50.002px 240px 0 240px;
  border-color: #2F8F65 transparent transparent transparent;
}

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

.hbs-merit-ttl .subttl {
  display: block;
  margin-bottom: 8.002px;
  font-size: 17.002px;
  color: #fff;
}
.hbs-merit-ttl .point {
  color: #FFF653;
}

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

.hbs-merit-list {
  list-style: none;
  margin: 0;
  padding: 0 24.998px;
}

.hbs-merit-list li {
  padding-bottom: 20.002px;
  background-color: #fff;
  border-radius: 9.998px;
}

.hbs-merit-list li + li {
  margin-top: 32.002px;
}

.hbs-merit-headline {
  margin-bottom: 18px;
  padding: 8.002px;
  font-size: 24px;
  line-height: 1.5;
  text-align: center;
  color: #2F8F65;;
  background-color: #FFFF76;
  border-radius: 9.998px 9.998px 0 0;
  border-bottom: 1px solid #2F8F65;
}

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

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

.hbs-merit-txt {
  padding: 0 24px;
  font-size: 18px;
  line-height: 1.66;
}

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

.hbs-merit-figure {
  margin: 20.002px 0;
}

.hbs-merit-figure figcaption {
  margin-top: 9.998px;
  padding: 0 24px;
  font-size: 12px;
  line-height: 1.6;
}


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

.hbs-promise-ttl {
  position: relative;
  padding-top: 54px;
  margin-bottom: 45px;
  text-align: center;
  font-size: 36.998px;
  line-height: 1;
}

.hbs-promise-ttl .subttl {
  display: block;
  margin-bottom: -3.998px;
  font-size: 17.002px;
}
.hbs-promise-ttl .point {
  font-size: 56.002px;
  color: #2F8F65;
}

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

.hbs-promise-list {
  list-style: none;
  margin: 0;
  padding: 0 24.998px;
}

.hbs-promise-list li {
  display: flex;
  align-items: flex-start;
  gap: 23.002px;
  padding: 27px 20.002px 23.002px;
  background-color: #fff;
  border-radius: 9.998px;
}

.hbs-promise-list li + li {
  margin-top: 20.002px;
}

.hbs-promise-ico {
  width: 74.002px;
}

.hbs-promise-txt {
  padding-right: 9.998px;
  font-family: NotoSansJP-bold;
  font-size: 18px;
  line-height: 1.66;
}

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

/* # よくあるご質問
-------------------------------------------------------------------- */
.l-hbs-faq {
  padding: 18px 24.998px 57.998px;
  background-color: #fff;
}

.hbs-faq-ttl {
  position: relative;
  padding-top: 86.002px;
  margin-bottom: 30px;
  text-align: center;
  font-size: 30px;
  line-height: 1;
}

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

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

.hbs-faq-list li + li {
  margin-top: 24px;
}

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

.hbs-faq-question {
  position: relative;
  padding: 26.002px 39.998px 26.002px 60px;
  font-size: 15.998px;
  line-height: 1.3;
}

.hbs-faq-question::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15px;
  bottom: 0;
  margin: auto;
  width: 24px;
  height: 47.002px;
  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: 15.998px 15.998px 20.002px 60px;
  font-size: 15.998px;
  line-height: 1.5;
}

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

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

.hbs-faq-accordion-ico::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 2.002px;
  background-color: #2F8F65;
  border-radius: 7.68px;
  transition: all .3s;
}
.hbs-faq-accordion-ico::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 2.002px;
  height: 100%;
  background-color: #2F8F65;
  border-radius: 7.68px;
  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: 42px 24.998px 50.002px;
  background-color: #FDF9F4;
}

.hbs-about-ttl {
  width: 383.002px;
  margin: 0 auto 18px;
}

.hbs-about-txt {
  margin-bottom: 20.002px;
  text-align: center;
  font-size: 15.998px;
  line-height: 1.69;
}

.hbs-about-pic {
  margin-bottom: 24.998px;
}

.hbs-about-mission {
  width: 363.998px;
  margin: 0 auto 32.002px;
}

.hbs-about-item + .hbs-about-item {
  margin-top: 24px;
}


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

.hbs-message-ttl {
  position: relative;
  padding-top: 75.998px;
  margin-bottom: 30px;
  text-align: center;
  line-height: 1;
}

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

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

.hbs-message-figure {
  margin: 20.002px 0 33.998px;
}

.hbs-message-figure figcaption {
  margin-top: 9.998px;
  padding: 0 24px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
}

.hbs-message-inner {
  padding: 0 24.998px;
  margin-bottom: 62.002px;
}

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

.hbs-message-headline {
  margin: 36px 0;
  font-size: 24px;
  line-height: 1.54;
}

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

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

.hbs-service-ttl {
  position: relative;
  padding-top: 90px;
  margin-bottom: 6px;
  text-align: center;
  font-size: 30px;
  line-height: 1.3;
}

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

.hbs-service-list {
  list-style: none;
  margin: 0 0 32.002px;
  padding: 0 24px;
  text-align: center;
}

.hbs-service-list li {
  padding: 24px 0;
}

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

.hbs-service-headline {
  margin-bottom: 20.002px;
  font-size: 21.998px;
  line-height: 1.34;
  color: #2F8F65;
}

.hbs-service-headline .ico {
  display: block;
  margin: 0 auto 14.002px;
  width: 36px;
}

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


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

.hbs-company-ttl {
  position: relative;
  margin: 0 auto 90px;
  padding-left: 33px;
  width: fit-content;
  font-size: 36px;
  line-height: 1;
}

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

.hbs-company-ttl::after {
  content: "COMPANY";
  position: absolute;
  bottom: -27.998px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  letter-spacing: 0.72px;
  font-family: "NotoSansJP-medium";
}

.hbs-company-pic {
  margin-bottom: 50.002px;
}

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

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

.hbs-vision-txt {
  margin-bottom: 39.998px;
  text-align: center;
  font-family: "NotoSansJP-bold";
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: 1.68px;
}

.hbs-layer-headline01 {
  position: relative;
  margin: 69.998px 0 30px;
  padding-bottom: 20.002px;
  font-size: 24px;
  line-height: 1.24;
  text-align: center;
}
.hbs-layer-headline01::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 39px;
  height: 3px;
  background-color: #2F8F65;
}

.hbs-layer-txt {
  margin-bottom: 36px;
  font-size: 18px;
  line-height: 2;
}

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

.hbs-company-figure {
  margin: 39.998px -24.998px;
}
.hbs-company-figure figcaption {
  margin-top: 9.998px;
  padding: 0 24.998px;
  font-size: 12px;
  line-height: 1.6;
}

.hbs-company-list {
  padding-top: 30px;
}

.hbs-company-list li {
  padding-bottom: 50.002px;
}

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

.hbs-company-list p {
  padding-left: 24px;
  font-size: 18px;
  line-height: 1.63;
}

.hbs-company-list-heading {
  position: relative;
  margin-bottom: 20.002px;
  padding-left: 24px;
  font-size: 21.998px;
  line-height: 1.34;
  color: #2F8F65;
}

.hbs-company-list-heading::before {
  content: "";
  position: absolute;
  top: 0.998px;
  left: 0;
  width: 8.002px;
  height: 27.998px;
  background-color: #2F8F65;
}

.l-hbs-company-area {
  margin-bottom: 50.002px;
  padding: 18px;
  text-align: center;
  font-family: NotoSansJP-bold;
  border: 1px solid #333;
}
.hbs-company-area-head {
  position: relative;
  width: fit-content;
  margin: 0 auto 5.002px;
  padding: 0 21.998px;
  font-size: 15px;
  line-height: 1.53;
}
.hbs-company-area-head::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 15.998px;
  height: 0.998px;
  background-color: #333;
}
.hbs-company-area-head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 15.998px;
  height: 0.998px;
  background-color: #333;
}

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

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

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

.hbs-company-table th {
  width: 123.998px;
  padding-right: 9.998px;
  font-family: NotoSansJP-bold;
  text-align: left;
}

.hbs-company-table td {
  padding: 24px 0;
  color: #555;
}

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


/* ==========================================================================
   sp/common/css/layer.css より
   /sp/soudan-shippai/terms/ で使用しているクラスを追加
   ========================================================================== */
.layer-contents {
  padding: 0 23px 57px;
}

.layer-contents p {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 2;
}

.layer-contents > p:first-child {
  margin-top: 26px;
}

.layer-headline01 {
  margin: 51px -23px 32px;
  padding: 28px 23px;
  font-family: NotoSansJP-bold;
  font-weight: normal;
  font-size: 20px;
  line-height: 1.4;
  color: #fff;
  background-color: #537b4a;
}

.layer-contents > .layer-headline01:first-child {
  margin-top: 0;
}


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


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

.hbs-body .layer-ttl {
  padding: 0 23px;
  margin-bottom: 4px;
  font-family: NotoSansJP-bold;
  font-size: 28.987px;
  line-height: 1.6;
  font-weight: normal;
  color: #537b4a;
  color: #47856A;
}

.hbs-body .l-layer-ttl {
  display: block;
  padding: 27px 0 11px;
  background-color: #fffdf8;
  border-top: 1px solid #eaeed9;
  border-bottom: 1px solid #eaeed9;
  background-color: #FDFBFB;
  border-bottom: 1px dashed #555;
}

.hbs-body .layer-date {
  padding: 0 17px;
  text-align: right;
  font-size: 15px;
  line-height: 1;
  color: #d2cbc2;
  color: #848484;
}

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

.hbs-body .layer-headline02 {
  margin: 51px 0 17px;
  padding: 0 0 12px;
  font-size: 20px;
  line-height: 1.4;
  color: #47856A;
  border-bottom: 1px dashed #555;
  background-color: transparent;
  border-left: none;
}

.hbs-body .layer-list-ul,
.hbs-body .layer-list-ol {
  margin: 0 0 34px;
  padding: 28px 23px 34px;
  font-family: NotoSansJP-regular;
  font-size: 16px;
  line-height: 1.6;
  background-color: #FFFBEB;
}

.hbs-body .layer-list-ol li:before {
  counter-increment: number;
  content: counter(number) ".";
  position: absolute;
  top: 3px;
  left: 0;
  font-family: "Roboto-bold";
  font-size: 19px;
  line-height: 1;
  color: #73C175;
}

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


.hbs-body .layer-list-ol {
  list-style: none;
  counter-reset: number;
  margin-bottom: 34px;
  padding: 28px 23px 34px;
  font-size: 16px;
  line-height: 1.6;
  background-color: #fcf9ee;
  border-radius: 5px;
}

.hbs-body .layer-list-ol li {
  position: relative;
  padding-left: 25px;
}

.hbs-body .layer-list-ol li:before {

}

.hbs-body .layer-list-ol li + li {
  margin-top: 17px;
}

/* 10個目以降の場合 */
.hbs-body .layer-list-ol li:nth-child(n + 10) {
  padding-left: 38px;
}

/* リストの中にさらにテキストがある時（/about/で使用） */
.hbs-body .layer-list-ol li:last-child p {
  margin: 0;
}

.hbs-body .layer-list-ol li p {
  margin: 9px 0 32px -23px;
}


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




/* ==========================================================================
   # フォーム
   ========================================================================== */
/* # 入力画面
-------------------------------------------------------------------- */
.l-hbs-form {
  padding: 36px 24.998px 50.002px;
  background-color: #FDF9F4;
}
.hbs-form-ttl {
  margin-bottom: 18px;
  font-family: NotoSansJP-bold;
  text-align: center;
  font-size: 18.998px;
  line-height: 1.5;
  color: #2F8F65;
}
.hbs-form-txt {
  padding: 14.002px 0;
  text-align: center;
  font-size: 15.998px;
  line-height: 1.5;
  border-top: 1px dashed; #333;
  border-bottom: 1px dashed; #333;
}

.hbs-form {
  margin-top: 45px;
}
.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: 8.002px;
}
.hbs-input-2col {
  width: 100%;
}
.hbs-form-table td {
  padding-bottom: 39.998px;
}
.l-hbs-input-headline {
  display: flex;
  align-items: center;
  margin-bottom: 9.998px;
}
.hbs-input-headline {
  position: relative;
  padding-left: 20.002px;
  font-size: 20.002px;
  line-height: 1.8;
  font-family: NotoSansJP-bold;
}
.hbs-input-headline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 8.002px;
  height: 32.002px;
  background-color: #2F8F65;
  border-radius: 3.998px;
}
.hbs-form-hissu-ico {
  position: relative;
  display: inline-block;
  margin-left: 15px;
  padding: 3.998px 8.002px;
  font-size: 15.998px;
  line-height: 1;
  background-color: #FF5148;
  color: #fff;
  border-radius: 5.002px;
}
.hbs-form-hissu-ico:before { content: "必須"; }

.hbs-form-ninni-ico {
  position: relative;
  display: inline-block;
  margin-left: 15px;
  padding: 3.998px 8.002px;
  font-size: 15.998px;
  line-height: 1;
  background-color: #fff;
  border: 1px solid #888;
  color: #888;
  border-radius: 5.002px;
}
.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: 12.998px 24px;
  font-size: 18px;
  line-height: 1;
  color: #333;
  background-color: #fff;
  border-radius: 9.998px;
  border: 1px solid #939393;
}
.hbs-textarea {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  display: block;
  width: 100%;
  height: 140.002px;
  min-height: 170.002px;
  max-height: 399.998px;
  padding: 18px 24px;
  font-size: 18px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  border-radius: 9.998px;
  resize: vertical;
  border: 1px solid #939393;
}
.l-hbs-select {
  position: relative;
  width: 100%;
}
.l-hbs-select:before {
  content: "";
  position: absolute;
  top: 20.002px;
  right: 24px;
  width: 12px;
  height: 12px;
  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: 18px 24px;
  font-size: 18px;
  line-height: 1;
  background-color: #fff;
  border-radius: 9.998px;
  resize: vertical;
  border: 1px solid #939393;
}
.l-hbs-calendar .reserve-v2-calendar {
  max-width: 453.998px;
  margin: 0 -24.998px 24.998px 0;
  padding-right: 24.998px;
}

/* 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: 12.998px 50.002px 12.998px 24px;
  background: #fff url('/sp/images/shokai/ico_check.svg') no-repeat center right 20.002px / 17.002px 17.002px;
}
/* 入力欄エラー表示 */
.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: 15px;
  padding: 12.998px 15px;
  font-size: 15.998px;
  line-height: 1;
  border-radius: 24.998px;
  color: #333;
  border: 1px solid #D4D4D4;
  background: #FFF;
}
/* 送信ボタン */
.hbs-submit-btn {
  display: block;
  width: 411.998px;
  margin: 0 auto 39.998px;
  padding: 14.002px 0;
  text-align: center;
  font-family: NotoSansJP-bold;
  font-weight: normal;
  font-size: 32.002px;
  line-height: 1.3;
  color: #fff;
  border-radius: 45px;
  background: linear-gradient(94deg, #FF5A08 1.7%, rgba(255, 111, 0, 0.67) 100.58%);
  box-shadow: 0 3.998px 0 0 #DE6E37;
}
/* 未入力ボタン */
.hbs-no-submit-btn {
  background: #c4c4c4;
  box-shadow: 0 5.002px 0 #a6a6a6;
  pointer-events: none;
}
.hbs-submit-btn .min {
  display: block;
  font-size: 15.998px;
}
.hbs-privacy-notes {
  text-align: center;
  font-size: 15.998px;
}

/* # 完了画面・エラー画面
-------------------------------------------------------------------- */
.l-hbs-form-finish-ttl {
  position: relative;
  margin-bottom: 34.781px;
  padding: 26.669px 16.234px 25.507px;
  border: 2.318px solid #33b143;
  background-color: #fff;
}
.hbs-form-finish-ttl {
  text-align: center;
  font-family: "NotoSansJP-bold";
  font-weight: normal;
  font-size: 23.189px;
  line-height: 1.5;
  color: #33b143;
}
.hbs-form-layer p {
  margin-bottom: 26.002px;
  padding: 0 12px;
  font-size: 17.861px;
  line-height: 1.56;
}
.hbs-form-layer ul {
  margin-bottom: 26.002px;
  padding: 0 12px;
  font-size: 17.861px;
  line-height: 1.56;
}
.hbs-form-layer ul li {
  margin-bottom: 9.998px;
  padding-left: 17.861px;
  text-indent: -1em;
}
.hbs-form-layer ul li::before {
  content: "・";
}
.hbs-form-maker {
  background: linear-gradient(transparent 50%, #eaff00de 70%);
}


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