@charset "utf-8";
/* CSS Document */

.alegria-box{
/* 横一列をグリッド化：各カラムの fr が元のpx比率を再現 */
.fw-nav ul{
  display:grid;
  grid-template-columns:
    279fr  /* n2  */
    110fr  /* l1  */
    160fr  /* l21 */  
    100fr  /* l22 */
    130fr  /* l3  */
    152fr  /* l4  */
    150fr  /* l5  */
    /*144fr*/  /* l6  */
    163fr  /* l7  */
    223fr  /* l8  */
    311fr; /* n1  */
  gap:0;
  padding:0;
  margin:0;
  list-style:none;
}

/* 高さをウインドウ幅に連動（1921×70の比率） */
.fw-nav { width:100%; position: sticky;top:84px;z-index: 99;}
.fw-nav ul{ grid-auto-rows: calc(70 / 1921 * 100vw); }

/* 各ピースの中身は背景画像を全面フィット */
.fw-nav a,
.fw-nav li > span{
  display:block;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%; /* 伸縮させる */
  text-indent:-9999px;
  overflow:hidden;
}

    /*いったん非表示　一旦非表示 過ごしかた*/
    .fw-nav li:nth-child(8){display: none;}
    
/* 画像指定（そのまま流用） */
.fw-nav .n2 > span{ background-image:url('https://p-c.pw/alegria/img/common/n2.png'); }
.fw-nav a.l1{ background-image:url('https://p-c.pw/alegria/img/common/l1.png'); }
.fw-nav a.l1:hover,
.fw-nav a.l1:focus-visible{ background-image:url('https://p-c.pw/alegria/img/common/l1_s2.png'); }

/*.fw-nav a.l2{ background-image:url('https://p-c.pw/alegria/img/common/l2.png'); }
.fw-nav a.l2:hover,
.fw-nav a.l2:focus-visible{ background-image:url('https://p-c.pw/alegria/img/common/l2_s2.png'); }*/
    
.fw-nav a.l21{ background-image:url('https://p-c.pw/alegria/img/common/l21.png'); }
.fw-nav a.l21:hover,
.fw-nav a.l21:focus-visible{ background-image:url('https://p-c.pw/alegria/img/common/l21_s2.png'); }
    
.fw-nav a.l22{ background-image:url('https://p-c.pw/alegria/img/common/l22.png'); }
.fw-nav a.l22:hover,
.fw-nav a.l22:focus-visible{ background-image:url('https://p-c.pw/alegria/img/common/l22_s2.png'); }
    
.fw-nav a.l3{ background-image:url('https://p-c.pw/alegria/img/common/l3.png'); }
.fw-nav a.l3:hover,
.fw-nav a.l3:focus-visible{ background-image:url('https://p-c.pw/alegria/img/common/l3_s2.png'); }

.fw-nav a.l4{ background-image:url('https://p-c.pw/alegria/img/common/l4.png'); }
.fw-nav a.l4:hover,
.fw-nav a.l4:focus-visible{ background-image:url('https://p-c.pw/alegria/img/common/l4_s2.png'); }

.fw-nav a.l5{ background-image:url('https://p-c.pw/alegria/img/common/l5.png'); }
.fw-nav a.l5:hover,
.fw-nav a.l5:focus-visible{ background-image:url('https://p-c.pw/alegria/img/common/l5_s2.png'); }


.fw-nav a.l6{ background-image:url('https://p-c.pw/alegria/img/common/l6.png'); }
.fw-nav a.l6:hover,
.fw-nav a.l6:focus-visible{ background-image:url('https://p-c.pw/alegria/img/common/l6_s2.png'); }

.fw-nav a.l7{ background-image:url('https://p-c.pw/alegria/img/common/l7.png'); }
.fw-nav a.l7:hover,
.fw-nav a.l7:focus-visible{ background-image:url('https://p-c.pw/alegria/img/common/l7_s2.png'); }

.fw-nav a.l8{ background-image:url('https://p-c.pw/alegria/img/common/l8.png'); }
.fw-nav a.l8:hover,
.fw-nav a.l8:focus-visible{ opacity: 0.8; }
/*.fw-nav .l8 > span{ background-image:url('https://p-c.pw/alegria/img/common/l8.png'); }*/
.fw-nav .n1 > span{ background-image:url('https://p-c.pw/alegria/img/common/n1.png'); }

/* ホバー画像の事前読み込み */
.fw-nav::before {
  content: "";
  position: absolute;
  width: 0; height: 0;
  background-image:
    url("img/common/l1_s2.png"),
    url("img/common/l2_s2.png"),
      url("img/common/l21_s2.png"),
      url("img/common/l22_s2.png"),
    url("img/common/l3_s2.png"),
    url("img/common/l4_s2.png"),
    url("img/common/l5_s2.png"),
    url("img/common/l6_s2.png"),
    url("img/common/l7_s2.png");
  background-size: cover; /* 適当でOK */
  visibility: hidden;
  pointer-events: none;
}

        .footer{
            background-image: url("https://p-c.pw/alegria/img/common/footer.png?2");
            aspect-ratio: 1920 / 242;
            background-size: contain;
            background-repeat: no-repeat;
        }



/*footer内*/
/* 親：2列×4行、隙間ゼロ */
.footer-btns {
    position: relative;
    top: 3.2vw;
    left: 28.2%;
    
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
width: 16%;
  max-width: 308px; /* 154px×2列（必要に応じ調整） */
  margin: 0 auto;
}

/* 各ボタン共通 */
/*.footer-btns div[class^="fn"] {
  width: 100%;
  aspect-ratio: 154 / 25;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}*/
.footer-btns a[class^="fn"] {
  display: block;
  width: 100%;
  aspect-ratio: 154 / 25;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-indent: -9999px; /* テキスト非表示（画像ボタン用） */
}
/* 各画像指定 */
.fn1 { background-image: url("https://p-c.pw/alegria/img/common/fn1.png"); }
.fn2 { background-image: url("https://p-c.pw/alegria/img/common/fn2.png"); }
.fn3 { background-image: url("https://p-c.pw/alegria/img/common/fn3.png"); }
.fn4 { background-image: url("https://p-c.pw/alegria/img/common/fn4.png"); }
.fn5 { background-image: url("https://p-c.pw/alegria/img/common/fn5.png"); }
.fn6 { background-image: url("https://p-c.pw/alegria/img/common/fn6.png"); }
.fn7 { background-image: url("https://p-c.pw/alegria/img/common/fn7.png"); }
.fn8 { background-image: url("https://p-c.pw/alegria/img/common/fn8.png"); }

 /*一旦非表示 過ごしかた*/
    .footer .footer-btns .fn6 {display: none;}
}