@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;
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;/*⑤お得*/
}

/*左上にずらした背景色あり囲い枠・ながさき旅日記のご案内*/
.box77{
margin: 2em auto; /* ボックスの余白 */
background-color: #fafafa; /* ボックス背景色 */
padding:3em 3em 1em;/* ボックス内側余白 */
position:relative; /* 配置(ここを基準に)*/
border: 1px solid #5a728b;	/* ボックスの線 (太さ　種類　色)*/
font-size:15px;
}
.box77 .box-title5 {
background-color:#5a728b; /* タイトル背景色 */
font-size: 1em;/* タイトル文字の大きさ */
color: #fff ; /* タイトル文字色 */
padding: 7px 10px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;	/* 配置(ここを動かす) */
top: -10px; /*上から（0px）移動*/
left: 30px; /*左から(0px)移動*/
}
.box77 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.6em 1em 0.6em 1em; /*内側余白調整（上右下左）*/
color:#fff; /*文字の色*/
border-radius:1px; /*角の丸み*/
text-decoration: none; /*リンクの下線を消す*/
text-align: center; /*文字中央寄せ*/
transition: all .3s; /*なめらかな動きに*/
font-size: 16px;/*文字のサイズ*/
}

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

/*記事一覧マウスホバー時ふわっと影*/
.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%出す*/
}

/*矢印風テキストリンクTOPページ観光マップ*/
.arrowbtn7 a {
--arrow-color:#333; /*矢印の色を設定*/
position: relative; /*疑似要素を位置指定するための基準*/
padding: 0 2em .5em .5em; /*内側の余白（右に矢印部分を空ける）*/
right:10%;/*左側からの矢印の位置*/
color: var(--arrow-color); /*文字色を矢印の色と統一*/
text-decoration: none; /*下線を非表示*/
font-size:18px;/*文字のサイズ*/
font-weight:bold;
}
.arrowbtn7 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; /*なめらかな動き（ホバー時）*/
}

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

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

/*固定ページ日付非表示【更新記事】*/
.post-13062 .date-tags {
display: none;
}

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

/*目次の左側余白*/
.toc-content ol li{
margin-left:15px;
}

/*目次のタイトルの背景色を変更する*/
.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: 60vh;
overflow-y: auto;
border:1px solid #c0c0c0;
margin-top:15px;
}

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

/*サイドバー目次の左側余白*/
.sidebar .toc-content ol li{
margin-left:15px;
}

/*目次h3のリスト番号非表示タイトルにドットを表示*/
.article .toc-list > li li {
list-style: none;
margin-left:5px;
}
.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:115px;
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:83vh!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%);
}