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

        body {
            font-family:"メイリオ", "Meiryo", "Hiragino Sans", "ヒラギノ角ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: #666;
            background: #1d1a2c url(../images/body_bg.png) center top repeat-x;
        }
        #header {
            margin: 0 auto;
            padding: 0;
            max-width: 950px;
            height: 440px;
            background: none;
            position: relative;
            z-index: 0;
       }
       #header h1, #header h2{
            display: none;
        }
        #header_img {
            background: url(../images/menu0.jpg) 55% 25% no-repeat;
            width: 100%;
            max-width: 800px; /* 最大幅を制限 */
            height: 415px;
            border: none;
            position: relative;
            margin: 0 auto; /* 中央配置 */
        }
        #header_img.shopinfo{
            background: url(../images/menu2.jpg) 55% 25% no-repeat;
        }
        #header_img.about{
            background: url(../images/menu3.jpg) 55% 25% no-repeat;
        }
        #header_img.ga{
            background: url(../images/menu4.jpg) 55% 25% no-repeat;
        }
        #header_img.floor{
            background: url(../images/menu1.jpg) 55% 25% no-repeat;
        }
        #header_img.access{
            background: url(../images/menu5.jpg) 55% 25% no-repeat;
        }
        #logoplace {
            width: 246px;
            height: 69px;
            position: absolute;
            top: 46px;
            left: -2px;
            background: black;
            z-index: 10;
        }
        #bg_menu {
            width: 800px;
            height: 48px;
            position: absolute;
            top: 369px;
            left: 0;
            z-index: 10;
            overflow: hidden;
            background: url(../images/bg_menu.gif) !important;
            zoom: 1;
        }
        #header ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        height: 48px;
        }
        #header ul li a {
        display: block;
        width: 126px;
        height: 48px;
        position: relative;
        cursor: pointer;
        line-height: normal;
        text-indent: -9999px;
        }
        #header ul li{z-index:11;}
        #header ul li.menu1 {
        background: url(../images/menu1_a.png) no-repeat;
        position: absolute;
        top: 369px;
        left: 16px;
       }
       #header ul li.menu1:hover {
        background: url(../images/menu1_c.gif) no-repeat;
       }
       #header ul li.menu1.selected{
        background: url(../images/menu1_b.png) no-repeat;
        }
       #header ul li.menu2 {
        background: url(../images/menu2_a.png) no-repeat;
        position: absolute;
        top: 369px;
        left: 175px;
        }
        #header ul li.menu2:hover {
        background: url(../images/menu2_c.gif) no-repeat;
        }
        #header ul li.menu2.selected{
            background: url(../images/menu2_b.png) no-repeat;
            }
        #header ul li.menu3 {
        background: url(../images/menu3_a.png) no-repeat;
        position: absolute;
        top: 369px;
        left: 335px;
        }
        #header ul li.menu3:hover {
        background: url(../images/menu3_c.gif) no-repeat;
        }
        #header ul li.menu3.selected{
            background: url(../images/menu3_b.png) no-repeat;
            }
        #header ul li.menu4 {
        background: url(../images/menu4_a.png) no-repeat;
        position: absolute;
        top: 369px;
        left: 494px;
        }
        #header ul li.menu4:hover {
        background: url(../images/menu4_c.gif) no-repeat;
        }
        #header ul li.menu4.selected {
            background: url(../images/menu4_b.png) no-repeat;
            }
        #header ul li.menu5 {
        background: url(../images/menu5_a.png) no-repeat;
        position: absolute;
        top: 369px;
        left: 653px;
        }
        #header ul li.menu5:hover {
        background: url(../images/menu5_c.gif) no-repeat;
        }
        #header ul li.menu5.selected{
            background: url(../images/menu5_b.png) no-repeat;
            }

        .btn {
            display: inline-block;
            padding: 1rem 2rem;
            background: white;
            color: #667eea;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }

        .nav-menu {
            display: none;
            list-style: none;
            gap: 2rem;
            background-color: #000;
            line-height: 300%;
        }

        .nav-menu a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s;
            font-weight: 400;
        }

        .nav-menu a:hover {
            color: #667eea;
        }

        .hamburger {
            position:absolute;
            top: 46px;
            right: 15px;
            display: none;
            flex-direction: column;
            cursor: pointer;
            gap: 5px;
            background: #000;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
            z-index:11;
        }

        .hamburger:hover {
            background: #555;
            transform: scale(1.05);
        }

        .hamburger span {
            width: 25px;
            height: 3px;
            background: white;
            transition: all 0.3s ease;
            transform-origin: center;
        }

        .hamburger.active span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }

        .hamburger.active span:nth-child(2) {
            opacity: 0;
            transform: translateX(-10px);
        }

        .hamburger.active span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }


        /* コンテンツセクション */
        .container {
            max-width: 850px;
            margin: 0 auto;
            padding: 0 0 2rem 0;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .card {
            background: white;
            padding: 2rem;
            margin:0 1rem;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            border:10px solid #000;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
            min-height: 590px;

        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }

        .card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #667eea;
        }

        .card h2 {
            margin-bottom: 1rem;
            color: #69788b;
            font-size: 36px;
            font-family: serif;
        }
            

        .card p {
            color: #666;
        }
        .navigation {
            padding: 0 0 0 30px;
            height: 40px;
            background: url(../images/page_navigation_bg.png) center top no-repeat;
            display:flex;
        }
        .navigation li {
            height: 40px;
            padding: 0 2px 0 0;
            cursor: pointer;
            list-style-type: none;
        }
        .navigation a:hover span, .navigation a.selected span {
            background: url(../images/page_navigation_span.png) left top no-repeat;
        }
        .navigation a span {
            display: block;
            height: 40px;
            padding: 0 10px;
        }
        .navigation a:hover,.navigation a.selected {
            color: #7a70a9;
            background: url(../images/page_navigation_a.png) right top no-repeat;
        }
        
        .navigation a {
            display: block;
            height: 40px;
            line-height: 40px;
            padding: 0 1px 0 0;
            font-size: 13px;
            color: #635b89;
            font-weight: bold;
            text-decoration: none;
        }
        /* フッター */
        footer {
            height: 90px;
            border-top: solid 1px #28243d;
            background: #000 url(../images/footer_bg.png) center top no-repeat;
        }
        footer p {
            overflow: hidden;
            margin: 0 auto;
            color: #363845;
        }
        footer .left {
            float: left;
            margin-left:15px;
        }
        footer .right {
            float: right;
            margin-right:15px;
        }
        footer span {
            display: block;
            height: 90px;
            line-height: 90px;
        }
        footer a {
            color: #7274a1;
            text-decoration: none;
        }
/*店舗情報用*/
#shopinfo{font-size:15px;}
#shopinfo li{
    padding-bottom:20px;
    margin-bottom:20px;
    border-bottom:solid #eff3f4 1px;
    list-style: none;
}
#shopinfo dl{display:flex;gap:20px;}
#shopinfo dd p{
    font-size:18px;
    font-weight: 600;
}
.shops{
    font-size: 13px;
    margin-bottom:30px;
}
.shop-box{
    display:flex;
    flex-direction: row;
    margin-bottom:15px;
}
.pics{
    flex-grow: 0;
    margin: 0 15px 0 0;
}
.info{
    flex-grow: 1;
}
.kana {
    background: url(../images/q.png) repeat-x;
    font-size: 13px;
    font-weight: bold;
    color: #bdbcc8;
    padding: 3px;
    padding-right: 10px;
    text-align: right;
    margin-bottom:8px;
}
.type {
    font-size: 11px;
    color: #B20026;
    padding: 0;
    line-height: 120%;
    _line-height: 130%;
}
.name {
    color: #B20026;
    font-weight: bold;
    padding: 5px;
    margin: 0;
    word-break: break-all;
    font-size: 18px;
}
.tel>span{
        display: inline-block;
        position: relative;
        cursor: default;
        color: #13131e;
        font-family: Arial;
        font-size: 1.3rem;
}
/* ベース */
a.external {
    color: inherit;                 /* 親の色を継承 */
    text-decoration: none;          /* 下線は好みで */
    position: relative;
    padding-right: 0.25em;          /* アイコン分の余白 */
    margin-left:20px;
  }
  
  /* 矢印アイコン（疑似要素） */
  a.external::after {
    content: "↗";                   /* 外部リンク矢印（U+2197） */
    display: inline-block;
    margin-left: 0.35em;
    font-size: 0.85em;
    vertical-align: baseline;
    transform: translateY(-0.05em);
    opacity: 0.85;
    transition: transform 0.15s ease, opacity 0.15s ease;
    pointer-events: none;           /* アイコンにマウスイベントが行かないように */
  }
  
  /* ホバー時の挙動 */
  a.external:hover,
  a.external:hover::after,
  a.external:focus::after {
    transform: translateY(-0.15em) scale(1.05);
    opacity: 1;
    text-decoration: underline;     /* 任意でホバー下線 */
  }
  
/*toppage用*/
#toppage.panel>div{
    background:url(../images/_img/parts/top_bg.png) no-repeat;
    background-size: cover;
    max-width: 100%;
    min-height: 440px;
    padding-top:130px;
}
#toppage .msg{width:400px;padding: 0 0 1em 0;line-height: 1.5em;color: #3f3e4c;}
/*ギャラリー用*/
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    padding: 10px;
  }
  .gallery img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s;
  }
  .gallery img:hover {
    transform: scale(1.05);
  }
  /*access用*/
  .access-box{
    display:flex;
    gap:20px;
  }
  .access-box img:first-child{
    max-width: 100%;
    height: auto;
  }
  /* モーダル */
  .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
  }
  .modal.open {
    display: flex;
  }
  .modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
  }
  .modal-content img {
max-width: 90vw;   /* 画面幅の90%まで */
max-height: 90vh;  /* 画面高さ90%まで */
object-fit: contain; /* はみ出さず収まる */
}

  .close, .prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.8);
    border: none;
    font-size: 24px;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 50%;
    width:36px;
    height:36px;
    line-height: 18px;
    text-align: center;
    z-index:99;
  }
  .close {
    top: 10px;
    right: 10px;
    transform: none;
    font-size: 20px;
  }
  .prev { left: 50px; }
  .next { right: 50px; }
  @media (max-width: 600px) {
    .prev { left: 10px; }
    .next { right: 10px; }
  }

        /* レスポンシブ対応 */

        @media (max-width: 768px) {
            #toppage.panel>div{
                background-size: 500px;
                max-width:100%;
            }
            #toppage .msg{
                width:100%;
            }
            .access-box,.shop-box{  flex-wrap: wrap;}
            .pics{width:100%;text-align: center;}
            #header_img {
                background-size: cover;
                max-width: 100%;
                background-position: center center; /* モバイルでは中央に */
            }
            #bg_menu{display: none;}
            #header ul {
                display:none;
            }
            .navigation a span {
                padding: 0 10px;
            }
            .nav-menu {
                display: block;
                position: fixed;
                left: -100%;
                top: 120px;
                flex-direction: column;
                width: 100%;
                text-align: center;
                transition: 0.3s;
                padding: 2rem 0;
                gap: 1rem;
                box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            }

            .nav-menu.active {
                left: 0;
            }

            .hamburger {
                display: flex;
            }

            .hero h1 {
                font-size: 2rem;
            }

            .hero p {
                font-size: 1rem;
            }

            .section-title {
                font-size: 2rem;
            }

            .grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {

        }