
<rss version="2.0">
    <channel>
        <title>株式会社ハッピー住まいるのブログ</title>
        <link>https://www.c21-happy-smile.co.jp/blog/</link>
        <description>株式会社ハッピー住まいるのブログ</description>
        <language>ja</language>
                
        <item>
            <title>採用情報</title>
            <link>https://www.c21-happy-smile.co.jp/blog/entry-836465/</link>
            <description><![CDATA[<style>
/* =========================================================
   CENTURY21 ハッピー住まいる
   RECRUIT PAGE
   PC / SMARTPHONE OPTIMIZED
========================================================= */

.hsr-recruit,
.hsr-recruit *,
.hsr-recruit *::before,
.hsr-recruit *::after {
  box-sizing: border-box !important;
}


/* =========================================================
   ROOT
========================================================= */

.hsr-recruit {
  --hsr-black: #111111;
  --hsr-black-light: #222222;
  --hsr-gold: #c4a35a;
  --hsr-gold-light: #e2c77d;
  --hsr-cream: #f7f4ec;
  --hsr-white: #ffffff;
  --hsr-text: #222222;
  --hsr-sub: #666666;
  --hsr-border: #e5dfd3;

  position: relative !important;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 0 !important;

  background: #ffffff !important;
  color: #222222 !important;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif !important;

  font-size: calc(16px + 2pt) !important;
  line-height: 1.8 !important;
  letter-spacing: 0 !important;

  overflow: hidden !important;
}


/* =========================================================
   RESET
========================================================= */

.hsr-recruit h1,
.hsr-recruit h2,
.hsr-recruit h3,
.hsr-recruit h4,
.hsr-recruit p,
.hsr-recruit span,
.hsr-recruit div,
.hsr-recruit a,
.hsr-recruit article,
.hsr-recruit section {
  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif !important;
}

.hsr-recruit h1,
.hsr-recruit h2,
.hsr-recruit h3,
.hsr-recruit h4,
.hsr-recruit p {
  margin-top: 0 !important;
}

.hsr-recruit a {
  text-decoration: none !important;
}


/* =========================================================
   CONTENT WIDTH
========================================================= */

.hsr-inner {
  width: 1180px !important;
  max-width: calc(100% - 60px) !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* =========================================================
   FV
========================================================= */

.hsr-fv {
  position: relative !important;

  width: 100% !important;

  padding: 105px 30px 100px !important;

  background:
    linear-gradient(
      120deg,
      #111111 0%,
      #111111 68%,
      #252525 68%,
      #252525 100%
    ) !important;

  overflow: hidden !important;
}

.hsr-fv::before {
  content: "" !important;

  position: absolute !important;

  top: -190px !important;
  right: 5% !important;

  width: 570px !important;
  height: 570px !important;

  border: 1px solid rgba(196,163,90,.20) !important;
  border-radius: 50% !important;

  pointer-events: none !important;
}

.hsr-fv::after {
  content: "" !important;

  position: absolute !important;

  bottom: -260px !important;
  right: 22% !important;

  width: 430px !important;
  height: 430px !important;

  border: 1px solid rgba(196,163,90,.12) !important;
  border-radius: 50% !important;

  pointer-events: none !important;
}

.hsr-fv-inner {
  position: relative !important;
  z-index: 2 !important;

  width: 1180px !important;
  max-width: 100% !important;

  margin: 0 auto !important;
}


/* FV LABEL */

.hsr-fv-label {
  display: flex !important;
  align-items: center !important;

  gap: 14px !important;

  margin: 0 0 30px !important;

  color: #e2c77d !important;

  font-size: calc(14px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1 !important;
  letter-spacing: .22em !important;
}

.hsr-fv-label::before {
  content: "" !important;

  display: block !important;

  width: 47px !important;
  height: 1px !important;

  background: #c4a35a !important;
}


/* FV TITLE */

.hsr-recruit .hsr-fv-title {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-size: calc(52px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.45 !important;
  letter-spacing: .04em !important;

  text-align: left !important;
}

.hsr-recruit .hsr-fv-title-main {
  display: block !important;

  color: #ffffff !important;

  font-size: calc(52px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.45 !important;
}

.hsr-recruit .hsr-fv-title-accent {
  display: block !important;

  margin-top: 7px !important;

  color: #e2c77d !important;

  font-size: calc(25px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.6 !important;
  letter-spacing: .08em !important;
}


/* FV TEXT */

.hsr-recruit .hsr-fv-text {
  width: 800px !important;
  max-width: 100% !important;

  margin: 30px 0 0 !important;

  color: #ffffff !important;

  font-size: calc(16px + 2pt) !important;
  font-weight: 400 !important;

  line-height: 2.05 !important;
  letter-spacing: .02em !important;
}


/* FV TAGS */

.hsr-fv-tags {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 12px !important;

  margin: 38px 0 0 !important;
}

.hsr-recruit .hsr-fv-tag {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-height: 45px !important;

  padding: 10px 20px !important;

  border: 1px solid rgba(226,199,125,.62) !important;

  background: transparent !important;

  color: #e2c77d !important;

  font-size: calc(13px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.4 !important;
}


/* =========================================================
   COMMON SECTION
========================================================= */

.hsr-section {
  width: 100% !important;

  padding: 95px 0 !important;
}

.hsr-section-heading {
  margin: 0 0 50px !important;

  text-align: center !important;
}

.hsr-recruit .hsr-section-en {
  display: block !important;

  margin: 0 0 10px !important;

  color: #b49754 !important;

  font-size: calc(12px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.4 !important;
  letter-spacing: .20em !important;
}

.hsr-recruit .hsr-section-title {
  margin: 0 !important;

  color: #111111 !important;

  font-size: calc(36px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.55 !important;
  letter-spacing: .03em !important;

  text-align: center !important;
}

.hsr-recruit .hsr-section-desc {
  width: 700px !important;
  max-width: 100% !important;

  margin: 18px auto 0 !important;

  color: #666666 !important;

  font-size: calc(15px + 2pt) !important;
  font-weight: 400 !important;

  line-height: 2 !important;

  text-align: center !important;
}


/* =========================================================
   MESSAGE
========================================================= */

.hsr-message {
  width: 100% !important;

  padding: 95px 0 !important;

  background: #f7f4ec !important;
}

.hsr-message-grid {
  display: grid !important;

  grid-template-columns: 440px minmax(0, 1fr) !important;

  gap: 75px !important;

  align-items: center !important;
}

.hsr-message-black {
  position: relative !important;

  min-height: 350px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  padding: 48px !important;

  background: #111111 !important;

  overflow: hidden !important;
}

.hsr-message-black::after {
  content: "C21" !important;

  position: absolute !important;

  right: 13px !important;
  bottom: -15px !important;

  color: rgba(255,255,255,.045) !important;

  font-size: calc(120px + 2pt) !important;
  font-weight: 900 !important;

  line-height: 1 !important;
}

.hsr-recruit .hsr-message-small {
  display: block !important;

  margin: 0 0 15px !important;

  color: #e2c77d !important;

  font-size: calc(12px + 2pt) !important;
  font-weight: 700 !important;

  letter-spacing: .14em !important;
}

.hsr-recruit .hsr-message-copy {
  position: relative !important;
  z-index: 2 !important;

  margin: 0 !important;

  color: #ffffff !important;

  font-size: calc(31px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.65 !important;
  letter-spacing: .04em !important;
}


/* MESSAGE RIGHT */

.hsr-recruit .hsr-message-title {
  display: block !important;

  margin: 0 0 28px !important;
  padding: 0 !important;

  color: #222222 !important;

  font-size: calc(24px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.7 !important;
  letter-spacing: .02em !important;

  text-align: left !important;
}

.hsr-recruit .hsr-message-title-line {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #222222 !important;

  font-size: inherit !important;
  font-weight: 700 !important;

  line-height: inherit !important;
  letter-spacing: inherit !important;
}

.hsr-recruit .hsr-message-title-accent {
  display: inline !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #b49754 !important;

  font-size: inherit !important;
  font-weight: 700 !important;

  line-height: inherit !important;

  vertical-align: baseline !important;
}

.hsr-recruit .hsr-message-text {
  margin: 0 !important;

  color: #555555 !important;

  font-size: calc(15px + 2pt) !important;
  font-weight: 400 !important;

  line-height: 2.15 !important;
}


/* =========================================================
   POINTS / 働く魅力
========================================================= */

.hsr-point-slider {
  position: relative !important;
}

.hsr-point-grid {
  display: grid !important;

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 22px !important;
}

.hsr-point {
  position: relative !important;

  min-width: 0 !important;
  min-height: 330px !important;

  padding: 38px 30px 35px !important;

  background: #ffffff !important;

  border: 1px solid #e5dfd3 !important;
  border-top: 3px solid #c4a35a !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease !important;
}

.hsr-point:hover {
  transform: translateY(-5px) !important;

  box-shadow: 0 14px 35px rgba(0,0,0,.08) !important;
}

.hsr-recruit .hsr-point-no {
  position: absolute !important;

  top: 18px !important;
  right: 21px !important;

  color: #eee9df !important;

  font-family: Georgia, serif !important;

  font-size: calc(50px + 2pt) !important;
  font-weight: 400 !important;

  line-height: 1 !important;
}

.hsr-point-icon {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 64px !important;
  height: 64px !important;

  margin: 0 0 23px !important;

  border-radius: 50% !important;

  background: #111111 !important;

  color: #e2c77d !important;

  font-size: calc(18px + 2pt) !important;
  font-weight: 700 !important;
}

.hsr-recruit .hsr-point-en {
  margin: 0 0 7px !important;

  color: #b49754 !important;

  font-size: calc(11px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.5 !important;
  letter-spacing: .12em !important;
}

.hsr-recruit .hsr-point-title {
  margin: 0 0 15px !important;

  color: #111111 !important;

  font-size: calc(20px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.6 !important;
}

.hsr-recruit .hsr-point-text {
  margin: 0 !important;

  color: #666666 !important;

  font-size: calc(14px + 2pt) !important;
  font-weight: 400 !important;

  line-height: 1.95 !important;
}


/* =========================================================
   SLIDER DOTS
   PCでは非表示
========================================================= */

.hsr-slider-dots {
  display: none !important;
}


/* =========================================================
   CAREER
========================================================= */

.hsr-career {
  background: #111111 !important;
}

.hsr-career .hsr-section-title {
  color: #ffffff !important;
}

.hsr-career .hsr-section-desc {
  color: rgba(255,255,255,.68) !important;
}

.hsr-career-grid {
  display: grid !important;

  grid-template-columns: repeat(2,minmax(0,1fr)) !important;

  gap: 24px !important;
}

.hsr-career-card {
  min-width: 0 !important;

  padding: 42px !important;

  background: #1d1d1d !important;

  border-top: 2px solid #c4a35a !important;
}

.hsr-recruit .hsr-career-label {
  display: block !important;

  color: #e2c77d !important;

  font-size: calc(12px + 2pt) !important;
  font-weight: 700 !important;

  letter-spacing: .12em !important;
}

.hsr-recruit .hsr-career-title {
  margin: 10px 0 20px !important;

  color: #ffffff !important;

  font-size: calc(23px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.5 !important;
}

.hsr-recruit .hsr-career-income {
  margin: 0 0 17px !important;

  color: #ffffff !important;

  font-size: calc(15px + 2pt) !important;
  font-weight: 500 !important;
}

.hsr-recruit .hsr-career-income strong {
  color: #e2c77d !important;

  font-size: calc(36px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1 !important;
}

.hsr-recruit .hsr-career-text {
  margin: 0 !important;

  color: rgba(255,255,255,.70) !important;

  font-size: calc(14px + 2pt) !important;

  line-height: 1.9 !important;
}

.hsr-career-step {
  display: flex !important;

  gap: 8px !important;

  margin: 25px 0 0 !important;
}

.hsr-recruit .hsr-career-step span {
  flex: 1 !important;

  padding: 11px 5px !important;

  background: rgba(255,255,255,.06) !important;

  color: #dddddd !important;

  font-size: calc(12px + 2pt) !important;
  font-weight: 500 !important;

  text-align: center !important;
}

.hsr-recruit .hsr-career-step .active {
  background: #e2c77d !important;

  color: #111111 !important;

  font-weight: 700 !important;
}


/* =========================================================
   BENEFITS
========================================================= */

.hsr-benefits {
  background: #f7f4ec !important;
}

.hsr-benefit-slider {
  position: relative !important;
}

.hsr-benefit-grid {
  display: grid !important;

  grid-template-columns: repeat(4,minmax(0,1fr)) !important;

  gap: 15px !important;
}

.hsr-benefit {
  min-width: 0 !important;
  min-height: 190px !important;

  padding: 28px 18px !important;

  background: #ffffff !important;

  border-bottom: 2px solid transparent !important;

  text-align: center !important;

  transition: .25s ease !important;
}

.hsr-benefit:hover {
  border-color: #c4a35a !important;
}

.hsr-benefit-icon {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 55px !important;
  height: 55px !important;

  margin: 0 auto 17px !important;

  border: 1px solid #c4a35a !important;
  border-radius: 50% !important;

  color: #b49754 !important;

  font-size: calc(17px + 2pt) !important;
  font-weight: 700 !important;
}

.hsr-recruit .hsr-benefit-title {
  margin: 0 0 8px !important;

  color: #222222 !important;

  font-size: calc(16px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.5 !important;
}

.hsr-recruit .hsr-benefit-text {
  margin: 0 !important;

  color: #777777 !important;

  font-size: calc(13px + 2pt) !important;

  line-height: 1.7 !important;
}


/* =========================================================
   JOB INFORMATION
========================================================= */

.hsr-job {
  width: 980px !important;
  max-width: 100% !important;

  margin: 0 auto !important;

  border-top: 1px solid #dddddd !important;
}

.hsr-job-row {
  display: grid !important;

  grid-template-columns: 200px minmax(0,1fr) !important;

  border-bottom: 1px solid #dddddd !important;
}

.hsr-recruit .hsr-job-label {
  padding: 22px 25px !important;

  background: #f7f4ec !important;

  color: #222222 !important;

  font-size: calc(14px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.7 !important;
}

.hsr-recruit .hsr-job-content {
  min-width: 0 !important;

  padding: 22px 30px !important;

  background: #ffffff !important;

  color: #555555 !important;

  font-size: calc(14px + 2pt) !important;
  font-weight: 400 !important;

  line-height: 1.95 !important;
}


/* =========================================================
   CTA
========================================================= */

.hsr-cta {
  width: 100% !important;

  padding: 85px 30px !important;

  background: #c4a35a !important;

  text-align: center !important;
}

.hsr-recruit .hsr-cta-en {
  display: block !important;

  margin: 0 0 10px !important;

  color: rgba(17,17,17,.62) !important;

  font-size: calc(12px + 2pt) !important;
  font-weight: 700 !important;

  letter-spacing: .18em !important;
}

.hsr-recruit .hsr-cta-title {
  margin: 0 0 15px !important;

  color: #111111 !important;

  font-size: calc(36px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.5 !important;
}

.hsr-recruit .hsr-cta-text {
  margin: 0 0 28px !important;

  color: rgba(17,17,17,.72) !important;

  font-size: calc(15px + 2pt) !important;

  line-height: 1.9 !important;
}

.hsr-cta-buttons {
  display: flex !important;

  justify-content: center !important;

  gap: 12px !important;
}

.hsr-recruit .hsr-btn {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 285px !important;

  min-height: 57px !important;

  padding: 15px 25px !important;

  border: 1px solid #111111 !important;

  background: #111111 !important;

  color: #ffffff !important;

  font-size: calc(14px + 2pt) !important;
  font-weight: 700 !important;

  line-height: 1.4 !important;

  text-decoration: none !important;

  transition: .25s ease !important;
}

.hsr-recruit .hsr-btn:hover {
  background: #2c2c2c !important;
}

.hsr-recruit .hsr-btn-sub {
  background: #ffffff !important;

  color: #111111 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 1000px) {

  .hsr-inner {
    max-width: calc(100% - 40px) !important;
  }

  .hsr-message-grid {
    grid-template-columns: 360px minmax(0,1fr) !important;

    gap: 40px !important;
  }

  .hsr-point-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  .hsr-benefit-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

  /* ---------------------------------------------------------
     ROOT
  --------------------------------------------------------- */

  .hsr-recruit {
    width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .hsr-inner {
    width: auto !important;
    max-width: none !important;

    margin-left: 20px !important;
    margin-right: 20px !important;
  }


  /* ---------------------------------------------------------
     FV
  --------------------------------------------------------- */

  .hsr-fv {
    padding: 58px 20px 58px !important;

    background:
      linear-gradient(
        145deg,
        #111111 0%,
        #111111 78%,
        #1d1d1d 78%,
        #1d1d1d 100%
      ) !important;
  }

  .hsr-fv::before {
    width: 280px !important;
    height: 280px !important;

    top: -125px !important;
    right: -125px !important;
  }

  .hsr-fv::after {
    width: 250px !important;
    height: 250px !important;

    bottom: -170px !important;
    right: -80px !important;
  }

  .hsr-fv-label {
    gap: 10px !important;

    margin-bottom: 22px !important;

    font-size: 13px !important;
  }

  .hsr-fv-label::before {
    width: 32px !important;
  }

  .hsr-recruit .hsr-fv-title,
  .hsr-recruit .hsr-fv-title-main {
    font-size: 31px !important;

    line-height: 1.45 !important;
    letter-spacing: .02em !important;
  }

  .hsr-recruit .hsr-fv-title-accent {
    margin-top: 7px !important;

    font-size: 20px !important;

    line-height: 1.6 !important;
    letter-spacing: .04em !important;
  }

  .hsr-recruit .hsr-fv-text {
    margin-top: 23px !important;

    font-size: 15px !important;

    line-height: 1.95 !important;

    letter-spacing: 0 !important;
  }

  .hsr-fv-tags {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 7px !important;

    margin-top: 27px !important;
  }

  .hsr-recruit .hsr-fv-tag {
    min-height: 37px !important;

    padding: 7px 11px !important;

    font-size: 12px !important;

    line-height: 1.35 !important;
  }


  /* ---------------------------------------------------------
     COMMON
  --------------------------------------------------------- */

  .hsr-section {
    padding: 62px 0 !important;
  }

  .hsr-section-heading {
    margin-bottom: 32px !important;
  }

  .hsr-recruit .hsr-section-en {
    margin-bottom: 8px !important;

    font-size: 12px !important;
  }

  .hsr-recruit .hsr-section-title {
    font-size: 27px !important;

    line-height: 1.5 !important;
    letter-spacing: .02em !important;
  }

  .hsr-recruit .hsr-section-desc {
    margin-top: 13px !important;

    font-size: 14px !important;

    line-height: 1.9 !important;

    text-align: left !important;
  }


  /* ---------------------------------------------------------
     MESSAGE
  --------------------------------------------------------- */

  .hsr-message {
    padding: 56px 0 62px !important;
  }

  .hsr-message-grid {
    display: block !important;
  }

  .hsr-message-black {
    min-height: 235px !important;

    margin-bottom: 34px !important;

    padding: 31px 27px !important;
  }

  .hsr-message-black::after {
    right: 6px !important;
    bottom: -10px !important;

    font-size: 92px !important;
  }

  .hsr-recruit .hsr-message-small {
    margin-bottom: 13px !important;

    font-size: 11px !important;

    line-height: 1.6 !important;
  }

  .hsr-recruit .hsr-message-copy {
    font-size: 27px !important;

    line-height: 1.65 !important;

    letter-spacing: .02em !important;
  }

  .hsr-recruit .hsr-message-title {
    margin-bottom: 21px !important;

    font-size: 22px !important;

    line-height: 1.65 !important;
  }

  .hsr-recruit .hsr-message-title-line {
    display: block !important;

    font-size: inherit !important;
    line-height: inherit !important;
  }

  .hsr-recruit .hsr-message-title-accent {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .hsr-recruit .hsr-message-text {
    font-size: 15px !important;

    line-height: 2 !important;
  }


  /* =========================================================
     働く魅力
     SMARTPHONE SLIDER
  ========================================================= */

  .hsr-point-slider {
    width: 100% !important;

    overflow: hidden !important;

    padding-bottom: 39px !important;

    touch-action: pan-y !important;
  }

  .hsr-point-grid {
    display: flex !important;

    width: 100% !important;

    gap: 0 !important;

    transform: translate3d(0,0,0);

    transition: transform .55s cubic-bezier(.22,.61,.36,1) !important;

    will-change: transform !important;
  }

  .hsr-point {
    flex: 0 0 100% !important;

    width: 100% !important;

    min-width: 100% !important;
    min-height: 365px !important;

    padding: 32px 25px 30px !important;

    transform: none !important;

    box-shadow: 0 7px 24px rgba(0,0,0,.055) !important;
  }

  .hsr-point:hover {
    transform: none !important;
  }

  .hsr-recruit .hsr-point-no {
    top: 17px !important;
    right: 18px !important;

    font-size: 47px !important;
  }

  .hsr-point-icon {
    width: 58px !important;
    height: 58px !important;

    margin-bottom: 21px !important;

    font-size: 17px !important;
  }

  .hsr-recruit .hsr-point-en {
    font-size: 11px !important;
  }

  .hsr-recruit .hsr-point-title {
    margin-bottom: 13px !important;

    font-size: 21px !important;

    line-height: 1.55 !important;
  }

  .hsr-recruit .hsr-point-text {
    font-size: 14px !important;

    line-height: 1.9 !important;
  }


  /* ---------------------------------------------------------
     SLIDER DOT
  --------------------------------------------------------- */

  .hsr-slider-dots {
    display: flex !important;

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 3px !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;
  }

  .hsr-slider-dot {
    display: block !important;

    width: 7px !important;
    height: 7px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 50% !important;

    background: #d2ccc1 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    transition:
      width .25s ease,
      background .25s ease !important;
  }

  .hsr-slider-dot.is-active {
    width: 23px !important;

    border-radius: 10px !important;

    background: #c4a35a !important;
  }


  /* =========================================================
     CAREER
  ========================================================= */

  .hsr-career {
    padding-top: 62px !important;
    padding-bottom: 62px !important;
  }

  .hsr-career .hsr-section-desc {
    text-align: left !important;
  }

  .hsr-career-grid {
    display: block !important;
  }

  .hsr-career-card {
    padding: 29px 23px !important;
  }

  .hsr-career-card + .hsr-career-card {
    margin-top: 15px !important;
  }

  .hsr-recruit .hsr-career-label {
    font-size: 11px !important;
  }

  .hsr-recruit .hsr-career-title {
    margin: 8px 0 17px !important;

    font-size: 21px !important;
  }

  .hsr-recruit .hsr-career-income {
    font-size: 14px !important;
  }

  .hsr-recruit .hsr-career-income strong {
    font-size: 33px !important;
  }

  .hsr-recruit .hsr-career-text {
    font-size: 14px !important;

    line-height: 1.8 !important;
  }

  .hsr-career-step {
    margin-top: 20px !important;

    flex-direction: row !important;

    gap: 5px !important;
  }

  .hsr-recruit .hsr-career-step span {
    padding: 9px 3px !important;

    font-size: 11px !important;
  }


  /* =========================================================
     BENEFITS
     SMARTPHONE SLIDER
  ========================================================= */

  .hsr-benefit-slider {
    width: 100% !important;

    overflow: hidden !important;

    padding-bottom: 40px !important;

    touch-action: pan-y !important;
  }

  .hsr-benefit-grid {
    display: flex !important;

    width: 100% !important;

    gap: 0 !important;

    transform: translate3d(0,0,0);

    transition: transform .55s cubic-bezier(.22,.61,.36,1) !important;

    will-change: transform !important;
  }

  .hsr-benefit {
    flex: 0 0 100% !important;

    width: 100% !important;

    min-width: 100% !important;
    min-height: 260px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 32px 22px !important;

    border-bottom: 3px solid #c4a35a !important;

    box-shadow: 0 7px 24px rgba(0,0,0,.045) !important;
  }

  .hsr-benefit-icon {
    width: 61px !important;
    height: 61px !important;

    margin-bottom: 18px !important;

    font-size: 18px !important;
  }

  .hsr-recruit .hsr-benefit-title {
    margin-bottom: 10px !important;

    font-size: 20px !important;

    line-height: 1.5 !important;
  }

  .hsr-recruit .hsr-benefit-text {
    font-size: 14px !important;

    line-height: 1.8 !important;
  }


  /* =========================================================
     JOB INFORMATION
  ========================================================= */

  .hsr-job {
    width: 100% !important;

    border-top: 0 !important;
  }

  .hsr-job-row {
    display: block !important;

    margin-bottom: 13px !important;

    border: 1px solid #e3ded5 !important;
  }

  .hsr-recruit .hsr-job-label {
    padding: 11px 15px !important;

    border-bottom: 1px solid #e3ded5 !important;

    background: #f2ede4 !important;

    color: #222222 !important;

    font-size: 14px !important;

    line-height: 1.6 !important;
  }

  .hsr-recruit .hsr-job-content {
    padding: 15px !important;

    font-size: 14px !important;

    line-height: 1.85 !important;
  }


  /* =========================================================
     CTA
  ========================================================= */

  .hsr-cta {
    padding: 58px 20px 62px !important;
  }

  .hsr-recruit .hsr-cta-en {
    margin-bottom: 9px !important;

    font-size: 11px !important;
  }

  .hsr-recruit .hsr-cta-title {
    margin-bottom: 15px !important;

    font-size: 27px !important;

    line-height: 1.5 !important;
  }

  .hsr-recruit .hsr-cta-text {
    margin-bottom: 25px !important;

    font-size: 14px !important;

    line-height: 1.9 !important;
  }

  .hsr-recruit .hsr-cta-text br {
    display: none !important;
  }

  .hsr-cta-buttons {
    display: block !important;
  }

  .hsr-recruit .hsr-btn {
    width: 100% !important;

    min-height: 55px !important;

    font-size: 14px !important;
  }

  .hsr-recruit .hsr-btn + .hsr-btn {
    margin-top: 10px !important;
  }

}


/* =========================================================
   VERY SMALL SMARTPHONE
========================================================= */

@media screen and (max-width: 374px) {

  .hsr-inner {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  .hsr-fv {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hsr-recruit .hsr-fv-title,
  .hsr-recruit .hsr-fv-title-main {
    font-size: 28px !important;
  }

  .hsr-recruit .hsr-fv-title-accent {
    font-size: 18px !important;
  }

  .hsr-recruit .hsr-section-title {
    font-size: 25px !important;
  }

  .hsr-career-step {
    flex-direction: column !important;
  }

}
</style>


<div class="hsr-recruit">


  <!-- =====================================================
       FV
  ====================================================== -->

  <section class="hsr-fv">

    <div class="hsr-fv-inner">

      <div class="hsr-fv-label">
        RECRUIT
      </div>

      <h1 class="hsr-fv-title">

        <span class="hsr-fv-title-main">
          家を売る仕事ではなく、
        </span>

        <span class="hsr-fv-title-accent">
          人生の選択を支える仕事。
        </span>

      </h1>

      <p class="hsr-fv-text">
        センチュリー21 ハッピー住まいるでは、
        一緒に地域のお客様の住まい探しを支えてくれる仲間を募集しています。
        経験よりも大切にしているのは、人の話を聞き、
        その人にとって一番良い選択を一緒に考えられることです。
      </p>

      <div class="hsr-fv-tags">

        <span class="hsr-fv-tag">
          未経験歓迎
        </span>

        <span class="hsr-fv-tag">
          センチュリー21加盟店
        </span>

        <span class="hsr-fv-tag">
          地域密着
        </span>

        <span class="hsr-fv-tag">
          資格取得支援
        </span>

        <span class="hsr-fv-tag">
          インセンティブ制度
        </span>

      </div>

    </div>

  </section>



  <!-- =====================================================
       MESSAGE
  ====================================================== -->

  <section class="hsr-message">

    <div class="hsr-inner">

      <div class="hsr-message-grid">


        <div class="hsr-message-black">

          <span class="hsr-message-small">
            CENTURY 21 HAPPY SUMAIRU
          </span>

          <h2 class="hsr-message-copy">
            「売る」より、<br>
            「相談される」人へ</h2>

        </div>


        <div>

          <h2 class="hsr-message-title">

            <span class="hsr-message-title-line">
              数字だけを追う営業ではなく、
            </span>

            <span class="hsr-message-title-line">
              <span class="hsr-message-title-accent">
                お客様から頼られる営業
              </span>
              を目指しませんか？
            </span>

          </h2>

          <p class="hsr-message-text">
            不動産は、お客様にとって人生の中でも特に大きな買い物です。
            だからこそ、ハッピー住まいるが大切にしているのは、
            一方的に物件をすすめる営業ではありません。
            <br><br>
            お客様がどんな暮らしをしたいのか。
            何を不安に感じているのか。
            その一つひとつを丁寧に聞きながら、
            一緒に答えを探していく仕事です。
            <br><br>
            センチュリー21のネットワークを活かしながら、
            岡崎市を中心とした西三河・東三河で、
            地域のお客様に長く頼っていただける存在を目指しています。
          </p>

        </div>


      </div>

    </div>

  </section>



  <!-- =====================================================
       POINT
  ====================================================== -->

  <section class="hsr-section">

    <div class="hsr-inner">

      <div class="hsr-section-heading">

        <span class="hsr-section-en">
          WHY HAPPY SUMAIRU?
        </span>

        <h2 class="hsr-section-title">
          ハッピー住まいるで</h2><h2 class="hsr-section-title">働く魅力
        </h2>

        <p class="hsr-section-desc">
          不動産の知識だけではなく、
          営業力・提案力・住まいに関する幅広い知識を身につけながら、
          自分らしいキャリアをつくれる環境を目指しています。
        </p>

      </div>


      <div class="hsr-point-slider hsr-js-slider" data-slider-type="point" data-autoplay="3000">

        <div class="hsr-point-grid hsr-js-track">


          <!-- 01 -->

          <article class="hsr-point">

            <span class="hsr-point-no">
              01
            </span>

            <div class="hsr-point-icon">
              C21
            </div>

            <div class="hsr-point-en">
              BRAND & NETWORK
            </div>

            <h3 class="hsr-point-title">
              センチュリー21の<br>
              ブランドとノウハウ
            </h3>

            <p class="hsr-point-text">
              全国に広がるセンチュリー21ネットワークの
              研修・営業ノウハウを活用できます。
              不動産未経験からでも、
              基礎から知識を身につけられる環境です。
            </p>

          </article>


          <!-- 02 -->

          <article class="hsr-point">

            <span class="hsr-point-no">
              02
            </span>

            <div class="hsr-point-icon">
              ¥
            </div>

            <div class="hsr-point-en">
              INCOME
            </div>

            <h3 class="hsr-point-title">
              頑張った分を、<br>
              しっかり収入へ
            </h3>

            <p class="hsr-point-text">
              固定給に加えてインセンティブ制度を用意。
              成果を出した分だけ収入アップにつながるため、
              自分の成長を実感しながら働けます。
            </p>

          </article>


          <!-- 03 -->

          <article class="hsr-point">

            <span class="hsr-point-no">
              03
            </span>

            <div class="hsr-point-icon">
              家
            </div>

            <div class="hsr-point-en">
              TOTAL SUPPORT
            </div>

            <h3 class="hsr-point-title">
              不動産＋リフォームまで<br>
              幅広い知識が身につく
            </h3>

            <p class="hsr-point-text">
              売買仲介だけでなく、
              リフォームや外構工事まで扱っているため、
              「家を売る」だけではない
              住まい全体の提案力を身につけられます。
            </p>

          </article>


          <!-- 04 -->

          <article class="hsr-point">

            <span class="hsr-point-no">
              04
            </span>

            <div class="hsr-point-icon">
              人
            </div>

            <div class="hsr-point-en">
              CUSTOMER FIRST
            </div>

            <h3 class="hsr-point-title">
              お客様に向き合う<br>
              営業スタイル
            </h3>

            <p class="hsr-point-text">
              とにかく契約を取るのではなく、
              お客様の希望や悩みを聞くことを大切にしています。
              「人に喜んでもらえる仕事がしたい」
              という方に向いている会社です。
            </p>

          </article>


          <!-- 05 -->

          <article class="hsr-point">

            <span class="hsr-point-no">
              05
            </span>

            <div class="hsr-point-icon">
              ↑
            </div>

            <div class="hsr-point-en">
              CAREER
            </div>

            <h3 class="hsr-point-title">
              未経験から、<br>
              不動産のプロへ
            </h3>

            <p class="hsr-point-text">
              接客、物件案内、住宅ローン、
              契約、リフォーム提案など、
              実務を通して段階的にスキルアップ。
              宅建取得にも挑戦できます。
            </p>

          </article>


          <!-- 06 -->

          <article class="hsr-point">

            <span class="hsr-point-no">
              06
            </span>

            <div class="hsr-point-icon">
              岡
            </div>

            <div class="hsr-point-en">
              LOCAL
            </div>

            <h3 class="hsr-point-title">
              岡崎を中心に、<br>
              地域に根ざして働く
            </h3>

            <p class="hsr-point-text">
              転勤を繰り返す働き方ではなく、
              地域のお客様との関係を積み重ねていく仕事。
              西三河・東三河で長く働きたい方にも適しています。
            </p>

          </article>


        </div>

        <div class="hsr-slider-dots hsr-js-dots" aria-label="働く魅力 スライド位置"></div>

      </div>

    </div>

  </section>



  <!-- =====================================================
       CAREER & INCOME
  ====================================================== -->

  <section class="hsr-section hsr-career">

    <div class="hsr-inner">

      <div class="hsr-section-heading">

        <span class="hsr-section-en">
          CAREER & INCOME
        </span>

        <h2 class="hsr-section-title">
          成長が、そのままキャリアになる。
        </h2>

        <p class="hsr-section-desc">
          未経験から不動産営業へ。<br>
          経験を積んだ後は、リーダー・マネージャーなど
          次のキャリアも目指せます。
        </p>

      </div>


      <div class="hsr-career-grid">


        <div class="hsr-career-card">

          <span class="hsr-career-label">
            MODEL CASE 01
          </span>

          <h3 class="hsr-career-title">
            未経験入社・1年目
          </h3>

          <p class="hsr-career-income">
            年収
            <strong>420万円</strong>
            程度
          </p>

          <p class="hsr-career-text">
            月給23.8万円＋各種手当＋インセンティブ＋賞与
          </p>

          <div class="hsr-career-step">

            <span class="active">
              基礎研修
            </span>

            <span>
              営業同行
            </span>

            <span>
              担当デビュー
            </span>

          </div>

        </div>



        <div class="hsr-career-card">

          <span class="hsr-career-label">
            MODEL CASE 02
          </span>

          <h3 class="hsr-career-title">
            営業経験3年・リーダー
          </h3>

          <p class="hsr-career-income">
            年収
            <strong>650万円</strong>
            程度
          </p>

          <p class="hsr-career-text">
            月給35万円＋役職手当＋インセンティブ＋賞与
          </p>

          <div class="hsr-career-step">

            <span>
              営業担当
            </span>

            <span class="active">
              リーダー
            </span>

            <span>
              マネージャー
            </span>

          </div>

        </div>


      </div>

    </div>

  </section>



  <!-- =====================================================
       BENEFITS
  ====================================================== -->

  <section class="hsr-section hsr-benefits">

    <div class="hsr-inner">

      <div class="hsr-section-heading">

        <span class="hsr-section-en">
          BENEFITS
        </span>

        <h2 class="hsr-section-title">
          長く働くための環境も。
        </h2>

        <p class="hsr-section-desc">
          仕事だけではなく、
          一人ひとりの生活や将来も大切にできる会社を目指しています。
        </p>

      </div>


      <div class="hsr-benefit-slider hsr-js-slider" data-slider-type="benefit" data-autoplay="3000">

        <div class="hsr-benefit-grid hsr-js-track">


          <div class="hsr-benefit">

            <div class="hsr-benefit-icon">
              休
            </div>

            <h3 class="hsr-benefit-title">
              隔週週休2日制
            </h3>

            <p class="hsr-benefit-text">
              水曜日＋シフト制で<br>
              メリハリある勤務
            </p>

          </div>


          <div class="hsr-benefit">

            <div class="hsr-benefit-icon">
              賞
            </div>

            <h3 class="hsr-benefit-title">
              賞与制度
            </h3>

            <p class="hsr-benefit-text">
              日々の成果を<br>
              しっかり評価
            </p>

          </div>


          <div class="hsr-benefit">

            <div class="hsr-benefit-icon">
              ＋
            </div>

            <h3 class="hsr-benefit-title">
              インセンティブ
            </h3>

            <p class="hsr-benefit-text">
              契約実績に応じて<br>
              給与へ還元
            </p>

          </div>


          <div class="hsr-benefit">

            <div class="hsr-benefit-icon">
              宅
            </div>

            <h3 class="hsr-benefit-title">
              宅建資格手当
            </h3>

            <p class="hsr-benefit-text">
              資格を活かして<br>
              収入アップへ
            </p>

          </div>


          <div class="hsr-benefit">

            <div class="hsr-benefit-icon">
              学
            </div>

            <h3 class="hsr-benefit-title">
              資格取得支援
            </h3>

            <p class="hsr-benefit-text">
              不動産のプロを目指す<br>
              成長をサポート
            </p>

          </div>


          <div class="hsr-benefit">

            <div class="hsr-benefit-icon">
              研
            </div>

            <h3 class="hsr-benefit-title">
              研修制度
            </h3>

            <p class="hsr-benefit-text">
              センチュリー21の<br>
              研修制度を活用
            </p>

          </div>


          <div class="hsr-benefit">

            <div class="hsr-benefit-icon">
              車
            </div>

            <h3 class="hsr-benefit-title">
              営業車あり
            </h3>

            <p class="hsr-benefit-text">
              お客様のご案内など<br>
              営業活動をサポート
            </p>

          </div>


          <div class="hsr-benefit">

            <div class="hsr-benefit-icon">
              休
            </div>

            <h3 class="hsr-benefit-title">
              長期休暇
            </h3>

            <p class="hsr-benefit-text">
              GW・夏季・年末年始など<br>
              長期休暇制度あり
            </p>

          </div>


          <div class="hsr-benefit">

            <div class="hsr-benefit-icon">
              保
            </div>

            <h3 class="hsr-benefit-title">
              社会保険完備
            </h3>

            <p class="hsr-benefit-text">
              安心して長く<br>
              働ける環境
            </p>

          </div>


          <div class="hsr-benefit">

            <div class="hsr-benefit-icon">
              交
            </div>

            <h3 class="hsr-benefit-title">
              交通費支給
            </h3>

            <p class="hsr-benefit-text">
              毎日の通勤を<br>
              会社がサポート
            </p>

          </div>


          <div class="hsr-benefit">

            <div class="hsr-benefit-icon">
              有
            </div>

            <h3 class="hsr-benefit-title">
              有給休暇
            </h3>

            <p class="hsr-benefit-text">
              プライベートの予定にも<br>
              柔軟に対応
            </p>

          </div>


          <div class="hsr-benefit">

            <div class="hsr-benefit-icon">
              PC
            </div>

            <h3 class="hsr-benefit-title">
              PC貸与
            </h3>

            <p class="hsr-benefit-text">
              業務に必要なPCを<br>
              会社で用意
            </p>

          </div>


        </div>

        <div class="hsr-slider-dots hsr-js-dots" aria-label="福利厚生 スライド位置"></div>

      </div>

    </div>

  </section>



  <!-- =====================================================
       JOB INFORMATION
  ====================================================== -->

  <section class="hsr-section">

    <div class="hsr-inner">

      <div class="hsr-section-heading">

        <span class="hsr-section-en">
          JOB INFORMATION
        </span>

        <h2 class="hsr-section-title">
          募集要項
        </h2>

      </div>


      <div class="hsr-job">


        <div class="hsr-job-row">

          <div class="hsr-job-label">
            募集職種
          </div>

          <div class="hsr-job-content">
            不動産売買営業
          </div>

        </div>


        <div class="hsr-job-row">

          <div class="hsr-job-label">
            雇用形態
          </div>

          <div class="hsr-job-content">
            正社員
          </div>

        </div>


        <div class="hsr-job-row">

          <div class="hsr-job-label">
            仕事内容
          </div>

          <div class="hsr-job-content">
            ・お問い合わせいただいたお客様への対応<br>
            ・ご希望条件のヒアリング<br>
            ・物件のご提案、現地へのご案内<br>
            ・住宅ローン等の資金計画サポート<br>
            ・売買契約、引き渡しまでのサポート<br>
            ・リフォーム、外構工事等のご提案
          </div>

        </div>


        <div class="hsr-job-row">

          <div class="hsr-job-label">
            給与
          </div>

          <div class="hsr-job-content">
            月給238,000円～400,000円＋インセンティブ<br>
            ※経験・能力等を考慮して決定します。
          </div>

        </div>


        <div class="hsr-job-row">

          <div class="hsr-job-label">
            昇給・賞与
          </div>

          <div class="hsr-job-content">
            昇給制度あり<br>
            賞与制度あり
          </div>

        </div>


        <div class="hsr-job-row">

          <div class="hsr-job-label">
            勤務時間
          </div>

          <div class="hsr-job-content">
            10:00～19:00
          </div>

        </div>


        <div class="hsr-job-row">

          <div class="hsr-job-label">
            休日・休暇
          </div>

          <div class="hsr-job-content">
            隔週週休2日制（水曜日＋シフト制）<br>
            GW休暇・夏季休暇・年末年始休暇・有給休暇・慶弔休暇
          </div>

        </div>


        <div class="hsr-job-row">

          <div class="hsr-job-label">
            勤務地
          </div>

          <div class="hsr-job-content">
            愛知県岡崎市
          </div>

        </div>


        <div class="hsr-job-row">

          <div class="hsr-job-label">
            応募資格
          </div>

          <div class="hsr-job-content">
            普通自動車免許をお持ちの方<br>
            学歴・不動産業界経験不問
            <br><br>

            ＜歓迎する方＞<br>
            ・人と話すことが好きな方<br>
            ・営業、販売、接客経験を活かしたい方<br>
            ・岡崎市、西三河で長く働きたい方<br>
            ・宅地建物取引士資格をお持ちの方
          </div>

        </div>


        <div class="hsr-job-row">

          <div class="hsr-job-label">
            福利厚生
          </div>

          <div class="hsr-job-content">
            社会保険完備／交通費支給／営業車あり／
            PC貸与／宅建資格手当／資格取得支援制度／
            センチュリー21研修制度／健康診断／各種社内イベント
          </div>

        </div>


      </div>

    </div>

  </section>



  <!-- =====================================================
       CTA
  ====================================================== -->

  <section class="hsr-cta">

    <div class="hsr-inner">

      <span class="hsr-cta-en">
        ENTRY
      </span>

      <h2 class="hsr-cta-title">
        まずは、話を聞いてみませんか？
      </h2>

      <p class="hsr-cta-text">
        「不動産業界に少し興味がある」でも大丈夫です。<br>
        仕事内容や働き方について、気になることからお気軽にご相談ください。
      </p>

      <div class="hsr-cta-buttons">

        <a href="/contact/" class="hsr-btn" target="_blank">
          採用に応募する
        </a>

        <a href="/contact/" class="hsr-btn hsr-btn-sub" target="_blank">
          まずは話を聞いてみる
        </a>

      </div>

    </div>

  </section>


</div>


<script>
(function () {

  /* =========================================================
     HSR SMARTPHONE SLIDER

     ・767px以下のみ有効
     ・3秒ごとに自動スライド
     ・指で左右スワイプ可能
     ・ドット操作可能
     ・PCに戻した場合はtransformを解除
  ========================================================= */

  var MOBILE_BREAKPOINT = 767;

  var sliders =
    document.querySelectorAll('.hsr-js-slider');


  if (!sliders.length) {
    return;
  }


  sliders.forEach(function (slider) {

    var track =
      slider.querySelector('.hsr-js-track');

    var dotsArea =
      slider.querySelector('.hsr-js-dots');

    if (!track || !dotsArea) {
      return;
    }


    var slides =
      Array.prototype.slice.call(track.children);

    if (!slides.length) {
      return;
    }


    var currentIndex = 0;

    var timer = null;

    var touchStartX = 0;
    var touchStartY = 0;

    var touchEndX = 0;
    var touchEndY = 0;

    var autoplayTime =
      parseInt(
        slider.getAttribute('data-autoplay'),
        10
      ) || 3000;


    /* =====================================================
       MOBILE CHECK
    ===================================================== */

    function isMobile() {

      return window.innerWidth <= MOBILE_BREAKPOINT;

    }


    /* =====================================================
       CREATE DOTS
    ===================================================== */

    function createDots() {

      dotsArea.innerHTML = '';

      slides.forEach(function (_, index) {

        var dot =
          document.createElement('button');

        dot.type = 'button';

        dot.className = 'hsr-slider-dot';

        dot.setAttribute(
          'aria-label',
          (index + 1) + '枚目を表示'
        );


        if (index === currentIndex) {

          dot.classList.add('is-active');

        }


        dot.addEventListener(
          'click',
          function () {

            if (!isMobile()) {
              return;
            }

            currentIndex = index;

            updateSlider();

            restartAuto();

          }
        );


        dotsArea.appendChild(dot);

      });

    }


    /* =====================================================
       UPDATE
    ===================================================== */

    function updateSlider() {

      if (!isMobile()) {

        track.style.transform = '';

        return;
      }


      track.style.transform =
        'translate3d(-' +
        (currentIndex * 100) +
        '%, 0, 0)';


      var dots =
        dotsArea.querySelectorAll(
          '.hsr-slider-dot'
        );


      dots.forEach(function (dot, index) {

        if (index === currentIndex) {

          dot.classList.add(
            'is-active'
          );

        } else {

          dot.classList.remove(
            'is-active'
          );

        }

      });

    }


    /* =====================================================
       NEXT
    ===================================================== */

    function nextSlide() {

      if (!isMobile()) {
        return;
      }

      currentIndex++;

      if (currentIndex >= slides.length) {

        currentIndex = 0;

      }

      updateSlider();

    }


    /* =====================================================
       PREVIOUS
    ===================================================== */

    function prevSlide() {

      if (!isMobile()) {
        return;
      }

      currentIndex--;

      if (currentIndex < 0) {

        currentIndex =
          slides.length - 1;

      }

      updateSlider();

    }


    /* =====================================================
       AUTOPLAY
    ===================================================== */

    function stopAuto() {

      if (timer) {

        clearInterval(timer);

        timer = null;

      }

    }


    function startAuto() {

      stopAuto();


      if (!isMobile()) {
        return;
      }


      timer =
        setInterval(
          nextSlide,
          autoplayTime
        );

    }


    function restartAuto() {

      stopAuto();

      startAuto();

    }


    /* =====================================================
       TOUCH
    ===================================================== */

    slider.addEventListener(
      'touchstart',
      function (event) {

        if (!isMobile()) {
          return;
        }

        var touch =
          event.changedTouches[0];

        touchStartX =
          touch.clientX;

        touchStartY =
          touch.clientY;

        stopAuto();

      },
      {
        passive: true
      }
    );


    slider.addEventListener(
      'touchend',
      function (event) {

        if (!isMobile()) {
          return;
        }


        var touch =
          event.changedTouches[0];

        touchEndX =
          touch.clientX;

        touchEndY =
          touch.clientY;


        var diffX =
          touchEndX - touchStartX;

        var diffY =
          touchEndY - touchStartY;


        /*
          縦スクロールより
          横方向の移動量が大きい場合だけ
          スライド操作として判定
        */

        if (
          Math.abs(diffX) >
          Math.abs(diffY)
          &&
          Math.abs(diffX) > 45
        ) {

          if (diffX < 0) {

            nextSlide();

          } else {

            prevSlide();

          }

        }


        startAuto();

      },
      {
        passive: true
      }
    );


    /* =====================================================
       TAB / WINDOW VISIBILITY
    ===================================================== */

    document.addEventListener(
      'visibilitychange',
      function () {

        if (
          document.visibilityState ===
          'hidden'
        ) {

          stopAuto();

        } else {

          startAuto();

        }

      }
    );


    /* =====================================================
       RESIZE
    ===================================================== */

    var resizeTimer = null;


    window.addEventListener(
      'resize',
      function () {

        clearTimeout(resizeTimer);


        resizeTimer =
          setTimeout(
            function () {

              if (!isMobile()) {

                currentIndex = 0;

                track.style.transform = '';

                stopAuto();

              } else {

                updateSlider();

                startAuto();

              }

            },
            150
          );

      }
    );


    /* =====================================================
       INIT
    ===================================================== */

    createDots();

    updateSlider();

    startAuto();

  });

})();
</script>]]></description>
            <pubDate>2026-08-01</pubDate>
        </item>
            </channel>
</rss>
