@charset "utf-8";

/* ##########################################################################
fo2026 Page
########################################################################## */

/* 共通
---------------------------------------------- */

:root {
    --brand-gold: #c5a059;
    --brand-dark: #2d2926;
    --brand-bg: #fdfcf9;
}
body { font-family: 'Noto Sans JP', sans-serif; background-color: var(--brand-bg); color: var(--brand-dark); }
.font-serif { font-family: 'Noto Serif JP', serif; }
.bg-gold-light { background-color: #f7f3ec; }
.text-gold { color: var(--brand-gold); }
.bg-gold { background-color: var(--brand-gold); }

.hero-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.4)); }

@keyframes subtle-zoom {
    0% { transform: scale(1.0); }
    100% { transform: scale(1.1); }
}

/* 画像オーバーラップ用カスタムスタイル */
.overlap-group {
    position: relative;
    padding-bottom: 60px; /* 重なりのための余白を少し調整 */
}
.main-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.sub-visual {
    position: absolute;
    bottom: 0;
    width: 30%;
    aspect-ratio: 2 / 4;
    object-fit: cover;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    z-index: 10;
}
/* 左側にメイン画像がある場合、サブ画像は右下へ */
.img-left .sub-visual {
    right: -20px;
}
/* 右側にメイン画像がある場合、サブ画像は左下へ */
.img-right .sub-visual {
    left: -20px;
}

/* 個別適用
---------------------------------------------- */

.fo26 {
  background-color: #fdfcf9;
}

.fo26 .fo-step-circle {
  border-width: 2px;
  border-style: solid;
  border-color: #e5e7eb;
}

.fo26 .fo-cta-border {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.fo26 .fo-border-light {
  border: 1px solid #e5e7eb;
}

.fo26 .fo-border-b-light {
  border-bottom: 2px solid #e5e7eb;
}

.fo26 .fo-border-l-light {
  border-left: 2px solid #e5e7eb;
}

.fo26 .fo-bg-gold-light-30 {
  background-color: rgba(247, 243, 236, 0.3);
}

.fo26 .fo-border-t-gray-100 {
  border-top: 1px solid #f3f4f6;
}

.fo26 .fo-border-b-gray-100 {
  border-bottom: 1px solid #f3f4f6;
}

.fo26 .fo-btn-primary:hover {
  color: #fff;
  text-decoration: none;
}

.fo26 .fo-btn-secondary:hover {
  color: #fff;
  text-decoration: none;
}

.jp-serif {
  font-family: "Noto Serif JP", serif;
}