*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,'MS PGothic',sans-serif;font-size:13px;line-height:1.8;color:#3a2f1f;background-color:#f7f2e7;min-width:320px;-webkit-text-size-adjust:100%}

/* ===== タイル背景（トップページ等と共通の演出、ベージュ系オーバーレイ） ===== */
#tile-bg{position:fixed;inset:0;z-index:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:2px;pointer-events:none;background:#f7f2e7}
@media screen and (max-width:768px){#tile-bg{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr)}}
#tile-bg .tile-img{width:100%;height:100%;object-fit:contain;object-position:center center;filter:brightness(0.90) saturate(0.25) sepia(0.15);background:#f7f2e7}
#tile-overlay{position:fixed;inset:0;z-index:1;background:linear-gradient(135deg,rgba(250,242,225,0.60) 0%,rgba(247,235,212,0.52) 50%,rgba(250,240,220,0.58) 100%);pointer-events:none}
#glass-lines{position:fixed;inset:0;z-index:2;pointer-events:none}
#glass-lines svg{width:100%;height:100%}

a{color:#9c6b2e;text-decoration:none}
a:hover{color:#6b4a1e;text-decoration:underline}
img{max-width:100%;height:auto;display:block;border:none}

.page-wrapper{position:relative;z-index:3;max-width:760px;margin:0 auto;padding:0 10px 80px}

/* ===== パンくず ===== */
.breadcrumb-nav{max-width:760px;margin:0 auto;padding:6px 10px;font-size:0.78rem;background:rgba(120,90,50,0.78)}
.breadcrumb-list{list-style:none;display:flex;flex-wrap:wrap;gap:0;padding:0;color:#fff}
.breadcrumb-list li+li::before{content:"　›　";color:rgba(255,240,220,0.80)}
.breadcrumb-list a{color:#fff2dd}

/* ===== ヘッダー ===== */
.ab-header{background:rgba(120,90,50,0.90);border-bottom:2px solid rgba(160,120,70,0.50);padding:10px 12px 0}
.ab-header-brand{font-size:clamp(0.7rem,2vw,0.82rem);color:rgba(255,248,235,0.92);margin-bottom:6px;line-height:1.5}
.ab-header-brand a{color:rgba(255,255,255,0.85);text-decoration:none}
.ab-header-brand a:hover{color:#fff}
.ab-header-brand .sep{color:rgba(255,255,255,0.35);margin:0 0.3em}
.ab-header-title{font-size:clamp(1.1rem,4vw,1.5rem);font-weight:bold;color:#ffffff;text-align:center;padding:8px 0 10px;letter-spacing:0.04em}
.ab-tab-nav{display:flex;gap:4px;flex-wrap:wrap;padding-top:10px}
.ab-tab-nav a{flex:1;display:flex;align-items:center;justify-content:center;min-height:36px;padding:6px 10px;text-align:center;font-size:clamp(12px,2.5vw,14px);font-weight:bold;color:rgba(255,248,238,0.95);text-decoration:none;border-radius:5px 5px 0 0;border:1px solid rgba(160,120,70,0.35);background:rgba(120,90,50,0.55);transition:background 0.18s,color 0.18s}
.ab-tab-nav a:hover{background:rgba(140,105,60,0.75);color:#ffffff;text-decoration:none}
.ab-tab-nav a.active{background:rgba(95,68,32,0.92);color:#ffffff;border-color:rgba(190,150,95,0.45)}

.ab-section{padding:20px 0 10px}
.ab-section-title{font-size:clamp(1.2rem,4vw,1.55rem);font-weight:bold;color:#8a5a20;text-align:center;padding:10px 0 8px;border-bottom:1px solid rgba(150,100,40,0.40);margin-bottom:14px;text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 -2px 0 #fff,0 2px 0 #fff,-2px 0 0 #fff,2px 0 0 #fff}

.ab-intro{background:rgba(110,80,45,0.85);border:1px solid rgba(180,140,85,0.40);border-radius:6px;padding:12px 16px;margin-bottom:14px;font-size:0.88rem;color:#ffffff;line-height:1.85}
.ab-intro p{margin-bottom:0.7em}
.ab-intro p:last-child{margin-bottom:0}
.ab-intro strong{color:#ffe9c4}
.ab-intro a{color:#ffdf99}
.ab-intro a:hover{color:#ffffff}

.ab-caution{background:rgba(180,60,30,0.10);border-left:3px solid #b5451f;padding:10px 14px;margin:12px 0;font-size:0.85rem;color:#5a2c14;line-height:1.7}

.ab-hr{border:none;border-top:1px solid rgba(150,100,40,0.40);margin:14px 0}
.ab-hr-thick{border:none;border-top:3px solid rgba(150,100,40,0.55);margin:20px 0}

/* ===== 別注什器 製作例ブロック ===== */
.ab-item{background:rgba(255,255,255,0.55);border:1px solid rgba(180,140,85,0.35);border-radius:8px;margin:16px 0;overflow:hidden}
.ab-item-head{background:rgba(120,90,50,0.90);color:#ffffff;font-weight:bold;font-size:1.0rem;padding:9px 14px;letter-spacing:0.02em}
.ab-item-body{display:flex;gap:16px;align-items:flex-start;padding:14px 16px}
.ab-item-thumbs{flex-shrink:0;width:auto;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:8px}
.ab-item-thumbs a{display:inline-block;border:1px solid rgba(180,140,85,0.40);border-radius:4px;overflow:hidden;background:#fff;line-height:0}
.ab-item-thumbs img{width:auto;max-width:100%;height:auto;display:block;image-rendering:auto}
.ab-item-thumbs-noimg{display:inline-block;border:1px solid rgba(180,140,85,0.40);border-radius:4px;overflow:hidden;background:#fff;line-height:0}
.ab-item-text{flex:1;font-size:0.92rem;color:#3a2f1f;line-height:1.85}
.ab-item-text p{margin-bottom:0.5em}
.ab-item-note{display:block;margin-top:6px;font-size:0.80rem;color:#8a5a20}
.ab-placeholder-note{color:#8a6a4a;font-style:italic}
@media (max-width:480px){.ab-item-body{flex-direction:column;align-items:center;text-align:center}.ab-item-thumbs{flex-direction:row;flex-wrap:wrap;justify-content:center;width:auto}.ab-item-thumbs a{width:110px}}

/* ===== 目次ページ（album.htm）専用 ===== */
.ab-index-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:520px){.ab-index-list{grid-template-columns:1fr}}
.ab-index-list a{display:block;background:rgba(120,90,50,0.85);color:#fff;text-align:center;padding:14px 10px;border-radius:6px;font-weight:bold;font-size:1.0rem;border:1px solid rgba(190,150,95,0.40);transition:background 0.18s}
.ab-index-list a:hover{background:rgba(95,68,32,0.95);color:#fff;text-decoration:none}
.ab-index-list .ab-index-sub{display:block;font-size:0.72rem;font-weight:normal;color:rgba(255,240,220,0.85);margin-top:3px}

/* ===== CTA / フッター（トップページ・アウトレットページと共通仕様） ===== */
.cta-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0}
.cta-btn{display:inline-block;padding:12px 22px;border-radius:4px;font-size:0.95rem;font-weight:bold;text-decoration:none;text-align:center;transition:opacity 0.2s;min-width:160px}
.cta-btn:hover{opacity:0.85;text-decoration:none}
.cta-btn--contact{background:#e8a000;color:#000000}
.cta-btn--tel{background:#2a7a2a;color:#ffffff}

.access-block{text-align:center;margin:10px 0 18px;font-size:0.82rem;color:#5a4a30}
.access-block a{color:#8a5a20}
.access-block .reservation-note{display:block;color:#8a4a1a;margin-top:4px;font-size:0.78rem}

.site-footer{text-align:center;padding:16px 10px;border-top:1px solid rgba(150,100,40,0.35);margin-top:20px;font-size:0.78rem;color:#5a4a30}
.site-footer a{color:#8a5a20}
.site-footer a:hover{color:#6b4a1e}

.float-btns{position:fixed;bottom:20px;left:0;right:0;display:flex;flex-direction:column;align-items:flex-start;padding-left:12px;gap:8px;z-index:1000;pointer-events:none}
.float-btns>*{pointer-events:auto}
.btn-call{display:flex;align-items:center;gap:7px;background:#c8251a;color:#fff;font-size:0.82em;font-weight:bold;padding:9px 14px;border-radius:30px;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,0.6);white-space:nowrap;transition:background 0.2s}
.btn-call:hover{background:#e02d20;color:#fff;text-decoration:none}
.btn-call .icon{font-size:1.1em}
.btn-inquiry{display:flex;align-items:center;gap:7px;background:#7a5a2a;color:#fff;font-size:0.82em;font-weight:bold;padding:9px 14px;border-radius:30px;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,0.6);white-space:nowrap;border:1px solid #bb944a;transition:background 0.2s}
.btn-inquiry:hover{background:#99763a;color:#fff;text-decoration:none}
.btn-inquiry .icon{font-size:1.1em}
.btn-access{display:flex;align-items:center;gap:7px;background:#5c421a;color:#fff;font-size:0.82em;font-weight:bold;padding:9px 14px;border-radius:30px;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,0.6);white-space:nowrap;border:1px solid #98703a;transition:background 0.2s}
.btn-access:hover{background:#7a5824;color:#fff;text-decoration:none}
.btn-access .icon{font-size:1.1em}
.btn-totop{position:fixed;bottom:20px;right:12px;width:46px;height:46px;background:rgba(90,64,25,0.85);border:1px solid #aa8340;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3em;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,0.5);z-index:1000;transition:background 0.2s}
.btn-totop:hover{background:rgba(120,88,36,0.95);color:#fff;text-decoration:none}

@media screen and (max-width:600px){
  .ab-tab-nav{gap:3px}
  .ab-tab-nav a{font-size:12px;min-height:32px}
  .float-btns{padding-left:8px;gap:6px;bottom:16px}
  .btn-call,.btn-inquiry,.btn-access{font-size:0.75em;padding:8px 11px}
  .btn-totop{bottom:16px;right:8px;width:42px;height:42px;font-size:1.1em}
}