.text-green{
    color: #576E63;
}
.text-red{
    color: #F00000;
}

.line {
    background:linear-gradient(transparent 60%, #FFE604 60%);
 
}
.triangle {
	width: 0;
	height: 0;
	border-left: 100px solid transparent; 
	border-right: 100px solid transparent;
	border-top: 40px solid #FF8A00; 
}
.triangle-down {
  width: auto;
  height: auto;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 70px solid #ffffff;
}

.triangle-container {
	width: auto; /* or any other size you want */
	height: auto; /* or any other size you want */
	background-color: #FFE604;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
  }

  .centered-text {
	position: absolute;
	top: 80%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 100%;
  }

.bg-gray{
    background: #F3F5F3;
    width: 100%;

}
.bg-green{
    background: #576E63;
}

.bg-yellow{
	background: #FFE604;
}
.bg-orange{
	background: #FF8A00;
}
.bg-cream{
	background: #FFFCE3;
}
.bg-blue{
	background: #1360A7;
}
.max-w-1024 {
    max-width: 1024px;
}

.max-w-720 {
    max-width: 720px;
}
.max-w-640 {
    max-width: 640px;
}

.how-to-drink-listtext {
    width: calc(100% - 36px);
}

.border-color {
    border:  #D9D9D9;
}
.text-with-white-stroke {
	color: #F00000; 
	-webkit-text-stroke: 8px #ffffff; 
	text-stroke: 8px #ffffff;
	font-weight: 800;
}
.text-with-black-stroke {
	color: #000; 
	-webkit-text-stroke: 8px #ffffff;
	text-stroke: 8px #ffffff;
	font-weight: 800;
}


input[type="radio"]:checked + .w-full {
    background-color: rgb(239, 215, 233);
}

/* 吹き出し */
.arrow_box {
	position: relative;
	background: #ffffff;
	border: 1px solid #576E63;
	padding: 16px 20px;
	border-radius: 4px;
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 24px;
	margin-left: -24px;
}
.arrow_box:before {
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #576E63;
	border-width: 25px;
	margin-left: -25px;
}

/* swiper スライド */
.swiper-button-next,
.swiper-button-prev {
    --swiper-navigation-color: #000;
}

.how-to-start {
	min-height: 780px;
}

@media (min-width: 420px) {
	.how-to-start {
		min-height: 860px;
	}
}

@media (min-width: 560px) {
	.how-to-start {
		min-height: 920px;
	}
}

@media (min-width: 640px) {
	.how-to-start {
		min-height: 880px;
	}
}