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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* カテゴリーラベルを非表示 */
.cat-label{
display: none;
}

.widget_bogo_language_switcher .w-header__title {
  display: none;
}

.bogo-language-switcher {
  display: flex;
  flex-direction: row-reverse;
}

.bogo-language-switcher a {
  padding: 1em;
  color: var(--color_text);
  font-weight: 700;
}

.bogo-language-switcher .current a {
  color: darkgreen;
}

.bogo-language-switcher .en-US {
  position: relative;
}

.bogo-language-switcher .en-US::before {
  content: "";
  width: 1px;
  height: 65%;
  background-color: var(--color_text);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/*モバイルメニュー　文字消す*/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .mobile-menu-buttons .menu-caption{
    display: none;
  }
  .mobile-menu-buttons{
    align-items: center;
  }
}

/************************************
** コピーボタン
************************************/
.copy-box{
    position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 2em 2em 1.7em;	/* ボックスの内側余白(上:2em　左右:2em 下：1.7em) */
	border: 1px solid #fdc44f;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
	background: #fef9ed;/* ボックス背景色 */
}
.copy-box .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -18px; /* 上から（-18px）移動*/
	left: 27px; /* 左から(27px)移動 */
	background: #fdc44f; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	padding: 0.6em 1em;/* タイトルの内側余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 1rem;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
	border-radius:4px;/* タイトルの角丸 */
}
.copy-box p:first-child{
    margin-top:0;
}
.copy-box p:last-child{
    margin-bottom:0;
    padding-bottom:0;
}
.copy-box ul{
    border:none;
    margin:0;
    padding:0;
}
.copy-box ul li{
    margin-left:20px; /* 左に隙間があく場合は消してください */
}
.btn-copy {
    display: block;
    margin: 1em auto 2em;
    width: 120px;
    padding: 0.3em 1em;
    text-decoration: none;
    background: #888; /* ボタン背景色 */
    color: #fff;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0px 5px rgba(0,0,0,0.2);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing:1px;
    line-height: 1.8;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.btn-copy:hover {
    color:#fff;
}
.btn-copy:before {
    left: -100%;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    content: "Copied!";
}
.btn-copy .btn-copy-text {
    display: inline-block;
    -webkit-transition: all 0.3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all 0.3s;
}
.btn-copy-active{
    background:#bbb;/* ボタンクリック時 背景色 */
}
.btn-copy-active:before {
    left: 0;
}
.btn-copy-active .btn-copy-text {
    -webkit-transform: translateX(250%);
    -moz-transform: translateX(250%);
    -ms-transform: translateX(250%);
    transform: translateX(250%);
}

/*目次ハイライトhttps://www.beginner-blogger.com/cocoon-sidebar-toc-highlight/*/
#toc-2 li.current {
	background-color: #fff3bb; /* ハイライト色 */
}

/*2ページ目以降アイキャッチ消す*/
.single-paged-2 .eye-catch-wrap,
.single-paged-3 .eye-catch-wrap,
.single-paged-4 .eye-catch-wrap,
.single-paged-5 .eye-catch-wrap,
.single-paged-6 .eye-catch-wrap,
.single-paged-7 .eye-catch-wrap{
	display:none;
}

.list-3{
   list-style: none;
   padding:0;
   margin:0;
}
.list-3 li { 
	border-bottom:2px dashed;
   border-color:#cdcdcd; /* 線の色 */
   position: relative;
   margin:0.5em 0 !important;
	max-width:100%;
	padding-left: 25px;
}
@media screen and (max-width: 700px){
.list-3 li { 
	left:-5%;
}
}
.list-3 li:before {
   font-family: "Font Awesome 5 Free";
   content: "\f00c"; /*アイコン*/
   color:  #fdc44f; /* 色 */
   position: absolute;
	left:0;
}

/*パンくずリスト 横スクロール*/
.breadcrumb {
  white-space: nowrap; /*改行しない*/
  overflow-x: auto; /*はみ出た部分を隠す*/
  -webkit-overflow-scrolling: touch; /*ぬるっとスクロールさせる*/
	font-size:0.75rem;
}
/************************************
****　アピールエリア
************************************/
.appeal{
padding:0 0 .1em;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
padding:0;
min-height:0px;
max-height:30px;
}
.appeal-content{
background-color:#fdc44f; /*エリア背景色・ボタン色と同じカラーコードを入力*/
margin:auto;
padding:0;
max-width:100%;
opacity:1;
line-height:1.6;
}
a.appeal-button {
color: #fff!important;/*文字色はこちらで変更できます*/
font-size:.85em;
padding:0 23em 0;
margin:0;
max-width:100%;
white-space: nowrap;
box-shadow: none;
}
@media screen and (max-width: 1023px){
a.appeal-button {
padding:0 18em 0 ;
}}
@media screen and (max-width: 834px){
a.appeal-button {
padding:0 13em 0 ;
}
.appeal{
padding:.1em 0 .25em;
}}
@media screen and (max-width: 652px){
a.appeal-button {
padding:0 8em 0 ;
}}
@media screen and (max-width: 500px){
a.appeal-button {
padding:0 6em 0 ;
}}
@media screen and (max-width: 420px){
a.appeal-button {
padding:0 3em 0 ;
}}
.appeal-button:hover {
transform:none;
box-shadow: none;
}

/*タイムライン*/
.box1-yellow{
	margin: 2em auto; /* ボックスの余白 */
	background: #fef9ed; /* ボックス背景色 */
	border-radius:4px; /* ボックス角丸 */
	max-width:700px; /* ボックス横幅 */
	padding: 3.1em 2em 0.1em; /* ボックス内側余白 */
	position:relative; /* 配置に関するもの(ここを基準に) */
}
.box1-yellow .box-title {
	background: #fdc44f; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	font-weight: bold; /* タイトル文字の太さ */
	font-size: 1.1rem;/* タイトル文字の大きさ */
	padding: 0.2rem;/* タイトル周りの余白 */
	text-align: center;	/* タイトル中央寄せ */
	border-radius: 4px 4px 0px 0px;	/* タイトル角丸 */
	position:absolute;	/* 配置に関するもの(ここを動かす) */
	top:0;	/*上から(0px)に配置 */
	left:0; /*左から(0px)に配置 */
	width:100%;/*横幅最大幅 */
}
.box1-yellow p {
	margin: 0;/* 文字の余白リセット */
	padding: 0; /* 文字の内側余白リセット*/
}
/*********************************
* タイムライン
*********************************/
.ptimeline-wrap{
    margin:0 auto 2rem;
}
.ptimeline-wrap .ptimeline{
    padding:0 !important;
    list-style:none !important;
}
.ptimeline-wrap .ptimeline-label {
    padding: 3px 0 0 2px;
    color: #aaa;
    font-size: 12px;
    font-weight: 500;
}
.ptimeline-wrap .ptimeline-title {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.5;
    color:#00bfff;
}
.ptimeline-wrap .ptimeline-main {
    margin-top: 0.5em;
    padding: 0 0 1.5em;
    font-size: 0.9em;
    line-height: 1.8;
    border-bottom: dashed 1px #ddd;
    color:#555;
}
.ptimeline-wrap .ptimeline-main img{
  display:block;
  margin:1em auto;
}
.ptimeline-wrap .ptimeline-item {
    position: relative;
    padding: 0 0 1em 1.5em !important;
    margin-bottom:0 !important;
    border:none;
}
.ptimeline-wrap .ptimeline .ptimeline-item:before {
    content: "";
    width: 3px;
    background: #eee !important;
    display: block;
    position: absolute;
    top: 25px;
    bottom: -3px;
    left: 5px;
}
.ptimeline-wrap .ptimeline-item:last-child:before{
    content:none;
}
/*********************************
* タイムライン マーカー
*********************************/
.ptimeline-wrap .ptimeline-marker{
    display: block;
    position: absolute;
    content: "";
    top: 6px;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: solid 3px #00bfff;
}
.ptimeline-wrap .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .ptimeline-item:last-child .ptimeline-marker{
    background:#00bfff;
}
/*四角 */
.ptimeline-wrap .square .ptimeline-marker{
    border-radius: 0;
}
/* アイコン*/
.ptimeline-wrap .icon .ptimeline-item .ptimeline-marker{
    content:unset;
    border:none !important;
    background:none !important;
}
.ptimeline-wrap .icon .ptimeline-item .ptimeline-marker:before{
    font-family: "Font Awesome 5 Free";
    top: -1px;
    left: 0;
    position:absolute;
    font-weight:bold;
    font-size:16px;
    line-height:1;
    color:#00bfff;
}
.ptimeline-wrap .icon .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .icon .ptimeline-item:last-child .ptimeline-marker{
    background:none !important;
}
/* 画像*/
.ptimeline-wrap .tl-img .ptimeline-item .ptimeline-marker{
    content:unset;
    border:none !important;
    background:none !important;
}
.ptimeline-wrap .tl-img .ptimeline-item .ptimeline-marker:before {
    content:"";
    display:inline-block;
    background-image:url(ここに画像URL); /* 画像1番目*/
    background-size:contain;
    background-repeat:no-repeat;
    width:40px;
    height:40px;
    position: relative;
    top: -4px;
    left: -2px;
}
.ptimeline-wrap .tl-img li:nth-of-type(2) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像2番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(3) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像3番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(4) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像4番目*/
}
.ptimeline-wrap .tl-img li:nth-of-type(5) > .ptimeline-marker:before{
    background-image:url(ここに画像URL) !important; /* 画像5番目*/
}
.ptimeline-wrap .tl-img .ptimeline-item {
    padding: 0 0 1em 3em !important;
}
.ptimeline-wrap .tl-img .ptimeline-item:before {
    top: 30px;
    left: 15px;
}
/*********************************
* タイムライン カラー
*********************************/
/* ピンク */
.ptimeline-wrap .pink .ptimeline-title{
    color:#f7bcbc !important; /* タイトル色 */
}
.ptimeline-wrap .pink .ptimeline-main{
    color:#555 !important; /* コンテンツ色 */
}
.ptimeline-wrap .pink .ptimeline-marker{
    border: solid 3px #f7bcbc !important; /* マーカー色 */
    color:#f7bcbc; /* アイコン色 */
}
.ptimeline-wrap .pink .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .pink .ptimeline-item:last-child .ptimeline-marker{
    background:#f7bcbc; /* マーカー色(最初と最後)*/
}
.ptimeline-wrap .pink .ptimeline-item .ptimeline-marker:before{
    color:#f7bcbc !important; /* アイコン色 */
}
/*イエロー*/
.ptimeline-wrap .yellow .ptimeline-title{
    color:#fdc44f !important; /* タイトル色 */
}
.ptimeline-wrap .yellow .ptimeline-main{
    color:#555 !important; /* コンテンツ色 */
}
.ptimeline-wrap .yellow .ptimeline-marker{
    border: solid 3px #fdc44f !important; /* マーカー色 */
    color:#fdc44f; /* アイコン色 */
}
.ptimeline-wrap .yellow .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .yellow .ptimeline-item:last-child .ptimeline-marker{
    background:#fdc44f; /* マーカー色(最初と最後)*/
}
.ptimeline-wrap .yellow .ptimeline-item .ptimeline-marker:before{
    color:#fdc44f !important; /* アイコン色 */
}
/*グリーン*/
.ptimeline-wrap .green .ptimeline-title{
    color:#2fcdb4 !important; /* タイトル色 */
}
.ptimeline-wrap .green .ptimeline-main{
    color:#555 !important; /* コンテンツ色 */
}
.ptimeline-wrap .green .ptimeline-marker{
    border: solid 3px #2fcdb4 !important; /* マーカー色 */
    color:#2fcdb4; /* アイコン色 */
}
.ptimeline-wrap .green .ptimeline-item:first-child .ptimeline-marker,.ptimeline-wrap .green .ptimeline-item:last-child .ptimeline-marker{
    background:#2fcdb4; /* マーカー色(最初と最後)*/
}
.ptimeline-wrap .green .ptimeline-item .ptimeline-marker:before{
    color:#2fcdb4 !important; /* アイコン色 */
}


/************************************
** パンくずリストのアイコンをまとめて非表示（Font Awesome 5）
************************************/

.breadcrumb .fa-home:before,
.breadcrumb .fa-folder:before,
.breadcrumb .fa-file:before {
	content: "#";
}
/*---------------------------------
親カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li a{ 
  border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}

.widget_categories ul li a::before{
  font-family: FontAwesome;
  content: "#"; /* FontAwesomeのユニコード */
  color: #888; /* アイコンの色 */
  padding-right: 0.1em;
}

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

/*---------------------------------
子カテゴリのカスタマイズ
--------------------------------*/
.widget_categories ul li ul li a::before{
  font-family: FontAwesome;
  content: "#"; /* FontAwesomeのユニコード */
  color: #888; /* アイコンの色 */
  padding-right: 0.1em;
}
/*ボタン*/
.btn{
	margin:5px 5px;
}
/************************************
** サイドバー追尾目次
************************************/
.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: 240px;
  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;
  }
}
/*ブログカードラベル*/
.blogcard-type .blogcard-label{
  background-color:#02bb80;
}
.bct-together .blogcard-label::after {
	content: "あわせて行きたい";
}
.bct-related .blogcard-label::after {
	content: "関連スポット";
}

/*ランキング表示を変更*/
.widget-entry-cards .widget-entry-card-content {
padding-top : 0.5em;
height : 100px;
}
.widget-entry-cards.ranking-visible .card-thumb::before {
top : -6px !important ;
left : -5px !important ;
border-radius : 50%;
padding : 2px;
}

/*エントリーカード下線*/
.entry-card-wrap {
	border-bottom:solid 2px #ddd; /*枠線形状・色*/
}

/*画像の角丸め*/
img{border-radius: 0.75em!important;}

/*タグクラウド*/
.tagcloud a {
	color: #222;
	border:none;
	background-color: transparent;
	font-size:0.9em;
	/*
	border-bottom: 1px solid #222;
	border-radius:0;
	*/
	text-decoration : underline;
}

.tagcloud a:hover { /*マウスホバー時*/
	background-color:#fff;
	background-color: transparent;
	color:#222;
	transform: translateY(-0.1875em);
}
.tag-caption .fa-tag:before {
    content: "#";
	color:#888;
}

/*カテゴリーページのアイコン*/
.archive-title .fa-folder-open:before {
	content: "Tag: #";
	padding-left:1em;
	color:#888;
}
/*
.archive-title:after {
	content: " の記事一覧";
	color:#888;
}*/

.archive-title {
background-color: #d5f5e3;
	padding-bottom:0.2em;
	padding-top:0.2em;
	font-size:1.2em;
	color:#222;
}

/*タグページのアイコン*/
.archive-title .fa-tags:before {
  content: "Tag: #";
	padding-left:1em;
	color:#888;
	/*display: none;*/
}

/*エントリーカード*/
.entry-card-title {
	font-size:0.9em;
	padding-bottom:1.7em;
}

/*タグとカテゴリ*/
.tag-link,
.cat-link{
	color: #222;
	border:none;
	background-color: transparent;
	font-size:1em;
	/*
	border-bottom: 1px solid #222;
	border-radius:0;
	*/
	text-decoration : underline;
	/*
	padding-top:0.3em;
	padding-bottom:0.3em;
*/
}
.tag-link .fa-tag:before,
.cat-link .fa-folder:before {
    content:"#";
	color:#888;
	padding-right:0.1em;
}

.cat-link:hover { /*マウスホバー時*/
opacity:1;
background-color: transparent;
color:#222;
transform: translateY(-0.1875em);
animation-duration:1s;
}
.tag-link:hover { /*マウスホバー時*/
background-color:#fff;
background-color: transparent;
color:#222;
transform: translateY(-0.1875em);
}

/***box-link-btns***/
/*参考リンク： https://zaco-engineers.com/2022/05/29/travel-box-link-btns/*/
.box-link-btns {
	border-radius:1%;
width:100%;border: 1px solid rgba(0, 0, 0, 0.1);
padding:10px;box-sizing:border-box;
box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
	border-radius: 5px;
}
.box-link-btns a{text-decoration:none;font-weight: bold;}
.box-link-btns__imgpart {
text-align:center;width:100%;}
.box-link-btns__btns {
width:100%;margin-top:1em;text-align:left;}
.box-link-btns__btns .btn._1 {
width:100%;padding:0.6em 0;padding-left:0;padding-right:0;}

/*button*/
.btn._1 {border-radius:0.5rem;border:0;color:#fff;
cursor:pointer;display:inline-block;font-size:1.0em;
font-weight:bold;line-height:1;padding:8px 3px 8px 3px;
transition:background-color 150ms ease;vertical-align:middle;
box-shadow: 0px 5px 0 #01a873;
transition: 0.2s all ease 0s;
overflow: hidden;
background-color:#02bb80;margin-bottom:10px;
}
a:hover.btn._1 {
	box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

/*mobile*/
@media screen and (max-width:480px) {
.box-link-btns {display: table;width:100%;font-size:1.1em;}
.box-link-btns__imgpart img{margin-top:5px;margin-bottom:5px;width:100%;}/*画像の位置とサイズ*/
.box-link-btns__btns.__one > div{width:85%;margin-left:auto;margin-right:auto;}
}

/*PC*/
@media screen and (min-width: 480px) {
.box-link-btns {display: table;width:100%;}
.box-link-btns__imgpart {display:table-cell;width:30%;}
.box-link-btns__imgpart img{vertical-align:top;margin-top:30px;/*margin-bottom:50px;*/}
.box-link-btns__infopart {display:table-cell;vertical-align:top;
position:relative;padding-left:20px;width:77%;}
/*.box-link-btns__btns > div {float:center;margin-bottom:5px;}*/
.box-link-btns__btns {position: relative;bottom:0;box-sizing:
border-box;padding-right:10px;}
.box-link-btns__btns.__one > div{width:85%;margin-left:auto;margin-right:auto;}
}

#sidebar .box-link-btns {width:100%;font-size:1em;display: flex;flex-direction: column;}
#sidebar .box-link-btns__imgpart {display:table-cell;width:100%;}/*画像の位置とサイズ*/
#sidebar .box-link-btns__imgpart img{margin-top:0px;margin-bottom:0.5em;}
#sidebar .box-link-btns__infopart {display:table-cell;vertical-align:top;position:relative;width:100%;}

/***box-link-btns***/

/*メニュー*/
.box-menu-icon{
  color: #02bb80;
}

.box-menu:hover {
    box-shadow: inset 2px 2px 0 0 
#02bb80,2px 2px 0 0 #02bb80,2px 0 0 0 #02bb80,0 2px 0 0
    #02bb80;
} 


/*Cocoonのcat-label（カテゴリラベル）のカスタマイズ（全体）*/
.cat-label, .related-entry-card .cat-label {
	padding: 1px 10px;
	background-color: #02bb80;
	top: 3%;
	left: 2%;
	border: 0;
	border-radius: 30px;
	line-height: 1.8;
	font-size: 0.67em;
	font-weight: 500;
}
.cat-label:before {
	content: "#";
	padding-right:0.2em;
}

/*--------------------------------------
コンバージョンアップボタン （中央寄せ）
参考：https://noripon.blog/2020/12/17/how-to-create-stylish-and-easy-to-use-css-button-designs/
--------------------------------------*/
.button1,
a.button1,
button.button1 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #02bb80;
  border-radius: 0.5rem;
}

.button1-wrap {
  margin: 30px 0;
  text-align: center; 
}

a.button1-c {
    font-size: 1rem;
    width: 100%;
    position: relative;
    padding: 0.25rem 2rem 0.5rem 3.5rem;
    color: #fff;
    background: #02bb80;
    -webkit-box-shadow: 0 5px 0 #01a873;
    box-shadow: 0 5px 0 #01a873;
}

a.button1-c span {
  font-size: 0.8rem;

  position: absolute;
  top: -10px;
  left: calc(50% - 150px);

  display: block;

  width: 300px;
  padding: 0.2rem 0;

  color: #02bb80;
  border: 2px solid #01a873;
  border-radius: 0.5rem;
  background: #fff;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

a.button1-c:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);

  color: #fff;
  background: #02bb80;
  -webkit-box-shadow: 0 2px 0 #d44114;
  box-shadow: 0 2px 0 #01a873;
}

a.button1-c:hover:before {
  left: 2rem;
}

@media screen and (min-width: 500px){
a.button1-c {
    width: 500px;
}
}

/*ボタン*/

a.btn--green {
  color: #fff;
  background-color: #02bb80;
  border-bottom: 5px solid #01a873;
	width:130px;
	height: 55px;
	padding: 0px;
}
a.btn--green:hover {
  margin-top: 3px;
  color: #fff;
  background: #02bb80;
  border-bottom: 2px solid #01a873;
}
a.btn--shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}

/*サイドバー*/
.sidebar h3{
  background-color:#e5e5e5;/*好きな背景色にする*/
  padding:16px 10px;
  margin:16px 0;
}

/*Cocoonバッジカラー変更*/
.badge{background-color: #fdc44f}
.badge-orange{background-color: #fdc44f}
.badge-red {background-color: #bf4762;}
.badge-pink {background-color: #ebb2cb;}
.badge-purple {background-color: #bb8bc7;}
.badge-blue {background-color: #92c1d6;}
.badge-green {background-color: #02bb80;}
.badge-yellow {background-color: #fdc44f}
.badge-brown {background-color: #9e735d;}
.badge-grey {background-color: #b9b9bd;}

/*バッジ*/
.badge, .badge-red, .badge-pink, .badge-purple, .badge-blue, .badge-green, .badge-yellow, .badge-brown, .badge-grey {
	color: #fff;
	padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
}

/* リンク */
.entry-content a{
    text-decoration:none;
	font-weight: bold;
}
/* 目次
-------------------------------------------------- */
#main .entry-content .toc {
  /* 目次全体デザイン */
  background: #F9F9F9;
  /* 目次全体の背景色を変える場合はここを変更 */
  border: none;
  display: block;
  border-top: 5px solid;
  border-top-color: #fdc44f;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  padding: 20px 25px;
}

#main .entry-content .toc .toc-title {
  /* 目次の文字指定 */
  text-align: left;
  margin: 0 20px 20px -10px;
  padding-left: -20px;
  font-size: 23px;
  font-weight: 700;
  color: #fdc44f;
  /* 目次の文字色を変える場合はここを変更 */
}

#main .entry-content .toc .toc-title:before {
  /* 目次のアイコン設定 */
  top: 0;
  left: -45px;
  width: 50px;
  height: 50px;
  font-family: "Font Awesome 5 Free";
  content: "\f03a";
  /* アイコンを変える場合はここを変更 */
  font-size: 20px;
  margin-right: 5px;
  color: #FFF;
  /* アイコンの色を変える場合はここを変更 */
  background-color: #fdc44f;
  /* アイコンの背景色を変える場合はここを変更 */
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  padding: 14px;
}

#main .entry-content .toc .toc-content ol {
  /* 目次のデザインカスタマイズ */
  padding: 0 0.5em;
  position: relative;
}

.toc-list > li a {
color: #545454;
font-weight: bold;
display:block;
	line-height: 1.5;
  padding: 0.7em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none !important;
}
.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content : "\f138";
margin-right: 7px;
	color: #fdc44f;/*点の色を変更できます*/
}
.toc-list > li li a {
color: #545454;
font-weight: normal;
font-size: 95%;
margin-top:0;
margin-left: 2em;
}
.toc-list > li li a::before {
content: "";
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #02bb80;/*点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}

@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
	
.toc-list > li li a {
margin-left: 0em;
}
	
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc a:hover {
color: #333333;
}

/************************************
** 　見出し　h2,h3,h4,h5
************************************/
.sidebar h3,.article h2 {
	position: relative;
	padding: 0.6em 0.7em;
	border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
	border-bottom: 4px solid #ffe033;
	border-right: 4px solid #ffe033;
	background: #02bb80;
	color: #fff;
}

/*media Queries 1030px以下
-----------------------------------------------------------------------------*/
@media screen and (max-width: 1030px){
.article h2 {
	padding: 10px 0.8em;
}
}
.article h3 {
	border: none; /* Cocoon親テーマCSSリセットのため */
	font-size: 24px !important;/*文字のサイズ*/
	width: 100%;
	position: relative;
	margin: 1.8em 0 1.2em;
	padding: 12px 10px 10px 10px;
}
.article h3:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 5px;
	left: 0;
	background: -webkit-repeating-linear-gradient(135deg, #fff, #fff 3px, #02bb80 3px, #02bb80 6px, white 6px, white 9px, #ffe033 9px, #ffe033 12px);
	background: repeating-linear-gradient(135deg, #fff, #fff 3px, #02bb80 3px, #02bb80 6px, white 6px, white 9px, #ffe033 9px, #ffe033 12px);
	/*
	background: -webkit-repeating-linear-gradient(135deg, #fff, #fff 3px, #好きな色A 3px, #好きな色A 6px, white 6px, white 9px, #好きな色B 9px, #好きな色B 12px);
	background: repeating-linear-gradient(135deg, #fff, #fff 3px, #好きな色A 3px, #好きな色A 6px, white 6px, white 9px, #好きな色B 9px, #好きな色B 12px);
	*/
	bottom: -4px;
}
.article h4 {
	border: none;
  font-size: 22px !important;/*文字のサイズ*/
  /*border-top: 1px solid #323232;/*上線*/
	border-bottom: 1px solid #e5e5e5;
  color: #323232;
  padding: .5em 0;
  margin-bottom: 15px;
}
@media (max-width:480px){
.article h2{
font-size: 18px!important;
}
.article h3{
font-weight:bold;
font-size:17px!important;
}
.article h4, .article h5{
font-size:15px!important;
}
}
/***  グローバルメニュー項目間の区切り***/
#navi .navi-in > ul > li{
  border-right: 1px solid #eee;
}

#navi .navi-in > ul > li:last-child{
  border-right-width: 0;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
}

/***  グローバルメニュー項目間の区切り（外枠）***/
#navi .navi-in > ul > li{
  border-left: 1px solid #eee;
}

#navi .navi-in > ul > li:last-child{
  border-right: 1px solid #eee;
}

.navi-in > ul > .menu-item-has-children > a::after{
  right: 10px;
}
#navi .navi-in > .menu-header .item-label{
	font-size: 13px;
}
#navi .navi-in > ul li{
	height: 40px;
	line-height: 40px;
}



/*--------------------------------------
コンバージョンアップボタン （中央寄せ）
参考：https://noripon.blog/2020/12/17/how-to-create-stylish-and-easy-to-use-css-button-designs/
--------------------------------------*/
.button1,
a.button1,
button.button1 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #02bb80;
  border-radius: 0.5rem;
}

.button1-wrap {
  margin: 30px 0;
  text-align: center; 
}

a.button1-c {
    font-size: 1.15rem;
    width: 100%;
    position: relative;
    padding: 0.25rem 2rem 0.5rem 3.5rem;
    color: #fff;
    background: #02bb80;
    -webkit-box-shadow: 0 5px 0 #01a873;
    box-shadow: 0 5px 0 #01a873;
}

a.button1-c span {
  font-size: 0.8rem;

  position: absolute;
  top: -10px;
  left: calc(50% - 150px);

  display: block;

  width: 300px;
  padding: 0.2rem 0;

  color: #02bb80;
  border: 2px solid #01a873;
  border-radius: 0.5rem;
  background: #fff;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

a.button1-c:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);

  color: #fff;
  background: #02bb80;
  -webkit-box-shadow: 0 2px 0 #d44114;
  box-shadow: 0 2px 0 #01a873;
}

a.button1-c:hover:before {
  left: 2rem;
}

@media screen and (min-width: 500px){
a.button1-c {
    width: 500px;
}
}

/*--------------------------------------
  もしもの簡単リンクのカスタマイズ
--------------------------------------*/
.easyLink-info-btn {
	display: inline!important;
}
.easyLink-info-name a { color: #000!important; /* 文字色 */ } 
.easyLink-info-btn a{
	margin: 12px 10px 5px 0!important;
	padding: 0 12px!important;
        line-height: 35px!important;
	display: inline-block!important;
	width: 100%!important;
	font-size: 1.2em!important;
	border-radius: 5px!important;
}
/* リンクBOX */
.easyLink-box {
margin-bottom: 1.5em!important; /* 下に余白を作る。初期は0px */
	box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
	border-radius: 5px;
}
.easyLink-info-btn-amazon,.easyLink-info-btn-rakuten,.easyLink-info-btn-yahoo{
	background:#02bb80!important;
		box-shadow: 0px 5px 0 #01a873;
    transition: 0.2s all ease 0s;
 overflow: hidden;
	border-radius:0.5rem;
	vertical-align:middle;
	font-weight:bold;line-height:1;padding:8px 3px 8px 3px;
}

/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
    box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

a:hover.easyLink-info-btn-rakuten {
  box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

a:hover.easyLink-info-btn-yahoo {
  box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

.easyLink-info-maker {
 display: none;
 }
.easyLink-info-model {
 display: none;
 }

@media screen and (max-width: 480px){
	div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
		width: 100%!important;
		position: relative;
	}
	.easyLink-info-btn a:before {
		padding-right: 5px;
		right: 5px;
		position: absolute;		
	}
}
/*ここから追加項目*/
@media screen and (max-width: 480px) {
div.easyLink-box div.easyLink-info p.easyLink-info-name {
 margin-bottom: 5px;
 font-size: 15px;
 }
div.easyLink-box {
 padding: 10px 20px;
 }
div.easyLink-box div.easyLink-img p.easyLink-img-box span > img {
 max-width: 45%;
 max-height: 100%;
 }
 div.easyLink-box div.easyLink-img {
 margin-bottom: 5px;
 height: 100%;
 }
div.easyLink-box div.easyLink-img::before {
 padding-top: 80%!important;
 }
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
 margin-top: 10px;
 text-align: center;
 }
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
margin: 12px 0;
padding: 6px 0;
}
 }
/************************************
**ヘッダーロゴ
************************************/
@media screen and (max-width: 834px){
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
/*max-height:60px;大きなロゴ画像を使いたい方は、ここの数字を大きくしてみてください*/
}

.logo {/*ロゴ画像を中央に配置したい方は、以下3行を削除*/
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}
/************************************
**ヘッダー　モバイル表示
************************************/
@media screen and (max-width: 1023px) and (min-width: 835px){
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
}}
@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{
display:none;
}
}
@media (max-width:834px){
.header-container {
display:none;
}
img.site-logo-image{
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
.mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/
background: #fff;
}
}

/************************************
**モバイル表示　ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
height:50px;
box-shadow: none;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fas::before,span.fab::before{
color:#90C31F;/*検索マーク色変更はこちら*/
/*margin-left:1em;*/
}

/*span.fas.fa-bars::before{
color:#90C31F;/*ハンバーガーメニュー色変更はこちら
margin-right:1em;
}*/
/*
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}*/
/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#90C31F;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
font-size:1.2em;
background: white;
color:#333;
margin-bottom:1em;
border-bottom:3px dotted #90C31F; /*点線の色変更はこちら*/
content: "Menu";
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1.3em;
background-color:#ffffff;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#7b7b7b;
margin:0 .5em 0 1em;
}
@media (max-width:834px){
.sub-menu{
box-shadow: none;
}
}

/*プロフィール*/
.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: center;
	width: 100% !important;
	background: url(https://babychamp-blog.com/tabi-usagi/wp-content/uploads/2022/08/IMG_5518-scaled.jpeg) 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;
	border-radius: 50%!important;
}

.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; }
.sns-buttons a.follow-button,.author-content .author-follows .sns-buttons{ justify-content: center!important; }
.sns-buttons a.follow-button,.author-content .author-follows .sns-buttons a.follow-button{
	border-radius: 50%!important;
	border: none;
	width: 45px;
	height: 45px;
	color: #fff;
	margin-bottom: 0.5em;
	margin-left: 0.25em;
	margin: 0.25em;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}

.bc-brand-color.sns-follow .website-button{ background-color: #6eb6fd !important; }
.bc-brand-color.sns-follow .twitter-button{ background-color: #7dcdf7 !important; }
.bc-brand-color.sns-follow .facebook-button{ background-color: #7c9dec !important; }
.bc-brand-color.sns-follow .hatebu-button{ background-color: #2c6ebd !important; }
.bc-brand-color.sns-follow .google-plus-button{ background-color: #dd4b39 !important; }
.bc-brand-color.sns-follow .instagram-button{ background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;}
.bc-brand-color.sns-follow .youtube-button{ background-color: #cd201f !important; }
.bc-brand-color.sns-follow .tiktok-button{ background-color: #000 !important; }
.bc-brand-color.sns-follow .flickr-button{ background-color: #111 !important; }
.bc-brand-color.sns-follow .pinterest-button{ background-color: #bd081c !important; }
.bc-brand-color.sns-follow .line-button{ background-color: #00c300 !important; }
.bc-brand-color.sns-follow .amazon-button{ background-color: #ff9900 !important; }
.bc-brand-color.sns-follow .github-button{ background-color: #4078c0 !important; }
.bc-brand-color.sns-follow .feedly-button{ background-color: #2bb24c !important; }
.bc-brand-color.sns-follow .rss-button{ background-color: #f26522 !important; }

.sns-buttons a.follow-button span::before{ font-size: 25px !important; }
.sns-buttons a.follow-button span{ line-height: 100%; }

main .author-box{
	max-width: 400px;
	margin: 0 auto;
	font-size: 80%;
}
/************************************
**　ヘッダーメニュー
************************************/
.navi-in > ul{/*メニューを中央に配置する場合は4～7行目を削除してください*/
justify-content:flex-start;
}
.navi-in>ul li {
line-height: 40px;
height: 40px;
}
.navi-in a{
font-size:15px;
font-family:"Font Awesome 5 Free"
}
#navi .navi-in a:hover {
transform: none!important;
}
.navi-in > ul .sub-menu a {
padding: 0;
}
.sub-menu{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap {
color:#333;
border-top: dotted #dddddd;
background:#fff;
padding:0 0 0 2em;
margin:0;
}
.navi-in > ul .sub-menu a:hover {
transform: none!important;
}
div#header-container {
box-shadow: none;
}
div.item-label{
font-weight:bold;
}

/*
@media screen and (min-width: 769px) {
  .page .eye-catch,
  .max-img {
    margin-left: -10px;
    margin-right: -10px;
  }
}*/
/*
@media screen and (max-width: 768px) {
  .page .eye-catch,
  .max-img {
    margin-left: -10px;
    margin-right: -10px;
  }
}
*/
.page .main {
  border: none;
}

/************************************
** ブログカード
************************************/
.blogcard-snippet,
.blogcard-footer {
  display: none;
}
.blogcard-wrap {
  transition: all .3s;
  max-width: 800px;
  margin: 2em auto;
}
.blogcard {
  border:1px solid #eaeaea !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  padding: 10px;
}
.blogcard-wrap:hover {
  background: none;
  transform: translateY(-3px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
  margin: 0;
}
.blogcard-thumbnail img {
	display: block;
}
.blogcard-title {
  color: #555;
  letter-spacing: 0.5px;
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 0 0;
  height: 45px;
  overflow: hidden;
}
.blogcard-content {
  min-height: auto;
  margin-left: 185px;
  padding-right: 6px;
}
.blogcard-label {
  top: -11px;
  left: 9px;
  padding: 3px 0.6em;
  background:#aaa;
  padding: 1px 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
}
.blogcard-content:after {
  content: "Click to Read!";
  background: #02bb80;
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  width: 180px;
  border-radius: 20px;
  font-size: 13px;
  padding: 1px 0;
  margin-top: 6px;
}

/* 画像、タイトルを縦並び */
.blogcard {
  display: flex;
  flex-direction: column;
}

/* サムネイル画像サイズ */
.blogcard figure{
  width: 100%;
}

/* タイトルの左の余白 */
.blogcard .blogcard-content {
  margin-left: 0;
}


@media screen and (max-width: 834px) {
  .blogcard-content {
    margin-left: 130px;
  }
  .blogcard-title {
    font-size:12px;
    line-height: 1.5;
    height: 35px;
    margin:0;
  }
  .blogcard-content:after {
    content: "Tap to Read!";
  }
  .blogcard-thumbnail{
    width:120px;
  }
}
@media screen and (max-width: 560px) {
  .blogcard-content:after {
    width: 120px;
    font-size: 12px;
  }
  .blogcard-title {
    margin:0;
  }
}
@media screen and (max-width: 320px) {
  .blogcard-thumbnail {
    width: 100px;
  }
  .blogcard-content {
    margin-left: 110px;
  }
  .blogcard-title {
    height: 35px;
	}
}

/************************************
** リスト
************************************/
.nomadList_num6 ul {
  font-size: 16px;/*文字サイズ*/
  margin: 0;
  counter-reset:number;
  list-style-type: none!important;
  padding: .7em 1.5em;
  background: rgba(85,168,220,.07);
  color: #323232;
}
.nomadList_num6 ul li {
  position: relative;
  padding: .25em .5em .25em 1.7em;
  line-height: 1.5em;
}
.nomadList_num6 ul li:before {
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display:inline-block;
  background: #55A8DC;
  color: #FFF;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  border-radius: 50%;
  left: 0;
  font-size: .8em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.6em;
  text-align: center;
  top: 52%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-weight: 400;
}
.nomadList_num6 ul li {
  margin-bottom: 5px;
}