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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*reset*/
*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0
}

ul[role='list'],
ol[role='list'] {
  list-style: none
}

body {
  min-height: 100vh;
  line-height: 1.5
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1
}

h1,
h2,
h3,
h4 {
  text-wrap: balance
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor
}

img,
picture {
  max-width: 100%;
  display: block
}

input,
button,
textarea,
select {
  font: inherit
}

textarea:not([rows]) {
  min-height: 10em
}

:target {
  scroll-margin-block: 5ex
}

a {
  text-decoration: none;
}

/*ウィジェットの余白reset*/
.widget {
  margin: 0 !important;
  padding: 0 !important;
}

/*背景*/
body {
  background-color: #fff !important;
  background-image: none;
}

/*ボタンなどの共通設定*/
/* タブオンのタブ */
#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"] {
  background-color: #6EC878;
  border: 1px solid #6EC878;
}

/* タブオフのタブ */
.index-tab-buttons .index-tab-button {
  background-color: #fff;
}

/* ボタン */
.sidebar h2,
.sidebar h3 {
  background-color: #999999;
}

:root :where(.wp-element-button, .wp-block-button__link) {
  background-color: #1a9f4d;
  border: 1px solid #1a9f4d;
}

button#comment-reply-btn,
.list-more-button {
  background-color: #1a9f4d;
}

.comment-form .form-submit input {
  background-color: #1a9f4d;
}

/* リンク */
.breadcrumb {
  color: #1a9f4d;
}

/*目次*/
.entry-content .toc {
  width: 53%;
  min-width: 400px;
  max-width: 900px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  border: none;
  border-top: 5px solid #777;
  border-radius: 10px;
}

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

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

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

/************************************
** ブログトップ
************************************/
.pickup_container {
  max-width: 1000px;
  margin: 0 auto;
}

.pickup_header {
  text-align: center;
  margin-bottom: 20px;
}

.pickup_img {
  width: 120px;
  height: auto;
}

.pickup_articles {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 20px;
}

.pickup_article {
  flex: 1 1 320px;
}

.pickup_article .blog-card {
  background: transparent !important;
  box-shadow: none;
  /* 必要であれば */
}



.blog-tab-top {
  background: #fff;
  padding: 40px 0;
}

.blog-tab-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 84%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  gap: 10px;
}

.blog-tab-nav li {
  flex: 1 1 0%;
  text-align: center;
  background: #ededed;
  border-radius: 12px 12px 0 0;
  padding: 18px 0;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  color: #999;
  transition: background-color 0.3s, color 0.3s;
  user-select: none;
}

.blog-tab-nav li.active {
  background: #f1f1f1 !important;
  color: #000 !important;
  position: relative;
  top: -1px;
  z-index: 2;
  border-top: 3px solid #ccc;
  border-left: 3px solid #ccc;
  border-right: 3px solid #ccc;
  border-bottom: none;
  margin-bottom: -4px;
  box-shadow: none;
}

.blog-tab-content {
  display: none;
  background: #f1f1f1;
  padding: 40px 20px 30px;
  margin-top: 0;
  border-top: 3px solid #ccc;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 1;
}

.blog-tab-content.active {
  display: block;
}

.blog-section-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: left;
  margin: 80px auto 40px;
  max-width: 1000px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}



.blog-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
}

.blog-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  width: calc(50% - 20px);
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
}

.blog-card-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* メタ情報：日付・カテゴリ横並び */
.blogtop_card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  gap: 10px;
  font-size: 13px;
  color: #999;
  line-height: 1;
}

/* タイマーアイコン */
.blogtop_card__time-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  vertical-align: middle;
}

.blogtop_card__time-icon::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'><path fill='%23999' d='M320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64zM296 184L296 320C296 328 300 335.5 306.7 340L402.7 404C413.7 411.4 428.6 408.4 436 397.3C443.4 386.2 440.4 371.4 429.3 364L344 307.2L344 184C344 170.7 333.3 160 320 160C306.7 160 296 170.7 296 184z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: translateY(-2px);
}

/* カテゴリー表示 */
.blogtop_card__cat-label {
  background: #fff;
  color: #6EC878;
  border: 1px solid #6EC878;
  font-size: 12px;
  height: 22px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 3px 10px 0;
}

/* タイトル */
.blogtop_card__title {
  font-size: 16px;
  font-weight: bold;
  margin: 12px 0 8px;
  color: #333;
  line-height: 1.4;
}

/* タグ */
.blogtop_card__tag-list {
  font-size: 12px;
  color: #777;
  margin-top: 12px;
  line-height: 1.4;
  word-break: break-word;
}

/* 抜粋（表示しない） */
.blogtop_card__excerpt {
  display: none;
}

.blogtop__pagination {
  display: flex;
  justify-content: center;
  gap: 0px;
  margin-top: 70px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}


.blogtop__pagination .page-numbers {
  padding: 6px 6px;
  background: none;
  border: none;
  color: #333;
  text-decoration: none;
  font-weight: 700;
}

.blogtop__pagination .page-numbers {
  box-shadow: none !important;
}



.blogtop__pagination .page-numbers.current {
  background: #fff;
  color: #000;
  font-weight: bold;
}

.blogtop__pagination .page-numbers.dots {
  pointer-events: none;
  color: #999;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.blogtop_container {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 10px;
}

.blogtop_search_wrapper {
  background-color: #f2f2f2;
  max-width: 920px;
  margin: 0 auto 16px;
  padding: 0;
  border-radius: 8px;
  text-align: center;
}

.blogtop_search_wrapper form.searchform {
  display: flex;
  justify-content: center;
  align-items: stretch;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden;
  padding: 0 10px;
}

@media screen and (max-width: 800px) {
  .blogtop_search_wrapper form.searchform {
    padding: 0;
  }
}

.blogtop_search_wrapper { padding: 0 10px; }
.blogtop_search_wrapper form.searchform { padding: 0; }


.blogtop_taxonomy_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 920px;
  margin: 0 auto 16px;
  padding: 0 10px;
}

@media screen and (min-width: 801px) {
  .blogtop_taxonomy_wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

.blogtop_taxonomy_box {
  background: #fff;
  border-radius: 6px;
  padding: 20px;
  width: 100%;
}

.blogtop_taxonomy_title {
  font-size: 16px;
  font-weight: bold;
  border-bottom: 3px solid #999;
  padding-bottom: 10px;
  margin-bottom: 15px;
  color: #333;
}

.blogtop_category_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blogtop_category_list li {
  margin: 22px 0;
  border-bottom: 2.5px solid #ccc;
  padding-bottom: 16px;
}

.blogtop_category_list li a {
  display: flex;
  align-items: center;
  color: #555;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

.blogtop_taxonomy_dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 50%;
  margin-right: 8px;
  margin-top: -4px;
}

.blogtop_tag_cloud a {
  display: inline-block;
  background: #fff;
  color: #aaa;
  border: 3px solid #aaa;
  border-radius: 20px;
  padding: 7px 12px 4px;
  font-weight: bold;
  margin: 6px 6px 0 0;
  text-decoration: none;
}

.blogtop_tag_cloud a:hover {
  background-color: #e0e0e0;
}

.blogtop_ranking {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  color: #555;
  font-size: 16px;
}

.blogtop_ranking_title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
}

/* ────────────────────────────────
   801 – 1200px  ➜  2枚を等幅で中央寄せ
──────────────────────────────── */
@media screen and (min-width:801px) and (max-width:1200px){
  /* コンテナを画面幅に合わせて拡張 */
  .pickup_container{
    max-width:none;           /* 1000px 制限を解除 */
    padding:0 24px;           /* 端だけ余白を確保 */
  }

  /* カード 2 枚を等幅で並べる */
  .pickup_articles{
    justify-content:center;   /* gap の分だけ中央寄せ */
    gap:24px;
  }
  .pickup_article{
    flex:0 0 calc((100% - 24px)/2) !important;  /* ← 幅 = (全幅-gap)/2 */
    max-width:none !important;
    min-width:0;                /* はみ出し防止 */
  }
  .pickup_article .blog-card{
    width:100% !important;                    /* ← 1 列 */
  }
}

@media screen and (max-width:800px){

  /* ── 共通 ───────────────── */
  .blog-card{width:100%;}
  .blog-section-title {
   margin: 40px auto 40px;
  }

  .pickup_articles{
    gap:0;
    padding:0 10px;
    flex-direction:column;     /* ← 強制的に縦並び */
  }
  .pickup_article{
    flex:0 0 100% !important;  /* ← 幅 100% を確定させる */
    max-width:100% !important;
  }

  /* ラッパーを全幅化 */
  .blog-tab-top,
  .blog-tab-nav{
    width:100vw;
    margin-left:calc(-50vw + 50%);
  }

  /* 1段＋2段レイアウト   ─┐
     上枠 2px、下枠 1px   ─┘ */
  .blog-tab-nav{
    display:grid !important;
    grid-template-columns:repeat(2,1fr);
    gap:0;
    border-top:3px solid #e0e0e0;
	border-bottom:none !important;
  }

  /* 各タブ共通設定（丸角無効・下線除去） */
  .blog-tab-nav li{
    border-radius:0;
    border-bottom:1px solid #e0e0e0 !important;
  }

  /* 最上段（ホーム） */
  .blog-tab-nav li:first-child{
    grid-column:1 / 3;      /* 横2列ぶち抜き */
    border-top:none;        /* 二重線防止 */
  }

  /* 生活タブ（中央） */
  .blog-tab-nav li:nth-child(2){
    border-left-width:2px;                  /* 左端だけ太く */
    border-right:1px solid #e0e0e0;         /* 内側縦線（細） */
    border-top:1px solid #e0e0e0;           /* 上線（細） */
  }

  /* お金タブ（右端） */
  .blog-tab-nav li:nth-child(3){
    border-right-width:2px;                 /* 右端だけ太く */
    border-top:1px solid #e0e0e0;           /* 上線（細） */
  }

  /* アクティブ状態：白背景＋浮かし解除 */
  .blog-tab-nav li.active{
    background:#fff !important;
    position:static !important;
	border-left: none;
　　border-right: none;
    top:auto !important;
    margin:0 !important;
    transform:none !important;
  }
}

@media screen and (min-width: 1201px) {

  .blog-card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(400px, 1fr));
    gap: 24px;
  }

  .blog-tab-nav li { border: 1px solid #e0e0e0; }
  .blog-tab-nav li:first-child { border-width: 2px; }
  .blog-tab-nav li:nth-child(2) { border-left-width: 2px; border-bottom-width: 2px; }
  .blog-tab-nav li:nth-child(3) { border-right-width: 2px; border-bottom-width: 2px; }

  .blogtop_container,
  .pickup_container {
    max-width: 1400px !important;
    width: 100% !important;
  }

  .pickup_container {
    display: flex !important;
    align-items: center !important;
    gap: 40px;
    margin: 0 auto 80px;
    padding: 40px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 4px rgba(0,0,0,.25);
  }

  .pickup_header { flex: 0 0 360px; }

  .pickup_articles {
    display: flex !important;
    flex: 1 1 0;
    gap: 24px;
    flex-wrap: nowrap;
  }

  .pickup_articles > * {
    flex: 1 1 clamp(340px, 48%, 420px);
  }

  .blogtop_shell {
    display: flex;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
  }

  .blogtop_sidebar { flex: 0 0 400px; }
  .blogtop_main { flex: 1 1 0; max-width: calc(100% - 440px); }

  .blogtop_main, .blogtop_sidebar { min-width: 0; }

  .blogtop_widgets_bottom { display: none; }

  .blogtop_sidebar .blogtop_taxonomy_wrapper,
  .blogtop_sidebar .blogtop_taxonomy_box,
  .blogtop_sidebar .blogtop_ranking {
    width: 100%;
    max-width: none;
  }

  .blogtop_sidebar .blogtop_taxonomy_wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .blogtop_sidebar .blogtop_category_list { column-count: 1; }
  .blogtop_sidebar .blogtop_tag_cloud { column-count: 1; }

  .blogtop_sidebar > *:first-child { margin-top: 0; padding-top: 0; }

  .blog-card { width: 100%; max-width: 100%; }

  .blogtop_search_wrapper { margin-top: 4px; }

  .blog-card-thumbnail img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .blogtop_sidebar > * + * { margin-top: 40px; }

  .blog-tab-nav li:not(.active) { border: none !important; }
  .blog-section-title {
  margin: 20px auto 40px;
}
}
/* ===== 1201-1280px：ツインカラム合わせ ===== */
@media screen and (min-width: 1201px) and (max-width: 1280px) {

  /* カード2列を保ったまま最小幅を調整 */
  .blog-card-list{
    grid-template-columns: repeat(2, minmax(340px, 1fr)); /* 340×2＋24=704 ≤ 761 */
  }

  /* 余裕が無ければ gap も少しだけ詰める */
  .blog-card-list{ gap: 20px; }

  /* 必要ならサイドバーとメインの間隔も詰める */
  .blogtop_shell{ gap: 32px; }
}

@media screen and (max-width: 480px) {
  .pickup_section { padding: 0 !important; }
  .pickup_img,
  .pickup_header img {
    width: 156px !important;
    height: auto;
  }
}