@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

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

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

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

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

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

/*---------------------------------
↓ここから自己カスタマイズ↓
--------------------------------*/

/*---------------------------------
投稿一覧タイトル文字
--------------------------------*/
.entry-card-title {
	font-weight: normal !important;
} 

/*---------------------------------
複数の固定ページの日付を非表示にする
--------------------------------*/
.post-106 .date-tags,
.post-101 .date-tags,
.post-110 .date-tags,
.post-154 .date-tags {
  display: none;
}

/*---------------------------------
新着/人気/関連記事ウィジェット（ショートコードで投稿日を表示）
https://wp-cocoon.com/widget-entry-card-date-css/
--------------------------------*/
.widget-entry-card-date {
  display: block;
}

/*---------------------------------
h2の●を取る
https://wp-cocoon.com/community/blog-manages/%E8%A6%8B%E5%87%BA%E3%81%97%E3%81%AE%E7%B4%AB%E3%81%AE%E2%97%8F%E3%82%92%E5%8F%96%E3%82%8A%E3%81%9F%E3%81%84%E3%81%A7%E3%81%99/
--------------------------------*/
.article h2 {
  padding-left: 0;
}

.article h2::before {
  display: none;
}

/*---------------------------------
h2のカスタマイズ
https://0edition.net/archives/1448
--------------------------------*/
.article h2{
 border-bottom: 1px solid #f0bdc4; /* 下線 */
 color: #ff99ac; /* 文字色 */
 padding: 10px 10px 10px 70px; /* 上・右・下・左の余白 */
 position: relative;
}
.article h2:before{
 background-color: #ff6a88; /* 円1の色 */
 border-radius: 50%;
 content: '';
 display: block;
 position: absolute;
 top: 0px;
 left: 10px;
 width: 25px; /* 円1の幅 */
 height: 25px; /* 円1の高さ */
 box-shadow: 25px 10px 0px #ff6a88, /* 円2の位置・色 */
    3px 25px 0px #ff6a88; /* 円3の位置・色 */
}
.article h2:after{
 border: 4px solid #fff; /* 白抜き円 */
 border-radius: 50%;
 content: '';
 display: block;
 position: absolute;
 top: 13px;
 left: 21px;
 width: 15px; /* 白抜き円の幅 */
 height: 15px; /* 白抜き円の高さ */
}

/*---------------------------------
吹き出しのカスタマイズ
https://web-ashibi.net/archives/31368
--------------------------------*/
.sb-id-11 .speech-balloon {
  background-color: #FFFFFF; /* 吹き出しメイン部分の背景色 */
  border: 2px solid #F8E0F7; /* 吹き出しメイン部分のボーダー */
  color: #333; /* セリフの文字色 */
}
.sb-id-11 .speech-balloon::before {
  border-right: 12px solid #F8E0F7; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}
.sb-id-11 .speech-balloon::after {
  border-right: 12px solid #FFFFFF; /* 三角部分の内側（背景）の色 */
}
@media screen and (max-width: 480px){
  .sb-id-11 .speech-balloon::before { border-right: 7px solid #f4b3c2; /* スマホでの三角部分の外側 */
  }
  .sb-id-11 .speech-balloon::after { border-right: 7px solid #fdeff5; /* スマホでの三角部分の内側 */
  }
}

/*---------------------------------
吹き出しのカスタマイズ
https://web-ashibi.net/archives/31368
--------------------------------*/
.sb-id-12 .speech-balloon {
  background-color: #fff0f5; /* 吹き出しメイン部分の背景色 */
  border: 2px solid #F8E0F7; /* 吹き出しメイン部分のボーダー */
  color: #333; /* セリフの文字色 */
}
.sb-id-12 .speech-balloon::before {
  border-right: 12px solid #F8E0F7; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}
.sb-id-12 .speech-balloon::after {
  border-right: 12px solid #fff0f5; /* 三角部分の内側（背景）の色 */
}
@media screen and (max-width: 480px){
  .sb-id-12 .speech-balloon::before { border-right: 7px solid #f4b3c2; /* スマホでの三角部分の外側 */
  }
  .sb-id-12 .speech-balloon::after { border-right: 7px solid #fdeff5; /* スマホでの三角部分の内側 */
  }
}

/*---------------------------------
ピンクアコーディオンボックス
https://affirepo.com/stork-customize-accordion/
--------------------------------*/
.ac-box{
width: auto;
margin: 30px auto 5px;
}

.ac-box label{
max-width: 385px;
font-size: 16px;
font-weight: bold;
text-align: center;
background: #ffb6c1;
margin: auto;
line-height: 50px;
position: relative;
display: block;
height: 50px;
border-radius: 8px;
cursor: pointer;
color: #fff;
transition: all 0.5s;
}

.ac-box label:hover{
background: rgba( 240, 86, 137, 0.55 );
-webkit-transition: all .3s;
transition: all .3s;
}

.ac-box input{
display: none;
}

.ac-box label:after{
color: #fff;
font-family:"FontAwesome";
content:" \f078";
}

.ac-box input:checked ~ label::after {
color: #fff;
font-family:"FontAwesome";
content:" \f077";
}

.ac-box div{
height: 0px;
padding: 0px;
overflow: hidden;
opacity: 0;
transition: 0.5s;
}

.ac-box input:checked ~ div{
height: auto;
padding: 5px;
background: #eaeaea;
opacity: 1;
}

.ac-box div p{
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-align: justify;
}
.ac-small p{
margin-bottom: 0px;
}

/*---------------------------------
アコーディオンタブボックス
https://saruwakakun.com/html-css/reference/accordion
--------------------------------*/
/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 10px 0;
    padding : 13px 12px;
    color: #ffffff;
    font-weight: bold;
    background: #ffb6c1;
    cursor :pointer;
    transition: all 0.5s;
	border-radius: 10px;
}

/*アイコンを表示*/
.accbox label:before {
    content: '\f054';
    font-family: 'FontAwesome';
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#ffb6c1;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #fff5eb;
    opacity: 1;
}

.accbox .accshow p {
    margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f078';
}

/*---------------------------------
タブ横
https://copypet.jp/1027/
--------------------------------*/
.cp_tab *, .cp_tab *:before, .cp_tab *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_tab {
	margin: 1em auto;
}
.cp_tab > input[type='radio'] {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	-webkit-appearance: none;
	        appearance: none;
	display: none;
}
.cp_tab .cp_tabpanel {
	display: none;
}
.cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
.cp_tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2),
.cp_tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3),
.cp_tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4),
.cp_tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5),
.cp_tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6) {
	display: block;
}
.cp_tab > label {
	position: relative;
	display: inline-block;
	padding: 15px;
	cursor: pointer;
	border: 1px solid transparent;
	border-bottom: 0;
}
.cp_tab > label:hover,
.cp_tab > input:focus + label {
	color: #0066cc;
}
.cp_tab > input:checked + label {
	margin-bottom: -1px;
	border-color: #cccccc;
	border-bottom: 1px solid #ffffff;/*背景色と同じ*/
	border-radius: 6px 6px 0 0;
}
.cp_tab .cp_tabpanel {
	padding: 0.5em 1em;
	border-top: 1px solid #cccccc;
}
@media (max-width: 480px) {
	.cp_tab {
		width: 100%;
		font-size: 0.8em;
	}
	.cp_tab label {
		padding: 0.5em;
	}
}

/*---------------------------------
カテゴリウィジットをマウスオーバーで展開
https://xenonhyx.com/wp-catewd/
--------------------------------*/
.widget_categories ul li  a + ul {
	display:none;
}
.widget_categories ul li:hover ul {
	display:block;
}

/*---------------------------------
カテゴリウィジットカスタマイズ
https://plu-plu.net/cocoon-sidecar/
--------------------------------*/
/*サイドバーカテゴリ*/
.sidebar{
	background:transparent;
}
.widget-sidebar h3{/*サイドウィジェットタイトル*/
	background:transparent;
	font-size:.95em;/*文字サイズ*/
	border-bottom:2px solid #ffb6c1;/*下線の太さ・色*/
	padding:5px 10px 0;
	margin-bottom:0;
}
.widget_categories ul li,
.widget_archive ul li{/*カテゴリ・アーカイブ下線*/
	padding-left:10px;
	border-bottom:1px dotted  rgba(125, 125, 125, 0.2);/*下線の種類*/
}
.widget_categories ul li a,
.widget_archive ul li a{/*親カテゴリ・アーカイブの文字サイズ*/
	font-size:.95rem;
}
.widget_categories ul li a:before,
.widget_archive ul li a:before{/*親カテゴリ・アーカイブアイコン*/
	font-family:Fontawesome;
	content:"\f138";/*アイコン種類*/
	color:#FFC14D;/*アイコン色*/
	margin-right:6px;/*アイコンと文字の距離*/
}
.widget_categories ul .children li a:before{/*子カテゴリアイコン*/
	font-family:Fontawesome;
	content:"\f105";/*アイコン種類*/
	color:#FFC14D;/*アイコン色*/
	font-weight:normal;
	margin-right:6px;/*アイコンと文字の距離*/
}
.widget_categories ul .children li{
	border-bottom:none;
}	
.widget_categories ul .children li a{/*子カテゴリ*/
	padding:3px 10px;
	font-size:.85rem;/*文字サイズ*/
}
.widget_categories ul li a:hover,
.widget_archive ul li a:hover{/*カテゴリ・アーカイブhover時*/
	background:transparent;
	color:#38b48b;/*hover時の文字色*/
	margin-left:5px;/*hover時動く幅*/
}
.widget_categories ul li a .post-count,
.widget_archive ul li a  .post-count{/*カテゴリ・アーカイブ記事数*/
	border:1px solid rgba(221, 221, 221, 0.867);/*囲線*/
	border-radius:5px;
	font-size:.8em;/*数字サイズ*/
	padding:1px 10px;/*囲いの大きさ*/
}
.widget_categories ul li a:hover .post-count,
.widget_archive ul li a:hover  .post-count{/*カテゴリ・アーカイブ記事数hover時*/
	border-color:#FFC14D;/*囲線色*/
	background:#FFC14D;/*背景色*/
	color:#fff;/*文字色*/
	transition:.4s;/*変化スピード*/
}



@media screen and (max-width: 768px){
/*モバイル用*/
ul.menu-mobile{
  overflow-x: auto;
  overflow-y: hidden;
  display: flex !important;
  font-size: 9pt;
  flex-wrap: nowrap;
  justify-content: flex-start;
-webkit-overflow-scrolling: touch;
  padding: 0 1em;
  position: relative;
}
ul.menu-mobile > li{
  padding-right: 1em;
  white-space: nowrap;
}
ul.menu-mobile　.item-label{
  white-space: nowrap;
  font-size: 1px;
}
}


/************************************
** 横スライダー
https://ponhiro.com/css-slider/
************************************/
.slide-wrap{
   display:-webkit-box;
   display:-ms-flexbox;
   display: flex;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
   overflow-scrolling: touch;
   scroll-snap-type: x mandatory;
   padding:0 0 1em;
   margin:0 0 2em 0;
   scroll-behavior: smooth;
}
.slide-wrap .slide-content{
   flex: 0 0 90%;
   margin: 0 10px;
   height:100%;
}
@media screen and (max-width: 480px){
.slide-wrap .slide-content {
    flex: 0 0 88%;
    margin: 0px 5px;
    scroll-snap-align:center;
}
}

/************************************
** コピーボタン
https://ponhiro.com/copy-text-button/
************************************/
.copy-box{
    background:#fff9e3;
    padding:2em;
    width: 90%;
    margin:0 auto;
    font-size:0.9em;
}
.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%);
}

/************************************
ボックス
************************************/
.mybox{
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}
.box15 p {
    margin: 0; 
    padding: 0;
}

/************************************
グローバルメニューの記号非表示
https://unity-right.com/angledown/
************************************/
.navi-in .has-icon {
  display:none;
}

/************************************
グローバルメニュー スマホ 横スクロール
https://s41t0h.jp/cocoon-mobile-menu-scroollable/
************************************/
@media screen and (max-width: 480px){
	/* モバイルトップメニュー */
	ul.menu-mobile{
		overflow-x: auto;
		overflow-y: hidden;
		display: flex !important;
		flex-wrap: nowrap;
		font-size: 14px;
		justify-content: flex-start;
		padding: 0 1em;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}

	ul.menu-mobile > li{
		padding-right: 1em;
		white-space: nowrap;
	}
	ul.menu-mobile　.item-label{
		white-space: nowrap;
		font-size: 14px;
	}
}

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

/************************************
フロントページのサムネイルを非表示
************************************/
.front-top-page #main .eye-catch {
  display: none;
}

/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #fcecea;
	color: #928484;
}

.logo-menu-button.menu-button{
	background-color: #fcecea;
}

/**************************
 プロフ画像上の吹き出し
https://base.koishisan-diary.com/2018/09/05/cocoon-profile/
***************************/
.balloon1 {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #fff;
font-size: 16px;
background: #ff8e9d;
border-radius: 15px;
}
.balloon1:before{
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #ff8e9d;
}
.balloon1 p {
margin: 0;
padding: 0;
}

/**************************
 おすすめカード スマホ表示で画像に余白を作る
https://wp-cocoon.com/community/cocoon-theme/おすすめカードの左右の余白が出ない/
***************************/
@media screen and (max-width:834px) {
    .recommended.rcs-card-margin a:nth-of-type(2n+1) {
        margin-right: 2.5%;
    }
}









/**************************
CSSだけでスライドするタブ切り替え
https://web.monogusa-note.com/css-slide-tabs
***************************/
.tab-wrap {
	background: White;
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}

.tab-label {
	color: Gray;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.tab-label:hover {
	background: rgba(0, 191, 255,.1);
}

.tab-switch:checked + .tab-label {
	color: DeepSkyBlue;
}

.tab-label::after {
	background: DeepSkyBlue;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}

.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab-content {
	height:0;
	opacity:0;
	padding: 0 20px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab-wrap::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}

.tab-switch {
	display: none;
}







/**************************
横スクロールで画像をスライドさせる
https://01blog.org/image-horizontal-scroll/
***************************/ 
.image-horizontal-scroll{
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.box{
	display: inline-block;
	width: 90%;
	margin: 10px;
}





/**カルーセル記事タイトル文字非表示**/
.carousel-entry-card-title{
display: none;
}






/**カルーセルカテゴリラベル非表示**/
.carousel .cat-label {
	display: none;
}