/*
Theme Name: aoi-theme
Author: Your Name
Version: 1.0
*/

/* ==========================================================================
   CONTENTS (目次)
==========================================================================
   01. GLOBAL RESET & BASE (全体のリセットと基本設定)
   02. SHARED LAYOUT (1500px幅・余白の共通設定)
   03. COMMON COMPONENTS (ボタン・アニメーションなどの共通パーツ)
   04. HEADER SECTION 
   05. HERO SECTION 
   06. MENU SECTION (お品書き)
   07. ABOUT SECTION (こだわり・店舗紹介)
   08. BANNER SECTION (固定背景バナー)
   09. INSTAGRAM SECTION
   10. NEWS SECTION
   11. INFORMATION SECTION (地図・アクセス情報)
   12. FOOTER SECTION
   13. MOBILE STYLES (レスポンシブ：768px以下の一括管理)
========================================================================== */

/* 
==========================================================================
   01. Global Reset & BASE
========================================================================== */

/* 1. ヘッダー自体の線を消す */
header {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. ページ全体の「要素間の隙間」をリセット */
.wp-site-blocks {
    gap: 0 !important;
}

/* 3. カスタムページの最初の要素の上余白を消す */
main, 
.entry-content,
section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 
==========================================================================
   02. SHARED LAYOUT
========================================================================== */

.limited-width{
    padding:0 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 
==========================================================================
   03. COMMON COMPONENTS
========================================================================== */

/* 中の文字（h2）の設定 */
.header-cover h2 {
    font-size: 55px; /* 文字サイズ60px */
    margin: 0; /* 余計な余白をリセット */
    line-height: 1; /* 行間の調整 */
    color: #D3381C;
    font-weight: bold;
}

html {
    scroll-behavior: smooth;
}

.container{
    margin: 0 auto;
    width: 100%;
}

.section-padding-adjustment{
    padding: 70px 0px;
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 40px;
}

.wrapper-padding-adjustment{
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 30px;
}

body {
    font-family: "Sawarabi Mincho", serif !important;
}

h2{
    margin:0px;
    padding:0px;
    font-size:60px;
}

.limited-width h2 {
    transition: color 1.5s ease, opacity 1.5s ease, transform 1.5s ease;
    display: inline-block; /* transformを効かせるために必要 */
        transition: 
        color 1.5s ease, 
        text-shadow 1.5s ease, 
        transform 1.5s ease;
    
    /* 初期状態の影を透明に設定（これがじんわりの秘訣です） */
    text-shadow: 0 0 0 rgba(0,0,0,0);
}

.limited-width h2:hover {
    font-weight: 900;
    color: #000000; /* どっしりとした黒へ */
        /* ぼかし0の影を4方向に0.5px出すことで、1.5秒かけてゆっくり太らせる */
    text-shadow: 
        0.5px 0 0 #000, 
        -0.5px 0 0 #000, 
        0 0.5px 0 #000, 
        0 -0.5px 0 #000;
}

.limited-width p {
    transition: color 1.5s ease, opacity 1.5s ease, transform 1.5s ease;
    display: inline-block; /* transformを効かせるために必要 */
    text-shadow: 0 0 0 rgba(0,0,0,0);
}

.limited-width p:hover {
    color: #000000; /* どっしりとした黒へ */
    font-weight: 850;
}

.button-text-cover {
    display: inline-block; /* 中身のサイズに合わせる */
    background-color: #FFFFFF; /* 背景は白 */
    border: 3px solid #000000; /* 3pxの黒い縁 */
    padding: 10px 30px; /* 上下10px、左右30pxのゆとり */
    text-align: center;
    cursor: pointer;
}

/* pタグ：文字の設定とじんわりアニメーション */
.button-text-cover p {
    margin: 0;
    color: #333333;
    font-size: 17px;
    display: inline-block;
    
    /* 1.5秒かけて全てを同期させる */
    transition: 
        color 1.5s ease, 
        text-shadow 1.5s ease, 
        transform 1.5s ease;
    
    /* 初期状態の影を透明に設定（これがじんわりの秘訣です） */
    text-shadow: 0 0 0 rgba(0,0,0,0);
}

/* ホバー時の設定 */
.button-text-cover:hover p {
    color: #000000;
    
    /* ぼかし0の影を4方向に0.5px出すことで、1.5秒かけてゆっくり太らせる */
    text-shadow: 
        0.5px 0 0 #000, 
        -0.5px 0 0 #000, 
        0 0.5px 0 #000, 
        0 -0.5px 0 #000;
        
    /* わずかに(2%)拡大して、太くなった質感を強調 */
    transform: scale(1.02);
}

/* 
==========================================================================
   04. Header Section（固定ヘッダー）
========================================================================== */

.header-section{
    padding: 0px 50px;
    background-color: #EBE0D0;
    border-bottom: 3px solid #000000 !important;
    position: sticky;      /* スティッキー固定を有効にする */
    top: 0;               /* 画面の一番上に固定する */
    z-index: 9999;
}

.header-section a, .header-section li {
    color: #D3381C;
    font-weight: bold;
    -webkit-text-stroke: 0.5px #D3381C;
    transition: 
        color 1.5s ease, 
        text-shadow 1.5s ease, 
        transform 1.5s ease;
    
    /* 初期状態の影を透明に設定（これがじんわりの秘訣です） */
    text-shadow: 0 0 0 rgba(0,0,0,0);
}

.header-section a:hover, .header-section li:hover{
    color: #000;
    -webkit-text-stroke: 0.5px #000;
    text-shadow: 
        0.5px 0 0 #000, 
        -0.5px 0 0 #000, 
        0 0.5px 0 #000, 
        0 -0.5px 0 #000;
        
    /* わずかに(2%)拡大して、太くなった質感を強調 */
    transform: scale(1.02);
}
.separator:hover{
    color: #D3381C;
    font-weight: bold;
    -webkit-text-stroke: 0.5px #D3381C;
}


header h1{
    margin:10px 0px;
}

header a {
    text-decoration: none;
    list-style: none;
}

header li{
    list-style: none;
}

header ul {
    display: flex;      /* これで li が横一列に並びます */
    padding: 0;         /* 左側の余計な余白をリセット */
    margin: 0;          /* 上下の余計な余白をリセット */
    gap: 40px;          /* ★重要：Figmaで設定した「均等な間隔」の数値 */
    align-items: center; /* 縦方向のズレをなくし、中央で揃える */
}

.header-container{
    display: flex;
    flex-direction: row;
}

.logo-wrapper{
    flex: 1;
    justify-content: flex-start;
    display: flex
}

.nav-wrapper{
    flex: 0 0 auto;
    display: flex
}
.language-wrapper{
    flex: 1;                  
    justify-content: flex-end;
    display: flex
}

.language-wrapper ul{
    gap:0px;
}

/* --- PC時の基本スタイル（1500px幅ルール） --- */
.header-container {
    /* max-width: 1500px; */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-trigger {
    display: none; /* PCでは隠す */
}


/* 
==========================================================================
   05.Hero Section
========================================================================== */

.hero-section {
    position: relative;
    height: 550px !important; 
    width:100vw;
    max-width: 100% !important;
    margin: 0;
    border-bottom: 3px solid #000000;
    background-color: #F9F7F2;
    overflow: hidden;
}

.hero-section h1{
    font-size: 70px;
}

.css-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide-item {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 550px; 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
    opacity: 0; 
    animation: fade-animation 15s infinite;
}

/* 文字の配置 */
.slide-content {
    display: flex;
    width: 100%;
    max-width: 1500px;
    padding: 60px;
    justify-content: center;
    align-items: center;
    z-index: 10;
    margin: 0 auto;
}

.hero-catchphrase {
    color: #FFFFFF;
    font-size: 3rem;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    line-height: 1.4;
    margin: 0;
    animation-name: catchphrase-fade;
    animation-duration: 7s;
}

@keyframes catchphrase-fade {
0% {
opacity: 0; 
}
100% {
opacity: 1;
}
}

.slide1 { animation-delay: 0s; }
.slide2 { animation-delay: 5s; }
.slide3 { animation-delay: 10s; }

@keyframes fade-animation {
0% { opacity: 0; z-index: 1; }
10% { opacity: 1; z-index: 2; }   
33% { opacity: 1; z-index: 2; }  
43% { opacity: 0; z-index: 1; }  
100% { opacity: 0; }
}

/* 
==========================================================================
   Menu Section
========================================================================== */
.menu-section{
    border-bottom: 3px solid #000000;
    background-color: #f9f7f2;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23ebe0d0' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.menu-items-wrapper {
    display: flex;  
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    gap:20px;
    box-sizing: border-box;
}

.menu-items-wrapper .block-item {
    flex: 1;
    min-width: 0;
    border: 3px solid #000;
}

.menu-text-cover {
    background-color: #FFFFFF;
    border-bottom: 3px solid #000; 
    padding: 15px 20px; 
    text-align: center;
}

.menu-text-cover p {
    margin: 0;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.card img{
   width:100%;
   height: auto;
   display:block;
   transition: transform 0.8s ease;
}

.card .image-container {
    width: 100%;
    overflow: hidden; 
    display: block;
}

.card:hover .image-container img {
    transform: scale(1.1); /* 1.1倍に拡大（お好みで1.2等に調整） */
}

/* 
==========================================================================
  07. About Section
========================================================================== */

.about-section{
    border-bottom: 3px solid #000000;
    background-color: #EBE0D0;

}

.restaurant-container, .feature-container {
    width:100%;
    height:400px;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-left: 3px solid #000;
    border-right: 3px solid #000;
    box-sizing: border-box;
}

.feature-container {
    border-top: 3px solid #000;
}

.restaurant-text-wrapper, .restaurant-image-wrapper,.feature-text-wrapper,.feature-image-wrapper{
    height: 100%; 
    width: 50%;    
    flex-basis: 50%;
    overflow: hidden;
    box-sizing: border-box;
    overflow: hidden;
}

.feature-text-wrapper, .restaurant-text-wrapper{
    padding:50px 35px;
    background-color: #ebe0d0;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='20' viewBox='0 0 24 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 18c0-1.105.887-2 1.998-2 1.104 0 2-.895 2.002-1.994V14v6h-4v-2zM0 13.998C0 12.895.888 12 2 12c1.105 0 2 .888 2 2 0 1.105.888 2 2 2 1.105 0 2 .888 2 2v2H0v-6.002zm16 4.004A1.994 1.994 0 0 1 14 20c-1.105 0-2-.887-2-1.998v-4.004A1.994 1.994 0 0 0 10 12c-1.105 0-2-.888-2-2 0-1.105-.888-2-2-2-1.105 0-2-.887-2-1.998V1.998A1.994 1.994 0 0 0 2 0a2 2 0 0 0-2 2V0h8v2c0 1.105.888 2 2 2 1.105 0 2 .888 2 2 0 1.105.888 2 2 2 1.105 0 2-.888 2-2 0-1.105.888-2 2-2 1.105 0 2-.888 2-2V0h4v6.002A1.994 1.994 0 0 1 22 8c-1.105 0-2 .888-2 2 0 1.105-.888 2-2 2-1.105 0-2 .887-2 1.998v4.004z' fill='%23edd3ae' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.restaurant-text-wrapper, .feature-image-wrapper {
    border-right: 3px solid #000;
}

.restaurant-image-wrapper img, 
.feature-image-wrapper img {
    display: block;
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    /* 横は中央(center)、縦は上から70%の位置を基準にする */
    /* これで「中央よりは下、でも一番下ではない」位置が見えます */
    object-position: center 70%; 
}

/* 
==========================================================================
   08. Banner Section
========================================================================== */
.banner-section {
    /* 全幅指定 */
    width: 100%;
    height: 400px; 
    border-bottom: 3px solid #000000;

    /* 背景画像の設定 */
    background-image: url('https://www.neu-neu-neu.com/wp-content/uploads/2026/03/kare-2-scaled.jpg');
    background-size: cover;
    background-position: center;
    
    /* 背景を固定するプロパティ */
    background-attachment: fixed;

    /* 文字を中央に配置 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-title {
    color: #FFFFFF; 
    font-family: "Hiragino Mincho ProN", serif;
    text-align: center;
    line-height: 1.8;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
/* 
==========================================================================
  09. Instagram Section
========================================================================== */
.instagram-section {
    border-bottom: 3px solid #000000;
    background-color: #EBE0D0;
}

#sbi_images {
    display: flex !important;
    gap: 30px !important; 
    width: 100% !important;
    padding:0px 0px !important;;
}

#sb_instagram{
    padding:0px 0px !important;;
}

/* 各ポスト（3px黒縁）のスタイル */
#sbi_images .sbi_item {
    flex: 1 !important; 
    width: auto !important; 
    border: 3px solid #000000 !important;
    background-color: #F9F7F2 !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important; 
    padding: 0 !important;
}

/* 画像が枠いっぱいに広がるように調整 */
#sbi_images .sbi_photo {
    display: block !important;
    width: 100% !important;
}

/* 
==========================================================================
   10. New Section
========================================================================== */

.news-section .news-container,.instagram-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0; 
}

.news-section{
    border-bottom: 3px solid #000000;
}


.news-section .query-item {
    width: 100%;
    border: 3px solid #000000;
    height: 64px; 
    padding: 0 40px;   
    align-items: center;
    gap: 30px;
    box-sizing: border-box;
}

.news-section .query-item:nth-child(n+2) {
    border-top: none;
}

.news-section .section-padding-adjustment {
    display: flex;
    width: 100%;
    padding: 60px 0;
    flex-direction: column;
    align-items: center;
}

.news-section .header-cover, 
.news-section .button-text-cover {
    display: table;
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 12px 60px;
}

.news-section .button-text-cover 
{
    border: 3px solid #000;
}

.news-section .query-item .post-title a {
    text-decoration: none;
    color: #333333;
}

/* 
==========================================================================
   11. Information Section
========================================================================== */

.information-section{
    background-color: #f9f7f2;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23ebe0d0' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.information-wrapper{
    width:100%;
}

.grid-container {
    display: grid;
    width:100%;
    padding: 0px;
    background-color: #FFFFFF;
    grid-template-columns: repeat(2, 1fr);   
    box-sizing: border-box;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
}

.grid-item {
    display: flex;
    height: 64px;
    border-left: 3px solid #000;
    border-top: 3px solid #000;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.map-container{
    width:100%;
    height:400px;
    box-sizing: border-box;
    border: 3px solid #000;
}
/* 
==========================================================================
   12. Footer Section
========================================================================== */
.footer-section {
    width: 100%;
    background-color: #EBE0D0 !important; /* アイボリーの背景 */
    border-top: 3px solid #000000; /* 上部に3pxの黒い線 */
}

.footer-inner {
    display: flex;
    position: relative;
    flex-wrap: wrap; /* powered-byを下の段に落とすために必要 */
    justify-content: space-between;
    max-width: 1500px;
    margin: 0 auto;
    padding: 10px 50px 10px 50px; /* 下側のPaddingは少し削って調整 */
}

/* 左右のバランスを均等にする（3列構造） */
.footer-spacer, .footer-nav {
    flex: 1;
}

.footer-brand {
    flex: 2; /* ブランドを広めに取って中央に配置 */
    text-align: center;
}

.store-name {
    font-family: "Sawarabi Mincho", serif;
    font-weight: bold;
    -webkit-text-stroke: 0.5px #D3381C;
    font-size: 1.8rem;
    margin-top: 10px;
}

/* ナビゲーションを「右下」に寄せる */
.footer-nav {
    display: flex;
    align-items: flex-end; /* 下側に寄せる */
    justify-content: flex-end; /* 右側に寄せる */
}

.footer-nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.footer-nav a {
    text-decoration: none;
    color: #D3381C;
    -webkit-text-stroke: 0.5px #D3381C;
    font-size: 0.9rem;
}

/* 下部中央に配置 */
.powered-by {
    width: 100%; /* 横幅いっぱいにして中央揃えを可能にする */
    text-align: center;
    margin-top: 0px; /* 葵食堂との距離を空ける */
    font-size: 0.75rem;
    color: #D3381C;
}

.powered-by a {
    text-decoration: none;
    color: #D3381C;
}

.footer-brand p {
    margin:0px;
    color:#D3381C
}

.footer-brand img{
    width:120px;
    height:auto;
}

/* 
==========================================================================
   13. Mobile Section
========================================================================== */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
}

    .limited-width{
        padding:0 10px !important;
        max-width: 100% !important;
    }

    .section-padding-adjustment{
    padding: 50px 0px;
    gap: 40px;
}

    h1{
     font-size: 45px !important;;
    }

/* 
==========================================================================
   header section / mobile
========================================================================== */

    header h1{
    font-size: 25px !important;;
}
    .header-section{
        padding-left:15px;
        padding-right:15px;
    }
    .header-container{
        padding: 0px;
    }

    h2{
     font-size: 35px !important;;
    }

    /* --- スマホ時（768px以下）の設定 --- */
    .header-container {
        padding: 15px 20px; /* スマホでは余白を調整 */
    }

    /* ハンバーガーボタン：3pxの黒線デザイン */
    .menu-trigger {
        display: block;
        position: relative;
        width: 30px;
        height: 24px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 100;
        order: 2; /* 言語切替の前に配置する場合 */
    }

    .menu-trigger span {
        display: block;
        position: absolute;
        width: 100%;
        height: 3px; /* 線の太さを統一 */
        background:#D3381C;
        transition: 0.3s;
    }
    .menu-trigger span:nth-child(1) { top: 0; }
    .menu-trigger span:nth-child(2) { top: 10px; }
    .menu-trigger span:nth-child(3) { top: 20px; }

    /* ナビゲーション本体：アイボリー背景のスライドメニュー */
    .nav-wrapper {
        display: block;
        position: fixed;
        top: 0;
        right: -100%; /* 画面外へ隠す */
        width: 100%; /* 全画面または80%など */
        height: 100vh;
        background-color: #F9F7F2; /* アイボリー徹底 */
        z-index: 99;
        transition: 0.4s;
        padding-top: 100px; /* ロゴと重ならないよう調整 */
    }

    /* JSでクラスが付与された時の動き */
    .nav-wrapper.is-active {
        right: 0;
    }

    /* メニュー内のリストを縦並びに */
    .nav-wrapper ul {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    /* 言語切替は常に表示しておく（右端に配置） */
    .language-wrapper {
        order: 3;
    }

/* 
==========================================================================
   hero section / mobile
========================================================================== */
    .hero-section{
        height: 350px !important; 
    }
    /* 1. 全体の高さを350pxに固定 */
    .hero-section,
    .slide-item {
        height: 350px !important;
    }

    /* 2. 画像が拡大されすぎないよう調整 */
    .slide-item {
        background-size: cover; /* 隙間を作らない最小限の拡大 */
        background-position: center center;
    }

    /* 3. 文字サイズの調整（スマホで見やすいサイズ） */
    .hero-section h1 {
        font-size: 32px; /* 70pxから変更 */
    }

    .hero-catchphrase {
        font-size: 2rem !important; /* 3remから変更 */
        padding: 0 20px;   /* 左右に少し余白 */
        line-height: 1.3;
    }

    /* 4. コンテンツのパディング調整 */
    .slide-content {
        padding: 20px;     /* 60pxから縮小して文字スペースを確保 */
    }
/* 
==========================================================================
   menu section / mobile
========================================================================== */
    .menu-items-wrapper {
    display: flex;  
    width: 100%;
    flex-direction: column;
    gap:20px;
    box-sizing: border-box;
}

/* 
==========================================================================
   about section / mobile
========================================================================== */

.restaurant-container, .feature-container {
    width:100%;
     height:auto;
    display:flex;
    flex-direction: column;
    box-sizing: border-box;
}

.restaurant-container{
    flex-direction: column;
}


.feature-container {
    flex-direction: column-reverse
}

.restaurant-text-wrapper, .restaurant-image-wrapper,.feature-text-wrapper,.feature-image-wrapper{
    width: 100%;  
    height:auto;  
}


.restaurant-text-wrapper{
   border-bottom:3px solid #000000; 
   border-right:0px solid #000000; 
}

.feature-text-wrapper{
   border-bottom:3px solid #000000; 
}
.feature-image-wrapper{
   border-right:0px solid #000000; 
}

/* 
==========================================================================
   instagram section / mobile
========================================================================== */

.instagram-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#sbi_images {
        display: block !important; /* flexを解除 */
        width: 100% !important;
    }
/* 
==========================================================================
   news section / mobile
========================================================================== */
    .grid-container {
    grid-template-columns: 1fr 2fr;  
}
.grid-text{
    padding-left:15px ;
    padding-right: 15px;
}

/* 
==========================================================================
   footer section / mobile
========================================================================== */
.footer-inner{
    padding: 15px;
}
.footer-brand {
    flex: 1;
}
.footer-nav ul{
   flex-direction: column;
   gap:3px;
}
.footer-nav li {
    flex-direction: column;
    margin: 0;   /* li自体の余白をゼロに */
    padding: 0;  /* li自体の余白をゼロに */
    line-height: 1
}
.footer-nav a {
        font-size: 0.60rem;
}
.store-name {
            font-size: 1.20rem;
}
}