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

body{
	margin: 0;
}

.sticky-container{
	margin: 0;
	font-family: "din-2014", YuGothic, "Yu Gothic Medium", "Hiragino Sans", Meiryo, sans-serif;
	font-weight: 700;
	font-style: normal;
	position: relative;
}

.sticky-container img{
	display: block;
	line-height: 0;
}

.pc-box{
	display: none;
}

.wrapper{
	width: 100%;
	margin: 0 auto;
	background-color: #D3BF2E;
	padding: 5% 0 0;
	position: relative;
	z-index: 10;
}

@media(min-width:750px){
	.sticky-container{
		display: flex;
		justify-content: center;
		column-gap: 100px;
		background-color: #D3BF2E;
	}
	
	.pc-box{
		position: sticky;
        left: 0;
        top: 0;
        display: flex;
        width: 33%;
        height: 100vh;
        justify-content: center;
        align-items: center;
	}
	
	.pc-box__left img{
		width: 40vh;
		padding-bottom: 15%;
	}
		
	.wrapper{
		width: 36%;
		margin: 0;
		padding: 2% 0;
		box-sizing: border-box;
		border-left: 2px #000 solid;
		border-right: 2px #000 solid;
	}
}


/*===================================

				MV

===================================*/

.mv{
	margin: 0 auto;
	color: #000;
}

.mv h1{
	text-align: center;
	font-size: 2.2rem;
	margin: 5% auto;
	line-height: 0.7;
}

.mv h1 span{
	font-size: 1.0rem;
}

.mv p{
	text-align: center;
	font-size: .95rem;
	margin: 10% auto;
	line-height: 1.9;
}

@media(min-width:750px){
	.mv h1{
		font-size: 3.1rem;
	}

	.mv h1 span{
		font-size: 1.3rem;
	}

	.mv p{
		font-size: 1.0rem;
	}
	
	.br_s{
		display: none;
	}
}


/*===================================

			limited

===================================*/

.limited{
	width: 100%;
	margin: 20% auto 20%;
	color: #000;
}

/* 全体を囲む箱の設定 */
.quote-box {
    text-align: center;
    
    /* 【変更】箱の幅を中のテキストにピッタリ合わせる魔法の設定です */
    width: fit-content; 
    
    margin: 40px auto; 
    border-bottom: 2px solid #000; /* 下の長い直線 */
    padding-bottom: 15px; 
	width: 100%;
}

/* 上のテキストの設定 */
.quote-sub {
    display: flex; 
    align-items: center; 
    
    /* 【追加】上の行を箱の幅いっぱいに広げます */
    width: 100%; 
    
    font-size: 1.3rem;
	letter-spacing: 1px;
    font-weight: bold; 
    color: #000; 
    margin: 0 0 10px 0; 
}

/* 上のテキストの「左右の線」を作る設定 */
.quote-sub::before,
.quote-sub::after {
    content: "";
    
    /* 【変更】固定の幅(width)を消して、余白を自動で埋める設定にします */
    flex-grow: 1; 
    
    height: 2px; /* 線の太さ */
    background-color: #000; 
}

/* 左の線とテキストのすき間 */
.quote-sub::before {
    margin-right: 15px; 
}

/* 右の線とテキストのすき間 */
.quote-sub::after {
    margin-left: 15px;
}

/* 下の大きなメインテキストの設定（前回と同じ） */
.quote-main {
    font-size: 3.0rem;
    font-weight: bold; 
    color: #000; 
    margin: 0;
    letter-spacing: 2px; 
}

.limited-contents{
	width: 90%;
	margin: 0 auto;
}


.spice{
	width: 26%;
	margin: 3% auto 5%;
}

.curry-title {
    font-size: 1.35rem;
    font-weight: bold;
	text-align: center;
}

.curry-title span{
    background: linear-gradient(transparent 60%, #ef7a00 60%);
	box-sizing: border-box;
	padding: 0 1%;
}

.curry-desc {
    font-size: .9rem;
    font-weight: bold;
    line-height: 2;
    margin: 2% 0;
    text-align: center;
}

.limited a{
	display: block;
	width: 50%;
	margin: 8% auto;
	background-color: #000;
	color: #fff;
	border-radius: 50px;
	text-align: center;
	text-decoration: none;
	font-size: 1.1rem;
	line-height: 2;
}


/*===================================

			　ranking

===================================*/

.ranking{
	width: 100%;
	margin: 10% auto;
	color: #000;
}

.ranking-contents{
	width: 90%;
	margin: 0 auto;
}

.ranking-inner{
	margin-bottom: 15%;
}

.ranking-main{
	width: 90%;
	margin: 0 auto;
}

.ranking a{
	display: block;
	width: 50%;
	margin: 8% auto;
	background-color: #000;
	color: #fff;
	border-radius: 50px;
	text-align: center;
	text-decoration: none;
	font-size: 1.1rem;
	line-height: 2;
}


/*===================================

			　all

===================================*/

.lineup{
	margin: 20% auto;
}




.curry-inner{
	width: 90%;
	margin: 0 auto 10%;
	padding-bottom: 10%;
	border-bottom: 2px dashed #000;
}

.border-none{
	border-bottom: none;
	padding-bottom: 0;
}

.curry-icon{
	width: 30%;
	margin: 2% 0 5% 2%;
}

.lineup ul{
	padding: 0;
	list-style: none;
	display: flex;
	column-gap: 0px;
	grid-row-gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
}

.lineup ul li{
	position: relative;
	width: 33.3%;
}

.new::before{
	content: '';
	position: absolute;
	background-image: url("../images/new.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
	top: 0px;
	left: 0px;
	z-index: 10;
}

.btn{
	display: block;
	width: 90%;
	margin: 8% auto 10%;
	background-color: #000;
	color: #fff;
	border-radius: 50px;
	text-align: center;
	text-decoration: none;
	font-size: 1.1rem;
	line-height: 3;
}


/* ① 画像が流れる「枠」の設定 */
  .scroll-container {
    width: 100%;           /* 画面の幅いっぱいに広げます */
    overflow: hidden;      /* 画面からはみ出た画像を隠します */
    padding: 10px 0 0;       /* 上下に少し余白を作ります */
  }

  /* ② 動かす「画像」の設定 */
  .moving-image {
    width: 700px;          /* 画像の横幅（お好みで変更してください） */
    
    /* ③ アニメーションの指示： 
       「moveRight」という動きを、5秒（5s）かけて、一定の速度（linear）で、無限（infinite）に繰り返す */
    animation: moveRight 13s linear infinite;
  }

  /* ④ アニメーションの動きのルール（左から右へ） */
  @keyframes moveRight {
    0% {
      transform: translateX(100vw); 
    }
    100% {
      transform: translateX(-700px);
    }
  }

@media(min-width:750px){
	.scroll-container{
		display: none;
	}
}
	


/* ===================================
   全体の一番下を流れる背景アニメーション
=================================== */
	.bg-scroll-container {
		display: none;
	}
	
@media (min-width: 750px) {
	.bg-scroll-container {
		display: block;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  overflow: hidden;
	  z-index: 1;
	}

	.bg-moving-image {
	  width: 800px; 
	  animation: moveRightBg 15s linear infinite;
	}

	@keyframes moveRightBg {
	  0% {
		transform: translateX(-100%);
	  }
	  100% {
		transform: translateX(100vw);
	  }
}
}

/* ===================================
   フッターの重なり順の調整
=================================== */
/* フッターの要素をアニメーションよりも手前に表示させます */
footer,
#footer,
.footer__inner {
  position: relative; /* z-indexを効かせるためのおまじないです */
  z-index: 20;        /* wrapper(10)やアニメーション(1)より大きい数字にします */
}