@charset "UTF-8";

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


/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
**固定フロントページのタイトルを非表示
************************************/
.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);
}
/* ================================
   タップ領域を48px以上に拡張（スマホ／タブレット共通）
   ================================ */
.entry-content a,
.button,
.btn-wrap a,
nav a,
.pagination a {
  display: inline-block;    /* ブロック系でpaddingを効かせる */
  padding: 12px 16px;       /* 上下12px × 左右16px ＝ 最低48px確保 */
  min-height: 48px;         /* 高さ48pxを担保 */
  line-height: 1.0;         /* テキストの縦中央寄せ */
  box-sizing: border-box;   /* padding分も含めてサイズを計算 */
}

/* 必要に応じてアイコンリンクやメニューも同様に */
.menu-toggle,
.header__icon,
.toc-toggle {
  padding: 12px;
  min-width: 48px;
  min-height: 48px;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ヘッダーを Sticky に固定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
header#header,
header.site-header {
  position: sticky;    /* スクロールにあわせて固定 */
  top: 0;              /* 画面上端にぴったり */
  left: 0;
  right: 0;
  z-index: 1000;       /* 他要素より前面に表示 */
  background: #fff;    /* 背景色を指定（透明だと下が透ける） */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 少し影を付けると見やすい */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   目次（TOC）を Sticky に固定
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Cocoon標準TOCのコンテナ例：#toc_container, .toc-container, .toc-content */
#toc_container,
.toc-container,
.toc_content,
.toc-content {
  position: sticky;    /* スクロール追従 */
  top: 80px;           /* ヘッダーの高さ＋余白分を調整 */
  z-index: 900;        /* ヘッダーの下に配置 */
  max-height: calc(100vh - 100px); /* 画面内に収まる最大高さ */
  overflow-y: auto;    /* 高さが溢れたらスクロール */
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   モバイル向けフォントサイズ・行間調整
   画面幅480px以下で適用
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media screen and (max-width: 480px) {
  /* 本文全体 */
  body,
  .entry-content {
    font-size: 18px;     /* 見やすい大きさ */
    line-height: 1.6;    /* 行間を広めに取る */
  }

  /* 見出しの行間をやや詰める */
  .entry-content h1,
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6 {
    line-height: 1.4;
  }

  /* 段落間の余白を調整 */
  .entry-content p {
    margin-bottom: 1em;
  }
}
/* モバイル時に本文を100%幅、サイドバーを非表示 */
@media screen and (max-width: 480px) {
  .main {
    width: 100% !important;
  }
  .sidebar {
    display: none !important;
  }
}
@media screen and (max-width: 480px) {
  .wrap { width: auto !important; }
}