/*
Theme Name: GRIP Demo Theme (Restaurant/Service)
Author: GRIP
Description: 飲食店・和菓子店向け「更新を仕事に変える」デモサイト用テーマ。Bootstrap 5 と ACF を活用した論理的デザイン。
Version: 1.0
*/
html {
    font-size: 100%; /* ブラウザ標準の16pxを基準にする */
}
/* ==========================================================================
   1. 基本設定（トーン＆マナー）
   ========================================================================== */
:root {
    --primary-color: #d4a373; /* 落ち着いた和モダンなブラウン（和菓子・飲食店向け） */
    --accent-color: #e63946;  /* 価格や強調に使うアクセントレッド */
    --text-main: #333333;
    --bg-light: #f8f9fa;
}

body {
    color: #444;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem; /* スマホでは標準の16px */
    line-height: 1.7;
    word-wrap: break-word;
}

.hero-section {
    height: 1200px;
    min-height: 560px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #333; 
	margin-top:0;
	padding-top:0;
}

.hero-logo {
    height: auto;
	width: 60%;
    margin: 0 auto;
}

/* セミコロンを削除しました */
@media (min-width: 400px) {
    .hero-section {
        height:700px; /* PCでは高さを抑える設定ですね */
    }
}

/* --- 3. メディアクエリ（PC・タブレット向け：992px以上） --- */
@media (min-width: 992px) {
    body {
        font-size: 1.125rem; /* PCでは少し大きく18px相当にアップ */
    }
}

	
	
/* ==========================================================================
   2. コンポーネントのカスタマイズ
   ========================================================================== */

/* カードのデザイン（本日のおすすめエリア） */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* 価格表示の強調 */
.card-text.text-danger,
.fs-2.text-danger {
    color: var(--accent-color) !important;
}

/* CTAボタン（ヘッダー・詳細ページ） */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover {
    filter: brightness(0.9);
}

/* ==========================================================================
   3. WordPress標準クラスの対応（念のため）
   ========================================================================== */
.aligncenter { display: block; margin: 0 auto; }
.alignright { float: right; margin-left: 1.5em; }
.alignleft { float: left; margin-right: 1.5em; }

/* ==========================================================================
   4. ACF出力エリアの装飾
   ========================================================================== */
.badge-allergy {
    font-size: 0.75rem;
    padding: 0.4em 0.8em;
    border: 1px solid #ccc;
    color: #666;
    background: transparent;
}
.my-custom-class {
width:100%;
}

/* 画像ホバー時の透明度変化 */
.opacity-hover {
    transition: opacity 0.3s ease;
}
.opacity-hover:hover {
    opacity: 0.5;
}

/* タイトルのリンクにホバーした際に色を変える（任意） */
.news-item .card-title a:hover {
    color: #0d6efd !important; /* Bootstrapのプライマリカラー */
}

.btn-cta {
    background-color: #ff5722;
    color: #fff;
    font-weight: bold;
    border-radius: 50px;
    padding: 0.5rem 1.5rem; /* PC用のデフォルト */
    display: inline-block;
    max-width: 100%;       /* 親要素を突き抜けないように */
    white-space: normal;   /* 文字が長い場合に折り返しを許可 */
    text-align: center;
}

/* 画面幅が小さいデバイス（iPhone SEなど）向けの調整 */
@media (max-width: 375px) {
    .btn-cta {
        padding: 0.4rem 1rem; /* 余白を少し削る */
        font-size: 0.9rem;    /* 文字を少し小さくする */
        letter-spacing: -0.02em; /* 文字間隔をわずかに詰めて横幅を節約 */
    }
}
.btn-cta:hover { background-color: #e64a19; color: #fff; }
	
.container {
    padding-right: 15px;
    padding-left: 15px;
}


@media (max-width: 375px) {
    .hero-section .btn-cta {
        display: block;  /* 横幅いっぱいに広げる */
        width: 100%;
        margin-bottom: 10px;
    }
}

.d-flex {
    flex-wrap: wrap; /* 幅が足りなくなったら自動で改行させる */
    justify-content: center; /* 中央揃えを維持 */
}
	
	
	
	

/* Contact Form 7 のバリデーションエラーをBootstrap風に */
.wpcf7-not-valid-tip {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
}
.wpcf7-response-output {
    margin: 20px 0 0 0 !important;
    padding: 15px !important;
    border-radius: 8px !important;
    border: 2px solid #0073aa !important;
    text-align: center;
}
/* ロゴの高さ調整（スマホとPCで切り替え） */
.navbar-brand { font-weight: 700; color: #333; }
.navbar-brand img {
    height: 40px; /* スマホ用 */
    width: auto;
}

@media (min-width: 992px) {
    .navbar-brand img {
        height: 55px; /* PC用：少し大きく見せる */
    }
    .nav-link {
        margin-right: 15px;
        transition: color 0.3s ease;
    }
    .nav-link:hover {
        color: #0d6efd !important; /* Buono!のテーマカラー */
    }
}

/* 現在表示しているページのリンクを強調（必要に応じて） */
.nav-item.active .nav-link {
    color: #0d6efd !important;
}
.transition-up { transition: transform 0.3s ease; }
.transition-up:hover { transform: translateY(-5px); }
.hero-section h1 { text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
/* システム説明セクションのリスト装飾 */
#system ul.list-unstyled li {
    padding: 12px 15px;
    background: #fff;
    margin-bottom: 10px !important;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-left: 4px solid #0d6efd; /* アクセントカラー */
    transition: transform 0.2s ease;
}

#system ul.list-unstyled li:hover {
    transform: translateX(5px);
}

#system ul.list-unstyled li i {
    font-size: 1.2rem;
}

/* 「丸投げになってしまう理由」のテキスト強調 */
#system h3 {
    color: #333;
    position: relative;
    padding-left: 15px;
    margin-top: 2.5rem !important;
}

#system h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: #fd7e14; /* オレンジ系で警告・注目を促す */
    border-radius: 2px;
}


.lead {
    line-height: 1.7;
}


/* お知らせ本文（.news-content）の中にあるリストだけを装飾する */
.news-content ul {
  border: solid 2px #ffb03f;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  background: #fff; /* 背景を白にするとより見やすいです */
  margin: 1rem 0;
  border-radius: 8px;
}

.news-content ul li {
    font-size: 1rem; /* bodyのサイズに対して100%（スマホなら16px、PCなら18px） */
    line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none !important;
  position: relative; /* チェックマークの基準位置 */
}

.news-content ul li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 900; /* FontAwesome5以降はこれが必要な場合があります */
  position: absolute;
  left : -1.5em; /* アイコンをパディング内に収めるよう調整 */
  color: #ffb03f;
}
.news-content {
    line-height: 1.6 !important;
	word-wrap: break-word;
    display: block;
}

/* もしACF側で自動整形(Pタグ)が入っている場合の対策 */
.news-content p {
    margin-bottom: 1em; /* 段落間の余白 */
    line-height: inherit;
}

.news-content a {
    color: #0d6efd;              /* Bootstrapのブルー（またはお好みの色） */
    text-decoration: underline;  /* リンクであることを分かりやすく */
}
.news-content br {
    display: block;
    content: "";
    margin-top: 0;
}

	
.topimg img {
    width: 50%;
}
@media (max-width: 375px) {
.topimg img {
    width: 25%;
    }
}