@charset "utf-8";
/* アトリエリブル モダン・シェア・スタイル (統合版)
   - import.css で読み込んでいたリセット設定と文字設定をここに統合しました。
   - 古い MacIE 用のハック等は全て削除し、現代のブラウザに最適化しています。
   - Dreamweaverでの文字化け対策として @charset を最上部に配置しています。
*/

/* 1. Google Fonts 導入 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=RocknRoll+One&display=swap');

/* 2. 基本リセット設定 (旧 reset.css の役割) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #5A5959;
    --accent-color: #FFCC33;
    --bg-white: #ffffff;
    --text-main: #333333;
    --font-base: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}

body {
    font-family: var(--font-base);
    color: var(--text-main);
    line-height: 1.8;
    background-color: var(--bg-white);
    -webkit-font-smoothing: antialiased; /* 文字を滑らかにする設定 */
}

/* 3. 共通レイアウト */
div#wrapper {
    margin: 0 auto;
    width: 100%;
    overflow-x: hidden;
}

/* -------------------------------------
   clearfix（古いfloatレイアウトの崩れ防止）
------------------------------------- */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* ヘッダーデザインの現代化 */
div#header {
    width: 100%;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
}

div#header h1 img {
    max-height: 50px;
    width: auto;
}

/* PC用ナビゲーション */
ul#gNavi {
    display: flex;
    list-style: none;
    gap: 10px;
}

ul#gNavi li a {
    text-decoration: none;
    font-weight: bold;
    color: var(--text-main);
    padding: 10px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 15px;
}

ul#gNavi li a[href*="reservation"] {
    background-color: var(--accent-color);
    border: 1px solid #e6b800;
}

ul#gNavi li a:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}

/* -------------------------------------
   メインコンテンツエリア（中段の崩れ対策）
------------------------------------- */
#mainContents {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

/* クラス紹介（topicsBox）が横に3つ並ぶように強制する */
#mainContents > .clearfix {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px; /* ボックス間の隙間 */
}

/* 3つのクラス紹介ボックスの調整 */
div#mainContents div.topicsBox {
    float: none !important; /* 古いfloatを無効化 */
    width: calc(33.33% - 14px) !important; /* 隙間を考慮した幅 */
    margin: 0 !important;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: transform 0.2s;
}

div#mainContents div.topicsBox:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 画像がボックスからはみ出さないように */
div#mainContents div.topicsBox img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 4px;
}

/* -------------------------------------
   二重表示・レスポンシブ制御
   (index.htmlの class="disp-pc" と "disp-sp" を制御)
------------------------------------- */
/* PC表示時：スマホ専用を隠す */
.disp-sp {
    display: none !important;
}

/* PC表示はデフォルトで見せる */
.disp-pc {
    display: block;
}

/* -------------------------------------
   SNSセクション・コンテンツ下部の修正
------------------------------------- */
.top-info {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* 高さを揃える */
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee; /* セクションの区切り線を整理 */
    clear: both;
}

.x-content, .calender-content, .insta-content {
    width: 32%;
    min-width: 0;
    /* 各コンテンツ内の余計な境界線をリセット */
    border: none !important;
}

/* X(Twitter) のリンクボックス調整 */
.x-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-main);
    transition: background 0.3s;
}

.x-link:hover {
    background-color: #f9f9f9;
}

/* カレンダー（Google Calendar等）のコンテナ */
.calender-content iframe {
    width: 100% !important;
    border: 1px solid #eee !important;
    border-radius: 8px;
}

/* Instagramのボックスとグレーの線を修正 */
.insta-content {
    display: flex;
    justify-content: center;
}

.insta-content blockquote.instagram-media {
    margin: 0 auto !important;
    /* Instagram側が付与するスタイルを強制上書き */
    border: 1px solid #eee !important; 
    border-radius: 8px !important;
    box-shadow: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* 全てのiframeの最大幅を制限 */
iframe {
    max-width: 100% !important;
}

/* 4. フッター */
div#footer {
    clear: both;
    margin-top: 60px;
}

div#footer p#copyright {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    letter-spacing: 0.1em;
    background-color: #fcfcfc;
    border-top: 1px solid #eee;
}

/* スマホ表示対応 (1150px以下) */
@media screen and (max-width: 1150px) {
    div#header {
        padding: 10px 15px;
    }
    ul#gNavi {
        display: none;
    }

    /* スマホ表示時：PC用を隠して、スマホ用を出す */
    .disp-pc {
        display: none !important;
    }
    .disp-sp {
        display: block !important;
        margin: 0 auto 10px auto;
    }

    /* スマホではクラス紹介も1列にする */
    div#mainContents div.topicsBox {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .top-info {
        flex-direction: column;
        align-items: center;
        border-top: none;
    }
    
    .x-content, .calender-content, .insta-content {
        width: 100%;
        margin-bottom: 30px;
        padding-top: 20px;
        border-top: 1px solid #eee !important;
    }

    .insta-content blockquote.instagram-media {
        min-width: 326px !important; /* Instagramの最小幅を確保 */
    }
}