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

/************************************************************************
** ここから追加CSSとなる
************************************************************************/

/********************
** 著作権関連
********************/
/*画像ドラッグ&右クリック禁止*/
img {
pointer-events: none;
}


/********************
** 非表示
********************/
/*固定ページ全てをまとめて非表示*/
.page .date-tags,
.page .author-info{
  display: none;
}


/********************
** ヘッダーメニュー
********************/
/*マウスオーバー時のメニューの色を変更*/
#navi .navi-in a:hover{
	color: #ffffff;
	background: #bc002d;
	transition: all 0.5s ease;
}


/********************
** 本文のデザイン
********************/
/*見出し*/
.article h2{ /*見出し2カスタマイズ*/
  padding:1rem 2rem;/*上下 左右の余白*/
  border-bottom: solid 3px #B3424A;/*下線*/
}
.article h3{ /*見出し3カスタマイズ*/
  padding: 1rem 2rem;/*文字の上下 左右の余白*/
  border-left: solid 7px #B3424A;/*下線*/
}
.article h4{ /*見出し4カスタマイズ*/
  padding: 1rem 2rem;
}

/*ボタン*/
/*ボタンを浮かして影をつける*/
.btn{
 box-shadow: 0 5px 0px #949495;
 }
/*ボタンが重なったときに沈む*/
.btn:hover{
 box-shadow: 0 1px 0 #949495;
 transform: translateY(6px);
 -webkit-transform: translateY(6px);
 }
/*カーソルを外したときに元に戻す*/
.btn{
 transition:.5s ease-in-out;
 }

/*目次*/
/*タイトルの文字を変更*/
.toc-title {
    font-weight: bold;
	color: #bc002d
}
/*本文の目次の枠線を変更*/
.toc {
	border: 3px solid #949495;
}

/********************
** サイドバー追尾目次
********************/
/* 側邊欄黏著位置：向下偏移 15px，注意：用了 !important */
.sidebar-scroll {
  top: 15px;
}

/* 側邊欄標題 h3：縮小字型並加內距 */
.sidebar h3 {
  font-size: 0.9em; /* 標題文字相對縮小 */
  padding: 7px 12px; /* 內距讓標題不貼邊 */
}

/* 目次容器陰影：製造浮起感 */
.sidebar .widget_toc {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* 淡陰影 */
}

/* 微調目次區塊位置：上方拉近（負 margin） */
.sidebar .toc-widget-box {
  margin-top: -0.9em; /* 小幅向上移動，用於視覺對齊 */
}

/* 目次主容器：取消內距並寬度填滿父容器 */
.sidebar .toc {
  padding: 0;
  width: 100%;
}

/* 目次內容：可滾動、有限高度、白色背景與內距 */
/* 建議：若不想常顯示滾動條，將 scroll 改為 auto */
.sidebar .toc-content {
  overflow-y: auto;    /* 僅在需要時顯示滾動條（比 scroll 更佳） */
  max-height: 500px;   /* 最大高度，超出則捲動 */
  background: #fff;    /* 內容白底，提升可讀性 */
  padding: 0.5em 1.5em;/* 內距讓文字不貼邊 */
}

/* 每個目次項目：行高、間距、字體大小與顏色 */
.sidebar .toc li {
  line-height: 1.6;     /* 提高可讀性 */
  margin-bottom: 1em;   /* 項目間距 */
  font-size: 0.85rem;   /* 小一點的字 */
  color: #B3424A;       /* 強調色（偏紅） */
}

/* 第一層清單項：加粗並內縮一點（只套用直接子項） */
.sidebar .toc-content > ol > li,
.sidebar .toc-content > ul > li {
  font-weight: 600;     /* 強調第一層標題 */
  padding-left: 0.5em;  /* 左內縮表示層級 */
}

/* 目次內連結：微調字距 */
.sidebar .toc-content a {
  letter-spacing: 0.5px; /* 微量字距 */
}

/* 巢狀清單樣式：去掉預設標記、設定上下間距與字重 */
.sidebar .toc .toc-list ul,
.sidebar .toc .toc-list ol {
  margin: 1em 0;        /* 清單上下間距 */
  list-style: none;     /* 移除預設點或數字 */
  font-weight: 500;     /* 中等字重 */
}


/********************
** ブロガーカードの設定
********************/
 /*ブロガーカードのリンクを隠す*/
.internal-blogcard-footer{
	display: none;
}

/*「Read More」ボタンを追加する*/
.internal-blogcard::before{
	position: absolute;
	z-index: 99;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0da"; /*アイコン*/
	bottom: 10px; /*調整OK→カード下端からの位置*/
	right: 116px; /*調整OK→カード右端からの位置*/
	font-size: 20px;
	color: #fff; /*変更OK→アイコン色*/
	text-align: center;
	background-color: #bc002d; /*変更OK→背景色*/
	width: 26px;
	height: 26px;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #fff;
	line-height: 26px;
}
.internal-blogcard::after{
	position: absolute;
	z-index: 1;
	content: "Read More"; /*変更OK→表示テキスト*/
	bottom: 10px; /*調整OK→カード下端からの位置*/
	right: 15px; /*調整OK→カード右端からの位置*/
	background-color: #bc002d; /*変更OK→背景色*/
	font-size: 12px;
	color: #fff; /*変更OK→文字色*/
	border-radius: 20px;
	padding-right: 15px;
	padding-left: 30px;
	text-align: right;
	line-height: 26px;
	min-width: 80px;
}

/*下部のスペースを広げる*/
.blogcard{
	position: relative;
	padding-bottom:45px;
}

/*マウスオーバー時の色変更*/
.blogcard:hover{
	color: #ffffff;
	background: #bc002d;
	transition: all 0.5s ease;
}

/********************
** モバイル版（フッターメニュー表示時）ナビゲーションメニュー
********************/
/*主項目*/
/*增加行間距離*/
.menu-drawer > li {
  padding: 15px 0;
  line-height: 2;
  text-align: left;
}
/*按鈕化*/
.menu-drawer > li > a {
  border-radius: 10px;
  box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
  background: #949495;
  margin: 6px 0;
  padding: 4px 1em;
  border: 2px solid white;
  color: white;
}

/*副項目*/
/*增加行間距離*/
.menu-drawer .sub-menu li a {
  position: relative;
  padding: 0 25px;
  color: #949495;
}
/*按鈕化*/
.menu-drawer .sub-menu li a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-left: 11px solid #949495;
  border-bottom: 8px solid transparent;
}

/********************
** SNS関連
********************/
/*按鈕置中*/
.sns-share, .sns-follow {
　margin: 0 auto 24px auto;
}
/*消除附屬文字*/
.button-caption {
  display: none;
}
/*メッセージデザイン*/
.sns-share-message, .sns-follow-message {
  width: 100%;
  color: #B3424A;
  border-bottom: 1px solid #949495;
  margin-bottom: 20px;
}

/*Followボタン*/
.sns-follow-buttons a {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: #949495;
  color: #ffffff;
}
.sns-follow-buttons a:hover {
	background: #bc002d;
}

/*Shareボタン*/
.sns-share-buttons a {
  border-radius: 50%;
  width: 50px !important;
  height: 50px;
  background: #bc002d;
  color: #ffffff;
}

/********************
** Youtube関連
********************/
/*YouTube動画の中央配置*/
.video-container{
margin: 0px auto;
}
figcaption{
	text-align: center;
}

/****************************************
*ContactForm7カスタマイズ（整合版） *
****************************************/
/*「Simple Cloudflare Turnstile」を中央揃えにする*/
div.cf-turnstile {
    display: flex;
    justify-content: center;
}

/* ========== 基本表格樣式（通用） ========== */
table.CF7_table {
  width: 80%;
  margin: 0 auto;
  border: 3px solid #949495;
  border-collapse: collapse;
  text-align: left;
  box-sizing: border-box;
}

/* 列與邊線 */
table.CF7_table tr + tr {
  border-top: 1px solid #e5e5e5;
}

/* 必須/任意 標籤 */
.CF7_req,
.CF7_unreq {
  font-size: 0.9em;
  padding: 5px;
  color: #fff;
  border-radius: 3px;
  margin-right: 1em;
  vertical-align: middle;
}
.CF7_req { background: #bc002d; }
.CF7_unreq { background: #bdbdbd; }

/* 表單欄位邊框與 placeholder */
.CF7_table input,
.CF7_table textarea {
  border: 1px solid #d8d8d8;
  vertical-align: middle;
}
.CF7_table ::placeholder {
  color: #797979;
}

/* 送出按鈕 */
.wpcf7-form input[type="submit"] {
  display: block;      /* 轉為區塊，才能使用 margin:auto */
  width: 30%;
  margin: 0 auto;
  background-color: #fff;
  color: #bc002d;
  border: 3px solid #bc002d;
  padding: 10px 10px;
  border-radius: 5px;
  font-size: 0.9em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.wpcf7-form input[type="submit"]:hover {
  background-color: #bc002d;
  color: #fff;
}


/* WPCF7 spinner */
.wpcf7-spinner { width: 0; margin: 0; }

/*入力エラーメッセージのスタイルを変更*/
/*入力エラーメッセージの文字色変更*/
.wpcf7 span.wpcf7-not-valid-tip {
    display: block;
    position: static;
    top: 0;
    left: 0;
    border: none;
    color: red;
}
/*入力エラーセルの背景色変更*/
.wpcf7 .wpcf7-not-valid {
    background-color: #F2C9C9;
}

/*入力エラーの時*/
.wpcf7 form.invalid .wpcf7-response-output {   
	color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
}
/*成功した時*/
.wpcf7 form.sent .wpcf7-response-output {
     color: #3A87AD;
     background-color: #D9EDF7;
     border: 1px solid #BCE8F1;
}

/* ========== 桌面版（>= 834px）：保留 table 行為 + 垂直置中 ========== */
@media screen and (min-width: 834px) {
  table.CF7_table {
    display: table;
    table-layout: fixed; /* 欄寬更穩定 */
  }

  .wpcf7-form table.CF7_table th,
  .wpcf7-form table.CF7_table td {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
  }

  .wpcf7-form table.CF7_table th {
    width: 30%;
    background-color: #e5e5e5;
  }

  /* 第一層 wrapper：對大多數欄位用 100% 撐滿（例如 text/textarea 的容器） */
  .wpcf7-form table.CF7_table th > *,
  .wpcf7-form table.CF7_table td > * {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* 文字類/選單類：仍舊 100% 寬 */
  .wpcf7-form table.CF7_table input[type="text"],
  .wpcf7-form table.CF7_table input[type="email"],
  .wpcf7-form table.CF7_table input[type="url"],
  .wpcf7-form table.CF7_table input[type="tel"],
  .wpcf7-form table.CF7_table input[type="number"],
  .wpcf7-form table.CF7_table textarea,
  .wpcf7-form table.CF7_table select {
    width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
  }

  /* label 與輸入在同列時：label 固定寬度、與輸入垂直置中 */
  .wpcf7-form table.CF7_table label {
    display: inline-block;
    min-width: 120px;
    margin-right: 8px;
    vertical-align: middle;
  }

  /* ===== Checkbox/Radio：避免被 100% 寬撐滿，保持水平排列 ===== */
  /* 讓該列的第一層 wrapper 不撐滿（若在諮詢主題列） */
  .wpcf7-form table.CF7_table td > p:has(.wpcf7-checkbox),
  .wpcf7-form table.CF7_table td > span:has(.wpcf7-checkbox),
  .wpcf7-form table.CF7_table td > p:has(.wpcf7-radio),
  .wpcf7-form table.CF7_table td > span:has(.wpcf7-radio) {
    width: auto;
  }

  /* CF7 的控制 wrap（如 .checkbox-inq 等）不要 100% 寬，保持 inline */
  .wpcf7-form table.CF7_table td .wpcf7-form-control-wrap {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  /* 列表容器保持 inline 流 */
  .wpcf7-form table.CF7_table td .wpcf7-checkbox,
  .wpcf7-form table.CF7_table td .wpcf7-radio {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    line-height: 1.6;
  }

  /* 每個選項水平排列並保留間距 */
  .wpcf7-form table.CF7_table td .wpcf7-list-item {
    display: inline-block;
    margin: 0 14px 0 0;
    vertical-align: middle;
  }

  /* label 與 input 對齊 */
  .wpcf7-form table.CF7_table td .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap; /* 避免同一選項拆成兩行 */
  }

  /* 控制本體尺寸 */
  .wpcf7-form table.CF7_table td input[type="checkbox"],
  .wpcf7-form table.CF7_table td input[type="radio"] {
    width: auto;
    height: auto;
    margin: 0;
    vertical-align: middle;
  }
}

/* ========== 手機版（< 834px）：block 堆疊 + Flex 垂直置中（無 !important） ========== */
@media screen and (max-width: 833.98px) {
  /* 表格寬度與堆疊 */
  .wpcf7-form table.CF7_table {
    width: 95%;
    table-layout: auto;
  }

  .wpcf7-form .CF7_table tr,
  .wpcf7-form .CF7_table th,
  .wpcf7-form .CF7_table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* 標題儲存格（th）樣式 */
  .wpcf7-form .CF7_table th {
    background-color: #e5e5e5;
    padding: 10px 12px;
  }

  /* 在 th/td 第一層子元素上做垂直置中（涵蓋 p / span / div） */
  .wpcf7-form table.CF7_table th > p,
  .wpcf7-form table.CF7_table th > span,
  .wpcf7-form table.CF7_table th > div,
  .wpcf7-form table.CF7_table td > p,
  .wpcf7-form table.CF7_table td > span,
  .wpcf7-form table.CF7_table td > div {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* 如果有 wrap 再包一層，讓內層也能對齊 */
  .wpcf7-form table.CF7_table td .wpcf7-form-control-wrap {
    display: flex;
    align-items: center;
    width: 100%;
  }

  /* 必須/任意徽章與標題字間距（視覺微調） */
  .wpcf7-form .CF7_table .CF7_req,
  .wpcf7-form .CF7_table .CF7_unreq {
    display: inline-flex;
    align-items: center;
    height: 1.9em;
    padding: 0 6px;
    margin-right: 8px;
    line-height: 1;
  }

  /* 文字/選單類在 flex 環境下可伸展 */
  .wpcf7-form table.CF7_table input[type="text"],
  .wpcf7-form table.CF7_table input[type="email"],
  .wpcf7-form table.CF7_table input[type="url"],
  .wpcf7-form table.CF7_table input[type="tel"],
  .wpcf7-form table.CF7_table input[type="number"],
  .wpcf7-form table.CF7_table textarea,
  .wpcf7-form table.CF7_table select {
    flex: 1 1 auto;
    width: 100%;
    min-height: 40px;
  }

  /* Checkbox/Radio：容器可換行，單項垂直置中 */
  .wpcf7-form table.CF7_table td .wpcf7-checkbox,
  .wpcf7-form table.CF7_table td .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin: 0;
  }

  .wpcf7-form table.CF7_table td .wpcf7-list-item,
  .wpcf7-form table.CF7_table td .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    white-space: nowrap;
  }

  /* 手機按鈕寬度調整 */
  .wpcf7-form input[type="submit"] { width: 60%; }
}