@charset "utf-8";

li {
	margin-bottom: 0.50rem !important;
}

#header {
	padding-bottom: 80px !important;
}

#subtop_image {
	width: 100%;
	margin-bottom: 2.00rem !important;
}

#subtop_image + p {
	margin-bottom: 2.00rem !important;
	font-size: 1.15rem;
	font-weight: bold;
	text-align: center;
}

main h2 {
	margin-bottom: 3.00rem !important;
	color: rgba(220 105 140 / 1.00);
	font-size: 2.50rem;
	text-align: center;
}

main h2 span{
	margin-top: 1.00rem !important;
	font-size: 1.25rem;
}




	main #main > h2 {
		display: flex;
		flex-direction: column;
	}
	#frm_1 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 90%;
		margin: 0 auto 3.00rem auto !important;
	}

		#frm_1 > li {
			width: calc(100% / 4 - 6px);
			padding: 0.75rem !important;
			background: rgba(245 245 225/ 1.00);
		}

			#frm_1 > li > dl > dt {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

				#frm_1 > li > dl > dt > * {
					text-align: center;
				}

					#frm_1 > li > dl > dt > strong {
						margin-bottom: 0.25rem;
						color: rgba(220 105 140 / 1.00);
						font-size: 1.15rem;
						font-weight: bold;
					}
	#catering_images {
		display: flex;
		justify-content: space-between;
		max-width: 900px;
		width: 90%;
		margin: 0 auto 3.00rem auto !important;
	}

		#catering_images > li {
			width: calc(100% / 3 - 4px);
		}

			#catering_images > li img {
				width: 100%;
			}



	[id^=str] {
		width: 90%;
		margin: 0 auto 2.00rem auto !important;
	}

		[id^=str] h3 {
			margin-bottom: 1.00rem !important;
			text-align: center;
		}

		[id^=str] p {
			margin-bottom: 0.75rem !important;
			line-height: 1.35;
		}

		#str_2 ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: start; /*space-between;*/
			width: 32rem;
			margin: 0 auto !important;
		}
			#str_2 ul li {
				width: 7.50rem;
				margin-bottom: 0.75rem !important;
			}

			#str_3 ul li {
				margin-bottom: 0.75rem !important;
				padding-right: 1.00rem;
				text-indent: -1.00rem !important;
			}

		[id^=str] > article {
			width: 80%;
			margin: 0 auto !important;
		}


	#flow {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		box-sizing: border-box;
		max-width: 1000px;
		padding: 1.00rem !important;
		margin: 4.00rem auto 2.00rem auto !important;
		background: rgba(245 245 225/ 1.00);
	}

		#flow > li:nth-child(1) {
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			width: 8.00rem;
			height: 8.00rem;
			padding: 0.50rem !important;
			background: white;
			border-radius: 100%;
			text-align: center;
		}

		#flow > li:nth-child(2) {
			width: calc(100% - 430px);
			padding-left: 1.00rem;
			margin-left: 1.00rem !important;
			font-size: 0.90rem;
			text-indent: -1.00rem;
		}

			#flow > li img {
				width: 250px;
			}








	#area_slide,
	#area_thumbnails {
		display: flex;
		justify-content: center;
	}

	#slider {
		position: relative;
		width: 80%;
		margin-bottom: 1.00rem !important;
	}

	.btn_prev,
	.btn_next {
		position: relative;
		width: 10%;
	}

	.btn_prev button,
	.btn_next button {
		display: none !important;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		margin: auto auto !important;
		background: rgba(95 175 160/ 1.00);
		border: none;
		border-radius: 100%;
		color: white;
		font-size: 1.25rem;
	}




	.slide{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		box-shadow: 0px 10px 10px -3px rgba(0 0 0 / 0.90);
	}


        .slide * {
            width: 100%;
            height: 100%;
        }

	#thumbnails {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 80%;
	}

        #thumbnails > li {
            width: calc(100% / 6 - 10px);
        }

        #thumbnails img {
            width: 100%;
        }


#bento {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	width: 60%;
	margin: 0 auto 2.00rem auto !important;
}

	#bento dt {
		width: 65%;
	}

	#bento h4 {
		padding-bottom: 1.00rem !important;
	}

	#bento dd {
		width: calc(35% - 15px);
		margin-right: 15px !important;
	}

		#bento img {
			width: 100%;
		}

@media screen and (max-width: 960px) {
    @media screen and (orientation: portrait) {
        #header, #header.index {
            height: 80px;
        }
    }
 
	#header {
		padding-bottom: 80px !important;
	}

		#frm_1 > li {
			width: calc(100% / 2 - 6px);
		}

		[id^=str] {
			width: 100%;
		}

			[id^=str] > article,
			[id^=str] > p,
			[id^=str] > ul {
				width: 100%;
			}



}


@media screen and (max-width: 767px) {
	#bento {
		flex-direction: column;
		width: 90%;
	}
	
	#bento > dt,
	#bento > dd {
		width: 100%;
	}

	#bento > dt {
		margin-bottom: 1.00rem !important;
	}


	#thumbnails > li {
		width: calc(100% / 4 - 10px);
	}

    #str_2  ul {
        width: 100%;
    }

        #str_2 ul li {
            width: auto;
            padding-right: 0.75rem;
        }

    #flow > li:nth-child(3) {
        display: none;
    }

    #flow > li:nth-child(2) {
        width: calc(100% - 150px);
    }
}




@media screen and (max-width: 600px) {
    #frm_1 {
        flex-direction: column;
        width: 100%;
    }

        #frm_1 > li {
            width: 100%;
        }

    #catering_images {
        width: 100%;
    }


    #flow {
        flex-direction: column
    }

    #flow > li:nth-child(1) {
        width: 100%;
        height: auto;
        border-radius: 0;			
        text-align: center;
    }

    #flow > li:nth-child(1) br {
        display: none;
    }

    #flow > li:nth-child(2) {
        width: 100%;
    }
}