@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){
  /*必要ならばここにコードを書く*/
}

/*以下は追加したやつ*/

/*見出しの見た目を変更する*/
/* ===== h2（背景あり） ===== */
.article h2 {
  background: #0067C0 !important;
  color: #fff !important;
  padding: 12px 15px !important;
  border: none !important;
  border-radius: 3px;
}

/* ===== h3 完全リセット → 下線だけにする ===== */
.article h3,
.entry-content h3 {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 5px 0 !important;
  border-bottom: 3px solid #0067C0 !important;
  padding-left: 0.5em !important;
}

/* 目次を変更する */
.toc {
  width: 100% !important;
  max-width: 100% !important;
}

.toc-content {
  padding: 15px !important;
}

/* ===== 目次全体 ===== */
.toc {
  background-color: #f8fbff; /* 少し青寄りに */
  border: 1px solid #d0e2f2; /* 枠を追加 */
  border-radius: 5px; /* 角丸 */
  padding: 0;
  overflow: hidden; /* 角丸を綺麗に */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* ===== 目次タイトル ===== */
.toc-title {
  display: block;
  width: 100%;
  background-color: #E6F0FA;
  font-size: 1.2em;
  padding: 12px;
  font-weight: bold;
  color: #0067C0;
}

/* スマホの目次タイトルの高さ調整 */
@media screen and (max-width: 768px) {
  .toc-title {
    padding: 4px 8px; /* ←ここで高さ調整 */
    font-size: 16px;   /* 文字も少し小さく（任意） */
  }
}

/* ===== 目次の中身 ===== */
.toc-content {
  padding: 15px;
}

/* ===== リスト ===== */
.toc-content ul {
  padding-left: 20px;
}

/* ===== リンク ===== */
.toc-content a {
  color: #333;
  text-decoration: none;
}

/* ホバー（マウス乗せたとき） */
.toc-content a:hover {
  color: #0067C0;
}

/* ===== サイドバーの目次の見た目を変更する ===== */
/* ===== 「目次」タイトル ===== */
.widget_toc .toc-title {
  background: none !important;
  color: #000 !important;
  text-align: left !important;
  padding: 0 0 5px 0 !important;
  border-bottom: 2px solid #0067C0 !important;
  font-size: 16px;
}

/* サイドバー目次の見出し：上は広く・下は狭く */
.sidebar .toc-title {
  margin-top: 5px !important;   /* ← 上の余白（増やす） */
  margin-bottom: 5px !important; /* ← 下の余白（減らす） */
  padding: 0 !important;
}

/* ===== 中身（スクロール化） ===== */
.widget_toc .toc-content {
  max-height: 80vh;
  overflow-y: auto;
  padding: 10px 0 !important;
}

/* ===== リストの余白 ===== */
.widget_toc ul {
  padding-left: 15px;
}

/* ===== リンク ===== */
.widget_toc a {
  color: #333;
  text-decoration: none;
}

/* ホバー */
.widget_toc a:hover {
  color: #0067C0;
}

/* ===== 見出しジャンプ時のズレ修正 ===== */
/* PCはそのまま */
:target {
  scroll-margin-top: 80px;
}

/* スマホだけズレを小さくする */
@media screen and (max-width: 768px) {
  :target {
    scroll-margin-top: 20px; /* ←ここ調整 */
  }
}

.sidebar-scroll {
  top: 100px !important;
}

.navi-in a {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 450;
  letter-spacing: 0.05em;
}

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

  /* ===== メニュー内だけに限定 ===== */
  .menu-content {
    padding-top: 90px; /* ← 上に余白（崩れ防止） */
  }

  /* ===== ✕ボタン ===== */
  .menu-close-button {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 22px;
    color: #333;
  }

  /* ===== MENUタイトル ===== */
  .menu-content::before {
    content: "MENU";
    display: block;
    background: #0067C0;
    color: #fff;
    font-weight: bold;
    padding: 10px 15px;
    margin-top: -50px; /* ← 上に引き上げる */
    margin-bottom: 10px;
  }

  /* ===== ＞マーク ===== */
  .menu-content li a {
    padding-left: 25px;
    position: relative;
  }

  .menu-content li a::before {
    content: "›";
    position: absolute;
    left: 5px;
    color: #0067C0;
  }

  /* ===== アニメーション ===== */
  .menu-content {
    transition: transform 0.5s ease;
  }

}

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

  /* ===== MENUの位置を下げる（✕と距離を空ける） ===== */
  .menu-content::before {
    margin-top: -40px; /* ← 少し下げる（元は -50px） */
  }

  /* ===== MENUをカード風に ===== */
  .menu-content::before {
    background: #0067C0;
    color: #fff;

    margin-left: 10px;
    margin-right: 10px;

    border-radius: 5px; /* ← 角を丸く */
  }
	
}

/* ===== 固定ページの日付を非表示 ===== */
.page .date-tags {
  display: none;
}

/* ===== 日付のデザイン ===== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Oswald:wght@400;600&display=swap');

/* 日付ボックス */
.post-date-box {
  font-family: 'Oswald', 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

/* 年 */
.post-year {
  font-family: 'Roboto', sans-serif;
  display: block;
  font-size: 14px;
  color: #999;
}

/* 月日 */
.post-day {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px; /* 少しだけ広げるとカッコいい */
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #0067C0;
}

/* タイトルと横並び */
.entry-title {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .entry-title {
    gap: 6px; /* ← ここを変えるのが正解 */
  }

  .post-year {
    font-size: 12px;
  }

  .post-day {
    font-size: 16px;
  }
}

/* ===== ヘッダーとタイトルの隙間を狭くする ===== */
.main {
  padding-top: 0;
}

@media screen and (max-width: 768px) {
  .main {
    padding-top: 0 !important;
  }
}

/* ===== タグ、更新日、著者を並べる ===== */
/* 全体（少し小さく） */
.custom-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px; /* 少し詰める */
  margin-bottom: 14px;
  font-size: 13px; /* 少し小さく */
}

/* タグ内リンク */
.meta-tags {
  display: flex;
  align-items: center;   /* ← 追加（重要） */
  gap: 6px;
}

/* タグ1つずつ四角に */
.single-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #444;
  background: #fff;
  color: #444;
  padding: 0 6px;
  height: 24px;
  line-height: 1;
  font-weight: 500;
  text-decoration: none !important;
}

/* アイコン色 */
.single-tag i {
  color: #444;
}

/* ホバーで軽く反応 */
.single-tag:hover {
  opacity: 0.7;
  text-decoration: none !important;
}

/* ホバー時の簡単な反応 */
.meta-tags a:hover {
  opacity: 0.7;
  text-decoration: none !important;
}

/* 更新日（囲みなし） */
.meta-date {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #444;
  font-weight: 500;
  height: 24px;
  line-height: 1;        /* ← 追加 */
}

/* 著者 */
.meta-author {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #444;
  font-weight: 500;
  height: 24px;
  line-height: 1;        /* ← 追加 */
}

/* 画像のズレ防止 */
.author-img img {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: block; /* ← これ重要（余白消える） */
}

/* アイコン */
.custom-meta i {
  color: #444;
  font-size: 12px; /* 少し小さく */
}

/* ===== プライバシーポリシーのタイトルの下に隙間を開ける ===== */
.page-id-3 .entry-title {
    margin-bottom: 35px; /* タイトル下の余白を増やす */
}

/* ===== 内部ブログカードの枠線を変更 ===== */
.internal-blogcard {
  border: 1px solid #333333 !important;
}

/* ===== 角丸をなくす ===== */
.internal-blogcard {
  border-radius: 0 !important;
}

/* ===== 内部ブログカードのドメイン名を非表示 ===== */
.internal-blogcard .blogcard-site {
  display: none !important;
}

/* ===== テキスト側の上下位置を調整 ===== */
.internal-blogcard .blogcard-content {
  position: relative;
  top: 7px; /* ←ここを動かす（＋で下、－で上） */
}

/* ===== サムネ側の上下位置を調整 ===== */
.internal-blogcard .blogcard-thumbnail {
  position: relative;
  top: 5.5px; /* ←ここを動かす（＋で下、－で上） */
}

/* ===== 画像の余計なズレ防止 ===== */
.internal-blogcard .blogcard-thumbnail img {
  display: block;
}

/* ===== スマホ用（画面幅768px以下） ===== */
@media screen and (max-width: 768px) {

  .internal-blogcard .blogcard-content {
    top: -0.8px; /* ←スマホ用に調整 */
  }

  .internal-blogcard .blogcard-thumbnail {
    top: 2px; /* ←スマホ用に調整 */
  }

}

/* お問い合わせフォームの送信ボタンだけ */
.wpcf7 input[type="submit"] {
  background-color: #0067C0;
  color: #ffffff;
  border: none;
  transition: 0.3s;
}

/* ホバー時 */
.wpcf7 input[type="submit"]:hover {
  background-color: #3385d6;
}


/* プライバシーポリシーページの余白調整 */
.page-id-3 h2,
.page-id-3 h3 {
  margin-bottom: 15px;
}

.page-id-3 p {
  margin-top: 0;
}

/* 投稿ページだけ：見出しと本文の余白を調整 */
.single .article h2,
.single .article h3 {
  margin-bottom: 25px; /* 見出しの下の余白 */
}

.single .article p {
  margin-top: 0; /* 本文の上の余白 */
}

/* ページ内ジャンプにアイコンをつける */
.single a[href^="#"]:not(.toc a)::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0ab"; /* fa-arrow-circle-down */
  font-weight: 900;
  margin-right: 4px;
}

/* アプリーチの設定 */
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}

/* 投稿ページ：見出しが2行のときの行間を広げる */
.single .article h2,
.single .article h3 {
  line-height: 1.5;
}

/* ===== テーブル全体 ===== */
.article table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #d0d0d0 !important;
}

/* ===== 罫線を強制表示 ===== */
.article th,
.article td {
  border: 1px solid #d0d0d0 !important;
  padding: 10px;
}

/* ===== ヘッダー（少し薄い青＋白文字） ===== */
.article th {
  background-color: #8ed1fc;
  color: #ffffff;
}

/* ===== 本文部分（かなり薄いグレー） ===== */
.article td {
  background-color: #fbfbfb;
}

/* ===== テーブルをおしゃれにする ===== */
.article tr + tr td {
  border-top: 1.5px solid #c8c8c8 !important;
}