/* ==========================================================================
「気になる商品を次回のお届けに追加できます」機能紹介LP用CSS
-----------------------------------------------------------------------
既存サイト（haru-shop.jp）に組み込むことを前提に、下記の対策をしています。
1) すべてのスタイルを #hrk-lp のスコープ配下に限定（他ページ・共通パーツへ影響させない）
2) クラス名はすべて "hrk-lp-" プレフィックスを付与（既存クラスとの重複を回避）
3) CSS変数は :root ではなく #hrk-lp に定義（サイト全体の変数を汚染しない）
4) box-sizing 等の初期化もスコープ内のみに限定
-----------------------------------------------------------------------
埋め込み方法：
・ に を追加
（ecforceのデザイン設定でCSSファイルを追加、または該当ページのHTML内で読み込み）
・本文には index.html の ～
の中身をそのまま貼り付けてください
・Googleフォントを使う場合は index.html 内の タグ（M PLUS Rounded 1c）も
に追加してください。サイト標準フォントを使う場合は下記フォント指定の
行を既存サイトのフォントに合わせて書き換えてください。
========================================================================== */
#hrk-lp,
#hrk-lp *,
#hrk-lp *::before,
#hrk-lp *::after{
box-sizing:border-box;
}
#hrk-lp{
/* ---- カラー・共通変数（このLP内でのみ有効） ---- */
--hrk-orange:#E98236;
--hrk-orange-dark:#D9702A;
--hrk-brown:#602B1D;
--hrk-olive:#8E9B23;
--hrk-bg-beige:#F4EAE9;
--hrk-bg-beige-soft:#FBF3F1;
--hrk-text-main:#3A2E28;
--hrk-text-sub:#6B5D56;
--hrk-border-gray:#DAD3CE;
--hrk-radius-card:10px;
--hrk-max-w:1000px;
/* ---- ベース ---- */
max-width:var(--hrk-max-w);
margin:0 auto;
font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif!important;
font-size:16px;
color:var(--hrk-text-main);
background:#fff;
line-height:1.8;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
}
#hrk-lp img{
max-width:100%;
display:block;
}
/* ---- 既存サイトの汎用タグ（h1-h6, p, a, ul/li, hr, button 等）への
スタイルがこのLP内に漏れ込まないよう明示的にリセットします ---- */
#hrk-lp h1,
#hrk-lp h2,
#hrk-lp h3,
#hrk-lp h4,
#hrk-lp h5,
#hrk-lp h6,
#hrk-lp p,
#hrk-lp span,
#hrk-lp a,
#hrk-lp button,
#hrk-lp ul,
#hrk-lp ol,
#hrk-lp li,
#hrk-lp hr,
#hrk-lp img,
#hrk-lp figure{
margin:0;
padding:0;
border:0;
border-radius:0;
background:none;
font:inherit;
font-size:inherit;
font-weight:inherit;
color:inherit;
text-align:left;
list-style:none;
box-shadow:none;
text-decoration:none;
letter-spacing:normal;
line-height:inherit;
}
#hrk-lp img{ max-width:100%; display:block; }
#hrk-lp button{
cursor:pointer;
background:none;
font-family:inherit;
}
#hrk-lp .hrk-lp-section{
padding:56px 24px;
}
@media (max-width:767px){
#hrk-lp .hrk-lp-section{ padding:40px 10px; }
}
/* ---------- Hero ---------- */
#hrk-lp .hrk-lp-hero{
padding:24px 16px 0;
}
#hrk-lp .hrk-lp-hero picture{
display:block;
}
#hrk-lp .hrk-lp-hero img{
width:100%;
border-radius:4px;
}
/* ---------- Section heading (CHECK badge image + dotted box image) ----------
・見出しブロックは max-width:500px で中央配置
・背景(点線ボックス)は元画像の縦横比(1189:190)を保ったまま縮小表示
・バッジ(CHECK!画像)も元画像の比率(159:173)を保ったまま縮小し、位置を再調整
------------------------------------------------------------------------- */
#hrk-lp .hrk-lp-sec-head{
position:relative;
max-width:500px;
margin:0 auto 32px;
padding-top:28px;
}
#hrk-lp .hrk-lp-sec-head::before{
content:"";
position:absolute;
z-index:2;
top:0;
left:8px;
width:62px;
height:calc(62px * 173 / 159);
background-size:contain;
background-repeat:no-repeat;
background-position:center top;
}
#hrk-lp .hrk-lp-sec-head--1::before{ background-image:url('https://d2w53g1q050m78.cloudfront.net/wwwharushopjp/uploads/assets/images/pages/new-service1/heading-check-1.webp'); }
#hrk-lp .hrk-lp-sec-head--2::before{ background-image:url('https://d2w53g1q050m78.cloudfront.net/wwwharushopjp/uploads/assets/images/pages/new-service1/heading-check-2.webp'); }
#hrk-lp .hrk-lp-sec-head--3::before{ background-image:url('https://d2w53g1q050m78.cloudfront.net/wwwharushopjp/uploads/assets/images/pages/new-service1/heading-check-3.webp'); }
#hrk-lp .hrk-lp-sec-head--4::before{ background-image:url('https://d2w53g1q050m78.cloudfront.net/wwwharushopjp/uploads/assets/images/pages/new-service1/heading-check-4.webp'); }
#hrk-lp .hrk-lp-sec-head__box{
position:relative;
z-index:1;
width:100%;
aspect-ratio:1189 / 190;
background-image:url('https://d2w53g1q050m78.cloudfront.net/wwwharushopjp/uploads/assets/images/pages/new-service1/heading-box.webp');
background-size:100% 100%;
background-repeat:no-repeat;
display:flex;
align-items:center;
padding:0 20px 0 50px;
justify-content: center;
}
#hrk-lp .hrk-lp-sec-head h2{
margin:0;
font-size: min(20px, 2vw);
color:var(--hrk-text-main);
letter-spacing:.03em;
}
@media (max-width:767px){
#hrk-lp .hrk-lp-sec-head{ padding-top:22px; }
#hrk-lp .hrk-lp-sec-head::before{ width:50px; height:calc(50px * 173 / 159); left:6px; }
#hrk-lp .hrk-lp-sec-head__box{ padding:0 14px 0 62px; }
#hrk-lp .hrk-lp-sec-head h2{ font-size:15px; }
}
/* ---------- Section 1: reasons ---------- */
#hrk-lp .hrk-lp-reason-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
}
#hrk-lp .hrk-lp-reason-grid img{
width:100%;
border-radius:0;
}
@media (max-width:767px){
#hrk-lp .hrk-lp-reason-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
}
/* ---------- Section 2: products ---------- */
#hrk-lp .hrk-lp-product-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px 16px;
}
#hrk-lp .hrk-lp-product-card{
text-align:center;
display:flex;
flex-direction:column;
height:100%;
}
#hrk-lp .hrk-lp-product-card__thumb{
aspect-ratio:1/1;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:12px;
}
#hrk-lp .hrk-lp-product-card__thumb img{
max-height:100%;
width:auto;
margin:0 auto;
}
#hrk-lp .hrk-lp-tag-row{
display:flex;
justify-content:center;
gap:6px;
flex-wrap:wrap;
margin-bottom:10px;
}
#hrk-lp .hrk-lp-tag{
font-size:11px;
padding:3px 10px;
border-radius:0;
border:1px solid var(--hrk-border-gray);
color:var(--hrk-text-sub);
white-space:nowrap;
line-height:1.6;
}
/* 商品名・説明文は上寄せの自然な流れで表示（高さは内容に応じて可変） */
#hrk-lp .hrk-lp-product-card h3{
font-size:14px;
margin:0 0 8px;
line-height:1.5;
text-align: center;
min-height: 50px;
}
#hrk-lp .hrk-lp-product-card p{
font-size:12px;
color:var(--hrk-text-sub);
line-height:1.7;
margin:0 0 14px;
text-align: center;
min-height: 60px;
}
/* ボタンは margin-top:auto で常にカード下端に揃える
（p の margin-bottom:14px と合わせて最低14pxの間隔は確保される） */
#hrk-lp .hrk-lp-buy-btn{
display: block;
width: 70%;
margin: auto;
padding: 5px 8px;
background: #fff;
border: 1px solid #555;
border-radius: 0;
color: #555;
font-size: 13px;
font-weight: 700;
text-align: center;
cursor: pointer;
}
@media (max-width:767px){
#hrk-lp .hrk-lp-product-grid{ grid-template-columns:repeat(2,1fr); gap:28px 14px; }
#hrk-lp .hrk-lp-product-card__thumb{ padding: 20px 20px 0; }
}
/* ---------- Section 3: steps ---------- */
/* STEPカードが枠外にはみ出す分、見出しとの距離が近く見えるため
このセクションのみ見出し下マージンを +20px 追加 */
#hrk-lp .hrk-lp-steps .hrk-lp-sec-head{
margin-bottom:52px;
}
#hrk-lp .hrk-lp-step-cols{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
#hrk-lp .hrk-lp-step-card{
border:1px solid var(--hrk-border-gray);
border-radius:var(--hrk-radius-card);
padding:28px 0 0;
position:relative;
}
#hrk-lp .hrk-lp-step-card__body{
padding:0 18px;
}
#hrk-lp .hrk-lp-step-label{
position:absolute;
top:-18px;
left:50%;
transform:translateX(-50%);
background:var(--hrk-brown);
color:#fff;
font-weight:700;
font-size:14px;
letter-spacing:.08em;
padding:5px 28px;
border-radius:20px;
white-space:nowrap;
display:inline-block;
}
#hrk-lp .hrk-lp-step-desc{
text-align:center;
font-size:13.5px;
margin:14px 0 20px;
color:var(--hrk-text-main);
}
#hrk-lp .hrk-lp-step-desc__em{
color:var(--hrk-orange-dark);
font-weight:700;
}
/* STEPスクリーンショット画像：枠なし・画像まわり10pxの余白 */
#hrk-lp .hrk-lp-step-shot{
display:block;
width:100%;
margin-top:22px;
padding:0 10px 10px;
}
#hrk-lp .hrk-lp-step-shot img{
display:block;
width:100%;
border-radius:var(--hrk-radius-card);
}
@media (max-width:767px){
#hrk-lp .hrk-lp-step-cols{ grid-template-columns:1fr; gap:44px; }
}
/* ---------- Section 4: FAQ ---------- */
#hrk-lp .hrk-lp-faq-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-bottom:24px;
}
#hrk-lp .hrk-lp-faq-card{
border:1px solid var(--hrk-border-gray);
border-radius:var(--hrk-radius-card);
padding:22px 20px;
}
#hrk-lp .hrk-lp-faq-card__q{
font-size:14.5px;
font-weight:700;
margin-bottom:14px;
}
#hrk-lp .hrk-lp-faq-card__q .hrk-lp-faq-card__mark{
color:var(--hrk-olive);
margin-right:4px;
}
#hrk-lp .hrk-lp-faq-card hr{
border:none;
border-top:1px dashed var(--hrk-border-gray);
margin:0 0 16px;
}
#hrk-lp .hrk-lp-faq-card__a{
font-size:13px;
line-height:1.8;
}
#hrk-lp .hrk-lp-faq-card__a .hrk-lp-faq-card__mark{
color:var(--hrk-orange);
font-weight:700;
margin-right:4px;
}
#hrk-lp .hrk-lp-faq-card__accent{
color:var(--hrk-orange);
font-weight:700;
}
#hrk-lp .hrk-lp-faq-note{
font-size:12px;
color:var(--hrk-text-sub);
text-align:center;
line-height:1.8;
}
@media (max-width:767px){
#hrk-lp .hrk-lp-faq-grid{ grid-template-columns:1fr; gap:14px; }
}
/* ---------- CTA bar ---------- */
#hrk-lp .hrk-lp-cta-bar{
background:var(--hrk-bg-beige-soft);
padding:28px 24px;
display:flex;
align-items:center;
justify-content:center;
gap:24px;
flex-wrap:wrap;
}
#hrk-lp .hrk-lp-cta-bar p{
font-size:15px;
font-weight:700;
color:var(--hrk-text-main);
}
#hrk-lp .hrk-lp-cta-btn{
display:inline-flex;
align-items:center;
gap:12px;
background:var(--hrk-orange);
color:#fff;
font-weight:700;
font-size:14.5px;
padding:8px 22px 8px 8px;
border-radius:40px;
border:none;
cursor:pointer;
font-family:inherit;
transition:filter .15s ease;
}
#hrk-lp .hrk-lp-cta-btn:hover{
filter:brightness(1.06);
}
#hrk-lp .hrk-lp-cta-btn__icon{
width:34px;
height:34px;
border-radius:50%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
#hrk-lp .hrk-lp-cta-btn__icon svg{
width:18px;
height:18px;
}
#hrk-lp .hrk-lp-cta-btn__arrow{
font-size:16px;
line-height:1;
}
@media (max-width:767px){
#hrk-lp .hrk-lp-cta-bar{ flex-direction:column; text-align:center; gap:14px; padding:24px 16px; }
#hrk-lp .hrk-lp-cta-bar p{ font-size:13.5px; }
}