/*---------------------------------------
 Theme Header
----------------------------------------*/
 /*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Astra Child is a child theme of Astra
Author: ryo nakamura
Author URI: https://ryoconsults.com/
Template: astra
Version: 1.0.0
*/

/*---------------------------------------
 基本フォント設定
----------------------------------------*/
body {
  font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif JP', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', serif !important;
}

/* 投稿ページ内の h1, h2 を #268080 に統一 */
.single-post h1,
.single-post main h1,
.single-post h2,
.single-post main h2 {
  color: #268080 !important;
}
/*---------------------------------------
 STEP
----------------------------------------*/

.infobox-content .infobox-title-section{
	margin-bottom: 30px;
}


/*---------------------------------------
 POST_LIST
----------------------------------------*/
.custom-posts-more-link a:hover {
  text-decoration: underline;
  color: #268080;
}


/*---------------------------------------
 FORM
----------------------------------------*/

select
 {
    height: 50px;
}
.eael-contact-form-7 .wpcf7-form p.privacy-note {
  font-size: 13px; /* または 0.75rem など */
 margin: 0 0 0 1em;
 margin-top: -30px;
}


/*---------------------------------------
 投稿ページ本文
----------------------------------------*/
main.single-post,
.single-post main {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
main.single-post h1,
.single-post main h1 {
  font-size: 2rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5rem;
}
main.single-post h2,
main.single-post h3,
.single-post main h2,
.single-post main h3 {
  color: #268080;
  margin: 1.5rem 0;
}
main.single-post img,
.single-post main img {
  max-width: 100%;
  margin: 2rem 0;
  border-radius: 6px;
}
main.single-post a,
.single-post main a {
  color: #0059a9;
  text-decoration: underline;
}
main.single-post a:hover,
.single-post main a:hover {
  text-decoration: none;
}

/* 投稿ページの日付表記をカスタマイズ */
.single-post .entry-meta,
.single-post .entry-meta .posted-on,
.single-post .entry-meta .published {
  color: #268080;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.5rem;
  display: block;
}

/* 投稿ページ全体の2カラムレイアウト固定 */
.single-post .ast-container {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
  gap: 2rem;
}

/* メインカラムは左側固定 */
.single-post #primary {
  flex: none;
  width: 760px;
  box-sizing: border-box;
}

/* サイドバーは右側固定 */
.single-post #secondary {
  flex: none;
  width: 300px;
  box-sizing: border-box;
}



/*---------------------------------------
 サイドバー（右カラム）
----------------------------------------*/
.ast-container {
  display: flex !important;
  gap: 2rem;
}
#primary {
  flex: 3;
}
#secondary {
  flex: 1;
  padding-left: 1rem;
  display: block !important;
}
/* ウィジェットエリア全体の背景はナシで、カードだけ際立たせる */
.widget-area {
  background: none;
  padding: 0;
  box-shadow: none;
}

/* 1. ウィジェットカード：静的表示（ホバーアニメーションなし） */
.widget {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: none; /* ← ホバー時の動きなし */
}

/* hover効果完全無効（念のため） */
.widget:hover {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* 2. ウィジェット内のリンク・ボタンカラーを明示（初期色上書き） */
.widget a {
  color: #268080 !important;
  text-decoration: underline;
}
.widget a:hover {
  color: #1c6666 !important;
  text-decoration: none;
}

/* ウィジェット内の submit ボタンの色も固定 */
.widget input[type="submit"],
.widget button {
  background-color: #268080 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  font-weight: bold;
}

.widget input[type="submit"]:hover,
.widget button:hover {
  background-color: #1c6666 !important;
}


/* ウィジェットタイトル */
.widget-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #268080;
  border-left: 4px solid #268080;
  padding-left: 0.6rem;
  margin-bottom: 1rem;
}

/* サイドバーウィジェット内の見出しサイズを小さく調整 */
.widget-area h2,
.widget-area h3 {
  font-size: 1rem;      /* 例：16px相当 */
  line-height: 1.4;
  margin-bottom: 0.8rem;
}

/* リスト（カテゴリや最近の投稿） */
.widget ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.widget ul li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}
.widget ul li::before {
  content: "▸";
  color: #268080;
  position: absolute;
  left: 0;
  font-size: 0.8rem;
  top: 0.15rem;
}


/*---------------------------------------
 サイドバー検索フォーム（全テーマ対応版）
----------------------------------------*/

/* 1. ブロックウィジェット用：wp-block-search に対応 */
.wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wp-block-search__input {
  flex: 1;
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

.wp-block-search__button {
  background-color: #268080;
  color: #ffffff;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  white-space: nowrap;
  min-width: 64px;
  cursor: pointer;
  display: inline-block;
}

.wp-block-search__button:hover {
  background-color: #1c6666;
}

/* 2. クラシックウィジェット形式にも対応（念のため） */
.widget form.search-form {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
}

.widget form.search-form input[type="search"] {
  flex: 1;
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

.widget form.search-form input[type="submit"] {
  background-color: #268080;
  color: #ffffff;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  white-space: nowrap;
  min-width: 64px;
  margin-top: 0;
  cursor: pointer;
  display: inline-block;
}

.widget form.search-form input[type="submit"]:hover {
  background-color: #1c6666;
}

/*---------------------------------------
 Contact Form 7ボタンカスタム
----------------------------------------*/

.wpcf7 .wpcf7-submit {
    background-color: #268180;  /* 好みの背景色 */
    color: #ffffff;             /* 文字色 */
    border: none;               /* ボーダーをなくす */
    border-radius: 4px;         /* 角を丸くする */
    padding: 10px 20px;         /* 上下左右の余白 */
    font-size: 16px;            /* フォントサイズ */
    cursor: pointer;            /* ホバー時にポインターを表示 */
    transition: background-color 0.3s ease;  /* ホバー時の変化にアニメーション効果 */
    display: block;             /* ブロック要素に変更 */
    margin: 0 auto;             /* 左右のマージンを自動に */
}

.submit-wrapper {
  display: flex;
  justify-content: center; /* 横方向中央揃え */
  align-items: center;     /* 縦方向中央揃え（必要なら） */
}



.wpcf7 .wpcf7-submit:hover {
    background-color: #32A8A7;  /* ホバー時の背景色 */
	
}

.wpcf7-form fieldset {
  width:100%;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
}

.wpcf7-form legend {
  font-weight: bold;
  padding: 0 10px;
}

input.wpcf7-form-control:not(.wpcf7-submit),
textarea.wpcf7-form-control,
select.wpcf7-form-control {
  background-color: #fff !important;
  border: 1px solid #000 !important;
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}



/*---------------------------------------
 TablePress
----------------------------------------*/
.tablepress {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #333;
}
.tablepress td, .tablepress th {
  padding: 12px;
  line-height: 1.6;
}
.tablepress .column-1 {
  font-weight: bold;
  width: 30%;
}

/*---------------------------------------
 モバイル対応（スマホ）
----------------------------------------*/
@media screen and (max-width: 768px) {
  .ast-container {
    flex-direction: column !important;
  }
  #primary, #secondary, .widget-area {
    width: 100% !important;
    max-width: 100%;
  }
  main.single-post,
  .single-post main {
    padding: 1.5rem 1rem;
    font-size: 15px;
  }
  main.single-post h1,
  .single-post main h1 {
    font-size: 1.5rem;
  }

/* モバイル対応：縦並びにする */
  .single-post .ast-container {
    flex-direction: column;
  }

  .single-post #primary,
  .single-post #secondary {
    width: 100%;
  }

  .single-post #secondary {
    margin-top: 2rem;
  }

  .widget-area {
    display: flex;
    flex-direction: column;
    align-items: center; /* ← 中央寄せ */
  }

  .widget {
    width: 90%; /* ← 横幅を調整して中央揃えが効くようにする（お好みで調整OK） */
    max-width: 480px;
  }
}


/*---------------------------------------
ニューズアーカイブページ
---------------------------------------*/
body.archive .ast-container {
  width: 100%;
}

body.archive .content-area {
  max-width: 800px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: 5rem !important;
}

body.archive .entry-meta {
  margin-bottom: 1rem;
}

body.archive h1.ast-archive-title {
  color: #268080;
}

body.archive .entry-title {
  color: #666;
}

body.archive .ast-archive-description + article.type-post  {
  border-top: 1px solid #c9c9c9;
}
body.archive article.type-post {
  padding: 1rem 0;
  border-bottom: 1px solid #c9c9c9;
  border-radius: 0;
  margin-bottom: 0;
}

body.archive article.type-post:hover {
  border-radius: 0;
}

@media (min-width: 768px) {
  .entry-content-container {
    display: grid;
    grid-template-columns: 45% 1fr;
    gap: 20px;
  }
}

.entry-thumb {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  color: #333;
  font-size: 2rem;
  font-weight: bold;
  font-family: serif;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .entry-thumb {
    margin-bottom: 0;
  }
}

.entry-not-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e7e7e7;
}
.entry-not-thumb::before {
  content: 'NO IMAGE';
}

.entry-cat {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  font-weight: bold;
  color: #666;
  background: #daf019;
  padding: 5px 15px;
}

body.archive .entry-title,
body.archive .entry-header {
  margin-bottom: 0;
}

body.archive article.type-post a:hover {
  opacity: .75;
}
/*---------------------------------------
記事ページ
---------------------------------------*/
body.single .ast-container {
  width: 100%;
  justify-content: space-between;
}

body.single .entry-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

body.single .posted-on {
  margin: 0 !important;
}

body.single .entry-cat:hover {
  text-decoration: underline;
}

body.single .wp-post-image {
  margin-bottom: 2rem;
}

body.single article {
  padding-bottom: 5rem;
}

/*---------------------------------------
サイドバー
---------------------------------------*/
body.archive .widget,
body.single .widget {
  border: none;
  padding: 0;
  box-shadow: none;
  margin-bottom: 5rem;
}

body.archive .widget:hover,
body.single .widget:hover {
  box-shadow: none !important;
}

body.archive .widget a,
body.single .widget a {
  text-decoration: none;
}

body.archive .widget a:hover,
body.single .widget a:hover {
  text-decoration: underline;
}

body.archive .widget li,
body.single .widget li {
  padding-left: 0;
}

body.archive .widget li::before,
body.single .widget li::before {
  content: none;
}

body.archive .widget .wp-block-heading,
body.single .widget .wp-block-heading {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #999;
}

.custom-post-item:not(:last-of-type) {
  padding-bottom: 10px;
  border-bottom: 1px solid #c9c9c9;
  margin-bottom: 10px;
}

.custom-post-anchor:hover {
  text-decoration: none !important;
  opacity: 0.75;
}

.custom-post-container {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: center;
}

.side-no-thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  aspect-ratio: 1/1;
  font-size: 12px;
  font-family: serif;
  font-weight: bold;
  color: #333;
  background: #e7e7e7;
  letter-spacing: 0;
}

.custom-post-title {
  line-height: 1.25;
  font-size: 14px !important;
  font-weight: bold !important;
  color: #666 !important;
  letter-spacing: 0;
  margin-bottom: 5px !important;
}

.custom-post-date {
  line-height: 1;
  font-size: 14px !important;
  font-weight: bold;
}

.wp-block-categories-list.wp-block-categories .cat-item {
  font-size: 16px;
  font-weight: bold;
}

.wp-block-categories-list.wp-block-categories .cat-item:not(:last-of-type) {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #c9c9c9;
}

.wp-block-categories-list.wp-block-categories a:hover {
  text-decoration: none !important;
  opacity: 0.75 !important;
}