﻿/* -------------------------------------------------------------
   新トップページ用　2026/01/24
   ------------------------------------------------------------- */
/* -----------------------------------
   ページ内リンクの固定ヘッダー分ずれ回避
   ----------------------------------- */
section.anchor {
    padding-top: 50px;
    margin-top:-50px;
}


/* -------------------------------------------------------------
   スライド（メインイメージ）
   ------------------------------------------------------------- */
/*スライドが一瞬縦に並ぶのを防ぐ*/
.slider li {
  display: none; /*読み込み時は非表示*/
}
.bx-viewport .slider li {
  display: block !important; /*JSが読み込まれたら表示*/
}


/* -------------------------------------------------------------
   イメージ画像をコンテナとする（コンテナ内にリンクを配置のため）
   ------------------------------------------------------------- */
/* コンテナを相対位置の基準にする */
.image-link-wrapper {
  position: relative;
  width: 100%;
  line-height: 0; /* 画像下の不要な隙間を消す */
}

/* 画像をコンテナ幅いっぱいに表示 */
.responsive-img {
  width: 100%;
  height: auto;
  display: block;
}


/* -------------------------------------------------------------
   クーポン案内の画像コンテナ内のリンク
   ------------------------------------------------------------- */
/* リンクを画像の上に絶対配置 */
#coupon_link {
  position: absolute;
  /* 上下左右から任意%の位置に配置 */
  top: 10%;
  bottom: 10%;
  left: 2%;
  right: 2%;
  display: block;
  z-index: 10;
}


/* -------------------------------------------------------------
   クーポンボタンの画像コンテナ内のリンク
   ------------------------------------------------------------- */
/* リンクを画像の上に絶対配置 */
#coupon_btn_link {
  position: absolute;
  /* 上下左右から任意%の位置に配置 */
  top: 11%;
  bottom: 30%;
  left: 8%;
  right: 8%;
  display: block;
  z-index: 10;
}


/* -------------------------------------------------------------
   メニューボタンの画像コンテナ内のリンク
   ------------------------------------------------------------- */
/* リンクを画像の上に絶対配置 */
#menu_btn_link {
  position: absolute;
  /* 上下左右から任意%の位置に配置 */
  top: 4.5%;
  bottom: 4.5%;
  left: 9%;
  right: 9%;
  display: block;
  z-index: 10;
}


/* -------------------------------------------------------------
   末尾リンクボタンの画像コンテナ内のリンク
   ------------------------------------------------------------- */
/* リンクを画像の上に絶対配置 */
#end_btn_link {
  position: absolute;
  /* 上下左右から任意%の位置に配置 */
  top: 25%;
  bottom: 45%;
  left: 8%;
  right: 8%;
  display: block;
  z-index: 10;
}


/* -----------------------------------
   インデックスリスト
   ----------------------------------- */
/* 白背景、右に矢印 */
.indexList	{
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #ddd; /* リストの上に薄い線 */
}

.indexList li	{
  display: flex;
  align-items: center;              /* 縦中央揃え */
  justify-content: space-between;   /* テキストとアイコンを両端に配置 */
  padding: 3.4cqw 2cqw 3.4cqw 4cqw ;	    /* 上 | 右 | 下 | 左 */
  border-bottom: 1px solid #ddd; /* 下線 */
}
	
.indexList a {
  text-decoration: none; /* 下線を消す */
  color: #000000;	 /* テキストカラー */
  font-weight: 500; /* 500=Medium */
  font-size: 4.2cqw;	 /* フォントサイズ */
  letter-spacing: -0.05em; /* 文字間隔 */
  flex: 1;               /* アイコンを右に寄せるためリンクを広げる */}

.indexList li::after {
  /* Font Awesome アイコン (fa-chevron-right) の表示に必要なプロパティ */
  content: "\f054"; /* fa-chevron-right の Unicode */
  font-family: "Font Awesome 7 Free"; 
  font-weight: 900; /* Solid アイコン用 */

  /* スタイルの適用 */
  color: #C0C0C0; /* アイコンの色 */
  font-size: 3.8cqw; /* アイコンサイズ */
  
  /* Flexbox内での調整 */
  margin-left: 2cqw; /* リンクテキストとの間隔を確保 */
  flex-shrink: 0; /* アイコンが縮まないように固定 */
}


