.elementor-61 .elementor-element.elementor-element-1b1a7f90{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-31e3ed1c *//* =========================
   History Hero
========================= */

.history-hero {
  position: relative;

  width: 100%;
  min-height: 720px;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(9, 24, 46, 0.72) 0%,
      rgba(9, 24, 46, 0.38) 42%,
      rgba(9, 24, 46, 0.08) 100%
    );

  border-bottom: 1px solid rgba(15, 61, 115, 0.08);
}

/* =========================
   Hero Images
========================= */

.history-hero-images {
  position: absolute;
  inset: 0;

  display: grid;
  grid-template-columns: 1fr 1fr;

  z-index: 1;
}

.history-hero-image {
  position: relative;
  overflow: hidden;
}

.history-hero-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(9, 24, 46, 0.32),
      rgba(9, 24, 46, 0.05)
    );

  z-index: 1;
}

.history-hero-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.02);

  filter:
    saturate(0.95)
    contrast(1.02);

  transition:
    transform 1.8s ease,
    filter 1.2s ease;
}

.history-hero:hover .history-hero-image img {
  transform: scale(1.05);
}

/* =========================
   Hero Content
========================= */

.history-hero-content {
  position: relative;
  z-index: 3;

  max-width: 1280px;
  min-height: 720px;

  margin: 0 auto;
  padding: 140px 60px 100px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.history-hero-subtitle {
  display: inline-block;

  margin-bottom: 24px;

  color: rgba(255,255,255,0.72);

  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.24em;

  text-transform: uppercase;
}

.history-hero-title {
  margin: 0 0 28px;

  color: #ffffff;

  font-size: clamp(44px, 6vw, 84px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.06em;
}

.history-hero-text {
  max-width: 620px;

  color: rgba(255,255,255,0.82);

  font-size: 17px;
  line-height: 2;
  letter-spacing: 0.03em;
}

/* =========================
   Scroll Guide
========================= */

.history-scroll-guide {
  position: absolute;

  left: 60px;
  bottom: 42px;

  z-index: 5;

  display: flex;
  align-items: center;
  gap: 14px;

  color: rgba(255,255,255,0.65);

  font-size: 12px;
  letter-spacing: 0.18em;

  text-transform: uppercase;
}

.history-scroll-line {
  width: 80px;
  height: 1px;

  background: rgba(255,255,255,0.35);

  position: relative;
  overflow: hidden;
}

.history-scroll-line::after {
  content: "";

  position: absolute;
  left: -40%;
  top: 0;

  width: 40%;
  height: 100%;

  background: rgba(255,255,255,0.92);

  animation: historyScrollLine 2s infinite;
}

@keyframes historyScrollLine {
  0% {
    left: -40%;
  }

  100% {
    left: 100%;
  }
}

/* =========================
   Floating Blur
========================= */

.history-hero-blur {
  position: absolute;

  right: -180px;
  top: -180px;

  width: 520px;
  height: 520px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(53, 114, 191, 0.24),
      transparent 70%
    );

  z-index: 2;

  pointer-events: none;
}

/* =========================
   Tablet
========================= */

@media (max-width: 1024px) {

  .history-hero {
    min-height: 640px;
  }

  .history-hero-content {
    min-height: 640px;
    padding: 120px 40px 90px;
  }

  .history-scroll-guide {
    left: 40px;
  }

}

/* =========================
   Mobile
========================= */

@media (max-width: 767px) {

  .history-hero {
    min-height: 720px;
  }

  .history-hero-images {
    grid-template-columns: 1fr;
  }

  .history-hero-image:nth-child(2) {
    display: none;
  }

  .history-hero-content {
    min-height: 720px;

    padding:
      120px
      24px
      80px;
  }

  .history-hero-subtitle {
    margin-bottom: 18px;

    font-size: 11px;
    letter-spacing: 0.18em;
  }

  .history-hero-title {
    margin-bottom: 20px;

    font-size: 40px;
    line-height: 1.4;
  }

  .history-hero-text {
    font-size: 14px;
    line-height: 2;
  }

  .history-scroll-guide {
    left: 24px;
    bottom: 28px;

    gap: 10px;

    font-size: 10px;
  }

  .history-scroll-line {
    width: 56px;
  }

  .history-hero-blur {
    width: 300px;
    height: 300px;

    right: -100px;
    top: -100px;
  }

}/* End custom CSS */
/* Start custom CSS */<div class="kadoya-history-page">

  <section class="history-hero">
    <div class="history-hero-images">
      <div class="history-hero-image">
        <img src="https://hn-sample.site/wp-content/uploads/2026/03/3.jpg" alt="加登屋の歴史">
      </div>
      <div class="history-hero-image">
        <img src="https://hn-sample.site/wp-content/uploads/2026/03/2.jpg" alt="現在の加登屋">
      </div>
    </div>

    <div class="history-hero-blur"></div>

    <div class="history-hero-content">
      <span class="history-hero-subtitle">SINCE 1947</span>
      <h1 class="history-hero-title">創業からの歩み</h1>
      <p class="history-hero-text">
        昭和22年の創業以来、地域社会とともに歩みながら、時代に合わせて事業を広げてきました。
      </p>
    </div>

    <div class="history-scroll-guide">
      <span>SCROLL</span>
      <div class="history-scroll-line"></div>
    </div>
  </section>

  <div class="history-nav">
    <a href="#founding" class="history-nav-btn">創業期</a>
    <a href="#growth" class="history-nav-btn">発展期</a>
    <a href="#change" class="history-nav-btn">変革期</a>
    <a href="#today" class="history-nav-btn">現代</a>
  </div>

  <section class="kadoya-history-intro">
    <div class="intro-copy">
      <h2>時代とともに、<br>変化を続ける。</h2>
    </div>
    <div class="intro-text">
      <p>昭和22年の創業以来、株式会社加登屋は地域社会とともに歩みながら、時代の変化に合わせて事業を広げてきました。</p>
      <p>文具・オフィスサプライを基盤に、ライフスタイル事業や空間提案、そしてeスポーツ事業へ。</p>
      <p>これからも「人」と「暮らし」に寄り添い、新たな価値を創造していきます。</p>
    </div>
  </section>

  <section class="kadoya-history-timeline">
    <div class="timeline-line-bg"></div>
    <div class="timeline-line-progress"></div>

    <section id="founding" class="history-era">
      <div class="history-era-label">
        <h2>創業期</h2>
        <p>加登屋の原点となる時代。</p>
      </div>

      <div class="history-item">
        <div class="history-year">1947</div>
        <div class="history-content">
          <span class="history-date">昭和22年4月</span>
          <h3>合資会社加登屋を創設</h3>
          <p>代表取締役 渡邉正四郎が合資会社加登屋を創設。地域に根ざした企業として歩みを開始しました。</p>
        </div>
      </div>

      <div class="history-item">
        <div class="history-year">1953</div>
        <div class="history-content">
          <span class="history-date">昭和28年9月</span>
          <h3>株式会社加登屋へ組織変更</h3>
          <p>組織を株式会社へ変更し、さらなる事業拡大と基盤強化を進めました。</p>
        </div>
      </div>
    </section>

    <section id="growth" class="history-era">
      <div class="history-era-label">
        <h2>発展期</h2>
        <p>事業基盤を拡大した時代。</p>
      </div>

      <div class="history-item">
        <div class="history-year">1987</div>
        <div class="history-content">
          <span class="history-date">昭和62年4月</span>
          <h3>渡邉輝也が代表取締役社長に就任</h3>
          <p>新たな経営体制のもと、事業領域の拡大と成長を推進しました。</p>
        </div>
      </div>

      <div class="history-item">
        <div class="history-year"></div>
        <div class="history-content">
          <span class="history-date"></span>
          <h3>蒲田エリアに「ACT」を展開</h3>
          <p>蒲田東口のメインロードを中心に「ACT」を5店舗展開し、西口の東急プラザ蒲田・サンカマタには「ACT クリエイターズボックス」「宇宙堂α」などを出店。文具・雑貨・ホビーを通じて、子どもから大人まで幅広いお客様に楽しんでいただける店舗づくりを進めました。地域の皆様の日常に新しい発見と楽しさを届け、蒲田のまちをより豊かにする存在を目指しました。</p>

          <div class="history-image history-image-map">
            <img src="https://hn-sample.site/wp-content/uploads/2026/06/ライフスタイル事業部店頭写真-3-1.jpg" alt="蒲田エリアに展開していたACT店舗マップ">
          </div>
        </div>
      </div>

      <div class="history-item">
        <div class="history-year"></div>
        <div class="history-content">
          <span class="history-date"></span>
          <h3>多様な業態で全国30店舗以上へ拡大</h3>
          <p>おもちゃ店、スポーツショップ、マンガショップなど、時代や地域のニーズに合わせた多彩な店舗を展開。全国30店舗以上へと事業規模を広げ、加登屋の店舗運営の基盤を築きました。</p>
        </div>
      </div>
    </section>

    <section id="change" class="history-era">
      <div class="history-era-label">
        <h2>変革期</h2>
        <p>新たな価値創造へ挑戦した時代。</p>
      </div>

      <div class="history-item">
        <div class="history-year">2002</div>
        <div class="history-content">
          <span class="history-date">平成14年10月</span>
          <h3>新経営体制へ移行</h3>
          <p>渡邉輝也が代表取締役会長、渡邉一正が代表取締役社長に就任。次の時代へ向けた経営体制へ移行しました。</p>
        </div>
      </div>

      <div class="history-item">
       <div class="history-year">2004</div>
       <div class="history-content">
         <span class="history-date">平成16年8月</span>
         <h3>文具雑貨ブランド「Forma」を展開</h3>
         <p>「開けるたびに何か見つかる、ワクワクが待っている。そんなヒキダシのような文具店」をブランドコピーに、Forma1号店をアトレ大井町に出店。文具や雑貨を通じて、日々の暮らしに新しい発見と楽しさを届ける店舗づくりを進めました。</p>
         <div class="history-image">
         <img src="https://hn-sample.site/wp-content/uploads/2026/06/ライフスタイル事業部店頭写真-2-1-1.jpg" alt="文具雑貨ブランドFormaの店舗">
        </div>
      </div>
</div>
    </section>

    <section id="today" class="history-era">
      <div class="history-era-label">
        <h2>現代</h2>
        <p>暮らしと体験に、新たな価値を届ける時代。</p>
      </div>

      <div class="history-item">
        <div class="history-year"></div>
        <div class="history-content">
          <span class="history-date"></span>
          <h3>関東圏に7店舗の文具雑貨店「Forma / act creater box / Sophia」を運営</h3>
          <p>文具・雑貨・ギフトを中心としたライフスタイル提案型ショップを展開。日々の暮らしに寄り添い、地域のお客様へ心地よい商品と空間を提供しています。</p>
          <div class="history-image">
            <img src="https://hn-sample.site/wp-content/uploads/2026/06/ライフスタイル事業部店頭写真-1.jpg" alt="Forma / act creater box / Sophia">
          </div>
        </div>
      </div>

      <div class="history-item">
        <div class="history-year">2023</div>
        <div class="history-content">
          <span class="history-date">令和5年8月</span>
          <h3>都内最大級のeスポーツ施設「hangout eスポーツエリア24」をオープン</h3>
          <p>eスポーツ・ゲームカルチャーを通じて、新しいコミュニティと体験価値を提供する次世代型エンターテインメント施設を開設しました。</p>
          <div class="history-image">
            <img src="https://hn-sample.site/wp-content/uploads/2026/03/2.jpg" alt="hangout eスポーツエリア24">
          </div>
        </div>
      </div>
    </section>

  </section>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const timeline = document.querySelector(".kadoya-history-timeline");
  const progress = document.querySelector(".timeline-line-progress");
  const items = document.querySelectorAll(".history-item");
  const navLinks = document.querySelectorAll(".history-nav-btn");
  const eras = document.querySelectorAll(".history-era");

  if (!timeline || !progress) return;

  function updateTimeline() {
    const rect = timeline.getBoundingClientRect();
    const windowHeight = window.innerHeight;
    const start = windowHeight * 0.75;
    const end = rect.height - windowHeight * 0.25;
    const scrolled = start - rect.top;
    const progressHeight = Math.max(0, Math.min(scrolled, end));

    progress.style.height = progressHeight + "px";

    items.forEach(function (item) {
      const itemRect = item.getBoundingClientRect();
      if (itemRect.top < windowHeight * 0.62) {
        item.classList.add("is-active");
      } else {
        item.classList.remove("is-active");
      }
    });

    let currentId = "";
    eras.forEach(function (era) {
      const eraRect = era.getBoundingClientRect();
      if (eraRect.top < windowHeight * 0.45) {
        currentId = era.id;
      }
    });

    navLinks.forEach(function (link) {
      link.classList.toggle("is-active", link.getAttribute("href") === "#" + currentId);
    });
  }

  window.addEventListener("scroll", updateTimeline);
  window.addEventListener("resize", updateTimeline);
  updateTimeline();
});
</script>/* End custom CSS */