@charset "Shift_JIS";

/* ==========================================
   1. 共通スタイル (全ページ共通)
   ========================================== */
body { margin: 0; padding: 0; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; background-color: #fcfaf2; color: #333333; line-height: 1.8; font-size: 18px; }
.serif { font-family: "Times New Roman", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif; }

/* header の padding の下側（3つ目の数値）を「0」に絞り込みます */
header { 
    background-color: #fdfbf5; 
    border-bottom: 3px solid #8e2323; 
    padding: 20px 20px 0 20px; /* ★上:20px, 左右:20px, 下:0 に変更 */
    text-align: center; 
    position: -webkit-sticky; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}

.site-subtitle { margin: 0 0 10px 0; font-size: 14px; color: #666666; }

/* 【修正】マイナスに引っ張りすぎていたのをやめ、少しだけ下に隙間（10px）を作ります */
.header-logo { 
    margin: 0 0 10px 0; /* ★「-5px」から「10px」に変更 */
    padding: 0; 
}

/* 【修正】めり込みを防ぐため、画像の配置基準を標準に戻します */
.header-logo img { 
    max-width: 100%; 
    width: 450px;    
    height: auto; 
    display: inline-block;
    vertical-align: middle; /* ★「bottom」から「middle」に戻してめり込みを解消 */
    filter: drop-shadow(2px 5px 6px rgba(0,0,0,0.2)); 
}
.history-text { margin: 10px 0 0 0; font-size: 16px; font-weight: bold; color: #1a2a3a; }

nav { background-color: #1a2a3a; padding: 0; }

/* nav ul に「align-items: center;」を1行追加して、縦方向の中央揃えを強制します */
nav ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    display: -webkit-flex; 
    justify-content: center; 
    align-items: center;    /* ★これを追加！ */
    flex-wrap: wrap; 
}

nav li { margin: 0; }

/* 崩れ防止のお守り（box-sizing）を1行追加します */
nav a { 
    display: block; 
    padding: 15px 25px; 
    color: #ffffff; 
    text-decoration: none; 
    font-size: 16px; 
    font-weight: bold; 
    box-sizing: border-box; /* ★これを追加！ */
}

nav a.active { background-color: #8e2323; }
.container { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
section { background-color: #ffffff; padding: 40px; margin-bottom: 40px; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.02); border-left: 5px solid #8e2323; }
h2 { margin-top: 0; color: #1a2a3a; border-bottom: 2px solid #8e2323; padding-bottom: 10px; font-size: 26px; }
h3 { margin-top: 0; font-size: 24px; color: #1a2a3a; }

footer { background-color: #1a2a3a; color: #ffffff; padding: 40px 20px; text-align: center; font-size: 16px; }
.footer-info { margin-bottom: 20px; line-height: 2; }
.copyright { font-size: 14px; color: #aaaaaa; border-top: 1px solid #2c3e50; padding-top: 20px; margin-top: 20px; }

/* ==========================================
   2. 各ページ固有のレイアウト
   ========================================== */
/* トップページ用 */
.intro-box { display: flex; display: -webkit-flex; align-items: center; gap: 30px; }
.intro-img-dummy { background-color: #eee; width: 250px; height: 250px; display: flex; align-items: center; justify-content: center; color: #999; flex-shrink: 0; border: 1px solid #ddd; }

/* アクセスページ用 */
.info-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.info-table th, .info-table td { padding: 15px; border-bottom: 1px solid #e0e0e0; text-align: left; }
.info-table th { background-color: #f7f5ed; color: #1a2a3a; width: 30%; }
.tel-btn-container { text-align: center; margin: 40px 0; }
.tel-button { display: inline-block; background-color: #cc3333; color: white; padding: 20px 40px; font-size: 24px; font-weight: bold; text-decoration: none; border-radius: 50px; box-shadow: 0 4px 15px rgba(204,51,51,0.4); }
.map-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    background-color: #eee; 
    border: 1px solid #ccc; 
    /* 以下を追加して、中のiframeを中央に寄せます */
    display: flex;
    justify-content: center;
}
/* 中のGoogleマップ本体を、外枠（.map-container）のサイズいっぱいに引き伸ばす */
.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}
/* 結納・お祝い・筆耕ページ用 */
.product-box, .hikkou-box { display: flex; display: -webkit-flex; align-items: center; gap: 30px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px dashed #cccccc; }
.product-box:last-child, .hikkou-box:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.product-img, .hikkou-img { width: 300px; height: 250px; background-color: #eee; display: flex; align-items: center; justify-content: center; color: #999; flex-shrink: 0; border: 1px solid #ddd; }
.product-info h3, .hikkou-info h3 { color: #8e2323; }
.product-info .price { font-size: 22px; font-weight: bold; color: #1a1a1a; margin: 15px 0; }

.item-row { 
    display: flex; 
    display: -webkit-flex; 
    align-items: center; /* ← 「上下中央揃え」に変更しました！ */
    gap: 40px; 
    margin-bottom: 40px; 
    padding-bottom: 40px; 
    border-bottom: 1px dashed #cccccc; 
}
/* 最後の項目だけは下の区切り線を消す設定 */
.item-row:last-child { 
    margin-bottom: 0; 
    padding-bottom: 0; 
    border-bottom: none; 
}
.item-img { 
    width: 250px; /* 2枚入るため、元の200pxから少しだけ広げて見やすくします */
    flex-shrink: 0; 
    display: flex; 
    flex-direction: column; /* 画像を「縦」に並べる魔法です */
    gap: 15px; /* 画像と画像の間に15pxの隙間を作ります */
}
.item-img img { 
    width: 100%; 
    height: auto; 
    border-radius: 4px; 
}
.item-text { flex-grow: 1; }
.item-text ul { padding-left: 20px; margin: 10px 0; }

/* 箱自体の設定（さらに内側上下の余白を「10px」まで絞り込みます） */
.support-box, .manner-box, .other-services { 
    background-color: #f7f5ed; 
    padding: 10px 20px; /* 上下10px、左右20pxに極小化 */
    border-radius: 4px; 
    margin-top: 20px; 
    margin-bottom: 40px; 
    line-height: 1.4; /* さらに少し行間をタイトに */
}

/* 箱の中のタイトル（h3, h4）自体の余白を完全にゼロクリアします */
.support-box h3, .manner-box h4, .other-services h3 {
    margin-top: 0 !important;    /* 上の余白を強制的にゼロに */
    margin-bottom: 4px !important; /* 本文との隙間も最小限に */
}

/* ついでに本文（p）の上下余白もゼロにして完全に制御します */
.support-box p, .manner-box p, .other-services p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ==========================================
   3. スマホ対応 (レスポンシブ)
   ========================================== */
@media (max-width: 600px) {
    body { font-size: 16px; }
    nav ul { flex-direction: column; }
    nav a { text-align: center; padding: 12px; border-bottom: 1px solid #2c3e50; }
    section { padding: 20px; }
    
    .intro-box, .product-box, .hikkou-box, .item-row { flex-direction: column; text-align: left; }
    .intro-img-dummy, .product-img, .hikkou-img, .item-img { width: 100%; height: auto; aspect-ratio: 4/3; }
    
    .info-table th, .info-table td { display: block; width: 100%; box-sizing: border-box; }
    .info-table th { background-color: #1a2a3a; color: #fff; }
    .tel-button { width: 100%; box-sizing: border-box; font-size: 20px; padding: 15px; }
    .support-box, .manner-box, .other-services { padding: 20px; }
}