/* 独自クラス名 命名ルール
１）接頭辞 xcs- ：css装飾
２）接尾辞 xjs- ：js装飾
*/

/* ------------全ページ共通------------ */
/* ---------------------------------------------------------------------- */
/* 全固定ページのタイトル（コンテンツエリア内）を非表示 */
.type-page .c-entry__header {
    display: none;
}

/* 上部の帯 */
.xcs-page-top-band {
    color: #fff;
    height: 24px;
    width: 100%;
    background: #04b3d6;
}

.xcs-page-top-band p {
    max-width: 1337px;
    padding-inline: 28px;
    margin-inline: auto;
    line-height: 24px;
    font-size: 12px;
}

@media screen and (max-width: 599px) {
    .xcs-page-top-band {
        display: none;
    }
}

/* ヘッダーのロゴ */
.c-site-branding .custom-logo {
    width: 305px;
    display: block;
}
@media screen and (max-width: 1023px) {
    .c-site-branding .custom-logo {
        margin-inline: auto;
    }
}


/* フッターのSNS QR画像の中央合わせ（クラス名はウィジェットに直接追加している） */

.xcs-fitcontent{
    width: fit-content;
    margin-inline: auto;
}

.c-sub-nav .c-navbar {
    justify-content: center;
}

.l-footer-widget-area{
    padding-bottom: 10px !important;
}


/* ------------トップページ------------ */
/* ---------------------------------------------------------------------- */
/* ファーストビジュアルの人の画像 */
.xcs-fv {
    position: absolute;
    bottom: 0;
    right: 8vw;
    z-index: 100;
}

@media screen and (max-width: 781px) {
    .xcs-fv {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}

.xcs-fv img {
    height: auto;
    width: auto;
    max-height: 80vh;
    max-width: 90vw;
}

/* カバーブロック画像：ゆっくり拡大 */
.wp-block-cover__image-background {
    transform: scale(1);
    animation: coverZoom 20s ease-out forwards;
}

@keyframes coverZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.08);
    }
}

/* カード型のリンク：xcs-topLinks */
.xcs-topLinks .smb-panels__item__body {
    padding: 0;
}

@media screen and (max-width: 781px) {
    .xcs-topLinks .xcs-fdreverse {
        flex-direction: column-reverse;
    }
    .xcs-topLinks .xcs-fdreverseP {
        text-align: start !important;
    }
}

/* ------------春日部への想い------------ */
/* ---------------------------------------------------------------------- */
/* カード型の高さを揃える */
.xcs-idea-cards .smb-items__item--free {
    height: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}




/* ------------プロフィール------------ */
/* ---------------------------------------------------------------------- */
/* プロフィール「こんな人」の背景固定 */
/* .fixed-bg {
  background-image: url("../images/fixed-bg1.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
} */


.fixed-bg {
  position: relative;
  overflow: hidden;
}

/* 背景レイヤー */
.fixed-bg::before {
  content: "";
  position: fixed; /* ここがポイント */
  inset: 0;
  background-image: url("../images/fixed-bg1.webp");
  background-size: cover;
  background-position: center;
  z-index: -1;
  transform: translateZ(0); /* iOS安定化の保険 */
}

/* fixed-bg の中身を前面に */
.fixed-bg > * {
  position: relative;
  z-index: 1;
}


.l-footer {
  border: none;
  box-shadow: none;
  position: relative;
  padding-top: 100px;

}

.l-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,     /* 上：透明 */
    rgba(255,255,255,1) 40%,  /* 中：うっすら */
    rgba(255,255,255,1) 100%    /* 下：白 */
  );

  pointer-events: none; /* クリック妨げ防止 */
}



/* プロフィール「こんな人」のトップ */
@media screen and (max-width: 639px) {
    .xcs-profile-person {
        flex-direction: column-reverse;
        padding-top: 120px !important;
    }
    .xcs-profile-personMan img{
        max-width: 60%;
    }
}




/* =========================================
   XCS Fade In
   ※縦方向のフェイドインが発火→反映での動きが速い為、独自クラスで実装
   使い方１：jsフォルダにxcs-fadein.jsをいれる
   使い方２：my-snow-monkey.phpで読み込み
   使い方３：対象要素に class="xcs-fadein"
   オプション：--xcs-の4箇所で設定（→変数で反映される）
========================================= */

.xcs-fadein {
  --xcs-distance: 24px;
  --xcs-move-duration: 1200ms;  /* 移動は長め */
  --xcs-fade-duration: 1800ms;   /* 透明度は短め */
  --xcs-delay: 800ms;

  opacity: 0;
  transform: translate3d(0, var(--xcs-distance), 0);
  transition:
    opacity var(--xcs-fade-duration) linear var(--xcs-delay),
    transform var(--xcs-move-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--xcs-delay);
  will-change: opacity, transform; /* ブラウザに対して変化を予告 */
}

.xcs-fadein.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.xcs-fadein.is-done {
  opacity: 1;
  transform: none;
  will-change: auto;
}