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

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

/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}


ol, ul {
  padding-left: 0;
}


/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}

.article p{
border:none;
background:none;
padding: 0;
	margin:0;
}

/*サイドバーの新着記事をカスタマイズ*/
.custom-recent-posts {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-recent-posts li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.custom-recent-posts li img {
    margin-right: 10px;
}

.custom-recent-posts li a {
    color: #333;
    text-decoration: none;
}

.custom-recent-posts li .post-category {
    display: block;
    font-size: 12px;
    color: #777;
    margin-top: 2px;
}

/* ヘッダー固定 */
.header-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* ヘッダーを最前面に保持 */
    background-color: #fff; /* ヘッダーの背景色（必要に応じて変更） */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 影をつけることで立体感を演出 */
    padding: 10px 0; /* 上下に10pxのパディングを追加 */
}

/* bodyに対するスタイル */
body {
    padding-top: 20px; /* ヘッダーの高さ＋余白分のパディングを設定 */
}



article h2,.entry-title{
	border-bottom:solid 1px #000;
}

.wp-block-image{
	margin:0 auto 80px!important;
}

.mr{
	text-align:right;
}

.comic_list_button{
	margin: 15px auto;  	
  	background-color: #0095f9;
  	color: #fff;
	padding: 11px;	
	display:inline-block;
}

.footer-bottom-logo{
	background-color:#fff;
	padding:10px;	
}

a {
    color: #000; /* 初期のテキスト色 */
    transition: color 0.3s ease, opacity 0.3s ease; /* 色と透明度の変化に0.3秒かける */
}

a:hover {
    color: #111; /* テキストの色 */
    opacity: 0.5; /* ホバー時にテキストの透明度を下げる */
}




/* 固定ページへのリンク装飾 */
.custom-link {
  display: flex;
  align-items: center;
  background-color: #fff; /* 背景色 */
  border: 3px solid #111; /* 枠の色と太さ */
  border-radius: 5px; /* 角の丸み */
  padding: 10px; /* 内側の余白 */
  margin-bottom: 10px; /* 下の余白 */
  text-decoration: none; /* テキストの下線をなくす */
  color: #0095f9; /* テキストの色 */
  font-weight: bold; /* テキストの太さ */
	margin-bottom:120px;
}

.custom-link-image {
  width: 100%; /* 画像の幅を親要素に合わせて100%に設定 */
  max-width: 280px; /* 最大幅を280pxに制限 */
  height: auto; /* 高さを自動で調整し、アスペクト比を保持 */
	max-height:160px;
  margin-right: 10px; /* 画像とテキストの間隔 */
  border-radius: 5px; /* 画像の角の丸み */
  object-fit: cover; /* 画像のフィット */
}


.custom-link-content {
  display: flex;
  flex-direction: column; /* 縦方向にスタック */
}

.custom-link-title {
  font-size: 16px; /* タイトルのサイズ */
  margin-bottom: 4px; /* タイトルと説明文の間隔 */
}

.custom-link-description {
  font-size: 14px; /* 説明文のサイズ */
  color: #555; /* 説明文の色 */
  font-weight: normal; /* 説明文の太さ */
}

/* ホバー時のスタイル */
.custom-link:hover {
  text-decoration: none; /* テキストの下線をなくす */ 
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* 制作ブログデザイン */
.etc-blog-list {
list-style-type: none;
}
.etc-blog-list li {
margin-bottom: 2em;
background-color: #f9f9f9;
padding: 1em;
border-radius: 5px;
}
.etc-blog-list li h2 {
margin-bottom: 0.5em;
color: #333;
	font-size:13px;
}
.pagination {
margin-top: 2em;
text-align: center;
}
.pagination a {
margin: 0 5px;
padding: 5px 10px;
background-color: #e2e2e2;
color: #333;
border-radius: 5px;
text-decoration: none;
}
.pagination a:hover {
background-color: #d4d4d4;
}

/*最新画像のみ取得 */
.specific-posts-thumbnails {
    display: flex;
    flex-wrap: wrap; /* 領域を超えたら折り返し */
    gap: 10px; /* 画像間の間隔 */
    justify-content: center; /* 中央寄せ */
    margin-bottom: 20px; /* 下部の余白 */
}

.thumbnail-wrapper {
   /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影の装飾 */
	border:solid 1px rgba(0, 0, 0, 0.1); 
    width: 100px; /* 正方形の幅 */
    height: 100px; /* 正方形の高さ */
    overflow: hidden; /* はみ出た画像を非表示にする */
    border-radius: 5px; /* 角丸のサイズ */
    display: flex; /* Flexboxで中央寄せ */
    justify-content: left /* 水平方向中央寄せ */
    align-items: center; /* 垂直方向中央寄せ */
}
.thumbnail-wrapper img {
    height: 100%; /* ここでコンテナの高さに合わせる */
    width: auto; /* 幅は自動で調整 */
    min-width: 100%; /* 最小幅をコンテナの幅に合わせる */
    object-fit: cover; /* 画像をコンテナに合わせてクロップ */
}

/* フロントページ「ここは」 */
.content-wrapper {
    display: flex;
    flex-direction: row; /* 子要素を横方向に並べる */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    max-width: 800px;
    max-height: 80px;
    margin: 10px auto 80px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.content-title,
.content-description {    
    padding-right: 20px !important; /* タイトルと説明文の間隔 */
}

.content-title {
    font-size: 16px;
    color: #0095f9;
    font-weight: bold;
}

.content-description {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

 /* イラストの画像同士の余白調整 */
.blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-image, .blocks-gallery-grid:not(.has-nested-images) .blocks-gallery-item, .wp-block-gallery:not(.has-nested-images) .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item{
	width:150px;
	flex-grow: 0;
}


/*h2*/
.article h2 {
  position: relative; /* 三角を配置するためにrelativeに設定 */
  padding: 0.5em; /* 文字周りの余白 */

  color: #fff; /* 文字色 */
  background: #111; /* 背景色 */
  border-left: solid 5px #0095f9; /* 左線（実線 太さ 色） */
  margin-bottom: 40px; /* 下の余白 */
}

.article h2:after {
  content: ''; /* 必要なので空のコンテンツ */
  position: absolute; /* 親要素に対して絶対位置 */
  right: 0; /* 右側に配置 */
  bottom: 0; /* 下側に配置 */
  border-bottom: 60px solid transparent; /* 上側のボーダー（透明） */
  border-right: 40px solid #fff; /* 右側のボーダー（背景色と同じ色） */
  width: 0; /* 幅は0に */
  height: 0; /* 高さも0に */
}


/*フロントのカラム幅調整*/
.column-wrap > div{
	width: 48%
}
/*最新年月日のフォントサイズ*/
.latest-modified-date {
    font-size: 13px;
	color:#555;
}

/*sidebar*/
#sidebar{
	padding-top:50px;
}

/*like button*//* like button */
button#sidebarLikeButton,
button#contentLikeButton {
  position: relative;
  overflow: hidden;
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  width: 100%; /* ボタン幅を親要素に合わせる */
  max-width: 300px; /* 最大幅を設定 */
  margin: 15px auto 0;
  padding: 1.5rem 2rem; /* パディングを広げる */
  font-weight: bold;
  background-image: linear-gradient(to bottom, #2d9af2 0%, #b4e12b 100%);
  border-radius: 50px; /* 角を丸く */
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);  
  transition: color 0.5s ease;
  z-index: 1; /* ボタンのテキストを前面に表示 */
  cursor: pointer; /* マウスカーソルをポインターに変更 */
}

button#sidebarLikeButton::before,
button#contentLikeButton::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom, #b4e12b 0%, #27acd9 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1; /* 疑似要素を背面に配置 */
}

button#sidebarLikeButton:hover::before,
button#contentLikeButton:hover::before {
  opacity: 1;
}

button#sidebarLikeButton:disabled,
button#contentLikeButton:disabled {
  background-image: none; /* グラデーションを無効にする */
  color: #111;
  background-color: #fff; /* 無効化時の背景色 */
  cursor: default; /* カーソルをデフォルトに */
  pointer-events: none; /* さらにクリックを無効化 */
}

#sidebarLikeButtonArea,
#contentLikeButtonArea {
  padding: 10px;
  background-color: #f9f9f9; /* 薄い灰色の背景 */
  border: 1px solid #ccc; /* 軽いボーダー */
  border-radius: 8px; /* 角を丸く */
  text-align: center; /* テキストとボタンを中央揃え */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* ソフトな影を追加 */
  margin-bottom: 20px; /* 下に余白 */
  max-width: 340px; /* 親要素の最大幅を設定 */
  margin-left: auto; /* 親要素を中央揃え */
  margin-right: auto; /* 親要素を中央揃え */
}

//thank-page
.thank-you-message {
    text-align: center;
    margin-top: 20px;
}

.thank-you-message h1 {
    color: #ffa500; /* ゴールド色 */
    margin-bottom: 10px;
}

.thank-you-message img {
    max-width: 100%; /* レスポンシブ対応 */
    height: auto;
}



.mr5{
	margin-right:5px;
}

.contact-button{
	margin:15px auto!important;
	width:100px!important;
	background-color:#0095f9!important;	color:#fff!important;
}

.contact-button:hover{	
	background-color:#000!important;
	transition: all .2s ease!important;
}

/*グロナビホバー*/
.navi-in a:hover {
background:none;
transition: all .2s ease!important;
color:#0095f9!important;	
}

#foogallery-gallery-1189
{
	text-align:left!important;
}


/*タブレット以下*/
@media (max-width: 768px) {
  .custom-link {	  
    flex-direction: column; /* 子要素を縦に並べ替え */
  }
	
	.content-wrapper{
		padding:50pximportant;
		max-height: 100px;
	}
	.content-title{
		padding:20px 0 0 0!important;
	}
	.content-description{
		padding:0 0 20px 0!important;
	}

  .custom-link-image {
    margin-right: 0; /* 右のマージンを削除 */
    margin-bottom: 10px; /* 画像とテキストの間に下マージンを追加 */
  }
	
/* bodyに対するスタイル */
body {
    padding-top: 70px; /* ヘッダーの高さ＋余白分のパディングを設定 */
}

}

.pt-cv-content-item{
		border: 1px solid var(--cocoon-basic-border-color);
	}

.pt-cv-view .pt-cv-title{
	margin:0 0 0 10px;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
	/* フロントページ「ここは」 */
.content-wrapper {
    display: flex;
    flex-direction: column; /* 子要素を横方向に並べる */   
}
	
.footer-bottom-logo{
		margin-bottom:30px;
}
	
.pt-cv-view .pt-cv-title{
	margin-left:0;
}
.pt-cv-content-item{
		margin:0 0 20px 0;
	}
}

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

/*アピールエリアの高さ設定　スマホ*/
@media (max-width: 767px){
#appeal {
	height: 70vw;
	}
		.pt-cv-content-item{
		margin:0 0 20px 0;
	}
.pt-cv-view .pt-cv-title{
	margin:0 0 0 10px;	
}
}


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



}