@charset "utf-8";

/*===========================================================
drink01
===========================================================*/

.drink01 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 12rem 1.5rem 0;
    position: relative;
}

.drink01-img-container {
    max-width: 172.6rem;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: absolute;
    top: 12rem;
    right: 0;
    left: 0;
    margin: auto;
}

.drink01-img-area01 {
    margin: 5rem 0 0;
    max-width: 50.8rem;
    width: 29.5%;
}

.drink01-illust01 {
    max-width: 34.7rem;
    width: 68.4%;
    margin: 0 0 -4rem auto;
    position: relative;
}

.drink01-img-box01 {
    max-width: 44.5rem;
    width: 87.6%;
}

.drink01-img-area02 {
    max-width: 51.6rem;
    width: 29.9%;
}

.drink01-img-box02 {
    max-width: 44.5rem;
    width: 86.3%;
    margin: 0 0 0 auto;
}

.drink01-illust02 {
    margin: -1.5rem 0 0;
    max-width: 37.2rem;
    width: 72.1%;
    position: relative;
}

.drink01-container {
    max-width: 84rem;
    width: 100%;
    margin: 0 auto;
}

.drink01-title-box {
    text-align: center;
}

.drink-title01-decoration01 {
    line-height: 1.6;
    -webkit-text-stroke: 0.6rem var(--primary);
    text-stroke: 0.6em var(--primary);
    paint-order: stroke;
}

.drink01-text-box {
	margin: 4rem 0 0;
	text-align: center;
}

/*===========================================================
drink02
===========================================================*/

.drink-vertical {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
}

.drink-vertical-decoration01 {
    padding: 1rem 1.5rem;
	font-size: 4rem;
	font-weight: 400;
    --cut: 12px;    
	/* Safari/Chromium 安定用（-webkit-mask） */
	-webkit-mask:
		radial-gradient(circle var(--cut) at 0    0,     transparent 99%, #000 100%) top    left,
		radial-gradient(circle var(--cut) at 100% 0,     transparent 99%, #000 100%) top    right,
		radial-gradient(circle var(--cut) at 0    100%,  transparent 99%, #000 100%) bottom left,
		radial-gradient(circle var(--cut) at 100% 100%,  transparent 99%, #000 100%) bottom right;
	-webkit-mask-size: 51% 51%;
	-webkit-mask-repeat: no-repeat;

	/* 標準プロパティ（対応ブラウザで有効） */
	mask:
		radial-gradient(circle var(--cut) at 0    0,     transparent 99%, #000 100%) top    left,
		radial-gradient(circle var(--cut) at 100% 0,     transparent 99%, #000 100%) top    right,
		radial-gradient(circle var(--cut) at 0    100%,  transparent 99%, #000 100%) bottom left,
		radial-gradient(circle var(--cut) at 100% 100%,  transparent 99%, #000 100%) bottom right;
	mask-size: 51% 51%;
	mask-repeat: no-repeat;
}

.drink-title01-margin01 {
    margin: 5rem 0 0;
}

.drink-title01-margin02 {
    margin: 9rem 1rem 0 0;
}

.drink02 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 16rem 1.5rem 4rem;
	position: relative;
}

.drink02::before {
	content: "";
    display: block;
    width: 68.7%;
    height: 68%;
    background: url(../../../../uploads/drink_bg01.png) center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: -1;
}

.drink02-container {
    max-width: 157rem;
    width: 100%;
    margin: 0 auto 0 0;
}

.drink02-area {
    margin: 0 0 0 auto;
    max-width: 105.6rem;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.drink02-text-area {
    max-width: 25rem;
    width: 100%;
    padding: 0 0 0 1.5rem;
}

.drink02-vertical-area {
    max-width: 23.5rem;
    width: 100%;
}

.drink-title01 {
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 0.05em;
	letter-spacing: 0.18em;
}

.drink02-text-box {
    margin: 3rem 0 0;
}

.drink02-img-area {
	margin: 8rem 0 0;
    max-width: 72.1rem;
    width: 68.3%;
}

/*===========================================================
drink03
===========================================================*/

.drink03 {
    margin: 10rem auto;
    padding: 0 1.5rem;
    max-width: 100%;
    width: 100%;
	position: relative;
}

.drink03::before {
    content: "";
    display: block;
    width: 63%;
    height: 88%;
    background: url(../../../../uploads/drink_bg02.png) center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 3rem;
    right: 0;
    margin: auto;
    z-index: -1;
}

.drink03-container {
    max-width: 166.2rem;
    width: 100%;
    margin: 0 0 0 auto;
}

.drink03-area {
    max-width: 119.2rem;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.drink03-text-area {
    max-width: 27.3rem;
    width: 100%;
}

.drink03-vertical-area {
    max-width: 27.2rem;
    width: 100%;
}

.drink03-img-area {
    max-width: 81.3rem;
    width: 68.2%;
}

.drink03-img-set {
    width: 100%;
}

.drink03-img-box01 {
    margin: 0 0 -13rem;
    max-width: 43rem;
    width: 52.9%;
    position: relative;
}

.drink03-img-box02 {
    max-width: 61rem;
    width: 75.1%;
    margin: 0 0 0 auto;
}

.drink03-text-box {
    max-width: 72.1rem;
    width: 100%;
    margin: 3rem 0 0 auto;
}

/*===========================================================
drink04
===========================================================*/

.drink04 {
	margin: 10rem auto 0;
	padding: 0 1.5rem;
	max-width: 192rem;
	width: 100%;
}

.drink04-container {
	margin: 0 auto;
	padding: 0 0 4rem;
	max-width: 130.3rem;
	width: 100%;
	position: relative;
}

.drink04-container::before {
    content: "";
    display: block;
    width: 100%;
    height: 88%;
    background: url(../../../../uploads/drink_bg03.png) center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
    right: 0;
	left: 0;
    margin: auto;
    z-index: -1;
}

.drink04-area {
	margin: 0 auto;
	max-width: 101.6rem;
	width: 100%;
}

.drink04-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drink04-text-area {
    max-width: 27.5rem;
    width: 100%;
}

.drink04-vertical-area {
    width: 100%;
}

.drink-title01-margin03 {
    margin: auto 0 -5rem;
}

.drink04-img-area {
    max-width: 72.1rem;
    width: 100%;
}

.drink04-img-box {
    margin: 0 0 0 auto;
    max-width: 60.1rem;
    width: 100%;
}

.drink04-text-box {
    margin: 3rem 0 0;
}

/*===========================================================
menuModal
===========================================================*/

.menu-btn-flex {
    margin: 0 auto;
    max-width: 95rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.menu-modal-area01 {
	width: 100%;
}

.menu-modal-area02 {
	width: 100%;
}

.menu-btn02 {
    padding: 2.2rem 1.5rem 2.2rem 3.5rem;
    max-width: 44rem;
    width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
    background: var(--bg-tertiary);
    font-size: 2.1rem;
    font-weight: 400;
    font-family: var(--font-family02);
    border-radius: 3.7rem;
	transition: all .3s;
}

.menu-btn02::before {
	content: "";
	display: block;
	margin: 0 3rem 0 0;
	width: 3rem;
	height: 3rem;
    background: url(../../../../uploads/icon_btn.png) center top;
    background-repeat: no-repeat;
    background-size: cover;
}

.menu-btn02:hover {
    filter: brightness(1.2);
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1920px) {


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

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



}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 1024px) {


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

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

.drink01 {
	padding: 10rem 1.5rem 0;
}

.drink01-img-container {
	position: relative;
	top: 0;
}

.drink-title01-decoration01 {
    -webkit-text-stroke: 0.4rem var(--primary);
    text-stroke: 0.4rem var(--primary);
}

.drink01-img-area01 {
    margin: -1rem 0 0;
}

.drink01-illust01 {
    margin: 0 0 -2rem auto;
}

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 768px) {


/*===========================================================
drink01
===========================================================*/

.drink01 {
	padding: 8rem 1.5rem 0;
}

.drink01-img-area01 {
	width: 45%;
}

.drink01-img-area02 {
	width: 45%;
}

.drink01-text-box {
	text-align: left;
}

.drink-title01-decoration01 {
    -webkit-text-stroke: 0.4rem var(--primary);
    text-stroke: 0.4rem var(--primary);
}

/*===========================================================
drink02
===========================================================*/

.drink02 {
	margin: 6rem auto 0;
	padding: 6rem 0 0;
}

.drink02::before {
    width: 100%;
    height: 72%;
    bottom: auto;
    top: 0;
}

.drink02-area {
    flex-direction: column;
}

.drink02-text-area {
	padding: 0 1.5rem 0 2.5rem;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
}

.drink02-text-box {
    width: 60%;
}

.drink02-img-area {
    margin: 5rem 0 0;
    max-width: 100%;
    width: 100%;
}

.drink02-img-box img {
	width: 100%;
}

/*===========================================================
drink03
===========================================================*/

.drink03 {
    padding: 6rem 0 0;
}

.drink03::before {
    width: 100%;
    height: 83%;
    top: 0;
}

.drink03-area {
    flex-direction: column;
}

.drink03-text-area {
    max-width: 100%;
    padding: 0 1.5rem 0 2.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.drink03-text-box {
    width: 60%;
}

.drink03-img-area {
    margin: 4rem 0 0;
    width: 100%;
}

/*===========================================================
drink04
===========================================================*/

.drink04 {
    margin: 6rem 0 0;
    padding: 0;
}

.drink04-container {
    padding: 4rem 0 0;
}

.drink04-container::before {
    height: 80%;
    bottom: auto;
    top: 0;
}

.drink04-area {
    flex-direction: column;
}

.drink04-text-area {
	padding: 0 1.5rem;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.drink04-vertical-area {
    max-width: 26.7rem;
}

.drink04-text-box {
    width: 55%;
}

.drink04-img-area {
    margin: 10rem 0 0;
    max-width: 100%;
}

.drink04-img-box {
    max-width: 100%;
}

.drink04-img-box img {
    width: 100%;
}

} 


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 576px) {


/*===========================================================
drink02
===========================================================*/

.drink-title01 {
    font-size: 2.5rem;
}

.drink-vertical-decoration01 {
    font-size: 3rem;
}

.drink01-img-area01 {
    margin: -1rem 0 0;
}

.drink01-illust01 {
    margin: 0 0 -1rem auto;
}

.drink02-vertical-area {
	max-width: 20rem;
	width: 40%;
}

.drink02-text-box {
	width: 53%;
}

/*===========================================================
drink03
===========================================================*/

.drink03-vertical-area {
    max-width: 20rem;
    width: 50%;
}

.drink03-text-box {
    width: 48%;
}

/*===========================================================
drink04
===========================================================*/

.drink04-vertical-area {
    max-width: 20rem;
}

.drink04-text-box {
    width: 48%;
}

.drink-vertical-decoration01 {
    padding: 1rem 0.5rem;
}

}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (width <= 414px) {


/*===========================================================
drink04
===========================================================*/

.drink04-vertical-area {
    max-width: 17rem;
}

.drink04-text-box {
    width: 48%;
}

}


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */