/*
Theme Name: aoi-cjn
Author: kiyo
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
========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* 1. ヘッダー自体の線を消す */
header {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 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
========================================================================== */


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

/* 中の文字（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;
}

.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;
}

/* ボタンを包む親要素 */
.menu-button-container {
    display: flex;
    justify-content: center; 
    gap: 40px;               /* ★ボタン間の距離を広げました（20px→40px） */
    padding: 0 20px;         /* 画面端との余白 */
}

/* ボタン本体：サイズを統一 */
.menu-button {
    display: flex;           /* 中の文字を中央に寄せるため */
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border: 3px solid #000000;
        /* ★ボタンのサイズを固定（文字数に依存させない） */
    width: 280px;            /* PCでの横幅を固定 */
    height: 60px;            /* 高さも揃える */
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

/* pタグ：じんわり設定 */
.menu-button p {
    margin: 0;
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    transition: 
        color 1.5s ease, 
        text-shadow 1.5s ease;
    text-shadow: 0 0 0 rgba(0,0,0,0);
}

/* ホバー時の演出（背景反転などお好みで） */
.menu-button p:hover {
     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);
}

/* ホバー時の設定 */
.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;
    margin: 0;
    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;
    align-items: center;
    justify-content: space-between;
    /* padding: 15px 20px; */
    position: relative;
}

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

.nav-wrapper{
    /* flex: 0 0 auto;
    display: flex */
    flex: 2;
    display: flex;
    justify-content: center;
}

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

.nav-wrapper a, .language-wrapper a{
    font-size: 20px;
}

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

.menu-trigger {
    display: none; /* PCでは非表示 */
}

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

.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;
}

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

.hero-single-image {
    width: 100%;
    height: 550px; /* ここが重要です */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    /* スライド用のアニメーションを無効化して表示 */
    opacity: 1 !important; 
}
/* 文字の配置 */
.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:  70px !important;
    font-weight: bold;
    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");
    background-attachment: fixed;
    background-size: 100px 20px;
}

.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等に調整） */
}

#menu2{
    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");
}


#menu3{
    border-bottom: 0px;
}


/* 
==========================================================================
   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;
    }

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

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  /* ハンバーガー */
  .menu-trigger {
    display: block !important;
    position: relative;  /* flex内で自然に配置 */
    width: 40px;         /* 幅を少し広めに */
    height: 30px;        /* 高さ */
    cursor: pointer;
    z-index: 1000;       /* nav-wrapperより上 */
    border: none;        /* ボタンの枠を消す */
    background: transparent; /* ボタン背景を透明に */
    padding: 0;          /* ブラウザの余白を消す */
    margin: 0 auto;   
  }

  .menu-trigger span {
    display: block;              /* これがないと消える */
    width: 100%;                 /* 横幅いっぱい */
    height: 4px;                 /* 線の太さ */
    background-color: #D3381C;   /* 朱色 */
    margin: 5px 0;               /* 線の間隔 */
    border-radius: 2px;          
  }

  .menu-trigger:focus {
    outline: none;
  }

  /* メニュー本体 */
  .nav-wrapper {
   position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(249,247,242,0.95);
    z-index: 999;
    transform: translateX(100%);  /* 初期は右に隠す */
    transition: transform 0.4s ease;
  }

  .nav-wrapper.is-active {
    transform: translateX(0);

  }

  .nav-wrapper ul {
    flex-direction: column;
        gap: 30px;
  }

  .language-wrapper a {
    font-size: 22px; /* お好みのサイズに変更 */
}

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

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

    .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;
}
    .menu-button-container {
        flex-direction: column; /* 縦並び */
        align-items: center;
        gap: 20px;              /* スマホ時は間隔を少し狭める */
        padding: 0 40px;
    }

    .menu-button {
        width: auto; 
        max-width: 90%;           /* スマホでは画面幅いっぱいに */
        min-width: 260px;      /* ただし大きくなりすぎないよう制限 */
    }
/* 
==========================================================================
   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;
}
}