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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*body.page {
  padding-left: 0;
  padding-right: 0;
}

.page .entry-content {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.video-container {
  max-width: none;
}
*/

/* デフォルト：スマホ用は非表示、PC用は特に何もしない（= 既定の表示） */
.only-sp { display: none; }

/* 1024px以下（スマホ・タブレット）で切り替え */
@media (max-width: 1024px) {
  .only-pc { display: none !important; }  /* スマホでは非表示（PC専用） */
  .only-sp { display: block !important; } /* スマホでは表示（SP専用） */
}


.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 1.2em 0 0.6em 0;
  border-radius: 0 !important;
  line-height: 1.4;
  font-weight: normal;
}

/* 各見出しごとのサイズ調整 */
.article h1 { font-size: 28px; }
.article h2 { font-size: 24px; }
.article h3 { font-size: 20px; }
.article h4 { font-size: 18px; }
.article h5 { font-size: 16px; }
.article h6 { font-size: 14px; }



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

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

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

/*固定ページの更新日を非表示に*/
.post-45 .date-tags {
display: none;
}

/* 横並び（PC・タブレット） */
.myrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; /* 横の間隔（お好みで） */
}

/* スマホ幅では縦並び */
@media (max-width: 781px) {
  .myrow {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important; /* 縦の間隔 */
  }
}

/* 画像ホバー：ズーム + フェード（明るさ/透明） */
figure.wp-block-image.img-mouseover{
  overflow: hidden;     /* 拡大時のはみ出し防止 */
  border-radius: 12px;  /* 好みで */
}

figure.wp-block-image.img-mouseover img{
  display: block;
  width: 100%;
  height: auto;

  transform: scale(1);
  opacity: 1;
  filter: brightness(1);

  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
  will-change: transform, opacity, filter;
}

figure.wp-block-image.img-mouseover:hover img{
  transform: scale(1.06);
  opacity: .88;
  filter: brightness(1.08);
}

/* 動きを減らしたい設定の人向け */
@media (prefers-reduced-motion: reduce){
  figure.wp-block-image.img-mouseover img{
    transition: none;
  }
}