@charset "UTF-8";
/* CSS Document */
@media (max-width: 780px) {
	body {
		overflow-x: hidden;
		font-size: calc(12px + 2 *(100vw - 300px)/450);
	}
	p {
		font-size: calc(12px + 2 *(100vw - 300px)/450);
	}
	main {
		overflow-x: hidden;
		overflow-y: hidden;
	}
	#slideshow-container {
		position: relative;
		width: 100%; /* 親要素の幅は100% */
		height: 0; /* ★★★ 高さを0にする（重要） */
		padding-top: 88.66%; /* ★★★ ここでアスペクト比を固定（例: 100%幅に対する88.66%の高さ） */
		overflow: hidden; /* はみ出たコンテンツを隠す */
		/* text-align: center; はスライドショーのレイアウトには不要 */
	}
	.slideshow-image {
		position: absolute; /* ★★★ 親要素を基準に絶対配置 */
		top: 50%; /* 垂直中央 */
		left: 50%; /* 水平中央 */
		transform: translate(-50%, -50%); /* ★★★ 要素自身の中心を中央に調整 */
		width: 100%; /* 画像の幅を親要素の幅100%に合わせる */
		height: 100%; /* 画像の高さを親要素の高さ100%に合わせる */
		object-fit: cover; /* 画像の縦横比を維持しつつ、要素全体を覆うように拡大・トリミング */
		object-position: center center; /* object-fit使用時の画像の位置を中央に */
		opacity: 0; /* デフォルトは非表示 */
		transition: opacity 1s ease-in-out; /* フェードアニメーション */
		z-index: 1; /* 通常は背面 */
	}
	/* JavaScriptで付与・削除するクラス */
	.active {
		opacity: 1; /* アクティブな画像は完全に表示 */
		z-index: 2; /* アクティブな画像は前面 */
	}
	/* .next クラスはCSSから削除してください。不要です。 */
	.top_btn {
		display: block;
		opacity: 0;
		position: fixed;
		width: 50px;
		height: 50px;
		bottom: 45px;
		right: 10px;
		background-size: contain;
		background-color: transparent;
		background-repeat: no-repeat;
		border: none;
		cursor: pointer;
		outline: none;
		padding: 0;
		appearance: none;
		z-index: 50;
		transition: opacity 0.5s;
	}
	.top_btn img {
		width: 100%;
	}
	
	.close{
		position: absolute;
		z-index: 500;
		background-color: rgba(0,0,0,0.80);
		height: clamp(350px,133vw,1030px);
		width: 100%;
		text-align: center;
		padding-top: 15vw;
	}
	.close img{
		width: 80%;
	}
	.top {
		text-align: center;
	}
	.top_prize img {
		width: 100%;
		margin: auto;
	}
	.top_prize {
		width: 100%;
		margin: 0px auto;
		border-bottom: solid 8px #f0919b;
		border-top: solid 8px #f0919b;
	}
	.top_date {
		position: relative;
		width: 100%;
		background-color: #fef1ed;
		padding: 10px 0px;
	}
	.top_date img {
		width: 90%;
		margin: auto;
	}
	.comingsoon{
		position: absolute;
		top: 0px;
		background-color: rgba(51,51,51,0.80);
		width: 100%;
		height: 100%;
	}
	.comingsoon .cs_img{
		width: 65%;
		transform: translateY(65%);
	}
	.top_logo img {
		width: 95%;
		margin: 0.5em auto;
	}
	.section_title {
		width: 80%;
		margin: 2em auto;
	}
	.section_title img {
		width: 100%;
	}
	.CpFrame {
		background-color: #fffddd;
	}
	.cpframe_in_01 {
		width: 100%;
		margin: auto;
	}
	.cpframe_in_02 {
		position: relative;
		width: 100%;
		margin: 2em auto 0px;
		padding-bottom: 1em;
		line-height: 5em;
	}
	.cpframe_in_02 .cpframe_in_in{
		position: relative;
		width: 90%;
		margin: auto;
		z-index: 10;
	}
	.cpframe_in_title {
		background-color: #d3395d;
		width: 120%;
		margin: 1em auto 2em -10%;
	}
	.cpframe_in_title p {
		color: #fff;
		font-size: 2.2em;
		padding: 0.2em 0px;
		font-weight: 400;
	}
	.cpfr_in_02_img {
		width: 85%;
	}
	.cf01_bg{
		display: none;
	}
	.cf02_bg img{
		display: none;
	}
	.cf02_bg{
		background-image: url("../img/CpFrame-bg-02-sp.png");
		height: 2500px;
		background-size: 100%;
		background-repeat: no-repeat;
		position: absolute;
		bottom: 0px;
		left: 0px;
		background-position: bottom left;
		width: 100%;
		z-index: 1;
	}
	.drink_title_st {
		background-color: #f06c84;
		color: #fff;
		width:90%;
		border-radius: 1em;
		padding: 0.2em 0px;
		margin: 2em auto 0em;
		font-size: 1.2em;
	}
	.drink_title_matcha {
		background-color: #a0c232;
		color: #fff;
		width: 90%;
		border-radius: 1em;
		padding: 0.2em 0px;
		margin: 2em auto 0em;
		font-size: 1.2em;
	}
	.drink_title_houji {
		background-color: #d3a12a;
		color: #fff;
		width: 90%;
		border-radius: 1em;
		padding: 0.2em 0px;
		margin: 2em auto 0em;
		font-size: 1.2em;
	}
	.item {
		border-bottom: solid 45px #f0919b;
	}
	.item_inner {
		width: 100%;
		margin: 0px auto;
		background-color: #fff;
		padding-bottom: 3em;
	}
	.item_text {
		border: solid 3px #e95464;
		border-radius: 20px;
		width: 80%;
		margin: auto auto 4em;
	}
	.item_text p {
		color: #e95464;
		font-size: 2em;
		line-height: 1.1em;
	}
	.item_text p span {
		font-size: 0.6em;
	}
	.item_text .att {
		font-size: 1.2em;
	}
	.drink_name, .pkg_open_text {
		color: #682009;
	}
	.pkg_title {
		width: 90%;
		margin: auto auto 1em;
	}
	.pkg_inner_01 .pkg_in_title, .pkg_inner_02 .pkg_in_title {
		position: absolute;
		width: 40%;
		top: -11vw;
		left: -5%;
	}
	/* --- 既存のスタイルは省略（必要に応じて残す） --- */
	/* 各製品情報ブロック（pkg_inner_01, pkg_inner_02など） */
	.pkg_inner_01, .pkg_inner_02 {
		/* position: relative; は、子要素の z-index や margin-top などの基準として残しておくのが安全 */
		position: relative; /* 必要に応じて残す */
		box-sizing: border-box;
		/* 内部の要素を縦に並べるために必要 */
		display: flex;
		flex-direction: column;
		align-items: center; /* 水平中央寄せ */
		width: 85%;
		margin-top: 5em;
		margin-left: auto;
		margin-right: auto;
		padding: 2em 0px 1em;
		border-radius: 30px;
	}
	.pkg_inner_01 img, .pkg_inner_02 img {
		width: 90%;
	}
	/* スライドインする要素（pkg_in_open） */
	.pkg_in_open {
		width: 90%; /* 親要素の幅に合わせて広げる */
		/* 初期状態は高さ0、透明で隠す */
		max-height: 0px;
		opacity: 0;
		overflow: hidden; /* コンテンツがはみ出さないように隠す */
		/* heightとopacityのアニメーションを設定 */
		transition: max-height 1s ease-out, opacity 0.5s ease-out;
		/* スライド要素内のコンテンツのスタイル */
		text-align: center;
		background-color: #fff;
	}
	.pkg_in_open img {
		width: 80%;
	}
	.pkg_open_text{
		width: 95%;
		margin: 1em auto;
		font-size: calc(10px + 4 *(100vw - 300px)/450);
		
	}
	.pkg_inner_01 {
		background-color: #ffeff1;
		background-image: radial-gradient(circle, #d94a552b 4px, transparent 4px), radial-gradient(circle, #d94a552b 4px, transparent 4px);
		background-position: 0 0, 9px 18px;
		background-size: 18px 36px;
	}
	.pkg_inner_01 .pkg_btn-01 {
		background-image: url("../img/pkg_btn_open-01.png");
	}
	.pkg_inner_02 .pkg_btn-02 {
		background-image: url("../img/pkg_btn_open-02.png");
	}
	.pkg_inner_02 {
		background-color: #fff3b9;
		background-image: radial-gradient(circle, #c4510026 4px, transparent 4px), radial-gradient(circle, #c4510026 4px, transparent 4px);
		background-position: 0 0, 9px 18px;
		background-size: 18px 36px;
	}
	/* pkg_in_open が表示された時の状態 */
	.pkg_in_open.is-visible {
		max-height: 6000px; /* コンテンツの高さに合わせて広がる */
		opacity: 1; /* 不透明 */
		padding-bottom: 2em;
	}
	/* 各ボタン（pkg_btn-01, pkg_btn-02など）のスタイル */
	.pkg_btn-01, .pkg_btn-02 {
		/* z-index と position: relative; は、ボタンに何か他の重ねたい要素がなければ不要になる可能性がありますが、
       安全のため残しておくことをお勧めします。
       もし pkg_in_open とボタンが重なってしまうなら、ボタンの z-index を高く設定する。
       ただし、今回はフロー内に配置されるので、通常は重ならないはずです。 */
		z-index: 1; /* z-indexを低めにしておくか、削除しても良い */
		position: relative; /* z-indexを有効にするため */
		/* 既存の width, height, margin-top, background-image などはそのまま */
		/* margin-top は pkg_in_open とボタンの間のスペースとして機能します */
		margin-top: 0.8em;
		/* ... その他 ... */
		background-size: contain;
		border: none;
		background-color: transparent;
		background-repeat: no-repeat;
		width: 80%;
		height: 100px;
		background-position: center;
		cursor: pointer;
		margin-bottom: 1em;
	}
	/* 閉じるボタンのスタイル（pkg_in_open 内に配置する場合） */
	.pkg_btn_close {
		/* position: absolute; は、pkg_in_open が relative であればその中で機能します */
		position: absolute;
		top: 10px;
		right: 10px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
	}
	.pkg_btn_close img {
		width: 30px;
		height: auto;
	}
	.pkg_btn-01.is-clicked {
		background-image: url("../img/pkg_btn_close-01.png");
	}
	.pkg_btn-02.is-clicked {
		background-image: url("../img/pkg_btn_close-02.png");
	}
	.pkg_att {
		font-family: "Noto Sans JP", sans-serif;
		font-size: 1.2em;
	}
	.prize {
		background-image: repeating-linear-gradient(315deg, #fbe1e5, #fbe1e5 17px, transparent 17px, transparent 19px);
		padding-top: 1em;
		padding-bottom: 3em;
	}
	.prize_img {
		width: 90%;
		display: block;
		margin: 1em auto 2em;
	}
	.prize_text {
		width: 100%;
		margin: auto;
		text-align: center;
	}
	.prize_text_title {
		width: 60%;
		border-radius: 1em;
		background-color: #e7465a;
		color: #fff;
		margin: 2em auto auto;
		font-size: 1.8em;
		font-weight: 500;
	}
	.prize_text_text {
		font-size: 2.5em;
		line-height: 0.3em;
		font-weight: 600;
	}
	.prize_text_text span {
		font-size: 0.65em;
		font-weight: 600;
	}
	
	.prize_text_img {
		width: 80%;
	}
	/* method コンテナのスタイル */
	.method {
		background-color: #fffddd; /* 既存 */
		padding: 1em 0px; /* 既存 */
		/* ★ここから追加・変更★ */
		position: relative; /* 子要素の配置基準に必要 */
		display: flex;
		flex-direction: column; /* 子要素を縦に並べる */
		align-items: center; /* 水平中央寄せ */
		/* width や max-width は既存の他のスタイルや親要素で制御されている可能性があるので、ここでは追加しない */
		/* margin も既存の padding で十分な場合があるので、ここでは追加しない */
		box-sizing: border-box; /* paddingとborderをwidth/heightに含める */
		/* ★ここまで追加・変更★ */
	}
	/* method_img のスタイル（変更なし） */
	.method_img {
		display: block;
		width: 80%;
		margin: auto;
	}
	/* method_arrow のスタイル（変更なし） */
	.method_arrow {
		display: block;
		width: 10%;
		margin: 3em auto;
	}
	.method_text {
		margin: 2em auto;
		line-height: 0px;
		width: 80%;
		text-align: center;
	}
	.method_text p {
		font-family: "Noto Sans JP", sans-serif;
	}
	/* method_btn (ボタン) のスタイル */
	.method_btn {
		background-image: url("../img/method_btn_open.png"); /* 既存 */
		width: 80%; /* 既存 */
		height: 100px; /* 既存 */
		background-color: transparent; /* 既存 */
		background-position: center; /* 既存 */
		background-repeat: no-repeat; /* 既存 */
		background-size: contain; /* 既存 */
		border: none; /* 既存 */
		cursor: pointer; /* 既存 */
		/* ★ここから追加・変更★ */
		z-index: 1; /* 他の要素より手前に表示されるように（必要であれば） */
		position: relative; /* z-indexを有効にするため（必要であれば） */
		/* margin-top は既存の padding や method_inner との間隔で調整される */
		/* ここに font-size: 0; line-height: 0; text-indent: -9999px; を追加して、ボタン内のテキストを隠す */
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		transition: background-image 0.3s ease; /* 画像切り替えのアニメーション */
		/* ★ここまで追加・変更★ */
	}
	/* ★method_btn がクリックされた時（開いた状態）の画像を設定（追加）★ */
	.method_btn.is-clicked {
		background-image: url("../img/method_btn_close.png"); /* 例: 「閉じる」ボタンの画像パス */
	}
	/* method_inner (スライドインするコンテンツ) のスタイル */
	.method_inner {
		width: 80%; /* 既存 */
		border: solid 3px #d3395d; /* 既存 */
		margin: 3em auto; /* 既存 */
		border-radius: 20px; /* 既存 */
		padding: 0px 0px 30px; /* 既存 */
		/* ★ここから追加・変更★ */
		/* 非表示時の初期状態 */
		max-height: 0; /* 高さを0にして隠す */
		opacity: 0;
		overflow: hidden; /* コンテンツがはみ出さないように隠す */
		/* アニメーションの設定 */
		transition: max-height 0.8s ease-out, opacity 0.8s ease-out; /* 0.8秒でアニメーション */
		/* ★ここまで追加・変更★ */
	}
	/* method_inner が表示された時のスタイル（追加） */
	.method_inner.is-visible {
		max-height: 7000px; /* コンテンツがどれだけ伸びても大丈夫な、十分大きな値を設定 */
		/* 実際のコンテンツの高さに合わせて調整してください */
		opacity: 1; /* 不透明 */
	}
	/* method_in_title のスタイル（変更なし） */
	.method_in_title {
		background-color: #d3395d;
		margin: 0px auto 2em;
		padding: 5px 0px;
		font-size: 1.5em;
		color: #fff;
		border-radius: 15px 15px 0px 0px;
	}
	/* method_inner 内の img のスタイル（変更なし） */
	.method_inner img {
		width: 65%;
	}
	/* method_img_02 のスタイル（変更なし） */
	.method_img_02 {
		width: 80%;
		display: block;
		margin: 30px auto;
	}
	/* method_img_02 img のスタイル（変更なし） */
	.method_img_02 img {
		width: 100%;
		margin-top: 30px;
	}
	.receipt {
		background-color: #fef1ed;
	}
	.receipt .section_title {
		margin: 60px auto;
	}
	.receipt_img_01 {
		width: 85%;
		margin: auto;
		display: block;
	}
	.receipt_img_02 {
		width: 90%;
		margin: 80px auto auto;
		display: block;
	}
	/**ここから下OK*/

	.go_btn {
		width: 64%;
		margin-top: 30px;
		margin-bottom: 3em;
	}
	footer {
		background-color: #fef1ed;
		padding-top: 10px;
		padding-bottom: 1.5em;
	}
	.footer_in {
		width: 90%;
		margin: auto;
		justify-content: space-around;
		text-align: center;
	}
	.footer_in img {
		width: 95%;
		margin: auto;
	}
	.footer_in p {
		line-height: 0em;
		margin-top: 2em;
		font-size: 13px;
	}
	.sns_flex {
		display: flex;
		justify-content: space-around;
	}
	.sns_flex a {
		margin: 0px;
	}
	.Mlogo {
		width: 40%;
		display: block;
		margin: 0.8em auto 0.5em 0px;
	}
	.Mlogo img {
		width: 100%;
	}
	.footer_other {
		width: 90%;
		text-align: left;
	}
	.num {
		width: 60% !important;
		margin: 10em 0px auto auto;
	}
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}
}