@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
**固定フロントページのタイトルを非表示
************************************/
.home.page .entry-title{
display: none;
}

/************************************
**モバイルフロント固定ページのタイトルを非表示
************************************/
@media screen and (max-width:480px){
.home.page .entry-title{
display: none;
}
}

/************************************
**固定フロントページの投稿日を非表示
************************************/
.home.page .post-date{
display: none;
}

/************************************
**固定フロントページの更新日を非表示
************************************/
.home.page .post-update{
display: none;
}
/************************************
**固定フロントページの投稿者名を非表示
************************************/
.home.page .author-info{
display: none;
}
/************************************
**モバイルグローバルメニュー非表示
************************************/
@media screen and (max-width:480px){
.home.page #navi {
display: none
}
}

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

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

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

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

/*ブログタイトルとキャッチフレーズを左寄せ*/
.header-in .tagline {
text-align:left;
	padding-left: 10px;
}

.header-in .logo {
text-align: left;
	padding-left: 10px ;
	
}

.blogcard {
	padding: 1rem;
	color: #666;
	position: relative;
	border-color: #68d6cb !important; /* 枠線の色を変更 */
}

a.blogcard-wrap:hover{
	background-color: transparent!important;
	opacity: 0.8;
}

a.blogcard-wrap:hover img.blogcard-thumb-image{
	transform: scale(1.1);
	transition: .3s;
}

.blogcard-thumbnail {
	line-height: 0;
	margin-right: 1rem;
	overflow: hidden;
}

.blogcard-title{
	margin-bottom: .5rem;
}

.blogcard-snipet{
	font-size: 70%;
	line-height: 1.7;
	padding-right: 10%;
}

@media screen and (max-width: 480px){
	.blogcard-thumbnail{
		width: 40%;
	}
	.blogcard-snipet{
		display: none;
	}
}

.internal-blogcard-footer{
	display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}

.blogcard::before{
	content: 'あわせて読みたい'; /* タイトルの文言 */
	position: absolute;
	top: -.8rem;
	left: auto;
	font-size: 50%;
	background-color: #68d6cb; /* タイトルの背景色 */
	padding: .6em 1em;
	font-weight: bold;
	color: #fff;  /* タイトルの文字色 */
	border-radius: 2px;
}

.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #ffd242; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}
/************************************
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
a {
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}
/************************************
**ヘッダーロゴ
************************************/
@media screen and (max-width: 834px){
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
max-height:60px;/*大きなロゴ画像を使いたい方は、ここの数字を大きくしてみてください*/
}
.logo {/*ロゴ画像を中央に配置したい方は、以下3行を削除*/
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}
/************************************
**ヘッダー　モバイル表示
************************************/
@media screen and (max-width: 1023px) and (min-width: 835px){
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
}}
@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{
display:none;
}
}
@media (max-width:834px){
.header-container {
display:none;
}
img.site-logo-image{
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
.mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/
background: #fff;
}
}

@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
**固定フロントページのタイトルを非表示
************************************/
.home.page .entry-title{
display: none;
}

/************************************
**モバイルフロント固定ページのタイトルを非表示
************************************/
@media screen and (max-width:480px){
.home.page .entry-title{
display: none;
}
}

/************************************
**固定フロントページの投稿日を非表示
************************************/
.home.page .post-date{
display: none;
}

/************************************
**固定フロントページの更新日を非表示
************************************/
.home.page .post-update{
display: none;
}
/************************************
**固定フロントページの投稿者名を非表示
************************************/
.home.page .author-info{
display: none;
}
/************************************
**モバイルグローバルメニュー非表示
************************************/
@media screen and (max-width:480px){
.home.page #navi {
display: none
}
}

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

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

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

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

/*ブログタイトルとキャッチフレーズを左寄せ*/
.header-in .tagline {
text-align:left;
	padding-left: 10px;
}

.header-in .logo {
text-align: left;
	padding-left: 10px ;
	
}

.blogcard {
	padding: 1rem;
	color: #666;
	position: relative;
	border-color: #68d6cb !important; /* 枠線の色を変更 */
}

a.blogcard-wrap:hover{
	background-color: transparent!important;
	opacity: 0.8;
}

a.blogcard-wrap:hover img.blogcard-thumb-image{
	transform: scale(1.1);
	transition: .3s;
}

.blogcard-thumbnail {
	line-height: 0;
	margin-right: 1rem;
	overflow: hidden;
}

.blogcard-title{
	margin-bottom: .5rem;
}

.blogcard-snipet{
	font-size: 70%;
	line-height: 1.7;
	padding-right: 10%;
}

@media screen and (max-width: 480px){
	.blogcard-thumbnail{
		width: 40%;
	}
	.blogcard-snipet{
		display: none;
	}
}

.internal-blogcard-footer{
	display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}

.blogcard::before{
	content: 'あわせて読みたい'; /* タイトルの文言 */
	position: absolute;
	top: -.8rem;
	left: auto;
	font-size: 50%;
	background-color: #68d6cb; /* タイトルの背景色 */
	padding: .6em 1em;
	font-weight: bold;
	color: #fff;  /* タイトルの文字色 */
	border-radius: 2px;
}

.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #ffd242; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}
/************************************
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
a {
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}
/************************************
**ヘッダーロゴ
************************************/
@media screen and (max-width: 834px){
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
max-height:60px;/*大きなロゴ画像を使いたい方は、ここの数字を大きくしてみてください*/
}
.logo {/*ロゴ画像を中央に配置したい方は、以下3行を削除*/
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}
/************************************
**ヘッダー　モバイル表示
************************************/
@media screen and (max-width: 1023px) and (min-width: 835px){
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
}}
@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{
display:none;
}
}
@media (max-width:834px){
.header-container {
display:none;
}
img.site-logo-image{
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
.mobile-header-menu-buttons {/*ヘッダー背景色を変えるときはここを変更*/
background: #fff;
}
}

/* ──────────────────────
   ヒーロー（MV）背景セクション
   ────────────────────── */
.hero-background {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 300px;
  background: url('assets/images/donpapa-herotop.png') no-repeat center/cover;
}

.hero-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 1;
}

.hero-background .hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 1rem;
}
/* ────────── ヒーローセクションのオーバーレイ ────────── */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* ────────── テキスト & ボタン配置 ────────── */
.hero__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
  color: #fff;
}

/* ────────── ボタンの基本スタイル ────────── */
.hero__content .button {
  display: inline-block;
  padding: 0.75em 1.5em;
  background: #fff;
  color: #333;
  text-decoration: none;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

/* ────────── ボタンのホバー & フォーカス ────────── */
.hero__content .button:hover,
.hero__content .button:focus {
  background: #333;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}