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

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

/*グローバルメニューの下の色*/
.navi-in>ul>li:nth-of-type(3n + 1) {
  border-bottom: ridge 3px #FFE699;
}
.navi-in>ul>li:nth-of-type(3n + 2) {
  border-bottom: ridge 3px #F8CBAD;
}
.navi-in>ul>li:nth-of-type(3n + 3) {
  border-bottom: ridge 3px #C5E0B4
;
}

/*サイドバーの色*/
.sidebar h3 {
  background-image: repeating-linear-gradient(90deg,
    #F8CBAD 0%,#F8CBAD 50%,#FFE699 50%,#FFE699 100%);
  color:black;
}

/*見出しh2の設定*/
.article h2 {
  background-image: repeating-linear-gradient(
    90deg, 
    #F8CBAD 0%, 
    #F8CBAD 50%, 
    #FFE699 50%, 
    #FFE699 100%);
 color: black;
}
.article h2::before {
  background: white;
}
.article h2::after {
  background: #FFE699;
}

/*見出しh3の設定*/
.article h3{
color: black;/*文字色*/
background: #FFE699;/*背景色*/
border-top:none;
border-bottom:none;
border-left: solid 5px #ffd966;/*左線（実線 太さ 色）*/
border-right:none;
padding: 0.5em;/*文字周りの余白*/
}

/*見出しh4の設定*/
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
border-bottom: solid 3px #F8CBAD;
position: relative;
}

/************************************
** ボックス縁
************************************/
.box2-blue{
	margin: 2em auto; /* ボックスの余白 */
	border-radius:4px; /* ボックス角丸 */
	max-width:600px; /* ボックス横幅 */
	border:1px solid #ff4500; /* ボックス線 */
	padding: 3.5em 2em 1.5em; /* ボックス内側余白 */
	position:relative; /* 配置に関するもの(ここを基準に) */
}
.box2-blue .box-title {
	background: #ff4500; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	font-weight: bold; /* タイトル文字の太さ */
	font-size: 20px;/* タイトル文字の大きさ */
	padding: 5px;/* タイトル周りの余白 */
	text-align: center;	/* タイトル中央寄せ */
	border-radius: 4px 4px 0px 0px;	/* タイトル角丸 */
	position:absolute;	/* 配置に関するもの(ここを動かす) */
	top:0;	/*上から(0px)に配置 */
	left:0; /*左から(0px)に配置 */
	width:100%;/*横幅最大幅 */
}
.box2-blue p {
	margin: 0;/* 文字の余白リセット */
	padding: 0; /* 文字の内側余白リセット*/
}

.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #ffaa00;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #ffaa00;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

.box2 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}

.box28 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #0095d9;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #0095d9;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box28 p {
    margin: 0; 
    padding: 0;
}

.box29 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #e60033;
}
.box29 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #e60033;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box29 p {
    margin: 0; 
    padding: 0;
}

.box30 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #3eb370;
}
.box30 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #3eb370;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box30 p {
    margin: 0; 
    padding: 0;
}

.box31 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #ffffff;
}
.box31 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #ffffff;
    color: #333333;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box31 p {
    margin: 0; 
    padding: 0;
}


/************************************
** 比較表共通（https://ponhiro.com/comparison-table/）
************************************/
/* 比較表全体 */
.compare-box {
  display:-webkit-box;/* 配置 */
  display:-ms-flexbox;/* 配置 */
  display:flex;/* 配置 */
  max-width:600px;/* 横幅 */
  margin: 0 auto 2rem;/* 余白 */
  border-radius:4px;/* 角丸 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); /* 影 */
  background: #fef9ed; /* 背景色 */
}
/* 左のボックス、右のボックス */
.compare-box .compare-left-wrap, .compare-box .compare-right-wrap{
  width:50%;/* 横幅半分ずつ */
  overflow:hidden;/* はみ出さないように*/
}
/* 左のタイトル、右のタイトル */
.compare-box .compare-left-head, .compare-box .compare-right-head{
  background: #fdc44f; /* 背景色 */
  text-align: center;/* 中央寄せ */
  color: #FFF; /* 文字色 */
  font-weight: bold;/* 文字太さ */
  padding:0em 1em;/* 余白 */
  font-size:15px;/* 文字大きさ */
  line-height:1.5;/* 行間 */
  height:65px;/* 縦幅 */
  display:table-cell;/* 形式 */
  vertical-align:middle;/* 高さ中央寄せ */
  width:auto;        /* 固定幅を解除 */
  max-width:100%;    /* 親の幅からはみ出さない */
  box-sizing:border-box;
}
/* 左のタイトル */
.compare-box .compare-left-head{
  border-radius:4px 0 0 0;/* 角丸 */
}
/* 右のタイトル */
.compare-box .compare-right-head{
  border-radius:0 4px 0 0;/* 角丸 */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box .compare-left, .compare-box .compare-right{
  padding:1.5em;/* 余白 */
  font-size:15px;/* 文字大きさ */
  line-height:2;/* 行間 */
  text-align: justify;/* 段落両端 */
  text-justify: inter-ideograph;/* 段落両端 */
}
/* 文章 */
.compare-box p {
  padding: 0;/* 余白 */
  margin: 0 0 20px 0;/* 余白 */
}
/*スマホで見たとき*/
@media screen and (max-width: 480px){
  /* 左のタイトル、右のタイトル */
  .compare-box .compare-left-head, .compare-box .compare-right-head{
    font-size:12px;/* 文字大きさ */
    height:50px;/* 高さ */
  }
  /* 左のコンテンツ、右のコンテンツ */
  .compare-box .compare-left, .compare-box .compare-right {
      padding: 1.2em;/* 余白 */
      font-size: 12px;/* 文字大きさ */
   }
}
/************************************
** 比較表 箇条書き(記号)
************************************/
/* 箇条書き(記号) */
.compare-box .list{
   list-style: none !important;/* 行頭記号リセット */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き 行 */
.compare-box .list li { 
   border-bottom:1px dashed #cdcdcd;/* 線(太さ 種類　色) */
   position: relative;/* 配置 */
   margin:0.5em 0 !important;/* 余白 */
   max-width:500px;/* 横幅 */
   padding: 0 0 0.7em 1.4em !important;/* 余白 */
   line-height:1.8;/* 行間 */
}
/* 箇条書き 行最後 */
.compare-box .list li:last-child{ 
   border:none;
}
/* 箇条書き 行頭記号 */
.compare-box .list li:before {
   background-color:  #ffa952; /* 色 */
   position: absolute;/* 配置 */
   content: '';/* 空文字 */
   top: 10px;/* 上からの距離 */
   left: 7px;/* 下からの距離 */
   width: 7px;/* 横幅 */
   height: 7px;/* 縦幅 */
   border-radius: 4px;/* 角丸 */
}
/*スマホで見たとき*/
@media screen and (max-width: 480px){
  /* 箇条書き 行頭記号 */
  .compare-box .list li:before {
    top: 9px;/* 上からの距離 */
    left: 3px;/* 下からの距離 */
    width:5px;/* 横幅 */
    height:5px;/* 縦幅 */
  }
}
/************************************
** 比較表　箇条書き(番号)
************************************/
/* 箇条書き(番号) */
.compare-box .list-number{
   counter-reset:number; /* 番号リセット */
   list-style: none !important;/* 行頭番号削除) */
   padding:0 !important;/* 余白リセット */
   margin:0 !important;/* 余白リセット */
   border:none !important;/* 線リセット */
}
/* 箇条書き(番号) 行 */
.compare-box .list-number li {
   position: relative;/* 配置 */
   margin:0.5em 0 !important;/* 余白 */
   max-width:500px; /* 横幅 */
   padding: 0 0 0.5em 1.8em !important;/* 余白 */
   line-height:1.8;/* 行間 */
  border-bottom:1px dashed #cdcdcd;/* 線(太さ 種類　色) */
}
/* 箇条書き 行最後 */
.compare-box .list-number li:last-child{ 
   border:none;
}
/* 箇条書き(番号) 行頭番号 */
.compare-box .list-number li:before {
   counter-increment: number;/* 番号 */
   content: counter(number);/* 番号 */
   background-color: #fdc44f; /* 背景色 */
   color: #fff; /* 番号色 */
   position: absolute;/* 配置 */
   font-weight:bold;/* 文字太さ */
   font-size: 12px;/* 文字大きさ */
   border-radius: 50%;/* 角丸 */
   left: 0;/* 左からの距離 */
   top:5px;/* 上からの距離 */
   width: 18px;/* 横幅 */
   height: 18px;/* 縦幅 */
   line-height: 18px;/* 行間 */
   text-align:center;/* 中央寄せ */
}
/* 箇条書き 行頭記号リセット */
.compare-box .list-number li:after{
  content:'';
}
/*スマホで見た時*/
@media screen and (max-width: 480px){
  /* 箇条書き(番号) 行 */
  .compare-box .list-number li{
     padding: 0 0 0.5em 1.8em !important;/* 余白 */
  }
  /* 箇条書き(番号) 行頭番号 */
  .compare-box .list-number li:before {
    font-size:10px;/* 文字大きさ */
    width: 16px;/* 横幅 */
    height: 16px;/* 縦幅 */
    line-height: 16px;/* 行間 */
    top:2px;/* 上からの距離 */
  }
}
/************************************
** 比較表セパレート
************************************/
/* 全体左 */
.compare-box-separate .compare-left{
background:#f0f9fc !important;
height:100%;
}
/* 全体右 */
.compare-box-separate .compare-right{
background:#fff6f2 !important;
height:100%;
}
/* タイトル左 */
.compare-box-separate .compare-left-head{
background:#0095d9 !important;
}
/* タイトル右 */
.compare-box-separate .compare-right-head{
background:#e60033 !important;
}
/* 箇条書き(記号) 行頭番号 左 */
.compare-box-separate .compare-left .list li:before {
background:#0095d9 !important;
}
/* 箇条書き(番号) 行頭番号 左 */
.compare-box-separate .list-number li:before {
background:#0095d9 !important;
}
/* 箇条書き(記号) 行頭番号 右 */
.compare-box-separate .compare-right .list li:before {
background:#e60033 !important;
}
/* 箇条書き(番号) 行頭番号 右 */
.compare-box-separate .compare-right .list-number li:before {
background:#e60033 !important;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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


/*---------------------------------
サイドバー　親カテゴリのカスタマイズ　https://yuzuyu3.com/cocoon-cate/   https://odariko.com/font-awesome5csscocoon/
--------------------------------*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}

.widget ul li a:before{
    font-family: "Font Awesome 5 Free";
    content: '\f07c'; /* アイコンのコードを記載 */
	color: #ffaa00; /* アイコンの色 */
    font-weight: 900;
    margin:0 5px 0 0;
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none;
}

/*---------------------------------
サイドバー　子カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li ul li a::before{
    font-family: "Font Awesome 5 Free";
    content: '\f07b'; /* アイコンのコードを記載 */
	color: #ffd700; /* アイコンの色 */
    font-weight: 900;
    margin:0 5px 0 0;
}


/*---------------------------------
おしゃれなリスト(箇条書き)青人形　https://ponhiro.com/cocoon-list-design/  https://odariko.com/font-awesome5csscocoon/
--------------------------------*/
.list-5{
   list-style: none;
   padding:0;
   margin:0;
}
.list-5 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 25px;
}
.list-5 li:before {
   font-family: "Font Awesome 5 Free";
   content: "\f007"; /*アイコン*/
   color:  #0095d9; /* 色 */
   font-weight: 900;
   position: absolute;
   left:0;
}
/*---------------------------------
おしゃれなリスト(箇条書き)赤人形　https://ponhiro.com/cocoon-list-design/  https://odariko.com/font-awesome5csscocoon/
--------------------------------*/
.list-3{
   list-style: none;
   padding:0;
   margin:0;
}
.list-3 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 25px;
}
.list-3 li:before {
   font-family: "Font Awesome 5 Free";
   content: "\f007"; /*アイコン*/
   color:  #e60033; /* 色 */
   font-weight: 900;
   position: absolute;
   left:0;
}


/*---------------------------------
おしゃれなリスト(箇条書き)の枠 1が赤、5が青用　　https://ponhiro.com/cocoon-list-design/
--------------------------------*/
.list-box-1{

   border-radius: 4px;
   max-width: 600px; /* 横幅 */
   padding: 2em;
   margin:0 auto;
}

.list-box-5{

   border-radius: 4px;
   max-width: 600px; /* 横幅 */
   padding: 2em;
   margin:0 auto;
}

/*---------------------------------
11. スマートなデザインに　　https://saruwakakun.com/html-css/reference/box
--------------------------------*/
.box11{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box11 p {
    margin: 0; 
    padding: 0;
}

/*表の左右スクロールここから https://tabinomad.com/blog-how-to/table-smartphone-scroll/#%E3%83%9A%E3%83%BC%E3%82%B8%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF1 */
table{
width:100%;
}
.scroll{
overflow: auto;
white-space:nowrap;
}
.scroll::-webkit-scrollbar{
height: 15px;
}
.scroll::-webkit-scrollbar-track{
background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
background: #bbb;
}
/*表の左右スクロールここまで*/

/*アプリーチ iPhone,Androidアプリを紹介するブログパーツ*/
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  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;
}
/* https://mama-hack.com/app-reach/ */

/*---------------------------------
【Cocoon】全40通り！おしゃれなリスト(箇条書き)を作る！コピペOK！　https://ponhiro.com/cocoon-list-design/ （2022年6月24日追加）
--------------------------------*/

.list-6{
   counter-reset:number; 
   list-style-type: none; 
   padding:0;
   margin:0;
}
.list-6 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 1.8em;
}
.list-6 li:before {
   counter-increment: number;
   content: counter(number);
   background-color: #3eb370; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 14px;
   border-radius: 50%;
   left: 0;
   top:0.5em;
   width: 22px;
   height: 22px;
   line-height: 22px;
   text-align: center;
}

.list-7{
    list-style: none;
    padding:0;
    margin:0;
}
.list-7 li { 
    position: relative;
    margin:0.5em 0 !important;
    padding-left: 25px;
}
.list-7 li:before {
   background-color:  #333333; /* 点の色 */
   position: absolute;
   content: '';
   top:0.9em;
   left: 0.5em;
   width: 7px;
   height: 7px;
   border-radius: 4px;
}

/*---------------------------------
【Cocoon】コピペで簡単！タイトル入力可のおしゃれなボックスを作る！　https://ponhiro.com/cocoon-box-design/　2022年8月6日
--------------------------------*/

.box3-blue {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	background: #f000; /* 背景色 */
	max-width:max; /* ボックスの横幅 */
	margin: 1em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 1em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #F8CBAD;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 3px;	/* ボックスの角丸 */
}
.box3-blue .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #333333; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box3-blue p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

/*---------------------------------
【Cocoon】全40通り！おしゃれなリスト(箇条書き)を作る！コピペOK！　https://ponhiro.com/cocoon-list-design/ （2022年8月4日追加）　数字リスト（青）
--------------------------------*/
.list-8{
   counter-reset:number; 
   list-style-type: none; 
   padding:0;
   margin:0;
}
.list-8 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 1.8em;
}
.list-8 li:before {
   counter-increment: number;
   content: counter(number);
   background-color: #0095d9; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 14px;
   border-radius: 50%;
   left: 0;
   top:0.5em;
   width: 22px;
   height: 22px;
   line-height: 22px;
   text-align: center;
}

/*---------------------------------
【Cocoon】全40通り！おしゃれなリスト(箇条書き)を作る！コピペOK！　https://ponhiro.com/cocoon-list-design/ （2022年8月4日追加）　数字リスト（赤）
--------------------------------*/
.list-9{
   counter-reset:number; 
   list-style-type: none; 
   padding:0;
   margin:0;
}
.list-9 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 1.8em;
}
.list-9 li:before {
   counter-increment: number;
   content: counter(number);
   background-color: #e60033; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 14px;
   border-radius: 50%;
   left: 0;
   top:0.5em;
   width: 22px;
   height: 22px;
   line-height: 22px;
   text-align: center;
}


/*---------------------------------
【Cocoon】全40通り！おしゃれなリスト(箇条書き)を作る！コピペOK！　https://ponhiro.com/cocoon-list-design/ （2022年8月12日追加）　数字リスト（黄）
--------------------------------*/
.list-10{
   counter-reset:number; 
   list-style-type: none; 
   padding:0;
   margin:0;
}
.list-10 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 1.8em;
}
.list-10 li:before {
   counter-increment: number;
   content: counter(number);
   background-color: #ffaa00; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 14px;
   border-radius: 50%;
   left: 0;
   top:0.5em;
   width: 22px;
   height: 22px;
   line-height: 22px;
   text-align: center;
}


/************************************
** 拡張スタイル「タブボックス」のデザインをスタイリッシュにする
************************************/

/*枠組み*/
.blank-box.bb-tab {
	position: relative; /*要素の配置*/
	padding: 2.2em 1.2em 1em; /*内側の余白*/
	border-width: 1px; /*線の太さ*/
	border-radius: 0; /*丸み*/
	font-size: .9375em; /*文字の大きさ*/
}

/*ラベル*/
.blank-box.bb-tab .bb-label {
	position: absolute; /*要素の配置*/
	top: 0; /*上からの距離*/
	left: 0; /*左からの距離*/
	border-radius: 0; /*丸み*/
	font-style: italic; /*文字のスタイル*/
	font-size: .833333em; /*文字の大きさ*/
}

/*ブロックエディター用*/
.blank-box.bb-tab::before {
	position: absolute; /*要素の配置*/
	top: 0; /*上からの距離*/
	left: 0; /*左からの距離*/
	border-radius: 0; /*丸み*/
	font-style: italic; /*文字のスタイル*/
	font-size: .833333em; /*文字の大きさ*/
}

/************************************
****　リスト　https://yujiblog.org/cocoon-list#jump1
************************************/
.article ul:not(li ul,.toc-list,dd ul,.widget ul){
background: #fff7cc;/*背景色*/
line-height:2;
border-radius: 4px;
border:1.5px dashed;
border-color:#F8CBAD; /*枠の色*/
padding: 1.5em;
padding-left:3em;
}
.article ul li:not(.toc-list li,.toc-list ul li,.faq li){
margin: 0em;
}
@media (max-width:600px){
.article ul:not(li ul,.toc-list,dd ul,.widget ul){
padding-left:2.5em;
}
}
.article li ul{
padding-left:1em;
}


/************************************
****　2023年4月9日　https://hebochans.com/twitter-side-by-side/
************************************/
/* TwitterをPCでは横並びにする */
.flex {
	display: flex; /* これで横並びになる */
}
.twitter-tweet {
	padding: 5px; /* 1つのツイートの周りに5pxの余白をつける */
	margin: 10px auto; /* ツイートを中央寄せにする */
}

/* 画面サイズ960px以下ではTwitterを縦並びに変える */
@media (max-width: 960px) {
.flex {
	display: block; /* 横並びを解除 */
}
.twitter-tweet {
	padding: 0; /* 縦並びでは余白なし */
}
}


/************************************
** フロントページのページタイトル・SNSシェアボタン・投稿日時を削除するためのコード　2023年8月5日　https://surfworkbalance.com/cocoon/code/
************************************/

/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}

.page-id-14944 .entry-title,
.page-id-14944 .sns-share,
.page-id-14944 .sns-follow,
.page-id-14944 .date-tags,
.page-id-14944 .author-info{
  display: none;
}

.page-id-14975 .entry-title,
.page-id-14975 .sns-share,
.page-id-14975 .sns-follow,
.page-id-14975 .date-tags,
.page-id-14975 .author-info{
  display: none;
}

.page-id-14988 .entry-title,
.page-id-14988 .sns-share,
.page-id-14988 .sns-follow,
.page-id-14988 .date-tags,
.page-id-14988 .author-info{
  display: none;
}

.page-id-14993 .entry-title,
.page-id-14993 .sns-share,
.page-id-14993 .sns-follow,
.page-id-14993 .date-tags,
.page-id-14993 .author-info{
  display: none;
}

.page-id-15014 .entry-title,
.page-id-15014 .sns-share,
.page-id-15014 .sns-follow,
.page-id-15014 .date-tags,
.page-id-15014 .author-info{
  display: none;
}

.page-id-15022 .entry-title,
.page-id-15022 .sns-share,
.page-id-15022 .sns-follow,
.page-id-15022 .date-tags,
.page-id-15022 .author-info{
  display: none;
}

/************************************
** 記事内目次 https://pote-chil.com/blog/cocoon-toc-customize  20230814
************************************/
.toc {
  display: block !important;
  width: 95%;
  padding: 20px 32px 7px !important;
  margin-bottom: 5% !important;
  background: #f7f7f7 !important;
  border: 0 !important;
  border-top: 5px solid !important;
  border-top-color: #f8c678 !important; /* 任意の色に */
  border-radius: 10px;
  box-shadow: 0 2px 2px rgb(0 0 0 / 20%) !important;
}
@media screen and (min-width: 600px) {
  .toc {
    width: 90%;
    padding: 20px 35px 15px !important;
  }
}

.toc-title {
  margin: 0 20px 20px -10px !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  color: #f8c678 !important; /* 任意の色に */
  background-color: initial;
}

.toc-title::before {
  padding: 14px;
  font-family: "Font Awesome 5 Free";
  font-size: 20px;
  font-weight: 900 !important;
  color: #fff;
  content: "\f03a";
  background-color: #f8c678; /* 任意の色に */
  border-radius: 50%;
}

.toc a {
  display: block;
  padding-top: 0 !important; /* 下の点線との間 */
  padding-bottom: 0.2em; /* 下の点線との間 */
  color: #FFE699;
  border-bottom: dashed 1px silver;
}

.toc ul li {
  position: relative;
  padding: 0 0 0.4em 1.4em;
  font-weight: 700;
  line-height: 1.5;
}

.toc ul li::before {
  position: absolute !important;
  left: -0.3em !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  color: #f8c678; /* 任意の色に */
  content: "\f138";
}

.toc li li {
  padding-top: 0.5em;
  margin-top: 0 !important;
  font-weight: 400;
}

.toc_list li {
  margin-top: -5% !important;
}
@media screen and (min-width: 834px) {
  .toc_list li {
    /* PCでは目次のh2同士の間隔は抑えめに */
    margin-top: -1.8% !important;
  }
}

/************************************
** サイドバー追尾目次　https://ponhiro.com/cocoon-sidebar-toc/　20240813
************************************/
.sidebar-scroll{
  top:15px !important;
}
.sidebar h3{
  font-size:0.9em;
  padding: 7px 12px;
}
.sidebar .widget_toc{
   box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.sidebar .toc-widget-box{
  margin-top: -0.9em;
}
.sidebar .toc{
  padding: 0;
  width:100%;
}
.sidebar .toc-content {
  overflow-y: scroll;
  max-height: 580px;
  background: #fff;
  padding: 0.5em 1.5em;
}
.sidebar .toc li{
  line-height:1.6;
  margin-bottom: 1em;
  font-size:0.85rem;
  color:#3cb8f1;
}
.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-type:none;
  font-weight:500;
}
@media screen and (max-width: 768px){
  .sidebar-menu-button .widget_toc{
    display:none;
  }
}
	
/************************************
** YouTubeの幅を100％にするCSS https://hebochans.com/iframe-responsive/
************************************/
.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* アスペクト比16:9の場合 */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 2rem; /* YouTubeの下に余白をつける */
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/************************************
20250907gpt
************************************/
/* ◆広告の最低高さを予約してCLSを予防（スマホ基準）*/
ins.adsbygoogle { 
  display:block !important;
  min-height:300px;         /* 300x250想定。必要に応じて調整 */
  width:100%;
}

/* 一覧ページのトップ広告を残す場合は個別にもう少し余裕を確保 */
.ad-index-top ins.adsbygoogle{ min-height:320px; }

/* 画面が広いときの微調整（横長表示が増えるので少し低めに）*/
@media (min-width: 768px){
  ins.adsbygoogle{ min-height:250px; }
}

/* 目次・通知バーなど“開閉で高さが変わる要素”は高さを固定しない設計に（念のため）*/
.toc, .notice-bar { will-change: opacity, transform; } /* レイアウトを変えないアニメにする意図 */


/* ロゴの最終サイズに合わせて比率を固定（430×225 を前提） */
.logo-header img.site-logo-image{
  width: 430px; height: auto;
  aspect-ratio: 430 / 225;
  display: block;
}

/* ヘッダー全体の最小高さを予約（必要に応じて微調整）202509gpt */
#header-container .logo-header{ min-height: 260px; }

/* もしメニューがロード時にアニメで飛び込む場合の抑止 202509gpt */
.menu-button-in{ transform:none !important; opacity:1 !important; transition:none !important; }

/* スマホではエントリーカードを1カラムにする（デフォルトカード用） */
@media (max-width: 768px){
  .entry-cards {
    display: block !important;   /* gridではなくblockで1列に */
  }

  .entry-card {
    float: none !important;      /* 横並びを解除 */
    width: 100% !important;      /* 1カラムに強制 */
    max-width: 100% !important;
    margin: 0 0 20px 0 !important; /* 下に余白をつける */
  }
}