@charset "utf-8";
/* ==========================================================================
   RYUMA DAISE / 大勢龍蒔  ペライチ用テーマCSS
   エメラルドグリーン × ゴールド。既存ブロックの見た目だけを差し替えます。
   ペライチ管理画面 →「テーマCSS編集」→「＋追加する」で貼り付けてください。
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Shippori+Mincho+B1:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500&display=swap");

:root{
  --rd-abyss:#114832;      /* ベース背景（明るさはここで調整） */
  --rd-deep:#0d3b28;
  --rd-forest:#186349;
  --rd-jade:#5cdba7;
  --rd-gold:#c9a227;
  --rd-gold-lt:#e8cd7a;
  --rd-gold-pale:#f7ecc4;
  --rd-ivory:#f3efe4;
  --rd-smoke:rgba(243,239,228,.78);
  --rd-hair:rgba(232,205,122,.28);
  --rd-serif:'Shippori Mincho B1',"Hiragino Mincho ProN",serif;
  --rd-display:'Cormorant Garamond','Shippori Mincho B1',serif;
  --rd-gradgold:linear-gradient(115deg,#f7ecc4 0%,#e8cd7a 22%,#c9a227 48%,#f7ecc4 62%,#a67f18 85%,#e8cd7a 100%);
}

/* ---------- 1. ページ全体 ------------------------------------------------ */
body{
  background:var(--rd-abyss) !important;
  color:var(--rd-ivory) !important;
  font-family:var(--rd-serif) !important;
  line-height:2 !important;
  letter-spacing:.04em;
}

/* 各ブロックの背景を透過させ、ページ全体のグラデーションを見せる */
.pera1-section{ background-color:transparent !important; }

/* 奇数・偶数でわずかに濃淡をつけて、単調さを避ける */
.pera1-section:nth-of-type(odd){
  background-image:linear-gradient(180deg,rgba(0,0,0,.10),transparent 40%,rgba(0,0,0,.10)) !important;
}

/* ---------- 2. 見出し ---------------------------------------------------- */
.c-heading,
h1,h2,h3,h4{
  font-family:var(--rd-serif) !important;
  color:var(--rd-gold-pale) !important;
  font-weight:600 !important;
  letter-spacing:.12em !important;
  line-height:1.5 !important;
}

/* 見出しの下に金の細い罫線 */
.c-heading::after{
  content:"";
  display:block;
  width:52px;
  height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg,transparent,var(--rd-gold),transparent);
}
.u-align-left .c-heading::after,
.c-heading.u-align-left::after{ margin-left:0; }

/* 矢印付き見出しブロック */
.p-heading-arrow,
.p-heading-arrow--bg{
  background:linear-gradient(135deg,var(--rd-forest),var(--rd-deep)) !important;
  border-top:1px solid var(--rd-hair);
  border-bottom:1px solid var(--rd-hair);
}
.p-heading-arrow__inner{ color:var(--rd-gold-pale) !important; }

/* ---------- 3. 本文 ------------------------------------------------------ */
p,li,dd,dt,td,th,span,div{
  color:var(--rd-smoke);
}
p{
  font-family:var(--rd-serif) !important;
  font-size:15px !important;
  line-height:2.15 !important;
}

/* ---------- 4. 経歴カード（幼少期〜日本にて） ---------------------------- */
.p-article-img-card-text__container{
  gap:clamp(20px,4vw,48px);
}
.p-article-img-card-text__text-container-block{
  padding:clamp(22px,3vw,34px) !important;
  border:1px solid var(--rd-hair);
  border-radius:3px;
  background:linear-gradient(155deg,rgba(42,158,116,.16),rgba(8,46,29,.55)) !important;
  position:relative;
}
/* カード左上の金のカギ括弧 */
.p-article-img-card-text__text-container-block::before{
  content:"";
  position:absolute;top:0;left:0;width:26px;height:26px;
  border-top:1px solid rgba(232,205,122,.55);
  border-left:1px solid rgba(232,205,122,.55);
}
.p-article-img-card-text__text-container-block .c-heading{
  text-align:left !important;
  font-size:clamp(20px,3vw,27px) !important;
}
.p-article-img-card-text__text-container-block .c-heading::after{ margin-left:0; }

/* 画像に金の縁と余白 */
.c-img,
.p-article-img-card-text__image-container img{
  border-radius:3px;
  box-shadow:0 0 0 1px var(--rd-hair), 0 24px 60px -30px rgba(0,0,0,.9);
}

/* ---------- 5. ボタン ---------------------------------------------------- */
.c-btn,
a.c-btn,
button.c-btn{
  font-family:var(--rd-display) !important;
  letter-spacing:.16em !important;
  border-radius:999px !important;
  background:var(--rd-gradgold) !important;
  color:#08251a !important;
  border:0 !important;
  font-weight:600 !important;
  box-shadow:0 10px 30px -12px rgba(201,162,39,.6);
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1);
}
.c-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 42px -12px rgba(201,162,39,.8);
}

/* ---------- 6. 区切り・罫線 ---------------------------------------------- */
hr{
  border:0 !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,var(--rd-gold),transparent) !important;
}

/* ---------- 7. リンク ---------------------------------------------------- */
a{ color:var(--rd-gold-lt); }
a:hover{ color:var(--rd-gold-pale); }

/* ---------- 8. フォーム（お問い合わせ） ---------------------------------- */
input[type=text],input[type=email],input[type=tel],textarea,select{
  background:rgba(255,255,255,.05) !important;
  border:1px solid var(--rd-hair) !important;
  color:var(--rd-ivory) !important;
  border-radius:3px !important;
  font-family:var(--rd-serif) !important;
}
input::placeholder,textarea::placeholder{ color:rgba(243,239,228,.4) !important; }
input:focus,textarea:focus,select:focus{
  outline:none !important;
  border-color:rgba(232,205,122,.6) !important;
  box-shadow:0 0 0 3px rgba(201,162,39,.12) !important;
}
label{ color:var(--rd-gold-lt) !important; letter-spacing:.1em; }

/* ---------- 9. フッター -------------------------------------------------- */
.p-footer__inner,
.s_footer-peraichi{
  background:linear-gradient(180deg,var(--rd-deep),#0a2f1f) !important;
  border-top:1px solid var(--rd-hair);
  color:rgba(243,239,228,.5) !important;
}
.p-footer__inner *{ color:rgba(243,239,228,.5) !important; }

/* ---------- 10. スマホ調整 ----------------------------------------------- */
@media (max-width:767px){
  p{ font-size:14px !important; line-height:2.05 !important; }
  .c-heading{ letter-spacing:.08em !important; }
  .p-article-img-card-text__text-container-block{ padding:20px !important; }
}