/* テンプレート33: ワイン＋ローズ系 - エレガントな配色 */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    line-height: 2;
    color: #4a3f48;
    background: linear-gradient(180deg, #fdf2f8 0%, #fce7f3 50%, #fbcfe8 100%);
    min-height: 100vh;
}

.site-header {
    background: linear-gradient(135deg, #831843 0%, #9d174d 50%, #be185d 100%);
    padding: 50px 30px;
    text-align: center;
}

.site-title { font-size: 2.2rem; color: #fff; margin-bottom: 10px; letter-spacing: 0.1em; }

.main-content { padding: 50px 0; }
.container { max-width: 900px; margin: 0 auto; padding: 0 30px; }

.center-nav {
    background: linear-gradient(135deg, #9d174d 0%, #831843 100%);
    border-radius: 15px;
    padding: 20px 30px;
    margin-bottom: 40px;
    box-shadow: 0 8px 25px rgba(157, 23, 77, 0.2);
}

.center-nav ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.center-nav a { display: block; padding: 12px 20px; color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.9rem; border-radius: 25px; transition: all 0.3s; border: 1px solid transparent; }
.center-nav a:hover, .center-nav a.active { background: rgba(255,255,255,0.15); border-color: #f9a8d4; color: #fff; }

.content-box {
    background: linear-gradient(180deg, #ffffff 0%, #fdf2f8 100%);
    border-radius: 20px;
    padding: 55px 65px;
    box-shadow: 0 15px 50px rgba(131, 24, 67, 0.1);
    border: 2px solid #f9a8d4;
}

.content-box h1 { font-size: 1.9rem; color: #831843; margin-bottom: 30px; text-align: center; border-bottom: 2px solid #be185d; padding-bottom: 20px; }

.single-image { text-align: center; margin: 30px 0; }
.single-image img { max-width: 100%; height: auto; max-height: 350px; border-radius: 15px; box-shadow: 0 10px 35px rgba(157, 23, 77, 0.15); border: 3px solid #f472b6; }

.text-section { margin-bottom: 35px; }
.text-section h2 { font-size: 1.4rem; color: #9d174d; margin-bottom: 18px; padding-left: 18px; border-left: 4px solid #be185d; }
.text-section p { margin-bottom: 16px; color: #4a3f48; }

.site-footer {
    background: linear-gradient(135deg, #831843 0%, #500724 100%);
    text-align: center;
    padding: 40px 30px;
    color: rgba(255,255,255,0.7);
}
.site-footer p { color: rgba(255,255,255,0.7); margin: 0; }

.sitemap-list { list-style: none; padding: 0; }
.sitemap-list li { margin-bottom: 12px; padding-left: 20px; position: relative; }
.sitemap-list li::before { content: '♥'; position: absolute; left: 0; color: #be185d; font-size: 0.8rem; }
.sitemap-list a { color: #9d174d; text-decoration: none; }
.sitemap-list a:hover { color: #f472b6; }

@media (max-width: 768px) {
    .site-header { padding: 35px 20px; }
    .site-title { font-size: 1.7rem; }
    .content-box { padding: 35px 25px; }
    .center-nav a { padding: 10px 15px; font-size: 0.8rem; }
}

/* アニメーション追加 */
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.center-nav { transition: all 0.3s ease; }
.center-nav.sticky {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 900px; z-index: 1000;
    border-radius: 0 0 15px 15px; margin: 0; padding: 15px 30px;
}

.back-to-top {
    display: none; position: fixed; bottom: 30px; right: 30px;
    width: 50px; height: 50px; background: linear-gradient(135deg, #9d174d 0%, #831843 100%);
    color: #fff; border: none; border-radius: 50%; cursor: pointer;
    font-size: 1.2rem; box-shadow: 0 5px 20px rgba(157, 23, 77, 0.4);
    transition: all 0.3s; z-index: 998;
}
.back-to-top:hover { transform: translateY(-5px); }

/* アコーディオン */
.accordion { margin: 30px 0; }
.accordion-item { background: #fff; border-radius: 10px; margin-bottom: 12px; overflow: hidden; border-left: 4px solid #be185d; }
.accordion-header { padding: 18px 22px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 500; color: #831843; transition: all 0.3s; }
.accordion-header:hover { background: #fdf2f8; }
.accordion-icon { width: 18px; height: 18px; position: relative; }
.accordion-icon::before, .accordion-icon::after { content: ''; position: absolute; background: #be185d; transition: all 0.3s; }
.accordion-icon::before { width: 100%; height: 2px; top: 50%; transform: translateY(-50%); }
.accordion-icon::after { width: 2px; height: 100%; left: 50%; transform: translateX(-50%); }
.accordion-item.active .accordion-icon::after { opacity: 0; }
.accordion-content { display: none; padding: 0 22px 18px; color: #555; }