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

:root {
	--primary-color: 143, 187, 234;
	--secondary-color: 240, 171, 165;
	--back-color: 240, 235, 232;
	--black-color: 65, 64, 62;
	--white-color: 255, 255, 255;
	--gray-color: 221, 221, 221;
	--gray-light-color: 247, 247 ,247;
	--main-sky-color: #90d0f0;
}


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

/************************
* 薄い灰色のストライプ背景
・キャッチコピー(.tagline)
・アイキャッチ画像(.eye-catch img)
・404 NOT FOUND画像(.not-found)
・記事を読む時間の目安(.read-time)
・プロフィールボックスのSNSボタン(.author-box .sns-follow-buttons)
・CTAボックスの画像(.cta-thumb img)
************************/
.tagline, .eye-catch img, .not-found, .read-time, .author-box .sns-follow-buttons, .cta-thumb img {
	position: relative;
	background-image:linear-gradient( #90d0f0,  #ffffff);
}

/************************************
** 基本設計
************************************/
/* インナーを囲む */

.wrap {
  width: 0 auto;
  margin: 0 auto;
}

/************************************
** ヘッダー
************************************/


.tagline {
  text-align: center;
  font-size: 0px;
  margin: 0px;
}

.logo {
  text-align: center;
}

.logo-image span,
.logo-image a {
  display: inline-block;
  max-width: 100%;
}

.site-name-text-link {
  color: var(--cocoon-text-color);
  text-decoration: none;
  font-weight: normal;
  padding: 0 1em;
}
.site-name-text-link:hover {
  color: inherit;
}

.site-name-text {
  font-size: 28px;
}

.logo-text {
  padding: 20px 0 30px;
  font-size: 1em;
}

.logo-image {
  padding: 10px 0;
  font-size: inherit;
}

/************************************
** ヘッダーレイアウト
************************************/
.header-container-in.hlt-top-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
.header-container-in.hlt-top-menu .wrap {
  width: auto;
}
.header-container-in.hlt-top-menu .header {
  background-image: none;
}
.header-container-in.hlt-top-menu .logo-text {
  padding: 0;
  display: flex;
  align-items: center;
  align-content: center;
}
.header-container-in.hlt-top-menu .logo-image {
  padding: 0;
  margin: 0;
}
.header-container-in.hlt-top-menu .site-name-text-link {
  margin: 0 16px;
  display: block;
}
.header-container-in.hlt-top-menu .site-name-text {
  font-size: 22px;
  white-space: nowrap;
}
.header-container-in.hlt-top-menu .tagline {
  display: none;
}
.header-container-in.hlt-top-menu .logo-header {
  max-height: 60px;
}
.header-container-in.hlt-top-menu .logo-header .site-name {
  margin: 0;
}
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 60px;
  height: auto;
  vertical-align: middle;
}
.header-container-in.hlt-top-menu amp-img {
  max-width: 160px;
  max-height: 60px;
}
.header-container-in.hlt-top-menu amp-img img {
  height: auto;
}
.header-container-in.hlt-top-menu .navi {
  width: 100%;
}

.header-container-in.hlt-top-menu.hlt-tm-small .site-name-text-link {
  margin: 0 16px;
}
.header-container-in.hlt-top-menu.hlt-tm-small .site-name-text {
  font-size: 20px;
}
.header-container-in.hlt-top-menu.hlt-tm-small .logo-header {
  max-height: 40px;
}
.header-container-in.hlt-top-menu.hlt-tm-small .logo-header img {
  max-height: 40px;
}

.hlt-tm-right .navi-in > ul {
  justify-content: flex-end;
}

/************************************
** センターロゴ（トップメニュー）
************************************/
.header-container-in.hlt-center-logo-top-menu {
  display: flex;
  flex-direction: column-reverse;
}

.fixed-header .cl-slim .logo-header {
  max-height: 40px;
}
.fixed-header .cl-slim .logo-header img {
  max-height: 40px;
}

.hlt-tm-small .navi-in > ul li,
.cl-slim .navi-in > ul li {
  height: 40px;
  line-height: 40px;
}
.hlt-tm-small .navi-in > ul li .sub-menu ul,
.cl-slim .navi-in > ul li .sub-menu ul {
  top: -40px;
}
.hlt-tm-small .navi-in > ul li.menu-item-has-description > a > .caption-wrap,
.cl-slim .navi-in > ul li.menu-item-has-description > a > .caption-wrap {
  height: 40px;
  line-height: 16px;
}





/****************************************************************************/


/*[次のページ]の色変更*/
.pagination-next-link, .list-more-button, .comment-btn {
	position: relative;
	background: none;
	padding: 12px 22px;
	margin: 0 0px;
	box-sizing: border-box;
	text-transform: uppercase;
	background-color: #8fbbea;
	border: 2px solid rgba(var(--white-color), 1);
}

.pagination-next-link:before, .list-more-button:before, .comment-btn:before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: calc(100% + 3px);
	height: calc(100% + 3px);
	background-color: #8fbbea;
	transition: all .3s ease;
	z-index: -1;
}


#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"], #index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"], #index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"], #index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
	border-bottom: 12px solid #8fbbea;
	color: rgba(var(--black-color), 1);
	background-color: rgba(var(--white-color), 1);
	font-weight: normal;
}

/************************************
** エントリーカードの設定
************************************/
.a-wrap {
  text-decoration: none;
  display: block;
  color: var(--cocoon-text-color);
  padding: 1.5%;
  margin-bottom: 3%;
  transition: all 300ms ease-in-out 0ms;
}
.a-wrap:hover {
  background-color: #f5f8fa;
  transition: all 0.3s ease-in-out;
  color: var(--cocoon-text-color);
}

/*.card-thumb img {
  width: 100%;
}

.entry-card-thumb {
  width: 320px;
}

.related-entry-card-thumb {
  width: 160px;
}

.card-thumb img {
  width: 100%;
  height: auto;
}

.entry-card-thumb {
  width: 320px;
  height: auto;
}

.related-entry-card-thumb {
  width: 100%;
  height: auto;
}*/

.eye-catch .cat-label {
    opacity: 0; /*分類非常示*/
}

.cat-label {
  position: absolute;
  top: -41px;
  left: -40000px;
  border: 40px;
  font-size: 40px;
  /*color: var(--cocoon-white-color);*/
  background-color: rgba(240,240,240);
  padding: 0px 0px;
  max-width: 30%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-card-content {
  margin-left: 0px; /*写真(イメージの大きさ)*/
}

.entry-card-info > * { /*日付テキスト*/
  font-size: 0.7em;
  padding: 2px;
}

.e-card-meta .e-card-categorys {
  display: none;
}

.e-card-info .post-author {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.post-author-image {
  margin-right: 3px;
}
.post-author-image img {
  border-radius: 50%;
}

.e-card-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.e-card-info > span {
  margin-right: 4px;
}

.fpt-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/************************************
** グローバルメニュー
************************************/
.navi {
  background-color: var(--main-sky-color);
}
.navi .item-label,
.navi .item-description {
  display: -webkit-box;
  overflow: hidden;
	/*
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
*/
}

.navi-in .has-icon {
  position: absolute;
  right: 6px;
  top: 0;
  display: inline-block;
  opacity: 0.7;
  font-size: 11px;
}
/*フルスクリーン画面の場合*/
.navi-in > ul {
  padding: 0 0 0 0px;
  margin: 0px 0px 0px 0px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  /*サブメニュー*/
}
.navi-in > ul li {
  display: block;
  width: auto;
  padding: 0px 1em 0px 1em;
  margin: 0px 1em 0px 1em;
  height: auto;
  line-height: 50px;
  position: relative;
}

li#menu-item-8 {}
.navi-in > ul li:hover > ul {
  display: block;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap {
  line-height: 21.4285714286px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 60px;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap > div {
  width: 100%;
}
.navi-in > ul .sub-menu {
  display: none;
  position: absolute;
  margin: 0;
  min-width: 240px;
  list-style: none;
  padding: 0;
  background-color: var(--cocoon-xxx-thin-color);
  z-index: 99;
  text-align: left;
  /*サブメニューのサブメニュー*/
}
.navi-in > ul .sub-menu li {
  width: auto;
}
.navi-in > ul .sub-menu a {
  padding-left: 16px;
  padding-right: 16px;
}
.navi-in > ul .sub-menu ul {
  top: -60px;
  left: 240px;
  position: relative;
}
.navi-in a {
  position: relative;
  color: var(--cocoon-text-color);
  text-decoration: none;
  display: block;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
}
.navi-in a:hover {
  background-color: #f5f8fa;
  transition: all 0.3s ease-in-out;
  color: #8fbbea;
}

.sns-buttons a {
  align-content: center;
  align-items: center;
  background-color: #8fbbec;
  border-radius: var(--cocoon-basic-border-radius);
  display: inline-flex;
  font-size: 18px;
  justify-content: center;
  height: 45px;
  margin-bottom: 8px;
  position: relative;
  text-align: center;
  width: 32%;
  transition: all 0.3s ease-in-out;
  color: var(--cocoon-white-color);
  text-decoration: none;
}

.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.widget_block ul li a:hover {
  background-color: #90d0f040;
  transition: all 0.3s ease-in-out;
  color: var(--cocoon-text-color);
}

.navi-footer-in a:hover {
  background-color: #90d0f040;
  transition: all 0.3s ease-in-out;
  color: var(--cocoon-text-color);
}

/*カラー設定*/
:root {
	--primary-color: 143, 187, 234;
	--secondary-color: 142, 209, 252; /*元:240,171,165*(マーカー部分)*/
	--back-color: 240, 235, 232;
	--black-color: 65, 64, 62;
	--white-color: 255, 255, 255;
	--gray-color: 221, 221, 221;
	--gray-light-color: 247, 247 ,247;
}
	
//*-------------------------------*/

/*本文下タグ*/
.tag-link, .comment-reply-link {
  color: var(--cocoon-text-color);
  text-decoration: none;
  display: inline-block;
  margin-right: 5px;
  padding: 1px 5px;
  font-size: 12px;
  border: 1px solid var(--cocoon-x-pallid-text-color);
  border-radius: var(--cocoon-badge-border-radius);
  word-break: break-all;
}
.tag-link:hover, .comment-reply-link:hover {
  background-color: #C9E8F7;
  transition: all 0.3s ease-in-out;
  color: var(--cocoon-text-color);
}

//*----------------------------------

.go-to-top-button {
  border-width: 0;
  background-color: #0f0;
  color: #333;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 1;
  border-radius: 5px;
  font-size: 22px;
}
.go-to-top-button:hover {
  color: #333;
}
/*-----------------------------------------------------------------------------*/

/************************
* 穴あきメモ風ボックス
・サイドバーウィジェット(widget-sidebar)
・アピールエリアのコンテンツ(appeal-content)
************************/
.widget-sidebar, .appeal-content {
	position: relative;
	background: rgba(var(--white-color), 1);
	padding: 2em 1em 1em;
	box-shadow: 5px 5px 10px #00000030;
}

.appeal-content {
	background: rgba(var(--white-color), .9);
	box-shadow: 0 0 10px rgba(var(--white-color), 1) inset;
	color: rgba(var(--black-color), 1);
}

.widget-sidebar::before, .appeal-content::before {
	position: absolute;
	content: "";
	width: 95%;
	height: 10px;
	top: .5em;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	border-top: dotted 10px #90d0f0;
}

.appeal-title {
	display: inline;
	margin: auto auto .5em;
	font-size: 1.2em;
}

/* アイキャッチ画像 */
.eye-catch img, .not-found {
	padding: 0em;
}

/* バーの色の変更 */
.sidebar h3, .widget h2, .footer-title {
	text-align: center;
	background-color: transparent;
	box-shadow: 0 3px 0 #90d0f050;
	margin: 0 0 1em;
	font-weight: normal;
}

/************************
* ダッシュ下線
・一覧記事のタイトル(.entry-card-title)
・関連記事のタイトル(.related-entry-card-title)
・一覧ページのシェアボタン下(.sns-share-message)
・一覧ページのフォローボタン下(.sns-follow-message)
・一覧ページの関連記事下(.related-list)
************************/
/* 1px 灰色 */
.entry-card-title, .related-entry-card-title {
	border-bottom: 1px dashed rgba(var(--gray-color), 1);
}

/* 3px 背景色 */
.article-footer > .sns-share, .article-footer > .sns-follow, .related-list {
	border-bottom: 3px dashed rgba(var(--back-color), 1);
}

/************************
* 見出しのぐしゃぐしゃ線
・本文h2(.article h2)
・詳細ページの関連記事のタイトル(.related-entry-heading)
・詳細ページのコメントタイトル(.comment-titlee)
************************/
.article h2, .related-entry-heading, .comment-title,
.article h2:before, .article h2:after,
.related-entry-heading:before, .comment-title:before,
.related-entry-heading:after, .comment-title:after {
	border: solid 1px #777;
}

.article h2:before, .article h2:after,
.related-entry-heading:before, .comment-title:before,
.related-entry-heading:after, .comment-title:after{
	pointer-events: none;
}

.article h2, .related-entry-heading, .comment-title {
	position: relative;
	background: rgba(var(--back-color), 1);
	box-shadow: 0 0 1px 3px rgba(var(--back-color), 1);
	border-radius: 2em 7em 5em 7em/10em 3em 1em 1em;
}

.article h2:before, .article h2:after,
.related-entry-heading:before, .comment-title:before,
.related-entry-heading:after, .comment-title:after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.article h2:before, .related-entry-heading:before, .comment-title:before {
	transform: rotate(-.7deg);
	border-radius: 6em 6em 2em 9em/2em 8em 9em 4em;
}

.article h2:after, .related-entry-heading:after, .comment-title:after {
	transform: rotate(.7deg);
	border-radius: 10em 8em 10em 5em/5em 10em 6em 10em;
}

@media screen and (max-width: 480px) {
	.article h2 {
		padding: .6em .9em;
	}
}

/* 関連記事・コメント */
.related-entry-heading, .comment-title{
	display: block;
	padding: 1em;
}

.related-entry-heading .sub-caption:before, .comment-title .sub-caption:before {
	content: "\f105";
	font-family: Fontawesome;
	margin-right: .3em;
}


/************************
* コメント
************************/

input[type="submit"]:hover {
	border-color: rgba(var(--black-color), 1);
	background-color: #90d0f050;
}

/************************
* 検索
************************/
/* 検索結果用 */
.search .search-edit{
	width: 96%;
}

/* ブロック用 */
.wp-block-search__button {
	border: none;
	color: rgba(var(--white-color), 1);
	background: rgba(var(--white-color), 1);
	/*background: rgba(var(--primary-color), 1);*/
}

/* ウィジェット用 */
.widget_search .search-edit {
	width: 95%;
	height: 50px;
}

.search-submit {
	top: 0;
	right: 0;
	border: none;
	color: rgba(var(--white-color), 1);
	background: rgba(var(--primary-color), 1);
	width: 50px;
	height: 50px;
}

/* モバイルメニューボタン用 */
#search-menu-content .search-edit {
	border: 3px solid rgba(var(--gray-color), 1);
	background-color: rgba(var(--white-color), 1);
	width: 97%;
}


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

	.header-in {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	}
	
	.navi-in > ul {
	  padding: 0;
	  margin: 0;
	  list-style: none;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  text-align: center;
	}
}
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.header {
	  height: 10%;
	  flex-shrink: 0;
	}

	.header-in {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	}

	.navi-in > ul {
	  padding: 0;
	  margin: 0;
	  list-style: none;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  text-align: center;
	}

}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.header {
	  height: 10%;
	  flex-shrink: 0;
	}

	.header-in {
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	}
	
	.navi-in > ul {
	  padding: 0;
	  margin: 0;
	  list-style: none;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  text-align: center;
	}
}