/*============================================================
	MAIN
*/
body{
	background-image: url(../images/bg.jpg);
	background-size: cover;
}

#header .container {
  	justify-content: space-between;
}

#header .nav-wrap {
  	display: flex;
  	flex-grow: 1;
  	justify-content: space-between;
}

.main01 {
	display: flex;
	width: 60%;
	margin-top:7rem;
	margin-right:auto;
	margin-left:auto;
	text-align: center;
}
.main02 {
	display: flex;
	width: 60%;
	margin:1.5rem auto;
	text-align: center;
}
.main03 {
	display: flex;
	width: 20%;
	margin:0 auto;
	text-align: center;
}
.main04 {
	display: flex;
	width: 60%;
	margin:0 auto;
	text-align: center;
}
.main05 {
	display: flex;
	width: 100%;
	margin:0 auto;
	margin-top:3rem;
	text-align: center;
}
.responsive {
	width: 60%;
	aspect-ratio: 16/9;
	margin: 50px auto 0 auto;
	}

.shop_1{
	margin:5rem auto 1rem auto;
	width: 20%;
}

.shop{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 15rem 5rem;
}

.shop1{
	flex-basis: 30%;
	margin: 1.5rem 0;
}

.frame_border{
	width: fit-content;
	border: solid;
	border-color: #fff;
	border-radius: 8px; /* 半径が8pxの角丸 */
	background-color: #fff;
	margin: 0 auto 5rem auto;
	padding:1rem 17rem;
}

.frame_border2{
	width: fit-content;
	border: solid;
	border-color: #fff;
	border-radius: 8px; /* 半径が8pxの角丸 */
	background-color: #fff;
	margin: 0 auto;
	padding:0 10rem;
}

.setsumei0{
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	color: #ffffff;
	margin-top: 3rem;
	margin-bottom: 3rem
}

.setsumei1{
	text-align: center;
	font-size: 34px;
	font-weight: bold;
}

.setsumei2{
	text-align: center;
	font-size: 21px;
	font-weight: bold;
	margin: 1rem 0 1rem 0;
}

.setsumei3{
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	margin: 0.5rem 0 3rem 0;
}

.setsumei4{
	text-align: center;
	font-size: 46px;
	font-weight: bold;
	color:#fff;
}
.caution1{
	text-align: center;
	font-size: 16px;
	color: #ffffff;
	margin: 3rem 0 8rem 0;
}

.caution2{
  	text-align: left;
  	display: inline-block;
	font-size: 18px
}

.mg{
	margin:5px 0;
}

.text1{
	font-size: 36px;
	margin:5px 0;
	color:#fff;
}

.text2{
	font-size: 24px;
	margin:5px 0;
	color:#fff;
}

.head-border {
    display: flex;
	justify-content: center;
    align-items: center;
	margin-bottom:25px;
}

.head-border:before,
.head-border:after {
    content: "";
    height: 1px;
    flex-grow: 0.35;
    background-color: #fff;
}

.head-border:before {
    margin-right: 3rem;
}

.head-border:after {
    margin-left: 3rem;
}

/*    レスポンシブ    */
@media screen and (min-width: 0px) and (max-width: 480px) {

	.main01 {
		width: 100%;
		margin:4rem 0 0 0;
	}
	.main02 {
		width: 100%;
		margin:0.5rem 0 0 0;
	}
	.main03 {
		width: 70%;
		margin:0.5rem auto 0 auto;
	}
	.main04 {
		width: 100%;
		margin:2rem 0 1rem 0;
	}
	.responsive {
		width:90%;
		margin: 0 auto;
	}
	.shop_1{
		margin:2rem auto 0rem auto;
		width: 35%;
	}

	.shop{
		margin: 0 0.5rem 3rem 0.5rem;
	}

	.shop1{
		flex-basis: 45%;
		margin: 0.5rem 0;
	}

	.frame_border{
		margin: 0 auto;
		padding:0 2rem;
	}

	.setsumei0{
		font-size: 10px;
		margin: 1rem 0 1.5rem 0;
	}

	.setsumei1{
		font-size: 12px;
		margin: 0 0 5px 0;
	}

	.setsumei2{
		font-size: 10px;
		margin: 0;
	}

	.caution1{
		font-size: 8px;
		margin: 0 0 3rem 0;
	}

	.caution2{
		font-size: 8px
	}

	.setsumei4{
		font-size: 24px;
		margin: 0 0 5px 0;
	}

	.mg{
		margin:1px 0;
	}

	.text1{
		font-size: 20px;
		margin:1px 0;
	}

	.text2{
		font-size: 16px;
		margin:1px 0;
	}

	.head-border {
		margin-bottom:0px;
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {

	.main01 {
		width: 70%;
		margin-top:4rem;
	}
	.main02 {
		width: 80%;
	}
	.main03 {
		width: 60%;
	}
	.main04 {
		width: 100%;
	}
	.shop_1{
		width: 30%;
	}

	.shop{
		margin: 0 5rem;
	}
	.shop1{
		flex-basis: 33%;
		margin: 1rem 0;
	}

	.frame_border{
		padding:0 5rem;
	}

	.setsumei0{
		font-size: 16px;
	}

	.setsumei1{
		font-size: 24px;
	}

	.setsumei2{
		font-size: 16px;
	}

	.caution1{
		font-size: 12px;
		margin-bottom:3rem;
	}
}