/*
Theme Name: illy moto
Author: illy moto
Description: illy moto WordPress テーマ v3 - 固定ページから全テキスト編集可能
Version: 3.0.0
License: Private
Text Domain: illy-moto
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#14151a;--bg-alt:#1c1e24;--panel:#22242d;--line:#2c2f3a;
--text:#edeae3;--text-dim:#8a8d97;
--accent:#ff5a1f;--accent-dk:#c44516;
--mono:'JetBrains Mono',monospace;
--sans:'Noto Sans JP',sans-serif;
--display:'Oswald',sans-serif;
--max:1080px;--radius:2px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
.eyebrow{display:block;font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.25;letter-spacing:.03em}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.55rem,3vw,2.1rem)}
h3{font-size:1.1rem}
p{color:var(--text-dim);line-height:1.9}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.sec{padding:72px 0;border-bottom:1px solid var(--line)}
.sec:last-of-type{border-bottom:none}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:800px){.grid-2,.grid-3,.grid-5{grid-template-columns:1fr}}
@media(max-width:560px){.wrap{padding:0 18px}}
.ph{position:relative;background:var(--panel);border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(110deg,transparent 0,transparent 28px,rgba(255,90,31,.04) 28px,rgba(255,90,31,.04) 29px)}
.ph .corner{position:absolute;width:16px;height:16px;border-color:var(--accent);border-style:solid}
.ph .corner.tl{top:10px;left:10px;border-width:2px 0 0 2px}
.ph .corner.tr{top:10px;right:10px;border-width:2px 2px 0 0}
.ph .corner.bl{bottom:10px;left:10px;border-width:0 0 2px 2px}
.ph .corner.br{bottom:10px;right:10px;border-width:0 2px 2px 0}
.ph .ph-label{position:relative;z-index:1;text-align:center;padding:16px}
.ph .ph-id{font-family:var(--mono);font-size:.9rem;font-weight:500;color:var(--accent);letter-spacing:.06em}
.ph .ph-desc{font-family:var(--mono);font-size:.68rem;color:var(--text-dim);margin-top:6px;line-height:1.7}
.ph-hero{aspect-ratio:16/7}.ph-card{aspect-ratio:4/3}.ph-sq{aspect-ratio:1/1}.ph-tall{aspect-ratio:3/4}
.img-wrap{overflow:hidden;position:relative}
.img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.img-wrap.img-hero{aspect-ratio:16/7}.img-wrap.img-card{aspect-ratio:4/3}.img-wrap.img-sq{aspect-ratio:1/1}.img-wrap.img-tall{aspect-ratio:3/4}
header.site-header{position:sticky;top:0;z-index:100;background:rgba(20,21,26,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.1em;text-transform:lowercase;display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}
.logo-icon-img{display:block;flex-shrink:0;height:28px;width:auto;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.logo-text{display:flex;align-items:center;gap:0;color:var(--text);line-height:1}
.logo-m{color:var(--accent)}
.logo .slash{color:var(--accent);margin:0 2px}
#site-navigation ul{display:flex;gap:6px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
#site-navigation ul li a{color:var(--text-dim);font-family:var(--sans);font-size:.8rem;padding:8px 10px;display:block;position:relative;transition:color .2s;white-space:nowrap}
#site-navigation ul li a:hover{color:var(--text)}
#site-navigation ul li.current-menu-item>a,
#site-navigation ul li.current_page_item>a{color:var(--text)}
#site-navigation ul li.current-menu-item>a::after,
#site-navigation ul li.current_page_item>a::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:1px;background:var(--accent)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:1px solid var(--line);padding:10px 12px}
.hamburger span{display:block;width:20px;height:1px;background:var(--text)}
@media(max-width:840px){
.hamburger{display:flex}
#site-navigation{display:none;position:absolute;top:60px;left:0;right:0;background:var(--bg-alt);border-bottom:1px solid var(--line)}
#site-navigation.open{display:block}
#site-navigation ul{flex-direction:column;gap:0}
#site-navigation ul li a{padding:14px 28px;border-bottom:1px solid var(--line);font-size:.9rem}
#site-navigation ul li.current-menu-item>a::after{display:none}
}
.btn{display:inline-block;font-family:var(--display);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:14px 32px;border:1px solid var(--accent);color:var(--text);background:none;transition:background .2s,color .2s;border-radius:var(--radius);cursor:pointer}
.btn:hover{background:var(--accent);color:#12100d}
.btn.solid{background:var(--accent);color:#12100d}
.btn.solid:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.card{background:var(--bg-alt);border:1px solid var(--line);padding:26px}
.service-num{font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--accent);line-height:1;margin-bottom:14px}
.service-card h3{font-size:1rem;margin-bottom:8px}.service-card p{font-size:.85rem}
.accent-line{display:block;width:40px;height:2px;background:var(--accent);margin:18px 0 22px}
.hero{padding:90px 0 72px}
.hero p.lead{max-width:520px;margin-top:22px;font-size:.95rem}
.hero-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 14px;margin-bottom:24px;font-family:var(--mono);font-size:.7rem;color:var(--text-dim)}
.hero-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.specialty-block{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start;padding:56px 0;border-bottom:1px solid var(--line)}
.specialty-block:last-of-type{border-bottom:none}
.specialty-block.reverse{direction:rtl}
.specialty-block.reverse>*{direction:ltr}
.spec-tag{font-family:var(--mono);font-size:.7rem;color:var(--text-dim);margin:14px 0 20px;line-height:1.9}
@media(max-width:700px){.specialty-block,.specialty-block.reverse{grid-template-columns:1fr;direction:ltr}}
.flow-steps{margin-top:48px}
.flow-step{display:flex;gap:28px;padding:32px 0;border-top:1px solid var(--line);align-items:flex-start}
.flow-step:first-child{border-top:none}
.flow-num{font-family:var(--display);font-size:2rem;font-weight:700;color:var(--accent);line-height:1;min-width:54px;padding-top:2px}
.flow-body h3{font-size:1.05rem;margin-bottom:8px}.flow-body p{font-size:.9rem}
.price-table{width:100%;border-collapse:collapse;margin-top:32px;font-size:.9rem}
.price-table th,.price-table td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--line)}
.price-table th{font-family:var(--display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:500;background:var(--bg-alt)}
.price-table td{color:var(--text-dim)}
.price-table tr:last-child td{border-bottom:none}
.note-box{margin-top:24px;padding:16px 20px;border-left:3px solid var(--accent);background:var(--bg-alt);font-size:.83rem;color:var(--text-dim);line-height:1.9}
.about-grid{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start}
@media(max-width:700px){.about-grid{grid-template-columns:1fr}}
.about-content{font-size:.9rem;color:var(--text-dim);line-height:1.95}
.about-content p{margin-bottom:14px}
.voice-card{overflow:hidden}
.voice-card .voice-body{padding:22px 24px 24px}
.voice-comment{font-size:.9rem;color:var(--text);line-height:1.8;margin-bottom:12px}
.voice-who{font-family:var(--mono);font-size:.7rem;color:var(--text-dim);letter-spacing:.06em}
.faq-list{margin-top:40px}
.faq-item{border-top:1px solid var(--line);padding:22px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{display:flex;gap:14px;align-items:flex-start;cursor:pointer;user-select:none}
.faq-mark{font-family:var(--display);font-weight:700;color:var(--accent);font-size:1rem;flex-shrink:0;padding-top:1px}
.faq-q-text{font-size:.95rem;font-weight:700;color:var(--text);flex:1;line-height:1.6}
.faq-arrow{font-size:.75rem;color:var(--text-dim);transition:transform .3s;padding-top:3px;flex-shrink:0}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-a{display:none;padding-top:14px;padding-left:28px;font-size:.88rem;color:var(--text-dim);line-height:1.9}
.faq-item.open .faq-a{display:block}
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.contact-methods{margin-top:28px}
.method-item{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.method-item:last-child{border-bottom:1px solid var(--line)}
.method-icon{font-family:var(--mono);font-size:.68rem;color:var(--accent);border:1px solid var(--accent);padding:4px 8px;flex-shrink:0;margin-top:2px;letter-spacing:.06em}
.method-body strong{font-size:.9rem;display:block;margin-bottom:2px}
.method-body p{font-size:.82rem;color:var(--text-dim);margin:0}
.contact-form{display:grid;gap:18px}
.form-group label{display:block;font-family:var(--display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px}
.form-group label .req{color:var(--accent);margin-left:4px;font-size:.65rem}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--bg-alt);border:1px solid var(--line);color:var(--text);padding:12px 14px;font-family:var(--sans);font-size:.88rem;border-radius:var(--radius);transition:border-color .2s;appearance:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent)}
.form-group textarea{min-height:120px;resize:vertical}
.form-submit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.privacy-body p{font-size:.85rem;line-height:1.95;color:var(--text-dim);margin-bottom:1em}
.privacy-body h3{font-size:.95rem;color:var(--text);margin:24px 0 8px;font-family:var(--display)}
.wp-content-area p{font-size:.9rem;color:var(--text-dim);line-height:1.95;margin-bottom:1em}
.cta-strip{padding:64px 0;text-align:center;position:relative;overflow:hidden}
.cta-strip::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,var(--accent) 0,var(--accent) 4px,transparent 4px,transparent 52px);opacity:.06;pointer-events:none}
.cta-strip h2{font-size:clamp(1.3rem,3vw,1.9rem);margin-bottom:10px}
.cta-strip p{font-size:.9rem;margin-bottom:28px}
.cta-strip .btn-row{justify-content:center}
footer.site-footer{border-top:1px solid var(--line);padding:32px 28px}
.footer-inner{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.footer-inner #footer-navigation ul{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;list-style:none;padding:0;margin:0}
.footer-inner #footer-navigation ul li a{font-size:.78rem;color:var(--text-dim);transition:color .2s}
.footer-inner #footer-navigation ul li a:hover{color:var(--accent)}
.copyright{font-family:var(--mono);font-size:.68rem;color:var(--text-dim);letter-spacing:.06em}
.alert{padding:14px 18px;margin-bottom:24px;font-size:.85rem;line-height:1.7}
.alert-success{border-left:3px solid #4caf50;background:var(--bg-alt);color:#a5d6a7}
.alert-error{border-left:3px solid var(--accent);background:var(--bg-alt);color:var(--text-dim)}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
/* ============================================================
ENGINE SILHOUETTE + CHAIN DECORATIONS — illy moto design
============================================================ */
/* ---- ページ全体：ギア＆ピストンのシルエットをうっすら敷く ---- */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,");
background-size: 520px 520px;
background-repeat: repeat;
}
/* コンテンツがシルエット背景の上に表示されるよう z-index を確保 */
header.site-header,
main.site-main,
footer.site-footer {
position: relative;
z-index: 1;
}
/* ---- ヒーローセクション右端：ピストンシルエット ---- */
.hero {
position: relative;
overflow: hidden;
}
.hero::after {
content: '';
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
width: 120px;
height: 300px;
background-image: url("data:image/svg+xml,");
background-size: contain;
background-repeat: no-repeat;
background-position: right center;
pointer-events: none;
}
@media (max-width: 900px) {
.hero::after { right: -20px; width: 80px; height: 200px; opacity: .55; }
}
@media (max-width: 600px) {
.hero::after { display: none; }
}
/* ---- eyebrow ラベル：先頭にチェーンリンク 2連アイコン ---- */
.eyebrow {
padding-left: 38px;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: 30px 13px;
background-position: left center;
}
/* ---- ソリッドボタン：ホバーでチェーンリンクが両側に出現 ---- */
.btn {
position: relative;
}
.btn.solid::before,
.btn.solid::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 22px;
background-image: url("data:image/svg+xml,");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
transition: opacity .25s ease;
}
.btn.solid::before { right: calc(100% + 5px); }
.btn.solid::after { left: calc(100% + 5px); }
.btn.solid:hover::before,
.btn.solid:hover::after { opacity: .65; }
/* ---- CTA ストリップ上端：チェーンボーダー ---- */
.cta-strip {
position: relative;
}
.cta-strip::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 16px;
background-image: url("data:image/svg+xml,");
background-repeat: repeat-x;
background-size: 40px 16px;
background-position: center;
opacity: .18;
pointer-events: none;
}
/* ---- フッター上端：チェーンボーダー ---- */
footer.site-footer {
position: relative;
}
footer.site-footer::before {
content: '';
display: block;
height: 16px;
margin: -32px -28px 20px; /* footer padding を打ち消して端まで伸ばす */
background-image: url("data:image/svg+xml,");
background-repeat: repeat-x;
background-size: 40px 16px;
background-position: center;
opacity: .18;
}
/* ---- アクセントライン：末尾にチェーンリンク装飾 ---- */
.accent-line {
position: relative;
display: inline-flex;
align-items: center;
width: auto;
}
.accent-line::after {
content: '';
display: inline-block;
width: 26px;
height: 11px;
margin-left: 8px;
background-image: url("data:image/svg+xml,");
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
opacity: .55;
flex-shrink: 0;
}
v9 追加スタイル — ブログ・Access・Service統合ページ
SVG画像はimages/フォルダを参照
============================================================ */
/* ---- Service ページ：サービスrow レイアウト ---- */
.service-row{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding:40px 0;border-top:1px solid var(--line)}
.service-row:first-of-type{border-top:none}
.service-row.service-row-flip .service-row-img{order:2}
.service-row.service-row-flip .service-row-text{order:1}
.service-row-text h3{font-size:1.1rem;margin-bottom:8px}
@media(max-width:800px){.service-row,.service-row.service-row-flip{grid-template-columns:1fr}.service-row-img,.service-row-text{order:unset!important}}
/* ---- ブログ投稿カード ---- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:32px}
.post-card{background:var(--bg-alt);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
.post-card:hover{border-color:var(--accent)}
.post-card-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--panel)}
.post-card-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.post-card:hover .post-card-thumb img{transform:scale(1.04)}
.post-card-noimg{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:var(--panel);color:var(--text-dim);font-family:var(--display);font-size:.8rem;letter-spacing:.1em}
.post-card-body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.post-card-meta{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.post-card-date{font-family:var(--mono);font-size:.7rem;color:var(--text-dim);letter-spacing:.04em}
.post-card-cat{font-family:var(--display);font-size:.65rem;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--accent);padding:2px 7px}
.post-card-title{font-size:.95rem;margin-bottom:8px;flex:0}
.post-card-title a{color:var(--text);transition:color .2s}
.post-card-title a:hover{color:var(--accent)}
.post-card-excerpt{font-size:.82rem;color:var(--text-dim);line-height:1.8;flex:1;margin-bottom:12px}
.post-card-more{font-family:var(--display);font-size:.72rem;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-top:auto}
.post-card-more:hover{color:var(--text)}
.post-empty{color:var(--text-dim);font-size:.9rem;padding:32px 0;text-align:center}
.blog-guide{font-family:var(--mono);font-size:.72rem;color:var(--text-dim);padding:10px 0;letter-spacing:.03em;border-top:1px solid var(--line);margin-top:8px}
/* ---- Access ページ ---- */
.access-map{border:1px solid var(--line);overflow:hidden}
.access-hours{display:flex;flex-direction:column;gap:12px}
.access-hour-row{display:flex;align-items:center;padding:10px 14px;background:var(--bg-alt);border:1px solid var(--line);font-size:.9rem;color:var(--text-dim)}
.access-hour-row::before{content:'';display:inline-block;width:4px;height:4px;background:var(--accent);border-radius:50%;margin-right:12px;flex-shrink:0}
/* ============================================================
PAGE HERO IMAGE — 全ページ共通（1920×1080 / 16:9）
============================================================ */
/* ヒーロー画像ラッパー（フルブリード：wrap外側に配置） */
.page-hero {
/* サブページ共通：1920×360 */
position: relative;
width: 100%;
aspect-ratio: 1920 / 360;
max-height: 400px;
min-height: 160px;
overflow: hidden;
background: var(--panel);
}
/* TOPページのみ 1920×1080（フルHD 16:9）*/
.page-hero--full {
aspect-ratio: 16 / 9;
max-height: 100vh;
min-height: 240px;
}
.page-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* プレースホルダー（画像未設定時） */
.page-hero-ph {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--panel);
background-image:
repeating-linear-gradient(110deg, transparent 0, transparent 28px,
rgba(255,90,31,.04) 28px, rgba(255,90,31,.04) 29px);
}
.page-hero-ph-inner { text-align: center; padding: 24px; }
.page-hero-ph-eyebrow {
font-family: var(--display);
font-size: .75rem;
color: var(--accent);
letter-spacing: .2em;
text-transform: uppercase;
display: block;
margin-bottom: 12px;
}
.page-hero-ph-name {
font-family: var(--display);
font-size: clamp(1.2rem, 3vw, 2rem);
color: var(--text);
font-weight: 700;
letter-spacing: .04em;
margin-bottom: 16px;
}
.page-hero-ph-id {
font-family: var(--mono);
font-size: .8rem;
color: var(--accent);
letter-spacing: .06em;
margin-bottom: 6px;
}
.page-hero-ph-size {
font-family: var(--mono);
font-size: .7rem;
color: var(--text-dim);
}
/* オーバーレイ（下からのグラデーション＋ページタイトル） */
.page-hero-bar {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 80px 0 36px;
background: linear-gradient(to top,
rgba(20,21,26,.88) 0%,
rgba(20,21,26,.5) 50%,
transparent 100%);
}
.page-hero-eyebrow {
padding-left: 0;
background-image: none;
display: block;
margin-bottom: 10px;
color: var(--accent);
}
.page-hero-title {
font-size: clamp(1.8rem, 5vw, 3.4rem);
color: var(--text);
font-family: var(--display);
font-weight: 700;
letter-spacing: .03em;
line-height: 1.2;
margin: 0;
}
/* TOPページのヒーロー内テキストセクション調整 */
.hero {
padding-top: 64px;
}
@media (max-width: 900px) {
.page-hero--full { max-height: 70vw; }
.page-hero-bar { padding: 36px 0 20px; }
}
@media (max-width: 600px) {
.page-hero { min-height: 120px; }
.page-hero--full { max-height: 60vw; min-height: 180px; }
.page-hero-bar { padding: 24px 0 14px; }
.page-hero-title { font-size: 1.3rem; }
}
/* ============================================================
ロゴアイコン + ヒーローモノグラム
============================================================ */
/* ヒーローモノグラム（背景に大きく1個） */
.hero-monogram {
position: absolute;
right: -60px;
bottom: -80px;
width: 500px;
height: 455px;
background-image: url("images/bg-monogram.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: bottom right;
opacity: 0.055;
pointer-events: none;
z-index: 0;
}
/* wrapを基準にモノグラムを配置 */
.wrap { position: relative; }
.wrap > * { position: relative; z-index: 1; }
/* モノグラムはz-indexを最低に */
.hero-monogram { z-index: 0; }
@media (max-width: 800px) {
.hero-monogram { width: 300px; height: 275px; right: -30px; bottom: -40px; opacity: .04; }
}
@media (max-width: 500px) {
.hero-monogram { display: none; }
}
/* ============================================================
修正：モノグラムをピストン位置（ヒーロー右下）に移動
+ ロゴ大文字M修正
+ フッターロゴスタイル
============================================================ */
/* ── モノグラムをヒーロー右下に配置（ピストンを置き換え） ── */
.hero::after {
/* piston SVG をモノグラム SVG に差し替え */
background-image: url("images/bg-monogram.svg") !important;
/* 位置：右下 */
right: -55px !important;
bottom: -60px !important;
top: auto !important;
transform: none !important;
/* サイズ：大きめ（SVG viewBox 550:500 の比率） */
width: 440px !important;
height: 400px !important;
background-position: bottom right !important;
background-size: contain !important;
opacity: 0.07 !important;
}
@media (max-width: 900px) {
.hero::after {
width: 280px !important;
height: 255px !important;
right: -20px !important;
bottom: -30px !important;
opacity: 0.055 !important;
}
}
@media (max-width: 600px) {
.hero::after { display: none !important; }
}
/* ── .hero-monogram（旧位置）は非表示 ── */
.hero-monogram { display: none !important; }
/* ── ロゴ文字：text-transform:lowercase を上書き → M が大文字に ── */
.logo-text {
text-transform: none !important;
}
/* ── フッターロゴ：ヘッダーより少し大きく、中央揃え ── */
.logo-footer {
font-size: 1.25rem;
gap: 10px;
}
.logo-footer .logo-icon-img {
height: 36px;
}
/* ================================================================
illy moto v10 修正パッチ
================================================================ */
/* ── ① ヘッダー sticky / z-index の復元（上書きバグを修正） ── */
header.site-header {
position: sticky !important;
top: 0 !important;
z-index: 9000 !important;
}
/* ── ② ハンバーガーメニュー：z-index + タップターゲット修正 ── */
@media (max-width: 840px) {
#site-navigation {
z-index: 8999 !important;
position: absolute !important;
}
#site-navigation ul li a {
min-height: 48px !important;
display: flex !important;
align-items: center !important;
padding: 0 28px !important;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(255,90,31,.15);
}
}
/* ── ③ ヒーロー画像：aspect-ratio → 固定高さに変更（中心クロップ） ── */
.page-hero {
aspect-ratio: auto !important;
height: 360px !important;
max-height: none !important;
min-height: 0 !important;
}
.page-hero--full {
height: 100svh !important;
max-height: 100svh !important;
min-height: 320px !important;
aspect-ratio: auto !important;
}
.page-hero-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
}
.page-hero-ph {
width: 100% !important;
height: 100% !important;
}
@media (max-width: 900px) {
.page-hero { height: 220px !important; }
.page-hero--full { height: 56svh !important; min-height: 260px !important; }
.page-hero-bar { padding: 40px 0 20px !important; }
}
@media (max-width: 600px) {
.page-hero { height: 160px !important; }
.page-hero--full { height: 48svh !important; min-height: 220px !important; }
.page-hero-bar { padding: 24px 0 14px !important; }
.page-hero-title { font-size: 1.3rem !important; }
}
/* ── ④ デザインパーツ：チェーン装飾をインラインSVGで確実に表示 ── */
.eyebrow {
padding-left: 38px !important;
background-image: url("data:image/svg+xml,") !important;
background-repeat: no-repeat !important;
background-size: 30px 13px !important;
background-position: left center !important;
}
/* ヒーローの eyebrow はパディングなし */
.page-hero-eyebrow {
padding-left: 0 !important;
background-image: none !important;
}
.btn.solid::before,
.btn.solid::after {
background-image: url("data:image/svg+xml,") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}
.cta-strip::after {
background-image: url("data:image/svg+xml,") !important;
background-repeat: repeat-x !important;
background-size: 40px 16px !important;
}
footer.site-footer::before {
background-image: url("data:image/svg+xml,") !important;
background-repeat: repeat-x !important;
background-size: 40px 16px !important;
}
.accent-line::after {
background-image: url("data:image/svg+xml,") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}
/* ── ⑤ お問い合わせ確認ページ ── */
.confirm-wrap {
max-width: 700px;
margin: 0 auto;
}
.confirm-head {
margin-bottom: 28px;
}
.confirm-head h3 {
font-family: var(--display);
font-size: 1.25rem;
color: var(--text);
margin-bottom: 8px;
}
.confirm-head p {
font-size: .88rem;
color: var(--text-dim);
}
.confirm-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 28px;
font-size: .88rem;
}
.confirm-table tr {
border-bottom: 1px solid var(--line);
}
.confirm-table tr:first-child {
border-top: 1px solid var(--line);
}
.confirm-table th {
text-align: left;
padding: 14px 16px 14px 0;
color: var(--text-dim);
font-weight: 600;
font-family: var(--display);
font-size: .75rem;
letter-spacing: .06em;
text-transform: uppercase;
width: 180px;
vertical-align: top;
}
.confirm-table td {
padding: 14px 0;
color: var(--text);
word-break: break-word;
white-space: pre-wrap;
}
.confirm-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
@media (max-width: 600px) {
.confirm-table th { width: auto; display: block; padding-bottom: 4px; }
.confirm-table td { display: block; padding-top: 0; }
.confirm-table tr { display: block; padding: 12px 0; }
.confirm-actions { flex-direction: column; }
}
/* ── ⑥ SNSアイコン（フッター） ── */
.footer-sns {
display: flex;
gap: 12px;
justify-content: center;
margin: 10px 0 6px;
}
.sns-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--text-dim);
transition: color .2s, border-color .2s;
text-decoration: none;
flex-shrink: 0;
}
.sns-icon:hover {
color: var(--accent);
border-color: var(--accent);
}
.sns-icon svg {
display: block;
pointer-events: none;
}
/* ── フッター 営業日時 ── */
.footer-hours {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
justify-content: center;
margin: 12px 0 6px;
padding: 12px 20px;
border: 1px solid var(--line);
border-radius: 2px;
max-width: 480px;
width: 100%;
}
.footer-hour-item {
font-family: var(--mono);
font-size: .72rem;
color: var(--text-dim);
letter-spacing: .04em;
white-space: nowrap;
}
.footer-hour-item::before {
content: '— ';
color: var(--accent);
font-weight: 700;
}
@media (max-width: 480px) {
.footer-hours { flex-direction: column; gap: 4px; padding: 10px 16px; }
}
/* ── reCAPTCHA 注記 ── */
.recaptcha-note {
font-size: .72rem;
color: var(--text-dim);
margin-bottom: 8px;
line-height: 1.7;
}
.recaptcha-note a {
color: var(--text-dim);
text-decoration: underline;
}
.recaptcha-note a:hover { color: var(--accent); }
/* ================================================================
v10b: フッター 2カラムレイアウト（左:営業時間 / 右:SNS+ロゴ）
================================================================ */
/* フッター全体のベース調整 */
footer.site-footer { padding: 28px 28px 20px; }
.footer-inner {
max-width: var(--max);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
text-align: center; /* nav と copyright は中央 */
}
/* 中段: 2カラム */
.footer-mid {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
margin: 18px 0 14px;
padding: 18px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* 左: 営業時間 */
.footer-hours-col { flex: 1; min-width: 0; }
.footer-hours {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
max-width: none !important;
}
.footer-hour-item {
font-family: var(--mono) !important;
font-size: .75rem !important;
color: var(--text-dim) !important;
letter-spacing: .04em !important;
white-space: normal !important;
}
.footer-hour-item::before {
content: '— ' !important;
color: var(--accent) !important;
font-weight: 700 !important;
}
/* 右: SNS + ロゴ */
.footer-right-col {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
flex-shrink: 0;
}
.footer-right-col .footer-sns {
justify-content: flex-end !important;
margin: 0 !important;
}
.footer-right-col .logo-footer {
/* ロゴサイズ調整 */
}
/* モバイル: 縦並びに */
@media (max-width: 640px) {
.footer-mid {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-hours {
align-items: center !important;
text-align: center !important;
}
.footer-right-col {
align-items: center;
}
.footer-right-col .footer-sns {
justify-content: center !important;
}
}
/* ================================================================
フッター 2カラム：コンテンツ幅に合わせて中央収縮
================================================================ */
/* 両コンテンツを中央寄せ・固定ギャップで並べる */
.footer-mid {
justify-content: center !important;
gap: 48px !important;
}
/* 左列: コンテンツ幅に縮む (flex:1 を解除) */
.footer-hours-col {
flex: 0 0 auto !important;
width: auto !important;
}
.footer-hours {
align-items: flex-start !important;
text-align: left !important;
}
/* 右列: コンテンツ幅に縮む */
.footer-right-col {
flex: 0 0 auto !important;
}
/* モバイル: 縦並び・中央 */
@media (max-width: 640px) {
.footer-mid { gap: 24px !important; }
.footer-hours { align-items: center !important; text-align: center !important; }
}
/* ----------------------------------------------------------------
Contact ページ：スマホでフォームを下段に縦積み（v10d）
---------------------------------------------------------------- */
@media (max-width: 800px) {
.contact-grid {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
font-size: 16px; /* iOS自動ズーム防止 */
}
}