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

/************************************
** 1. 全体・要素の微調整用変数設定
***********************************/
:root{
    --target-img-width:100%;
    --target-font-size:100%;
    --target-line-height:1.8;
    --target-math-size:100%;
}

/************************************
** 2. Web（通常表示）時のスタイル最適化
************************************/

body {
line-height: var(--target-line-height);
color: #333333;
}

/* ◆固定ページのタイトル非表示 */
.page .entry-title {
display: none;
}

/* ◆見出しスタイル（Web表示） */
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6 {
background: none;
box-shadow: none;
}

.article h1 {
font-size: 32px;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 10px 0 0px;
padding: 20px 0;
border-top: 5px solid #949495;
border-bottom: 5px solid #949495;
}

.article h2 {
font-size: 30px;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 50px 0 25px;
padding: 12px 0;
border-top: 3px solid #949495;
border-bottom: 3px solid #949495;
}

.article h3 {
font-size: 28px;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 40px 0 20px;
padding: 6px 0 6px 14px;
border-left: 8px solid #949495;
}

.article h4 {
font-size: 26px;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 35px 0 18px;
padding-left: 12px;
border-left: 4px solid #949495;
}

.article h5 {
font-size: 24px;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 0px 0px 30px;
padding-bottom: 8px;
border-bottom: 2px solid #949495;
}
.entry-content h5::before {
content: "■";
color: #949495;
margin-right: 8px;
font-size: 18px;
position: relative;
top: 0px;
}

.article h6 {
font-size: 22px;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 0px 0px 30px;
padding-bottom: 8px;
border-bottom: 2px solid #949495;
}

/*====================================
記事一覧だけカード化
====================================*/

.list .posts{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:32px;
}

@media(max-width:1024px){
.list .posts{
    grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:768px){
.list .posts{
    grid-template-columns:1fr;
}
}

/*====================================
関連記事カード
====================================*/

.related-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.related-entry-card-wrap{
    width:100%;
}

.related-entry-card{
    display:block;
}

@media (max-width:1024px){

.related-list{
    grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:768px){

.related-list{
    grid-template-columns:1fr;
}

}

/*========================================
  Cocoon 内部ブログカード（完成版）
========================================*/

/* カード全体 */
.internal-blogcard{
    border:none;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    transition:.25s ease;
}

.internal-blogcard:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
}

/* リンク */
.internal-blogcard-wrap{
    text-decoration:none;
}

/* レイアウト */
.internal-blogcard .blogcard{
    display:flex;
    align-items:center;
    padding:20px;
}

/* サムネイル */
.internal-blogcard .blogcard-thumbnail{
    width:220px;
    flex-shrink:0;
    margin-right:20px;
}

.internal-blogcard .blogcard-thumbnail img{
    width:100%;
    display:block;
    border-radius:10px;
}

/* 本文 */
.internal-blogcard .blogcard-content{
    flex:1;
}

/* タイトル */
.internal-blogcard .blogcard-title{
    font-size:24px;
    font-weight:700;
    color:#17365d;
    line-height:1.4;
    margin-bottom:10px;
}

/* 説明 */
.internal-blogcard .internal-blogcard-snippet{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;

    color:#666;
    line-height:1.7;
}

/* URL非表示 */
.internal-blogcard .blogcard-footer{
    display:none;
}

/* スマホ */
@media (max-width:768px){

.internal-blogcard .blogcard{
    display:block;
    padding:16px;
}

.internal-blogcard .blogcard-thumbnail{
    width:100%;
    margin:0 0 14px;
}

.internal-blogcard .blogcard-title{
    font-size:20px;
}

}
/* ===========================================
=========================================== */
/* ◆アピール画像・おすすめカード */
#appeal .appeal-in {
height: min(calc(100vw * 0.22), 420px);
}
#recommended .navi-entry-card-title{
font-weight:700;
color:#0E2F4F;
line-height:1.5;
}

/* ◆カテゴリーラベル非表示 */
.cat-label {
display: none !important;
}

/* ◆サイドバー設定（外枠線を削除） */
.sidebar {
border: none !important;
box-shadow: none !important;
}

/* ◆プロフィール リンク解除 */
.author-box .author-content .author-name a {
color: #14171a;
text-decoration: none;
pointer-events: none;
}

/* グローバルメニューの文字サイズと余白をコンパクトにして見切れを防ぐ */
.navi-in > ul li a {
  font-size: 15px; /* （必要に応じて 12px~16px で調整） */
  text-align: center !important; /* 文字を左寄せにする */
  justify-content: flex-start !important; /* フレックスボックスを使用している場合の左寄せ *
  padding: 0 0px; /* 左右の余白を狭くする */
  border-radius: 10px !important; /* 数値を大きくすると丸みが強くなります（50pxなどで完全に丸くなります） */
  margin: 0px; /* 項目同士の隙間を空ける場合 */
}
/* プルダウンメニュー（サブメニュー）全体の文字を左寄せにする */
.navi-in ul.sub-menu li a {
  text-align: left !important;
  justify-content: flex-start !important;
  padding-left: 30px !important; /* 左側の余白（インデント）の調整：必要に応じて数値を変更してください */
  padding-right: 15px !important; /* 右側の余白の調整 */
  border-radius: 10px !important; /* お好みの丸みに調整してください */
  overflow: hidden; /* 角を綺麗に丸く切り抜くため */
}
/* ===========================================
Main : #0E2F4F
Accent : #00C8FF
Link Blue : #2196F3
Background : #F7F9FC
=========================================== */

/* ボックスメニュー全体 */
.box-menus{
margin:2px;
}

/* ボックス */
.box-menu{
background:#ffffff;
border:1px solid #0E2F4F;
border-radius:14px;
padding:14px;
transition:.35s ease;
}

/* ホバー */
.box-menu:hover{
background:#F7FBFE;
border-color:#00C8FF;
box-shadow:0 8px 22px rgba(14,47,79,.18);
transform:translateY(-3px);
}

/* タイトル */
.box-menu-label{
font-size:16px;
font-weight:700;
color:#0E2F4F;
transition:.3s;
}

/* 説明 */
.box-menu-description{
font-size:12px;
color:#666666;
transition:.3s;
}

/* アイコン */
.box-menu-icon{
font-size:30px;
color:#00C8FF;
transform:scale(1.08);
}

/* ホバー時 */
.box-menu:hover .box-menu-label{
color:#0E2F4F;
}

.box-menu:hover .box-menu-description{
color:#444444;
}

.box-menu:hover .box-menu-icon{
color:#2196F3;
transform(1.08);
}

/************************************
** 3. カスタムHTML（manual-fit-template）個別制御
************************************/
.manual-fit-template img {
width: var(--target-img-width);
max-width: 100%;
height: auto;
display: block;
margin: 5px auto;
}
.manual-fit-template p,
.manual-fit-template span,
.manual-fit-template li {
font-size: var(--target-font-size);
line-height: var(--target-line-height);
}
.manual-fit-template .mjx-chtml,
.manual-fit-template .katex,
.manual-fit-template .math {
font-size: var(--target-math-size) !important;
}

/************************************
** 4. 印刷（Print My Blog）時最適化
************************************/
@media print {
*,
*::before,
*::after {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}

@page {
size: A4 portrait;
margin: 18mm 17mm;
}

html, body {
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
}

.print-page-break{
	height:0 !important;
	margin:0 !important;
	padding:0 !important;
	border:0 !important;
	break-before:page !important;
	page-break-before:always !important;
}

/* 記事エリア全体のパディング設定 */
.entry-content,
.print-my-blog,
.print-my-blog-content {
box-sizing: border-box !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
border: none !important;
}

/* 印刷時の見出し設定 */
.article h1 {
/* 上下一重太線 */
font-size: 32px;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 10px 0 0px !important;
padding: 20px 0 !important;
border-top: 5px solid #949495 !important;
border-bottom: 5px solid #949495 !important;
}

.article h2 {
/*上下一重線*/
font-size: 30px;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 50px 0 25px !important;
padding: 12px 0 !important;
border-top: 3px solid #949495 !important;
border-bottom: 3px solid #949495 !important;
}

.article h3 {
/*左太帯*/
font-size: 28px;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 40px 0 20px !important;
padding: 6px 0 6px 14px !important;
border-left: 8px solid #949495 !important;
}

.article h4 {
/*左帯*/
font-size: 26px;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 35px 0 18px !important;
padding-left: 12px !important;
border-left: 4px solid #949495 !important;
}

.article h5 {
/*「■」付き*/
font-size: 24px;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 0px 0px 30px !important;
padding-bottom: 8px !important;
border-bottom: 2px solid #949495 !important;
}

.entry-content h5::before {
content: "■";
color: #949495 !important;
margin-right: 8px !important;
font-size: 18px !important;
position: relative !important;
top: 0px !important;
}

.article h6 {
/*アンダーライン*/
font-size: 22px;
font-weight: 700;
line-height: 1.5;
color: #333333;
margin: 0px 0px 30px !important;
padding-bottom: 4px !important;
border-bottom: 2px solid #949495 !important;
}

/* 途中の空白ページ発生を抑えるCSS */
.print-page-break {
page-break-before: always !important;
break-before: page !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
clear: both !important;
}

/* 直前ブロックの余白でページがあふれるのを防ぐ */
.print-page-break + *{
margin-bottom: 0 !important;
}

/* 該当ページ全体をわずかに縮小して溢れを防ぐクラス */
.article.fit-page,
.print-page.fit-page{
    zoom:0.96 !important;
}

/* Firefox等 zoom未対応ブラウザ用のバックアップ */
@supports not (zoom: 1) {
.article.fit-page,
.print-page.fit-page {
transform: scale(0.96) !important;
transform-origin: top center !important;
}
}

}

/************************************
** 5. レスポンシブデザイン
************************************/

/* ===== アピールエリア ===== */
#appeal .appeal-in {
height: min(calc(100vw * 0.23), 430px);
}

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

#appeal .appeal-in {
    height: 340px;
}

body {
line-height: 1.85;
}

.mobile-header-menu-buttons .menu-button,
.navi-menu-content,
.mobile-menu-buttons .menu-button {
background-color: #5b7e91;
}

.mobile-menu-buttons .menu-button {
padding-top: 6px;
}

.mobile-header-menu-buttons .menu-caption {
display: none;
}

.search-menu-button.menu-button,
.navi-menu-button.menu-button {
height: 56px;
padding-top: 20px;
}
}

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

/* アピールエリア */
#appeal .appeal-in {
height: 300px;
}

body {
line-height: 1.85;
}
}

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

/* アピールエリア */
#appeal .appeal-in {
height: 240px;
}

body {
line-height: 1.85;
}

.mobile-header-menu-buttons .menu-button {
font-size: 14px;
}

.navi-menu-content {
font-size: 16px;
}
}