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

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

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

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

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

/* ---- 筆で左右交互に塗る登場（v8・2026-09-29。生成元 output/HP改修/v8/patch_v8.py。マスクPNGはメディア） ---- */
.brush{position:relative;display:block;margin:0}
.brush>img{width:100%;height:auto;display:block;opacity:0}
.brush.done>img{opacity:1}
.brush .bands{position:absolute;inset:0;pointer-events:none}
.brush.done .bands{visibility:hidden}
.brush .band{position:absolute;left:0;width:100%;overflow:hidden;
  -webkit-mask:url(https://apricot-film.com/wp-content/uploads/2026/09/brush_band.png) center/100% 100% no-repeat;mask:url(https://apricot-film.com/wp-content/uploads/2026/09/brush_band.png) center/100% 100% no-repeat}
.brush .slide{position:absolute;top:0;height:100%;width:130%;will-change:transform;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.brush .slide img{position:absolute;top:0;width:76.923%;height:auto;display:block;will-change:transform}
/* 左→右：帯の左に隠れて右へ。穂先は右端 */
.brush .band.lr .slide{left:0;transform:translateX(-100%);
  -webkit-mask-image:url(https://apricot-film.com/wp-content/uploads/2026/09/brush_tip_r.png),linear-gradient(#000,#000);-webkit-mask-size:23.077% 100%,77.5% 100%;-webkit-mask-position:right center,left center;
  mask-image:url(https://apricot-film.com/wp-content/uploads/2026/09/brush_tip_r.png),linear-gradient(#000,#000);mask-size:23.077% 100%,77.5% 100%;mask-position:right center,left center}
.brush .band.lr .slide img{left:0;transform:translateX(130%)}
/* 右→左：帯の右に隠れて左へ。穂先は左端 */
.brush .band.rl .slide{left:-30%;transform:translateX(100%);
  -webkit-mask-image:url(https://apricot-film.com/wp-content/uploads/2026/09/brush_tip_l.png),linear-gradient(#000,#000);-webkit-mask-size:23.077% 100%,77.5% 100%;-webkit-mask-position:left center,right center;
  mask-image:url(https://apricot-film.com/wp-content/uploads/2026/09/brush_tip_l.png),linear-gradient(#000,#000);mask-size:23.077% 100%,77.5% 100%;mask-position:left center,right center}
.brush .band.rl .slide img{left:23.077%;transform:translateX(-130%)}
/* 動き：1本 var(--dur)、var(--gap) ずつ重ねて始める。イーズインアウト */
.brush{--dur:1.1s;--gap:.45s;--ease:cubic-bezier(.65,0,.35,1)}
.brush.on .band .slide,.brush.on .band .slide img{animation-duration:var(--dur);animation-timing-function:var(--ease);animation-fill-mode:forwards;animation-delay:var(--d)}
.brush.on .band.lr .slide{animation-name:sl-l}.brush.on .band.lr .slide img{animation-name:im-l}
.brush.on .band.rl .slide{animation-name:sl-r}.brush.on .band.rl .slide img{animation-name:im-r}
.brush .band:nth-child(1){--d:0s}.brush .band:nth-child(2){--d:calc(var(--gap)*1)}.brush .band:nth-child(3){--d:calc(var(--gap)*2)}.brush .band:nth-child(4){--d:calc(var(--gap)*3)}
@keyframes sl-l{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes im-l{from{transform:translateX(130%)}to{transform:translateX(0)}}
@keyframes sl-r{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes im-r{from{transform:translateX(-130%)}to{transform:translateX(0)}}
/* 帯の位置（4本：高さ31%、6%ずつ重ねる） */
.brush.b4 .band:nth-child(1){top:-3%;height:31%}.brush.b4 .band:nth-child(2){top:22%;height:31%}.brush.b4 .band:nth-child(3){top:47%;height:31%}.brush.b4 .band:nth-child(4){top:72%;height:31%}
.brush.b4 .band .slide img{height:322.58%}  /* 100/31 */
.brush.b4 .band:nth-child(1) .slide img{top:calc(3% / .31)}.brush.b4 .band:nth-child(2) .slide img{top:calc(-22% / .31)}.brush.b4 .band:nth-child(3) .slide img{top:calc(-47% / .31)}.brush.b4 .band:nth-child(4) .slide img{top:calc(-72% / .31)}
/* 帯の位置（3本：高さ40%、7%ずつ重ねる。小さい絵向け） */
.brush.b3{--dur:.7s;--gap:.4s}
.brush.b3 .band:nth-child(1){top:-3%;height:40%}.brush.b3 .band:nth-child(2){top:30%;height:40%}.brush.b3 .band:nth-child(3){top:63%;height:40%}
.brush.b3 .band .slide img{height:250%}  /* 100/40 */
.brush.b3 .band:nth-child(1) .slide img{top:calc(3% / .4)}.brush.b3 .band:nth-child(2) .slide img{top:calc(-30% / .4)}.brush.b3 .band:nth-child(3) .slide img{top:calc(-63% / .4)}
/* 動きを減らす設定の人には最初から表示 */
@media (prefers-reduced-motion:reduce){.brush>img{opacity:1}.brush .bands{display:none}}