/**
Theme Name: bigrun
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bigrun
Template: astra
*/

/*************************************************
/* サイト全体の日本語フォント設定
*************************************************/

/* サイト全体の日本語フォント設定（詳細度を強化） */
#page body, 
#page button, 
#page input, 
#page select, 
#page textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 見出し部分の日本語フォント設定（詳細度を強化） */
#page h1, #page h2, #page h3, #page h4, #page h5, #page h6, 
#page .entry-title, #page .site-title a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}


/*************************************************
/* ロゴサイズ スマホ（768px未満）
*************************************************/

@media (max-width: 767px) {
    header .custom-logo-link img {
        max-width: 280px;
        /* 好きなサイズに変更 */
        width: 280px;
    }
}

/*************************************************
/* tablepress（テーブルプレス）
*************************************************/

/* すべてのセルに枠線を付加する */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
    border: 1px solid #ccc !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    font-size: 15px;
}

.tablepress {
    margin-bottom: 1em !important;
}

.entry-content table,
.comment-content table {
    margin: 0;
}

/**************************************************************************/

/* --- オートサロン会社概要カード 全体設定 --- */
.el-salon-info-card {
  background: #ffffff;
  width: 1200px;
  max-width: calc(100% - 20px); /* 【スマホ時】左右に10pxずつの外側余白 */
  margin: 15px auto;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: 1px solid #e2e8f0;
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

/* PC向けの設定（画面幅768px以上） */
@media screen and (min-width: 768px) {
  .el-salon-info-card {
    max-width: 100%; /* 【PC時】横幅100%いっぱいに広げる */
  }
}

/* --- ヘッダー部分（極限まで高さをスリムに） --- */
.el-salon-info-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    padding: 12px 40px; /* PC時の余白 */
    position: relative;
}

.el-salon-info-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #38bdf8, #3b82f6);
}

.el-salon-info-header .salon-label {
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #ffffff;
    margin: 0;
    display: block;
    line-height: 1.2;
}

/* --- リスト（ボディ）部分 --- */
.el-salon-info-body {
    padding: 15px 40px; /* PC時の余白 */
}

.el-salon-info-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 各項目の上下の間隔をさらに引き締め */
.el-salon-info-item {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.el-salon-info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.el-salon-info-item:first-child {
    padding-top: 0;
}

/* --- 項目名（左側） --- */
.el-salon-item-label {
    font-weight: 700;
    color: #475569;
    font-size: 1.35rem;
    position: relative;
    padding-left: 20px;
}

/* 行頭のブルーのドット */
.el-salon-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 52%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    background-color: #3b82f6;
    border-radius: 50%;
}

/* --- 内容（右側） --- */
.el-salon-item-content {
    color: #1e293b;
    font-size: 1.35rem;
    line-height: 1.4;
}

/* 特定の項目の微調整 */
.el-salon-item-content.tel-num {
    font-weight: 700;
    color: #2563eb;
    font-size: 1.55rem;
}

.el-salon-item-content.holiday {
    color: #df1c1c;
    font-weight: 600;
}

/* 事業内容のタグ一覧（右側の要素としてきれいに並ぶよう調整） */
.el-salon-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.el-salon-tag {
    background-color: #eff6ff;
    color: #2563eb;
    padding: 4px 16px;
    border-radius: 8px;
    font-size: 1.15rem;
    font-weight: 600;
    border: 1px solid #dbeafe;
}

/* --- スマホ表示のレスポンシブ対応 --- */
@media (max-width: 767px) {
    .el-salon-info-header {
        padding: 10px 10px; /* 左右のpaddingを10pxに調整 */
    }
    .el-salon-info-body {
        padding: 12px 10px; /* 左右のpaddingを10pxに調整 */
    }
    .el-salon-info-item {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 0;
    }
    .el-salon-item-label {
        font-size: 1.2rem;
    }
    .el-salon-item-content {
        font-size: 1.15rem;
    }
}

/*******************************************************************************/

/* ==========================================================================
   CF7 2カラム完全版（最大1200px・メッセージ横いっぱい強制・ボタン中央寄せ）
   ========================================================================== */

/* フォーム全体の最大幅と中央寄せ */
.cf7-ultimate-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* PC時はGridを使って綺麗な2列にする */
.cf7-grid-two-columns {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px 40px !important;
    width: 100% !important;
}

/* 1列ぶち抜き（メッセージ）部分の余白 */
.cf7-full-width-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 25px !important;
    display: block !important;
}

/* 各入力項目のブロック縦並び化 */
.cf7-form-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ★最重要：メッセージ欄とその周囲のブロックを100%幅に超強制固定 */
.cf7-full-width-section .cf7-form-item,
.cf7-full-width-section .wpcf7-form-control-wrap,
.cf7-full-width-section textarea.wpcf7-textarea,
.cf7-full-width-section textarea {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important; /* 横幅の上限をフォーム全体と同じ1200pxに指定 */
    min-width: 100% !important;
    box-sizing: border-box !important;
}

/* 通常のCF7自動生成スパンのテーマ競合・幅縮小バグ防止 */
.cf7-ultimate-container .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ラベルのスタイル */
.cf7-form-item label {
    font-weight: bold !important;
    font-size: 15px !important;
    margin-bottom: 8px !important;
    color: #333 !important;
    display: block !important;
}

/* 必須・任意バッジ */
.cf7-ultimate-container .badge-required,
.cf7-ultimate-container .badge-optional {
    font-size: 11px !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    margin-left: 5px !important;
    color: #ffffff !important;
    font-weight: normal !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
}
.cf7-ultimate-container .badge-required { background-color: #ff3b30 !important; }
.cf7-ultimate-container .badge-optional { background-color: #a0a0a0 !important; }

/* 全ての入力フォーム（テキストエリア含む）の基本設定 */
.cf7-ultimate-container input[type="text"],
.cf7-ultimate-container input[type="email"],
.cf7-ultimate-container input[type="tel"],
.cf7-ultimate-container select,
.cf7-ultimate-container textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    background-color: #fff !important;
    margin: 0 !important;
    display: block !important;
}

/* メッセージ欄の高さ設定 */
.cf7-ultimate-container textarea {
    height: 180px !important;
    resize: vertical !important;
}

/* 送信ボタンエリア（中央寄せ） */
.cf7-submit-section {
    text-align: center !important;
    margin-top: 35px !important;
    width: 100% !important;
}

/* 送信ボタンデザイン（カラー：#FCA311） */
.cf7-ultimate-container input[type="submit"] {
    background-color: #FCA311 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 15px 80px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: background-color 0.3s !important;
    width: auto !important;
    display: inline-block !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* ボタンホバー時 */
.cf7-ultimate-container input[type="submit"]:hover {
    background-color: #e5920c !important;
}

/* ==========================================================================
   スマホ環境用の設定（画面幅が767px以下の場合に自動で1カラム化）
   ========================================================================== */
@media screen and (max-width: 767px) {
    .cf7-grid-two-columns {
        grid-template-columns: 1fr !important;
        gap: 15px 0 !important;
    }
    .cf7-ultimate-container {
        padding: 10px !important;
    }
    .cf7-full-width-section {
        margin-top: 15px !important;
    }
}


/* 同意チェックボックス内のリンク文字色を強制指定（Astra/Elementor白文字化の対策） */
.cf7-acceptance-section a,
.cf7-acceptance-section a:visited {
    color: #0066cc !important;          /* 通常時・訪問済みの文字色（青） */
    text-decoration: underline !important; /* 下線を引く */
    background: transparent !important;   /* 背景を透明にする */
}

/* マウスを乗せた（ホバー）時の色 */
.cf7-acceptance-section a:hover,
.cf7-acceptance-section a:focus {
    color: #004499 !important;          /* ホバー時は少し濃い青に */
    text-decoration: none !important;      /* 下線を消す */
}



/* Googleマップのコンテナに余白と影、角丸を適用 */

/* 外枠（ウィジェット全体）に余白と影をつける */
.elementor-widget-google_maps {
    background-color: #ffffff !important;
    padding: 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    
    /* 高さ自体はElementorの設定に100%任せる（固定指定を解除） */
    height: auto !important; 
}

/* Elementorの設定する高さを邪魔しないようにする設定 */
.elementor-widget-google_maps .elementor-widget-container {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* マップの埋め込みコンテナ */
.elementor-widget-google_maps .elementor-custom-embed {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    
    /* Elementorが動的に指定するiframeの高さを保持させる */
    height: 100% !important; 
}

/* マップ本体（iframe）の角丸設定。高さの!importantを外しElementorに追従させる */
.elementor-widget-google_maps iframe {
    border-radius: 8px !important;
    display: block !important;
    width: 100% !important;
    border: none !important;
    
    /* ここに100% !importantをつけていたのが原因だったため、
       ブラウザ規定の高さ属性（Elementorの出力値）を最優先させます */
}


/******************************************************************************/


/* ========================================
   お知らせ一覧・トップページ共通デザイン
======================================== */

.custom-news {
    --news-accent: #456b60;
    --news-text: #303b38;
    --news-muted: #858d89;
    --news-line: #e5eae7;
    --news-bg: #f6f8f6;

    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    color: var(--news-text);
    font-size: 15px;
    line-height: 1.8;
}

/* リスト全体 */
.custom-news__list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 各お知らせ */
.custom-news__item {
    display: block;
    margin: 0;
    padding: 22px 18px;
    border-bottom: 1px solid var(--news-line);
    list-style: none;
    transition: background-color 0.25s ease;
}

.custom-news__item:first-child {
    border-top: 1px solid var(--news-line);
}

.custom-news__item:hover {
    background-color: var(--news-bg);
}

/* 日付・カテゴリー・New! */
.custom-news__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 1.6;
}

.custom-news__date {
    color: var(--news-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.custom-news__category {
    display: inline-block;
    padding: 2px 9px;
    border: 1px solid #dce5df;
    border-radius: 3px;
    color: var(--news-accent);
    background: #f7faf8;
    font-size: 11px;
}

/* New!マーク */
.custom-news__new {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    color: #fff;
    background: #c87562;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.6;
}

/* タイトル */
.custom-news__title {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.custom-news__title a {
    display: inline;
    color: var(--news-text);
    text-decoration: none;
    text-underline-offset: 4px;
    transition: color 0.2s ease;
}

.custom-news__title a:hover {
    color: var(--news-accent);
    text-decoration: underline;
}

/* ページ送り */
.custom-news__pagination {
    margin: 32px 0 8px;
}

.custom-news__pagination ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.custom-news__pagination li {
    margin: 0;
    padding: 0;
}

.custom-news__pagination a,
.custom-news__pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 7px 12px;
    border: 1px solid var(--news-line);
    border-radius: 4px;
    color: var(--news-text);
    background: #fff;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.custom-news__pagination a:hover {
    border-color: var(--news-accent);
    color: #fff;
    background: var(--news-accent);
}

.custom-news__pagination .current {
    border-color: var(--news-accent);
    color: #fff;
    background: var(--news-accent);
    font-weight: 600;
}

/* お知らせがない場合 */
.custom-news--empty {
    padding: 24px 18px;
    border-top: 1px solid var(--news-line);
    border-bottom: 1px solid var(--news-line);
    color: var(--news-muted);
    background: var(--news-bg);
}

.custom-news--empty p {
    margin: 0;
}

/* スマートフォン */
@media screen and (max-width: 600px) {
    .custom-news {
        font-size: 14px;
    }

    .custom-news__item {
        padding: 18px 10px;
    }

    .custom-news__title {
        font-size: 15px;
        line-height: 1.85;
    }

    .custom-news__meta {
        gap: 6px 9px;
    }

    .custom-news__pagination {
        margin-top: 24px;
    }

    .custom-news__pagination ul {
        gap: 5px;
    }

    .custom-news__pagination a,
    .custom-news__pagination span {
        min-width: 36px;
        min-height: 36px;
        padding: 6px 9px;
    }
}

/* 動きを減らす設定への配慮 */
@media (prefers-reduced-motion: reduce) {
    .custom-news__item,
    .custom-news__title a,
    .custom-news__pagination a {
        transition: none;
    }
}



/* news-list：横一列・大きめ文字 */
.custom-news__item {
    padding: 22px 16px;
}

.custom-news__meta {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 16px 0 0;
    gap: 8px;
}

.custom-news__title {
    display: inline;
    font-size: 19px;
    line-height: 1.8;
    font-weight: 600;
}

.custom-news__title a {
    color: #303b38;
}

/* New! マークを赤色に */
.custom-news__new {
    color: #fff;
    background: #e60012;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 3px;
}

/* 各お知らせを改行させず一列に */
.custom-news__item {
    display: block;
    white-space: nowrap;
    overflow-x: auto;
}

.custom-news__meta,
.custom-news__title {
    white-space: nowrap;
}

/* スマートフォン */
@media screen and (max-width: 600px) {
    .custom-news__item {
        padding: 18px 8px;
    }

    .custom-news__meta {
        margin-right: 10px;
    }

    .custom-news__title {
        font-size: 17px;
    }

    .custom-news__new {
        font-size: 12px;
    }
}


/* カスタム投稿の個別ページ全体のコンテンツ上部余白を調整 */
.single-format-standard .site-content,
.single .site-content {
    padding-top: 50px !important; /* 好みの高さ（例: 0px〜20px）に調整 */
}

/* もし特定のエントリーコンテンツの上部余白を消したい場合 */
.single .entry-content {
    margin-top: 0 !important;
}