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

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

/* th共通スタイル */
.wp-block-table th {
  background-color: #f9f6f6;
  padding: 8px;
  font-weight: normal;
}

/*キャッチフレーズ*/
.tagline {
  font-weight: bold;
  font-size: 12pt;
}

/*固定ページで投稿日・更新日を非表示*/
.page .date-tags {
  display: none;
}

/* 4つのボックスメニュー */
.box-menu {
  padding: 0;
  min-height: 0;
  background: #ffffff;
}
.box-menu:hover {
  box-shadow: none;
  opacity: 0.8;
}
.box-menu-icon * {
  margin: 0;
  max-width: 100%;
  max-height: 300px;
  color: #000000;
}
@media screen and (min-width: 600px){
  .wwa .box-menu {width: 20%; margin-right: 3%;}
}
.box-menu:first-child { margin-left: auto; }
.box-menu-label { color: #000000; }
.box-menu-description { color: #000000; }



/* =========================
   フロント側リンク＆アイコン
   ========================= */
:where(.site, .entry-content, .content, .main, #content, .article) a {
  text-decoration: none;
  color: #000000;
}
:where(.site, .entry-content, .content, .main, #content, .article) a:hover {
  text-decoration: underline;
  color: #b0c4de;
}
/* プロフィール欄のリンク */
.author-box a { text-decoration: none; color: #000000; }
.author-box a:hover { text-decoration: underline; color: #b0c4de; }

/* Font Awesome */
:where(.site, .entry-content, .content, .main, #content, .article) a .fa,
:where(.site, .entry-content, .content, .main, #content, .article) a .fas,
:where(.site, .entry-content, .content, .main, #content, .article) a .far,
:where(.site, .entry-content, .content, .main, #content, .article) a .fab {
  margin-left: 0.3em;
  color: #ff6347;
}
:where(.site, .entry-content, .content, .main, #content, .article) a:hover .fa,
:where(.site, .entry-content, .content, .main, #content, .article) a:hover .fas,
:where(.site, .entry-content, .content, .main, #content, .article) a:hover .far,
:where(.site, .entry-content, .content, .main, #content, .article) a:hover .fab {
  color: #b0c4de;
}
/* SVG版 */
:where(.site, .entry-content, .content, .main, #content, .article) a svg.svg-inline--fa {
  margin-left: 0.3em;
  color: #ff6347;
}
:where(.site, .entry-content, .content, .main, #content, .article) a:hover svg.svg-inline--fa {
  color: #b0c4de;
}
:where(.site, .entry-content, .content, .main, #content, .article) a svg.svg-inline--fa path {
  fill: currentColor;
}

/* Cocoon内部・外部リンクアイコン */
:where(.site, .entry-content, .content, .main, #content, .article) a.internal-link::before,
:where(.site, .entry-content, .content, .main, #content, .article) a.external-link::after {
  margin-left: 0.3em;
  color: #ff6347;
}
:where(.site, .entry-content, .content, .main, #content, .article) a.internal-link:hover::before,
:where(.site, .entry-content, .content, .main, #content, .article) a.external-link:hover::after {
  color: #b0c4de;
}

/* =========================
   フッター
   ========================= */
/*フッターロゴサイズ*/
.footer-bottom-logo .logo-image {
	padding: 0;
	max-width: 200px;
}

.footer-bottom-logo img {
	height: 90px;
	width: auto;
}



/* =========================
   グローバルナビ
   ========================= */
#navi .navi-in ul.sub-menu {
  border-radius: 0 0 5px 5px;
  overflow: hidden;
}
#navi .menu-mobile {
  border-radius: 8px;
  overflow: hidden;
}
#navi .navi-in > ul > li > a {
  transition: transform 0.2s ease;
}
#navi .navi-in > ul > li > a:hover {
  transform: translateY(2px);
}
#navi .navi-in ul.sub-menu li a {
  transition: transform 0.2s ease;
}
#navi .navi-in ul.sub-menu li a:hover {
  transform: translateX(2px);
}

/* =========================
   WP管理画面UIを白文字に
   ========================= */
#wpadminbar, #wpadminbar * { color: #ffffff; }
body.wp-admin #adminmenu,
body.wp-admin #adminmenu a,
body.wp-admin #adminmenu .wp-submenu a,
body.wp-admin #adminmenu .wp-submenu .wp-submenu-head,
body.wp-admin #adminmenu .wp-has-current-submenu > a.menu-top,
body.wp-admin #adminmenu li.menu-top > a {
  color: #ffffff;
}
body.wp-admin #adminmenu a:hover,
body.wp-admin #adminmenu li.menu-top:hover > a,
body.wp-admin #adminmenu .wp-submenu a:hover,
body.wp-admin #adminmenu .opensub > a.menu-top,
body.wp-admin #adminmenu .current a.menu-top {
  color: #ffffff;
}
.components-snackbar__content,
.components-snackbar__content a,
.components-snackbar__content a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.notice-success, .notice-success *,
.notice-warning, .notice-warning *,
.notice-error,   .notice-error * {
  color: #ffffff;
}


/* =========================
   見出し系
   ========================= */

/* H1の最初の1文字だけ装飾 */
h1::first-letter {
  font-size: 1.5em; /* 通常の1.5倍に */
  font-weight: bold;
  color: color-mix(in srgb, var(--wp--preset--color--key-color, #666) 80%, black 20%);
}



/* H2*/
.entry-content h2,
.content h2,
.article h2 {
  color: #505050;              /* 文字色 */
  padding: 0.5em 1em 0.5em 2.4em; /* 左側はアイコン分余白を広く */
  display: block;
  line-height: 1.3;
  background: #d3c8c6;         /* 背景色 */
  border-radius: 25px 0 0 25px; /* 左側だけ角丸 */
  position: relative;          /* アイコン配置の基準にする */
  margin: 1.5em 0;             /* 上下の余白 */
}

/* h2先頭に画像アイコンを追加 */
.entry-content h2::before,
.content h2::before,
.article h2::before {
  content: "" !important;
  display: inline-block !important;
  position: absolute;
  left: 0.8em;                 /* 左端からの距離 */
  top: 50%;
  transform: translateY(-50%);
  width: 1.3em;                  /* 文字と同じ高さ */
  height: 1.3em;                 /* 文字と同じ高さ */
  background: url("https://kamoaki.co.jp/wp-content/uploads/2025/09/logo_charaOnly_white.png") no-repeat center center;
  background-size: contain;    /* アスペクト比を維持して縮小 */
  pointer-events: none;
}


/* =========================
   h6 見出しカスタマイズ
   ========================= */
.entry-content h6,
.content h6,
.article h6 {
  position: relative;
  padding-top: 1.5em;     /* 上に余白をとる（重なり防止） */
  color: #333333;         /* 本文の見出し文字色 */
  font-size: 1em;         /* h6なので控えめサイズ */
  font-weight: bold;
}

/* h6の背後に装飾番号を表示 */
.entry-content h6::before,
.content h6::before,
.article h6::before {
  position: absolute;
  bottom: 0;              /* h6のベースラインに合わせる */
  left: 0;
  z-index: -1;            /* テキストの後ろに配置 */
  color: #d3c8c6;         /* 薄い装飾カラー */
  font-size: 4em;         /* 大きく透かす */
  line-height: 1;
  content: attr(data-number); /* data-number属性の値を使う */
  pointer-events: none;   /* 装飾はクリック不可 */
}






/* =========================
   Cocoon アウトラインボタン is-style-outline--3
   ========================= */
.wp-block-button.is-style-outline--3 {
  border-radius: 12px 12px 0 12px;  /* 右下だけ直角 */
  overflow: hidden;
}
.wp-block-button.is-style-outline--3 .wp-block-button__link {
  border-radius: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  color: #000; /* 文字は黒 */
  border: 2px solid var(--wp--preset--color--key-color, #666);

  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
/* 枠線をキーカラーより少し濃く */
@supports (color: color-mix(in srgb, black, white)) {
  .wp-block-button.is-style-outline--3 .wp-block-button__link {
    border-color: color-mix(in srgb, var(--wp--preset--color--key-color, #666) 80%, black 20%);
  }
}
/* ホバー時 */
.wp-block-button.is-style-outline--3 .wp-block-button__link:hover,
.wp-block-button.is-style-outline--3 .wp-block-button__link:focus-visible {
  color: #444;
  text-decoration: none;
}
/* アイコン余白 */
.wp-block-button.is-style-outline--3 .anchor-icon {
  margin-left: .35em;
}


/* 受講者の声：全体レイアウト */
.voices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px; /* カード間の余白 */
}

/* 各カード */
.voice-card {
  flex: 1 1 calc(33.333% - 30px); /* PCでは3列 */
  max-width: 360px;
  text-align: center;
}

/* 写真 */
.voice-card > figure {
  width: 250px;       /* PC基準サイズ */
  height: auto;
  max-width: 100%;    /* スマホで縮小対応 */
  margin: 0 auto 8px; /* 下にちょっと余白 */
  border-radius: 8px; /* ほんの少し角丸 */
  overflow: hidden;
}

/* 名前 */
.voice-name {
  font-weight: bold;
  margin: 4px 0;
}

/* コメント */
.voice-text {
  font-size: 0.95em;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 90%;
}

/* スマホ（1列表示＋写真幅100%） */
@media (max-width: 768px) {
  .voice-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .voice-card > figure {
    width: 100%;     /* スマホは横幅いっぱい */
    max-width: 320px;/* 大きすぎ防止 */
  }
}













/*----------------------------
　共通ユーティリティ
----------------------------*/

/* 幅クラス */
.width30{ width:30px;}
.width50{ width:50px;}
.width100{ width:100px;}
.width200{ width:200px;}
.width220{ width:220px;}
.width370{ width:370px;}
.width400{ width:400px;}
.width470{ width:470px;}
.width510{ width:510px;}
.width600{ width:600px;}

/* 回りこみ＆解除 */
.float_l{ float:left;}
.float_r{ float:right;}
.cb{ clear:both;}

/* 行揃え */
.text_r {text-align: right;}
.text_l {text-align: left;}
.text_c {text-align: center;}
.m0auto {margin: 0 auto;} /* table 等に */

/* フォント色 */
.font_white{color:#FFFFFF;}
.font_dred{color:#CC0033}
.font_orange{ color:#FF6600;}
.font_indigo{ color: #212369;}
.font_dgreen{ color:#006600;}
.font_bgreen{color:#005100;}
.font_brown{ color:#43270E;}
.font_yellow{ color: #FFCC33;}
.font_dyellow{color:#9F9800;}
.font_ddyellow{color:#6d6800;}
.font_lyellow{ color: #CCCC66;}
.font_blue{ color: #0099CC;}
.font_lblue{ color:#0033FF;}
.font_purple{ color: #CC00FF;}
.font_dpurple{color:#350067;}
.font_black{ color:#000000;}
.font_gray{ color:#999999;}
.font_pink{ color:#C40469;}
.font_lpink{ color:#ff00cc;}
.font_green{ color:#33CC00;}
.font_red{color:#FF0000}
.b{font-weight: bold;}

/* リスト */
.list_disc{list-style-type:disc;}
.list_circle{list-style-type: circle;}
.list_ualpha {list-style-type:upper-alpha;}
.list_alpha{list-style-type:lower-alpha;}
.list_decimal{list-style-type:decimal;}
.list_margin li{margin:10px 0 0 0;}
.list_margin5 li{margin:5px 0 0 0;}

/* マージン */
.auto{margin:auto;}
.T0{margin-top:0px;}
.T5{ margin-top:5px;}
.T10{ margin-top:10px;}
.T15{ margin-top:15px;}
.T20{ margin-top:20px;}
.T25{ margin-top:25px;}
.T30{ margin-top:30px;}
.T35{ margin-top:35px;}
.T40{ margin-top:40px;}
.T45{ margin-top:45px;}
.T50{ margin-top:50px;}
.T90{ margin-top:90px;}
.T400{ margin-top:400px;}
.T-22{ margin-top:-22px;}
.L0{ margin-left:0px;}
.L5{ margin-left:5px;}
.L10{ margin-left:10px;}
.L15{ margin-left:15px;}
.L20{ margin-left:20px;}
.L25{ margin-left:25px;}
.L30{ margin-left:30px;}
.L35{ margin-left:35px;}
.L40{ margin-left:40px;}
.L45{ margin-left:45px;}
.L50{ margin-left:50px;}
.L55{ margin-left:55px;}
.L60{ margin-left:60px;}
.L65{ margin-left:65px;}
.L70{ margin-left:70px;}
.L75{ margin-left:75px;}
.L80{ margin-left:80px;}
.L85{ margin-left:85px;}
.L90{ margin-left:90px;}
.L95{ margin-left:95px;}
.L100{ margin-left:100px;}
.L110{ margin-left:110px;}
.R5{ margin-right:5px;}
.R10{ margin-right:10px;}
.R15{ margin-right:15px;}
.R20{ margin-right:20px;}
.R30{ margin-right:30px;}
.R35{ margin-right:35px;}
.R40{ margin-right:40px;}
.R50{ margin-right:50px;}
.B5{ margin-bottom:5px;}
.B10{ margin-bottom:10px;}
.B15{ margin-bottom:15px;}
.B20{ margin-bottom:20px;}
.B25{ margin-bottom:25px;}
.B30{ margin-bottom:30px;}
.B40{ margin-bottom:40px;}
.B50{ margin-bottom:50px;}
.B60{ margin-bottom:60px;}
.B70{ margin-bottom:70px;}
.ALL10{ margin:10px;}

/* パディング */
.pT5{padding-top:5px;}
.pT10{padding-top:10px;}
.pT15{padding-top:15px;}
.pT20{padding-top:20px;}
.pT25{padding-top:25px;}
.pT30{padding-top:30px;}
.pT35{padding-top:35px;}
.pT40{padding-top:40px;}
.pT45{padding-top:45px;}
.pT50{padding-top:50px;}
.pT60{padding-top:60px;}
.pT70{padding-top:70px;}
.pL3{padding-left:3px;}
.pL5{padding-left:5px;}
.pL10{padding-left:10px;}
.pL15{padding-left:15px;}
.pL20{padding-left:20px;}
.pL30{padding-left:30px;}
.pL40{padding-left:40px;}
.pL50{padding-left:50px;}
.pR5{padding-right:5px;}
.pR10{padding-right:10px;}
.pR20{padding-right:20px;}
.pR25{padding-right:25px;}
.pR30{padding-right:30px;}
.pR35{padding-right:35px;}
.pR40{padding-right:40px;}
.pR45{padding-right:45px;}
.pB1{padding-bottom:1px;}
.pB3{padding-bottom:3px;}
.pB5{padding-bottom:5px;}
.pB10{padding-bottom:10px;}
.pB15{padding-bottom:15px;}
.pB20{padding-bottom:20px;}
.pB30{padding-bottom:30px;}
.pB40{padding-bottom:40px;}

/* マージン（em） */
.T05em{ margin-top:0.5em;}
.T1em{ margin-top:1em;}
.T15em{ margin-top:1.5em;}
.T2em{ margin-top:2em;}
.T3em{ margin-top:3em;}
.T4em{ margin-top:4em;}
.T5em{ margin-top:5em;}
.R05em{ margin-right:0.5em;}
.R1em{ margin-right:1em;}
.R15em{ margin-right:1.5em;}
.R2em{ margin-right:2em;}
.R3em{ margin-right:3em;}
.R4em{ margin-right:4em;}
.R5em{ margin-right:5em;}
.B05em{ margin-bottom:0.5em;}
.B1em{ margin-bottom:1em;}
.B15em{ margin-bottom:1.5em;}
.B2em{ margin-bottom:2em;}
.B3em{ margin-bottom:3em;}
.B4em{ margin-bottom:4em;}
.B5em{ margin-bottom:5em;}
.L05em{ margin-left:0.5em;}
.L1em{ margin-left:1em;}
.L15em{ margin-left:1.5em;}
.L2em{ margin-left:2em;}
.L3em{ margin-left:3em;}
.L4em{ margin-left:4em;}
.L5em{ margin-left:5em;}

/* パディング（em） */
.pT05em{ padding-top:0.5em;}
.pT1em{ padding-top:1em;}
.pT15em{ padding-top:1.5em;}
.pT2em{ padding-top:2em;}
.pT3em{ padding-top:3em;}
.pT4em{ padding-top:4em;}
.pT5em{ padding-top:5em;}
.pR05em{ padding-right:0.5em;}
.pR1em{ padding-right:1em;}
.pR15em{ padding-right:1.5em;}
.pR2em{ padding-right:2em;}
.pR3em{ padding-right:3em;}
.pR4em{ padding-right:4em;}
.pR5em{ padding-right:5em;}
.pB05em{ padding-bottom:0.5em;}
.pB1em{ padding-bottom:1em;}
.pB15em{ padding-bottom:1.5em;}
.pB2em{ padding-bottom:2em;}
.pB3em{ padding-bottom:3em;}
.pB4em{ padding-bottom:4em;}
.pB5em{ padding-bottom:5em;}
.pL05em{ padding-left:0.5em;}
.pL1em{ padding-left:1em;}
.pL15em{ padding-left:1.5em;}
.pL2em{ padding-left:2em;}
.pL3em{ padding-left:3em;}
.pL4em{ padding-left:4em;}
.pL5em{ padding-left:5em;}

/* ---テーブル系共通使用--- */
.thw50 tbody tr th {width:50%;}
.thw30 tbody tr th {width:30%;}
.thw20 tbody tr th {width:20%;}
.thw15 tbody tr th {width:15%;}
.thw10 tbody tr th {width:10%;}
.w10 {width:10%;}
.w13 {width:13%;}
.w14 {width:14%;}
.w15 {width:15%;}
.w20 {width:20%;}
.w25 {width:25%;}
.w30 {width:30%;}
.w40 {width:40%;}
.w50 {width:50%;}
.w60 {width:60%;}
.w70 {width:70%;}
.w80 {width:80%;}
.w90 {width:90%;}
.tabletextR {text-align: right; padding-right: 1em;}
.tabletextL {text-align: left; padding-left: 1em;}
.tabletextC {text-align: center;}
.tabletext-thR tbody tr th {text-align: right; padding-right: 1em;}
.tabletext-thL tbody tr th {text-align: left; padding-left: 1em;}
.tabletext-thC tbody tr th {text-align: center;}
.tabletext-tdR tbody tr td {text-align: right; padding-right: 1em;}
.tabletext-tdL tbody tr td {text-align: left; padding-left: 1em;}
.tabletext-tdC tbody tr td {text-align: center;}
.borderT-W { border-top: double 3px #808080;}
td.td-ye{ background-color: #fffff0;} /* ivory */

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