@charset "UTF-8";
/* CSS Document */
body {
	margin: 0px;
	line-height: 0px;
	overflow-x: hidden;
}
main {
	text-align: center;
}
img {
	width: 100%;
}
p {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 600;
	font-style: normal;
	line-height: 1.5em;
	color: #525252;
	font-feature-settings: "palt";
}
/* ウィンドウ幅 750px までのスタイル (モバイルなど) */

/* ウィンドウ幅 751px から 1280px までのスタイル */
@media (min-width: 781px) and (max-width: 1280px) {
	#slideshow-container {
		position: relative;
		width: 100%;
		height: 0px; /* アスペクト比固定のため高さを0に */
		padding-top: 64.7%; /* 幅に対する高さの比率 */
		overflow: hidden; /* はみ出しを隠す */
	}
	.slideshow-image {
		position: absolute;
		top: 50%; /* 垂直中央 */
		left: 50%; /* 水平中央 */
		transform: translate(-50%, -50%); /* 要素自身の中心を中央に調整 */
		width: 246.15%; /* 元の指定を維持 */
		height: 100%; /* 親要素の高さにフィット */
		object-fit: contain; /* 元の指定を維持 */
		object-position: center center; /* 画像を中央に配置 */
		opacity: 0;
		transition: opacity 1s ease-in-out;
		z-index: 1; /* 通常は背面 */
	}
	/* JSで付与するクラス */
	.active { /* .current を .active に変更 */
		opacity: 1;
		z-index: 2;
	}
}
/* ウィンドウ幅 1281px 以上のスタイル */
@media (min-width: 1281px) {
	#slideshow-container {
		position: relative;
		width: 100%;
		height: 827px; /* 元の指定を維持 (固定ピクセル高さ) */
		overflow: hidden; /* はみ出しを隠す */
	}
	.slideshow-image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1920px; /* 元の指定を維持 */
		height: 100%;
		object-fit: contain; /* 元の指定を維持 */
		object-position: center center;
		opacity: 0;
		transition: opacity 1s ease-in-out;
		z-index: 1;
	}
	/* JSで付与するクラス */
	.active { /* .current を .active に変更 */
		opacity: 1;
		z-index: 2;
	}
	.cf01_bg img, .cf02_bg img{
		display: none;
		background-size: 1920px;
		background-repeat: no-repeat;
	}
	.cf01_bg, .cf02_bg{
		background-size: 1920px;
		background-repeat: no-repeat;
	}
	.cf01_bg{
		position: absolute;
		top: 0px;
		height: 553px;
		background-image: url("../img/CpFrame-bg-01.png");
		background-position: top center;
	}
	.cf02_bg{
		position: absolute;
		top: 60px;
		height: 1810px;
		background-image: url("../img/CpFrame-bg-02.png");
		background-position: center;
	}
	.cpframe_in_01 .cpframe_in_in{
		padding-bottom: 60px;
	}
	.cpframe_in_02{
		padding-bottom: 2em;
	}

}
@media(min-width: 781px) and (max-width: 1280px){
	.cpframe_in_01, .cpframe_in_02{
		overflow: hidden;
	}
		.cf01_bg img, .cf02_bg img{
		position: absolute;
		display: block;
	}
	.cf01_bg img:nth-child(1){
		width: 22%;
		max-width: 260px;
		top: -20px;
		left: calc(20px + 160 * ((100vw - 781px) / 499));
	}
	.cf01_bg img:nth-child(2){
		width: 28%;
		max-width: 280px;
		top: 350px;
		left: calc(-65px + 160 * ((100vw - 781px) / 499));
	}
	.cf01_bg img:nth-child(3){
		width: 25%;
		max-width: 300px;
		top: 160px;
		left: calc(650px + 300 * ((100vw - 781px) / 499));
	}
	.cf02_bg img:nth-child(1){
		width: 27%;
		max-width: 270px;
		top: 520px;
		left: calc(-45px + 160 * ((100vw - 781px) / 499));
	}
	.cf02_bg img:nth-child(2){
		width:27%;
		max-width: 270px;
		top: 680px;
		left: calc(580px + 270 * ((100vw - 781px) / 499));
	}
	.cf02_bg img:nth-child(3){
		width: 27%;
		max-width: 250px;
		top: 1040px;
		left: calc(-55px + 220 * ((100vw - 781px) / 499));
	}
	.cf02_bg img:nth-child(4){
		width: 27%;
		max-width: 220px;
		top: 1180px;
		left: calc(620px + 280 * ((100vw - 781px) / 499));
	}
	.cf02_bg img:nth-child(5){
		width: 32%;
		max-width: 280px;
		top: 1520px;
		left: calc(-85px + 200 * ((100vw - 781px) / 499));
	}
	.cf02_bg img:nth-child(6){
		width: 32%;
		max-width: 250px;
		top: 1650px;
		left: calc(600px + 280 * ((100vw - 781px) / 499));
	}
	
}
/* ウィンドウ幅 1921px 以上のスタイル */
@media (min-width: 1921px) {
	#slideshow-container {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 42.86%; /* 幅に対する高さの比率 */
		overflow: hidden;
	}
	.slideshow-image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1920px; /* 元の指定を維持 */
		height: 100%;
		object-fit: contain; /* 元の指定を維持 */
		object-position: center center;
		opacity: 0;
		transition: opacity 1s ease-in-out;
		z-index: 1;
	}
	/* JSで付与するクラス */
	.active { /* .current を .active に変更 */
		opacity: 1;
		z-index: 2;
	}
}
@media (min-width: 781px) {
	p {
		font-size: 18px;
	}
	.close{
		position: absolute;
		z-index: 500;
		background-color: rgba(0,0,0,0.80);
		height: clamp(580px,73vw,912px);
		max-height: 912px; 
		width: 100%;
		text-align: center;
		padding-top: 15vw;
	}
	.close img{
		width: 80%;
		max-width: 600px;
	}
	.top {
		text-align: center;
	}
	.top_prize img {
		width: 75%;
		margin: auto;
	}
	.top_prize {
		border-bottom: solid 13px #f0919b;
		border-top: solid 13px #f0919b;
		width: 100%;
		margin: 0px auto;
		text-align: center;
	}
	.top_date {
		position: relative;
		width: 100%;
		background-color: #fef1ed;
		padding: 10px 0px;
	}
	.top_date img {
		width: 70%;
		margin: auto;
	}
		.comingsoon{
		position: absolute;
		top: 0px;
		background-color: rgba(51,51,51,0.80);
		width: 100%;
		height: 100%;
	}
	.comingsoon .cs_img{
		width: 25%;
	}
	.top_logo img {
		width: 70%;
		margin: 15px auto;
	}
	.section_title {
		width: 535px;
		margin: 80px auto 50px;
	}
	.section_title img {
		width: 100%;
	}
	.CpFrame {
		background-color: #fffddd;
	}
	.cpframe_in_01 {
		width: 100%;
		margin: auto auto -50px;
		position: relative;
		overflow-y: hidden;
		z-index: 10;
		padding-bottom: 60px;
	}
	.cpframe_01{
		width: 570px;
		transform: translateX(10px);
		display: block;
		margin: auto;
	}
	.cf01_bg, .cf02_bg{
		width: 100%;
		z-index: 2;
	}
	.cf01_bg{
		padding-bottom: 60px;
	}
	.cpframe_in_02 {
		position: relative;
		width: 100%;
		margin: auto;
		line-height: 10em;
	}
	.cpframe_in_title {
		background-color: #d3395d;
		width: 100%;
		max-width: 1280px;
		margin: 5em auto 4em;
		text-align: center;
	}
	.cpframe_in_title p {
		color: #fff;
		font-size: 2em;
		padding: 0.2em 0px;
	}
	.cpframe_in_in{
		position: relative;
		z-index: 20;
	}
	.cpfr_in_02_img{
		width: 578px;
		display: block;
		margin: auto;
		margin-bottom: 3em;
	}
	.item {
		background-color: #ffc9d0;
		background-image: radial-gradient(circle, #c51a2838 4px, transparent 4px), radial-gradient(circle, #c51a2838 4px, transparent 4px);
		background-position: 0 0, 9px 18px;
		background-size: 18px 36px;
		border-bottom: solid 50px #f0919b;
	}
	.item_inner {
		width: 90%;
		max-width: 1152px;
		margin: 0px auto;
		background-color: #fff;
		padding-bottom: 50px;
	}
	.item_text {
		border: solid 3px #e95464;
		border-radius: 30px;
		width: 586px;
		margin: auto auto 4em;
	}
	.item_text p {
		color: #e95464;
		font-size: 2.5em;
		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;
	}
	.drink_name {
		margin-top: 1.5em;
	}
	.pkg_title {
		width: 680px;
		margin: auto;
	}
	.drink_title_st {
		background-color: #f06c84;
		color: #fff;
		width: 80%;
		border-radius: 1em;
		padding: 0.2em 0px;
		margin: 2.5em auto -0.5em;
	}
	.drink_title_matcha {
		background-color: #a0c232;
		color: #fff;
		width: 80%;
		border-radius: 1em;
		padding: 0.2em 0px;
		margin: 2em auto -0.5em;
	}
	.drink_title_houji {
		background-color: #d3a12a;
		color: #fff;
		width: 80%;
		border-radius: 1em;
		padding: 0.2em 0px;
		margin: 2em auto -0.5em;
	}
	.pkg_inner_01 .pkg_in_title, .pkg_inner_02 .pkg_in_title {
		position: absolute;
		width: 228px;
		top: -90px;
		left: -50px;
	}
	/* --- 既存のスタイルは省略（必要に応じて残す） --- */
	/* 各製品情報ブロック（pkg_inner_01, pkg_inner_02など） */
	.pkg_inner_01, .pkg_inner_02 {
		/* position: relative; は、子要素の z-index や margin-top などの基準として残しておくのが安全 */
		position: relative; /* 必要に応じて残す */
		/* padding-bottom の transition は不要になります。*/
		/* padding-bottom: 0; */
		/* transition: padding-bottom 0.5s ease-out; */
		box-sizing: border-box;
		/* 内部の要素を縦に並べるために必要 */
		display: flex;
		flex-direction: column;
		align-items: center; /* 水平中央寄せ */
		width: 587px;
		margin: 100px auto 20px;
		padding: 30px 0px;
		border-radius: 30px;
	}
	.pkg_inner_01 img, .pkg_inner_02 img {
		width: 90%;
	}
	/* スライドインする要素（pkg_in_open） */
	.pkg_in_open {
		width: 80%; /* 親要素の幅に合わせて広げる */
		/* 初期状態は高さ0、透明で隠す */
		max-height: 0;
		opacity: 0;
		overflow: hidden; /* コンテンツがはみ出さないように隠す */
		padding-bottom: 1em;
		/* 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_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: 2500px; /* コンテンツの高さに合わせて広がる */
		opacity: 1; /* 不透明 */
	}
	/* 各ボタン（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: 20px;
		/* ... その他 ... */
		background-size: contain;
		border: none;
		background-color: transparent;
		background-repeat: no-repeat;
		width: 450px;
		height: 115px;
		background-position: center;
		cursor: pointer;
		margin-bottom: 30px;
	}
	/* 閉じるボタンのスタイル（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: 60px;
		padding-bottom: 60px;
	}
	.prize_img {
		width: 540px;
		display: block;
		margin: 40px auto;
	}
	.prize_text {
		width: 530px;
		margin: auto;
		text-align: center;
	}
	.prize_text_title {
		width: 80%;
		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;
	}
	/* method コンテナのスタイル */
	.method {
		background-color: #fffddd; /* 既存 */
		padding: 60px 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: 520px;
		margin: auto;
	}
	/* method_arrow のスタイル（変更なし） */
	.method_arrow {
		display: block;
		width: 50px;
		margin: 3em auto;
	}
	.method_text {
		margin: 20px auto 40px;
	}
	.method_text p {
		line-height: 1em;
		margin-bottom: 0px;
		font-family: "Noto Sans JP", sans-serif;
	}
	/* method_btn (ボタン) のスタイル */
	.method_btn {
		background-image: url("../img/method_btn_open.png"); /* 既存 */
		width: 580px; /* 既存 */
		height: 178px; /* 既存 */
		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: 575px; /* 既存 */
		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: 5000px; /* コンテンツがどれだけ伸びても大丈夫な、十分大きな値を設定 */
		/* 実際のコンテンツの高さに合わせて調整してください */
		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: 575px;
		margin: auto;
		display: block;
	}
	.receipt_img_02 {
		width: 683px;
		margin: 80px auto auto;
		display: block;
	}
	/**ここから下OK*/

	.go_btn {
		display: block;
		width: 400px;
		margin: 40px auto auto ;
		margin-bottom: 50px;
	}
	.go_btn img{
		width: 100%;
	}
	footer {
		background-color: #fef1ed;
		padding-top: 10px;
		padding-bottom: 15px;
		margin-top: 50px;
	}
	.footer_in {
		width: 80%;
		max-width: 784px;
		margin: auto;
		justify-content: space-around;
		text-align: center;
	}
	.footer_in img {
		width: 95%;
		margin: auto;
	}
	.footer_in p {
		font-size: 1.5em;
		line-height: 0em;
		margin-top: 2em;
	}
	.sns_flex {
		display: flex;
	}
	.Mlogo {
		width: 230px;
		display: block;
		margin: 2em auto 0.7em 0px;
	}
	.Mlogo img {
		width: 100%;
	}
	.footer_other {
		width: 90%;
		text-align: left;
	}
	.num {
		width: 45% !important;
	}
	.top_btn {
		display: block;
		opacity: 0;
		position: fixed;
		width: 80px;
		bottom: 30px;
		right: 2%;
		border: none;
		cursor: pointer;
		outline: none;
		padding: 0;
		appearance: none;
		z-index: 50;
		transition: opacity 0.5s;
		background-size: contain;
		background-color: transparent;
		background-repeat: no-repeat;
	}
	.top_btn img {
		width: 100%;
	}
	.sp {
		display: none;
	}
	.pc {
		display: block;
	}
}