@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){
  /*必要ならばここにコードを書く*/
}

/**************************
 新着記事の横並び
***************************/
.new-entry-cards.large-thumb {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.new-entry-cards.large-thumb a{
 margin: 0 10px 3px 0;
 padding: 0;
 width: 32%;
 flex-grow: 1;
}
/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
 width: 100%;
}
}

/*パララックス全幅表示*/
.content .wp-block-cover,
.content .wp-block-cover-image {
 margin: 0 calc((100% - 100vw)/2) 1.5em;
 width: auto;
 margin-top:-30px;
 margin-bottom:10px;
}

/************************************
** カテゴリーのカスタマイズ
************************************/
.widget_categories ul li a{ /*親カテゴリー設定*/
 text-decoration: none; /*テキスト装飾無し*/
 color: #333; /*文字色*/
 font-size: 15px; /*フォントサイズ*/
 display: block; /*ブロックボックス生成*/
 padding: 4px 4px 2px 10px; /*上下左右空間*/
 border-bottom: 1px dashed #778893; /*親カテゴリー下側にボーダーライン*/
}
.widget_categories ul li a::before{ /*親カテゴリーのアイコン設定*/
 font-family: "Font Awesome 5 Free";
 content: "\f07c";
 color: #778893;
 padding-right: 6px; /*アイコン右側空間*/
}
.widget_categories > ul > li > a:first-child{ 
 border-top: none; /*最初の親カテゴリー上側のボーダー削除*/
}

.widget_categories ul li ul li a{ /*子カテゴリー設定*/
 text-decoration: none; /*テキスト装飾無し*/
 color: #333; /*文字色*/
 display: block; /*ブロックボックス生成*/
 padding: 4px 4px 2px 10px; /*上下左右空間*/
 border-bottom: 1px dashed #778893; /*子カテゴリー下側にボーダーライン*/
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
 font-family: "Font Awesome 5 Free";
 content: "\f115";
 color: #778893;
 padding: 0px 6px 0px 2px; /*アイコン右側空間*/
}

.widget_categories ul li a .post-count{ /*記事数設定*/
 display: inline-block; /*インラインボックス生成*/
 float: right; /*右寄せ配置*/
 margin-left: 8px; /*右側空間*/
 color: #000000; /*文字色*/
 background: #dcdcdc; /*背景色*/
 font-weight: bold; /*強調フォント*/
 font-style: oblique; /*斜体フォント*/
 font-size: 12px; /*フォントサイズ*/
 white-space: nowrap; /*1つの空白にまとめて表示。折り返し無し。*/
 line-height: 1.1; /*行の高さ*/
 padding: 3px 10px; /*上下左右空白*/
 transform: translate(0px,3px);
 text-decoration: none; /*テキスト装飾無し*/
 border-radius: 2px; /*角丸コーナー*/
}

.widget_categories ul li a:hover{ /*マウスホバー時設定*/
 background: #E6EDF2; /*背景色*/
 color: #333; /*文字色*/
 transition: all 0.8s ease; /*アニメーション*/
}
.widget_categories ul li a:hover .post-count{ /*記事数のマウスホバー時設定*/
 background: #778893; /*背景色*/
 color: #fff; /*文字色*/
 transition: all 0.8s ease; /*アニメーション*/
}

/************************************
** ウィジェットの見出しのカスタマイズ
************************************/
#main .main-widget-label {
 color:#333;/*文字色（黒）*/
 font-size:24px;
 font-weight:600;
}

/************************/
/*銀色の光るボタン */
/************************/
.c-button7 {
 display: block;
 position: relative;
 padding: 0.5em 1.5em;
 background-image: -webkit-linear-gradient(135deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
 background-image: linear-gradient(-45deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
 box-shadow: 0 3px 0 0 #696969;
 border-radius: 4px;
 font-weight: bold;
 font-size: 16px;
 max-width:180px;
 color: #000;
 text-align: center;
 text-decoration: none;
 overflow: hidden;
 transition: 300ms;
}
.c-button7::before {
 position: absolute;
 content: '';
 display: inline-block;
 top: -180px;
 left: 0;
 width: 30px;
 height: 100%;
 background-color: #b5e7ff;
 transition: 300ms;
 animation: shinyshiny 2.5s ease-in-out infinite;
}

.c-button7:hover {
 text-decoration: none;
 color: #0000cd;
 box-shadow: none;
 -webkit-transform: translateY(3px);
}

@-webkit-keyframes shinyshiny {
 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/**************************
 タブ切り替え
***************************/
/*親要素で囲みタブの横並びのためflexを指定*/
.tab-wrap {
 display: flex;
 flex-wrap: wrap;
 margin:5px 0;
}

/*タブlabelのスタイル*/
.tab-label {
 color: White;
 background-color:lightgray;
 text-align: center;
 padding: .5em 1em;
 order: -1;
 position: relative;
 z-index: 1;
 cursor: pointer;
 flex: 1;
}

/*タブの間に余白をあける*/
.tab-label:not(:last-of-type) {
 margin-right: 5px;
}

/*タブのコンテンツ部分*/
.tab-content {
 width: 100%;
 height: 0;
 overflow: hidden;
 opacity: 0;
 transform: translate(5px);

}

/* アクティブなタブ */
.tab-switch:checked+.tab-label {
 background-color:#004363;/*背景色*/
}
.tab-switch:checked+.tab-label:after{
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -15px;
 border: 10px solid transparent;
 border-top:10px solid #999fad;
 width: 0;
 height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
 height: auto;
 overflow: auto;
 padding: 15px 0 0 0;
 opacity: 1;
 transition: .5s opacity;
}

/* ラジオボタン非表示 */
.tab-switch {
 display: none;
}

/*タグクラウド・カスタマイズ*/
.tagcloud a {
 background: none; /*背景を消す*/
 border: 1px solid #ccc; 
 border-radius: 20px; /*角の丸み*/
 color: #555; /*文字色*/
 display: inline-block;
 padding: 3px 10px;
 padding-bottom:1px;
 text-decoration: none;
 font-size: 13px;
 margin: 2px;
 flex: 1 1 auto;
 display: flex;
 justify-content: space-between;
}
.tagcloud a .tag-caption::before {
 padding-right: 3px;
}
.tagcloud a:hover { /*マウスホバー時*/
 background: #778899;
 border: 1px solid #778899;
 color: #fff;
 transition: 0.5s; /*アニメーションの時間*/
}

/*通知エリアをTOPページで非表示*/
.front-top-page .notice-area {
 display: none;
}

/* reCAPTCHA TOPページ非表示 */
.home.page .grecaptcha-badge{
 visibility: hidden;
}

/* reCAPTCHA投稿ページ非表示 */
.single .grecaptcha-badge{
 visibility: hidden;
}

/*reCaptchaの位置*/
.grecaptcha-badge {
 bottom: 80px !important; 
}

/* reCAPTCHA カテゴリーページ非表示 */
.category .grecaptcha-badge{
 visibility: hidden;
}

/*記事一覧に日付アイコン表示*/
.new-entry-card-date {
 display: block;
 line-height:0.8;
 letter-spacing:0.5px;
 font-size: 11px; /*フォントサイズ*/
}

/*人気記事に日付*/
.popular-entry-card-date {
 display: block;
 line-height:0.8;
 letter-spacing:0.5px;
 font-size: 11px; /*フォントサイズ*/
}

/*記事エントリーカード日付の文字のサイズ*/
.post-date,
.post-update {
 font-size:11px;
}

/*ナビカード　リボン色変更*/
.ribbon-color-1 span {
 background-color: #7e95ea;/*①おすすめ*/
}

.ribbon-color-2 span {
 background-color: #7e95ea;/*②新着*/
}

.ribbon-color-3 span {
 background-color: #f7c114;/*③注目*/
}

.ribbon-color-4 span {
 background-color: #008000;/*④必見*/
}

.ribbon-color-5 span {
 background-color: #e9546b;/*⑤お得*/
}

/*左上にずらした背景色ありタイトル投稿記事内*/
.box74{
 margin: 2em auto; /* ボックスの余白 */
 background-color: #fafafa; /* ボックス背景色 */
 padding:3em 2em 1em; /* ボックス内側余白 */
 position:relative; /* 配置(ここを基準に)*/
 border: 1px solid #5a728b;	/* ボックスの線 (太さ　種類　色)*/
 font-size:15px;
}
.box74 .box-title {
 background-color:#5a728b; /* タイトル背景色 */
 font-size: 1em;/* タイトル文字の大きさ */
 color: #fff ; /* タイトル文字色 */
 padding: 7px 10px;/*タイトルの余白*/
 line-height: 1;/*タイトルの行の高さ*/
 position:absolute;	/* 配置(ここを動かす) */
 top: -10px; /*上から（0px）移動*/
 left: 20px; /*左から(0px)移動*/
}
.box74 img{
 max-width: 100%;
 height: auto;
 margin-right:40px;
 margin-top:15px;
 display: block;
}

/*TOPページMOREボタン*/
.more-btn a{
 --link-btn-color:#8ED1FC; /*ボタンの色はここで設定*/
 display:block; /*ブロック要素にする*/
 margin:auto; /*ボタン中央寄せ*/
 width: 200px; /*ボタンの幅*/
 border:1px solid var(--link-btn-color); /*枠線の太さ・種類・色*/
 background:var(--link-btn-color); /*ボタンの色*/
 padding: 0.5em 2em; /*ボタンの高さ*/
 color:#fff; /*文字の色*/
 border-radius:1px; /*角の丸み*/
 text-decoration: none; /*リンクの下線を消す*/
 text-align: center; /*文字中央寄せ*/
 transition: all .3s; /*なめらかな動きに*/
}

/*マウスオーバー時に反転させる*/
.more-btn a:hover{
 background:initial;
 color:var(--link-btn-color);
}

/*左上にずらした背景色ありタイトル固定記事内*/
.box75{
 margin: 2em auto; /* ボックスの余白 */
 background-color: #fafafa; /* ボックス背景色 */
 padding:3em 2em 1em; /* ボックス内側余白 */
 position:relative; /* 配置(ここを基準に)*/
 border: 1px solid #5a728b;	/* ボックスの線 (太さ　種類　色)*/
 font-size:15px;
}
.box75 .box-title1 {
 background-color:#5a728b; /* タイトル背景色 */
 font-size: 1em;/* タイトル文字の大きさ */
 color: #fff ; /* タイトル文字色 */
 padding: 7px 10px;/*タイトルの余白*/
 line-height: 1;/*タイトルの行の高さ*/
 position:absolute;	/* 配置(ここを動かす) */
 top: -10px; /*上から（0px）移動*/
 left: 20px; /*左から(0px)移動*/
}
.box75 img{
 max-width: 100%;
 height: auto;
 margin-right:40px;
 margin-top:15px;
 display: block;
}

/*左上にずらした背景色ありタイトル固定記事内*/
.box76{
 margin: 2em auto; /* ボックスの余白 */
 background-color: #fafafa; /* ボックス背景色 */
 padding:3em 2em 1em; /* ボックス内側余白 */
 position:relative; /* 配置(ここを基準に)*/
 border: 1px solid #5a728b;	/* ボックスの線 (太さ　種類　色)*/
 font-size:15px;
}
.box76 .box-title2 {
 background-color:#5a728b; /* タイトル背景色 */
 font-size: 1em;/* タイトル文字の大きさ */
 color: #fff ; /* タイトル文字色 */
 padding: 7px 10px;/*タイトルの余白*/
 line-height: 1;/*タイトルの行の高さ*/
 position:absolute;	/* 配置(ここを動かす) */
 top: -10px; /*上から（0px）移動*/
 left: 20px; /*左から(0px)移動*/
}
.box76 img{
 max-width: 100%;
 height: auto;
 margin-right:40px;
 margin-top:15px;
 display: block;
}

/*記事一覧マウスホバー時ふわっと影*/
.a-wrap:hover{
 transform: translateY(-2px);
 box-shadow: 2px 2px 6px 0 #ccc;
}

/* SNSシェアボタンを画面の左縦方向中央に固定 */
.article-header .sns-share {
 display: block;
 left: min(1.71vw, 60px);
 position: fixed;
 top: 50%;
 transform: translateY(-50%);
 z-index: 10;
}

/* 各アイコンを正方形に収める */
#main .article-header .sns-share a {
 height: 40px;
 width: 40px;
}

/* Twitterなどのキャプション削除 */
.sns-share.ss-high-and-low-lc a .button-caption {
 display: none;
}

/* 各アイコンの大きさ調整 */
.sns-share.ss-high-and-low-lc a .social-icon {
 font-size: 24px;
}

/* 各アイコンの枠線と背景色を透明に */
#main .article-header .bc-brand-color-white.sns-share [class*="-button"] {
 border: none;
 background-color: transparent;
}

/* SNSボタンを縦方向に並べる */
.article-header .sns-share-buttons {
 flex-direction: column;
 flex-wrap: nowrap;
 justify-content: center;
 padding: 1rem 0;
 gap: 0.2rem;
}

/* 各アイコンにホバー時の拡大アニメーション */
.article-header .sns-share-buttons a {
 transform: scale(1);
 transition: transform .3s ease-in-out;
}

.article-header .sns-share-buttons a:hover {
 transform: scale(1.2);
}

/*1400px以下*/
@media screen and (max-width: 1400px) {
/* header SNS button vertical -> horizontal */
.article-header .sns-share {
 display: block;
 left: unset;
 position: static;
 top: unset;
 transform: none;
}

.article-header .sns-share-buttons {
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 padding: 1rem 0;
 gap: 1rem;
}

.article-header .sns-share-buttons a {
 margin-bottom: 0;
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  /* header SNS button  */
#main .article-header .sns-share a {
 height: 32px;
 width: 32px;
}

/* 各アイコンの大きさ調整 */
.sns-share.ss-high-and-low-lc a .social-icon {
 font-size: 20px;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /* header SNS button  */
#main .article-header .sns-share a {
 height: 20px;
 width: 20px;
}

/* 各アイコンの大きさ調整 */
.sns-share.ss-high-and-low-lc a .social-icon {
 font-size: 16px;
  }
}

/*グローバルメニューをマウスオーバーでアンダーライン*/
#navi .navi-in a:after{
 position: absolute;/*線の位置を絶対配置に*/
 content: "";/*文字はなし*/
 left: 0px;/*線の位置*/
 bottom: 2px;/*線の位置*/
 height: 3px;/*線の高さ*/
 width: 100%;/*線の幅*/
 background: #b0c4de;/*線の色*/
 transform: scale(0,1);/*マウスオーバーの前は線を消す*/
 transition: 0.4s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
 transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/* 矢印風テキストリンク */
.arrowbtn a {
 --arrow-color:#333; /* 矢印の色を設定 */
 position: relative; /* 疑似要素を位置指定するための基準 */
 padding: 0 2.5em .5em .5em; /* 内側の余白（右に矢印部分を空ける） */
 color: var(--arrow-color); /* 文字色を矢印の色と統一 */
 text-decoration: none; /* 下線を非表示 */
 font-size:18px;/*文字のサイズ*/
}

.arrowbtn a::before {
 border-bottom: 1px solid var(--arrow-color); /* 下線としての矢印部分 */
 border-right: 1px solid var(--arrow-color); /* 右線としての矢印部分 */
 bottom: 0; /* 矢印をボタン下部に配置 */
 content: ''; /* 疑似要素でコンテンツを空に設定 */
 height: 12px; /* 矢印の高さ */
 position: absolute; /* 親要素から相対的に配置 */
 left: 0; /* 矢印の位置を左端に */
 transform: skewX(50deg); /* 矢印の形状を傾けてデザイン */
 width: 100%; /* ボタン全体の幅に矢印を合わせる */
 transition: all .3s; /* なめらかな動き（ホバー時） */
}

/* マウスオーバー時の動き */
.arrowbtn a:hover::before {
 left: 10%; /* ホバー時、矢印が右に10%ずれる */
}

/* H2見出しのスタイルをクリア */
.article h6.cstm-head {
 font-weight: 400;
 letter-spacing: .1rem;
 border: none;
 background-color: transparent;
 margin:0;
 padding: 0;
 position: static;
}

.article h6.cstm-head::before {
 display: none;
}

.article h6.cstm-head {
 font-size: 50px;
 font-weight: 200;
 color:#aac2d2;
 line-height:1.5;
}

/* H2見出しの下のテキストのスタイル */
.article h6.cstm-head+.cstm-sub-text {
 width: fit-content;
 position: relative;
}

.article h6.cstm-head+.cstm-sub-text::before,
.article h2.cstm-head+.cstm-sub-text.leftype::before {
 display: block;
 content: "";
 background-color: #aac2d2;
 width: 2ch;
 height: 4px;
 position: absolute;
 bottom: -1em;
 left: 0;
 right: 0;
 margin: auto;
 z-index: 1;
}

.article h6.cstm-head+.cstm-sub-text.leftype::before {
 right: unset;
 margin: unset;
 z-index: 1;
}

/*TOPページ H2スマホ見出し文字サイズ480px以下*/
@media screen and (max-width: 480px) {
.article h2.cstm-head{
 font-size: 40px;
}
}

/*---------------------------------
TOPページの日付を非表示
--------------------------------*/
.post-74 .date-tags {
 display: none;
}

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

/*トップページ上部下部余白*/
.page-id-74 .main {
 padding-top:10px;
 padding-bottom:0;
}

/*TOPページコンテンツ上部余白*/
.content-top{
 margin-top:0;
}

/* 目次の背景色を変更する */
.toc {
 background-color: #fff;  /* 目次の背景色を変更する */
 border-color: #a8bcc8;  /* 周囲のボーダーの色を変える */
 width:100%;
}

/* 目次のタイトルの背景色を変更する */
.toc-title{
 background-color:#aac2d2;  /* 背景色を変更する */
 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;  /* アイコン背景の余白 */
}

/*サイドバー目次 高さ スクロール */
.widget_toc{
 max-height: 70vh;
 overflow-y: auto;
 border:1px solid #c0c0c0;
 margin-top:15px;
}

/*サイドバー目次リスト番号非表示 */
.sidebar .toc .toc-list> li li{
   list-style: none;
}

/*目次h3のリスト番号非表示タイトルにドットを表示*/
.article .toc-list > li li {
list-style: none;
}

.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #cdcdcd;
  position: relative;
  margin-bottom: 2px;
}

/*見出しh6フォントサイズ768px以下*/
@media screen and (max-width: 768px){
.article h6.cstm-head {
 font-size: 34px;
 color:#aac2d2;
 letter-spacing:0.03em;
	}
}

/* スクロール矢印ダウンの位置 */
.scroll {
  padding-top: 60px;
  position: relative;
  text-align: center;
	color:#fff;
	margin:-63px !important;
	bottom:107px;
	font-size:13px;
	letter-spacing:0.15em;
}
/* 矢印のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  content: "";
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}
/* 矢印のアニメーション */
@keyframes scroll {
  0% {
    opacity: 0;
    transform: rotate(-45deg) translate(0, 0);
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: rotate(-45deg) translate(-20px, 20px);
  }
  100% {
    opacity: 0;
  }
}

/*TOPページのヘッダー画像の高さ調整スマホ480px以下*/
   @media screen and (max-width: 480px){
   .n2-ss-slider .n2-ss-slide{
    min-height:80vh!important;/*スマホの高さ調整*/
}
}	

/*スマホ横揺れ対策*/
@media screen and (max-width : 1024px){
	html,
	body {
	overflow-x: hidden;
	overflow-y: scroll;
}
}

/*スマホのスライドインメニューを右から出す*/
.navi-menu-content{
	left: auto;
	right: 0;
	transform: translateX(101%);
}