/**
Theme Name: Kotani Pharmacy
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: astra-child
Template: astra
*/


/*************************************************
/*  MTS Simple Booking（予約システム）
*************************************************/

/* 祝祭日名称（注記）を非表示にする */

.schedule-note {
    display: none;
}

.day-box.no-day{
    background-color: #FAF5E5;
}
.day-calendar table {
    margin: auto;
}


/*　セルの余白を設定（table）　*/
.monthly-calendar th,
.monthly-calendar td {
padding: 5px;
}


/*************************************************
/* ウィジェットタイトルを統一
*************************************************/

.widget-title {
    font-size: 20px !important; /* 文字サイズを統一 */
    /*font-weight: bold !important; /* 太字にする */
    color:#696969 !important; /* 文字色を統一 */
   /* border-bottom: 2px solid #ddd; /* 下線を統一 */
    padding-bottom: 10px; /* 下の余白を統一 */
    margin-bottom: 15px; /* 下の余白を統一 */
   text-align: center;
}


/*************************************************
/* ウィジェット店舗情報
*************************************************/

/* 全体：囲い枠のみのシンプル構成 */
.company-info-widget {
  max-width: 100%;
  padding: 0 15px;
  /*border: 1px solid #e0e0e0;
  border-radius: 1px;
  background-color: #fff;*/
  font-family: sans-serif;
  color: #333;
}

/* 会社名 */
.company-name {
  font-weight: bold;
  font-size: 1.15em;
  margin-bottom: 15px;
  color: #2e7d32;
}

/* グリッドレイアウト：ここが「崩れない」核心 */
.company-details {
  display: grid;
  /* 左列：中身の最大幅に自動合わせ / 右列：残りの幅全部 */
  grid-template-columns: max-content 1fr; 
  column-gap: 12px; /* ラベルと内容の間隔 */
  row-gap: 8px;    /* 行間（余白を少なく設定） */
  align-items: baseline; /* 文字の底辺で揃える */
}

/* ラベル：背景グリーン・文字白 */
.company-details .label {
  display: inline-block;
  background: #dca54a;
  color: #fff;
  padding: 1px 10px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap; /* ラベル内での意図しない改行を防止 */
  text-align: center;
}

/* 内容：住所などが長くなっても自動で折り返し */
.company-details .content {
  font-size: 18px;
  line-height: 1.5;
  word-break: break-all;
  text-align: left;
}

/* マップボタン */
.company-map-link {
  margin-top: 15px;
}

.company-map-link a {
  display: inline-block;
  padding: 6px 20px;
  background-color: #dca54a;
  color: #fff !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  border-radius: 3px;
  transition: opacity 0.2s;
}

.company-map-link a:hover {
  opacity: 0.8;
}


/*************************************************
/* カスタム投稿個別ページヘッダー余白調整
*************************************************/

.ast-separate-container #primary {
    padding: 0;
    margin: 0;
    border: 0;
}


/*************************************************
/* カスタム投稿一覧 コラム
*************************************************/
/* ================================
   共通デザイン（投稿タイプ別）
   ================================ */

/* コンテナ */
.column-container,
.case-report-container,
.blog-container {
    margin: 20px 0;
    border-top: 1px solid #eee;
}

/* アイテム */
.column-item,
.case-report-item,
.blog-item {
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s;
}

.column-item:hover,
.case-report-item:hover,
.blog-item:hover {
    background-color: #fcfcfc;
}

/* リンク */
.column-link,
.case-report-link,
.blog-link {
    display: flex;
    align-items: center;
    padding: 15px;
    text-decoration: none !important;
    color: inherit;
}

/* 画像パネル（非表示） */
.column-img-pannel,
.case-report-img-pannel,
.blog-img-pannel {
    flex: 0 0 120px;
    height: 80px;
    margin-right: 20px;
    overflow: hidden;
    background: #f0f0f0;
    display: none;
}

/* 本文 */
.column-body,
.case-report-body,
.blog-body {
    flex: 1;
}

/* メタ情報 */
.column-meta,
.case-report-meta,
.blog-meta {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* タイトル */
.column-title,
.case-report-title,
.blog-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    font-weight: 600;
}

/* 抜粋 */
.column-excerpt,
.case-report-excerpt,
.blog-excerpt {
    margin: 8px 0 0;
    font-size: 14px;
    color: #777;
    line-height: 1.6;
}

/* スマホ対応 */
@media (max-width: 500px) {
    .column-link,
    .case-report-link,
    .blog-link {
        align-items: flex-start;
    }

    .column-title,
    .case-report-title,
    .blog-title {
        font-size: 14px;
    }

    .column-excerpt,
    .case-report-excerpt,
    .blog-excerpt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 13px;
    }
}

/* ================================
   ページネーション（共通）
   ================================ */

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    gap: 10px;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    transition: all 0.3s ease;
    background: #fff;
    white-space: nowrap;
}

.pagination .page-numbers:hover {
    background-color: #e1b66d;
    border-color: #e1b66d;
}

.pagination .current {
    background-color: #dca54a;
    color: #fff;
    border-color: #dca54a;
}

.pagination .prev,
.pagination .next {
    font-weight: bold;
}

@media (max-width: 600px) {
    .pagination {
        gap: 6px;
        margin-top: 30px;
    }

    .pagination .page-numbers {
        padding: 8px 12px;
        font-size: 13px;
        line-height: 1;
        min-width: 40px;
        text-align: center;
    }
}


/*************************************************
/* ヘッダーメニュー固定
*************************************************/

/* ヘッダーの固定設定 */
.main-header-bar, .ast-mobile-header-wrap {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background-color: #ffffff; 
    /*box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
    /*border: 1px solid #eaeaea;*/
}

/* PC版のコンテンツ位置調整 */
body {
    padding-top: 80px; 
}

/* スマホ版（921px以下）の表示調整 */
@media (max-width: 921px) {
    body {
        padding-top: 60px; /* スマホのヘッダー高さに合わせて数値を調整 */
    }
    
    /* ホーム（フロントページ）で透明ヘッダーを使っている場合の干渉防止 */
    .ast-theme-transparent-header .site-content {
        margin-top: 60px !important;
    }
}


/* スマホ用：展開されたメニューの位置を調整 */
@media (max-width: 921px) {
    /* 固定ヘッダーの高さ分、メニュー全体を下げる */
    .main-header-bar {
        position: fixed !important;
        top: 0;
        width: 100%;
    }

    /* メニュー展開時のコンテナ位置調整（数値はヘッダーの高さに合わせる） */
    .ast-mobile-header-content, 
    .main-header-menu {
        margin-top: 55px !important; /* ヘッダーの高さ分だけ下げる */
        max-height: calc(100vh - 60px); /* 画面からはみ出さないよう調整 */
        overflow-y: auto; /* メニューが長い場合にスクロール可能にする */
    }
}


/*************************************************
/* アンカーリンク（ページ内リンク）の表示位置調整
*************************************************/
html {
    /* ヘッダーの高さに合わせて数値を調整（例：100px） */
    scroll-padding-top: 120px;
    scroll-behavior: smooth; /* スムーススクロール有効 */
}

/*************************************************
/* main menu padding（メニュー間余白）
*************************************************/
.main-header-menu .menu-link, .main-header-menu>a {
    padding: 0 0.8em;
}

/*************************************************
/* 婚活見直しませんかボタン角丸
*************************************************/
.wp-block-uagb-buttons .uagb-block-lhjs1o4q .uagb-button__wrapper .uagb-buttons-repeater.wp-block-button__link {
    border-radius: 6px;
}

/*************************************************
/* サブメニュー項目をボーダー（区切り線）
*************************************************/

/* サブメニューの各項目の下にボーダーを追加 */
.main-header-menu .sub-menu li {
    border-bottom: 1px solid #eeeeee; /* 線の太さと色 */
}
/* 最後の項目だけボーダーを消す（見た目を整える） */
.main-header-menu .sub-menu li:last-child {
    border-bottom: none;
}
/* サブメニュー全体の枠線を調整したい場合 */
.main-header-menu .sub-menu {
    border-top: 2px solid #333333; /* 上部にアクセント線を引く場合 */
}
/* サブメニューの項目にマウスを乗せた時の背景色 */
.main-header-menu .sub-menu li:hover {
    background-color: #f5f5f5; /* 薄いグレー（お好みの色に変更してください） */
    transition: background-color 0.3s ease; /* ふんわり変化させる */
}
/* 文字の色も変えたい場合（必要であれば） */
.main-header-menu .sub-menu li:hover > a {
    color: #000000; /* ホバー時の文字色 */
}


/*************************************************
/* Contact Form 7 （お問合せフォーム）
*************************************************/

/* フォーム全体 */
.wpcf7 form {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px;
  background: #fffaf3;
  border: 1px solid #e5d4b5;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  font-size: 15px;
  line-height: 1.6;
}

/* ラベル */
.wpcf7 form label {
  display: block;
  font-weight: 600;
  color: #4a3a22;
  margin-bottom: 6px;
}

/* 必須マーク */
label .required {
  color: #c0392b;
  font-weight: bold;
}

/* 2列レイアウト */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-field {
  flex: 1;
}

/* スマホは1列 */
@media (max-width: 599px) {
  .form-row {
    flex-direction: column;
  }
}

/* 入力欄 */
.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form textarea,
.wpcf7 form select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d9c7a3;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* フォーカス */
.wpcf7 form input:focus,
.wpcf7 form textarea:focus,
.wpcf7 form select:focus {
  border-color: #d09a40;
  box-shadow: 0 0 0 2px rgba(208,154,64,0.18);
  outline: none;
}

/* テキストエリア */
.wpcf7 form textarea {
  min-height: 140px;
  resize: vertical;
}

/* 送信ボタン */
.wpcf7 form input[type="submit"] {
  display: inline-block;
  padding: 12px 36px;
  background: #d09a40;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7 form input[type="submit"]:hover {
  background: #b8822f;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* エラーメッセージ */
.wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 13px;
  margin-top: 4px;
}

/*---------------------------------------------------------------*/

/* ================================
   トップページ一覧：2列固定
   ================================ */

.top-news-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* ★ 2列固定 */
    gap: 24px;
    margin: 30px 0;
}

/* スマホは1列 */
@media (max-width: 600px) {
    .top-news-container {
        grid-template-columns: 1fr;
    }
}

.top-news-item {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    background: #fff;
    transition: box-shadow 0.3s ease;
}

.top-news-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.top-news-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* メタ情報（NEW・日付・ラベル） */
.top-news-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.top-news-meta .date {
    color: #666;
    font-size: 14px;
}

/* NEWマーク */
.new-mark {
    color: red;
    font-weight: bold;
}

/* ラベル共通：ここを修正 */
.post-label {
    display: inline-block;
    width: 70px;            /* 入りきらない場合は微調整 */
    text-align: center;
    padding: 2px 0;         /* 上下を極限まで低く */
    border-radius: 4px;
    font-size: 11px;        /* 枠に合わせたフォントサイズ */
    color: #fff;
    line-height: 1.4;       /* 行間で高さを微調整 */
}

/* コラム（青） */
.post-label-column {
    background-color: #3b82f6;
}

/* 症例紹介（緑） */
.post-label-case {
    background-color: #16a34a;
}

.top-news-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
}

.top-news-excerpt {
    font-size: 14px;
    color: #777;
    margin: 0;
}