@charset "UTF-8";

/* 投稿ページのCSS */
/*========= レイアウトのためのCSS ===============*/

p{
	margin: 20px 0;
	font-size:clamp(1.1rem, calc(0.9rem + 0.625vw), 1.6rem);
	text-align: center;
}

/*========= 1文字ずつ出現させるためのCSS ===============*/

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}

.hidden {
    display: none;
}

/* snsボタン */
.icon-x-corp-logo {
	margin-right: 10px;
}

/* タイトル */
.entry-title {
	text-align: center;
}

/* instagram */
 .instagram-class {
	text-align: -webkit-center;
}

/* タブCSS */
.tab-block .tab-label-group {
/* 	padding-left: 80px !important;	 */
	text-align:center;
}

.tab-block .tab-label-group .tab-label {
	font-weight: bold;
}

/*お店タイトル*/
.midashi {
	margin: 0;
	position: relative;
	font-size: clamp(23px, 5.5vw, 40px);
	text-align: center;
	font-family:serif;
	font-weight:bold;
	margin-bottom:0px !important
}

/*お店タイトルの下部情報*/
.midashi-botomu {
	display: block;
	font-size: 14px;
	margin-top:  10px;
	position: relative;
	width: 140px;
	margin: -5px auto 0;
	background-color: #fff;
}
 
/*お店タイトルの下部情報の線*/
.midashi-botomu:before {
	content: '';
	height: 1px;
	background-color: #000;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: -1;
	width: 200px;
	left: -30px;
}

/*お店の紹介文_お店タイトルの次*/
.present {
	font-family:serif;
	font-size:clamp(11px, 2vw, 30px);
}

/*お店紹介タブを真ん中によせる*/
/* .tab-label-group {
	justify-content: center;
} */

/* タブ項目が10個以内の場合、中央に配置 */
.tab-label-group.center {
    justify-content: center; /* タブ項目を中央に配置 */
}

/* タブ項目が10個以上の場合、左揃えに配置 */
.tab-label-group.start {
    justify-content: flex-start; /* タブ項目を左揃えに配置 */
}


/*タブ内の周辺情報のフォントサイズ*/
#text-respo_1 {
	font-size:clamp(11px, 2vw, 16px);
}

/* スクロールを促すテキストボックスのスタイル */
.scroll-prompt {
	display: none; /* デフォルトでは非表示に */
	position: absolute; /* 固定位置 */
	left: 74%; /* 画面の横中央 */
	transform: translateX(-50%); /* 左右中央揃え */
	background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
	color: #ffffff; /* 白色の文字 */
	padding: 10px; /* 内側の余白 */
	border-radius: 20px; /* 角を丸める */
	z-index: 1000; /* 重なり順を最前面に */
	font-size: 8px; /* 文字サイズ */
	text-align: center; /* テキストを中央揃え */
}

/* モバイルデバイスでのみスクロールを促すテキストボックスを表示 */
@media only screen and (max-width: 630px) {
	.scroll-prompt {
		display: block;
	}
}