/* ==========================================================
   custom.css — クライアント・ページ固有スタイル
   ========================================================== */

.c-gnav__li > .c-gnav__a {
    padding-bottom: 7px !important;
}

.c-gnav .menu-item-169 a {
    background: var(--c-primary);
    border-radius: 50px;
    color: var(--c-bg) !important;
    margin-left: 20px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    width: 160px;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
}

.c-gnav .menu-item-169 a::before {
    content: "\f0e0";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--c-bg);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.3s ease;
    margin-right: 8px;
}



/* =========================================================
  MV（メインビジュアル）
========================================================= */


/* =========================================================
  TOP
========================================================= */
.gradient-pattern-bg {
  position: relative;
  z-index: 0;
  /* 背景全体を白（または親要素の背景色）にしておく */
  background-color: #ffffff; 
}

/* 擬似要素を使って背景パターンだけを独立させる */
.gradient-pattern-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* コンテンツの後ろに配置 */

  /* 1. CSSだけで4x4の斜めストライプ（#FABE00）を描画 */
  background-image: linear-gradient(
    135deg,
    #fac00081 25%,
    transparent 25%,
    transparent 50%,
    #fac00081 50%,
    #fac00081 75%,
    transparent 75%,
    transparent
  );
  /* ストライプの密度（サイズ）の調整 */
  background-size: 5px 5px; 

  /* 2. 下に行くにつれてストライプ自体を透明にするマスク */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}