/*
Theme Name: Cocoon Child
Template: cocoon-master
*/
/*
  Skin Name: スキンテンプレート
  Description: スキンのひな形
  Skin URI: https://wp-cocoon.com/
  Author: わいひら
  Author URI: https://nelog.jp/
  Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png
  Version: 0.0.2
  Priority: 10010
*/
/*以下にスタイルシートを記入してください*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	.page-body {padding: 0 10px;}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.page-body {padding: 0 10px;}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.page-body {padding: 0 10px;}
}


/* 文字の色　段落など */
body {
  color: #545454;
}

/*以下デフォルトの見出しを無効化*/
.article h1 {
    padding: 0;
    background: none;
}
.article h2 {
    padding: 0;
    background: none;
    color: #fff; /* 文字色 */
}
.article h3,
.article h3:before,
.article h3:after {
content: none;
background: none;
background-color: none;
border: none;
border-radius: 0;
}
.article h4,
.article h4:before,
.article h4:after {
content: none;
background: none;
background-color: none;
border: none;
border-radius: 0;
}
/*ウィジェット見出し*/
.sidebar h3 {
    padding: 0.5em;
	background: linear-gradient(to bottom, #2C8F66, #3cb371) !important; 
	box-shadow: 0 0 44px rgba(0, 0, 0, 0.23);
	border-bottom: none;
	text-align: center;
	border-radius: 0.3em;/*角丸*/
}
.sidebar h3:after {
    
    position: none;
    content: none;
    display: none;
    border-bottom: none;
    bottom: none;
    left: none;
    width: none;
}
/*以下見出しのカスタマイズh1*/
.article h1{
    background: linear-gradient(to bottom, #2C8F66, #3cb371) !important; /* 背景色 */
    color: #fff; /* 文字色 */
    overflow: hidden;
    padding: 10px; /* 余白 */
    position: relative;
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.23) !important;
    border-radius: 0.3em;/*角丸*/
}
.article h1:before{
    background-color: #fff; /* 大きな円の色 */
    border-radius: 50%;
    content: '';
    display: block;
    opacity: 0.2; /* 大きな円の不透明度 */
    position: absolute;
    top: -20px;
    left: 0px;
    width: 200px; /* 大きな円の幅 */
    height: 200px; /* 大きな円の高さ */
}
.article h1:after{
    background-color: #fff; /* 小さな円の色 */
    border-radius: 50%;
    content: '';
    display: block;
    opacity: 0.2; /* 小さな円の不透明度 */
    position: absolute;
    bottom: -50px;
    left: 180px;
    width: 100px; /* 小さな円の幅 */
    height: 100px; /* 小さな円の高さ */
}
/*以下見出しのカスタマイズh2*/
.article h2 {
  position: relative;
  padding: 0.6em;
  background: linear-gradient(to bottom, #2C8F66, #3cb371) !important;
  border-radius: 0.3em;/*角の丸み*/
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.23) !important;
}
.article h2:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #3cb371;
width: 0;
height: 0;
}
/*以下見出しのカスタマイズh3*/
.article h3 {
	 position: relative;
     padding:0.5em 0.5em 0.5em 1.4em;
     border: 3px solid #3cb371;
     border-radius: 5px;
}	 
.article h3::after {
     position: absolute;
     top: 50%;
     left:0.7em;
     transform:translateY(-50%);
     content: '';
     width: 5px;
     height:25px;
     background-color: #3cb371;
}
/*以下見出しのカスタマイズh4*/
.article h4 {
border-bottom: solid 3px #dcdcdc;
position: relative;
}
.article h4:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #3cb371;
bottom: -3px;
width: 20%;
height: 34px !important;
}
/*以下見出しのカスタマイズh5*/

.article h5 {
     position: relative;
     padding-left: 1em;
}
.article h5::after {
     position: absolute;
     top: 50%;
     left:0;
     transform:translateY(-50%);
     content: '';
     width: 20px;
     height:4px;
     background-color: #3cb371;
}
/*吹き出しをカスタマイズ*/
.speech-balloon{
  margin-left: 5px!important;/*左の余白*/
  margin-right: 5px!important;/*右の余白*/
  margin-top: 15px!important;
  float:left;
  max-width: calc(100% - 140px);/*設定したキャラの大きさ +　左右の余白*/
}
.sbp-r .speech-balloon{
  float:right;
}
.speech-person{
  width: 130px;/*キャラの大きさ*/
}
/*480px以下*/
@media screen and (max-width: 480px){
  .speech-balloon{
    max-width: calc(100% - 80px);/*設定したキャラの大きさ +　左右の余白*/
  }
  .speech-person {
    width: 70px;/*キャラの大きさ*/
}
}
/*この記事を書いた人のカスタマイズ*/
.author-box {
  border: none !important;
  padding: 0 !important;
}

.pwa .author-box {
  text-align: left; /* 文字を左揃えに */
}
.author-box .author-widget-name{
  color: #666;
  background-color: #eaedf2;
  display: inline-block;
  margin: 0 auto 3px 1rem;
  padding: .4em;
  border-radius: 4px;
  font-weight: bold;
  position: relative;
  z-index: 2;
  font-size: .9em;
}

.author-box .author-widget-name::before {
  content: '';
  position: absolute;
  left: 20%;
  bottom: -15px;
  display: block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-top: 15px solid #eaedf2;
  border-left: 15px solid transparent;
  z-index: 1;
}
.author-box figure.author-thumb{
  float: none;
  margin: 0 !important;
  text-align: left;
  width: 100% !important;
  background: url(https://soil19.com/wp-content/uploads/2019/09/Vintage-19-09-2019_16h12m51s.jpg) center no-repeat; /* カバー画像を指定 */
  background-size: cover;
  position: relative;
  height: 0;
  /* フル表示にしたい場合のpadding-topの値： 表示画像の高さ(px) ÷ 表示画像の幅(px) × 100(%) */
  padding-top: 40%;
  z-index: 0;
}
.author-box figure.author-thumb img{
  border: 3px solid #fff;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
  height: auto;
  width: 30%;
  max-width: 200px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -4.5em;
}
.author-box .author-content{
  margin-left: 0 !important;
  margin-top: 5.5em !important;
}
.author-box .author-content .author-name{
  text-align: center;
  font-size: 1.3rem;
}
.author-box .author-content .author-name a{
  color: #14171a;
  text-decoration: none;
}
.author-box .author-content .author-name a:hover{
  color: #14171a;
  text-decoration: underline;
}
.author-box .author-content .author-description p{
  margin: .5em auto;
  line-height: 1.5 !important;
  max-width: 500px;
  font-size: 90%;
  text-align: left;
}
.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }
.author-box .author-content .author-follows .sns-buttons a.follow-button{
  border-radius: 50%;
  border: none;
  width: 40px;
  height: 40px;
  color: #fff;
  margin-bottom: .5em;
  margin-right: .5em;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}
.author-box .bc-brand-color.sns-follow .website-button{ background-color: #6eb6fd !important; }
.author-box .bc-brand-color.sns-follow .twitter-button{ background-color: #7dcdf7 !important; }
.author-box .bc-brand-color.sns-follow .facebook-button{ background-color: #7c9dec !important; }
.author-box .bc-brand-color.sns-follow .hatebu-button{ background-color: #2c6ebd !important; }
.author-box .bc-brand-color.sns-follow .google-plus-button{ background-color: #dd4b39 !important; }
.author-box .bc-brand-color.sns-follow .instagram-button{ background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;}
.author-box .bc-brand-color.sns-follow .youtube-button{ background-color: #cd201f !important; }
.author-box .bc-brand-color.sns-follow .flickr-button{ background-color: #111 !important; }
.author-box .bc-brand-color.sns-follow .pinterest-button{ background-color: #bd081c !important; }
.author-box .bc-brand-color.sns-follow .line-button{ background-color: #00c300 !important; }
.author-box .bc-brand-color.sns-follow .amazon-button{ background-color: #ff9900 !important; }
.author-box .bc-brand-color.sns-follow .github-button{ background-color: #4078c0 !important; }
.author-box .bc-brand-color.sns-follow .feedly-button{ background-color: #2bb24c !important; }
.author-box .bc-brand-color.sns-follow .rss-button{ background-color: #f26522 !important; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }
main .author-box{
  max-width: 400px;
  margin: 0 auto;
  font-size: 80%;
}

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

/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
  display: none;
}

/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
  display: none;
}

/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
  display: none;
}

/*全固定固定ページの投稿者名を非表示*/
.page .author-info{
  display: none;
}
/*フロント固定ページの投稿日を非表示*/
.page .post-date{
  display: none;
}

/*ヘッダー下余白*/
.main {
    padding: 0px 0px;
}
.img {
    padding: 0px 0px;
}


/* モバイルのメニューバーの設定 */
.mobile-menu-buttons{
 background:rgba(60,179,113,0.9) !important;
}
/* メニューのみ */
.navi-menu-button {
	color: #FFFFFB;
}
/* ホームのみ */
.mobile-menu-buttons .home-menu-button > a {
	color: #FFFFFB;
}
/* 検索のみ */
.search-menu-button {
	color: #FFFFFB;
}
/* トップのみ：トップに画像を入れる歳は不要 */
.mobile-menu-buttons .top-menu-button > a {
	color: #FFFFFB;
}
/* サイドバーのみ */
.sidebar-menu-button {
	color: #FFFFFB;
}


/**Footer タグクラウド**/
.tagcloud a {
font-size: 14px !important;
line-height: 1em;
background: #21394d;
color: #fff;
display: inline-block;
white-space: nowrap;
padding: 8px;
margin-top: 3px;
border-radius: 4px;
text-decoration: none;
}
.tagcloud a:hover {
background: #ddd;
color: #c03 !important;
}


/* ウィジェットタイトルにFAアイコン */
.widget h3::before { font-family: FontAwesome; font-size: 80%; vertical-align: middle; font-weight: normal; margin-right: 5px; } /* 共通設定 */
.widget_links h3::before { content: '\f0c1'; } /* リンク */
.widget_popular_entries h3::before { content: '\f135'; } /* 人気記事 */
.widget_new_entries h3::before, .widget_recent_entries h3::before { content: '\f005'; } /* 新着記事 */
.widget_categories h3::before { content: '\f115'; } /* カテゴリー */
.widget_rss h3::before { content: '\f143'; } .widget_rss h3 img { display: none; } /* RSSフィード */
.widget_tag_cloud h3::before { content: '\f292'; } /* タグクラウド */
.widget_search h3::before { content: '\f002'; } /* 検索 */
.widget_meta h3::before { content: '\f085'; } /* メタ */
.widget_fb_like_box h3::before { content: '\f082'; } /* Faceboxボックス */
.widget_facebook_page_like h3::before { content: '\f082'; } /* Faceboxバルーン */
.widget_item_ranking h3::before { content: '\f091'; } /* ランキング */
.widget_calendar h3::before { content: '\f073'; } /* カレンダー */
.widget_recent_comments h3::before { content: '\f0e6'; } /* 新着コメント */

/*箇条書き枠線追加*/



/*目次にアイコン*/
.toc .toc-title::before{
  font-family: FontAwesome;
  content: '\f0f6';
  margin-right: .5em;
}

/***カテゴリウィジェット**/
#sidebar aside ul li ul li {
background: 0;
padding-left: 0;
}
#sidebar aside li.cat-item a {
display: block;
overflow: hidden;
font-size: 15px;
line-height: 2.4em;
text-decoration: none;
padding: 0 8px;
color: #2098a8;
margin-bottom: 1px;
}
#sidebar aside li.cat-item a:hover {
background: #fff;
color: #C03;
}
#sidebar aside li.cat-item span {
line-height: 1em;
float: right;
margin: 8px 0 0 8px;
padding: 4px 8px;
border-radius: 4px;
color: #fff;
background: #406572;
}

.widget_categories ul li a { /*親カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 6px 0;
    display: block;
    padding-right: 4px;
    padding-left: 4px;
    border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
}
.widget_categories ul li a::before { /*親カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "\f0da";
    padding-right: 10px;
}
.widget_categories > ul > li > a:first-child { 
    border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_categories > ul > li > a:last-child {
    border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
}
.widget_categories ul li a .post-count { /*記事数用のコード*/
    display: block;
    float: right;
    background: #ededed;
    padding: 0 1em;
    font-size: 14px;
    margin-top: .3em;
    border-radius: 4px;
}
.widget_categories ul li a:hover { /*親子共通マウスホバー時*/
    background: none;
    transition: 0.5s;
    color: #72c7e6;
}
.widget_categories ul li a:hover .post-count { /*記事数のマウスホバー時*/
    background: #72c7e6;
    color: #fff;
    transition: 0.5s;
}
.widget_categories ul li ul { /*子カテゴリのボックス*/
    padding-top: 20px;
    border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a { /*子カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 0 4px 0 4px;
    display: block;
    border: none;
}
.widget_categories ul li ul li a::before { /*子カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "・";
    padding: 0;
}
/*上からの距離*/
.cat-label {
    top: 0.5em; /*上からの距離*/
    left: 0.5em; /*左からの距離*/
    border: none; /*ボーダーを消す*/
    font-size: 12px; /*文字サイズ*/
    color: #fff; /*文字色*/
    background-color: #49add1; /*背景色*/
    padding: 1px 10px; /*余白*/
    border-radius: 14px; /*角を丸く*/
}
/*ロゴ下余白*/
.logo-image {
	padding: 3;
}
.logo-image * {
	display: block;
	margin: auto;
}



/*ボタン色変更*/

.btn-red { background-color: #f44336; } /* レッド */
.btn-pink { background-color: #e91e63; } /* ピンク */
.btn-purple { background-color: #9c27b0; } /* パープル */
.btn-deep { background-color: #673ab7; } /* ディープパープル */
.btn-indigo { background-color: #3f51b5; } /* インディゴ(紺色) */
.btn-blue { background-color: #2196f3; } /* ブルー */
.btn-light-blue { background-color: #03a9f4; } /* ライトブルー */
.btn-cyan { background-color: #00bcd4; } /* シアン */
.btn-teal { background-color: #009688;} /* ティール(緑色がかった青) */
.btn-green { background-color: #3cb371 !important; } /* グリーン */
.btn-light-green { background-color: #8bc34a; } /* ライトグリーン */
.btn-lime { background-color: #cddc39; } /* ライム */
.btn-yellow { background-color: #edd60e; } /* イエロー */
.btn-amber { background-color: #ffc107; } /* アンバー(琥珀色) */
.btn-orange { background-color: #ff9800; } /* オレンジ */
.btn-deep-orange { background-color: #ff5722; } /* ディープオレンジ */
.btn-brown { background-color: #795548; } /* ブラウン */
.btn-grey { background-color: #9e9e9e; } /* グレー */

/************************************
** ■Table（表）背景色の設定
************************************/
table td {
background: #FFFFFF;
border-color: #3CB371;
}

table th {
background: #3CB371;
border-color: #FFFFFF;
}

/************************************
** ■ヘッダーメニュー ホバーエフェクト化のカスタマイズ
************************************/

#navi .navi-in a::after {
  position: absolute;
  color: rgba(255,255,255,1);
  bottom: 0px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 4px;
  background: #3CB371;
  transform: scaleX(0);
  transition: transform 0.4s;
}
#navi .navi-in a:hover::after {
  transform: scaleX(1);
  transition: transform 0.3s;
}

.article img:hover {
	opacity: 0.6;
	transition: all 0.8s ease;
}

/* ===================================================================
   2026-06 デザイン洗練（信頼感・清潔）— 追記ブロック
   ※見出し(h1〜h3)の装飾は元のまま（枠・横線・グラデは触らない）
   ※フォントの @import は style.css 先頭に別途記載
   元に戻す場合：このブロックと先頭の @import 行を削除すればOK
=================================================================== */
:root{
  --soil-green:#3cb371;
  --soil-green-d:#2c8f66;
  --soil-line:#e4ebe6;
}

/* フォント：Noto Sans JP（body上書き＝アイコンフォント等の明示指定には影響しない） */
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif !important;
}

/* 本文の可読性（行間・字間・色）※見出しの装飾は対象外 */
.article,
.entry-content{
  color:#454f49;
  line-height:1.95;
  letter-spacing:.02em;
}
.article p{ margin:0 0 1.45em; }

/* セクションの余白リズム（装飾には触れず、上の余白だけ） */
.article h2{ margin-top:2.4em; }
.article h3{ margin-top:2.0em; }
.article h2:first-child,
.article h3:first-child{ margin-top:.4em; }

/* リンク（ボタンは除外＝ボタン文字色はテーマ既定のまま） */
.article a:not(.btn):not(.wp-block-button__link){ color:var(--soil-green-d); text-underline-offset:2px; }
.article a:not(.btn):not(.wp-block-button__link):hover{ color:var(--soil-green); }

/* ボタン：角丸・余白・控えめな影・ホバーで浮く（文字色は変えない） */
.article .btn,
.wp-block-button__link,
a.btn{
  border-radius:9px !important;
  padding:.85em 1.8em !important;
  box-shadow:0 4px 12px rgba(0,0,0,.10) !important;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  letter-spacing:.03em;
}
.article .btn:hover,
.wp-block-button__link:hover,
a.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.16) !important;
  opacity:1;
}

/* 表：余白・ゼブラ・細い罫線・角丸・はみ出し防止 */
.article table{
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--soil-line);
  border-radius:10px;
  overflow:hidden;
  width:100%;
}
.article table th,
.article table td{
  padding:.8em 1em !important;
  border-color:#eef3f0 !important;
}
.article table th{
  background:var(--soil-green) !important;
  color:#fff !important;
  font-weight:700;
  letter-spacing:.03em;
}
.article table tbody tr:nth-child(even) td{ background:#f6faf8 !important; }

/* リストの余白 */
.article ul,
.article ol{ line-height:1.9; }
.article li{ margin:.3em 0; }

/* Cocoon の各種ボックスを軽く・清潔に */
.article .blank-box,
.article .information-box,
.article .info-box,
.article .ok-box,
.article .question-box,
.article .simple-box{
  border-radius:10px !important;
  border:1px solid var(--soil-line) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}

/* 区切り線 */
.article hr{
  border:none;
  height:1px;
  background:var(--soil-line);
  margin:2.4em 0;
}

/* スマホ最適化 */
@media screen and (max-width:480px){
  .article,
  .entry-content{ line-height:1.9; }
}

/* 鉛筆区切り線アニメ: IMG_1171.jpg を「左端から右へ」描画（JSで img を置換して使用） */
.soil-draw{
  display:block;
  width:0;
  max-width:100%;
  background-repeat:no-repeat;
  background-position:right center;
  overflow:hidden;
}
.soil-draw.is-drawn{
  width:var(--soil-final, 100%);
  transition:width 1.5s cubic-bezier(.25,.8,.3,1);
}

/* ===== ページを開いたとき/スクロール時に ふわっと現れる ===== */
.fade-up{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .75s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; }
.fade-up.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .fade-up{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ===== SOILトップ: 見出しデザイン (2026-06-20) ===== */
/* eyebrow(英語ラベルH3)は先頭に全角スペースがあり右にズレる→右線にも同じ隙間を足して中央化。 */
.home .article h3.wp-block-heading::after{
  margin-left:1em !important;   /* 先頭全角スペース分を右側にも足して左右対称=テキスト中央化 */
}

/* セクション見出し(H2): Cocoon既定の緑箱をリセットして中央寄せ。下線なし+緑3点ドット。文字色グレー寄り。 */
.home .article h2.wp-block-heading{
  display:block !important;
  width:auto !important;
  max-width:none !important;
  float:none !important;
  margin:2.4em auto 1.1em !important;
  padding:0 !important;
  font-size:clamp(20px,4.4vw,26px) !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  text-align:center !important;
  color:#555 !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  border:none !important;
  border-radius:0 !important;
  position:relative !important;
}
.home .article h2.wp-block-heading::before{ content:none !important; }
.home .article h2.wp-block-heading::after{
  content:"\2022\2003\2022\2003\2022" !important;  /* 緑3点(em space区切り=左右対称) */
  display:block !important;
  color:#3cb371 !important;
  font-size:.5em !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  margin:.7em auto 0 !important;
  padding:0 !important;
  text-align:center !important;
  background:none !important;
  width:auto !important; height:auto !important;
  border:none !important;
  position:static !important;
  top:auto !important; left:auto !important; right:auto !important;
  transform:none !important;
}