ランディングページ編集

基本情報

リビジョン履歴 (v6) プレビュー

ページタイトル *

URLスラッグ *

/lp/

メタディスクリプション

ステータス

公開日時

終了日時

保存時に自動でリビジョンを作成する

コンテンツ編集

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#c9a96e;--gold-l:#e8d5a8;--gold-d:#8a6e3e;--gold-pale:rgba(201,169,110,0.12);
  --bg:#0c0b09;--bg2:#141210;--bg3:#1c1a16;--bg4:#221f1a;
  --text:#f0ead8;--sub:#c8bda4;--muted:#8a8070;
  --border:rgba(201,169,110,0.18);--border2:rgba(201,169,110,0.35);
  --red:#c9553e;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Noto Serif JP',serif;font-weight:300;line-height:1.8;overflow-x:hidden}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--gold-d)}

/* &#9472;&#9472; NAV &#9472;&#9472; */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.2rem 3rem;display:flex;align-items:center;justify-content:space-between;background:rgba(12,11,9,0.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(201,169,110,0.08)}
.nav-brand{display:flex;align-items:center;gap:1rem}
.nav-brand-name{font-family:'Noto Sans JP',sans-serif;font-size:0.72rem;letter-spacing:0.2em;color:var(--gold-l)}
.nav-brand-sep{width:1px;height:20px;background:var(--border)}
.nav-brand-sub{font-family:'Noto Sans JP',sans-serif;font-size:0.6rem;letter-spacing:0.15em;color:var(--muted)}
.nav-cta-btn{font-family:'Noto Sans JP',sans-serif;font-size:0.68rem;letter-spacing:0.2em;border:1px solid var(--gold);color:var(--gold);padding:0.55rem 1.4rem;text-decoration:none;transition:all .3s}
.nav-cta-btn:hover{background:var(--gold);color:var(--bg)}

/* &#9472;&#9472; HERO &#9472;&#9472; */
.hero{height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 60% 40%,rgba(201,169,110,0.07) 0%,transparent 55%),radial-gradient(ellipse at 20% 70%,rgba(201,169,110,0.04) 0%,transparent 45%),var(--bg)}
.hero-img{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=1800&q=80') center/cover;opacity:0.12;filter:grayscale(20%)}
.vline{position:absolute;width:1px;height:35vh;background:linear-gradient(to bottom,transparent,var(--gold-d),transparent)}
.vline-l{left:2.5rem;top:50%;transform:translateY(-50%)}
.vline-r{right:2.5rem;top:50%;transform:translateY(-50%)}
.hero-inner{position:relative;z-index:2;text-align:center;animation:fadeUp 1.2s ease both}
.hero-badge{display:inline-block;font-family:'Noto Sans JP',sans-serif;font-size:0.58rem;letter-spacing:0.45em;color:var(--gold);border:1px solid var(--border);padding:.45rem 1.2rem;margin-bottom:2.5rem}
.hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.8rem,6vw,5.5rem);font-weight:300;line-height:1.1;letter-spacing:.04em;color:var(--text)}
.hero-title em{font-style:italic;color:var(--gold-l)}
.hero-ornament{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:1.8rem 0}
.orn-line{width:55px;height:1px;background:var(--gold-d)}
.orn-diamond{width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.hero-lead{font-family:'Noto Serif JP',serif;font-size:.82rem;font-weight:200;letter-spacing:.25em;color:var(--muted);margin-bottom:2.5rem;line-height:2.2}
.btn-gold{display:inline-block;font-family:'Noto Sans JP',sans-serif;font-size:.72rem;letter-spacing:.25em;border:1px solid var(--gold);color:var(--gold);padding:1rem 2.5rem;text-decoration:none;transition:all .4s;position:relative;overflow:hidden}
.btn-gold::before{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1);z-index:-1}
.btn-gold:hover{color:var(--bg)}
.btn-gold:hover::before{transform:scaleX(1)}
.hero-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);font-family:'Noto Sans JP',sans-serif;font-size:.58rem;letter-spacing:.4em;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:.7rem}
.hero-scroll::after{content:'';width:1px;height:36px;background:linear-gradient(to bottom,var(--gold-d),transparent);animation:scrollPulse 2s ease infinite}

/* &#9472;&#9472; SECTION COMMON &#9472;&#9472; */
section{padding:7rem 3rem}
.sec-label{font-family:'Noto Sans JP',sans-serif;font-size:.58rem;letter-spacing:.5em;color:var(--gold);display:block;margin-bottom:1.2rem}
.sec-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:300;color:var(--text);line-height:1.2;letter-spacing:.03em}
.sec-title em{font-style:italic;color:var(--gold-l)}
.divider{display:flex;align-items:center;gap:.8rem;margin:1.8rem 0}
.div-line{flex:1;height:1px;background:var(--border)}
.div-dia{width:4px;height:4px;background:var(--gold-d);transform:rotate(45deg)}

/* &#9472;&#9472; PAIN &#9472;&#9472; */
.pain{background:var(--bg2)}
.pain-inner{max-width:960px;margin:0 auto;text-align:center}
.pain-body{font-size:.88rem;line-height:2.4;color:var(--sub);margin-top:1.8rem}
.pain-body strong{color:var(--gold-l);font-weight:400}
.pain-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;margin-top:3.5rem}
.pain-card{background:var(--bg3);padding:2.2rem 1.8rem;text-align:center;border:1px solid transparent;transition:border-color .3s}
.pain-card:hover{border-color:var(--border)}
.pain-icon{width:44px;height:44px;margin:0 auto 1.2rem;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center}
.pain-icon svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.3}
.pain-card p{font-size:.8rem;color:var(--sub);line-height:2}
.pain-card strong{display:block;font-family:'Noto Serif JP',serif;font-size:.9rem;color:var(--text);font-weight:400;margin-bottom:.6rem}

/* &#9472;&#9472; PRODUCTS &#9472;&#9472; */
.products{background:var(--bg)}
.products-inner{max-width:1200px;margin:0 auto}
.products-header{text-align:center;margin-bottom:5rem}

.product-item{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;margin-bottom:6rem;padding-bottom:6rem;border-bottom:1px solid var(--border)}
.product-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.product-item.reverse{direction:rtl}
.product-item.reverse > *{direction:ltr}

.product-visual{position:relative}
.product-img-wrap{aspect-ratio:4/3;overflow:hidden;position:relative}
.product-img{width:100%;height:100%;background:var(--bg3) center/cover;filter:grayscale(15%);transition:transform .6s ease}
.product-img-wrap:hover .product-img{transform:scale(1.04)}
.product-img-frame{position:absolute;inset:.8rem;border:1px solid var(--border);pointer-events:none}
.product-badge{position:absolute;top:1.5rem;left:1.5rem;font-family:'Noto Sans JP',sans-serif;font-size:.58rem;letter-spacing:.3em;background:var(--gold);color:var(--bg);padding:.35rem .9rem;z-index:2}
.product-badge-new{background:var(--red)}

.product-num{font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:300;color:var(--gold-d);opacity:.4;line-height:1;margin-bottom:.5rem}
.product-name-en{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300;color:var(--text);letter-spacing:.06em;line-height:1.1;margin-bottom:.3rem}
.product-name-jp{font-family:'Noto Sans JP',sans-serif;font-size:.62rem;letter-spacing:.3em;color:var(--muted);margin-bottom:1.5rem}
.product-catch{font-family:'Noto Serif JP',serif;font-size:.92rem;color:var(--sub);line-height:2.2;margin-bottom:1.8rem}

.menu-box{background:var(--gold-pale);border:1px solid var(--border);padding:1.5rem 1.8rem;margin-bottom:1.8rem}
.menu-box-label{font-family:'Noto Sans JP',sans-serif;font-size:.58rem;letter-spacing:.35em;color:var(--gold);margin-bottom:1rem;display:block}
.menu-tags{display:flex;flex-wrap:wrap;gap:.6rem}
.menu-tag{font-family:'Noto Sans JP',sans-serif;font-size:.68rem;letter-spacing:.08em;color:var(--sub);background:rgba(201,169,110,0.1);border:1px solid var(--border);padding:.3rem .9rem}

.product-points{list-style:none;margin-bottom:2rem}
.product-points li{font-size:.8rem;color:var(--sub);padding:.5rem 0;border-bottom:1px solid rgba(201,169,110,0.08);display:flex;gap:.8rem;align-items:flex-start;line-height:1.9}
.product-points li::before{content:'';width:4px;height:4px;background:var(--gold);transform:rotate(45deg);flex-shrink:0;margin-top:.7rem}

.product-price{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:300;color:var(--gold);letter-spacing:.05em}
.product-price span{font-family:'Noto Sans JP',sans-serif;font-size:.6rem;color:var(--muted);letter-spacing:.1em}
.product-link{font-family:'Noto Sans JP',sans-serif;font-size:.62rem;letter-spacing:.2em;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:2px;transition:all .3s;margin-left:1.5rem}
.product-link:hover{color:var(--gold);border-color:var(--gold)}

/* &#9472;&#9472; MERIT &#9472;&#9472; */
.merit{background:var(--bg2)}
.merit-inner{max-width:1100px;margin:0 auto}
.merit-header{text-align:center;margin-bottom:4.5rem}
.merit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.merit-card{background:var(--bg3);padding:2.5rem 2rem;border:1px solid transparent;transition:all .3s}
.merit-card:hover{border-color:var(--border);transform:translateY(-3px)}
.merit-num{font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:300;color:var(--gold);opacity:.6;line-height:1;margin-bottom:1rem}
.merit-title{font-family:'Noto Serif JP',serif;font-size:.9rem;font-weight:400;color:var(--text);margin-bottom:.8rem;line-height:1.6}
.merit-desc{font-size:.75rem;color:var(--muted);line-height:2}

/* &#9472;&#9472; FLOW &#9472;&#9472; */
.flow{background:var(--bg)}
.flow-inner{max-width:900px;margin:0 auto}
.flow-header{text-align:center;margin-bottom:4rem}
.flow-steps{display:flex;flex-direction:column;gap:0}
.flow-step{display:grid;grid-template-columns:80px 1fr;gap:2rem;align-items:stretch;position:relative}
.flow-step:not(:last-child)::after{content:'';position:absolute;left:39px;top:80px;bottom:0;width:1px;background:linear-gradient(to bottom,var(--gold-d),transparent)}
.step-num-wrap{display:flex;flex-direction:column;align-items:center;padding-top:1.5rem}
.step-num{width:50px;height:50px;border:1px solid var(--gold-d);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step-num span{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:300;color:var(--gold)}
.step-body{padding:1.5rem 0 3rem}
.step-title{font-family:'Noto Serif JP',serif;font-size:.95rem;font-weight:400;color:var(--text);margin-bottom:.6rem;letter-spacing:.06em}
.step-desc{font-size:.8rem;color:var(--muted);line-height:2.1}
.step-accent{color:var(--gold);font-weight:400}

/* &#9472;&#9472; SHOWROOM CTA &#9472;&#9472; */
.showroom{background:var(--bg3);padding:7rem 3rem;position:relative;overflow:hidden}
.showroom-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(201,169,110,0.06) 0%,transparent 65%)}
.showroom-inner{max-width:900px;margin:0 auto;position:relative;z-index:1}
.showroom-wrap{border:1px solid var(--border);padding:4rem}
.showroom-tag{font-family:'Noto Sans JP',sans-serif;font-size:.58rem;letter-spacing:.5em;color:var(--gold);display:block;margin-bottom:1.5rem}
.showroom-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3rem);font-weight:300;color:var(--text);line-height:1.2;margin-bottom:1.5rem}
.showroom-title em{color:var(--gold-l);font-style:italic}
.showroom-lead{font-size:.85rem;color:var(--sub);line-height:2.2;margin-bottom:2.5rem;max-width:520px}
.showroom-features{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:3rem}
.show-feat{font-family:'Noto Sans JP',sans-serif;font-size:.65rem;letter-spacing:.1em;color:var(--sub);display:flex;align-items:center;gap:.5rem}
.show-feat::before{content:'';width:4px;height:4px;background:var(--gold);transform:rotate(45deg);flex-shrink:0}
.showroom-btns{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.btn-outline{display:inline-block;font-family:'Noto Sans JP',sans-serif;font-size:.7rem;letter-spacing:.2em;border:1px solid var(--border);color:var(--muted);padding:.9rem 2rem;text-decoration:none;transition:all .3s}
.btn-outline:hover{border-color:var(--gold-d);color:var(--gold)}
.showroom-note{font-family:'Noto Sans JP',sans-serif;font-size:.62rem;color:var(--muted);margin-top:1.5rem;letter-spacing:.05em}

/* &#9472;&#9472; FOOTER &#9472;&#9472; */
footer{background:var(--bg);border-top:1px solid var(--border);padding:3.5rem 3rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.footer-brand{font-family:'Noto Sans JP',sans-serif;font-size:.72rem;letter-spacing:.2em;color:var(--gold-l)}
.footer-brand span{display:block;font-size:.52rem;letter-spacing:.3em;color:var(--muted);margin-top:3px}
.footer-copy{font-family:'Noto Sans JP',sans-serif;font-size:.58rem;letter-spacing:.1em;color:var(--muted)}

/* &#9472;&#9472; ANIMATIONS &#9472;&#9472; */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollPulse{0%,100%{opacity:.3}50%{opacity:1}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .85s ease,transform .85s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.delay1{transition-delay:.15s}
.delay2{transition-delay:.3s}
.delay3{transition-delay:.45s}

/* &#9472;&#9472; RESPONSIVE &#9472;&#9472; */
@media(max-width:900px){
  nav{padding:1rem 1.5rem}
  section{padding:5rem 1.5rem}
  .pain-cards{grid-template-columns:1fr}
  .product-item{grid-template-columns:1fr;gap:2.5rem}
  .product-item.reverse{direction:ltr}
  .merit-grid{grid-template-columns:1fr 1fr}
  .showroom-wrap{padding:2.5rem 1.8rem}
  footer{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
  .nav-brand{gap:.6rem}
  .nav-brand-name{font-size:.62rem;letter-spacing:.12em}
  .nav-brand-sub{display:none}
  .nav-cta-btn{padding:.5rem .9rem;font-size:.58rem;letter-spacing:.12em}
  .hero-title{font-size:clamp(2.1rem,11vw,3.4rem)}
  .hero-lead{font-size:.72rem;letter-spacing:.12em}
  .product-item{margin-bottom:4rem;padding-bottom:4rem}
  .merit-grid{grid-template-columns:1fr}
  .flow-step{grid-template-columns:56px 1fr;gap:1rem}
  .flow-step:not(:last-child)::after{left:27px;top:70px}
  .step-num{width:40px;height:40px}
  .showroom-btns{flex-direction:column;align-items:stretch}
  .btn-gold,.btn-outline{text-align:center;width:100%}
}


/* External CSS: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Noto+Serif+JP:wght@200;300;400&family=Noto+Sans+JP:wght@300;400;500&display=swap */

ページ全体に適用されるCSSを記述してください

<nav>
  <div class="nav-brand">
    <span class="nav-brand-name">タイセイ商事</span>
    <div class="nav-brand-sep"></div>
    <span class="nav-brand-sub">TAKARA BELMONT 正規代理店</span>
  </div>
  <a href="#showroom" class="nav-cta-btn">ショールーム見学</a>
</nav>

ヘッダー部分のHTMLを記述してください（<header>タグまたは<nav>タグ）

<section class="hero" id="top">
  <div class="hero-bg"></div>
  <div class="hero-img"></div>
  <div class="vline vline-l"></div>
  <div class="vline vline-r"></div>
  <div class="hero-inner">
    <span class="hero-badge">TAKARA BELMONT — MENU EQUIPMENT</span>
    <h1 class="hero-title">
      メニューが変わると、<br><em>サロンの未来</em>が変わる。
    </h1>
    <div class="hero-ornament">
      <div class="orn-line"></div>
      <div class="orn-diamond"></div>
      <div class="orn-line"></div>
    </div>
    <p class="hero-lead">
      単価アップ・差別化・リピート率向上。<br>
      タカラベルモントのメニュー対応機器が、<br>その全てを叶えます。
    </p>
    <a href="#products" class="btn-gold">商品をくわしく見る</a>
  </div>
  <div class="hero-scroll">SCROLL</div>
</section>

セクション1のHTMLを記述してください（<section>タグ）

<section class="pain">
  <div class="pain-inner">
    <span class="sec-label reveal">CHALLENGE</span>
    <h2 class="sec-title reveal">こんなお悩み、<em>ありませんか？</em></h2>
    <p class="pain-body reveal">
      競合サロンとの差別化、客単価の伸び悩み、リピート率の低下——<br>
      多くのサロンオーナーが抱えるこれらの課題を、<br>
      <strong>「機器によるメニュー化」</strong>という視点から解決します。
    </p>
    <div class="pain-cards">
      <div class="pain-card reveal">
        <div class="pain-icon">
          <svg viewbox="0 0 24 24"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
        </div>
        <strong>客単価が上がらない</strong>
       <section class="pain">
  <div class="pain-inner">
    <span class="sec-label reveal">CHALLENGE</span>
    <h2 class="sec-title reveal">こんなお悩み、<em>ありませんか？</em></h2>
    <p class="pain-body reveal">
      競合サロンとの差別化、客単価の伸び悩み、リピート率の低下——<br>
      多くのサロンオーナーが抱えるこれらの課題を、<br>
      <strong>「機器によるメニュー化」</strong>という視点から解決します。
    </p>
    <div class="pain-cards">
      <div class="pain-card reveal">
        <div class="pain-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
          </svg>
        </div>
        <strong>客単価が上がらない</strong>
        <p>技術だけでは限界。体験価値で差をつける新メニューが必要です。</p>
      </div>

      <div class="pain-card reveal delay1">
        <div class="pain-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
        </div>
        <strong>リピーターが定着しない</strong>
        <p>「また来たい」と思わせる体感・体験がサロン選びの決め手になります。</p>
      </div>

      <div class="pain-card reveal delay2">
        <div class="pain-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
          </svg>
        </div>
        <strong>近隣サロンとの差がない</strong>
        <p>機器が生み出す「ここにしかない体験」こそが、最強の差別化です。</p>
      </div>
    </div>
  </div>
</section>

セクション2のHTMLを記述してください（<section>タグ）

<section class="products" id="products">
  <div class="products-inner">
    <div class="products-header">
      <span class="sec-label reveal">RECOMMENDED PRODUCTS</span>
      <h2 class="sec-title reveal">メニュー化しやすい<em>おすすめ3機器</em></h2>
      <div class="divider reveal" style="justify-content:center"><div class="orn-line" style="max-width:70px"></div><div class="orn-diamond"></div><div class="orn-line" style="max-width:70px;flex:0"></div></div>
    </div>

    <div class="product-item reveal">
      <div class="product-visual">
        <div class="product-img-wrap">
          <div class="product-img" style="background-image:url('https://images.unsplash.com/photo-1560066984-138dadb4c035?w=800&amp;q=80')"></div>
          <div class="product-img-frame"></div>
          <span class="product-badge">2022 グッドデザイン賞</span>
        </div>
      </div>
      <div class="product-text">
        <div class="product-num">01</div>
        <h3 class="product-name-en">YUME HEADBATH</h3>
        <p class="product-name-jp">ユメ ヘッドバス</p>
        <p class="product-catch">
          頭全体をお湯で包み込む「頭浸浴」という新体感メニューを実現。
          炭酸と組み合わせることで、ヘッドスパ・カラーケアの価値を飛躍的に高めます。
          YUMEシャンプー台のボウルに取り付けるだけで、その日から新メニュー提供が可能。
        </p>
        <div class="menu-box">
          <span class="menu-box-label">MENU IDEA — 対応メニュー例</span>
          <div class="menu-tags">
            <span class="menu-tag">頭浸浴スパ</span>
            <span class="menu-tag">炭酸ヘッドスパ</span>
            <span class="menu-tag">カラーケア頭浸浴</span>
            <span class="menu-tag">プレミアムリラクゼーション</span>
          </div>
        </div>
        <ul class="product-points">
          <li>寝たまま簡単取り付け・取り外し。新たな手技不要でその日から運用可</li>
          <li>炭酸との相乗効果で残留アルカリ除去、カラー後のダメージ低減</li>
          <li>耳元に響く水流音が極上のリラクゼーション体験を演出</li>
          <li>グッドデザイン賞受賞。商品としての訴求力も抜群</li>
        </ul>
        <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
          <p class="product-price">¥ 142,000 <span>(税別)</span></p>
          <a href="https://www.tb-net.jp/product/menu/yume_headbath.html" target="_blank" class="product-link">詳細を見る →</a>
        </div>
      </div>
    </div>

    <div class="product-item reverse reveal">
      <div class="product-visual">
        <div class="product-img-wrap">
          <div class="product-img" style="background-image:url('https://images.unsplash.com/photo-1519415510236-718bdfcd89c8?w=800&amp;q=80')"></div>
          <div class="product-img-frame"></div>
          <span class="product-badge product-badge-new">NEW</span>
        </div>
      </div>
      <div class="product-text">
        <div class="product-num">02</div>
        <h3 class="product-name-en">multi SPA-HEAD PRO</h3>
        <p class="product-name-jp">マルチスパヘッドプロ</p>
        <p class="product-catch">
          シャワーヘッドに取り付けるだけで、4種類の異なるアタッチメントがヘッドスパに新しい体感を提供。
          最もコストをかけずにシャンプー工程をメニューへと昇華できる、導入ハードルの低い一台。
        </p>
        <div class="menu-box">
          <span class="menu-box-label">MENU IDEA — 対応メニュー例</span>
          <div class="menu-tags">
            <span class="menu-tag">プレミアムシャンプー</span>
            <span class="menu-tag">頭皮クレンジングスパ</span>
            <span class="menu-tag">カラー乳化プラス</span>
            <span class="menu-tag">リラックスヘッドマッサージ</span>
          </div>
        </div>
        <ul class="product-points">
          <li>トルネード・ブラシ・ほぐし・整流の4ヘッドを用途別に使い分け</li>
          <li>既存シャンプー台に取り付けるだけ。工事不要・当日から使用可</li>
          <li>炭酸タブレットとの併用で香りと炭酸効果をプラスできる整流タイプ</li>
          <li>セット価格¥79,000〜と導入コストが低く回収が早い</li>
        </ul>
        <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
          <p class="product-price">¥ 79,000 <span>〜(税別)</span></p>
          <a href="https://www.tb-net.jp/product/menu/msp.html" target="_blank" class="product-link">詳細を見る →</a>
        </div>
      </div>
    </div>

    <div class="product-item reveal">
      <div class="product-visual">
        <div class="product-img-wrap">
          <div class="product-img" style="background-image:url('https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=800&amp;q=80')"></div>
          <div class="product-img-frame"></div>
          <span class="product-badge">ランニングコストゼロ</span>
        </div>
      </div>
      <div class="product-text">
        <div class="product-num">03</div>
        <h3 class="product-name-en">JETCUBE</h3>
        <p class="product-name-jp">ジェットキューブ</p>
        <p class="product-catch">
          大小の泡を含んだ「活泡泉（かっぽうせん）」を生成し、シャンプー体験を根本から変える機器。
          ボンベ不要でランニングコストはゼロ。洗浄力アップとすすぎ時間短縮が同時に実現し、
          生産性向上にも直結します。
        </p>
        <div class="menu-box">
          <span class="menu-box-label">MENU IDEA — 対応メニュー例</span>
          <div class="menu-tags">
            <span class="menu-tag">活泡泉シャンプー</span>
            <span class="menu-tag">プレミアム頭皮ケア</span>
            <span class="menu-tag">素髪リセットメニュー</span>
            <span class="menu-tag">カラー前処理オプション</span>
          </div>
        </div>
        <ul class="product-points">
          <li>毎分1000回転以上のコンプレッサーが生み出す独自の脈動感・洗浄力</li>
          <li>ガスボンベ不要でランニングコストはほぼゼロ（電気代・水道代のみ）</li>
          <li>すすぎ効率が向上しサロンの生産性・回転率がアップ</li>
          <li>multi SPA-HEAD PROとの組み合わせで体感価値がさらにアップ</li>
        </ul>
        <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
          <p class="product-price">¥ 336,000 <span>〜(税別・取付費別)</span></p>
          <a href="https://www.tb-net.jp/product/menu/jetcube.html" target="_blank" class="product-link">詳細を見る →</a>
        </div>
      </div>
    </div>
  </div>
</section>

セクション3のHTMLを記述してください（<section>タグ）

<section class="merit">
  <div class="merit-inner">
    <div class="merit-header">
      <span class="sec-label reveal">WHY MENU EQUIPMENT</span>
      <h2 class="sec-title reveal">機器導入が<em>もたらすもの</em></h2>
    </div>
    <div class="merit-grid">
      <div class="merit-card reveal">
        <div class="merit-num">01</div>
        <p class="merit-title">客単価アップ</p>
        <p class="merit-desc">機器が提供する体感メニューは「機器単価」をそのままオプション価格に転嫁しやすく、単価向上に直結します。</p>
      </div>
      <div class="merit-card reveal delay1">
        <div class="merit-num">02</div>
        <p class="merit-title">強力な差別化</p>
        <p class="merit-desc">「頭浸浴」「活泡泉」など機器特有の体験は他サロンにはない唯一の訴求力となり、口コミ・SNS拡散にも有利。</p>
      </div>
      <div class="merit-card reveal delay2">
        <div class="merit-num">03</div>
        <p class="merit-title">リピート率向上</p>
        <p class="merit-desc">感動体験はリピーターを生みます。「この感覚を求めてまた来たい」という動機が、来店サイクルを縮めます。</p>
      </div>
      <div class="merit-card reveal delay3">
        <div class="merit-num">04</div>
        <p class="merit-title">スタッフ負担軽減</p>
        <p class="merit-desc">機器が付加価値を担うため、特別な手技習得が不要。新人スタッフでも即日高品質なメニュー提供が可能になります。</p>
      </div>
    </div>
  </div>
</section>

セクション4のHTMLを記述してください（<section>タグ）

<section class="flow">
  <div class="flow-inner">
    <div class="flow-header">
      <span class="sec-label reveal">STEP FLOW</span>
      <h2 class="sec-title reveal">ご来店から<em>導入まで</em>の流れ</h2>
    </div>
    <div class="flow-steps">
      <div class="flow-step reveal">
        <div class="step-num-wrap">
          <div class="step-num"><span>01</span></div>
        </div>
        <div class="step-body">
          <p class="step-title">ショールーム見学・体験</p>
          <p class="step-desc">まずは実物を見て、触れて、<span class="step-accent">体感していただく</span>ことが一番です。タカラベルモント各拠点のショールームでは実機展示・体験が可能。弊社スタッフもご同行いたします。</p>
        </div>
      </div>
      <div class="flow-step reveal">
        <div class="step-num-wrap">
          <div class="step-num"><span>02</span></div>
        </div>
        <div class="step-body">
          <p class="step-title">ヒアリング・ご提案</p>
          <p class="step-desc">サロンの現状・課題・既存機器の状況をお聞きしたうえで、<span class="step-accent">最適な組み合わせ・導入プラン</span>をご提案。リース・割賦を含む資金計画もご相談いただけます。</p>
        </div>
      </div>
      <div class="flow-step reveal">
        <div class="step-num-wrap">
          <div class="step-num"><span>03</span></div>
        </div>
        <div class="step-body">
          <p class="step-title">お見積り・ご発注</p>
          <p class="step-desc">機器本体・取付費・消耗品を含めたトータルコストを明示。導入後の<span class="step-accent">費用対効果シミュレーション</span>もご提示いたします。</p>
        </div>
      </div>
      <div class="flow-step reveal">
        <div class="step-num-wrap">
          <div class="step-num"><span>04</span></div>
        </div>
        <div class="step-body">
          <p class="step-title">設置・メニュー化サポート</p>
          <p class="step-desc">機器の設置から、メニュー名・料金設定・接客トーク作りまで<span class="step-accent">トータルサポート</span>いたします。導入後も安心してご利用いただけます。</p>
        </div>
      </div>
    </div>
  </div>
</section>

セクション5のHTMLを記述してください（<section>タグ）

<section class="showroom" id="showroom">
  <div class="showroom-bg"></div>
  <div class="showroom-inner">
    <div class="showroom-wrap reveal">
      <span class="showroom-tag">SHOWROOM VISIT</span>
      <h2 class="showroom-title">
        まず<em>体感</em>してください。<br>その感動が、お客様に伝わります。
      </h2>
      <p class="showroom-lead">
        カタログの数字では伝わらない感動があります。
        実際に頭浸浴を体験し、活泡泉を感じてから判断してください。
        弊社スタッフがショールームへのご案内から、貴サロンへの最適なご提案まで
        全力でサポートいたします。
      </p>
      <div class="showroom-features">
        <span class="show-feat">見学・体験は完全無料</span>
        <span class="show-feat">弊社スタッフが事前にご連絡</span>
        <span class="show-feat">ご来場後に詳細なご提案書を作成</span>
        <span class="show-feat">リース・割賦のご相談も可能</span>
        <span class="show-feat">名古屋近郊のサロン様は弊社訪問も対応</span>
      </div>
      <div class="showroom-btns">
        <a href="tel:052-000-0000" class="btn-gold">お電話でご相談</a>
        <a href="mailto:info@taisei-shoji.co.jp" class="btn-outline">メールでお問い合わせ</a>
        <a href="#" class="btn-outline">LINEで気軽に相談</a>
      </div>
      <p class="showroom-note">※営業時間：平日 9:00〜18:00　担当：タイセイ商事 営業部</p>
    </div>
  </div>
</section>

セクション6のHTMLを記述してください（<section>タグ）

セクション7のHTMLを記述してください（<section>タグ）

セクション8のHTMLを記述してください（<section>タグ）

セクション9のHTMLを記述してください（<section>タグ）

セクション10のHTMLを記述してください（<section>タグ）

<footer>
  <div class="footer-brand">
    有限会社タイセイ商事
    <span>TAKARA BELMONT 正規代理店 | 愛知県名古屋市</span>
  </div>
  <p class="footer-copy">© 2025 TAISEI SHOJI Co., Ltd. All rights reserved.</p>
</footer>

フッター部分のHTMLを記述してください（<footer>タグ）

スクリプト設定（広告タグ・解析コード）

<script>
const obs = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if(entry.isIntersecting){
      entry.target.classList.add('visible');
      obs.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach((el) => obs.observe(el));
</script>

Google Analytics、Google Tag Manager、広告タグなどを設定できます

フォーム設定

このページにお問い合わせフォームを設置する

フォーム設定について:

フォームは自動的に生成され、ページ最下部（フッター前）に挿入されます
送信されたデータはデータベースに保存され、管理画面から確認・CSVダウンロードできます
設定したメールアドレスに通知メールが送信されます

フォームタイトル

通知先メールアドレス *

フォームフィールド設定

半角英数字

必須

半角英数字

必須

半角英数字

必須

メール件名 {title} でページタイトルを挿入できます。未設定の場合は「新規お問い合わせ: ページタイトル」が使用されます。

送信ボタンテキスト

送信完了メッセージ

サンキューページURL（任意）送信後に指定のページへリダイレクトします。未設定の場合は現在のページに完了メッセージを表示します。

画像アップロード

画像のアップロード方法:

下のエリアに画像をドラッグ＆ドロップするか、クリックしてファイルを選択
アップロードされた画像の「imgタグコピー」ボタンをクリック
HTML内の画像を表示したい箇所に貼り付け

画像をここにドロップまたはクリックして選択

アップロード済み画像

HTML / CSS の画像参照のうち、アップロード時のプレフィックス（{timestamp}_）が抜けて存在しない参照を検出し、置換します。

キャンセル