Shop
/* ============================================================
MACHICOCO CAFE — moon.css ★唯一の共通デザインシステム★
白ベース × クリーム × MOONイエロー × 墨(差し色)
Bebas Neue / Kaushan Script / Zen Kaku Gothic New(900)
全ページがこの1枚だけを読み込む。色・余白・フォントはここで一元管理。
ページ側のHTMLに色を直書きしないこと。
============================================================ */
:root{
–paper:#ffffff; /* ベース白 */
–cream:#FBF7EE; /* ヒーロー等のベージュ */
–ink:#1a1a1a; /* 墨（差し色・文字・枠） */
–soft:#4a4138; /* 補助テキスト */
–yellow:#FFD400; /* MOONイエロー */
–yellow-d:#E0B000; /* 筆記体・濃い黄 */
–navy:#1f3a5f; –orange:#E8511C; –line:#e9e2d4;
–maxw:1180px; –ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:”Zen Kaku Gothic New”,system-ui,sans-serif;color:var(–ink);background:var(–paper);
line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(–yellow);color:#111}
.wrap{max-width:var(–maxw);margin:0 auto;padding:0 22px}
.en{font-family:”Bebas Neue”,sans-serif;letter-spacing:.04em;line-height:.95}
.script{font-family:”Kaushan Script”,cursive}
/* ———- checker divider ———- */
.checker{height:18px;width:100%;background-image:
linear-gradient(45deg,var(–ink) 25%,transparent 25%),
linear-gradient(-45deg,var(–ink) 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,var(–ink) 75%),
linear-gradient(-45deg,transparent 75%,var(–ink) 75%);
background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;background-color:#fff}
/* ———- header (白ヘッダー) ———- */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
border-bottom:1px solid var(–line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:14px}
.logo{display:flex;flex-direction:column;line-height:1}
.logo .mark{font-family:”Bebas Neue”,sans-serif;font-size:1.6rem;letter-spacing:.04em;color:var(–ink)}
.logo .sub{font-family:”Kaushan Script”,cursive;color:var(–yellow-d);font-size:.82rem;margin-top:3px}
.logo img{height:40px} /* 本番ロゴ cafe.png 用 */
nav.menu{display:flex;align-items:center;gap:18px;font-size:.82rem;font-weight:700}
nav.menu a{color:var(–soft);transition:.18s;white-space:nowrap}
nav.menu a:hover,nav.menu a.cur{color:var(–ink)}
nav.menu a.cur{border-bottom:2px solid var(–yellow);padding-bottom:2px}
.langbtn{font-family:”Bebas Neue”,sans-serif;letter-spacing:.06em;font-size:.82rem;background:var(–yellow);
color:var(–ink);border:2px solid var(–ink);border-radius:999px;padding:5px 14px;cursor:pointer;font-weight:700}
.langbtn:focus-visible{outline:3px solid var(–yellow-d);outline-offset:2px}
.burger{display:none;background:none;border:2px solid var(–ink);border-radius:8px;padding:6px 9px;cursor:pointer;font-size:1rem}
/* ———- hero ———- */
.hero{background:var(–cream);text-align:center;padding:62px 20px 52px}
.hero .kicker{font-family:”Kaushan Script”,cursive;color:var(–yellow-d);font-size:1.45rem}
.hero h1{font-family:”Bebas Neue”,sans-serif;font-size:clamp(3.4rem,12vw,6.6rem);letter-spacing:.03em;line-height:.92;margin:.08em 0 .14em}
.hero .lead{max-width:640px;margin:0 auto;color:var(–soft);font-size:1.02rem}
/* ———- section ———- */
.sec{max-width:var(–maxw);margin:0 auto;padding:50px 22px 12px}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;border-left:8px solid var(–yellow);padding-left:14px}
.sec-head .en{font-family:”Bebas Neue”,sans-serif;font-size:2.4rem;letter-spacing:.03em;line-height:1}
.sec-head .jp{font-weight:900;font-size:1.02rem;color:var(–soft)}
/* ———- card gallery ———- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{position:relative;border-radius:16px;overflow:hidden;background:#000;border:2px solid var(–ink);
box-shadow:0 6px 18px rgba(0,0,0,.10);aspect-ratio:1/1}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(–ease)}
.card:hover img,.card:focus-within img{transform:scale(1.07)}
.card .badge{position:absolute;top:10px;left:10px;z-index:2;background:var(–yellow);color:var(–ink);
font-family:”Bebas Neue”;letter-spacing:.05em;font-size:.82rem;font-weight:700;padding:3px 10px;border-radius:6px;border:2px solid var(–ink)}
.card .ov{position:absolute;inset:auto 0 0 0;padding:30px 14px 12px;color:#fff;
background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.32) 60%,transparent);
display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.card .nm{font-weight:900;font-size:1.0rem;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.card .nm small{display:block;font-family:”Bebas Neue”,sans-serif;font-weight:400;font-size:.78rem;letter-spacing:.06em;opacity:.85}
.card .pr{flex:none;background:var(–yellow);color:var(–ink);font-weight:900;font-size:.9rem;border-radius:8px;padding:3px 9px;white-space:nowrap}
.card .ds{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
padding:16px;color:#fff;font-size:.9rem;font-weight:500;background:rgba(20,20,20,.72);opacity:0;transition:.3s}
.card:hover .ds,.card:focus-within .ds{opacity:1}
/* photo slot（Coworkが実画像に差し替え） */
.card .slot,.slot{position:relative;width:100%;height:100%;border:2px dashed #c9bf9f;
background:repeating-linear-gradient(45deg,#fffdf5,#fffdf5 10px,#fbf6e3 10px,#fbf6e3 20px);
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;color:#9a8f70}
.slot .cam{font-size:1.7rem;opacity:.7}
.slot .nm{font-weight:900;color:var(–soft);margin-top:6px;font-size:.9rem;line-height:1.3}
/* ———- Our ~ band (黄帯こだわり) ———- */
.band{background:var(–yellow);border-top:3px solid var(–ink);border-bottom:3px solid var(–ink);margin-top:44px;padding:40px 20px}
.band .wrap{max-width:var(–maxw);margin:0 auto}
.band h3{font-family:”Bebas Neue”,sans-serif;font-size:2rem;letter-spacing:.03em;margin-bottom:18px;text-align:center}
.band .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.band .c{background:#fff;border:2px solid var(–ink);border-radius:14px;padding:18px}
.band .c b{display:block;font-size:1.05rem;margin-bottom:6px}
.band .c span{font-size:.92rem;color:var(–soft)}
/* ———- buttons ———- */
.btn{display:inline-block;font-weight:900;font-size:.92rem;border:2px solid var(–ink);border-radius:999px;
padding:11px 22px;transition:.18s;background:#fff}
.btn.y{background:var(–yellow)}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,.15)}
.btn:focus-visible{outline:3px solid var(–yellow-d);outline-offset:2px}
/* ———- note ———- */
.note{background:var(–ink);color:#fff;margin-top:46px;padding:24px 20px}
.note .in{max-width:var(–maxw);margin:0 auto;font-weight:700;display:flex;gap:14px;align-items:flex-start;font-size:.92rem}
.note .tag{font-family:”Bebas Neue”,sans-serif;font-size:1.3rem;background:var(–yellow);color:var(–ink);padding:2px 12px;border-radius:6px;flex:none}
/* ———- footer ———- */
footer{background:var(–ink);color:#cfc9bd;text-align:center;padding:42px 20px;font-size:.84rem;line-height:1.9;margin-top:10px}
footer .f-en{font-family:”Bebas Neue”,sans-serif;font-size:1.7rem;color:#fff;letter-spacing:.05em}
footer nav{margin:14px 0;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
footer nav a{color:#cfc9bd}
footer nav a:hover{color:var(–yellow)}
footer a.mail{color:var(–yellow)}
/* ———- reveal ———- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(–ease),transform .6s var(–ease)}
.reveal.in{opacity:1;transform:none}
/* ———- responsive ———- */
@media (max-width:820px){
nav.menu{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:2px solid var(–ink);
flex-direction:column;gap:0;padding:8px 0}
nav.menu.open{display:flex}
nav.menu a{padding:12px 22px;width:100%;border-bottom:1px solid var(–line)}
.burger{display:inline-block}
}
@media (max-width:560px){
.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.card .nm,.slot .nm{font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){
.card img{transition:none}.reveal{transition:none;opacity:1;transform:none}html{scroll-behavior:auto}
}
/* ===== scene band (黄帯に黒カード Great For) ===== */
.scene{background:var(–yellow);border-top:3px solid var(–ink);border-bottom:3px solid var(–ink);padding:48px 20px}
.scene .wrap{max-width:var(–maxw);margin:0 auto}
.scene h2{font-family:”Bebas Neue”,sans-serif;font-size:2.1rem;letter-spacing:.02em;text-align:center;margin-bottom:24px}
.scene .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.scene .c{background:#fff;color:#1a1a1a;border:2px solid #1a1a1a;border-radius:16px;padding:28px 22px;text-align:center}
.scene .c .ic{font-size:2rem;margin-bottom:8px}
.scene .c b{display:block;font-size:1.12rem;margin-bottom:6px}
.scene .c span{color:#4a4138;font-size:.92rem}
/* ===== steps (受取の流れ) ===== */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.step{border:2px solid var(–ink);border-radius:16px;padding:24px 20px;background:#fff;text-align:center}
.step .no{font-family:”Bebas Neue”,sans-serif;font-size:1.3rem;width:42px;height:42px;border-radius:50%;background:var(–yellow);border:2px solid var(–ink);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.step b{display:block;font-size:1.05rem;margin-bottom:5px}
.step span{font-size:.9rem;color:var(–soft)}
/* ===== audience ribbon (個人/業者) ===== */
.ribbon{max-width:var(–maxw);margin:24px auto 0;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:0 22px}
.ribbon .r{flex:1;min-width:240px;border:2px solid var(–ink);border-radius:14px;padding:16px 20px;font-weight:900;display:flex;align-items:center;gap:10px}
.ribbon .r.on.personal{background:var(–yellow)}
.ribbon .r.on.biz{background:var(–ink);color:#fff}
.ribbon .r .tag{font-family:”Bebas Neue”;font-size:1.1rem;background:#fff;border:2px solid var(–ink);color:var(–ink);border-radius:6px;padding:1px 9px}
.ribbon .r small{font-weight:500;font-size:.82rem;display:block;opacity:.8}
/* ===== spec (卸条件) ===== */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.spec .i{border:2px solid var(–ink);border-radius:14px;padding:18px 20px;background:var(–cream)}
.spec .i .k{font-size:.82rem;color:var(–soft);font-weight:700}
.spec .i .v{font-family:”Bebas Neue”,sans-serif;font-size:1.7rem;margin-top:4px}
.spec .i .v.jp{font-family:”Zen Kaku Gothic New”;font-size:1.1rem;font-weight:900}
/* ===== care list ===== */
.caregrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.careitem{border:2px solid var(–ink);border-radius:14px;padding:20px;background:#fff}
.careitem .t{font-family:”Bebas Neue”;font-size:1.1rem;color:var(–soft);letter-spacing:.04em}
.careitem .big{font-size:1.5rem;font-weight:900;margin:4px 0}
.careitem p{font-size:.92rem;color:var(–soft)}
/* ===== FAQ ===== */
.faq{border:2px solid var(–ink);border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden}
.faq summary{font-weight:900;padding:16px 18px;cursor:pointer;display:flex;gap:10px;align-items:center;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:”Bebas Neue”;color:var(–yellow-d);font-size:1.2rem}
.faq[open] summary{border-bottom:1px solid var(–line)}
.faq .a{padding:14px 18px;color:var(–soft);font-size:.95rem}
/* ===== masonry (gallery) ===== */
.masonry{columns:3;column-gap:14px}
.masonry .slot{width:100%;margin-bottom:14px;break-inside:avoid;border-radius:14px;min-height:auto;aspect-ratio:auto}
.masonry .slot.tall{height:300px}.masonry .slot.mid{height:220px}.masonry .slot.sq{height:240px}
@media(max-width:820px){.masonry{columns:2}}
@media(max-width:520px){.masonry{columns:1}}
/* ===== cta ===== */
.cta{background:var(–cream);border-top:3px solid var(–ink);margin-top:46px;padding:50px 20px;text-align:center}
.cta h2{font-family:”Bebas Neue”,sans-serif;font-size:2.2rem;letter-spacing:.02em;margin-bottom:6px}
.cta p{color:var(–soft);margin-bottom:18px}
.cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* product card variant (価格カード) */
.card.tall{aspect-ratio:3/4}
/* ———- dropdown nav（統一グローバルナビ／構造のみ・色はvars流用） ———- */
nav.menu .has-sub{position:relative;display:flex;align-items:center}
nav.menu .has-sub > .drop{cursor:pointer}
nav.menu .sub{position:absolute;top:100%;left:0;min-width:184px;background:#fff;border:2px solid var(–ink);
border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.12);padding:6px;display:flex;flex-direction:column;gap:0;
opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s var(–ease),transform .16s var(–ease),visibility .16s;z-index:70}
nav.menu .has-sub:hover > .sub,nav.menu .has-sub.open > .sub,nav.menu .has-sub:focus-within > .sub{opacity:1;visibility:visible;transform:none}
nav.menu .sub a{padding:9px 14px;border-radius:8px;white-space:nowrap;width:auto;color:var(–soft)}
nav.menu .sub a:hover{background:var(–cream);color:var(–ink)}
nav.menu .sub a.subcur{background:var(–cream);color:var(–ink);font-weight:900}
nav.menu .has-sub > .drop.cur{color:var(–ink);border-bottom:2px solid var(–yellow);padding-bottom:2px}
@media (max-width:820px){
nav.menu .has-sub{flex-direction:column;align-items:stretch;width:100%}
nav.menu .has-sub > .drop{padding:12px 22px;border-bottom:1px solid var(–line)}
nav.menu .sub{position:static;opacity:1;visibility:visible;transform:none;display:none;
border:none;border-radius:0;box-shadow:none;padding:0;background:var(–cream)}
nav.menu .has-sub.open > .sub{display:flex}
nav.menu .sub a{padding:11px 34px;border-bottom:1px solid var(–line);width:100%}
}
/* ===== ACFメニュー出力 .mgrid/.mitem（ショートコード用・正本に統合） ===== */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.mitem{background:#fff;border:2px solid var(–ink);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.10)}
.mitem .ph{aspect-ratio:1/1;position:relative;background:repeating-linear-gradient(45deg,#fffdf5,#fffdf5 10px,#fbf6e3 10px,#fbf6e3 20px)}
.mitem .ph img{width:100%;height:100%;object-fit:cover}
.mitem .ph .slot{position:absolute;inset:0;border:none;background:none;color:#9a8f70;font-weight:900;font-size:.86rem}
.mitem .cap{padding:12px 14px}
.mitem .cap h3{font-weight:900;font-size:1rem;line-height:1.3;margin:0}
.mitem .cap .price{color:var(–yellow-d);font-weight:900;font-size:.95rem;margin-top:4px}
.mitem .badge{display:inline-block;background:var(–orange);color:#fff;font-size:.72rem;font-weight:900;letter-spacing:.04em;border-radius:6px;padding:2px 9px;margin-bottom:5px}
@media(max-width:560px){.mgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}}
/* wpautop保険（1630で無効化済だが念のため） */
p:not([class]){display:contents!important}
header{background:#141414!important}header .menu a,header .menu a:link,header .menu a:visited,header .menu .drop,header .menu .has-sub>a{color:#fff!important;font-family:”Zen Kaku Gothic New”,”Hiragino Kaku Gothic ProN”,”Hiragino Sans”,”Yu Gothic”,”Noto Sans JP”,Meiryo,sans-serif!important;font-weight:700!important;letter-spacing:.04em!important}header .menu .sub{background:#141414!important;border-color:#333!important}header .menu .sub a{color:#fff!important}header .menu .sub a.subcur{background:rgba(255,255,255,.14)!important;color:#ffd400!important}:where(h1,h2,h3,h4,h5,h6,p,span,a,li,div,button,input,select,textarea,td,th,label,figcaption,strong,em,small,b,dt,dd){font-family:”Zen Kaku Gothic New”,”Hiragino Kaku Gothic ProN”,”Hiragino Sans”,”Yu Gothic”,”Noto Sans JP”,Meiryo,sans-serif}.wc-block-components-button,.wc-block-components-button *,.wp-block-button__link,.checkout-button,.wc-proceed-to-checkout a,a.wc-block-cart__submit-button,.wc-block-cart__submit-container a,.wc-block-cart__submit-container a *,.wc-block-components-checkout-place-order-button{color:#fff!important}(function(){try{if(!document.querySelector(‘meta[name=”google”][content=”notranslate”]’)){var mt=document.createElement(‘meta’);mt.name=’google’;mt.content=’notranslate’;(document.head||document.documentElement).appendChild(mt);}document.documentElement.setAttribute(‘translate’,’no’);}catch(e){}function aL(l){document.documentElement.lang=l;try{sessionStorage.setItem(‘mc_lang’,l)}catch(e){}document.querySelectorAll(‘.t,[data-en]’).forEach(function(e){var v=e.dataset[l];if(v!=null)e.innerHTML=v});document.querySelectorAll(‘#langBtn,.langbtn’).forEach(function(b){b.textContent=(l===’ja’?’EN’:’日本語’)})}function init(){var o=document.getElementById(‘langBtn’);if(o){var nb=o.cloneNode(true);o.parentNode.replaceChild(nb,o);nb.addEventListener(‘click’,function(){aL(document.documentElement.lang===’en’?’ja’:’en’)})}var s=’ja’;try{s=sessionStorage.getItem(‘mc_lang’)||’ja’}catch(e){}aL(s)}if(document.readyState!==’loading’)init();else document.addEventListener(‘DOMContentLoaded’,init)})();
全10件を表示
