@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;
}

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

.pc-box{
	display: none;
}

.wrapper{
	width: 100%;
	margin: 0 auto;
}

.mv{
	background-color: #DCDCDC;
	padding: 30% 0 5%;
	position: relative;
}

.mv .title{
	width: 40%;
	margin: 0 auto;
	padding-bottom: 45%;
	position: relative!important;
	z-index: 20!important;
}

.mv .scroll{
	position: absolute;
	width: 15%;
	left: 50%;
	transform: translateX(-50%);
	bottom: 3%;
	z-index: 10;
}


        .svg-container {
			position: absolute;
            width: 100%;
           margin: 0 auto;
			left: 50%;
			transform: translateX(-50%);
			bottom: 20%;
			z-index: 1;
        }

        /* レイヤー1の元の文字の色設定 */
        .st0 {
            fill: #c3ff00; /* ネオンイエロー */
        }

        /* ① テキストレイヤーをマスクで切り抜く設定 */
        #text-layer {
            mask: url(#draw-mask);
            -webkit-mask: url(#draw-mask);
        }

		/* mask-line のアニメーション設定 */
		.mask-line {
		  /* パスの大体の長さを指定します（JavaScriptで正確な長さを取得するのが一番確実です） */
		  stroke-dasharray: 6000;
		  stroke-dashoffset: 6000;

		  /* ベンダープレフィックスを追加して古いスマホブラウザにも対応 */
		  -webkit-animation: draw 4s ease forwards;
		  animation: draw 4s ease forwards;
		}

		/* アニメーションのキーフレーム */
		@-webkit-keyframes draw {
		  to {
			stroke-dashoffset: 0;
		  }
		}

		@keyframes draw {
		  to {
			stroke-dashoffset: 0;
		  }
		}



@media(min-width:750px){
	.sticky-container{
		display: flex;
		justify-content: center;
		column-gap: 50px;
		background-color: #EEEEEE;
	}
	
	.pc-box{
		position: sticky;
        left: 0;
        top: 0;
        display: flex;
        width: 33%;
        height: 100vh;
        justify-content: center;
        align-items: center;
	}
	
	.pc-box__left{
		width: 70%;
	}
		
	.pc-box__left img{
		width: 20vh;
	}
		
	.wrapper{
		width: 33%;
		margin: 0;
		background-color: #fff;
	}
}


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

			consept

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

.concept{
	margin: 25% auto;
}

.concept-img{
	position: relative;
}

.concept-img__shop{
	width: 90%;
}

.concept-img__lead{
	position: absolute;
	width: 18%;
	right: 6%;
	top: 53%;
}

.concept-text{
	margin: 17% 0 0 6%;
}

.concept-text h1{
	font-weight: bold;
	font-size: 1.05rem;
	letter-spacing: .3px;
	line-height: 1.8;
	margin: 0 auto 5%;
}

.concept-text h1 span{
	font-weight: 600;
	font-size: 1.19rem;
	letter-spacing: .5px;
}

.concept-text p{
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: .3px;
}

@media(min-width:750px){

	.concept-img__shop{
		width: 90%;
	}

	.concept-img__lead{
		width: 16%;
	}

	.concept-text{
		margin: 13% 0 0 6%;
	}

	.concept-text h1{
		font-size: 1.4rem;
		letter-spacing: 1px;
		line-height: 1.5;
		margin: 0 auto 5%;
	}

	.concept-text h1 span{
		font-size: 1.7rem;
		letter-spacing: 1px;
	}

	.concept-text p{
		font-size: .9rem;
		letter-spacing: 1px;
	}

}


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

			store-guide

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

.store-guide{
	background-color: #F0F5F5;
	background-image:
		linear-gradient(90deg, #e2e7e7 1px, transparent 1px), 
		linear-gradient(#e2e7e7 1px, transparent 1px);        /* 横線を描く */
		background-size: 20px 20px; /* 1マスの大きさ（幅20px、高さ20px） */
	box-sizing: border-box;
	padding: 10% 2% 2%;
	margin: 5% auto 30%;
}

.store-guide__title{
	width: 60%;
	margin: 8% auto;
}

.store-guide__title p{
	margin: 2% 0;
	font-size: .9rem;
	letter-spacing: .5px;
	text-align: center;
	font-weight: 600;
}


/*-------- store-floor --------*/

.store-floor{
	width: 90%;
	margin: 10% auto 15%;
}

.floor-inner{
	position: relative;
}

.slide{
	position: relative;
	margin: 5% auto;
}

.slide img:first-child{
	display: block;
	width: 100%;
	height: auto;
}

.slide img:last-child{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: fade 6s infinite;
}

@keyframes fade{
	0%{opacity: 0;}
	25%{opacity: 0;}
	50%{opacity: 1;}
	75%{opacity: 1;}
	100%{opacity: 0;}
}

.floor-img{
	width: 23%;
	position: absolute;
	right: -2%;
	top: -13%;
}

.floor3{
	right: auto;
	left: -2%;
}

.floor-txt{
	margin: 3% auto;
	/*width: fit-content;*/
}

.floor-txt ul{
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 12px;
	margin: 5% auto 3%;
}

.floor-txt .justify-content__start{
	justify-content: flex-start;
}

.floor-txt ul li{
	font-size: 1.12rem;
	letter-spacing: .5px;
}

.floor-txt ul li:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 14px;
	background-color: #000;
	margin-left: 12px;
	vertical-align: middle;
}


.floor-txt p{
	font-size: .75rem;
	margin: 3% 0;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif" ;
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1.9;	
}

.width-reset{
	width: auto;
}

.mgb5{
	margin-bottom: 10%;
}


@media(min-width:750px){
	.store-floor{
		margin: 10% auto 20%;	
	}
	
	.store-guide__title p{
		font-size: 1rem;
	}
	
	.floor-txt ul li{
		font-size: 1.6rem;
		letter-spacing: .5px;
	}
	
	.floor-txt ul li:not(:last-child)::after {
		margin-left: 20px;
		height: 20px;
	}
	
	.floor-txt p{
		font-size: .95rem;
		letter-spacing: 1px;
	}
	}

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

			campaign

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

.campaign {
	margin: 10% auto;
}

.campaign-bg{
	background-color: #F0F5F5;
	background-image:
		linear-gradient(90deg, #e2e7e7 1px, transparent 1px), 
		linear-gradient(#e2e7e7 1px, transparent 1px); 
	background-size: 20px 20px;
	padding: 5% 0;
}

.loop-container {
	width: 100%;
	overflow: hidden;
	display: flex;
}

.loop-slide {
	display: flex;
	/* 修正前: animation: :image-scroll 20s linear infinite; */
	/* 修正後: 余分なコロン(:)を削除しました */
	animation: image-scroll 20s linear infinite;
}

.loop-slide img {
	height: 30px;
	width: auto;
	max-width: none;
	padding-right: 30px;
}

@keyframes image-scroll {
	0% {
		/* 修正前: transform: translateY(0); */
		/* 修正後: 横方向(X)に変更しました */
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.campaign-sub{
	width: 76%;
	margin: 10% auto;
}

.campaign-card {
	width: 90%;
	margin: 5% auto 10%; 
	box-sizing: border-box;
	text-align: center;
	position: relative;
}

.campaign-card__bg02{
	background-image: url('../images/campaign_box_02.png');
}

.card-image {
	position: absolute;
	width: 80%;
	top: 23%;
	left: 50%;
	transform: translateX(-51%);
}

.card-image__novelty{
	left: 50%;
	transform: translateX(-49%);
}

.card-image__photo{
	position: absolute;
	width: 27%;
	border-radius: 50px;
	left: 3%;
	top: 46%;
}

.card-text{
	position: absolute;
	bottom: 7%;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

.card-text p {
	font-weight: bold;
	font-size: 15px; 
	color: #000000;
	margin: 8px 0;
	line-height: 1.7;
	letter-spacing: .6px;
}

.card-text .font-8 {
	font-size: .8rem; 
}

.card-text .period {
	font-size: 13px;
	margin: 2% 0;
}

.card-text .novelty-end{
	font-size: .7rem;
}

.card-text__novelty{
	bottom: 9%;
}

.card-text__photo{
	bottom: 5%;
}

@media(min-width:750px){
	

	.loop-slide img {
		height: 40px;
	}
	
	.card-text{
		bottom: 8%;
		}
	
	.card-text p {
		font-size: 18px;
	}
	
	.card-text .period {
		font-size: 16px;
	}
	
	.card-text .font-8 {
		font-size: 17px;
	}
	
	.card-text .novelty-end {
		font-size: .8rem;
	}
	
	.card-text__novelty {
    	bottom: 10%;
		left: 51%;
	}
	
	.card-text {
        bottom: 6%;
    }
	
	.card-image__photo {
		border-radius: 70px;
		top: 44%;
	}
	
}

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

		special-contents

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

.special-contents{
	margin: 25% auto;
}

.special-title{
	margin: 10% auto 20%;
}

/* 画像をグループ化する枠組み */
.special-contents-wrapper {
    position: relative;
    display: inline-block;
    margin: 40px 40px 10px; /* 周りの余白 */
}

/* 吹き出しのベース画像 */
.bubble-img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 線のグループ全体の枠（ここで位置とアニメーションを指定） */
.css-sparkles {
    position: absolute;
    top: -25px;
    right: -20px;
    width: 40px;
    height: 40px;
    animation: flash-animation 1s infinite alternate;
}

/* 3本の線の共通設定（色、太さ、長さ） */
.css-sparkles span {
    position: absolute;
    display: block;
    background-color: #333333; /* 線の色（濃いグレー） */
    width: 1.5px;              /* 線の太さ */
    height: 16px;              /* 線の長さ */
    border-radius: 2px;        /* 先端を少し丸くする */
}

/* 1本目の線（左） */
.css-sparkles span:nth-child(1) {
    top: 0px;
    left: 0px;
    transform: rotate(-10deg); /* 左に20度傾ける */
}

/* 2本目の線（真ん中） */
.css-sparkles span:nth-child(2) {
    top: 3px;
    left: 21px;
    transform: rotate(25deg);  /* 右に25度傾ける */
}

/* 3本目の線（右） */
.css-sparkles span:nth-child(3) {
    top: 15px;
    left: 36px;
    transform: rotate(70deg);  /* 右に70度大きく傾ける */
}

/* 点滅アニメーション */
@keyframes flash-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.special-title p{
	text-align: center;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 1.8;
	margin: 0 auto 10%;
}

/*.special-title img{
	width: 70%;
	margin: 0 auto 2%;
}*/

.contents-section {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 10%;
}

.contents-title-img {
    margin: 10% auto;
}

.contents-section h1{
	text-align: center;
	font-size: 2.6rem;
	margin: 5% auto;
	letter-spacing: 2px;
}

.contents-logo-img {
	width: 60%;
	margin: 10% auto;
}

.contents-description {
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    line-height: 2;
    color: #000000;
    margin: 10% auto;
}

.contents-main-img {
	width: 85%;
	margin: 10% auto;
}

.purchase-link{
	display: block;
	width: 85%;
	margin: 10% auto;
}

.nba{
	width: 60%;
}

/* 親要素（リンク全体）の設定：重なりの基準になります */
.purchase-link {
    position: relative; /* 子要素を絶対配置（absolute）するための基準にします */
    display: inline-block; /* 画像の大きさにぴったり合わせるための設定 */
    width: 100%;
}

/* 画像の下にできる不要な隙間をなくすための設定 */
.purchase-link img {
    display: block;
    width: 100%;
}

/* 画像の上に重なる黒いカバーと文字の設定 */
.coming-soon-overlay {
    position: absolute; /* 親要素（.purchase-link）を基準にして重なるようにします */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* 黒色で80%の透過度 */
    color: #ffffff; /* 白文字 */
    
    /* 文字を上下左右のど真ん中に配置する便利な設定 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 文字の見た目の調整（お好みで変更してください） */
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px; /* 文字の間隔を少し広げて見栄え良くします */
    
    /* 【重要】画像の角の丸みに合わせる設定 */
    /* 「スクリーンショット 2026-08-06 154048.png」のように角が丸いボタンの場合は、
       黒いカバーも同じように丸くしないとはみ出てしまいます */
    border-radius: 50px; /* 画像の丸みに合わせて数値を調整してください */
}

@media(min-width:750px){

	.special-contents-wrapper {
		margin: 40px 70px 10px;
	}
	
	.special-title p {
		font-size: .95rem;
		letter-spacing: 1px;
	}
	
	.contents-description{
		font-size: .95rem;
	}

}


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

		store-info-section

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

.store-info-section {
    background-color: #000000;
    color: #ffffff;
    padding: 60px 20px 40px;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.store-title-wrapper {
    text-align: center;
    margin-bottom: 40px;
}

.store-title-img {
    width: 80%;
	margin: 0 auto;
}

.store-subtitle {
    margin: 2% 0;
	font-size: .8rem;
	letter-spacing: 1px;
	text-align: center;
}

.store-image-wrapper {
    width: 100%;
    margin-bottom: 40px;
}

.store-main-img {
    width: 100%;
    height: auto;
    display: block;
}

.store-details {
    width: 100%;
    text-align: left;
}

.info-block {
    margin-bottom: 30px;
}

.info-label {
    font-size: .75rem;
    margin: 1% 0;
}

.info-text {
    font-size: .75rem;
    line-height: 1.8;
    margin: 0;
}

@media(min-width:750px){
	
	.store-subtitle {
		font-size: 1rem;
	}
	
	.info-label {
		font-size: .85rem;
	}
	
	.info-text {
		font-size: .8rem;
	}
}

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

			follow-us-section

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

.follow-us-section {
	text-align: center;
	padding: 50px 20px;
	background-color: #ffffff;
}

.follow-us-title {
	font-size: 1.6rem;
	letter-spacing: 1px;
	margin-bottom: 30px;
}

.social-links {
	display: flex;
	width: 90%;
	margin: 0 auto;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 40px;
}

.social-item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: #000000;
}

.social-item img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	margin-bottom: 10px;
}

.account-name {
	font-size: .5rem;
	font-weight: bold;
}

.disclaimer {
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.8;
}

@media(min-width:750px){
	.social-links {
		justify-content: center;
		gap: 25px;
	}
	
	.account-name {
		font-size: .7rem;
	}
}