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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.footer-left{
	padding:0 30px;
}
.footer-center{
	padding:0 30px;
}
.footer-right{
	padding:0 30px;
}
.author-description p{
		padding:0 30px;
		text-decoration:none;
		border-bottom:none;
}
.author-name{
		text-decoration:none;
		border-bottom:none;
}

.btn1 {
  display: inline-block;
  padding: .5em 2em;
  text-decoration: none !important;
  background: #676767;
  color: #FFF !important;
  border-bottom: solid 3px #323232;
  border-radius: 3px;
  text-decoration: none;
  margin: 15px 0;
}
.btn1:active {
  /*ボタンを押したときの動作*/
  -webkit-transform: translateY(3px);
  transform: translateY(3px);
  border-bottom: none;
}

/* 固定ページID=666 のページ全体に余白を追加 */
.page-id-666 .entry-content {
  padding: 50px 20px; /* 上下50px、左右20pxの余白 */
  box-sizing: border-box; /* パディング込みで幅を計算 */
}

/* 固定ページID=666 の本文幅を制限 */
.page-id-666 .entry-content {
  max-width: 800px;      /* 最大幅を900pxに制限 */
  margin: 0 auto;        /* 中央寄せ */
  padding: 20px;         /* 上下左右に余白を追加 */
  box-sizing: border-box; /* パディング込みで幅計算 */
}

/* 小さい画面（スマホ）では幅いっぱいに */
@media screen and (max-width: 768px) {
  .page-id-666 .entry-content {
    max-width: 100%;
    padding: 15px;
  }
}

/* ページID=666だけH2デザイン変更 */
.page-id-666 .article h2 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 旧デザインのbefore/afterを完全無効化 */
.page-id-666 .article h2:before,
.page-id-666 .article h2:after {
  all: unset; /* 全スタイル解除 */
}

/* 新しい横線デザイン */
.page-id-666 .article h2:before,
.page-id-666 .article h2:after {
  content: '';
  position: absolute;
  top: 50%;
  width: 45px;
  height: 1px;
  background-color: black;
  transform: translateY(-50%);
}

.page-id-666 .article h2:before {
  left: 0;
}

.page-id-666 .article h2:after {
  right: 0;
}

/* ページID=666だけh3デザインを変更 */
.page-id-666 .article h3 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 旧デザインのbefore/afterを完全無効化 */
.page-id-666 .article h3:before,
.page-id-666 .article h3:after {
  all: unset; /* 全スタイル解除 */
}

/* 新しい下線デザイン */
.page-id-666 .article h3 {
  position: relative;
  padding-left: 25px;
}

.page-id-666 .article h3:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px rgb(119, 195, 223);
}
.page-id-666 .article h3:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 3px rgb(119, 195, 223);
}

/* ページID=666だけ紙を挟んだような囲みボックス装飾を解除（余白は残す） */
.page-id-666 .main,
.page-id-666 .list {
  background: none !important; /* 背景色を消す */
  border: none !important;     /* 枠線を消す */
  box-shadow: none !important; /* 影を消す */
}

/* 擬似要素の紙切れ装飾を無効化 */
.page-id-666 .main:before,
.page-id-666 .main:after,
.page-id-666 .list:before,
.page-id-666 .list:after {
  content: none !important;
}

/* ページID=666だけ中央寄せ */
.page-id-666 .entry-content{
  text-align: center!important;
}
/* dannrakuを中央寄せ */
.page-id-666 .pp{
  text-align: left!important;
}
/*固定ページのシェアフォローボタン非表示*/
.page .sns-share,
.page .sns-follow {
    display: none;
}

/* 固定ページID=666 の新着リスト中央寄せ */
.page-id-666 .new-list-box {
  display: flex;
  justify-content: center; /* 横並びの中央寄せ */
  flex-wrap: wrap;         /* 折り返し対応 */
}

/* 固定ページID=666 の人気記事リスト中央寄せ */
.page-id-666 .popular-list-box {
  display: flex;
  justify-content: center; /* 横並びの中央寄せ */
  flex-wrap: wrap;         /* 折り返し対応 */
}

/* 固定ページID=666のときだけ適用 */
.page-id-666::before,
.page-id-666::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

/* 丸を入れるコンテナ */
.page-id-666::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* 丸のスタイル共通 */
.page-id-666 .floating-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,0.08) 40%, transparent 80%);
  animation: floatCircle 25s infinite ease-in-out;
}

/* アニメーション（ゆったり漂う） */
@keyframes floatCircle {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(200px,150px) scale(1.2); }
  100% { transform: translate(0,0) scale(1); }
}


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

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

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