@charset "utf-8";

/* =====================================================================
   config.css
   全ページ共通の基本リセット・ユーティリティ・玉虫色グラデ背景
   ※ フォント・行間・カラーは pc.css / sp.css で管理
===================================================================== */


/* =====================================
   RESET
===================================== */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  border-style: none;
}

li { list-style: none; }
a  { text-decoration: none; }

a:hover {
  animation: hover 0.5s ease forwards;
}


/* =====================================
   LAYOUT
===================================== */
.wrap {
  position: relative;
  z-index: 2;
  overflow-x: hidden;
}


/* =====================================
   TEXT UTILITIES
===================================== */
.b   { font-weight: bold; }
.fl  { font-size: 120%; }


/* =====================================
   FORM
===================================== */
input,
select,
textarea,
button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  box-shadow: none;
  border: #ddd 1px solid;
}

input:focus,
textarea:focus,
button:focus {
  border: #000 1px solid;
}

input[type="checkbox"],
input[type="radio"] {
  background: #fff;
  padding: 5px;
  border-radius: 100%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: #464646;
  border: #464646 1px solid;
}

::placeholder {
  color: #ddd;
}

select {
  background: #fff url(../img/select.svg) no-repeat;
  background-size: 10px 7px;
  background-position: right 15px center;
  position: relative;
  width: 100%;
  padding: 15px;
}


/* =====================================================================
   玉虫色グラデ背景（水色・黄緑・白が漂う）
   全デバイス共通・固定レイヤー
   z-index: iri-bg(1) < wrap(2)
===================================================================== */
.iri-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  background: #ffffff;
}

.iri-group {
  position: absolute;
  inset: 0;
  transition: opacity 1.1s ease;
}
.iri-group--earth { opacity: 0; }
.iri-bg.is-earth .iri-group--base  { opacity: 0; }
.iri-bg.is-earth .iri-group--earth { opacity: 1; }

.iri-layer {
  position: absolute;
  inset: -25%;
  will-change: transform, opacity;
}

/* レイヤー1：水色・黄緑を主体に */
.iri-layer--1 {
  background:
    radial-gradient(circle at 20% 25%, rgba(0,122,191,0.13), transparent 34%),
    radial-gradient(circle at 80% 20%, rgba(120,185,35,0.07), transparent 26%),
    radial-gradient(circle at 68% 70%, rgba(0,122,191,0.10), transparent 34%),
    radial-gradient(circle at 32% 82%, rgba(150,190,160,0.09), transparent 32%);
  filter: blur(58px);
  animation: iriDrift1 16s ease-in-out infinite alternate;
}

/* レイヤー2：黄緑・黄色・淡水色 */
.iri-layer--2 {
  background:
    radial-gradient(circle at 72% 38%, rgba(125,190,40,0.07), transparent 26%),
    radial-gradient(circle at 24% 58%, rgba(0,122,191,0.09), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(220,205,110,0.09), transparent 30%);
  filter: blur(68px);
  animation: iriDrift2 22s ease-in-out infinite alternate;
}

/* レイヤー3：ランダムに現れる光彩（パルスで明滅・移動） */
.iri-layer--3 {
  background:
    radial-gradient(circle at 50% 40%, rgba(120,200,230,0.18), transparent 24%),
    radial-gradient(circle at 15% 65%, rgba(190,225,120,0.14), transparent 22%),
    radial-gradient(circle at 88% 30%, rgba(235,220,140,0.16), transparent 22%);
  filter: blur(50px);
  opacity: 0;
  animation:
    iriDrift3 14s ease-in-out infinite alternate,
    iriPulse3 11s ease-in-out infinite;
}

/* =====================================================================
   玉虫色グラデ背景（アースカラー版：ブラウン・グリーン主体）
   Adventures Islands（#koyaruzawa）セクション用
   .iri-bg に is-earth が付くとベース層と入れ替わる
===================================================================== */

/* アース層1：ブラウン主体 */
.iri-layer-earth--1 {
  position: absolute;
  inset: -25%;
  will-change: transform, opacity;
  background:
    radial-gradient(circle at 20% 25%, rgba(101,67,33,0.14), transparent 34%),
    radial-gradient(circle at 80% 20%, rgba(85,107,47,0.10), transparent 26%),
    radial-gradient(circle at 68% 70%, rgba(139,90,43,0.12), transparent 34%),
    radial-gradient(circle at 32% 82%, rgba(107,142,35,0.10), transparent 32%);
  filter: blur(58px);
  animation: iriDrift1 16s ease-in-out infinite alternate;
}

/* アース層2：グリーン・カーキ主体 */
.iri-layer-earth--2 {
  position: absolute;
  inset: -25%;
  will-change: transform, opacity;
  background:
    radial-gradient(circle at 72% 38%, rgba(107,142,35,0.09), transparent 26%),
    radial-gradient(circle at 24% 58%, rgba(101,67,33,0.10), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(184,155,92,0.10), transparent 30%);
  filter: blur(68px);
  animation: iriDrift2 22s ease-in-out infinite alternate;
}

/* アース層3：ランダムに現れる光彩（明るいブラウン・オリーブ） */
.iri-layer-earth--3 {
  position: absolute;
  inset: -25%;
  will-change: transform, opacity;
  background:
    radial-gradient(circle at 50% 40%, rgba(139,110,60,0.20), transparent 24%),
    radial-gradient(circle at 15% 65%, rgba(85,120,60,0.17), transparent 22%),
    radial-gradient(circle at 88% 30%, rgba(168,138,76,0.17), transparent 22%);
  filter: blur(50px);
  opacity: 0;
  animation:
    iriDrift3 14s ease-in-out infinite alternate,
    iriPulse3 11s ease-in-out infinite;
}

@keyframes iriDrift1 {
  0%   { transform: translate(0, 0)       rotate(0deg)   scale(1);    }
  50%  { transform: translate(12%, -9%)   rotate(16deg)  scale(1.26); }
  100% { transform: translate(-9%, 12%)   rotate(-13deg) scale(1.12); }
}
@keyframes iriDrift2 {
  0%   { transform: translate(0, 0)       rotate(0deg)   scale(1.08); }
  50%  { transform: translate(-12%, 9%)   rotate(-15deg) scale(1.0);  }
  100% { transform: translate(11%, -12%)  rotate(13deg)  scale(1.22); }
}
@keyframes iriDrift3 {
  0%   { transform: translate(-8%, 8%)    rotate(-9deg)  scale(0.9);  }
  50%  { transform: translate(14%, -12%)  rotate(14deg)  scale(1.30); }
  100% { transform: translate(-12%, 14%)  rotate(-16deg) scale(1.08); }
}
/* ランダムに光彩が「現れては消える」パルス */
@keyframes iriPulse3 {
  0%   { opacity: 0.18; }
  18%  { opacity: 0.75; }
  34%  { opacity: 0.32; }
  52%  { opacity: 0.72; }
  68%  { opacity: 0.35; }
  84%  { opacity: 0.65; }
  100% { opacity: 0.18; }
}

/* SPでは光の玉が大きすぎてベタ塗りに見えやすいので少し抑える */
@media (max-width: 767px) {
  .iri-layer--1, .iri-layer-earth--1 { filter: blur(44px); }
  .iri-layer--2, .iri-layer-earth--2 { filter: blur(50px); }
  .iri-layer--3, .iri-layer-earth--3 { filter: blur(40px); }
}

@media (prefers-reduced-motion: reduce) {
  .iri-layer--1, .iri-layer--2, .iri-layer--3,
  .iri-layer-earth--1, .iri-layer-earth--2, .iri-layer-earth--3 { animation: none; }
  .iri-layer--3, .iri-layer-earth--3 { opacity: 0.6; }
  .iri-group { transition: none; }
}


/* =====================================================================
   改行ヘルパー
   .sp-br = SP（〜767px）でだけ表示される改行
   .pc-br = 広い PC（1000px〜）でだけ表示される改行
            ※ 768〜999px の中間 PC 帯では非表示
              → テキストの折り返しを自然なフロー任せにし、
                狭い PC でのレイアウト破綻を防ぐ
===================================================================== */
.pc-br { display: none; }
.sp-br { display: inline; }

@media (min-width: 768px) {
  .sp-br { display: none; }
}
@media (min-width: 1000px) {
  .pc-br { display: inline; }
}