@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*
body {
  background-color: #eae894;	
}
*/

.sns-share {
  display: none;
}
.comment-area {
  display: none;
}
.logo-image {
  margin-top: 15px;
}
.navi-in .has-icon {
  display: none;	
}
.navi-in > ul .sub-menu {
  background: #b28c6e;
}
.navi-in > ul .sub-menu a {
  color: #fff;
}
.navi-in > ul .sub-menu, .appeal-button, .carousel .a-wrap, .recommended .navi-entry-cards a, .index-tab-buttons .index-tab-button, .entry-card-wrap.a-wrap, .ect-entry-card .a-wrap img, .ect-big-card-first .a-wrap:not(:first-of-type) img, .eye-catch, .sns-buttons a, .blogcard-wrap, .is-style-text a .blogcard-label, .btn, .btn-wrap > a, .ranking-item-image-tag img, .ranking-item-link-buttons a, .toggle-button, table tfoot td > a, .rect-entry-card .a-wrap .related-entry-card-thumb img, .rect-mini-card .a-wrap .related-entry-card-thumb img, .rect-vertical-card .a-wrap, .pager-post-navi.post-navi-default a img, .pager-post-navi.post-navi-square a, .go-to-top-button, figure.is-style-shadow img, .is-style-shadow figure, .is-style-toggle-accordion, .keyboard-key, .author-box, .cta-thumb img, a.rsswidget img, .fb-like-box, .widget_media_image a img, .widget-entry-cards:not(.card-large-image) a img, .widget-entry-cards.card-large-image a, .page-numbers:not(.current):not(.dots):hover, div.search-form:hover, input[type="submit"], .kaerebalink-link1 a, .booklink-link2 a, .tomarebalink-link1 a, .product-item-buttons a, .iwe-shadow-paper img, .iconlist-box.is-style-no-icon li a {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
.tagline, #index-tab-1:checked~.index-tab-buttons .index-tab-button[for="index-tab-1"], #index-tab-2:checked~.index-tab-buttons .index-tab-button[for="index-tab-2"], #index-tab-3:checked~.index-tab-buttons .index-tab-button[for="index-tab-3"], #index-tab-4:checked~.index-tab-buttons .index-tab-button[for="index-tab-4"], .cat-label, .pagination .current, .article h2::after, blockquote p:first-of-type::before, .blogcard-label, .timeline-item::before, ol.toc-list>li::before, .sns-share-message, .author-widget-name, .go-to-top-button, .wp-calendar-table [id$="today"], .mobile-footer-menu-buttons, .is-style-color-head th {
  background: #b28c6e;
}
#index-tab-1:checked~.index-tab-buttons .index-tab-button[for="index-tab-1"], #index-tab-2:checked~.index-tab-buttons .index-tab-button[for="index-tab-2"], #index-tab-3:checked~.index-tab-buttons .index-tab-button[for="index-tab-3"], #index-tab-4:checked~.index-tab-buttons .index-tab-button[for="index-tab-4"], .pagination .current, .article h3, .sidebar h2, .sidebar h3, .toc, .author-widget-name:after {
  border-color: #b28c6e;
}
.slick-dots li button:before, .slick-dots li.slick-active button:before, .archive-title span, .article h4::before, .article h5, .sidebar h2, .sidebar h3, ul.toc-list>li::before, .is-style-normal-card .blogcard-label, .search-form div.sbtn::after, .search-submit, .pager-post-navi a .iconfont, .pager-post-navi a.prev-next-home, .menu-drawer>li>a::before {
  color: #b28c6e;
}
.under-entry-content h2:after {
  height: 2px;
}
 h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}
.sidebar h2, .sidebar h3 {
  background: rgba(255, 245, 220, 0.9);
  font-size: 90%:
}
.ect-vertical-card .entry-card-wrap {
  width: 48.5%;
}
.ect-vertical-card {
  column-gap: 3%;
}
.list {
  row-gap: 2em;
}
.wp-block-group ul li a {
  padding: 0 0;
  padding-left: 1em;
  font-size: 85%;
}
.wp-block-group ul li a::before {
  margin-top: -0.3em;
  color: #b28c6e;
  font-size: 80%;
  top: 50%;
  left: 0.2em;
}
label.wp-block-search__label {
  display: none;
}
.public-page .search-edit, .public-page input[type="text"], .public-page input[type="password"], .public-page input[type="date"], .public-page input[type="datetime"], .public-page input[type="email"], .public-page input[type="number"], .public-page input[type="search"], .public-page input[type="tel"], .public-page input[type="time"], .public-page input[type="url"], .public-page textarea, .public-page select {
  border-radius: 2px;
  border-width: 1px;
  border-color: rgba(153, 153, 153, 0.4);
}
:root :where(.wp-element-button, .wp-block-button__link) {
  background-color: #b28c6e;
  padding-top: calc(0.15em + 2px);
  padding-right: calc(1.333em + 2px);
  padding-bottom: calc(0.15em + 2px);
  padding-left: calc(1.333em + 2px);
}
.eye-catch .cat-label {
  top: 0.85em;
  left: 0.85em;
}


/* ==========================================================================
   洛陽三十三所 全33箇所一覧テーブル - レスポンシブ対応CSS
   Cocoon (wp-block-table + scrollable-table) 用
   ========================================================================== */

/* テーブル全体のベース調整 */
.entry-content .wp-block-table table.has-fixed-layout {
  width: 100%;
  table-layout: auto; /* 列幅をコンテンツに応じて自動調整 */
  border-collapse: collapse;
}

/* ヘッダー・セルの基本スタイル */
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
  padding: 0.6em 0.9em;
  white-space: nowrap; /* 横スクロール前提でセル内改行を防止 */
  border: 1px solid #e0e0e0;
}

.entry-content .wp-block-table thead th {
  background-color: #f7f3ee;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* 1列目（番号）を横スクロール時も固定表示 */
.entry-content .wp-block-table th:first-child,
.entry-content .wp-block-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #fff;
  text-align: center;
  min-width: 3em;
}

.entry-content .wp-block-table thead th:first-child {
  z-index: 3; /* ヘッダー×1列目が重なる左上セルを最前面に */
}

/* スクロールコンテナ（Cocoon: .scrollable-table）の見た目調整 */
.entry-content .scrollable-table {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c9a97b #f2ede6;
  border-radius: 6px;
}

.entry-content .scrollable-table::-webkit-scrollbar {
  height: 8px;
}
.entry-content .scrollable-table::-webkit-scrollbar-thumb {
  background-color: #c9a97b;
  border-radius: 4px;
}
.entry-content .scrollable-table::-webkit-scrollbar-track {
  background-color: #f2ede6;
}

/* スクロール可能なことを示す右端グラデーションヒント */
.entry-content .scrollable-table.is-right-scrollable {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) calc(100% - 24px),
    rgba(0, 0, 0, 0.06) 100%
  ) no-repeat;
  background-size: 100% 100%;
}

/* ===== タブレット以下 ===== */
@media screen and (max-width: 768px) {
  .entry-content .wp-block-table th,
  .entry-content .wp-block-table td {
    padding: 0.5em 0.7em;
    font-size: 13px;
  }

  .entry-content .wp-block-table th:first-child,
  .entry-content .wp-block-table td:first-child {
    min-width: 2.5em;
  }
}

/* ===== スマートフォン ===== */
@media screen and (max-width: 480px) {
  .entry-content .wp-block-table th,
  .entry-content .wp-block-table td {
    padding: 0.45em 0.6em;
    font-size: 12px;
  }

  /* 寺名列だけは折り返し可にして横スクロール量を減らす */
  .entry-content .wp-block-table td:nth-child(2),
  .entry-content .wp-block-table th:nth-child(2) {
    white-space: normal;
    min-width: 8em;
  }
}

.page-title {
  max-width: 720px;
  margin: 0 auto 24px;
  font-size: 1.5em;
  border-left: 6px solid #c9a97b;
  padding-left: 0.6em;
}
/*
.temple-card {
  max-width: 720px;
  margin: 0 auto 28px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  padding: 24px 28px 30px;
}
*/
.temple-number {
  display: inline-block;
  background: #c9a97b;
  color: #fff;
  font-size: 0.8em;
  padding: 0.2em 0.9em;
  border-radius: 999px;
  margin-bottom: 0.5em;
  letter-spacing: 0.05em;
}
.temple-title {
  font-size: 1.3em;
  margin: 0 0 0.7em;
  border-bottom: 2px solid #e5ddd0;
  padding-bottom: 0.4em;
}
.info-heading {
  font-size: 1.05em;
  margin: 0.6em 0 0.7em;
  padding-left: 0.5em;
  border-left: 5px solid #a86b2d;
}
table.temple-info {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}
table.temple-info th, table.temple-info td {
  padding: 0.7em 0.9em;
  border: 1px solid #e5ddd0;
  vertical-align: top;
}
table.temple-info th {
  background: #f4ede2;
  width: 26%;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}
table.temple-info td a {
  color: #a86b2d;
}
.temple-map {
  margin-top: 1.2em;
}
.temple-map iframe {
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: 8px;
}
@media screen and (max-width: 480px) {
  body {
    padding: 10px;
  }
	/*
  .temple-card {
    padding: 18px 16px 24px;
  }
	*/
  table.temple-info th {
    width: 34%;
    white-space: normal;
    font-size: 0.9em;
  }
  .temple-map iframe {
    height: 280px;
  }
}

/* 巡礼日和 - サイドバーカテゴリー 子カテゴリのインデント */

/* 子カテゴリ（洛陽三十三所観音霊場、都七福神まいり）を1文字分インデント */
.widget_block .wp-block-categories-list .cat-item-5,
.widget_block .wp-block-categories-list .cat-item-6,
.widget_block .wp-block-categories-list .cat-item-8 {
  padding-left: 1em; /* 全角1文字ぶん */
}

/* 子カテゴリであることが視覚的にわかるよう、小さめのマーカーを追加（任意） */
.widget_block .wp-block-categories-list .cat-item-5 > a,
.widget_block .wp-block-categories-list .cat-item-6 > a,
.widget_block .wp-block-categories-list .cat-item-8 > a {
  position: relative;
}
.widget_block .wp-block-categories-list .cat-item-5 > a::before,
.widget_block .wp-block-categories-list .cat-item-6 > a::before,
.widget_block .wp-block-categories-list .cat-item-8 > a::before {
  content: "–";
  margin-right: 0.4em;
  color: #c9a97b;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
.header .header-in {
  display: none;
}
#navi .navi-in > .menu-mobile {
  display: none !important;
}
.mobile-menu-buttons {
  height: 90px;
}
.mobile-menu-buttons .menu-button {
    width: 85px;
}
.mobile-menu-buttons .menu-icon {
    text-align: center;
    width: 100%;
    display: block;
    font-size: 30px;
	color: #b28c6e;
}
.logo-menu-button img {
    max-height: 64px;
    display: block;
    margin: 0 auto;
    width: auto;
}
.logo-image {
  margin-top: 12px;
}
.logo-header img {
    height: 80px;
    width: auto;
}
.menu-close-button {
	color: #b28c6e;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
.logo-image {
  margin-top: 10px;
}
.logo-header img {
    height: 70px;
    width: auto;
}
}

@media screen and (max-width: 540px){
#navi {
  display: none;	
}
.ect-vertical-card .entry-card-wrap {
  width: 100%;
}
.list {
  row-gap: 2em;
}
.ect-vertical-card {
  column-gap: 3%;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}