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

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

/*-----通知エリア余白調整-----*/
.notice-area {padding:0.1em}

/*-----中央寄せ-----*/
.l-centered-container {
	text-align: center;
}

/*-----見出し装飾-----*/

.article h1 {
    background-color: #fff;
    background-image: none;
	line-height:2em;
	text-align:center;
}

@media screen and (max-width: 480px){
	.article h1 {
	line-height:1.5em;
	padding:10px 0;
}
}

.article h2 {
	font-size: 22px;
	background-color: #ebf5fc;
	color:#7e6962;
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-size: 3rem 3rem;
	border-radius: 20px;
	line-height: 2em;
}

.article h3 {
  color:#715a52;
  font-size:20px;
  border:0;
  position: relative;
  padding: 1.5rem 1rem;
}
.article h3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #a1cbed, #a1cbed 2px, transparent 3px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #ffdfd1, #a1cbed 2px, transparent 3px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.article h4 {
	color:#715a52;
	font-size:18px;
	border-top:0;
	border-bottom:2px solid #a1cbed;
}


/*-----サイドバーのタイトル装飾-----*/
.sidebar h3 {
	background-image: linear-gradient( -45deg, #fff 25%, #eeeeee 25%,#eeeeee 50%, #fff 50%, #fff 75%, #eeeeee 75%, #eeeeee );
	background-size: 5px 5px;
	font-size: 16px;
	color: #7e6962;
	padding: 10px;
	text-align:center;
}

/*-----固定ページで投稿日非表示-----*/

.page .date-tags {display:none;}
.page .author-info{display:none;}

/*-----メイン余白調整-----*/
.main {
    width: 860px;
    padding: 0 29px;
}

/*-----絞り込み検索-----*/
input[type='submit'].mysearch-submit{
    -webkit-appearance: none;
	background-color:#feecd2;
	color:#e84040;
	font-weight:bold;
    margin: 5px;
    border-radius: 30px;
}

input[type='submit'].mysearch-submit:hover{
	background-color:#f28180;
	color:#fff;
	transition: .3s;
}

.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {
    padding: 11px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 50px;
    font-size: 14px;
    width: 100%;
}


/*-----ページネーション装飾-----*/
.pagination-next-link{
	background-color:white;
	border:1.5px solid #9dcde3;
	color:#63a6f7;
	font-size:1em;
	padding:4px 0;
	margin:1.5em 0 0;
	border-radius:50px;
}

.pagination-next-link:hover{
	background-color:#c1e0f5;
	border:1.5px solid #9dcde3;
	color:white;
	font-weight:bold;
}

.pagination .current {
	background-color: #9dcde3;
	color:white;
	font-weight:bold;
}

.page-numbers{
	height:40px;
	width:40px;
	line-height:40px;
	border:1px solid #9dcde3;
	border-radius:50px;
	color:#63a6f7;
}



/*-----記事一覧タイトル-----*/
.entry-card-title, .related-entry-card-title{
	font-size:16px;
	font-weight:normal;
}

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

/*-----カテゴリーウィジェット余白調整-----*/
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a{
	padding:0;
	font-size: 14px;
}


/*-----フッターメタ非表示-----*/
.footer-meta{display:none;}


/*---お気に入りボタン---*/
.simplefavorite-button{
	font-weight:bold;
	margin:1em 0;
	padding: 8px 15px;
	border-radius: 50px;
	border:none;
}

.simplefavorites-clear{
	padding: 8px 15px;
	border-radius: 50px;
	border:none;
}

.favorite-icon{
	width: 18px;
	height: 18px;
	vertical-align: middle;
}


/*-----グローバルナビ内検索窓-----*/
.header-search {
  width: 180px !important;
}

.header-search .search-box {
  margin: 10px 0 0 0;
}

.header-search input[type="text"] {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 14px 14px 14px 14px / 50% 50% 50% 50%;
}

.header-search{
  color: #b3a19f;
}

.search-submit {
    position: absolute;
    right: 3px;
    top: calc(50% - 10px);
    font-size: 20px;
    cursor: pointer;
    border: none;
    color: #b3a19f;
    padding: 0 8px;
    background-color: rgba(255, 255, 255, 0);
}



/*-----表の枠線・背景-----*/
.wp-block-table td, .wp-block-table th{
	border:none;
	background-color:white;
}

table:not(.has-border-color) :where(th, td) {
    background-color: white;
}

/*-----飾り枠-----*/
.stripe-frame{
	background-image: linear-gradient( -45deg, #fff 25%, #eeeeee 25%,#eeeeee 50%, #fff 50%, #fff 75%, #eeeeee 75%, #eeeeee );
	background-size: 5px 5px;
	font-size: 90%;
	color: #7e6962;
	padding: 10px;
	text-align:center;
}


/*-----SNSシェアボタン丸-----*/
.sns-share-message{
font-weight: bold; 
color: #875d5b; 
}

.sns-share-buttons {
flex-wrap: nowrap; 
justify-content: center; 
}

.sns-share-buttons a {
border-radius: 50%; 
font-size: 20px; 
margin: 0 5px; 
}
#main .sns-share a {
width: 40px;
height: 40px; 
}

.sns-share.ss-high-and-low-lc a .button-caption.button-caption {
	display:none;
}
.sns-share-buttons a .button-caption {
	display: none;align-content
}

/*-----投稿日・更新日表示位置変更-----*/
.date-tags {
    text-align: right;
    margin-top: 1em;
    margin-bottom: .5em;
}

.cat-link {
	background-color:#333;
}
.tag-link, .comment-reply-link {
    color:#333;
}

/*-----ウィジェットのタイトル文字サイズ変更-----*/

.widget h2 {
    font-size: 18px;
    text-align: center;
}

/*-----カテゴリー・タグリンク-----*/
.cat-link, .tag-link{
	border-radius: 50px;
	padding: 4px 10px;
	margin-bottom:5px;
}

/*-----検索結果の検索窓非表示-----*/
#main .search-box.input-box {
  display: none;
}

/*-----マイクロバルーン角丸*/
.micro-balloon {
	border-radius: 50px;align-content
}

/*-----ソートボタン装飾-----*/
.sort-result form{display: inline-block;}
.sort-result input[type="submit"]{
  color: #aa9a85;
  padding: 0;
  margin: 0;
  box-shadow: none;
  background: none;
  border: none;
  font-size: 0.85em;
  text-decoration: underline;
  cursor: pointer;
}
.sort_current{
  font-weight: bold;
  text-decoration: none;
}

/*-----目次のカスタマイズ-----*/
.toc{
	width:100%;
	border:none;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	padding:.5em;
	font-size: 0.85em;
}

.toc-title{
	border-bottom:1.5px dashed #D7BFAF;
	margin-bottom:1em;
	line-height:2em;
}

.toc a:hover{color: #66c7ff;}
.toc li .current {/*現在位置*/
color: #333;/*文字色*/

background-color: #e4f1f5;/*背景色*/
}

/*-----目次文字サイズ-------*/
.nwa .toc {
	font-size: 16px;align-content}


/*-----表示タイル数変更-----*/

@media screen and (min-width:768px) {
	/* タイル4列 */
.ect-3-columns {
  justify-content: space-around;
}
.ect-3-columns .entry-card-wrap {
 width: 24%;
}
.ect-3-columns .entry-card-snippet {
  max-height: 4em;
  overflow: hidden;
}

.ect-3-columns .ad-area {
  width: 24%;
}
}

/*-----アイキャッチ-----*/
.wp-post-image{
	border-radius:20px;
	max-height: 300px;
    width: auto;
    display: block;
    margin: 5px auto;
}

/*-----埋め込みメディア中央寄せ-----*/
.video-container, 
.instagram-container, 
.facebook-container,
.twitter-tweet {
    margin: 30px auto;
} 

/*-----ボックスメニューカラー・表示数変更-----*/
.box-menu-icon{
  color: #9dcde3;
}

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

.box-menu{
	width: calc(100%/6);
}

/*-----インデックスページのウィジェットタイトル非表示-----*/
.widget-index-top-title{display:none;}

/******************************
シンプルブログカード
******************************/
.simple_Linkcard {
  line-height: 1;
  background-color: #ffffff;
  border: 1px solid #ddd; /*カード枠の太さ・線の形状・色*/
  border-radius: 5px;
  word-wrap: break-word;
}
.simple_Linkcard a {
  text-decoration: none; /*リンクの下線をなくす*/
}
.simple_Linkcard :hover {
  background-color:#FFFAFA; /*カードにマウスを当てた時の背景色*/
  border-radius: 5px;
}
.simple_Linkcard_title {
  font-size: 1em;
  font-weight: bold; /*タイトルを太字に*/
  line-height: 1.4;
  padding: 17px 20px 10px;  
}
.simple_Linkcard_link {
  font-size:0.65em;
  padding:0 17px 15px 20px;
  text-align: left;
}
.simple_Linkcard_link .favicon {
  margin-bottom: -4px;
}

/******************************
アイキャッチメインブログカード
******************************/
.eccard {
	width:320px;
	background-color: #ffffff;
	border: 1px solid #eeeeee;
	word-wrap: break-word;
	margin-top:10px;
	margin-right: auto;
	margin-left: auto;
	box-shadow: 0 0 5px 5px rgba(0,0,0,.025);
}
.eccard a {
	text-decoration: none;
	opacity: 1;
	transition: all 0.2s ease;
}
.eccard a:hover{
	opacity: 0.7;
}
.eccard_title {
	font-size: 0.9em;
	font-weight: bold;
	color:#333333;
	line-height: 1.4;
	padding: 0px 10px 10px;
}

/*-----アプリーチ-----*/
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}

/************************************
** コピーボタン
************************************/
.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: "コピーしました！";
}
.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%);
}

.wp-block-pre {
    position: relative; /* ボタンの配置基準にする */
}

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

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

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