*,*::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:#1c2733;background-color:#eef2f7;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:#eef2f7}
@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.88) saturate(0.35) hue-rotate(180deg);background:#eef2f7}
#tile-overlay{position:fixed;inset:0;z-index:1;background:linear-gradient(135deg,rgba(230,238,247,0.62) 0%,rgba(222,232,244,0.54) 50%,rgba(228,236,246,0.60) 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:#1f5aa8;text-decoration:none}
a:hover{color:#153f78;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(30,55,95,0.82)}
.breadcrumb-list{list-style:none;display:flex;flex-wrap:wrap;gap:0;padding:0;color:#fff}
.breadcrumb-list li+li::before{content:"　›　";color:rgba(220,232,248,0.80)}
.breadcrumb-list a{color:#eaf2ff}

/* ===== ヘッダー ===== */
.os-header{background:rgba(25,50,90,0.92);border-bottom:2px solid rgba(70,110,165,0.50);padding:10px 12px 0}
.os-header-brand{font-size:clamp(0.7rem,2vw,0.82rem);color:rgba(238,244,255,0.92);margin-bottom:6px;line-height:1.5}
.os-header-brand a{color:rgba(255,255,255,0.85);text-decoration:none}
.os-header-brand a:hover{color:#fff}
.os-header-brand .sep{color:rgba(255,255,255,0.35);margin:0 0.3em}
.os-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}
.os-tab-nav{display:flex;gap:4px;flex-wrap:wrap;padding-top:10px}
.os-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(238,244,255,0.95);text-decoration:none;border-radius:5px 5px 0 0;border:1px solid rgba(70,110,165,0.35);background:rgba(25,50,90,0.55);transition:background 0.18s,color 0.18s}
.os-tab-nav a:hover{background:rgba(35,65,115,0.75);color:#ffffff;text-decoration:none}
.os-tab-nav a.active{background:rgba(15,32,60,0.92);color:#ffffff;border-color:rgba(100,140,195,0.45)}

.os-section{padding:20px 0 10px}
.os-section-title{font-size:clamp(1.2rem,4vw,1.55rem);font-weight:bold;color:#1f4d8a;text-align:center;padding:10px 0 8px;border-bottom:1px solid rgba(30,70,130,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}

.os-intro{background:rgba(20,45,85,0.88);border:1px solid rgba(80,120,175,0.40);border-radius:6px;padding:12px 16px;margin-bottom:14px;font-size:0.88rem;color:#ffffff;line-height:1.85}
.os-intro p{margin-bottom:0.7em}
.os-intro p:last-child{margin-bottom:0}
.os-intro strong{color:#cfe2ff}
.os-intro a{color:#ffe38a}
.os-intro a:hover{color:#ffffff}

.os-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}

.os-hr{border:none;border-top:1px solid rgba(30,70,130,0.40);margin:14px 0}
.os-hr-thick{border:none;border-top:3px solid rgba(30,70,130,0.55);margin:20px 0}

/* ===== カテゴリ入口（a.htm/b.htm/c.htm タイプ）：カテゴリ名＋サブリンク＋説明 ===== */
.os-cat-block{background:rgba(255,255,255,0.55);border:1px solid rgba(80,120,175,0.35);border-radius:8px;margin:14px 0;overflow:hidden}
.os-cat-head{background:rgba(25,50,90,0.90);color:#fff;font-weight:bold;font-size:1.05rem;padding:10px 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.os-cat-head a{color:#fff}
.os-cat-sublinks{font-size:0.78rem;font-weight:normal;color:#dce8fb}
.os-cat-sublinks a{color:#ffe38a;margin:0 2px}
.os-cat-body{padding:12px 16px;font-size:0.90rem;color:#1c2733;line-height:1.85}

/* ===== 商品グリッド（写真＋短い説明、価格なしタイプ） ===== */
.os-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
@media (max-width:560px){.os-grid{grid-template-columns:repeat(2,1fr)}}
.os-grid-item{background:rgba(255,255,255,0.6);border:1px solid rgba(80,120,175,0.30);border-radius:6px;overflow:hidden;text-align:center;padding:8px 6px 10px;transition:border-color 0.2s,transform 0.2s}
.os-grid-item:hover{border-color:rgba(60,110,190,0.60);transform:translateY(-2px)}
.os-grid-item a{display:block}
.os-grid-item img{margin:0 auto;max-height:120px;width:auto;max-width:100%}
.os-grid-caption{font-size:0.76rem;color:#1c2733;margin-top:6px;line-height:1.5}

/* ===== 別注什器 製作例ブロック（f_album系列で使用、albumページと同型） ===== */
.os-item{background:rgba(255,255,255,0.55);border:1px solid rgba(80,120,175,0.35);border-radius:8px;margin:16px 0;overflow:hidden}
.os-item-head{background:rgba(25,50,90,0.90);color:#ffffff;font-weight:bold;font-size:1.0rem;padding:9px 14px;letter-spacing:0.02em}
.os-item-body{display:flex;gap:16px;align-items:flex-start;padding:14px 16px}
.os-spec-block{padding:0 16px 14px}
.os-spec-table-wrap{overflow-x:auto;margin-bottom:12px;-webkit-overflow-scrolling:touch}
.os-spec-table-wrap:last-of-type{margin-bottom:0}
.os-item-thumbs{flex-shrink:0;width:auto;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:8px}
.os-item-thumbs a{display:inline-block;border:1px solid rgba(80,120,175,0.40);border-radius:4px;overflow:hidden;background:#fff;line-height:0}
.os-item-thumbs img{width:auto;max-width:100%;height:auto;display:block}
.os-item-thumbs-noimg{display:inline-block;border:1px solid rgba(80,120,175,0.40);border-radius:4px;overflow:hidden;background:#fff;line-height:0}
.os-item-text{flex:1;font-size:0.92rem;color:#1c2733;line-height:1.85}
.os-item-text p{margin-bottom:0.5em}
.os-item-note{display:block;margin-top:6px;font-size:0.80rem;color:#1f4d8a}
.os-placeholder-note{color:#5a6a7f;font-style:italic}
.os-item-bullets{margin:8px 0 4px;padding-left:1.1em}
.os-item-bullets li{margin-bottom:6px;line-height:1.75}
.os-spec-table{border-collapse:collapse;width:100%;min-width:520px;margin:0;font-size:0.82rem}
.os-spec-table td{border:1px solid rgba(80,120,175,0.35);padding:6px 10px;text-align:center;background:rgba(255,255,255,0.55);white-space:nowrap}
.os-spec-table tr:first-child td{background:rgba(25,50,90,0.12);font-weight:bold;white-space:normal}
.os-spec-note{font-size:0.76rem;color:#5a6a7f;margin-top:4px}
@media (max-width:480px){.os-item-body{flex-direction:column;align-items:center;text-align:center}.os-item-thumbs{flex-direction:row;flex-wrap:wrap;justify-content:center;width:auto}.os-item-thumbs a{width:110px}}

/* ===== 索引リスト（index系ページ用） ===== */
.os-index-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:520px){.os-index-list{grid-template-columns:1fr}}
.os-index-list a{display:block;background:rgba(25,50,90,0.88);color:#fff;text-align:center;padding:14px 10px;border-radius:6px;font-weight:bold;font-size:1.0rem;border:1px solid rgba(90,130,185,0.40);transition:background 0.18s}
.os-index-list a:hover{background:rgba(15,32,60,0.95);color:#fff;text-decoration:none}
.os-index-list .os-index-sub{display:block;font-size:0.72rem;font-weight:normal;color:rgba(225,236,255,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:#334156}
.access-block a{color:#1f4d8a}
.access-block .reservation-note{display:block;color:#7a3a10;margin-top:4px;font-size:0.78rem}

.site-footer{text-align:center;padding:16px 10px;border-top:1px solid rgba(30,70,130,0.35);margin-top:20px;font-size:0.78rem;color:#334156}
.site-footer a{color:#1f4d8a}
.site-footer a:hover{color:#153f78}

.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:#245186;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 #4a7cb8;transition:background 0.2s}
.btn-inquiry:hover{background:#2e63a3;color:#fff;text-decoration:none}
.btn-inquiry .icon{font-size:1.1em}
.btn-access{display:flex;align-items:center;gap:7px;background:#173458;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 #3a6199;transition:background 0.2s}
.btn-access:hover{background:#20456f;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(20,40,75,0.85);border:1px solid #4a7cb8;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(28,55,100,0.95);color:#fff;text-decoration:none}

@media screen and (max-width:600px){
  .os-tab-nav{gap:3px}
  .os-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}
}