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

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

/*googlefont Poppins*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');


.item-label,.copyright {
	font-family: 'Poppins', sans-serif;
	font-weight: 200;
}

h1,h2,h3{
	font-family: 'Poppins', sans-serif;
	font-weight: 200;
}


.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
	font-weight: normal;
}
.entry-card-title, .related-entry-card-title {font-weight: normal;}
h3.borderh3 {text-align: center;border-bottom: 1px solid #444444;border-top: 1px solid #444444;padding: 10px 0;margin: 30px 0 20px 0;}
/*ページ下部パンくずホーム非表示*/
.breadcrumb {display: none;}

a {text-decoration: none;}
a:hover {color: #999;}
.thmb-list a {color: #333;}
.blog-date {font-size: 8px;}
.thmb-list {position: relative;}
.cat-label-top {
	position: absolute;
    top: 0.3em;
    left: 0.3em;
    border: 1px solid #eee;
    font-size: 11px;
    background-color: #fff;
    padding: 1px 5px;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cat-label-top a {color: #484848;}

ul li {list-style-type: none;list-style: none;}
.header-container-in.hlt-top-menu .logo-header {max-height: 90px;padding: 10px 0!important;}


.btn-more {
    width: 13%;
    margin: 0 auto;
    text-align: center;
    padding: 9px;
    font-size: 15px;
    margin-top: 25px;
    margin-bottom: 25px;
	color: #000000;
	font-family: 'Poppins', sans-serif;
	font-weight: 200;
	border: solid 1px #000000;
}

/*投稿シェアボタンタイトル非表示*/
.article-footer .button-caption {display: none;}
.sns-share-buttons {justify-content: center;}
.sns-share-buttons a {font-size: 24px;}
.sns-share.ss-col-6 a {width: 45px;}
.bc-brand-color-white.sns-share a {border: none;}
/*投稿著者名非表示*/
.author-info{display: none;}
/*ポチップロゴ非表示*/
.pochipp-box__logo {display: none!important;}

/*固定ページdesignでブログカードのフッター削除*/
.page-id-171 .blogcard-footer {display: none;}

/* .flexBox
-------------------------------------------------- */
.flex-re {flex-direction: row-reverse;}
.flexBox {display: flex;flex-wrap: wrap;}
.flexBox li.thmb-list {width: 24%; padding: 1%;}
.flexBox li img {width: 100%;height: auto; padding-bottom: 2%;object-fit: cover; }
.flexBox li.thmb-list img {width: 100%;height: 140px; padding-bottom: 2%;object-fit: cover; }
.center-txt{margin: auto;}
.reverse {flex-direction: row-reverse; } 
.item-center {align-items: center;}
.pdglft30 {padding-left: 30px;}

@media screen and (max-width: 767px) {
	.flexBox li.thmb-list {width: 50%;}
	.PCflexBox li.thmb-list {margin-bottom: 20px;}
	.flexBox li.thmb-list img {height: 90px;}
	ul.PCflexBox,ul.flexBox { padding-left: 0!important;}
	ul.PCflexBox li,ul.flexBox li { margin-bottom: 20px;}
	.btn-more {width: 60%;}
}


/*768px以上*/
@media screen and (min-width: 768px){
	.PCflexBox {display: flex;}
	.PCflexBox li.thumb-list {width: 50%;padding:0 2%;}
	/* ■  PCナビゲーションメニュー  ■*/
#header-container {padding-left: 30px;}
ul.menu-pc{justify-content: flex-end;}
}

.footer-bottom-logo img {height: 30px;}

/*--------------------------------------------------
フェードイン
-----------------------------------------------------*/
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards;
}

.delay-1 { animation-delay: 1s; /* 表示遅延時間 */}
.delay-2 { animation-delay: 2s; /* 表示遅延時間 */}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ■  トップ メインイメージ  ■*/
.mainbox {
	background-image: url(https://sango-tree.com/wp-content/themes/cocoon-child-master/img/main-image.jpg);
	background-size: cover;
	background-position: center;
	margin-bottom: 30px;
}
.mainTextBox {
	height: 500px;
	text-align: center;
	margin: 0 auto;
	padding-top: 200px;
	color: #ffffff;
}
.concept-box {
	padding: 0 20px;
}

.frontBox {margin-bottom: 70px;}
.frontBox h3 {margin-bottom: 50px;}

/*--------------------------------------------------
上から白い幕をかける
-----------------------------------------------------*/
.overlay {
  position: relative;  
}

.overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2); /* ← 黒い透明レイヤー（0.0〜1.0） */
  z-index: 1;
}

.overlay > * {
  position: relative;
  z-index: 2;
}




/* ■  ReRoom固定ページ  ■*/
.blog-section h2 {
	background-color: transparent;
	color: #000000 !important;
	padding:0px!important;
}

/*--------------------------------------------------
Archivesウィジェット
-----------------------------------------------------*/
/* Archivesウィジェットのリストスタイルを統一 */
ul.custom-archive-list {
  list-style-type: none;
  padding-left: 0;
}

ul.custom-archive-list li {
  margin-bottom: 5px;
}

ul.custom-archive-list li a {
  text-decoration: none;
  color: #333;
  padding: 10px 0;
  display: block;
  padding-right: 4px;
  padding-left: 4px;
  transition: all 0.3s ease-in-out;
}

ul.custom-archive-list li a:hover {
  background-color: #f5f8fa;
}


/*--------------------------------------------------
モバイルフッターメニュー
-----------------------------------------------------*/
.mobile-menu-buttons .menu-button {padding: 0 10%;}
.mobile-menu-buttons {align-items: center;}
.menu-close-button {width: 10%; margin: 0 auto;padding-top: 20px;}
.menu-drawer a {padding: 5%;}


/*--------------------------------------------------
関連ブログの最後に出てくるホームアイコン非表示
-----------------------------------------------------*/
.under-entry-content .fa-home {display: none;}

/*--------------------------------------------------
固定ページの編集日付非表示
-----------------------------------------------------*/
.type-page .date-tags{display: none;}


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

/*834px以下*/
@media screen and (max-width: 834px){
	.sns-share-buttons a {font-size: 24px!important;}
	.sns-share.ss-bottom.ss-col-6 a {width: 16%;}
}

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