@charset "utf-8";
/*紅茶の福袋HP*/

body {
	font-family:
	"Yu Mincho",	/* Windows（英語名） */
	"游明朝",		/* Windows（日本語名） */
	"Hiragino Mincho ProN", /* macOS */
	"Hiragino Mincho Pro",
	"MS PMincho",
	serif;
	color: #333;
	background-color: #FDEFF2;
	line-height:1.7;

}

header{
	position: relative;
	padding-top: 3vh; /* 全体を少し上詰め */
}

.fv-top {
	position: absolute;
	top: -4vh;/* ← 全体の上寄せ量 */
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1200px;
}

@media screen and (max-width: 760px) {
	.fv-top {
		top: -2vh;
	}
}

.site-logo {
	display: block;
	width: clamp(120px, 15vw, 280px);
	height: auto;
}

h1{
	margin-top: -16vh; /* ロゴとの距離 */
	text-align: center;
	font-size: clamp(37px, 8vw, 90px);
	line-height: 1.0;
	color: #FC325E;
	font-weight: bold; 
	letter-spacing: 0.1em; /* 文字間を広げる */
}

@media screen and (max-width: 760px) {
	h1 {
		margin-top: -3vh;
	
	}
}

.fv-bottom{
	margin-top: 12vh; /* ← テキストと被らない最小値 */
}
	
.site-firstview {
	display: block;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	height: auto;
}

h2{
	font-size: 45px;
	font-weight: bold; 
}

@media screen and (max-width: 760px) {
	h2{
		font-size: 27px;
	}
}

h3{
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 12px;
}

@media screen and (max-width: 760px) {
	h3{
		font-size: 17px;
	}
}

@media screen and (max-width: 760px) {
	h3 br{
		display: none;
	}
}

header h1 img {
	max-width: 500px;
	height: auto;	
}

p{
	font-size: 16px;
}


.section{
	padding: 88px 0;
}
.card{
	padding: 24px;
	border-radius: 16px;
}

section{
	max-width: 970px;
	margin: 0 auto;	
}

@media screen and (max-width: 760px) {
	section{
	
	}
}

header div.header-logo img.site-logo{
	width: 20vw;
	margin: 0 auto;
	padding: 0 20px;
}

.site-firstview{
	position: relative;
	width: 100%;
	display: block;
	margin: 0 auto; /* 横中央 */
	vertical-align: bottom; /* 下辺を基準に */
}

.header-logo{
	 position: relative;
}

/*＠＠＠馬イラスト ＠＠ */
.fv-price-wrap {
position: relative;
}

img.uma{
	position: absolute;

/* 位置：今の場所を維持 */
	right: 3vw;
	top: 40vw;/* ← FVとPRICEの境目あたり */

/* サイズ：画面幅で変動 */
	width: 25vw;
	min-width: 90px;
	max-width: 200px;
	height: auto;
	z-index: 5;
	pointer-events: none;
}

@media screen and (max-width: 760px) {
	img.uma{
		top: 75vw;
		transform: rotate(20deg); /* 30度時計回りに傾ける */
		width: 5vw;
	}
}

/*＠＠＠PRICE関連 ＠＠ */
.price-bg {
	background-color: #999092CC;
}

section.price {
	margin: 0 auto;
	padding: 30px 0;
	

}

@media screen and (max-width: 760px) {
	section.price {
	padding: 10px;
	flex-direction: column;
	gap: 6vw; /* 縦の余白を少し広めに */
	}
}

section.about {
	margin: 0 auto;
	padding: 30px 0;
}

@media screen and (max-width: 760px) {
	section.about {
		padding: 10px;
	}
}

.card{
	background: #FCCAD5;
	padding: 16px;
	border-radius: 0;
	display: flex;
	align-items: center; /* 子要素を垂直方向（上下）の中央に配置 */
}
.card.card01{
	margin-bottom: 12px;
	
}

.card-inner {
	border-radius: 0;
	width: 40%;
	
}
.card-inner.midori{
	background: #F1FCED;

}

.card-inner.kiiro{
	background: #FCF9ED;

}

.moji{
	/*フォントサイズを画面幅の @vw で可変させつつ、ただし @px より小さくならず、@px より大きくならないようにする */
	width: 60%;
	text-align: center;

}


.moji p{
	font-size: clamp(20px, 8vw, 60px);
	font-weight: bold;

}

.moji.fukubukuro01-moji{

}


.moji.fukubukuro01-moji p{
	text-shadow: 2px 2px 5px #F1FCED;;
}

.fukubukuro02{
	
}

.moji.fukubukuro02-moji{

}

.moji.fukubukuro02-moji p{
	text-shadow: 2px 2px 5px #FCF9ED;
}

/*＠＠＠ABOUT関連 ＠＠ */

.about-bg{
	background-image: 
	linear-gradient(
	rgba(255,255,255,0.7),
	rgba(255,255,255,0.7)
	),
	url('../images/about_bg.jpg'); /* 画像のパスを指定 */
	background-position: right top;
	background-size: 3000px; /* 背景画像の大きさ */

}

.card.about-card{
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap; /* 溢れたら折り返す */
	align-items: flex-start;
}

.about-card h3 {
	flex-basis: 100%;
	text-align: center;
}

.cd01{
	background-color: #F1FCED;

}

.cd02{
	background-color: #FCF9ED;
}


.about-items{
	display: inline;
	width: 50%;
}

.item{
	background: #FDEFF2;
	width: 90%; /* 親要素の幅の50% */
	box-sizing: border-box; /* paddingやborderを幅に含める */
	margin: auto;

}

li{
	text-align: center;
	font-size: clamp(13px, 3vw, 24px); 
}

@media screen and (max-width: 760px) {
	li br{
		display: none;
	}
	
	li p{
		font-size: 12px;
		text-align: left;
	}

}

.bold {
	font-weight: bold;
}



ul {
	list-style: none; /* または list-style-type: none; */
	padding-left: 0; /* 左の余白を消す場合 */
}

.price-area {	 
	display: flex;
	justify-content: flex-end;
}

.price01{
	width: 100%;
}

p.about-price{
	font-size: clamp(20px, 8vw, 55px);
	font-weight: bold;
	height: auto;
	margin: 0;
}

/*ABOUTデコレーション*/

.about {
	position: relative;
}

.about-decorations {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.about-decorations img {
	position: absolute;
}

.flower01 {
	top: 150px;
	left: -70px;
	width: 120px;
}

@media screen and (max-width: 760px) {
	.flower01 {
		top: 30px;
		left: -10px;
		width: 87px;
	}
}

.flower02 {
	top: 80px;
	right: -20px;
	width: 150px;
}

@media screen and (max-width: 760px) {
	.flower02 {
		width: 87px;
	}
}

.woman {
	top: 1080px;
	right: -95px;
	width: 180px;
	z-index: 2;
}

@media screen and (max-width: 760px) {
	.woman {
	top: 502px;
	right: 35px;
	width: 112px;
	}
}

.kozuchi {
	top: 1300px;
	left: -130px;
	width: 250px;
}

@media screen and (max-width: 760px) {
	.kozuchi {
		top: 600px;
		left: -20px;
		width: 121px;
	}
}

.tai {
	bottom: 60px;
	right: -80px;
	width: 150px;
}

@media screen and (max-width: 760px) {
	.tai {bottom: 50px;
	right: -10px;
	width: 100px;
	}
}

.kumo {
	bottom: -84px;
	right: 60px;
	width: 222px;
	z-index: 2;
}

@media screen and (max-width: 760px) {
	.kumo {
		bottom: -54px;
		width: 132px;
	}
}


/*＠＠＠CAUTION関連 ＠＠ */
@media screen and (max-width: 760px) {
	section.caution {
	padding: 10px;
	
	}
}

.caution-bunshou {
	background: #FFF;
	padding: 20px;
}

.caution-bunshou p{
	text-align: left;
	font-size: 20px;
}

@media screen and (max-width: 760px) {
	.caution-bunshou p{
		font-size: 16px;
	}
	
	.caution-bunshou p br{
		display: none;
	}
}

.caution-bunshou p span{
	background: #FDEFF2;
	margin: 0 10px;
}

/*＠＠＠CAUTION飾り設定 ＠＠ */
.caution {
	position: relative;
}

.caution-decorations {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/*CAUTIONデコレーション*/


.flower03 {
	position: absolute;
	top: 40px;
	left: -100px;
	width: 120px;
}

@media screen and (max-width: 760px) {
	.flower03 {position: absolute;
	display: block;
	}
}

.teacup {
	position: absolute;
	top: 400px;
	right: -30px;
	width: 170px;
	z-index: 2;
}

@media screen and (max-width: 760px) {
	.teacup {
	top: 370px;
	right: 10px;
	width: 90px;
	}
}

/*＠＠＠RESEVATION設定 ＠＠ */
.reservation{
	padding: 20px 0 50px 0;

}
.yoyaku-bg{
	position: relative; /* ← 超重要 */
	background-image: url(../images/reservation.jpg);
	background-size: cover;
	background-position: center;
	height: 300px; /* 好きな高さでOK */
}

.reservation a p{
	text-align: center;
	font-size: 40px;
	margin-bottom: 0;
}

@media screen and (max-width: 760px) {
	.reservation a p{
	font-size: 25px;
	}
}

.yoyaku-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fffdf5;
	padding: 24px 40px;
	border-radius: 8px;
	text-align: center;
	color: #333;
}

@media screen and (max-width: 760px) {
	.yoyaku-box {
		padding: 10px;
	}
}

/*＠＠＠FOOTER設定 ＠＠ */
footer{
	background: #666061;
	display: flex; /* 子要素を横並びにする */
	align-items: center;
	justify-content: space-between;
	padding: 30px 50px;
	height: auto;
	width: 100vw;
}

@media screen and (max-width: 760px) {
	footer{padding: 0px 3px;
	}
}
	
.otoiawase{
	color: #FFFFFF;
	text-align: center;
	font-size: 20px;
}

.copyright{
	color: #FFFFFF;
	font-size: 20px;
}
@media screen and (max-width: 760px) {
	.otoiawase{
	font-size: 16px;
	}
	.copyright{
		font-size: 16px;
	}
}
.footer-logo{
	background-color: rgba(255, 255, 255, 0.3); 
	border-radius: 10px;
	height: 82px;
	display: flex;
	align-items: center;/* 縦の中央 */
	justify-content: center;/* 横の中央 */
}

@media screen and (max-width: 760px) {	
	.footer-logo{
		height: 42px;
	}
}