/* ========================================
   top_style_stg.css  - fluid responsive版
======================================== */

/* ----- ベース上書き ----- */
body {
    background-image: none;
    background-color: #f7f4f0;
    color: #333;
    font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}
a { color: #b05c2a; text-decoration: none; }
a:hover { text-decoration: underline; color: #d4773a; }

/* 全画像のはみ出し防止 */
img { max-width: 100%; height: auto; }

/* ----- ページ全体ラッパー ----- */
.page-wrapper {
    max-width: 760px;
    margin: 0 auto;
    padding: 12px 8px 0;
    box-sizing: border-box;
}

/* ----- ヘッダー ----- */
.site-header {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #fff;
    border-bottom: 3px solid #c8733a;
    padding: 10px 12px;
    box-sizing: border-box;
    margin-bottom: 12px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    gap: 12px;
}
.header-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.header-logo h1 { margin: 0; padding: 0; line-height: 0; }
.header-logo img { width: 170px; height: auto; display: block; }
.header-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}
.header-banner { overflow: hidden; }
.header-banner img { max-width: 100%; height: auto; display: block; }
.banner-list-link { font-size: 11px; color: #888; }
.header-meta {
    color: #a04020;
    font-size: 12px;
    margin-top: 4px;
}


/* ----- 2カラムレイアウト ----- */
.site-layout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
}
.site-main {
    flex: 1;
    min-width: 0; /* flexではみ出し防止に必須 */
}
.site-sidebar {
    width: 20%;
    min-width: 140px;
    max-width: 160px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.site-sidebar img {
    max-width: 100%;
    height: auto;
    display: block;
}
.site-main section { margin-bottom: 16px; }

/* ----- セクション見出し ----- */
.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid #c8733a;
    padding: 4px 8px;
    margin-bottom: 6px;
    background: #fdf6f0;
    font-size: 13px;
    font-weight: bold;
    color: #5a3010;
}
.section-heading-sub { font-size: 11px; font-weight: normal; color: #888; }

/* ----- スライドショー ----- */
.main_imgBox {
    height: 250px;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    margin-bottom: 10px;
}
.main_img {
    z-index: 10;
    opacity: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    inset: 0;
    animation: anime 36s 0s infinite;
}
.main_img:nth-of-type(2) { animation-delay:  6s; }
.main_img:nth-of-type(3) { animation-delay: 12s; }
.main_img:nth-of-type(4) { animation-delay: 18s; }
.main_img:nth-of-type(5) { animation-delay: 24s; }
.main_img:nth-of-type(6) { animation-delay: 30s; }
@keyframes anime {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    17%  { opacity: 1; }
    25%  { opacity: 0; transform: scale(1.05); z-index: 9; }
    100% { opacity: 0; }
}

/* ----- 特集バナー ----- */
.feature-banners { display: flex; gap: 6px; }
.feature-banner-item {
    display: block;
    flex: 1;
    line-height: 0;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #ddd;
    transition: opacity 0.2s;
}
.feature-banner-item img { width: 100%; height: auto; }
.feature-banner-item:hover { opacity: 0.85; }

/* ----- ピックアップ ----- */
.pickup-row { display: flex; gap: 8px; margin-bottom: 6px; }
.pickup-item {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid #e8d5c0;
    border-radius: 4px;
    padding: 8px;
    box-sizing: border-box;
}
.pickup-inner { display: block; margin-bottom: 6px; }
.pickup-inner img { width: 100%; height: auto; border-radius: 2px; display: block; }
.pickup-title { display: block; font-size: 13px; font-weight: bold; color: #b05c2a; line-height: 1.4; margin-top: 6px; }
.pickup-item p { margin: 4px 0 0; font-size: 11px; color: #666; line-height: 1.4; }

/* ----- お知らせ ----- */
.leftside-content-box-title {
    background: linear-gradient(to right, #c8733a, #d4883a);
    padding: 6px 10px;
    border-radius: 4px 4px 0 0;
    width: 100%;
    box-sizing: border-box;
}
.leftside-content-box-title h3 { font-size: 13px; margin: 0; font-weight: bold; }
.leftside-content-box-title h3 a { color: #fff; }
.leftside-content-box-title h3 a:hover { opacity: 0.85; text-decoration: none; }
.leftside-content-box {
    width: 100%;
    background: #fff;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid #e8d5c0;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-sizing: border-box;
}
.leftside-content-box ul { margin: 0; padding: 0; list-style: none; }
.leftside-content-box ul li {
    padding: 6px 0;
    border-bottom: 1px dotted #e0d0c0;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
}
.leftside-content-box ul li:last-child { border-bottom: none; }
.leftside-content-box-list { text-align: right; font-size: 12px; margin-top: 6px; }
.yadooshirase-date  { font-size: 10px; color: #999; margin-left: 4px; }
.yadooshirase-name  { font-size: 12px; color: #555; font-weight: bold; }
.yadooshirase-title { font-size: 12px; color: #333; padding-left: 4px; }

/* ----- テキストバナー ----- */
.box_top_textbanner {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 6px 10px;
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
    overflow: hidden;
    word-break: break-all;
    width: 100%;
    box-sizing: border-box;
}

/* ----- 検索 ----- */
.search-header {
    background: url(../images/index_search1.gif) center/cover no-repeat;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    color: #fff;
    font-size: 13px;
    border-radius: 4px 4px 0 0;
    width: 100%;
    box-sizing: border-box;
}
#box_default {
    background: #fff;
    border: 1px solid #e8d5c0;
    border-top: none;
    padding: 10px;
    border-radius: 0 0 4px 4px;
    margin-bottom: 8px;
}
.search-forms { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
#text_default { font-size: 12px; color: #555; line-height: 1.8; }
.gs-text { display: inline-block; margin: 1px 3px; color: #b05c2a; font-size: 12px; }

/* ----- こだわりで探す ----- */
.kodawari-grid {
    background: #fff;
    border: 1px solid #e8d5c0;
    border-radius: 0 0 4px 4px;
}
.kodawari-row { display: flex; border-bottom: 1px solid #f0e8e0; }
.kodawari-row:last-child { border-bottom: none; }
.kodawari-item {
    width: 50%;
    padding: 8px 10px;
    font-size: 13px;
    box-sizing: border-box;
    border-right: 1px solid #f0e8e0;
}
.kodawari-item:last-child { border-right: none; }
.kodawari-item strong.t15 { font-size: 13px; color: #333; }
.kodawari-item .t11 { font-size: 11px; }

/* ----- 歴史・その他 ----- */
.ThinOrangeLine { border: 1px solid #e8d5c0; background: #fff; }
.section-history .ThinOrangeLine { border-radius: 0 0 4px 4px; }

/* ----- サイドバー ----- */
.sidebar-box-header {
    background: linear-gradient(to right, #c8733a, #d4883a);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 8px;
    border-radius: 4px 4px 0 0;
    text-align: center;
    letter-spacing: 1px;
    width: 100%;
    box-sizing: border-box;
}
.RightNaviBox {
    background: #fff;
    border: 1px solid #e8d5c0;
    border-top: none;
    border-radius: 0 0 4px 4px;
    margin: 0 0 10px 0;
    padding: 6px;
    text-align: left;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
}
.RightNaviBox p { text-align: center; }
.RightNaviBox img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.RightNaviBox2 { margin-bottom: 8px; overflow: hidden; }
.sidebar-list-link { text-align: right; font-size: 10px; margin-top: 4px; }
.sidebar-list-link a { color: #888; }
.side_topics_images { text-align: left; }
.side_topics_images img { max-width: 100%; height: auto; display: block; }
.X130 { overflow: hidden; }
.X130 img { max-width: 100%; height: auto; display: block; }

/* ----- 関連サイト ----- */
.related-sites {
    background: #f0ebe4;
    border-top: 2px solid #c8733a;
    padding: 16px 20px;
    margin-top: 24px;
    border-radius: 0 0 4px 4px;
}
.related-sites h4 { font-size: 14px; color: #5a3010; margin: 0 0 8px; }
.related-sites ul { list-style: none; margin: 0; padding: 0; }
.related-sites a { color: #b05c2a; text-decoration: underline; }

/* ----- フッター ----- */
.site-footer { text-align: center; padding: 12px 0; font-size: 12px; color: #999; }

/* ----- 既存クラス互換 ----- */
.Red    { color: #cc3300; }
.Pink   { color: #ec008c; }
.Orange { color: #c8733a; }
.Orange2{ color: #b04020; }
.Gray   { color: #666; }
.Gray2  { color: #444; }
.Bold   { font-weight: bold; }
.t10 { font-size: 10px; }
.t11 { font-size: 11px; line-height: 1.5; }
.t12 { font-size: 12px; line-height: 1.5; }
.t13 { font-size: 13px; line-height: 1.5; }
.t14 { font-size: 14px; }
.t15 { font-size: 14px; }
.box05 {
    width: 100%;
    font-size: 12px;
    border: solid 1px #ff9900;
    background-color: #fff;
    padding: 1px;
    box-sizing: border-box;
}

/* ========================================
   レスポンシブ
======================================== */

/* タブレット以下: サイドバーを下へ */
@media (max-width: 680px) {
    .site-layout { flex-direction: column; }
    .site-sidebar {
        width: 100%;
        min-width: unset;
        max-width: unset;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .site-sidebar > div { flex: 1; min-width: 140px; }
    .search-header { justify-content: center; padding-right: 0; }
}

/* スマホ */
@media (max-width: 480px) {
    .site-header { flex-direction: column; gap: 6px; }
    .header-right { text-align: left; width: 100%; }
    .header-banner { text-align: center; overflow: hidden; }
    .header-logo img { width: 130px; }
    .header-meta { font-size: 11px; }
    .main_imgBox  { height: 180px; }
    .feature-banners { flex-direction: column; }
    .pickup-row  { flex-direction: column; }
    .pickup-inner img { width: 30%; }
    .kodawari-row { flex-direction: column; }
    .kodawari-item { width: 100%; border-right: none; border-bottom: 1px solid #f0e8e0; }
    .kodawari-item:last-child { border-bottom: none; }
    .search-forms { flex-direction: column; }
    .section-heading { flex-direction: column; align-items: flex-start; gap: 2px; }
}