@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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

/* すべてのセルに枠線を付加する */
.tablepress thead th,
.tablepress tbody tr:first-child td,
.tablepress tbody td,
.tablepress tfoot th {
    border: 1px solid black !important;
}

.table td {
       background: #fff;
}


/*投稿日を非表示にする、おまじない*/
.post-date {
  display: none;
}

/*更新日を非表示にする、おまじない*/
.post-update{
  display: none;
}


/************************************
** ■Table（表）背景色の設定
************************************/
table td {
background: #ffffff;
}




img[width="1"] {
 display: none;
}






/************************************
** タイムラインカスタマイズ
************************************/
.timeline-item:before {
  background: #f8c678;/*好きな色に*/
  top:22px;
  width: 17px;
  height: 17px;
  left: 103px;
}
.timeline-item-content{
  border-left: 3px rgba(25,25,25,.12) solid;
}
.timeline-box{
  border:initial;
}
.timeline-item-label{
  color:rgba(25,25,25,.7);
}





/* テーブル全体の背景を白にする */
.entry-content table, 
.entry-content table th, 
.entry-content table td {
    background-color: #fff !important;
    border-color: #e0e0e0; /* 枠線の色を薄くしたい場合はここを調整 */
}
@media screen and (max-width: 480px){
.timeline-item-content {
  border-left:initial;
}
.timeline>li.timeline-item {
  border-left: 3px rgba(25,25,25,.12) solid;
}
.timeline-item:before {
  left: -10px;
}
}
/*以下はアニメーションをつけたい場合*/
.timeline li:nth-child(1):before{
  opacity:0.5;
  animation: timeline_circle 1.5s infinite;
}
@keyframes timeline_circle{
100% {
  opacity:1;
  transform: scale(1.3, 1.3);
}
}







/*スマホメニューを横スクロール*/
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#3a3a3a; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#a3a3a3; /* マウスホバー時の文字色 */
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
  #header-container .menu-mobile{
    display:none;
  }
  .navi-in > .menu-mobile{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  #header-container #navi a{
    font-size:1em;
    padding: 1em 1em;
  }
  #header-container .navi-in > ul > .menu-item-has-children > a::after{
    display:none;
  }
  #navi .navi-in > .menu-mobile li {
    height: auto;
    line-height: 0;
  }
  .mblt-header-mobile-buttons {
    margin-top: 53px;
  }
}


/* グローバルメニューを広くする */
.navi-in > ul {
  flex-wrap: wrap;
}

/* メニュー文字を省略しない */
.navi-in a {
  white-space: nowrap;
}




/************************************
** 見出しリセット
************************************/
/*見出しリセット*/
.article h2 {
  position: relative;
  padding-bottom: .5em;
  border-bottom: 4px solid #ccc;
  background: #ffffff;
}
.article h2::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background: #ffffff;
  background-color: #000000;
}

/* 見出しカスタマイズ */
/* H2 */
.article h2{
background:none;
padding: 0;
  border-bottom: solid 5px black;
}


/* H3 */
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
}

/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}


































/* ============================================================
   明石らいふ カスタムCSS — ミニマル白ベース リデザイン
   WordPress管理画面 > 外観 > カスタマイズ > 追加CSS に貼り付け
   Cocoon テーマ対応
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Noto+Serif+JP:wght@400;500&display=swap');

/* ---------- ベース変数 ---------- */
:root {
  --al-white:      #ffffff;
  --al-bg:         #faf9f7;
  --al-border:     #e8e4df;
  --al-text:       #1a1a1a;
  --al-sub:        #888888;
  --al-accent:     #b5895a;   /* 明石の砂浜・瓦をイメージしたウォームゴールド */
  --al-radius:     6px;
  --al-font-sans:  'Noto Sans JP', sans-serif;
  --al-font-serif: 'Noto Serif JP', serif;
}

/* ---------- 全体リセット ---------- */
body {
  font-family: var(--al-font-sans) !important;
  background-color: var(--al-bg) !important;
  color: var(--al-text) !important;
  -webkit-font-smoothing: antialiased;
}

/* ---------- ヘッダー ---------- */
#header,
.header-container,
.site-header {
  background: var(--al-white) !important;
  border-bottom: 1px solid var(--al-border) !important;
  box-shadow: none !important;
}

/* サイト名 */
#header .logo,
.header-logo-link,
.site-name-text {
  font-family: var(--al-font-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--al-text) !important;
  letter-spacing: 0.08em !important;
}

/* ナビゲーション */
#navi .menu-item a,
.navi-in .menu-item a {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #555 !important;
  letter-spacing: 0.08em !important;
  padding: 8px 14px !important;
  transition: color 0.2s ease !important;
}

#navi .menu-item a:hover,
.navi-in .menu-item a:hover {
  color: var(--al-accent) !important;
  background: transparent !important;
}

/* ---------- メインビジュアル / キャッチコピー ---------- */
.visual-container,
#visual {
  background: var(--al-white) !important;
  border-bottom: 1px solid var(--al-border) !important;
}

/* ---------- コンテンツエリア ---------- */
#contents,
.contents-container {
  background: var(--al-bg) !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 40px 24px !important;
}

/* ---------- 記事カード ---------- */
.card-wrap,
.entry-card-wrap {
  background: var(--al-white) !important;
  border: 1px solid var(--al-border) !important;
  border-radius: var(--al-radius) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
  overflow: hidden !important;
}

.card-wrap:hover,
.entry-card-wrap:hover {
  border-color: var(--al-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
}

/* カードタイトル */
.entry-card-title,
.card-title {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: var(--al-text) !important;
  margin: 8px 12px !important;
}

.entry-card-wrap:hover .entry-card-title,
.card-wrap:hover .card-title {
  color: var(--al-accent) !important;
}

/* カードサムネイル */
.entry-card-thumb img,
.card-thumb img {
  border-radius: 0 !important;
  transition: opacity 0.2s ease !important;
}

.entry-card-wrap:hover .entry-card-thumb img {
  opacity: 0.92 !important;
}

/* カテゴリバッジ */
.cat-label,
.entry-card-cat {
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  background: var(--al-accent) !important;
  color: #fff !important;
  border-radius: 2px !important;
  padding: 2px 6px !important;
  border: none !important;
}

/* 投稿日 */
.date,
.entry-card-date,
.post-date {
  font-size: 10px !important;
  color: #bbb !important;
  letter-spacing: 0.05em !important;
}

/* ---------- トップ新着記事タイトル（カード外リスト） ---------- */
.entry-title a,
h2.entry-title a,
.post-list-title a,
.home .entry-card-title,
.home .card-title,
.list article h2 a,
.article-list-title a,
.a-wrap .entry-card-title {
  font-family: var(--al-font-serif) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--al-text) !important;
  line-height: 1.75 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.2s !important;
}

.entry-title a:hover,
.a-wrap .entry-card-title:hover {
  color: var(--al-accent) !important;
}

/* ---------- サイドバー ---------- */
#sidebar {
  background: transparent !important;
}

.widget {
  background: var(--al-white) !important;
  border: 1px solid var(--al-border) !important;
  border-radius: var(--al-radius) !important;
  box-shadow: none !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

/* ウィジェットタイトル */
.widget-title,
.widgettitle {
  font-family: var(--al-font-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  color: #333 !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--al-border) !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
  /* Cocoonデフォルトの装飾をリセット */
  background: none !important;
  border-left: none !important;
  padding-left: 0 !important;
}

/* ---------- 記事本文 ---------- */
.entry-content,
.article-body {
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #333 !important;
  font-weight: 300 !important;
}

.entry-content h2 {
  font-family: var(--al-font-serif) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--al-text) !important;
  border-left: 3px solid var(--al-accent) !important;
  border-bottom: 1px solid var(--al-border) !important;
  padding: 6px 14px !important;
  margin: 40px 0 20px !important;
  background: none !important;
}

.entry-content h3 {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--al-text) !important;
  border-left: 2px solid var(--al-border) !important;
  padding-left: 12px !important;
  margin: 28px 0 14px !important;
  background: none !important;
}

.entry-content a {
  color: var(--al-accent) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(181,137,90,0.3) !important;
  transition: border-color 0.2s !important;
}

.entry-content a:hover {
  border-bottom-color: var(--al-accent) !important;
}

/* ---------- 記事タイトル (個別ページ) ---------- */
.entry-title,
h1.entry-title {
  font-family: var(--al-font-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  color: var(--al-text) !important;
  letter-spacing: 0.03em !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}

/* ---------- パンくずリスト ---------- */
.breadcrumb,
#breadcrumb {
  font-size: 10px !important;
  color: var(--al-sub) !important;
  background: transparent !important;
  padding: 12px 0 !important;
  letter-spacing: 0.05em !important;
}

.breadcrumb a {
  color: var(--al-sub) !important;
  text-decoration: none !important;
}

/* ---------- ページネーション ---------- */
.page-numbers {
  background: var(--al-white) !important;
  border: 1px solid var(--al-border) !important;
  color: var(--al-text) !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  min-width: 32px !important;
  height: 32px !important;
  line-height: 30px !important;
  padding: 0 10px !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.page-numbers.current,
.page-numbers:hover {
  background: var(--al-accent) !important;
  border-color: var(--al-accent) !important;
  color: #fff !important;
}

/* ---------- フッター ---------- */
#footer,
.footer-container {
  background: #1a1a1a !important;
  color: #888 !important;
  border-top: none !important;
}

#footer a,
.footer-container a {
  color: #888 !important;
  font-size: 11px !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

#footer a:hover {
  color: var(--al-accent) !important;
}

.footer-logo,
#footer .site-name-text {
  font-family: var(--al-font-serif) !important;
  color: #fff !important;
  font-size: 16px !important;
  letter-spacing: 0.1em !important;
}

.copyright {
  font-size: 10px !important;
  color: #555 !important;
}

/* ---------- タグクラウド ---------- */
.tag-cloud-link {
  font-size: 11px !important;
  background: transparent !important;
  border: 1px solid var(--al-border) !important;
  color: var(--al-sub) !important;
  border-radius: 3px !important;
  padding: 3px 8px !important;
  transition: all 0.2s !important;
}

.tag-cloud-link:hover {
  border-color: var(--al-accent) !important;
  color: var(--al-accent) !important;
  background: transparent !important;
}

/* ---------- 関連記事 ---------- */
.related-entry-card-wrap {
  background: var(--al-white) !important;
  border: 1px solid var(--al-border) !important;
  border-radius: var(--al-radius) !important;
  box-shadow: none !important;
  transition: border-color 0.2s, transform 0.2s !important;
}

.related-entry-card-wrap:hover {
  border-color: var(--al-accent) !important;
  transform: translateY(-2px) !important;
}

/* ---------- 検索フォーム ---------- */
.search-form input[type="search"],
.wp-block-search__input {
  border: 1px solid var(--al-border) !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  background: var(--al-white) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}

.search-form input[type="search"]:focus {
  border-color: var(--al-accent) !important;
}

.search-form input[type="submit"],
.wp-block-search__button {
  background: var(--al-accent) !important;
  border: none !important;
  color: #fff !important;
  font-size: 12px !important;
  padding: 8px 16px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
}

.search-form input[type="submit"]:hover {
  opacity: 0.85 !important;
}

/* ---------- ボタン全般 ---------- */
.btn,
.button,
a.more-link {
  background: var(--al-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  padding: 10px 24px !important;
  box-shadow: none !important;
  transition: opacity 0.2s !important;
}

.btn:hover,
.button:hover,
a.more-link:hover {
  opacity: 0.85 !important;
  color: #fff !important;
}

/* ---------- 余白・セクション区切り ---------- */
.archive-header {
  padding: 32px 0 24px !important;
  border-bottom: 1px solid var(--al-border) !important;
  margin-bottom: 32px !important;
}

.archive-title {
  font-family: var(--al-font-serif) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--al-text) !important;
}

/* ---------- スクロールバー (モダンブラウザ) ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--al-bg); }
::-webkit-scrollbar-thumb { background: var(--al-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--al-accent); }

/* ============================================================
   END OF CUSTOM CSS
   ============================================================ */

/* ---------- シェアボタン（単色・ミニマル） ---------- */
.sns-share-buttons,
.share-buttons,
.l-share-buttons {
  display: flex !important;
  gap: 8px !important;
  margin: 32px 0 !important;
}

/* 全ボタン共通リセット */
.sns-share-buttons a,
.share-button,
.share-btn,
.twitter-share-button-link,
.facebook-share-button-link,
.hatenabookmark-share-button-link,
.line-share-button-link,
.b-share-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 1 !important;
  height: 40px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease, transform 0.15s ease !important;
  box-shadow: none !important;
}

.sns-share-buttons a:hover,
.share-button:hover {
  opacity: 0.8 !important;
  transform: translateY(-1px) !important;
}

/* 全SNS共通: #1a1a1a で統一 */
.twitter-share-button-link,
.x-share-button-link,
.facebook-share-button-link,
.hatenabookmark-share-button-link,
.line-share-button-link,
.b-share-button {
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------- フォローボタン ---------- */
.follow-button-wrap,
.sns-follow-buttons,
.l-follow-buttons {
  text-align: center !important;
  margin: 24px 0 !important;
}

.follow-label,
.follow-button-wrap p {
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  color: #aaa !important;
  margin-bottom: 12px !important;
}

.follow-button,
.sns-follow-buttons a,
.follow-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  margin: 0 6px !important;
  background: #f5f3f0 !important;
  color: #555 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  border: 1px solid var(--al-border) !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.follow-button:hover,
.sns-follow-buttons a:hover {
  background: var(--al-accent) !important;
  color: #fff !important;
  border-color: var(--al-accent) !important;
  transform: translateY(-2px) !important;
}

/* フォローエリアのテキスト「akashilifeをフォローする」 */
.follow-button-wrap > p,
.follow-title {
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  color: #aaa !important;
  font-weight: 400 !important;
  margin-bottom: 14px !important;
}

/* ---------- キャッチフレーズ（明石生活＆観光情報マガジン） ---------- */
.site-catch,
.catchcopy,
#catchcopy,
.header-catchphrase,
.site-description,
.tagline {
  font-family: var(--al-font-sans) !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 0.35em !important;
  color: #aaa !important;
  text-align: center !important;
  background: none !important;
  border: none !important;
  padding: 6px 0 !important;
  display: block !important;
}

/* Cocoon が付けるボックス装飾をリセット */
.site-catch::before,
.site-catch::after {
  display: none !important;
}

/* ---------- キャッチフレーズ 上書き調整 ---------- */
.site-catch,
.catchcopy,
#catchcopy,
.header-catchphrase,
.site-description,
.tagline {
  font-size: 13px !important;
  letter-spacing: 0.3em !important;
  color: #bbb !important;
  margin-bottom: 4px !important;
}

/* ---------- 本文フォントサイズ 16px ---------- */
.entry-content,
.article-body,
.post-body {
  font-size: 16px !important;
}



.sns-share-buttons .share-button .button-caption {
  display: none !important;
}