/*
 * wp.css — WordPress 化にあたって追加したスタイル
 * ------------------------------------------------------------------
 * 旧サイトに存在した6ページの見た目には一切影響しません。
 * ここにあるのは「管理画面から新しく作るページ・お知らせ・
 * お問い合わせフォーム」を、既存ページと同じ見た目で並べるための指定です。
 *
 * 既存デザインから借りているトーン:
 *   本文幅   .cont_tex  = 70% / margin-left 15%（SP は 92% / 4.5%）
 *   見出し   .cont_tit  = 下線つき・letter-spacing 0.1em
 *   小見出し .scon_t    = 1.4em / font-weight 900
 *   ボタン   #444444 背景 + 白文字（.skbtn / .kmapb と同じ）
 *   罫線     1px dotted gray
 */

/* ==================================================
   1. 汎用ページ本文（page.php / single.php 共通）
   ================================================== */

.karinji-entry {
    text-align: left;
    line-height: 2.5em;
}

.karinji-entry > *:first-child {
    margin-top: 0;
}

.karinji-entry > *:last-child {
    margin-bottom: 0;
}

.karinji-entry p {
    margin: 0 0 1.6em;
}

.karinji-entry h2 {
    font-size: 1.4em;
    font-weight: 900;
    margin: 2.4em 0 0.8em;
    line-height: 1.8em;
}

.karinji-entry h3 {
    font-size: 1.15em;
    font-weight: 700;
    margin: 2em 0 0.6em;
    padding-left: 0.6em;
    border-left: 3px solid #444444;
    line-height: 1.8em;
}

.karinji-entry h4,
.karinji-entry h5,
.karinji-entry h6 {
    font-size: 1em;
    font-weight: 700;
    margin: 1.8em 0 0.5em;
    line-height: 1.8em;
}

.karinji-entry ul,
.karinji-entry ol {
    margin: 0 0 1.6em;
    padding-left: 1.6em;
}

.karinji-entry ul {
    list-style: disc;
}

.karinji-entry ol {
    list-style: decimal;
}

.karinji-entry li {
    margin-bottom: 0.4em;
    list-style: inherit;
}

.karinji-entry blockquote {
    margin: 0 0 1.6em;
    padding: 1em 1.4em;
    border-left: 3px solid #cccccc;
    background-color: rgba(255, 255, 255, 0.6);
}

.karinji-entry blockquote p:last-child {
    margin-bottom: 0;
}

.karinji-entry a {
    color: #555555;
    text-decoration: underline;
}

.karinji-entry a:hover {
    color: #888888;
}

.karinji-entry img {
    max-width: 100%;
    height: auto;
}

.karinji-entry figure {
    margin: 0 0 1.6em;
}

.karinji-entry hr {
    margin: 2.4em 0;
    border: 0;
    border-top: 1px dotted gray;
}

/* 表 — 永代供養ページの .ec-table と同じトーン */
.karinji-entry table {
    width: 100%;
    margin: 0 0 1.6em;
    border-collapse: collapse;
    line-height: 2em;
}

.karinji-entry th,
.karinji-entry td {
    padding: 1em;
    border: 1px solid #dddddd;
    background-color: #ffffff;
    text-align: left;
    font-size: 1rem;
    vertical-align: top;
}

.karinji-entry th {
    background-color: rgb(246, 246, 246);
    font-weight: 700;
    white-space: nowrap;
}

/* ボタン — .skbtn / .kmapb と同じ配色 */
.karinji-entry .btn,
.karinji-entry a.btn {
    display: inline-block;
    margin: 0.4em 0;
    padding: 0.8em 2em;
    background-color: #444444;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: opacity 0.3s;
}

.karinji-entry .btn:hover,
.karinji-entry a.btn:hover {
    opacity: 0.75;
    color: #ffffff;
}

/* WordPress 標準クラス */
.karinji-entry .alignleft {
    float: left;
    margin: 0 1.5em 1em 0;
}

.karinji-entry .alignright {
    float: right;
    margin: 0 0 1em 1.5em;
}

.karinji-entry .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.karinji-entry .alignwide,
.karinji-entry .alignfull {
    max-width: 100%;
}

.karinji-entry .wp-caption {
    max-width: 100%;
}

.karinji-entry .wp-caption-text,
.karinji-entry figcaption {
    font-size: 0.85em;
    line-height: 1.8em;
    color: #666666;
    text-align: center;
}

.karinji-entry:after {
    content: "";
    display: block;
    clear: both;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==================================================
   2. お知らせ（投稿）一覧・詳細
   ================================================== */

.news-list {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.news-list li {
    list-style: none;
}

.news-item {
    padding: 1.6em 0;
    border-bottom: 1px dotted rgb(153, 153, 153);
}

.news-item:first-child {
    border-top: 1px dotted rgb(153, 153, 153);
}

.news-item a {
    display: block;
    color: #444444;
    text-decoration: none;
    transition: opacity 0.3s;
}

.news-item a:hover {
    opacity: 0.7;
}

.news-date {
    display: block;
    font-size: 0.9em;
    letter-spacing: 0.1em;
    color: #777777;
    line-height: 2em;
}

.news-title {
    display: block;
    font-size: 1.1em;
    line-height: 1.9em;
}

.news-empty {
    text-align: center;
    line-height: 2.5em;
}

.single-news-date {
    display: block;
    margin-bottom: 2.5em;
    font-size: 0.9em;
    letter-spacing: 0.1em;
    color: #777777;
    text-align: left;
}

/* ページ送り */
.karinji-pagination {
    margin-top: 3em;
    text-align: center;
    line-height: 2.6em;
}

.karinji-pagination .page-numbers {
    display: inline-block;
    min-width: 2.6em;
    margin: 0 0.2em;
    padding: 0 0.4em;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    color: #444444;
    text-decoration: none;
}

.karinji-pagination .page-numbers.current,
.karinji-pagination .page-numbers:hover {
    background-color: #444444;
    border-color: #444444;
    color: #ffffff;
}

.karinji-pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
}

/* 前後の記事 */
.karinji-post-nav {
    margin-top: 3em;
    text-align: center;
    line-height: 2.6em;
}

.karinji-post-nav a {
    display: inline-block;
    margin: 0 0.8em;
    color: #555555;
}

/* ==================================================
   3. トップページ「お知らせ」枠の中身
   ------------------------------------------------
   v0.1.x までは Google スプレッドシートを枠に埋め込んでいました（.in_wra / .new_frame）。
   v0.2.0 からは管理画面の「お知らせ」（投稿）の最新5件を出しています。
   位置・幅は旧枠と同じにし、高さだけは件数に合わせて伸びるようにしています
   （旧枠は 200px 固定＋スクロールでした）。
   ================================================== */

.topnews_wra {
    display: inline-block;
    vertical-align: top;
    width: 80%;
    margin-left: 6%;
    /* 1件しか無くても枠が痩せないように、旧枠と同じ高さを下限にする */
    min-height: 200px;
    /* 旧 .new_frame の padding-top 4.5% にあたる、見出しとの高さ合わせ */
    padding-top: 1.2em;
    box-sizing: border-box;
    text-align: left;
}

/* 一覧ページ（/news/）より少し詰めて、5件が枠に収まるようにする */
.topnews-list .news-item {
    padding: 0.9em 0;
}

.topnews-list .news-item a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1.4em;
}

.topnews-list .news-date {
    flex: 0 0 auto;
    line-height: 2em;
}

.topnews-list .news-title {
    flex: 1 1 16em;
    font-size: 1em;
    line-height: 2em;
}

.topnews_more_w {
    margin: 1.4em 0 0;
    text-align: right;
}

.topnews_more {
    color: #555555;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: opacity 0.3s;
}

.topnews_more:hover {
    opacity: 0.7;
}

/* お知らせが1件も無いとき */
.topnews_empty {
    margin: 0;
    line-height: 2.5em;
}

@media screen and (max-width: 600px) {
    .topnews_wra {
        /* 旧 .in_wra のスマホ指定（幅100% / 下余白10%）に合わせる */
        width: 100%;
        margin: 0 0 10%;
        min-height: 160px;
        padding-top: 0.6em;
    }

    /* 横に並べる余裕が無いので、日付を上・題名を下にする */
    .topnews-list .news-item a {
        display: block;
    }

    .topnews-list .news-item {
        padding: 1.1em 0;
    }
}

/* ==================================================
   4. Contact Form 7
   ================================================== */

.karinji-form {
    text-align: left;
}

.karinji-form dl {
    margin: 0 0 2em;
}

.karinji-form dt {
    margin-bottom: 0.4em;
    font-weight: 700;
    line-height: 2em;
}

.karinji-form dd {
    margin: 0 0 1.8em;
}

/* Contact Form 7 は入力欄を自動で <p> で包むため、
   本文用の段落余白（.karinji-entry p）が二重にかかってしまう。
   フォーム内だけ打ち消す。 */
.karinji-form dt p,
.karinji-form dd p {
    margin: 0;
}

.karinji-form dl p:empty {
    display: none;
}

.karinji-required {
    display: inline-block;
    margin-left: 0.6em;
    padding: 0.1em 0.7em;
    background-color: #8b1a1a;
    color: #ffffff;
    font-size: 0.75em;
    font-weight: 400;
    letter-spacing: 0.1em;
    vertical-align: 0.15em;
}

.karinji-optional {
    display: inline-block;
    margin-left: 0.6em;
    padding: 0.1em 0.7em;
    background-color: #888888;
    color: #ffffff;
    font-size: 0.75em;
    font-weight: 400;
    letter-spacing: 0.1em;
    vertical-align: 0.15em;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: 0.7em 0.8em;
    border: 1px solid #cccccc;
    border-radius: 0;
    background-color: #ffffff;
    box-sizing: border-box;
    font-family: "Shippori Mincho", serif;
    font-size: 1rem;
    line-height: 1.8em;
    color: #333333;
    -webkit-appearance: none;
    appearance: none;
}

.wpcf7 select {
    background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(1.35em), calc(100% - 13px) calc(1.35em);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.4em;
}

.wpcf7 textarea {
    height: 12em;
    resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
    border-color: #444444;
    outline: none;
}

.wpcf7 .wpcf7-list-item {
    display: block;
    margin: 0 0 0.4em;
}

.wpcf7 .wpcf7-list-item-label {
    padding-left: 0.4em;
}

.karinji-form-submit {
    margin-top: 2.5em;
    text-align: center;
}

.wpcf7 input[type="submit"] {
    min-width: 60%;
    padding: 1em 2em;
    border: none;
    border-radius: 0;
    background-color: #444444;
    color: #ffffff;
    font-family: "Shippori Mincho", serif;
    font-size: 1.05rem;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: opacity 0.3s;
    -webkit-appearance: none;
    appearance: none;
}

.wpcf7 input[type="submit"]:hover {
    opacity: 0.75;
}

.wpcf7 input[type="submit"]:disabled {
    opacity: 0.5;
    cursor: default;
}

.wpcf7 .wpcf7-spinner {
    margin: 0 0 0 1em;
}

/* 検証メッセージ */
.wpcf7 form .wpcf7-response-output {
    margin: 2em 0 0;
    padding: 1em 1.2em;
    border-width: 1px;
    line-height: 2em;
    text-align: center;
}

.wpcf7 .wpcf7-not-valid-tip {
    margin-top: 0.4em;
    font-size: 0.9em;
    line-height: 1.8em;
    color: #8b1a1a;
}

.wpcf7 .wpcf7-not-valid {
    border-color: #8b1a1a;
    background-color: #fdf6f6;
}

/* Honeypot 対策フィールドは常に隠す（保険） */
.wpcf7 .wpcf7-honeypot-field,
.wpcf7 input[name^="karinji-hp"] {
    display: none !important;
}

.karinji-form-note {
    margin-top: 2.5em;
    padding-top: 1.5em;
    border-top: 1px dotted gray;
    font-size: 0.9em;
    line-height: 2.2em;
    color: #555555;
}

@media screen and (max-width: 600px) {
    .wpcf7 input[type="submit"] {
        width: 100%;
        min-width: 0;
    }
}

/* ==================================================
   5. 404 / 検索結果
   ================================================== */

.karinji-notfound {
    text-align: center;
    line-height: 2.5em;
}

.karinji-notfound .karinji-backlinks {
    margin-top: 2.5em;
}

.karinji-notfound .karinji-backlinks a {
    display: inline-block;
    margin: 0.4em 0.6em;
    padding: 0.7em 1.8em;
    background-color: #444444;
    color: #ffffff;
    letter-spacing: 0.1em;
}

.karinji-notfound .karinji-backlinks a:hover {
    opacity: 0.75;
}

/* ==================================================
   6. 保険
   ================================================== */

/* JS が読めなかった場合でも本文が消えないようにする。
   （.fadeUpTrigger は既定で opacity:0 のため） */
.no-js .fadeUpTrigger {
    opacity: 1;
}

/* ==================================================
   7. フッターメニューの区切り「　|」
   旧サイトはリンクの文字そのものに区切りが入っていました
   （例:「　護摩祈祷　 |」）。管理画面から編集しやすいよう
   区切りだけ CSS に出しています。見え方は旧サイトと同じです。
   ================================================== */

/* U+3000 = 全角スペース。
   CSS のエスケープ「\3000 」は直後の半角スペース1個を区切り記号として
   食べてしまうため、半角スペースは別の文字列にして連結する。 */
.footer-menu li:not(:first-child) a::before {
    content: "\3000";
}

.footer-menu li:not(:last-child) a::after {
    content: "\3000" " |";
}

/* ==================================================
   8. メニュー項目が増えたときの調整（v0.2.0）
   ------------------------------------------------
   旧サイトのメニューは5項目（ホーム＋4つ）でした。
   v0.2.0 で「大柴燈護摩・お知らせ・お問い合わせ」を足して8項目になったため、
   下の2か所だけ、はみ出さないように余白を詰めています。

   ・トップページのロゴ左右（.t_ul / .t_ul2）は先頭4件しか出さない設計のため調整不要
     （件数の制御は inc/nav.php の KARINJI_HERO_NAV_COUNT）
   ・フッターメニューは元から折り返す作りなので、そのままで8項目に耐えます
   ================================================== */

/* --------------------------------------------------
   8-1. 下層ページ上部の横並びメニュー（.gnavi）

   旧サイトは5項目でも、画面幅がおよそ 850px を下回ると
   メニューが黒帯からはみ出し、白い文字が白い背景に重なって
   読めなくなっていました（元々の不具合）。
   8項目にすると 1280px でも同じことが起きるため、次の3つを直しています。

     (a) <ul> の既定の左余白 40px を消す（右寄せなので見た目は変わりません）
     (b) 画面が狭いほど項目の左右余白を詰めて、1行に収める
     (c) 黒帯（.con_wrap）がメニューを含む高さになるようにする
         → 万一2行になっても、白文字が黒帯の中に収まって読めます

   ※ 1000px 以上での見え方は旧サイトと同じ高さ・同じ位置のままです。
   -------------------------------------------------- */
.gnavi {
    padding-left: 0;          /* (a) */
    margin-bottom: 0;         /* (c) 黒帯を余計に高くしないため */
    row-gap: 8px;             /* 折り返したときの行間（元は li の margin-bottom:20px） */
}

.gnavi li {
    margin-bottom: 0;
}

/* (c) ⚠ スマホ（600px以下）では .con_wrap は非表示（style.css）なので、
   ここで display を上書きしないよう 601px 以上に限定する。
   限定を外すと、スマホに黒帯が出てページが 153px 伸びる。 */
@media screen and (min-width: 601px) {
    .con_wrap {
        display: flow-root;   /* 浮かせたメニューを黒帯の中に含める */
    }
}

/* (b) 画面幅ごとの詰め方（元は左右30px） */
.gnavi li a {
    padding: 10px 24px;
}

@media screen and (max-width: 1200px) {
    .gnavi li a {
        padding: 10px 18px;
    }
}

@media screen and (max-width: 1080px) {
    .gnavi li a {
        padding: 10px 13px;
    }
}

@media screen and (max-width: 980px) {
    .gnavi li a {
        padding: 10px 9px;
    }
}

@media screen and (max-width: 900px) {
    .gnavi li a {
        padding: 10px 6px;
        font-size: 0.95em;
    }
}

/* --------------------------------------------------
   8-2. スマホの引き出しメニュー（.hhlis_w）
   縦書きのため、line-height が「文字列の太さ」、
   項目の左右 margin が「項目どうしの間隔」になります。
   元の値（行間2.5em＋標準の1em余白）だと6項目目から画面の外に出てしまうので、
   8〜9項目が画面内に収まる幅に詰めています。
   -------------------------------------------------- */
@media screen and (max-width: 600px) {
    .hhlis_w {
        line-height: 2em;
    }

    .hhlis_w .h_lis {
        margin: 0 0.3em;
    }
}

/* ==================================================
   9. v0.3.0 で足したもの
   （電話・メールのリンク／次回の日程／プライバシーポリシー）
   ================================================== */

/* --------------------------------------------------
   9-1. 電話・メールのリンク

   スマホでタップして発信・メール作成ができるようにしただけで、
   見た目は文字のままにします（色は周りの文字と同じ・下線なし）。
   フッターのお問い合わせ欄は白文字、アクセス欄は黒文字なので、
   色は指定せず「周りに合わせる（inherit）」にしています。
   -------------------------------------------------- */
.karinji-tel,
.karinji-mail {
    color: inherit;
    text-decoration: none;
    /* 電話番号が途中で改行されないようにする */
    white-space: nowrap;
}

/* パソコンで、リンクだと分かるように（触ったときだけ下線） */
.karinji-tel:hover,
.karinji-mail:hover,
.karinji-tel:focus,
.karinji-mail:focus {
    text-decoration: underline;
}

/* メールアドレスは長いので、狭い画面では折り返しを許す */
.karinji-mail {
    white-space: normal;
    word-break: break-all;
}

/* --------------------------------------------------
   9-2. 次回の日程（inc/dates.php）

   見出しのすぐ下に小さく添える1行です。
   text-align は指定しません（見出しと同じ寄せ方になります）。
   -------------------------------------------------- */
.karinji-next {
    margin: -1.5% 0 3%;
    font-size: 0.85em;
    letter-spacing: 0.1em;
    color: #555555;
}

/* 下層ページ（見出しの下）は、見出しとの間隔を少し詰めて、
   次に来る写真との間には少しだけ余白を空ける */
.k_about .karinji-next {
    margin-top: -2%;
    margin-bottom: 1.5%;
}

@media screen and (max-width: 600px) {
    .karinji-next {
        margin: 0 0 5%;
        font-size: 0.8em;
    }

    .k_about .karinji-next {
        margin-top: 0;
        margin-bottom: 4%;
    }
}

/* --------------------------------------------------
   9-3. フッターのプライバシーポリシー

   「設定 > プライバシー」でページを選び、公開したときだけ出ます。
   -------------------------------------------------- */
.karinji-privacy-link {
    color: inherit;
    text-decoration: none;
}

.karinji-privacy-link:hover,
.karinji-privacy-link:focus {
    text-decoration: underline;
}

.karinji-privacy-sep {
    margin: 0 0.4em;
    opacity: 0.5;
}