@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/



/* ===============================
   HOME（page-id-149）余白調整
   =============================== */

/* ヘッダー直下から本文を開始 */
.page-id-149 .l-content{
  padding-top: 0 !important;
}


/* 共通：額縁は “同じ厚み＋同じ白マット” に揃える（格の統一） */
.frame-gold,
.frame-silver,
.frame-wood,
.frame-elegant,
.frame-antique-rose{
  padding:22px !important;    /* 外枠の厚みを統一 */
  border-radius:16px;
}

/* 共通：中の写真は “美術館マット” 幅を統一 */
.frame-gold img,
.frame-silver img,
.frame-wood img,
.frame-elegant img,
.frame-antique-rose img{
  background:#fff;
  padding:14px !important;    /* 白マットを統一 */
  border-radius:10px;
  /* 写真に“ガラス感”を少し */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25),
    0 6px 18px rgba(0,0,0,.22);
}


/* =========================
   0歳：王冠レベルのゴールド額縁
   ========================= */

.frame-gold{
  position: relative;
  display: inline-block;
  box-sizing: border-box;

  /* 共通統一CSSに負けるなら !important 付ける */
  padding: 26px !important;

  border-radius: 18px;
  border: 0;

  box-shadow:
    0 20px 44px rgba(0,0,0,.46),
    0 8px 18px rgba(0,0,0,.30),
    inset 0 0 0 2px rgba(255,255,255,.30),
    inset 0 0 26px rgba(255,255,255,.22);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.80) 0%,
      rgba(255,255,255,0) 24%,
      rgba(0,0,0,.20) 52%,
      rgba(255,255,255,.38) 78%,
      rgba(255,255,255,.62) 100%
    ),
    linear-gradient(
      45deg,
      #fff2c7 0%,
      #f2d88a 18%,
      #caa24a 45%,
      #8a6520 70%,
      #f0d488 100%
    );

  background-blend-mode: overlay, normal;
}

.frame-gold img{
  display: block;
  box-sizing: border-box;

  background: #fff;
  padding: 14px !important;

  border-radius: 12px;

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.10),
    0 10px 26px rgba(0,0,0,.22);
}

/* 王冠の外周“彫刻ライン” */
.frame-gold::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius: 14px;
  pointer-events:none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.85) 0%,
      rgba(255,255,255,0) 38%,
      rgba(0,0,0,.34) 56%,
      rgba(255,255,255,.60) 100%
    );

  opacity: .58;
}

/* ← これが重要：彫刻ラインが写真を汚さないように内側だけに効かせる */
.frame-gold,
.frame-gold::before{
  background-clip: padding-box;
}







/* 1歳：クロムシルバー（冷たい・工芸金属） */
.frame-silver{
  display:inline-block;
  padding:22px;               /* 厚み＝他と揃える */
  border-radius:16px;
  border:0;

  background-image:
    /* クロームの光の帯 */
    linear-gradient(
      135deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,0) 16%,
      rgba(255,255,255,.95) 30%,
      rgba(255,255,255,0) 48%,
      rgba(255,255,255,.85) 62%,
      rgba(255,255,255,0) 82%,
      rgba(255,255,255,1) 100%
    ),
    /* 金属の濃淡（冷たさ強め） */
    linear-gradient(
      45deg,
      #f2f2f2 0%,
      #bdbdbd 28%,
      #7a7a7a 55%,
      #d8d8d8 78%,
      #f6f6f6 100%
    ),
    /* 下層：青み銀 */
    linear-gradient(
      90deg,
      #f4f8ff 0%,
      #cfd7e4 35%,
      #8a93a3 60%,
      #e9eef7 100%
    );

  background-blend-mode: screen, overlay, normal;

  box-shadow:
    0 22px 40px rgba(0,0,0,.55),
    0 8px 16px rgba(0,0,0,.35),
    inset 0 0 0 3px rgba(255,255,255,.35),
    inset 0 0 18px rgba(255,255,255,.35);
}

/* 中の写真：白マット幅を統一 */
.frame-silver img{
  display:block;
  border-radius:10px;
  background:#fff;
  padding:14px;   /* ここが小さいと「格落ち」する */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.12),
    0 10px 24px rgba(0,0,0,.28);
}



/* ==========================
   2歳：木製（ナチュラル）
   ========================== */
.frame-wood{
  padding:16px;
  border-radius:12px;
  background-image:
    repeating-linear-gradient(
      45deg,
      #d6b07b 0px,
      #c79a5f 10px,
      #deb983 20px
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.25) 0%,
      rgba(0,0,0,.18) 60%,
      rgba(255,255,255,.10) 100%
    );
  background-blend-mode: overlay, normal;
  box-shadow:
    0 14px 28px rgba(0,0,0,.36),
    inset 0 0 0 2px  rgba(255,255,255,.10);
}


/* ==========================
 * 3歳：高級感（美術館の額縁）
  ========================== */

.frame-elegant{
  padding:18px;
  border-radius:14px;
  background:
    linear-gradient(135deg,#f8f1df,#d8c49b,#f3ead3),
    linear-gradient(45deg, rgba(255,255,255,.45), rgba(0,0,0,.18));
  background-blend-mode: overlay, normal;
  box-shadow:
    0 18px 36px rgba(0,0,0,.42),
    0 6px 14px rgba(0,0,0,.26),
    inset 0 0 0 2px rgba(255,255,255,.28);
}

.frame-elegant img{
  display:block;
  border-radius:10px;
  background:#fff;
  padding:12px; /* 美術館の白マット */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.10),
    0 8px 20px rgba(0,0,0,.20);
}



/* 4歳：ローズゴールド（上品・大人） */
.frame-antique-rose{
  display:inline-block;
  padding:22px;               /* 厚み＝統一 */
  border-radius:16px;
  border:0;

  background-image:
    /* しっとりした艶（派手すぎない） */
    linear-gradient(
      135deg,
      rgba(255,255,255,.35) 0%,
      rgba(255,255,255,0) 28%,
      rgba(90,40,30,.28) 58%,
      rgba(255,255,255,.12) 100%
    ),
    /* ローズの金属筋（落ち着き） */
    linear-gradient(
      45deg,
      #ffe8e3 0%,
      #e0b1a6 35%,
      #b87468 62%,
      #f2cfc8 100%
    );

  background-color:#c88b80;
  background-blend-mode: overlay, normal;

  box-shadow:
    0 22px 40px rgba(0,0,0,.50),
    0 8px 16px rgba(0,0,0,.32),
    inset 0 0 0 3px rgba(255,255,255,.25),
    inset 0 0 18px rgba(255,220,215,.28);
}

/* 中の写真：白マット統一＋柔らかい影 */
.frame-antique-rose img{
  display:block;
  border-radius:10px;
  background:#fff;
  padding:14px;  /* 統一 */
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.12),
    0 10px 22px rgba(0,0,0,.24);
}


/* ===============================
   HOME：写真がパラパラ落ちて止まる
   =============================== */
.photo-rain{
  position: relative;
  z-index: 0;
  --y: 120px; 
  width: 100%;
  height: 500px;
  overflow: hidden;
  pointer-events: none;
  margin-top: -30px;
  padding-bottom: 40px;
}


/* 写真共通 */
.photo-rain__item{
  position: absolute;
  top: 0;
  left: var(--left,50%);
  width: var(--w,220px);
  aspect-ratio: 3/4;
  margin-left: calc(var(--w,220px) * -0.5);

  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);

  opacity: 0;
  backface-visibility: hidden;
  will-change: transform, opacity;

  transform: translate3d(0,-160%,0) rotate(var(--r0,-12deg));
  animation: photo-fall var(--dur,2.6s) cubic-bezier(.22,.85,.35,1) var(--del,0s) 1 forwards;

  z-index: var(--z,1);
}

.photo-rain__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: translateZ(0);
}

/* 落ちて止まる位置：ここだけで全体を上下できる */
@keyframes photo-fall{
  0%   { transform: translate3d(var(--dx0,0px), -220%, 0) rotate(var(--r0,-12deg)); opacity:0; }
  12%  { opacity:1; }
  100% { transform: translate3d(var(--dx1,0px), var(--y,150px), 0) rotate(var(--r1,10deg)); opacity:1; }
}


/* ---- パラパラ感を作るランダム配置 ---- */

.photo-rain__item:nth-child(1)  { --left: 13%; --y:100px; --r0:-22deg; --r1: 10deg; --dx0:-28px; --dx1: 36px; --dur:2.2s; --del:0.0s; --z:3; }
.photo-rain__item:nth-child(2)  { --left: 28%; --y:125px; --r0: 16deg; --r1:-12deg; --dx0: 22px; --dx1:-18px; --dur:2.8s; --del:0.25s; --z:7; }
.photo-rain__item:nth-child(3)  { --left: 19%; --y:80px; --r0:-10deg; --r1: 18deg; --dx0:-36px; --dx1: 14px; --dur:2.4s; --del:0.55s; --z:2; }
.photo-rain__item:nth-child(4)  { --left: 48%; --y:135px; --r0: -18deg; --r1:30deg; --dx0: -18px; --dx1:26px; --dur:2.6s; --del:0.15s; --z:9; }
.photo-rain__item:nth-child(5)  { --left: 57%; --y:90px; --r0:-26deg; --r1: 12deg; --dx0:-18px; --dx1: 42px; --dur:2.3s; --del:0.85s; --z:5; }
.photo-rain__item:nth-child(6)  { --left: 72%; --y:120px; --r0: 12deg; --r1:-20deg; --dx0: 44px; --dx1:-30px; --dur:2.9s; --del:0.40s; --z:8; }
.photo-rain__item:nth-child(7)  { --left: 66%; --y:75px; --r0:-14deg; --r1: 22deg; --dx0:-12px; --dx1: 52px; --dur:2.5s; --del:1.05s; --z:4; }
.photo-rain__item:nth-child(8)  { --left: 86%; --y:130px; --r0:  8deg; --r1: 14deg; --dx0: 36px; --dx1:-48px; --dur:2.7s; --del:0.70s; --z:10; }
.photo-rain__item:nth-child(9)  { --left: 92%; --y:105px; --r0: 20deg; --r1:-24deg; --dx0:-46px; --dx1: 26px; --dur:3.1s; --del:1.20s; --z:1; }
.photo-rain__item:nth-child(10) { --left: 38%; --y:85px; --r0: -6deg; --r1:  6deg; --dx0: 18px; --dx1:-10px; --dur:2.1s; --del:1.45s; --z:6; }



/* ===============================
   額縁：SWELL/Gutenbergの固定幅を潰して統一
   （frame-silver / frame-elegant / frame-antique-rose など全部）
   =============================== */

/* まず figure の固定幅・縮み方を強制上書き */
.wp-block-image.frame-gold,
.wp-block-image.frame-silver,
.wp-block-image.frame-wood,
.wp-block-image.frame-elegant,
.wp-block-image.frame-antique-rose{
  display:block !important;
  width:100% !important;         /* ← ここが本丸 */
  max-width:100% !important;
  box-sizing:border-box !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* figure に style="width:300px" が付いてても潰す（念のため） */
.wp-block-image.frame-gold[style],
.wp-block-image.frame-silver[style],
.wp-block-image.frame-wood[style],
.wp-block-image.frame-elegant[style],
.wp-block-image.frame-antique-rose[style]{
  width:100% !important;
  max-width:100% !important;
}

/* 中の画像も「属性の300×200」に負けないよう 100% */
.wp-block-image.frame-gold img,
.wp-block-image.frame-silver img,
.wp-block-image.frame-wood img,
.wp-block-image.frame-elegant img,
.wp-block-image.frame-antique-rose img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* タブレット：枠と白マットを薄く */
@media (min-width:769px) and (max-width:1024px){
  .wp-block-image.frame-gold,
  .wp-block-image.frame-silver,
  .wp-block-image.frame-wood,
  .wp-block-image.frame-elegant,
  .wp-block-image.frame-antique-rose{
    padding:16px !important;
    max-width:92vw !important;
  }
  .wp-block-image.frame-gold img,
  .wp-block-image.frame-silver img,
  .wp-block-image.frame-wood img,
  .wp-block-image.frame-elegant img,
  .wp-block-image.frame-antique-rose img{
    padding:12px !important;
  }
}

/* スマホ：さらに薄く（縦間延び防止） */
@media (max-width:768px){
  .wp-block-image.frame-gold,
  .wp-block-image.frame-silver,
  .wp-block-image.frame-wood,
  .wp-block-image.frame-elegant,
  .wp-block-image.frame-antique-rose{
    padding:14px !important;
    max-width:94vw !important;
  }
  .wp-block-image.frame-gold img,
  .wp-block-image.frame-silver img,
  .wp-block-image.frame-wood img,
  .wp-block-image.frame-elegant img,
  .wp-block-image.frame-antique-rose img{
    padding:10px !important;
  }
}