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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/************************************
** 黄、赤、青のマーカーを細く 
************************************/
.marker-under {
  background: linear-gradient(transparent 80%, #ff9 80%);
}
.marker-under-red {
  background: linear-gradient(transparent 80%, #ffd0d1 80%);
}
.marker-under-blue {
  background: linear-gradient(transparent 80%, #a8dafb 80%);
}
/************************************
** グローバルメニュー
************************************/
/*ホバー時にメニューにアンダーラインを出す*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 0;/*線の位置*/
height: 2px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #0000ff;/*線の色*/
transform: scale(0,1);/*ホバー前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}
/************************************
** Contact Form 7カスタマイズ
************************************/
/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px){
.inquiry th,.inquiry td {
 display:block!important;
 width:100%!important;
 border-top:none!important;
 -webkit-box-sizing:border-box!important;
 -moz-box-sizing:border-box!important;
 box-sizing:border-box!important;
}
.inquiry tr:first-child th{
 border-top:1px solid #d7d7d7!important;
}
/* 必須・任意のサイズ調整 */	
.inquiry .haveto,.inquiry .any {	
font-size:10px;
}}
/*見出し欄*/
.inquiry th{
 text-align:left;
 font-size:14px;
 color:#444;
 padding-right:5px;
 width:30%;
 background:#f7f7f7;
 border:solid 1px #d7d7d7;
}
/*通常欄*/
.inquiry td{
 font-size:13px;
 border:solid 1px #d7d7d7;	
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,.entry-content table{
 border:solid 1px #d7d7d7;	
}
/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}
/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:1em 0;
 margin-top:30px;
 width:100%;
 background:#FF533D;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:2px;
 border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#fff;
 color:#FF533D;
}

/*reCAPTCHAマークを非表示*/
.grecaptcha-badge { visibility: hidden; }
/* メインカラムの角を丸くする */
#main{
  border-radius: 20px;　/* 数値を変えたら丸みが変わる */
}

/* サイドバーの角を丸くする */
#sidebar{
	border-radius: 20px; /* 数値を変えたら丸みが変わる */
}
/************************************
** ブログカード設定
************************************/
/*線色*/
.blogcard{
	border: 0.5px solid dimgray !important
}
/*マウスオーバー後*/
 .blogcard:hover{
	background: transparent;
	opacity: 0.5;
}

/************************************
/* === 広告PR表示法対応 === */
/* Cocoon設定メインカラム左上のPR表記 */
.pr-label-s {
  display: inline-block;
  position: absolute;
  top: -6px; /* メインカラム上端からの位置調整 */
  left: 27px; /* メインカラム左端からの位置調整 */
  margin: 0;
  padding: 6px 0 5px 0;
  width: 60px;
  text-align: center;
  color: #fff; /* 文字の色 */
  font-size: 12px;
  background: #959595; /* ラベルの色 */
  border-radius: 3px 0 0 0;
  border: none;
  }
.pr-label-s:before {
  position: absolute;
  content: '';
  top: 0;
  right: -6px;
  border: none;
  border-bottom: solid 6px #333;
  border-right: solid 6px transparent;
}
/* === 広告PR表示法対応 === */
/* Cocoon設定本文上のPR表記 */
.pr-label-l {
    border-top: 1px dotted #333; /* 上の点線 */
    border-bottom: 1px dotted #333; /* テキスト下の点線 */
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 13px; /* 文字サイズ */
    color: #c71585; /* 文字の色 #333*/
    text-align: left; /* テキスト中央揃え center*/
    background: #fff;
    padding: 3px 0;
    margin-bottom: 2em;
}
/************************************
** SNSフォローボタン設定
************************************/
.sns-follow-buttons a {
  background: none !important;
  border-radius: 50%;
  border: gray 1px solid;
  color: gray;
  width: 50px !important;
  height: 50px;
  margin: 0 10px;
  font-size: 35px;
}
/************************************
/*モバイルメニュー
************************************/
.menu-drawer a {
font-size: 0.9em;
line-height: 1.6em;
border-bottom: solid 1px #e6e6e6;
}
.menu-drawer a:hover {
background-color:#ffc0cb;　/*マウスオーバー時の背景色*/
}
.sub-menu li {                                      
margin-left:-14px;
font-size: 0.9em;
color: #e6e6e6;
}
/************************************
/* 目次の背景色を変更する 
************************************/
.toc {
  background-color: #fbfaf9;  /* 目次の背景色を変更する f6f7f7 ffffff  FFFACD*/
  border-color: #5F9EA0;  /* 周囲のボーダーの色を変える 5F9EA0 a8bcc8*/
}
/* 目次の背景色を変更する */
.toc-title{
  background-color: #6495ED;  /* 背景色を変更する 5F9EA0*/
  font-size: 1.2em;  /* 文字の大きさを変える */
  padding: 0.3em;  /* 文字の周囲の余白を変える */
  font-weight: bold;  /* 文字を太字にする */
  color: #ffffff;  /* 文字の色を変える */
}
/* 目次のタイトル部分にアイコンを追加する */
.toc-title:before {
  font-family: 'Font Awesome 5 Free';  /* Font Awesome 5を使用するために指定 */
  content : "\f03a";  /* Font Awesome 5のアイコン番号 */
  font-size:20px;  /* アイコンの大きさ */
  margin-right:10px;  /* アイコン右の余白 */
  color:#a8bcc8;  /* アイコンの色 */
  background-color:#ffffff;  /* アイコンの背景の色 */
  border-radius: 50%;  /* アイコンの背景を丸くする */
  padding:8px;  /* アイコン背景の余白 */
}
/* 目次の文字の色を変える */
.toc a{
  color:#5C676D;  /* 文字の色 */
}
/* 目次のH2見出しのみ太字にする */
.toc-content ol li{
  color: #8195a2;  /* 文字の色 */
  margin:0.5em;  /* 文字の余白 */
}
.toc-list > li{
  font-weight: bold;  /* h2のみ太字にする */
}
.toc-list > li li{
  font-weight: normal;  /* h2以外を標準の太さにする */
}
/************************************
/* タブボックスを変更する 
************************************/
/*見出しボックスのカスタマイズ*/
.caption-box {
  position: relative;  /*要素を相対配置にする*/
  border: solid 1px;  /*線の種類、太さ*/
  border-radius: 0px;  /*角の丸みをなくす*/
  top: 2px;  /*位置の調整*/
}
/*タブ見出しボックスのカスタマイズ*/
.tab-caption-box-label{ 
  border-radius: 5px;  /*上部の角の丸みをなくす*/
}
.tab-caption-box-content{
  position: relative;  /*要素を相対配置にする*/
  border: solid 1px;  /*線の種類、太さ*/
  border-radius: 0px;  /*下部の角の丸みをなくす*/
  top: 2px;  /*位置の調整*/
}
/*ラベルボックスのカスタマイズ*/
.label-box-content{
  border: 1px solid #D9C9C9;  /*線の種類、太さ、色*/
  border-radius: 0px;  /*角の丸みをなくす*/
}
/************************************
/* ボタンを変更する 
************************************/
/* --ボタンを浮かして影をつける--*/
 .btn{
 box-shadow: 0 7px 0px #808080;
 }
/*--ボタンが重なったときに沈む--*/
 .btn:hover{
 box-shadow: 0 1px 0 #808080 ;
 transform: translateY(6px);
 -webkit-transform: translateY(6px);
 }
/*---カーソルを外したときに元に戻す---*/
 .btn{
 transition:.5s ease-in-out;
 }

/************************************
** ●次のページボタンカスタマイズ
************************************/
.pagination-next,
.pager-prev-next { /*次のページ*/
  margin-top: 38px; /*上マージン*/
  border: solid 2px #fe619a; /*枠線*/
  border-radius: 6px; /*角丸コーナー*/
  background-color: #fff;
  box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}
.pagination-next-link { /*次のページ*/
  font-size: 20px; /*フォントサイズ*/
  letter-spacing: 10px; /*文字間隔*/
  font-weight: bold; /*文字強調*/
  color: #f32469; /*フォントカラー*/
  padding: 6px; /*余白*/
  transition: all 0.6s ease; /*アニメーション*/
  border: none;
}
.pagination-next-link:hover {
  color: #fff; /*フォントカラー*/
  background-color: #fe619a; /*背景色*/
  transition: all 0.6s ease; /*アニメーション*/
}

/************************************
** ●ページ送りボタン／戻りボタンのカスタマイズ
************************************/
.page-numbers { /*現ページ以外のページ番号*/
  background-color: #fff; /*背景色*/
  border: solid 2px #24aef3; /*枠線 #24aef3 #fe619a*/
  border-radius: 24px; /*角丸コーナー*/
  font-family: sans-serif; /*フォントゴシック指定*/
  font-size: 16px; /*フォントサイズ*/
  font-style: oblique; /*斜体フォント*/
  color: #24aef3; /*文字色 #24aef3 #fe619a */
  font-weight: bold; /*文字強調*/
  box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
  transition: all 0.6s ease; /*アニメーション*/
  font-family: Lato,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,sans-serif;
}
  @media screen and (max-width: 1030px) { /*スマホ表示設定*/
  .page-numbers {
    font-size: 18px; /*フォントサイズ*/
    line-height: 44px; /*高さ調整*/
  }
}
.pagination a.page-numbers:hover { /*現ページ以外のページ番号のホバー時*/
  background-color: #24aef3!important; /*マウスオーバー時の背景色 #24aef3 #fe619a*/
  color: #fff!important; /*マウスオーバー時の文字色*/
  transition: all 0.6s ease; /*アニメーション*/
}
.pagination .current { /*現ページ番号*/
  background-color: #24aef3; /*背景色 ffddee*/
  border: solid 2px #24aef3; /*枠線 fe619a #24aef3 #fe619a*/
  border-radius: 24px; /*角丸コーナー*/
  font-family: sans-serif; /*フォントゴシック指定*/
  font-size: 16px; /*フォントサイズ*/
  font-style: oblique; /*斜体フォント*/
  color: #fff; /*文字色*/
  font-weight: bold; /*文字強調*/
  box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
  font-family: Lato,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Arial,sans-serif;
}
.page-numbers.dots { /*ページ番号ドット*/
  background-color: transparent; /*背景*/
  border: none; /*枠線*/
  color: #24aef3; /*文字色 #f32469*/
  font-size: 28px; /*フォントサイズ*/
  font-weight: 900; /*文字強調*/
  font-style: normal; /*通常フォント*/
  box-shadow: none; /*シャドー（影）無し*/
  opacity: 1.0; /*不透明度無し*/
}
  @media screen and (max-width: 1030px) { /*スマホ表示設定*/
  .page-numbers.dots {
    line-height: 36px; /*高さ調整*/
  }
}

/************************************
** 囲みボタンのカスタマイズ
************************************/
/* 囲みボタン全体の基本設計 */
.kakomi_ghos_button_ver1 {
    /* display: inline-block;          /* ボタンとして正しく表示する設定 */
    padding: 15px 30px;             /* 内側の余白（上下:15px 左右:30px） */
    margin: 20px 0;                 /* 外側の余白（上下:20px 左右:0） */
    font-size: 18px;                /* 文字の大きさ */
    font-weight: bold;              /* 文字の太さ */
    text-align: center;             /* 文字の配置 */
    text-decoration: none;          /* 下線を消す設定 */
    
    /* デザイン装飾 */
    /* color: #333333;                 /* 【文字色】濃いグレー */
    background-color: #ffffff;      /* 【背景色】白 */
    border: 3px solid #ff4500;      /* 【枠線】太さ:3px、種類:実線、色:オレンジ */
    border-radius: 50px;            /* 【角丸】数字が大きいほど丸くなる */
    
    /* アニメーション設定 */
    transition: all 0.3s ease;      /* マウスを乗せた時の変化スピード */
}

/* マウスを乗せた時の変化（クリック率を高める） */
.kakomi_ghos_button_ver1:hover {
    color: #ffffff;                 /* 【文字色】白に反転 */
    background-color: #ff4500;      /* 【背景色】オレンジに反転 */
    border: 3px solid #ff4500;      /* 枠線はそのまま */
    transform: translateY(-2px);    /* マウスを乗せると2px上に浮き上がる */
    box-shadow: 0 5px 10px rgba(0,0,0,0.2); /* 【影】少し影をつけて立体的に */
}

/* 高級感のある「ネイビー＆ゴールド」ボタン */
.kakomi_ghos_button_ver2 {
    display: inline-block;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: bold;
    color: #d4af37; /* ゴールド文字 */
    background-color: #1a2a6c; /* 深いネイビー */
    border: 2px solid #d4af37;
    border-radius: 5px; /* 角丸を抑えてシャープに */
    text-decoration: none;
    transition: all 0.3s;
}
.kakomi_ghos_button_ver2:hover {
    background-color: #d4af37;
    color: #1a2a6c;
}
/* インパクト重視の「フラット＆影付き」ボタン */
.kakomi_ghos_button_ver3 {
    display: inline-block;
    padding: 18px 50px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background-color: #27ae60; /* 明るいグリーン */
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 0 #1e8449; /* 影をあえて濃くして立体感を出す */
    text-decoration: none;
    transition: all 0.1s;
}
.kakomi_ghos_button_ver3:hover {
    margin-top: 4px;
    box-shadow: none; /* マウスを乗せると影が消えて「押した感じ」が出る */
}

/* 優しくクリックさせる「パステル系」ボタン */
.kakomi_ghos_button_ver4 {
    /* display: inline-block; /* */
    /* padding: 12px 30px;/* */
    /* font-size: 16px;/* */
    /* olor: #555;/* */
    /* background-color: #fce4ec !important; /* 薄いピンク */
    /* border: 2px solid #f8bbd0;/* */
    /* border-radius: 30px;/* */
     text-decoration: none;/* */
     transition: all 0.3s;/* */
}
.kakomi_ghos_button_ver4:hover {
    /* background-color: #fce4ec !important;/*f8bbd0 e07b00 040f1b*/
	/* border-color: #fce4ec !important;/*f8bbd0 e07b00 040f1b*/
    transform: scale(1.05) !important; /* ほんの少しだけ大きくする */
	/* transform: translateY(2px); /* 下に2px移動させる */
    box-shadow: none;           /* 影を消すと沈んだように見える */
}
/************************************
** テーブルのカスタマイズ
************************************/
/* Ver1 */
.entry-content thead {
  background-color: #333333;!important; /* ここで色を変えます 6594e0*/
  color: #6594e0;!important;           /* 文字色を白にします 6594e0*/
}

/************************************
/* 「かんたんリンク」カスタマイズ */
/************************************
/* 外枠：ダブルボーダー＆柔らかい影 */
.easyLink-box {
  /* background: #95ccff !important;*/
  /* border: dashed 2px white !important; */
  /* border: double #ccc !important; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* 商品リンクタイトル色 */
.easyLink-info-name a {
  color: #3296d2 !important;/* 文字色 */
  /* text-decoration:none !important; /*アンダーライン消す*/
}

/* ボタン共通：白背景＆軽い影 */
a[class^="easyLink-info-btn-"] {
  background: #fff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
/* ボタン別色設定 */
.easyLink-info-btn-amazon {
  border: 1.5px solid #f6a306 !important;
  color: #f6a306 !important;
}
.easyLink-info-btn-rakuten {
  border: 1.5px solid #cf4944 !important;
  color: #cf4944 !important;
}
.easyLink-info-btn-yahoo {
  border: 1.5px solid #51a7e8 !important;
  color: #51a7e8 !important;
}
/* ホバー時：文字白＆背景ブランド色 */
a:hover[class^="easyLink-info-btn-"] {
  color: #fff !important;
  opacity: 1 !important;
}
a:hover.easyLink-info-btn-amazon {
  background: #f6a306 !important;
}
a:hover.easyLink-info-btn-rakuten {
  background: #cf4944 !important;
}
a:hover.easyLink-info-btn-yahoo {
  background: #51a7e8 !important;
}