HOME｜B.Curious
/* ========== TOKENS ========== */
:root{
–primary:#2e8b8b; –primaryL:#6eb5e2; –accent:#e74d3c;
–bg:#f3f6f9; –card-bg:#fff; –text:#1a1a1a;
–radius:16px; –space:24px;
–font:”Arial”,”Helvetica Neue”,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(–font);background:var(–bg);color:var(–text);line-height:1.6;}
/* ———- HEADER ———- */
.site-header{
background:var(–primaryL);display:flex;align-items:center;gap:12px;
padding:10px 16px;position:sticky;top:0;z-index:1000;
}
.icon-btn{font-size:26px;background:none;border:none;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.logo{flex:1;text-align:center;font-size:22px;font-weight:bold;color:#fff !important;text-decoration:none;}
.right-icons{display:flex;align-items:center;gap:14px;}
.bell,.cart{position:relative;}
.badge{position:absolute;top:-6px;right:-10px;background:var(–accent);color:#fff;border-radius:50%;padding:2px 6px;font-size:12px;}
/* ———- SIDE NAV ———- */
.side-nav{position:fixed;top:0;left:0;height:100%;width:260px;background:var(–primary);color:#fff;transform:translateX(-100%);transition:.3s;z-index:1200;padding:80px 24px;overflow-y:auto;}
.side-nav.open{transform:translateX(0);}
.side-nav a{display:block;color:#fff;font-size:18px;text-decoration:none;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.25);}
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:.3s;z-index:1100;}
#overlay.show{opacity:1;visibility:visible;}
/* ———- HERO ———- */
.hero{position:relative;overflow:hidden;}
.hero video{width:100%;height:50vh;object-fit:cover;}
@media(max-width:600px){.hero video{height:25vh;}}
.hero .overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(0,0,0,.35);color:#fff;text-align:center;}
.btn{margin-top:1rem;background:var(–accent);color:#fff;border:none;padding:12px 28px;font-size:1rem;border-radius:var(–radius);cursor:pointer;}
/* ———- LAYOUT ———- */
.container{display:grid;grid-template-columns:260px 1fr;gap:var(–space);padding:var(–space);max-width:1400px;margin:auto;}
.card{background:var(–card-bg);border-radius:var(–radius);padding:1.2rem;box-shadow:0 4px 8px rgba(0,0,0,.05);}
@media(max-width:768px){.container{grid-template-columns:1fr;} .sidebar{order:2;margin-top:var(–space);}}
/* ———- CATEGORY ———- */
.sidebar ul{list-style:none;padding-left:0;}
.sidebar a{color:var(–text);text-decoration:none;} .sidebar a:hover{color:var(–accent);}
/* ———- PRODUCT GRID ———- */
.product-grid{display:grid;gap:var(–space);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
@media(max-width:600px){.product-grid{grid-template-columns:repeat(2,1fr);}}
/* PRODUCT CARD */
.product-card{background:var(–card-bg);border-radius:var(–radius);box-shadow:0 2px 4px rgba(0,0,0,.06);display:flex;flex-direction:column;overflow:hidden;}
.product-card img{width:100%;aspect-ratio:1/1;object-fit:cover;} /* 大きめ画像 */
.prod-body{padding:.6rem .4rem;display:flex;flex-direction:column;text-align:center;flex:1;}
.prod-title{font-size:14px;font-weight:bold;margin:0 0 .3rem;}
@media(max-width:600px){.prod-title{font-size:15px;}} /* タイトル > 価格 */
.prod-price{font-size:12px;color:var(–primary);}
.product-btn{margin-top:.4rem;background:var(–primary);color:#fff;border:none;padding:4px 12px;border-radius:8px;font-size:16px;cursor:pointer;}
.product-btn:hover{background:var(–accent);}
/* “もっと見る” TOGGLE */
#moreToggle{display:none;}
.more-label{display:none;margin-top:10px;font-size:.9rem;color:var(–primary);cursor:pointer;text-align:center;}
@media(max-width:600px){.more-label{display:block;}}
.product-card:nth-of-type(n+5){display:none;}
#moreToggle:checked ~ .product-grid .product-card:nth-of-type(n+5){display:flex;}
.more-close{display:none;}
#moreToggle:checked + .product-grid + .more-label .more-open{display:none;}
#moreToggle:checked + .product-grid + .more-label .more-close{display:inline;}
/* ———- SEARCH (FAB + MODAL) ———- */
.fab-search{
position:fixed; bottom:80px; right:16px;
width:48px; height:48px; border-radius:50%;
background:var(–primary); color:#fff; border:none;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 8px rgba(0,0,0,.2); z-index:900;
}
@media(min-width:601px){.fab-search{display:none;}} /* PCでは非表示 */
/* モーダルバー */
.search-modal{
position:fixed; top:0; left:0; right:0;
background:var(–bg); padding:12px var(–space);
box-shadow:0 2px 6px rgba(0,0,0,.2);
transform:translateY(-100%); transition:.25s;
z-index:950;
}
.search-modal.show{transform:translateY(0);}
.search-form{display:flex;gap:8px;}
.search-form input{flex:1;padding:10px;border:1px solid #ccc;border-radius:8px;font-size:14px;}
.search-form button{background:var(–primary);color:#fff;border:none;padding:10px 14px;border-radius:8px;}
@media(min-width:601px){.search-modal{display:none;}} /* モバイル専用 */
/* ———- FOOTER ———- */
footer{background:var(–primary);color:#fff;text-align:center;padding:10px;margin-top:var(–space);}
ホーム商品一覧定期便プラン
スキンケア診断診断履歴購入履歴
カートお問い合わせアカウント設定ログアウト
Discover Your Best Skin
今すぐチェック
/* — サイドナビ — */
const nav=document.getElementById(‘side-nav’),overlay=document.getElementById(‘overlay’),hamburger=document.getElementById(‘hamburger’);
function toggle(open){const show=open ?? !nav.classList.contains(‘open’);nav.classList.toggle(‘open’,show);overlay.classList.toggle(‘show’,show);document.body.style.overflow=show?’hidden’:”;}
hamburger.onclick=()=>toggle();overlay.onclick=()=>toggle(false);nav.querySelectorAll(‘a’).forEach(a=>a.onclick=()=>toggle(false));
/* — 商品カード生成 — */
const products=[
{img:’https://placehold.co/400?text=Gel’, title:’モイスチャーケアジェル’, price:’¥3,200′},
{img:’https://placehold.co/400?text=Serum’,title:’ブライトニングセラム’, price:’¥4,500′},
{img:’https://placehold.co/400?text=Cream’,title:’リペアナイトクリーム’, price:’¥5,800′},
{img:’https://placehold.co/400?text=Toner’,title:’バランシングトナー’, price:’¥2,200′},
{img:’https://placehold.co/400?text=Mask’, title:’モイスチュアマスク’, price:’¥3,600′},
{img:’https://placehold.co/400?text=Oil’, title:’フェイスオイル’, price:’¥4,000′},
];
const grid=document.querySelector(‘.product-grid’);
products.forEach(p=>{
grid.insertAdjacentHTML(‘beforeend’,`
`);
});
/* — 検索 FAB & モーダル — */
const fab=document.getElementById(‘fabSearch’),
modal=document.getElementById(‘searchModal’),
input=document.getElementById(‘searchInput’);
fab.addEventListener(‘click’,()=>{
modal.hidden=false;
modal.classList.toggle(‘show’);
input.focus();
});
/* 閉じる条件：フォーカス外れる or Esc */
input.addEventListener(‘blur’,()=>{modal.classList.remove(‘show’);setTimeout(()=>modal.hidden=true,250);});
window.addEventListener(‘keydown’,e=>{if(e.key===’Escape’&&modal.classList.contains(‘show’)){modal.classList.remove(‘show’);setTimeout(()=>modal.hidden=true,250);}});
/* 検索処理（簡易フィルタ） */
modal.querySelector(‘form’).addEventListener(‘input’,()=>{
const q=input.value.trim().toLowerCase();
document.querySelectorAll(‘.product-card’).forEach(card=>{
const title=card.querySelector(‘.prod-title’).textContent.toLowerCase();
card.style.display=title.includes(q)?’flex’:’none’;
});
});
B.Curious 