/* IMPORT RESET ================================================== */
@import url("sanitize.css");

/* WEB FONT ====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");

/* LAYOUT ======================================================== */
/*実際に適用するレイアウトパターンを直下のcssディレクトリにコピーして読むこむ*/
@import url("animate.css");
@import url("btn.css");

/* STYLES ======================================================== */
/*共通のサイズや色を変数で設定*/ :root {
	/*文字サイズ*/
	--x-small: 0.8rem; /*50%*/
	--small: 1.2rem; /*75%*/
	--medium: 1.6rem; /*100%*/
	--large: 2rem; /*125%*/
	--x-large: 2.4rem; /*150%*/
	/*色*/
	--red: #c00;
	--blue: #039;
	--mallcolor: #b60081;
}

/* ルートのフォントサイズを10pxに設定（1rem=10px）*/
html {
	font-size: 62.5%;
	height: 100%
}

/* bodyのフォントサイズを16pxに設定 */
body {
	font-size: var(--medium);
	height: 100%
}

/* MEMO ++++++++++++++++++++++++++++++++
  フォントサイズはremで指定すること
  例）10pxは1rem、12pxは1.2rem
+++++++++++++++++++++++++++++++++++++ */

.font-xs {
	font-size: var(--x-small);
}
.font-s {
	font-size: var(--small);
}
.font-m {
	font-size: var(--medium);
}
.font-l {
	font-size: var(--large);
}
.font-xl {
	font-size: var(--x-large);
}

/*文字色*/
.font-red {
	color: var(--red);
}
.font-blue {
	color: var(--blue);
}
.font-mcolor {
	color: var(--mallcolor);
}

* {
	box-sizing: border-box;
}

body {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin: 0 ;
	padding: 0;
	background: #000;
}

header {
	margin: 0;
	padding: 0;
	position: relative;
    z-index: 20;
	
	h1 {
		display: block;
	   max-width: 750px;
		margin: 0 auto;
	}
}
	
main {
    max-width: 750px;
	margin: 0 auto;
	padding: 0 10px;
    background:#000;

}

img {
	/* 画像は基本的に横幅100%表示、高さは横幅に合わせて自動調整
	小さい画像を使用する際は個別にmax-widthを設定する */
	width: 100%;
	height: auto;
	vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

footer {
  margin: 0 auto; 
  text-align: center;
  color: #fff;
  background: #000;
  padding: 20px 0; 
  max-width: 750px;
  position: relative;
  z-index: 3;
}

footer p.homeBtn a {
  display: block;
  margin: 0 auto;
  padding: 10px;
  font-weight: bold;
  background-color: #a97322;
  color: #fff;
  text-decoration: none;
}

footer p.copyright {
  color: #fff;
  font-size: 1.2rem;
  margin-top: 10px;
}


/* Flexbox ────────────────────────────────────────────────────────────
子要素の間隔はgapで指定。
*/

.flexbox {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: var(--spacing);
	gap: var(--spacing);
}

/* 子要素のボックスを等分配置 */

/* PC・スマホ共に2分割 */
.flexbox.box2 {
	> * {
		width: calc((100% - var(--spacing)) / 2);
	}
}

/* PC2列、スマホ1列 */
.flexbox.box2-1 {
	> * {
		width: 100%;
	}
	@media (min-width: 768px){
	/* PCのみ適用 */
		> * {
			width: calc((100% - var(--spacing)) / 2); 
		}
	}
}

/* PC3列、スマホ1列 */
.flexbox.box3-1 {
	> * {
		width: 100%;
	}
	@media (min-width: 768px){
		> * {
			width: calc((100% - var(--spacing) * 2) / 3); 
		}
	}
}

/* PC3列、スマホ2列 */
:root {
	--spacing: 30px;
}

.flexbox.box3-2 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing);
	justify-content: center;
}

.flexbox.box3-2 > * {
	flex: 1 1 calc((100% - var(--spacing)) / 2);
	max-width: 250px;
}

/* PC（768px以上）：3列 */
@media (min-width: 768px) {
	.flexbox.box3-2 > * {
		flex: 1 1 calc((100% - var(--spacing) * 2) / 3);
		max-width: 250px;
	}
}

/* スマホ（〜430px） */
@media (max-width: 430px) {
	.flexbox.box3-2 > * {
		max-width: 125px;
	}
}

/* PC：768px以上で3列に変更 */
@media (min-width: 768px) {
	.flexbox.box3-2 > * {
		flex: 1 1 calc((100% - (var(--spacing) * 2)) / 3);
	}
}

/* --------------------------------------------- */
/*3列　※flexboxと一緒に設定*/
.box3{
	--spacing: 10px; /*子要素の間隔*/
	margin: 0 auto;
	padding: 0;
	
	gap: var(--spacing);
	
	div,
	p{
  	width: calc( ( 100% - var(--spacing) * 2 ) / 3 ); 
		text-align: center;
	}
}
.box3 a img{
	max-width: 200px;
}

@media screen and (max-width: 480px) {
	.box3 a img{
	max-width: 100px;
}
}
/*----------------------------------------------------------------*/
/* PC4列、スマホ2列 */
.flexbox.box4-2 {
	> * {
		width: calc((100% - var(--spacing)) / 2); 
	}
	@media (min-width: 768px){
		/* PCのみ適用 */
		> * {
			width: calc((100% - var(--spacing) * 3) / 4); 
		}
	}
}

/* 子要素のボックスサイズの個別指定
スマホで縦に並べる場合は親要素をclass="flexbox spCancel"とする */
.flexbox {
	.box25 {
		width: calc((100% - var(--spacing)) * 1 / 4);
	}
	.box75 {
		width: calc((100% - var(--spacing)) * 3 / 4);
	}
	
	.box30 {
		width: calc((100% - var(--spacing)) * 3 / 10);
	}
	.box70 {
		width: calc((100% - var(--spacing)) * 7 / 10);
	}
	
	.box40 {
		width: calc((100% - var(--spacing)) * 4 / 10);
	}
	.box60 {
		width: calc((100% - var(--spacing)) * 6 / 10);
	}
	@media (max-width: 768px) {
		/* スマホでは1列に並べる場合 */
		.spCancel > * {
			width: 100%;
		}
	}
}

/*ページトップスクロール ──────────────────────────────────────────────────*/
#page-top {
	position: fixed;
	right: 10px;
	bottom: 50px;
	z-index: 10;
}

/* ▲ページトップスクロールここまで▲ */

/* スマホなど幅が足りなくなったらspanで囲った単位で強制改行
   spanで囲まれている文章は自動改行がされなくなるので要注意 */
.sp-br span {
  display: inline-block;
  white-space: nowrap;
}

/*画像ループ ──────────────────────────────────────────────────*/
.scroll-container {
  display: flex;
  overflow: hidden;
  width: 100%;
  position: relative;
  margin-top: -15px;
}

.scroll-content {
  display: flex;
  animation: scroll 30s linear infinite;
}

.scroll-content img {
  width: auto;
  height: 80px; 
  object-fit: cover;
  flex-shrink: 0;
}

/* 無限ループアニメーション */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media screen and (max-width: 480px) {
	.scroll-content img {
		height: 50px;
	}
}

.btn-box{
	position: relative;
	z-index: 4;
}

.ti-box{
	position: relative;
	z-index: 6;
	padding: 20px 0;
}

/*リニューアルショップ ──────────────────────────────────────────────────*/

.renewal-shop{
	padding: 20px 0;
	background: #000;
	position: relative;
	z-index: 3;
}

.renewal-shop p{
	color: #fff;
	position: relative;
}

.renewal-shop a{
	position: relative;
	z-index: 3;
}

.renewal-illust{
	 display: block;
	 margin: 0 auto; 
	 width: 50%;
	 position: relative;
	 z-index: 3;
	 background: #000;
}
.renewal-txt{
	font-size: 1.5em;
	font-weight: bold;
	
}

.renewal-txt_01{
	font-size: 1.5em;
	font-weight: bold;
	
}

.renewal-txt_02{
	font-size: 1.2em;
	margin-top: -20px;
}

@media screen and (max-width: 480px) {
	.renewal-txt{
	font-size: 1.2em;
	font-weight: bold;
	
}

.renewal-txt_01 {
	font-size: 1em;
	font-weight: bold;
}

.renewal-txt_02 {
	font-size: 1em;
}

}



/*SNSボタン ──────────────────────────────────────────────────*/
.sns-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	padding: 60px 0 20px;
	background: #000;
	position: relative;
	z-index: 3;
}

@media screen and (max-width: 480px) {
    .sns-btn img{
	max-width: 100px;
}


}

/*光るエフェクト ──────────────────────────────────────────────────*/

.shine-btn {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 45px; 
  width: 90%;          
  margin: 0 auto;
}

.shine-btn img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* 光の筋 */
.shine-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 35%; /* 光の幅 */
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 2.5s infinite linear;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: lighten; /*  画像と自然に馴染む */
}

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}

/*背景アニメーション ──────────────────────────────────────────────────*/


/* 紙吹雪全体のエリア */
.confetti-area {
  position: fixed;
  inset: 0; 
  pointer-events: none; /* クリック操作を邪魔しない */
  z-index: 0; /* 背景側 */
  overflow: hidden;
}

/* 各紙吹雪パーツ */
.confetti {
  position: absolute;
  top: -5vh; /* 少し上から出す（初期位置に余裕） */
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  transform: translateY(0) rotate(0deg); /* 初期transformを明示 */
  animation: fall linear forwards;
  
}

@keyframes fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}