@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 {
	--main-color: #333;
	--point-color: #ffa7a6;
}

/*top紹介*/

.top-profile{
	font-size: 25px!important;
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 500px;
	background-color: #fff;
	z-index: 100;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400; 
	font-style: normal;
}

.profile-area{
	width: 80%;
	position: relative;
	border-radius: 80px;
	margin: 100px auto 0;
}

.profile-text-area{
	display: block;
	padding: 20px 10vw;
	text-align: center;
	font-family: "Zen Kaku Gothic New", sans-serif;
   font-weight: 500;
   font-style: normal;
}

.profile-text-area p{
	font-size: 18px;
}

/*TOPh２下*/
.smb-section__subtitle{
	text-align: center;
	font-size:  14px;
	letter-spacing: 0.3rem;
	color: var(--point-color);
}

.widget_block ul li a ,.body .wp-block-group :last-child{
	padding: 0;
	margin: 0;
	font-size: 14px;
}

#post-51 h2 {
	background-color: #FAFAFA;
	padding: 0;
	margin: 0;
	font-size: 18px;
	border: none;
	color: #333;
	font-family: "Zen Kaku Gothic New", sans-serif;
   font-weight: 700;
   font-style: normal;
}

.related-entry-heading{
	margin: 0;
	font-size:  18px;
}
	
.header-in{
	margin:0 auto;
	height: 200px;
	flex-direction: column-reverse;
	background: 50% 50%;
	padding-bottom: 30px;
}

.tagline {
    text-align: center;
    font-size: 11px;
    margin: 0  1em;
	　　　height: 50px;
	  color: #333;
	  letter-spacing: 0.1em;
	  line-height: 1px;
}

	.header{
		background-size: contain;
		height:250px;   
		margin: 0 auto;
	}

.tagline {
    text-align: center;
    font-size: 11px;
    margin: 0 1em;
    height: 50px;
    color: #333;
    letter-spacing: 0.1em;
    line-height: 1px;
	font-family: "Zen Kaku Gothic New", sans-serif;
   font-weight: 500;
   font-style: normal;
}

.tagline:after {
	content: 'グッドグッズたちをご紹介するサイト';
	display: block;
	margin-top: 20px;
}

 .logo-image {
    padding: 20px 0 0 0;
	  height: 175px;
}

.site-name-text,.site-name,.site-name-text-link{
	height: 150px;
}

 h1{
	 margin: 0 !important
	 }

.navi-in ul li a{
	font-size:  15px;
	letter-spacing: .1em;
	transition: all 0.3s;
}

.navi-in ul li a :hover{
	color: #999;
	transition: all 0.3s;
}

.navi,.navi-in,.navi-in ul,.navi-in ul li,.navi-in ul li a,.caption-wrap{
	height:  auto;
	line-height: 30px;
}

.logo-header img {
    width: 140px!important;
    height: auto;
}

/*TOPページの背景消す*/
.content{
	margin-top: 0;
}

.main{
		background-color: #FAFAFA;
}

.wrap {
    width: 90%;
}

#post-51 .date-tags{
	display: none;
}

#post-51{
	max-width: none;
	margin: 0 auto;
	padding: 50px;
}

#post-51 .main{
	margin-top: -30px;
}

#post-51.article h1{
	display: none;
}

#post-51.article h2{
	letter-spacing: 0.3rem;
	text-align: center;
	padding: 50px 5px 0;
	background-color: transparent;
	font-size: 40px;
   margin-bottom: 10px;
}

@media screen and (max-width: 480px){
	.top-profile{
		padding: 20px 0 0!important;
		width:200px;
	}
	.profile-area{
		 border-radius: 30px !important;
	}
}

.new-entry-cards{
	display: flex;
}

.widget-entry-cards.card-large-image .a-wrap {
   max-width: 500px;
	transition: .3s;
	padding: 10px;
}

.widget-entry-cards.card-large-image .a-wrap:hover{
	opacity: 1;
	will-change: transform;
	transform: translateY(-5px);
}

.new-entry-cards a{
	width: 33%;
	margin: 0;
	border-radius: 10px;
}

.widget-entry-cards.card-large-image{
    padding: 0;
}

.widget-entry-cards.card-large-image figure img {
	border-radius: 10px 10px 0 0;
}

#post-51 .new-entry-card{
	padding: 0;
	box-shadow: 0 2px 6px 0px rgba(170, 170, 170, 0.15);
	border-radius: 10px;
}

#post-51 .new-entry-card-title{
	font-size:  14px;
	line-height: 20px;
	padding: 5px 10px;
	letter-spacing: 0.05em;
	font-family: "Zen Kaku Gothic New", sans-serif;
   font-weight: 700;
   font-style: normal;
}

.new-entry-card-date{
	display: block;
	padding: 10px;
	font-family: "Zen Kaku Gothic New", sans-serif;
   font-weight: 700;
   font-style: normal;
	letter-spacing: 0.1em;
}

.new-entry-card-update-date{
	display: none;
}

#post-51 .a-wrap {
		height: 100%;
	}

@media screen and (max-width: 480px){
	.new-entry-cards{
		flex-wrap: wrap;
	}
	.new-entry-cards a{
		width: 50%;
	}
	#post-51.article h2{
		font-size: 30px;
	}
}

/*TOPのボタン*/
#post-51 .wp-block-buttons{
	display: block;
	text-align: center;
}

/*TOPボタン*/
.wp-block-button__link{
	color: #333333;
	background-color: transparent;
	font-size: 15px;
	border-radius: 0;
	padding: 5px 20px;
	transition: all 0.4s;	
	font-family: "Zen Kaku Gothic New", sans-serif;
   font-weight: 500;
   font-style: normal;	
}

.wp-block-button__link:hover{
	padding: 5px 0px;
	transition: all 0.4s;
	transform: translateY(-5px);
}

#post-51 .is-layout-flex{
	display: block;
}

.wp-block-buttons .wp-block-button{
	text-align: center;
	display: block;
}

/*ハンバーガーボタン*/
.logo-menu-button a {
    text-align: left;
    width: 40px;
    margin-left: 20px;
}

/*タイトルを消す*/

.page-id-26 .entry-title{
	display: none;
}

/*cocoon設定の幅設定を消す*/

.page-id-26 .wrap{
	width: 100%;
}

.page-id-26 .main{
	margin: 0;
	padding: 0;
	border: 0;
}

.a-wrap:hover {
    background-color: transparent;
    color: var(--main-color);
}

/*共通*/
body{
	background-color: #FAFAFA;
	text-align: justify;
}

.main {
    width: 70%;
}

ul li{
	list-style: none;
}

figure{
	padding: 0!important;
	margin: 0!important;
}

a{
	text-decoration: none;
	color: #333;
	border: none;
}

a:hover{
	color: var(--main-color);
}

.content-in {
    justify-content: space-evenly;
}

/*コンテンツなどの余白を消す*/

.page-id-26 .entry-content{
	margin-top: 0;
}

.page-id-26 .content{
	margin-top: 0;
}

/*リンクボタン*/
.rakuten-link{
	border: solid 1px #555;
	text-align: center;
}

.rakuten-link a{
	color: #333;
	font-size: 16px;
	letter-spacing: 0.05em;
}

.rakuten-link:hover{
	text-align: center;
	transition: all 0.4s;
}

.rakuten-link a:hover{
		transition: all 0.4s;
}

/*サイドバー*/
main{
	padding: 30px!important;
}

.sidebar{
	padding: 15px 2rem!important;
	margin-top: 30px;
   width: 20%;
}

.sidebar h2, .sidebar h3 {
    background-color: #fff!important;
    padding: 0;
    margin: 16px 0;
    border-radius: none!important;
    font-size: 16px;
    letter-spacing: 0.05rem;
}

.cat-item,.list-item-caption{
	font-size: 14px;
}

.post-count::before{
	content: '( ';
}

.post-count::after{
	content: ' ) ';
}

.post-count,.post-count::before,.post-count::after{
	color: #B7B7B7;
}

.author-thumb{
	width: 100%!important;
}

.author-content{
	padding: 0!important;
}

.author-name{
	font-size: 14px!important;
	font-weight: lighter!important;
	margin-top: 20px;
}

.author-box p{
	font-size: 12px;
	padding-top: 20px;
	line-height: 1.5;
}

.profile-follows{
	display: none;
}

.cat-item a, .widget_archive ul li a{
	padding: 5px 0!important;
	line-height: 18px;
}

.cat-link{
	display: inline-block!important;
}

/*カテゴリー一覧ページ*/
.wp-block-categories-list{
	display: flex;
	justify-content: space-between;
	padding: 0;
}

.wp-block-categories-list .cat-item{
	border: 1px solid #333;
	padding: 10px 30px;
	width: 33%;
	text-align: center;
}

/*カテゴリーページ*/

.archive-title{
	font-size: 20px;
	padding-left: 13px;
	padding-bottom: 20px;
}

.archive-title .fa-folder-open{
	display: none;
}

/*ブログページの調整*/
.article{
	margin: 0 auto;
	background-color: #fff;
	padding: 50px 100px;
}

.entry-header h1{
	font-weight: 500;
	font-size: 25px;
	line-height: 1.5em;
	letter-spacing: 0.1rem;
	padding: 10px 0 30px;
}

.pr-text{
	font-size: 10px !important;
	color: #999;
	text-align: left;
	margin: 0!important;
}

.entry-content p{
	font-size: 14px;
	color: #666;
	margin: 20px 0;
}

.entry-content  h2{
	padding:0 ;
	font-size: 18px;
	letter-spacing: 0.05em;
	color: #fff;
	padding: 20px 20px;
	background-color : #c4c4c4;
	margin-top: 2em;
	margin-bottom: 0;
}

.entry-content h3{
	color: #555;
	border: none;
	background-color: #fff!important;	
	border-bottom: 1.5px solid #555;
	line-height: 30px;
	font-size: 18px;
	letter-spacing: 0.1em;
	font-weight: 600;
	padding: 20px 5px 10px;
}

/*LP ３カラム設定*/

.page-id-26 .column1,.page-id-26 .column2{
	width: 80%;
	margin: 0 auto;
}

/*ブログの目次*/

.toc-title {
	font-size: 1em;
   font-weight: 500;
}

.toc li {
	padding: 0 0 5px 0;
   font-weight: 500;
}

.toc li ul li{
   font-weight: 300;
	padding: 5px;
	line-height: 1em;
}

.toc li ul li:hover{
   font-weight: 500;
}

	.entry-card {
		background-color: #fff;
		border-radius: 10px;
	}

	.e-card-title {
		font-size: 15px;
		padding: 20px 15px 10px 15px;
		height: 80px;
		line-height: 1.5;
    }
	
	.entry-card-thumb {
		width: 40%;
		height: 100%;
	}

.entry-card-content {
    margin-left: 40%;
}

.entry-card-snippet {
	font-size: 14px;
	line-height: 1.3;
	padding: 0 15px;
	margin-top: 10px;
	letter-spacing: 0.01em;
}
	
	.entry-card-thumb img{
		border-radius: 10px 0 0 10px;
      height: 100%;
		width: auto;
    }
	
	.a-wrap {
    height: 200px;
	 transition: .3S;
		padding: 0;
}
	
	.a-wrap:hover {
		opacity: 1;
		will-change: transform;
		transform: translateY(-5px);
	}

.e-card-info {
    padding: 10px;
}

/*フッター*/
.footer{
	background-color: #FAFAFA;
	height: 200px;
}

.footer-in{
	height: 100%;
}

.footer-bottom{
	height: 100%;
}

.footer-bottom-logo{
	position: static;
	float: none;
	height: 100px;
}

.footer-bottom-logo .logo-footer,
.footer-bottom-logo .logo-footer a,
.footer-bottom-logo .logo-footer a span,.footer-bottom-logo .logo-footer a span img{
	height: 100px;
}

.copyright{
	font-size: 10px;
}

.footer-bottom-content{
	float: none;
	text-align: center;
	height: 100%;
}

.navi-footer-in .menu-footer{
	justify-content: center;
	padding: 30px;
}

.copyright{
	margin-top: 50px;
}

/* リンクカード */
.pb-btn{
  margin: 3em auto;
  max-width:500px;
  width:90%;
  position:relative;
}

.pb-btn p{
  margin:0 !important;
  padding:0 !important;
}

.pb-btn a{
  display:block;
  padding: 1.2rem 4rem 1.2rem 2rem;
  color:#666 !important;
  background:#fff;
  border:1px solid #555;
  font-size:15px !important;
  font-weight:500;
  position:relative;
  transition:all 0.3s;
  text-decoration:none;
}

.pb-btn .pb-btn__text{
	max-width: 90%;
	display: block;
	line-height:1.8;
	padding-bottom: 5px;
}

.pb-btn .pb-btn__label{
  background: #ffa7a6;
  color: #fff;
  display: inline-block;
  padding: 0.5em 1em !important;
  font-size: 12px !important;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position:absolute;
  top: -12px;
  left: 23px;
  z-index: 1;
}

.pb-btn .pb-btn__add{
  font-size:12px !important;
  letter-spacing:0.5px;
  margin: 7px auto 0 !important;
  max-width:90%;
  color: #ffa7a6;
  font-weight:600;
  text-align:center;
}

.pb-btn a:after{
  position: absolute;
  content: "";
  display: inline-block;
  right: 7%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #555;
  border-right: 2px solid #555;
  -webkit-transform: rotate(45deg) translateY(-50%);
  transform: rotate(45deg) translateY(-50%);
}

.pb-btn a:hover{
  transition:0.3s;
  text-decoration:none;
  opacity: 0.5;
}

p.pb-btn__note {
    font-size: 11px;
    color: #999;
	line-height: 1.3;
}


@media screen and (max-width:600px) {
  .pb-btn{
    width:90%;
  }
  .pb-btn a {
    padding: 1rem 2rem 1rem 1rem;
    font-size:14px !important;
  }
  .pb-btn .pb-btn__label{
    left:14px;
  }
  .pb-btn .pb-btn__add{
    text-align:left;
  }
}

.pb-btn .pb-btn__label-2{
  color: #ffa7a6;
  display: inline-block;
  font-size: 12px !important;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: absolute;
  top: -24px;
  left: -23px;
  z-index: 1;
  transform: rotate( -5deg);
}
.pb-btn .pb-btn__label-2:before,.pb-btn .pb-btn__label-2:after{
  display:inline-block;
}
.pb-btn .pb-btn__label-2:before{
  content:"＼";
  margin-right:3px;
}
.pb-btn .pb-btn__label-2:after{
  content:"／";
  margin-left:3px;
}







/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	/*ハンバーガー*/
	.mobile-header-menu-buttons, .mobile-menu-buttons {
			box-shadow: none;
	}	
	
	.mobile-menu-buttons .menu-button  a{
		margin: 0 0 0 20px;
	}
	
	.header {
    height: 150px;
}
	
	#navi .navi-in > .menu-mobile {
        display: none;
    }
	
	.menu-close-button {
    text-align: left;
    font-size: 1.5em;
    margin: 40px 40px 50px;
}
	
	/*TOP*/
	#post-51 {
    padding: 10px;
}
	
	.top-profile {
		padding: 20px 0 0 !important;
		width: 90vw;
		font-size: 15px !important;
		top: 20px;
}
	
	.profile-area {
    width: 100%;
    margin: 50px auto 0;
}
	.profile-text-area {
    padding: 20px 5px;
	}
	
	.pc-br{
		display: none;
	}
	
	.new-entry-cards {
    display: block;
}
	
	.new-entry-cards a {
        width: 100%;
    }
	

	/*footer*/
	.navi-footer-in .menu-footer {
		padding: 0;
		padding-top: 20px;
}
	
	.navi-footer-in  .menu-footer {
    flex-wrap: nowrap;
}
	
	    #post-51.article h2 {
        font-size: 20px;
			margin-bottom: 0;
			letter-spacing: 0.1rem;
    }
	
	.smb-section__subtitle {
    font-size: 12px;
}
	
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	main{
	padding: 0px!important;
}
	
	.article {
    padding: 20px;
}
	
.toc {
    padding: 1em 1em;
	}
	
.toc .toc-list ul, .toc .toc-list ol {
   padding-left: .3em;
}
	
	.toc li ul li {
    font-weight: 400;
    font-size: 13px;
}
	
	.entry-card {
		background-color: #fff;
		border-radius: 10px;
	}

	.e-card-title {
		font-size: 12px;
		padding: 10px 15px;
		height: 110px;
    }
	
	.entry-card-thumb {
		width: 40%;
		height: 100%;
	}
	
	.entry-card-thumb img{
		border-radius: 10px 0 0 10px;
      height: 100%;
		width: auto;
    }
	
	#post-51	
	.a-wrap {
		height: 100%;
	}
		
	.a-wrap {
    height: 110px;
		transition: .3S;
}
	
	.a-wrap:hover {
		opacity: 1;
		will-change: transform;
		transform: translateY(-5px);
	}
	
	.entry-header h1 {
		font-size: 20px;
		line-height: 1.4em;
		letter-spacing: 0.05rem;
		padding: 10px 0;
	}
	
	.entry-categories-tags {
    margin-bottom: 0;
}
	
}

/* 投稿ページ専用のスタイル */
.single-post a {
	display: block;
	margin: 0 auto;
}

.single-post img {
	width: 100%;
	max-width: 500px;
}

.eye-catch img{
	max-width: none;
}

	.related-entry-card-snippet {
    padding: 0 15px;
}

.breadcrumb a{
    display: inline;
}

.related-entry-card-thumb {
	height: 100%!important;
	width: auto;
}

.related-entry-card-thumb img{
	height: 100%!important;
	width: auto;
}

.pager-post-navi{
    flex-direction: row;
}

.next-post,.prev-post{
	display: flex!important;
}

.under-entry-content .related-entries .related-entry-heading{
	margin: 10px 0;
}

@media screen and (max-width: 480px) {
    .related-entry-card-thumb{
        display: none;
    }
	
	.e-card-title {
        height: auto;
    }
	
	.related-entry-card-title{
    padding: 25px 15px 10px 15px;
	}
	
	.recb-entry-border .related-entry-card-wrap {
    height: auto;
	}
	
	.related-entry-card-content, .entry-card-content {
    padding-bottom: 30px;
}
}

/*HOME2*/
@media screen and (max-width: 480px) {
	.news-entry-cards .popular-entry-cards {
    justify-content: normal;
    flex-direction: column!important;
    gap: 1%
}
	
	.news-entry-cards .popular-entry-cards a {
    width: 100%;
	height: auto;
}
	
}