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

html, body {
    margin: 0;
    padding: 0;
}

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

/* 画像の崩れ防止（超重要） */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* リストのリセット */
ul, ol {
    list-style: none;
}

/* リンクの初期化 */
a {
    text-decoration: none;
    color: #000  !important;
}

p {
    margin: 0 !important;
}

/* ボタンのリセット（地味に重要） */
button {
    background: none;
    border: none;
    cursor: pointer;
}


body {
  /* 日本語フォント優先 */
  overflow-x: hidden;
  font-family: "Noto Sans JP", "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /* ここは必要に応じて調整 */
  font-style: normal;
  font-variation-settings: "wdth" 100; /* Robotoに適用される */
}

/* Noto Sans JP 用クラス */
.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /* 必要に応じて変更 */
  font-style: normal;
}

/* Roboto 用クラス */
.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /* 必要に応じて変更 */
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* =========================
    02. SHARED LAYOUT
========================= */
.limited-width {
    padding:100px;
}

.header-content-adjustment{
    display: flex;
    flex-direction: column; 
    gap:60px
}

h2{
    font-size: 60px;
}

a:visited {
  color: #000;
}


/* =========================
   Header
========================= */

.header-section {
    position: sticky;
    top: 0;
    z-index: 9999;
    padding: 0 50px;
    background-color: #ffffff;
}

/* Header-Layout */

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

.logo-wrapper {
    flex: 1;
}

.nav-wrapper {
    flex: 2;
    display: flex;
    justify-content: center;
}

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

/* Header-Navigation */

header ul {
    display: flex;
    align-items: center;
    gap: 40px;

    margin: 0;
    padding: 0;
}

.nav-wrapper ul {
    gap: 40px;
}

.language-wrapper ul {
    gap: 0;
}

/*  Header-Typography */

header h1 {
    margin: 10px 0;
    font-size: 25px;
}

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

/* Header-Link Style */

.header-section a,
.header-section li {
    color: #000;
    font-weight: bold;
    -webkit-text-stroke: 0.5px #000;

    text-shadow: 0 0 0 rgba(0, 0, 0, 0);

    transition:
        color 1.5s ease,
        text-shadow 1.5s ease,
        transform 1.5s ease;
}

/* Hover */

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

    transform: scale(1.02);
}

.separator:hover {
    color: #000;
    -webkit-text-stroke: 0.5px #000;
}

/*Reset (Header only) */

header a {
    text-decoration: none;
}

header li {
    list-style: none;
}

/* Mobile Trigger */

.menu-trigger {
    display: none;
}




/* 
==========================================================================
      03. COMMON COMPONENTS (ボタン・アニメーションなどの共通パーツ)

========================================================================== */

.fade-up {
    opacity: 0;
    transform: translateY(50px); /* 移動距離を長く */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; /
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}


.limited-width h2 {
  border-bottom: 5px solid #000;
  display: inline-block;
  padding-bottom: 4px;
}
/*
==========================================================================
   12. Footer Section
========================================================================== */
.footer-section {
    width: 100%;
    background-color: #ffff !important; 
    padding:10px 0px
}

.footer-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 1500px;
    margin: 0 auto;
    gap: 10px;
}

.footer-brand {
    text-align: center;
}

.group-name {
    font-weight: bold;
    -webkit-text-stroke: 0.5px #000;
    font-size: 1.8rem;
    margin-top: 10px;
}

.footer-nav {
    display: flex;
    justify-content: center;
}

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

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

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

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

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

/*
==========================================================================
   12. fixed hero Section
========================================================================== */


.hero-section-404 {
    position: relative;
    height: 550px !important; 
    width: 100%;
    max-width: 100% !important;
    margin: 0;
    overflow: hidden;
}

.hero-background-404 {
    position: absolute;   /* 親の全体を覆う */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;           /* コンテンツより下に */
}

.hero-content-404 {
    position: relative;    /* 背景の上に置く */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;          /* 親全体の高さを使う */
    max-width: 1500px;
    padding: 0 60px;       /* 上下は0で中央揃えに影響しない */
    margin: 0 auto;
    z-index: 10;
}

.hero-catchphrase-404 {
    color: #FFFFFF;
    font-size: 50px !important;
    font-weight: bold;
    text-shadow: 
    0 0 5px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(0, 0, 0, 0.3),
    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;
}
}

/*
==========================================================================
   12. 404 Section
========================================================================== */

.container-404{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;       /* 小さい画面で折り返す場合に必要 */
    width: 100%;
}

.item-404{
    flex: 0 0 50%;         /* 横幅50%、縮小も拡大もしない */
    box-sizing: border-box;
}

.fixpage-left-404{
    padding-right: 3%;
}

.fixpage-right-404{
    padding-left: 3%;
}

/*
==========================================================================
   12. breadcrumbs Section
========================================================================== */

.breadcrumbs-width{
    padding:15px 100px 0px 100px;
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    gap: 5px;
    padding: 0;
    margin: 0;
}

.breadcrumb li::after {
    content: "›"; /* 区切り文字 */
    margin: 0 5px;
}

.breadcrumb li:last-child::after {
    content: "";
}

.breadcrumb a {
    text-decoration: none;
    color: #333;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

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

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

.fade-up {
    transform: translateY(30px); /* 移動距離を長く */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out; /
}

/* =============================
   Mobile Header
============================= */

.header-section {
    padding: 0 15px;
}

/* コンテナ */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* ハンバーガー */
.menu-trigger {
    display: block;
    position: relative;
    width: 40px;
    height: 30px;
    cursor: pointer;
    z-index: 10000;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

.menu-trigger span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: #000;
    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(255, 255, 253, 0.95);
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.4s ease;
}

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

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

/* 言語 */
.language-wrapper a {
    font-size: 20px;
}
/* 
==========================================================================
   breadcrumbs section / mobile
==========================================================================
 */

 .breadcrumbs-width {
    padding: 10px 15px 0 15px !important;
}

/* 
==========================================================================
   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-catchphrase {
        font-size: 32px; /* 70pxから変更 
    } */

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

    /* 4. コンテンツのパディング調整 */
    .slide-content {
        padding: 20px;     /* 60pxから縮小して文字スペースを確保 */
    }

/* 
==========================================================================
   common section / mobile
==========================================================================
 */
    .limited-width{
        padding:15px 15px !important;
        max-width: 100% !important;
    }

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

    .header-content-adjustment{
        gap:20px
    }

/* 
==========================================================================
   common section / mobile
==========================================================================
 */
    .banner-title{
        font-size:20px !important;
    }

/* 
==========================================================================
   footer section / mobile
==========================================================================
 */
    .footer-wrapper {
    gap: 1px;
}   
.footer-nav a {
    font-size: 0.8rem;
}


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

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

    /* 3. 文字サイズの調整（スマホで見やすいサイズ） */
    .hero-catchphrase-404 {
        font-size: 2rem !important;
    }

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

    /* 4. コンテンツのパディング調整 */
    .slide-conten-404 {
        padding: 20px;     /* 60pxから縮小して文字スペースを確保 */
    }

    .container-404{
    flex-direction: column;
    gap:20px
    }
    .fixpage-right-404{
        padding: 0;
    }
    .fixpage-left-404 {
        padding: 0;
    }

 }