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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
:root {
  /* Color */
  --bg:           #ffffff;
  --bg-sub:       #f5f5f7;
  --bg-hover:     #f0f0f5;
  --text-primary: #1d1d1f;
  --text-body:    #3a3a3c;
  --text-meta:    #6e6e73;
  --text-muted:   #aeaeb2;
  --accent:       #0071e3;
  --accent-hover: #005bbf;
  --accent-soft:  rgba(0, 113, 227, .10);
  --red:          #ff3b30;
  --green:        #34c759;
  --border:       #d2d2d7;
  --border-lt:    #e8e8ed;
  --border-xlt:   #f2f2f5;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Helvetica Neue", Arial,
               "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", Meiryo, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                  "Helvetica Neue", Arial,
                  "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                  "Noto Sans JP", Meiryo, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code",
               "Fira Code", Menlo, monospace;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 980px;

  /* Shadow */
  --shadow-sm:  0 1px 4px rgba(0,0,0,.06);
  --shadow-md:  0 2px 12px rgba(0,0,0,.08);

  /* Spacing */
  --gap: 32px;
}

*{
	font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,sans-serif;
}
.wrap {
	width:1000px;
}
.main{
	width:700px;
	padding: 0 40px;
}
.sidebar{
	width:250px;
}
.pr-label-l{
	border 1px solid #fcba03;
	border-radius: 7px;
}
h1, h2, h3, h4, h5, p, li{
	color: #3d3d3d;
}
p{
	margin: 40px 0!important;
	font-size: 17px;
}

/* ヘッダー全体 */
.header-container {
  background-color: #FFFFFF !important; 
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.03), 
    0 1px 3px rgba(0, 0, 0, 0.02) !important;
  position: relative;
  z-index: 100; 
	border-bottom-left-radius:30px;
	border-bottom-right-radius:30px;
}

/* ヘッダーロゴ */
.header-container-in.hlt-top-menu .logo-header img{
	max-height:80px;
}
/* ロゴの位置調整 */
.header-in{
	justify-content:initial;
}
.header .header-in{
	min-height:80px !important;
}
.menu-header .item-label{
	font-size:14px !important;
}
.sub-caption{
	font-size:11.5px !important;
}

/*ヘッダーの文字色と背景色を変える追加CSS*/
.mobile-menu-buttons{
	color: #000!important;
	background-color: #fff!important;

	height: 70px;
}
.menu-header .item-label{
	font-size:16px;
	font-weight:bold;
}

/* レスポンシブヘッダーの検索アイコン */
.navi-menu-content .fa-search:before{
	color:#fff!important;
}
/* レスポンシブヘッダーロゴサイズ変更 */
.logo-menu-button img{
	max-height:65px!important;
}
/* レスポンシブヘッダーメニュー */
.menu-content{
/* 	background-color:var(--cocoon-text-color); */
}
.menu-close-button{
	text-align:right;
	padding-right:20px;
}
.fa-remove:before, .fa-close:before, .fa-times:before{
	color:#000;
}
.menu-drawer a{
	color:#000;
}
.navi-menu-content li.menu-item-object-category{
	border-bottom:1px solid #000;
	padding:8px 0;
}
.navi-menu-content li.menu-item-object-category a::before{
	font: normal normal normal 14px / 1 FontAwesome;
	color: #000;
	content:'\f0c1';
	position:relative;
	right:7px;
	top:-1px
}


.definition-box dd{
	background: #ffffff;
    border-radius: 20px; /* 角を丸くする */
    padding: 30px;
    
    box-shadow: 0 15px 40px rgba(30, 58, 90, 0.15) !important;
}
.article dd{
	margin: 10px 0 30px 0;
	margin-left: 0;
}
.definition-box dt::before {
    content: "\f008"; 
    font-family: "FontAwesome"; /* バージョン違いへの対応 */
    font-weight: 900; 
    color: #1e3a5a; 
    margin-right: 10px; 
    font-size: 0.9em; 
    display: inline-block;
}

/* ついでに用語名（dt）本体のデザインをDictionary.com風に調整 */
.definition-box dt {
    font-size: 19px; /* 用語名を大きく強調 */
    font-weight: 700;
    color: #1d1d1f; /* Apple/SaaS風の墨色 */
    margin-bottom: 8px;
    display: flex;
    align-items: center;
	padding-left:10px;
}

/* サイドバー */
.main, .sidebar{
	background-color: #fff;
}
.sidebar h2, .sidebar h3{
	font-size: 16px;
	font-weight: bold;
	text-align:left;
	background-color: #fff;
	color: #000;
	padding-bottom:5px;
	border:none;
	border-bottom:4px solid #fcba03;
}
.widget-title::before{
	font: normal normal normal 21px / 1 FontAwesome;
	color: #000;
	position:relative;
	right:7px;
	top:2px
}
#search-2 .widget-title::before{
	content:'\f02d';
}
#categories-4 .widget-title::before{
	content:'\f083';
}
#new_entries-2 .widget-title::before{
	content:'\f044';
}

/* 検索ボックス */
.search-box input[type=text]{
	font-size:14px;
	padding:10px;
	border-radius:5px;
	background-color:#fff;
}
.fa-search:before {
	color:#0a0a0a;
	font:12px;
}
/* カテゴリ */
li.cat-item a{
	font-size:16px;
	font-weight:normal;
	padding-left:20px!important;
	border-radius:10px;
}
.widget-entry-cards:not(.large-thumb-on) .card-title{
	display: -webkit-box;             
	-webkit-box-orient: vertical;      /* 垂直方向に配置 */
	overflow: hidden;                  /* 溢れた部分を隠す */
	text-overflow: ellipsis;           /* 溢れた部分に「...」を表示 */
	-webkit-line-clamp: 3;  
	text-align:center;
	vertical-align:middle;
	padding-top:5px
}

/* メイン */
.breadcrumb {
  font-size: 12px !important;
  color: var(--text-meta) !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  line-height: 1.5 !important;
}

.breadcrumb a {
  color: var(--text-meta) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}

.breadcrumb a:hover {
  color: var(--accent) !important;
  text-decoration: none !important;
}

.breadcrumb .sp {
  margin: 0 6px !important;
  color: var(--border) !important;
}

h1.entry-title{
	font-size:30px;
	line-height: normal;
	margin:30px 0;
	padding-right: 0;
	padding-left: 0;
}
img{
	border-radius:7px;
}
.article h2{
	font-size:26px;
	margin-top: 50px!important;
	border-bottom:3px solid #fcba03;
	padding-left: 10px;
}
.article h3{
	font-size:23px;
	color:#000;
	background-color:inherit;
	border-left:8px solid #fcba03;
	margin-top:40px!important;
}
/* =========================================
   H4 見出し：丸矢印アイコンスタイル（改行対応版）
========================================= */
.entry-content h4.wp-block-heading,
.entry-content h4 {
  border-left: none !important; 
  border-bottom: 3px dashed #fcba03;
	padding:10px;
  font-size: 20px; 
  font-weight: 700 !important;
  color: #1D1D1F !important;
  margin-top: 40px !important;
  margin-bottom: 1.2em !important;
  position: relative; /* アイコン配置の基準にするため必須 */
  line-height: 1.5 !important;
}

/* 2. 目次*/
#toc.toc {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 28px !important; 
	margin:0;
	padding:0;
	width:100%;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.04),
    0 1px 4px rgba(0, 0, 0, 0.02) !important;
  
  padding: 40px !important;
  margin: 4em auto !important;
  max-width: 800px;
}

/* 目次のタイトル */
#toc .toc-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1D1D1F !important;
  letter-spacing: -0.02em;
  margin-bottom: 10px !important;
  display: flex;
  align-items: center;
	padding:0;
}

/* リストのデザイン */
#toc .toc-content .toc-list li {
  margin-bottom: 8px !important;
}

#toc .toc-content .toc-list li a {
  color: #424245 !important;
  text-decoration: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#toc .toc-content .toc-list li::marker {
  color: #fcba03 !important;
  font-weight: 700;
}

#toc .toc-content .toc-list a:hover {
  color: #fcba03 !important;
  padding-left: 5px;
}

/* ─── Table（テーブル）辞書表組み風 ─────────────────────── */
.scrollable-table {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--border) !important;
  margin: 1.4em 0 !important;
}

.article table,
.entry-content table,
.wp-block-table table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  font-size: 15px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* セル共通 */
.article table th,
.entry-content table th,
.wp-block-table table th,
.article table td,
.entry-content table td,
.wp-block-table table td {
  border: none !important;
  border-bottom: 1px solid var(--border-lt) !important;
  padding: 12px 16px !important;
  text-align: left !important;
  vertical-align: top !important;
  line-height: 1.6 !important;
}

/* 最終行のボーダー除去 */
.article table tr:last-child th,
.entry-content table tr:last-child th,
.article table tr:last-child td,
.entry-content table tr:last-child td {
  border-bottom: none !important;
}


/* ヘッダー行 */
.article table th,
.entry-content table th,
.wp-block-table table th {
  background: var(--bg-sub) !important;
  color: var(--text-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
}

/* データ行 */
table {
    width: 100%;
    table-layout: fixed!important; 
    border-collapse: collapse;
}
th{
	white-space: normal!important;
    word-break: break-all!important; 
    overflow-wrap: break-word!important;
}

.wp-block-table thead {
	border-bottom: 0!important;
}
.article table td,
.entry-content table td,
.wp-block-table table td {
  background: var(--bg) !important;
  color: var(--text-body) !important;
  font-size: 15px !important;
}

/* 偶数行 */
.article table tbody tr:nth-of-type(2n),
.entry-content table tbody tr:nth-of-type(2n) {
  background: var(--bg) !important;
}

.article table tbody tr:nth-of-type(2n+1),
.entry-content table tbody tr:nth-of-type(2n+1) {
  background: var(--bg-sub) !important;
}

/* ホバー */
.article table tbody tr:hover td,
.entry-content table tbody tr:hover td {
  background: var(--bg-hover) !important;
  transition: background .12s ease !important;
}

/* figcaptionのないテーブルに直接ボーダー付与 */
.article table,
.entry-content table {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
}
  .article table th,
  .entry-content table th,
  .article table td,
  .entry-content table td {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }


.wp-block-list{
	background: #FFFFFF !important; 
  border-radius: 20px !important; 
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.03),
    0 1px 3px rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important; 
  padding: 30px 40px 35px 50px !important;
  margin: 2.5em 0 !important;
}
.wp-block-list li{
	font-size:15px;
}

/* フッター */
.footer{
	border-top:1px solid #B8B8B8;
}

/* アプリーチ */
.appreach {
  text-align: left;
  padding: 10px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.02) !important;
	border-radius:10px;
  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;
}
/* アプリーチここまで */

/* サイドバー記事一覧のサムネイルを非表示にする */
.widget-sidebar .card-thumb,
.widget-sidebar .new-entry-card-thumb {
    display: none !important;
}

/* 画像が消えた分、テキストエリアを左に詰める */
.widget-sidebar .card-content,
.widget-sidebar .new-entry-card-content {
    margin-left: 0 !important;
    width: 100% !important;
}
/* サイドバーの記事タイトル全体のデザイン調整 */
.widget-sidebar .new-entry-card-content,
.widget-sidebar .card-content {
    text-align: left !important; /* 中央揃えを解除して左揃えに */
    padding: 12px 0 !important; /* 上下に心地よい余白を設ける */
    border-bottom: 1px solid #e0e0e0; /* 記事と記事の間に薄い区切り線を入れる */
}

/* 最後の記事の区切り線は消す */
.widget-sidebar a:last-of-type .new-entry-card-content {
    border-bottom: none;
}

/* タイトルの文字サイズと行数統一（魔法のコード） */
.widget-sidebar .new-entry-card-title,
.widget-sidebar .card-title {
    font-size: 15px !important; /* 読みやすい少し控えめなサイズに */
    line-height: 1.5 !important; /* 行間を整える */
    font-weight: bold;
    
    /* ▼ 2行でピタッと揃え、超えた分は「...」で省略 ▼ */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important; 
    overflow: hidden !important;
}
.widget-entry-cards:not(.large-thumb-on) .card-title{
	text-align:left!important;
}
.widget-entry-cards .a-wrap{
	padding: 0!important;
}
/* サイドバーのリンクをホバーした時の浮き上がり（ズレ）を解除 */
.widget-sidebar a:hover,
.widget-sidebar .new-entry-card-link:hover,
.widget-sidebar .widget-entry-card-link:hover {
    transform: none !important; /* 浮き上がりアニメーションを無効化 */
    top: 0 !important; /* 位置のズレをリセット */
	text-decoration: underline;
}

/* ついでに、ホバー時に背景色が少しグレーになる設定なども消して、プレーンにしたい場合 */
.widget-sidebar a:hover .new-entry-card-content,
.widget-sidebar a:hover .card-content {
    background-color: transparent !important;
}
/* 関連記事のサムネイルを非表示にする */
.related-entries .card-thumb,
.related-entries .related-entry-card-thumb {
    display: none !important;
}

/* 画像が消えた分、テキストエリアを左に詰める */
.related-entries .card-content,
.related-entries .related-entry-card-content {
    margin-left: 0 !important;
    width: 100% !important;
	border-bottom: 1px solid #e0e0e0; /* 記事と記事の間に薄い区切り線を入れる */
}
/* 関連記事をホバーした時の浮き上がり（ズレ）を無効化 */
.related-entries a:hover,
.related-entries .related-entry-card-wrap:hover,
.related-entries .a-wrap:hover {
    transform: none !important; /* 浮き上がりアニメーションを解除 */
    top: 0 !important; /* 位置のズレをリセット */
	box-shadow: none!important;
	text-decoration: underline;
}

/* もしホバー時に背景色が薄いグレーになるのも消したい場合は以下も追加 */
.related-entries a:hover .related-entry-card-content,
.related-entries a:hover .card-content {
    background-color: transparent !important;
	box-shadow: none!important;
}
/* サイドバーのカテゴリリスト全体の枠組み */
.widget_categories ul {
    list-style: none !important; /* デフォルトのポッチを消す */
    padding: 0 !important;
    margin: 0 !important;
}

/* 各カテゴリ項目のデザイン（新着記事と線を合わせる） */
.widget_categories ul li {
    border-bottom: 1px dashed #e0e0e0; /* 記事リストと同じ区切り線 */
}

/* 一番下の線は消してスッキリさせる */
.widget_categories ul li:last-child {
    border-bottom: none;
}

/* リンクテキストのデザイン */
.widget_categories ul li a {
    display: block !important; /* ブロック化して横幅いっぱいをクリック可能に */
    padding: 12px 10px 12px 20px !important; /* 上下左右の心地よい余白 */
    color: #333 !important; /* 落ち着いたダークグレー */
    text-decoration: none !important; /* 標準の下線を消す */
    position: relative;
    font-size: 14px; /* 新着記事とサイズを合わせる */
    font-weight: bold;
    transition: all 0.3s ease; /* ホバー時の変化を滑らかに */
}

/* 左端にさりげない「くの字」矢印を作る */
.widget_categories ul li a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #bbb;
    border-right: 2px solid #bbb;
    transform: translateY(-50%) rotate(45deg); /* 角度をつけて矢印にする */
}

/* ホバー時のデザイン（浮き上がらせず、背景色だけ変える） */
.widget_categories ul li a:hover {
    background-color: #f9f9f9 !important; /* うっすらグレーにして押せる感を出す */
    color: #000 !important;
    transform: none !important; /* 浮き上がりアニメーションを無効化 */
}

/* 矢印の色もホバー時に少し濃くする */
.widget_categories ul li a:hover::before {
    border-color: #333;
}
.search-submit{
	top:5px;
}
/* 親要素（カード全体）をFlexboxにして綺麗に横並びにする */
.list .entry-card,
.list .e-card {
    display: flex !important;
    align-items: flex-start !important; /* 上端で揃える */
    gap: 3% !important; /* 画像とテキストの間に3%の隙間を作る */
    padding: 20px 0 !important; /* 記事同士の上下の余白 */
}

/* サムネイル（画像）部分を全体の3割（30%）にする */
.list .entry-card-thumb,
.list .card-thumb {
    display: block !important; /* 以前の非表示設定を解除して表示させる */
    width: 30% !important;
    max-width: 30% !important;
    flex-shrink: 0 !important;
    margin: 0 !important; /* デフォルトの余白をリセット */
    float: none !important;
}

/* テキスト部分を全体の約7割（67%）にする */
.list .entry-card-content,
.list .card-content {
    width: 67% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}


/* =========================================
   目次：サブ見出し（2階層目以降）の番号を消す
========================================= */

/* 小見出しのリストマーク（数字）を非表示にする */
.toc-list li ol li,
#toc .toc-content .toc-list li ol li {
    list-style-type: none !important;
}

/* 以前設定したマーカーの色付けを小見出しのみ無効化（透明に）する */
.toc-list li ol li::marker,
#toc .toc-content .toc-list li ol li::marker {
    content: "" !important; 
    color: transparent !important;
}

/* 番号が消えた分、少し左に余白を設けてインデントを美しく保つ */
.toc-list li ol li,
#toc .toc-content .toc-list li ol li {
    padding-left: 0.5em !important;
}


/* =======================================
   スマホ画面（480px以下）の微調整
   スマホだと画像が小さくなりすぎるのを防ぐ
======================================= */
@media screen and (max-width: 480px) {
    .list .entry-card-thumb,
    .list .card-thumb {
        width: 35% !important; /* スマホのみ画像を3.5割に */
        max-width: 35% !important;
    }
    .list .entry-card-content,
    .list .card-content {
        width: 62% !important;
    }
    /* スマホは文字サイズを少し小さくして情報量を確保 */
    .list .entry-card-title {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	.wrap{
		width:auto;
	}
	.main{
		width:auto;
	}
	.sidebar{
		width:auto;
	}
	.header-in .tagline{
	display: none;
	}
	.header-container{
		display:none;
	}
	.fa-search:before{
		color:#000;
	}
	.article h2{
		font-size:18.5px;
	}
	.article h3{
		font-size:17.5px;
	}
	.entry-content h4.wp-block-heading,
.entry-content h4{
		font-size:16px;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.wp-block-table td, .wp-block-table th{
		font-size:14px!important;
	}
	h1.entry-title{
		font-size:20px;
		margin: 0;
	}
	p{
		font-size:15px;
	}
	.article ul li{
		font-size:14px;
	}
	.article ul strong{
		font-size:14.5px;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	 .article table,
  .entry-content table {
    font-size: 13px !important;
    border-radius: var(--r-sm) !important;
  }

  .article table th,
  .entry-content table th,
  .article table td,
  .entry-content table td {
    padding: 9px 10px !important;
    font-size: 13px !important;
  }
	h1.archive-title{
		font-size:22px;
	}
}