@charset "UTF-8";

/* 共通設定 =============================================================== */

/* 基本リセット（余白調整のため念の為追加） */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.8;
background-color: #bfc5c1;
margin: 0;
padding: 0;
font-style: normal;
}

small {
	font-size: 11px;
	letter-spacing: 0; }


ul {
list-style: none;
padding-left: 0;
}

img {
width: 100%;
}

p {
margin: 0;
}


.WF2 {
  font-family: "Mohave", sans-serif;
  font-style: normal;
}


.WF3 {
  font-family: "EB Garamond", serif;
  font-style: normal;
}



/* 振り分け --------------------------------------------------- */

@media only screen and (max-width: 767px) {

	.PC {
	display: none !important;
	}

}

@media print, screen and (min-width: 768px) {

	.SP {
	display: none !important;
	}

}

/* ローディング --------------------------------------------------- */

/* 全画面キービジュアルの設定 */
.full-screen-kv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;

    /* 最初に表示される背景色をグレーに設定 */
    background-color: #c9cfcf; /* お好みのグレーに変更してください */

    display: flex;
    justify-content: center;
    align-items: center;

    /* 最初から表示されている状態にするため 0% の opacity は 1 にします */
    animation: fadeIntro 4s forwards;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

}

/* ★ 最初の1回だけ付くクラス */
.full-screen-kv.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: fadeIntro 4s forwards;
}

.full-screen-kv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 画像自体のフェードイン演出 */
    animation: imgFadeIn 2.5s ease-out forwards;
}

@keyframes fadeIntro {
    0% {
        opacity: 1;
        visibility: visible;
    }
    /* 2. 維持する時間を短くし、早めにフェードアウトを開始させる (例: 80% → 50%) */
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* 画像だけをふわっと出したい場合のアニメーション */
@keyframes imgFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


@media only screen and (max-width: 767px) {

.SP-only {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9000; /* キャッチコピーより低い値にする */
        background-color: #c9cfcf;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: fadeIntro 2.5s forwards;
    }

    /* 2. Catch1 を画面上部に固定 */
    .Catch1 {
        position: absolute;
        top: 20px; /* 上からの位置 */
        left: 0;

        padding-left: 20px;
        padding-right: 20px;
        z-index: 10000; /* 演出レイヤーより上に配置 */
        text-align: center;
        pointer-events: none; /* 下の要素を触れるようにする */
    }

    /* 3. Catch2 を画面下部に固定 */
    .Catch2 {
        position: absolute;
        bottom: 20px; /* 下からの位置 */
        left: 0;

              padding-left: 20px;
        padding-right: 20px;
        z-index: 10000; /* 演出レイヤーより上に配置 */
        text-align: center;
        pointer-events: none;
    }

    .SP-only img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: imgFadeIn 1.5s ease-out forwards;
    }

    /* --- コンテンツの配置調整 --- */
    .KeyVisualUnit {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: relative;
    }


    /* SP用のキービジュアル画像（演出が終わった後に普通に並ぶ用） */
    .KeyViusal.SP {
        width: 100%;
        order: 2;
    }

    /* FirstUnit（見出しやループ） */
    .FirstUnit {
        width: 100%;
        order: 3;
        padding: 0 0;
        text-align: center;
    }

    .Scroll {
        order: 5;
        text-align: center;
        margin-top: 20px;
    }




}

@media print, screen and (min-width: 768px) {

/* 背景全体の固定枠 */
.BgUnit.PC {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
}

/* 共通設定：画像を少し大きめにしておく（動かした時に端が切れないように） */
.bg-item {
    position: absolute;
    top: -20%;   /* 上に10%分はみ出させておく（のりしろ） */
    left: 0;
    width: 100%;
    height: 140%; /* 画面より20%高くする */
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.bg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* スクロール連動設定 */
.bg-item:nth-child(1) {
    animation: bgPara1 linear both;
    animation-timeline: scroll(root);
}
.bg-item:nth-child(2) {
    animation: bgPara2 linear both;
    animation-timeline: scroll(root);
}
.bg-item:nth-child(3) {
    animation: bgPara3 linear both;
    animation-timeline: scroll(root);
}

/* パララックス効果のポイント:
   各セクションの開始時に少し上に配置し、終了時に少し下に下げることで、
   背景がゆっくり追従しているように見せます。
*/

/* 1枚目：最初から大きく動き始める */
@keyframes bgPara1 {
    0% { opacity: 0.8; transform: translateY(0); }
    30% { opacity: 0.8; transform: translateY(15%); } /* 下へ大きく沈む */
    33%, 100% { opacity: 0; transform: translateY(15%); }
}

/* 2枚目：下からグッとせり上がってきて、また沈む */
@keyframes bgPara2 {
    0%, 25% { opacity: 0; transform: translateY(-10%); } /* 上から待機 */
    33% { transform: translateY(-5%); }
    45% { opacity: 0.8; }
    55% { opacity: 0.8; }
    66% { opacity: 0; transform: translateY(15%); } /* 下へ大きく沈む */
    100% { opacity: 0; }
}

/* 3枚目：下からグッとせり上がってくる */
@keyframes bgPara3 {
    0%, 55% { opacity: 0; transform: translateY(-10%); }
    60% { opacity: 0; }
    75% { opacity: 0.8; }
    100% { opacity: 0.8; transform: translateY(10%); } /* 最後まで動き続ける */
}


    /* 2. Catch1 を画面上部に固定 */
    .Catch1 {
        position: absolute;
        top: 20px; /* 上からの位置 */
        left: 0;
		padding: 0 20px;
        z-index: 10000; /* 演出レイヤーより上に配置 */
        text-align: center;
        pointer-events: none; /* 下の要素を触れるようにする */
    }

    /* 3. Catch2 を画面下部に固定 */
    .Catch2 {
        position: absolute;
        bottom: 20px; /* 下からの位置 */
        left: 0;
		padding: 0 20px;
        z-index: 10000; /* 演出レイヤーより上に配置 */
        text-align: center;
        pointer-events: none;
    }


}


/* コンテナ =============================================================== */



/* フッター（KVの後に続く要素として配置） */
.PageFooter {
  background-color: #fff; /* 背景色がないと透ける場合は指定 */
  padding: 50px 0;
  text-align: center;
}

/* アイコン等のスタイル（元コードに合わせて簡易調整） */
.PageFooter__SocialLinks {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}


@media only screen and (max-width: 767px) {

	.LeftBoxWrap,
	.RightBoxWrap {
	display: none;
	}

	.Width1 {
	padding: 0 20px;
	}

}


@media print, screen and (min-width: 768px) {

	.container {
	display: flex;
	  width: 100%;
	  position: relative;
	 /* 横並びを維持するために必要 */
  flex-wrap: nowrap;
	}

	/* --- 左右の共通設定 --- */
	.LeftBoxWrap,
	.RightBoxWrap {
	  /* stickyを使って画面上部に固定する */
	  position: -webkit-sticky; /* Safari用 */
	  position: sticky;
	  top: 0;

	  /* 画面いっぱいの高さを確保し、中身を中央寄せにする */
	  height: 100vh;
	  display: flex;
	  justify-content: center;
	  align-items: center; /* 垂直方向中央 */
	}

	.LeftBoxWrap {
	order: 1;

	/* ★ ここで比率を指定 (1の割合) */
  flex: 1;
	}

	.RightBoxWrap {
	order: 3;

	/* ★ ここで比率を指定 (2の割合) */
	/* 左が1に対して右が2なので、倍の広さ（＝左は右の1/2）になります */
	flex: 2;
	}

	.UnitWrap {

	}

	/* Navの中身も念の為中央寄せ（画像サイズによるズレ防止） */
	/* .Nav1, .Nav2 {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-flow: column;
	} */

	/* --- センターエリア --- */
	.CenterBoxWrap {
	  display: flex;
	  justify-content: center;
	  flex-flow: column;
	  order: 2;
	  /* 背景がないとコンテンツが浮いて見える場合があるため必要に応じて調整 */
	  z-index: 2;
	/* ★ ここで幅400px固定を指定 */
	/* flex-grow: 0 (伸びない), flex-shrink: 0 (縮まない), flex-basis: 400px (基準幅) */
	flex: 0 0 400px;
	width: 400px; /* IEなど念の為のwidth指定 */
	}

	.CenterBox {

	  /* 相対配置の基準にする */
	  position: relative;
	  border-right: 2px solid #fff;
	  border-left: 2px solid #fff;
	}

	.LeftBoxWrap .Nav1 .Logo {
	width: 120px;
	}

	.RightBoxWrap .MdsUnit2 {
	margin-top: 5px;
	padding-top: 5px;
	border-top: 1px solid #fff;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	}



}




/* キービジュアル =============================================================== */

.KeyVisualUnit {
  /* 画面の高さいっぱいに広げる */
  height: 100vh;
/* ブラウザのバーを除いた「今見えている高さ」に合わせる */
    height: 100dvh;

  /* 画像を上下左右中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Scrollボタン配置の基準点にする */
  position: relative;
  margin: auto;
  	background: #c9cfcf;
}

/* --- スクロールボタン --- */
.Scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  /* 位置固定のためのtransformのみ残す */
  transform: translate(-50%, 50%);
  margin-bottom: 0;
  z-index: 10;

  /* アニメーションの指定: 名前を「flash」に変更 */
  animation: flash 2s ease-in-out infinite;
}

/* 点滅アニメーションの動き */
@keyframes flash {
  0%, 100% {
    opacity: 1; /* 完全に見える */
  }
  50% {
    opacity: 0; /* 完全に消える */
  }
}



@media only screen and (max-width: 767px) {

	.Scroll {
	width: 15px;
	}

}


@media print, screen and (min-width: 768px) {

	.Scroll {
	width: 15px;
	}

}



/* --- ループエリアのコンテナ --- */
.LoopUnit {
width: 100%;       /* 親要素の幅いっぱい */
overflow: hidden;  /* はみ出した部分を隠す */
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

/* --- 画像を動かすトラック --- */
.LoopTrack {
  display: flex;          /* 画像を横並びにする */
  width: fit-content;     /* 中身の幅に合わせて広がるようにする */

  /* アニメーションの設定 */
  /* 名前 | 1周にかかる時間 | 動き方(一定) | 繰り返し(無限) */
  animation: loopScroll 15s linear infinite;
}

/* --- トラック内の画像設定 --- */
.LoopTrack img {
  /* 必要に応じて画像の高さや隙間を調整してください */
  height: 80px; /* 例：高さを固定 */
  width: auto;   /* 横幅は自動 */

  /* 画像が縮まないようにする */
  flex-shrink: 0;

  /* 【重要】iPhoneでの描画を安定させる魔法のプロパティ */
  -webkit-backface-visibility: hidden; /* 背面の描画を隠して負荷を軽減 */
  backface-visibility: hidden;
  transform: translateZ(0);            /* GPU（ハードウェア加速）を強制オン */
  will-change: transform;              /* ブラウザに動くことをあらかじめ伝える */


  /* 画像の間に隙間を空けたい場合はコメントアウトを外して調整 */
  /* margin-right: 20px; */
}

/* --- アニメーションの動きを定義 --- */
@keyframes loopScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes loopScrollReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* --- LoopUnit2専用の設定（左から右へ） --- */
.LoopUnit2 .LoopTrack {
  /* 逆方向に動くアニメーションを適用 */
  animation: loopScrollReverse 15s linear infinite;
}

/* --- 逆方向アニメーションの定義 --- */
@keyframes loopScrollReverse {
  0% {
    transform: translateX(-50%); /* 左にずれた状態からスタート */
  }
  100% {
    transform: translateX(0);    /* 右（元の位置）に向かって進む */
  }
}



/* First =============================================================== */

.FirstUnit .Icon2026 {
width: 140px;
margin: auto;
}

.FirstUnit .Mds1 {
font-size: 18px;
line-height: 1.6;
text-align: center;
margin: 10px 0 0 0;
}

.mirror-x {
  display: inline-block; /* transformを適用するために必要 */
  transform: scaleX(-1);
}

@media only screen and (max-width: 767px) {

	.FirstUnit .Icon2026 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1;
	}

}

@media only screen and (max-width: 375px) {

	.FirstUnit .Mds1 {
	font-size: 16px;
	}

	.LogoAreaWrap {
	padding: 10px 0 !important;
	}

	.FirstUnit .Icon2026 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	}

}

@media print, screen and (min-width: 768px) {

	.FirstUnit {
	width: 400px;
	}

}

.LogoAreaWrap {
margin-top: 20px;
padding: 20px 0;
}

/* ベースのスタイル */
.LoopLogoUnit {
  overflow: hidden; /* はみ出たロゴを隠す */
  margin-bottom: 10px;
}

.LoopLogoTrack {
  display: flex;
  width: max-content; /* 中身の幅に合わせる */
}

.LoopLogoTrack ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.LoopLogoTrack li {
padding: 0 20px; /* ロゴ同士の余白 */
}

.LoopLogoTrack ul a {
cursor: pointer !important;
}

.LoopLogoTrack img {
width: auto;
height: 80px;
display: block;
}



@media only screen and (max-width: 767px) {

	.LoopLogoTrack li {
	padding: 0 15px; /* ロゴ同士の余白 */
	}

	.LoopLogoTrack img {
	width: auto;
	height: 50px;
	display: block;
	}

}


/* アニメーション：右から左（Loop1） */
.LoopLogoUnit1 .LoopLogoTrack {
  animation: loop-left 20s linear infinite;
}

@keyframes loop-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 半分（1つ目のul分）進んだら戻る */
}

/* アニメーション：左から右（Loop2） */
.LoopLogoUnit2 .LoopLogoTrack {
  /* 最初から半分ずらしておく */
  animation: loop-right 25s linear infinite;
}

@keyframes loop-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* マウスホップで一時停止させる場合（お好みで） */
.LoopLogoTrack:hover {
  animation-play-state: paused;
}

.LogoAreaWrap {
background: #fff;
}


/* ポップアップショップ =============================================================== */

.SecondUnit {
background: #c9cfcf;
}

.PopupShopsUnit .Lead1 {
font-size: 18px;
letter-spacing: 0.05em;
line-height: 1.6;
text-align: center;
}

@media only screen and (max-width: 767px) {


}

@media print, screen and (min-width: 768px) {


}



/* NEWSHOP =============================================================== */

.NewShopUnit {
/*padding: 50px 0; */
padding: 50px 0 0 0;
text-align: center;
}

.NewShopUnit .Number {
font-size: 130px;
font-weight: 600;
margin: 0;
line-height: 1;
}

.NewShopUnit .UnitMds {
font-size: 50px;
}

.NewShopUnit .Lead1 {
margin-top: 30px;
font-size: 18px;
line-height: 1.6;
}

.NewShopUnit .IconList {
display: grid;
grid-template-columns: repeat(5, 1fr);
margin-top: 40px;
padding: 0 20px;
}

.NewShopUnit .IconList li {
display:flex !important;
flex-flow: column !important;
margin-top: 3px;
font-size: 12px;
margin-bottom: 7px;
text-align: center;
}

.NewShopUnit .IconList .Icon {
display: block;
margin: auto;
}

.NewShopUnit .IconList .IconLead {
display: block;
margin-top: 3px;
font-size: 12px;
letter-spacing: -0.02em;
}

.SpecialFeaureMds {
padding-bottom: 15px;
background: #fff;
text-align: center;
}

.SpecialFeaureMds .Mds1 {
position: relative;
padding-top: 15px;
color: #f00050;
font-weight: 600;
font-size: 20px;
}

.SpecialFeaureMds .Mds1:before {
content: '';
position: absolute;
top: -10px;
left: 0;
right: 0;
margin: auto;
display: block;
width: 30px;
height: 26px;
background-image: url(../img/Icon_Special.png);
background-size: contain;
vertical-align: middle;
}

.SpecialFeaureMds .Lead1 {
font-weight: 600;
font-size: 16px;
line-height: 1.4;
}

@media only screen and (max-width: 767px) {

	.NewShopUnit .IconList .IconLead {
	font-size: 11px;
	}

}

@media only screen and (max-width: 375px) {



}

@media print, screen and (min-width: 768px) {


}




/* SHOP INDEX =============================================================== */

.ShopListUnitWrap {
position: relative;
}

.RightBoxWrap .ShopList .ShopListName.IconNew {
position: relative;
}

.RightBoxWrap .ShopList .ShopListName.IconNew:before {
content: '';
display: inline-block;
position: absolute;
right: -22px;
width: 18px;
height: 16px;
background-image: url(../img/Icon_Special.png);
background-size: contain;
background-position: right center;
vertical-align: middle;
}

@media only screen and (max-width: 767px) {


}


@media print, screen and (min-width: 768px) {

	.ShopListWrap {
	margin-top: 30px;
	}

	.RightBoxWrap .Nav2 {
	text-align: left;
	}

	.RightBoxWrap .MdsUnit {
	width: 100%;
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	text-align: left;
	}

	.RightBoxWrap .ShopList {
	margin-top: 0;
	}

	.RightBoxWrap .ShopListNav li {
	margin-bottom: 5px;
	padding-left: 20px;
	}

	.RightBoxWrap .ShopListNav a {
	display: flex;
	justify-content: space-between;
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	}

	.RightBoxWrap .ShopList a:hover {
	position: relative;
	color: #ffff32;
	}

	.RightBoxWrap .ShopList a:hover:before {
	display: block;
	position: absolute;
	background-color: #ffff32;
	content: "";
	top: 4px;
	left: -15px;
	width: 10px;
	height: 10px;
	border-radius: 50px;
	}

	.RightBoxWrap .RightBox {
	width: 250px;
	}

}


/* SHOP INDEX =============================================================== */

.ShopListUnitWrap {
position: relative;
}

.PopLead {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
transition-delay: 0.3s; /* ここで「少し遅れて」を調整 */

/* 要素の上に重ねるための設定（必要に応じて調整してください） */
position: absolute;
z-index: 10;
}

.PopLead.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* VIEW MOREボタン */
.ViewMore {
  cursor: pointer;
  text-decoration: underline;
  /* ボタン自体の見た目の調整（必要に応じて） */
  display: inline-block;
  transition: opacity 0.3s;
}
.ViewMore:hover {
  opacity: 0.7;
}

/* ▼▼▼ ここがアニメーションのポイント ▼▼▼ */
.FeaureShopDetail {
  /* 閉じている状態 */
  max-height: 0;           /* 高さを0にする */
  opacity: 0;              /* 透明にする */
  overflow: hidden;        /* 枠からはみ出た部分を隠す（必須） */
  visibility: hidden;      /* 完全に隠してクリック判定などを消す */

  /* アニメーションの設定 (0.5秒かけて変化) */
  transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0.5s;
}

.FeaureShopDetail.is-open {
  /* 開いている状態 */
  max-height: 1000px;      /* コンテンツが収まる十分な高さを指定 */
  opacity: 1;              /* 不透明にする */
  visibility: visible;     /* 見えるようにする */
}

.FeaureShopWrap {
display: flex;
}

.FeaureShopMds {
width: calc(100% - 180px);
padding-top: 25px;

}

.FeaureShopPh {
width: 180px;
height: 180px;
}

.FeaureShopWrap .ShopDay {
padding-left: 30px;
font-size: 48px;
font-weight: 600;
color: #ffff32;
}

.FeaureShopWrap .ShopDay .Day {
display: inline-block;
margin-left: 7px;
font-size: 18px;
}

.FeaureShopWrap .ShopDay .New {
display: inline-block;
margin-left: 5px;
font-size: 16px;
}

.FeaureShopWrap .PopupTitle {
padding-left: 30px;
}

.FeaureShopWrap .PopupTitle .Title1 {
font-size: 18px;
line-height: 1.2;
}

.FeaureShopWrap .PopupTitle .Title2 {

margin-top: 7px;
font-size: 13px;
letter-spacing: -0.05em !important;

}

.FeaureShopWrap .PopupTitle .Title2 small {
letter-spacing: -0.07em !important;
}


#ShopIndex1 .PopupTitle .Title1 {
letter-spacing: -0.05em !important;
}

.FeaureShopDetailIn {
padding: 20px 0;
}

.FeaureShopDetail {
padding: 0 30px 0 30px;
}

.FeaureShopDetail .Mds1 {
font-size: 18px;
line-height: 1.6;
font-weight: 600;
}

.FeaureShopDetail .Lead1 {
margin-top: 12px;
font-size: 14px;
line-height: 1.6;
}



@media only screen and (max-width: 767px) {

	.FeaureShopWrap .PopupTitle .Title1 {
	font-size: 16px;
	}

	.FeaureShopWrap .PopupTitle .Title2 {
	font-size: 12px;
	letter-spacing: -0.1em !important;
	}

}

@media only screen and (max-width: 375px) {

	.FeaureShopWrap .PopupTitle .Title2 small {
	font-size: 10px;

	}

}


@media print, screen and (min-width: 768px) {


}

@media print, screen and (min-width: 1200px) {



}


/* SHOP =============================================================== */

.UnitMds {
font-size: 50px;
line-height: 1;
font-weight: 300;
text-align: center;
margin: 0;
}

.PopupShopsUnit {
padding: 50px 0 30px 0;
}

.PopupShopsUnit .Lead1 {
margin-top: 20px;
font-weight: 500;
}

.PopupShopsUnit .Ph {
width: 190px;
}

.PopupUnit1.PopupUnit {
display: flex;
margin-top: 35px;
}

.PopupUnit1 .PopupUnitPh {
width: 190px;
}

.PopupUnit1 .PopupUnitLead {
width: calc(100% - 190px);
padding-top: 30px;
padding-left: 40px;
padding-right: 15px;
}

.PopupUnit2.PopupUnit {
margin-top: 35px;
}

.PopupUnit2 .PopupUnitPh {
width: 300px;
}

.PopupUnit .PopupUnitIn {
position: relative;
}

.PopupUnit2 .PopupUnitIn .PopupUnitLead {
position: absolute;
width: 210px;
right: 10px;
top: -15px;
}

.PopupUnitLead .DayMds {
font-size: 33px;
font-weight: 600;
letter-spacing: 0.05em;
line-height: 1;
color: #0096ff;
}

.PopupUnitLead .DayMds .Day {
font-size: 20px;
}

.PopupUnit .Floor {
margin-top: 5px;
}

@media only screen and (max-width: 375px) {

	.PopupUnitLead .DayMds {
	width: 190px;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1;
	color: #0096ff;
	}

	.PopupUnit2 .PopupUnitIn .PopupUnitLead {
	right: 0;
	}

}


.PopupUnitLead .PopupTitle {
line-height: 1;
font-weight: 600;
}

.PopupUnitLead .PopupTitle .Title1 {
margin-top: 10px;
font-size: 23px;
}

.PopupUnitLead .PopupTitle .Title2 {

margin-top: 10px;
font-size: 13px;
}

.Floor {
display: inline-block;
width: 55px;
padding: 4px 0 2px 0;
font-size: 14px;
font-weight: 600;
background: #000;
color: #fff;
border-radius: 50px;
line-height: 1;
text-align: center;
}

.marker-text{
display: inline;
line-height: 1.75;              /* 行間ギリまで削る */
padding: 0 .15em;              /* 横の余白だけほんの少し */

/* マーカー本体 */
background: linear-gradient(#fff 0 0) no-repeat;
background-size: 100% 1em;   /* マーカーの太さ */
background-position: 0 75%;    /* 下寄せ位置 */

-webkit-box-decoration-break: clone;
box-decoration-break: clone;   /* ← 複数行対応の最重要 */
}

.SpecialUnit1 .marker-text,
.SpecialUnit2 .marker-text {
color: #fff;
  background: linear-gradient(#000 0 0) no-repeat;
}


.PopupUnitLead2 {
margin-top: 25px;
padding: 0 40px;
}

.PopupUnitLead2 .Mds1 {
font-size: 18px;
font-weight: 500;
line-height: 1.6;
}

.PopupUnitLead2 .Lead2 {
margin-top: 10px;
font-size: 14px;
}

.PopupUnitLead2 .IconList {
display: flex;
margin-top: 20px;
}

.PopupUnitLead2 .IconList li {
width: 24px;
margin-right: 5px;
}

.SpecialFeaureList {
margin-top: 45px;
margin-bottom: 0;
}

.SpecialFeaureList li {
position: relative;
line-height: 1;
}

.SpecialFeaureList .PopupTitle {
margin-top: 5px;
position: relative;
padding-right: 5px;
}

.SpecialFeaureList .PopupTitle.Icon_New:before {
content: '';
display: inline-block;
position: absolute;
left: 30px;
bottom: -26px;
width: 24px;
height: 20px;
background-image: url(../img/Icon_Special.png);
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}

.SpecialUnit2 .PopupTitle.Icon_New:before {
left: 0;
}

.SpecialFeaureList .Title1,
.SpecialFeaureList .Title2 {
font-weight: 600;
letter-spacing: inherit !important;
}

.SpecialFeaureList .Title2 {
margin-top: 3px;
}

/* 基準点を変更するための指定 */
.FeaureShopWrap {
  position: relative; /* ここを基準点にします */
  /* 必要に応じて高さを確保したりoverflowなどの設定を確認してください */
}

.SpecialFeaureList .ViewMore {
position: absolute;
bottom: 10px;
margin-left: 30px;
padding-left: 15px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.05em;
text-decoration: none;
}

.SpecialFeaureList .ViewMore:before {
content: '';
position: absolute;
top: 3px;
left: 0;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-top: 8px solid #000;
border-bottom: 0;
}

.SpecialFeaureList .IconList {
display: flex;
margin-top: 15px;
}

.SpecialFeaureList .IconList li {
width: 25px;
margin-right: 3px;
}

.FeaureShopCredit {
display: flex;
align-items: center;
margin-top: 15px;
border-top: 1px solid #000;
padding-top: 15px;
}

.FeaureShopCredit .Floor {
margin-right: 7px;
}

.FeaureShopCredit .ShopInfo {
margin-left: auto;
font-size: 15px;
font-weight: 600;
}

.FeaureShopCredit .ShopInfo a {
position: relative;
padding-right: 15px;
color: #000;
text-decoration: none;
line-height: 1;
}

.FeaureShopCredit .ShopInfo a:after {
content: '';
position: absolute;
right: 0;
top: 4px;
display: inline-block;
width: 12px;
height: 12px;
background-image: url(../img/Special_Allow_B.png);
background-size: contain;
vertical-align: middle;
}

.FeaureShopCredit .Tel {
font-size: 15px;
font-weight: 600;
}

.FeaureShopUnit {
border-top: 1px solid #000;
}

.SpecialFeaureBtn {
margin-top: 20px;
}

.SpecialFeaureBtn a {
position: relative;
display: block;
color: #f00050;
background: #fff;
border-radius: 10px;
border: #f00050 2px solid;
text-decoration: none;
font-weight: 600;
padding: 10px 20px 10px 40px;
}

.SpecialFeaureBtn a:before {
content: '';
position: absolute;
left: 13px;
top: 10px;
display: inline-block;
width: 18px;
height: 16px;
background-image: url(../img/Icon_Special.png);
background-size: contain;
vertical-align: middle;
}

.SpecialFeaureBtn a:after {
content: '';
position: absolute;
right: 13px;
top: 11px;
display: inline-block;
width: 14px;
height: 14px;
background-image: url(../img/Special_Allow.png);
background-size: contain;
vertical-align: middle;
}

@media only screen and (max-width: 767px) {


}



@media print, screen and (min-width: 768px) {


}


/* SPECIAL =============================================================== */

.SpecialUnit .LoopUnit {
border: none;
}

.SpecialUnit {
background: #fff;
border-bottom: 1px solid #000;
}

.SpecialUnitIn {
border: 5px solid #80e3ca;
}

.SpecialUnit .SpecialDay {
font-size: 70px;
color: #00c896;
font-weight: 600;
}

.SpecialUnit .SpecialDay .Day {
display: inline-block;
font-size: 24px;
color: #00c896;
font-weight: 600;
margin-left: 6px;
}

.SpecialUnit .IconNew {
display: inline-block;
font-size: 20px;
font-weight: 600;
margin-left: 6px;
}

.SpecialUnitIn {
padding-top: 30px;
padding-bottom: 30px;
}

.SpecialUnitInIn {
padding: 0 30px;
}

.SpecialUnit1 .LoopUnit {
margin-top: 20px;
margin-bottom: 20px;
}

.SpecialUnit2 .LoopUnit {
margin-top: 40px;
margin-bottom: 20px;
}

.SpecialUnit1 .LoopTrack img {
height: 160px;
}

.SpecialUnit2 .LoopTrack img {
height: 180px;
}

.SpecialUnit1 {
border-top: 1px solid #000;
}

.SpecialUnit1 .Title1,
.SpecialUnit2 .Title1 {
font-size: 25px;
}

.SpecialUnit1 .Title2,
.SpecialUnit2 .Title2 {
font-size: 13px;
}

.SpecialUnit1 .PopupTitle,
.SpecialUnit2 .PopupTitle {
color: #fff;
}

.SpecialUnit1 .marker-text::before,
.SpecialUnit2 .marker-text::before {
background: #000;
}

.SpecialUnit2 .Ph {
margin-top: 20px;
}

.SpecialUnitInIn .SpeicalMds {
font-size: 18px;
line-height: 1.4;
font-weight: 600;
}

.SpecialUnitInIn .SpeicalLead {
margin-top: 7px;
font-size: 14px;
line-height: 1.4;
}

.SpecialDay .SpecialDay1 {
font-size: 22px;
}



/* CONCEPT =============================================================== */

.ConceptUnit {
padding: 40px 20px;
background: #fff;
text-align: center;
}

.ConceptUnit .Title {
display: flex;
justify-content: center;
width: 180px;
margin: auto;
}

.ConceptUnit .Title1 {
margin-top: 20px;
font-size: 24px;
letter-spacing: 0.05em;
font-weight: 600;
}

.ConceptUnit .Lead1 {
margin-top: 10px;
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.05em;
font-weight: 500;
}

.ConceptUnit .Ph {
width: 245px;
margin: 25px auto;
}

.ConceptUnit .Title2,
.ConceptUnit .Lead2 {
font-size: 13px;
letter-spacing: 0.05em;
}

.ConceptUnit .Title2 {
font-weight: 600;
}

.ConceptUnit .Name {
font-size: 17px;
}

.ConceptUnit .Lead2 {
text-align: left;
line-height: 1.4;
}

@media only screen and (max-width: 767px) {


}

@media only screen and (max-width: 375px) {

.ConceptUnit .Lead1 {
font-size: 13px;
}

}

@media print, screen and (min-width: 768px) {


}



/* ページトップ =============================================================== */

#js-pagetop {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000; /* ローディングより上に */
  width: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, transform 0.6s ease; /* transitionを少し長くして遅出し感を強調 */
  transform: translateY(10px); /* 少し深めから浮かび上がらせる */
}

#js-pagetop.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* ホームボタン =============================================================== */

.Btn__Home {
	text-align: center;
	margin: 60px auto 30px auto;}

.Btn__Home img {
	width: 280px;}


/* フッター =============================================================== */

.PageFooter {
	position: relative;
	padding: 0 0;
	color: #fff;}

.PageFooter__SocialLinks {
	display: flex;
	gap: 20px;
	justify-content: center;
	padding: 0;
	margin: 10px 0 0 0;
	list-style: none;}

.PageFooter__SocialLinks a {
	text-decoration: none;}

.PageFooterIn {
padding: 30px 0;
background: #c9cfcf;
}

.CreditUnit {
padding: 40px 0;
background: #000;
}

.PageFooter .LaforetLogo {
width: 110px;
margin: auto;
}

.Icon {
	display: inline-block;
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background: #fff;
	background-repeat: no-repeat;
	background-position: center;}

.Icon.-instagram {
    background-image: url('../img/Icon_Instagram.svg');
    background-size: 50%;
    filter: invert(100%);
    }

.Icon.-x {
    background-image: url('../img/Icon_X.svg');
    background-size: 45%;
    filter: invert(100%);
    }

.Icon.-facebook {
    background-image: url('../img/Icon_Facebook.svg');
    background-size: 30%;
    filter: invert(100%);
    }

.Icon.-line {
    background-image: url('../img/Icon_Line.svg');
    background-size: 60%;
    filter: invert(100%);
    }

.PageFooter__Logo {
	display: flex;
	justify-content: center;
}

.PageFooter__Logo img {
	display: block;
	width: 70px;}

.PageFooter__Copyright {
	margin-top: 15px;
	font-size: 11px;
	text-align: center;}