@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//メインカラー指定
$red:#E03535;
$red-lignt: #FFE5DE;

//共通
body.active {
  height: 100%;
  overflow: hidden;
}

#wrapper {
	background: $red;
}

#mainimage,#concept,#features,#items,#baked,#gift,#contact {
	width: 97%;
	margin-left: auto;
	margin-right: auto;
}

.maintitle {
	font-size: 16px;
	font-size: 1.6rem;
	span {
		font-family: "Sacramento", cursive;
		font-weight: 400;
		font-style: normal;
		font-size: 80px;
		font-size: 8rem;
		@include md {
			font-size: 60px;
			font-size: 6rem;
		}
		@include xs {
			font-size: 55px;
			font-size: 5.5rem;
		}
	}
}

.anchor {
	margin-top: -115px;
	padding-top: 115px;
	@include md {
		margin-top: -100px;
		padding-top: 100px;
	}
	@include sm {
		margin-top: -80px;
		padding-top: 80px;
	}
}

.fluid-box-l {
	overflow: hidden;
	margin-left: calc(50% - 50vw);
}
.fluid-box-r {
	overflow: hidden;
	margin-right: calc(50% - 50vw);
}

dl {
	text-align: justify;
}

//mainimage
#mainimage {
	position: relative;
	.swiper-img {
		max-width: 100%;
		height: 700px;
		background-position: center;
		@include xl {
			height: 650px;
		}
		@include lg {
			height: 550px;
		}
		@include md {
			height: 450px;
		}
		@include sm {
			height: 400px;
		}
		@include xs {
			height: 350px;
		}
	}
	.img1 {
		background-image: url("../img/top-slide1.jpg");
		background-size: cover;
//		@include sm {
//			background-image: url("../img/top-slide-svd1.jpg")
//		}
	}
	.img2 {
		background-image: url("../img/top-slide2.jpg");
		background-size: cover;
//		@include sm {
//			background-image: url("../img/top-slide-s2.jpg")
//		}
	}
	.img3 {
		background-image: url("../img/top-slide3.jpg");
		background-size: cover;
//		@include sm {
//			background-image: url("../img/top-slide-s3.jpg")
//		}
	}
	.img4 {
		background-image: url("../img/top-slide4.jpg");
		background-size: cover;
//		@include sm {
//			background-image: url("../img/top-slide-s3.jpg")
//		}
	}
//	.swiper-pagination-bullet {
//		width: 5.5rem;
//		height: 3px;
//		@include sm {
//			width: 4rem;
//		}
//		@include xs {
//			width: 3rem;
//			bottom: 5px;
//		}
//	}
//	.swiper-pagination-bullets {
//		bottom: 10px;
//		width: 100%;
//		right: 1.5rem;
//		@include xs {
//			bottom: 5px;
//			right: 1rem;
//		}
//	}
	p {
		position: absolute;
		color: #fff;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		z-index: 111;
		text-align: center;
		font-size: 35px;
		font-size: 3.5rem;
		font-weight: bold;
		line-height: 1.5;
		letter-spacing: 0.16em;
		&::after{
			content: '';/*何も入れない*/
			background-image: url( "../img/underline-white.svg");
			background-size: contain;
			background-repeat: no-repeat;
			display:block;
			height: 45px;
			width: 530px;
			position: absolute;
			bottom:-50px;
			right: 0;
  			left: 0;
			margin: 0 auto;
			@include md {
				width: 430px;
			}
			@include sm {
				width: 350px;
			}
			@include xs {
				width: 300px;
			}
		}
		@include md {
			font-size: 30px;
			font-size: 3rem;
		}
		@include sm {
			font-size: 24px;
			font-size: 2.4rem;
		}
		@include xs {
			font-size: 18px;
			font-size: 1.8rem;
		}
		span {
			font-size: 48px;
			font-size: 4.8rem;
			@include md {
				font-size: 42px;
				font-size: 4.2rem;
			}
			@include sm {
				font-size: 34px;
				font-size: 3.4rem;
			}
			@include xs {
				font-size: 26px;
				font-size: 2.6rem;
			}
		}
	}
}

//news
#news {
	color: #fff;
	.container {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-top: 5rem;
		padding-bottom: 5rem;
		@include sm {
			flex-wrap: wrap;
		}
		.maintitle {
			margin-bottom: 0;
			@include md {
				line-height: 1;
				text-align: center;
			}
			@include sm {
				width: 100%;
				margin-bottom: 3rem;
			}
			span {
				margin-right: 2rem;
				@include md {
					display: block;
				}
				@include sm {
					margin-bottom: -0.5rem;
				}
			}
		}
		p {
			margin-bottom: 0;
			@include md {
				line-height: 2;
			}
			@include xs {
				line-height: 1.75;
				text-align: center;
				margin-bottom: 1rem;
			}
			span {
				text-decoration: underline;
			}
		}
		a {
			background: #fff;
			color: $red;
			border-style: none;
			border: solid 1px #fff;
			font-size: 30px;
			font-size: 3rem;
			font-family: "Josefin Sans", sans-serif;
			font-optical-sizing: auto;
			font-weight: 600;
			font-style: normal;
			padding: 15px 30px;
			position: relative;
			transition: 0.3s;
			@include md {
				font-size: 28px;
				font-size: 2.8rem;
			}
			i{
				vertical-align: -8px;
			}
			img{margin-right: 1rem;}
			&:hover{
				background: $red;
				color: #fff;
			}
			&:focus{outline: none;}
			&::after{
			content: '';/*何も入れない*/
			background-image: url( "../img/accent.svg");
			background-size: contain;
			background-repeat: no-repeat;
			display: inline-block;
			height: 55px;
			width: 30px;
			position: absolute;
			top: -30px;
			right: -30px;
			z-index: 50;
		}
		}
	}
}

//concept
#concept {
	.concept-bg {
		overflow: hidden;
		padding-top: 7rem;
		background: linear-gradient(180deg, rgba(250,247,242,1) 0%, rgba(250,247,242,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
		@include md {
			background: linear-gradient(180deg, rgba(250,247,242,1) 0%, rgba(250,247,242,1) 88%, rgba(255,255,255,1) 88%, rgba(255,255,255,1) 100%);
		}
		@include sm {
			padding-top: 5rem;
			background: linear-gradient(180deg, rgba(250,247,242,1) 0%, rgba(250,247,242,1) 93%, rgba(255,255,255,1) 93%, rgba(255,255,255,1) 100%);
		}
	}
	.maintitle {
		position:relative;
		color: $red;
		margin-bottom: 7rem;
		@include lg {
			margin-bottom: 5rem;
		}
		@include md {
			margin-bottom: 4rem;
		}
		@include sm {
			text-align: center;
		}
		span {
			margin-right: 2rem;
		}
		&::after{
			content: '';/*何も入れない*/
			background-image: url( "../img/underline.svg");
			background-size: contain;
			background-repeat: no-repeat;
			display: block;
			height: 30px;
			width: 315px;
			position: absolute;
			bottom: -2rem;
			left: 0;
			z-index: 100;
			@include md {
				width: 250px;
			}
			@include sm {
				left: 0;
				right: 0;
				margin: auto;
			}
		}
	}
	dl {
		@include sm {
			margin-bottom: 2rem;
		}
	}
	dt {
		color: $red;
		font-size: 23px;
		font-size: 2.3rem;
		line-height: 1.8;
		margin-bottom: 4rem;
		@include lg {
			margin-bottom: 3rem;
		}
		@include md {
			font-size: 21px;
			font-size: 2.1rem;
			margin-bottom: 2rem;
		}
		@include sm {
			text-align: center;
		}
		@include xs{
			font-size: 18px;
			font-size: 1.8rem;
		}
	}
	dd {
		@include lg {
			line-height: 2;
		}
		@include md {
			line-height: 1.8;
		}
		@include xs{
			line-height: 1.7;
			font-size: 15px;
			font-size: 1.5rem;
		}
	}
	.row {
		margin-bottom: 8rem;
		@include sm {
			margin-bottom: 4rem;
		}
		@include xs {
			margin-bottom: 3rem;
		}
		&:nth-of-type(2) {
			margin-bottom: 5rem;
			&>div {
				&:first-child {
					@include sm {
						order: 2;
					}
				}
				&:last-child {
					@include sm {
						order: 1;
					}
				}
			}
			dd {
				margin-top: 15rem;
				@include lg {
					margin-top: 10rem;
				}
				@include md {
					margin-top: 5rem;
				}
				@include sm {
					margin-top: 0;
				}
			}
		}
	}
	.fluid-box-l {
		height: 560px;
		@include lg {
			height: 460px;
		}
		@include md {
			height: 360px;
		}
		@include xs {
			height: auto;
		}
	}
	.fluid-box-r {
		height: 560px;
		@include lg {
			height: 460px;
		}
		@include md {
			height: 360px;
		}
		@include xs {
			height: auto;
		}
	}
}

//features
#features {
	background: #fff;
	padding-top: 15rem;
	padding-bottom: 10rem;
	@include md {
		padding-bottom: 5rem;
	}
	@include xs {
		padding-top: 10rem;
		padding-bottom: 3rem;
	}
	&>div {
		position: relative;
		img {
			position: absolute;
			height: 600px;
			top: 0;
			@include xl {
				height: 550px;
			}
			@include md {
				height: 400px;
				top: 6rem;
			}
		}
		.cakes-l {
			left: 5%;
			@include xl {
				left: 2%;
			}
		}
		.cakes-r {
			right: 5%;
			@include xl {
				right: 2%;
			}

		}

	}
	.maintitle {
		color: $red;
		margin-bottom: 3rem;
		position:relative;
		line-height: 1.4;
		@include md {
			line-height: 1.6;
		}
			&::after{
			content: '';/*何も入れない*/
			background-image: url( "../img/underline.svg");
			background-size: contain;
			background-repeat: no-repeat;
			display: block;
			height: 30px;
			width: 300px;
			position: absolute;
			bottom: 1rem;
			left: 0;
			right: 0;
			margin: 0 auto;
			z-index: 100;
			@include md {
				width: 250px;
			}
			@include xs {
				width: 220px;
			}
		}
	}
	dl {
		text-align: center;
		dt {
			color: #E03535;
			font-size: 23px;
			font-size: 2.3rem;
			line-height: 1.8;
			margin-bottom: 4rem;
			@include lg {
				margin-bottom: 3rem;
			}
			@include md {
				font-size: 21px;
				font-size: 2.1rem;
				margin-bottom: 2rem;
			}
			@include xs{
				font-size: 18px;
				font-size: 1.8rem;
			}
		}
		dd {
			@include xs {
				text-align: justify;
				line-height: 1.7;
				font-size: 15px;
				font-size: 1.5rem;
			}
		}
	}
	
	.grid {
		display: grid;
	    grid-template-columns:1fr 4fr 1fr; 
		grid-template-rows: auto;
		gap: 40px; /* カード間の隙間 */
		justify-content: space-between;
		justify-items: center;
		padding: 0 5%;
		@include xl {
		gap: 20px; /* カード間の隙間 */
		padding: 0 2%;
		}
		img {
			max-height: 600px;
			@include xl {
				max-height: 550px;
			}
		}
	}
}

//items
#items {
	.items-bg {
		background: #fff;
		overflow: hidden;
		padding-top: 3rem;
		padding-bottom: 5rem;
	}
	.maintitle{
		color: $red;
		text-align: center;
		margin-bottom: 5rem;
		position:relative;
		line-height: 1.4;
		&::after{
			content: '';/*何も入れない*/
			background-image: url( "../img/underline.svg");
			background-size: contain;
			background-repeat: no-repeat;
			display: block;
			height: 30px;
			width: 300px;
			position: absolute;
			bottom: 1rem;
			left: 0;
			right: 0;
			margin: 0 auto;
			z-index: 100;
			@include md {
				width: 250px;
			}
			@include xs {
				width: 220px;
			}
		}
	}
	.fluid-box-l,.fluid-box-r {
		height: 450px;
		@include lg {
			height: 410px;
		}
		@include md {
			height: 310px;
		}
		@include sm {
			margin-bottom: 2rem;
		}
		@include xs {
			height: 200px;
		}
	}
	.row{
		margin-bottom: 7rem;
		align-items: center;
		@include sm {
			margin-bottom: 5rem;
		}
		@include xs {
			margin-bottom: 3rem;
		}
		dt{
			color: #E03535;
			font-size: 23px;
			font-size: 2.3rem;
			line-height: 1.8;
			margin-bottom: 2rem;
			@include lg {
				line-height: 1.6;
			}
			@include md {
				font-size: 21px;
				font-size: 2.1rem;
			}
			@include sm {
				margin-bottom: 1rem;
			}
			@include xs{
				font-size: 18px;
				font-size: 1.8rem;
			}
		}
		dd {
			@include md {
				line-height: 1.8;
			}
			@include xs{
				line-height: 1.7;
				font-size: 15px;
				font-size: 1.5rem;
			}
		}
	}
}

//baked
#baked {
	.baked-header{
		background:url("../img/baked-header.png") no-repeat center/cover;
		height: 400px;
		display: flex; /**/
		text-align: center;
		align-items: center;
		justify-content: center;
		@include lg {
			height: 350px;
		}
		@include md {
			height: 280px;
		}
		@include sm {
			height: 230px;
		}
		.maintitle{
			color: #fff;
		}
	}
	.baked-contents{
		background: #FFE5DE;
		padding: 7rem 0;
		@include md {
			padding: 5rem 0;
		}
		@include xs {
			padding: 3rem 0;
		}
		.row {
			margin-bottom: 7rem;
			@include md {
				margin-bottom: 5rem;
			}
			@include sm {
				margin-bottom: 3rem;
			}
		}
		dl{
			dt{
				color: #E03535;
				font-size: 23px;
				font-size: 2.3rem;
				line-height: 2;
				@include lg {
					line-height: 1.8;
				}
				@include md {
					font-size: 21px;
					font-size: 2.1rem;
					margin-bottom: 2rem;
				}
				@include xs {
					font-size: 18px;
					font-size: 1.8rem;
					margin-bottom: 2rem;
				}
			}
			dd {
				@include xs {
					line-height: 1.7;
				}
			}
		}
		.grid {
			display: grid;
			grid-template-columns:repeat(3, 1fr); 
			grid-template-rows: auto;
			gap: 50px;
			@include lg {
				gap: 30px;
			} 
			@include md {
				gap: 30px 20px;
			} 
			@include sm {
				grid-template-columns:repeat(2, 1fr); 
			} 
			@include xs {
				grid-template-columns:repeat(2, 1fr); 
			} 
			.card {
				background: #FFE5DE;
				border-style: none;
				dl {
					dt {
						font-size: 21px;
						font-size: 2.1rem;
						margin: 1rem 0 0.5rem;
						@include lg {
							font-size: 20px;
							font-size: 2rem;
						}
						@include md {
							font-size: 19px;
							font-size: 1.9rem;
							letter-spacing: -1.5px;
						}
						@include sm {
							letter-spacing: 0;
						}
						@include xs {
							font-size: 18px;
							font-size: 1.8rem;
							line-height: 1.7;
						}
					}
					dd {
						line-height: 30px;
						@include md {
							line-height: 1.8;
						}
						@include xs {
							font-size: 15px;
							font-size: 1.5rem;
							line-height: 1.7;
						}
					}
				}
			}
		}
	}
	.attention{
		text-align: center;
	    margin-top: 6rem;
		@include md {
			margin-top: 4rem;
		}
		@include xs{
			margin-top: 2rem;
			line-height: 1.8;
		}
	}
}

//gift
#gift {
	background: #fff;
	padding: 10rem 0;
	@include md {
		padding: 8rem 0;
	}
	.gift-box {
		border: $red solid 1px;
		border-radius: 15px;
	}
	.row {
		align-items: center;
		position: relative;
		&::after {
			content: '';/*何も入れない*/
			background-image: url( "../img/gift.svg");
			background-size: contain;
			background-repeat: no-repeat;
			display: inline-block;
			height: 150px;
			width: 150px;
			position: absolute;
			top: -50px;
			right: 50px;
			z-index: 50;
			@include md {
				height: 100px;
				width: 100px;
				right: 25px;
			}
		}
		&>div {
			&:first-child {
				@include sm {
					overflow: hidden;
					height: 300px;
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				@include xs {
					height: auto;
				}
			}
		}
		dl {
			margin-left: 2rem;
			@include md {
				margin-left: 0;
			}
			@include sm {
				padding: 2rem;
				margin-bottom: 0;
			}
			@include xs {
				padding: 1.5rem;
			}
			dt {
				color: #E03535;
				font-size: 23px;
				font-size: 2.3rem;
				line-height: 40px;
				margin-bottom: 3rem;
				@include md {
					line-height: 1.7;
					margin-bottom: 1.5rem;
				}
				@include xs {
					font-size: 20px;
					font-size: 2rem;
				}
			}
			dd {
				@include md {
					line-height: 2;
				}
				@include xs{
					line-height: 1.7;
					font-size: 15px;
					font-size: 1.5rem;
				}
			}
		}
		img {
			border-radius: 15px 0 0 15px;
			@include sm {
				border-radius: 15px 15px 0 0;
			}
		}
	}
}

//contact
#contact {
	.contact-bg {
		background: #fff;
		padding-bottom: 7rem;
		@include xs {
			padding-bottom: 5rem;
		}
	}
	.container {
		text-align: center;
	}
	.red-container-l {
		background: $red;
		color: #fff;
		display: inline-block;
		height: 85px;
		line-height: 105px;
		padding: 0 20px;
		@include md {
			height: 60px;
		} 
	}
	.red-container-s {
		margin-top:-5px;
		p{
		background: $red;
		display: inline-block;
		padding: 0px 10px;
		color: #fff;
		}
	}
	h2 {
		padding-top: 0.5rem;
	}
	.row {
		margin-top: 2rem;
	}
	.tel,.insta{
		color: $red;
		dl{
			text-align: center;
			dt{
				font-size: 24px;
				display: inline-block;
				border-bottom: 1px solid $red;
				margin-bottom: 2rem;
			}
			dd span{
				font-family: "Josefin Sans", sans-serif;
				font-optical-sizing: auto;
				font-weight: 600;
				font-style: normal;
			}
		}
		
	}
	.tel {
		border-right: 1px solid $red;
		@include sm {
			border: none;
			margin-bottom: 3rem;
		}
		@include xs{
			margin-bottom: 2rem;
		}
		dd {
			margin-top: 1rem;
			@include xs {
				font-size: 15px;
				font-size: 1.5rem;
			}
			span {
				font-size: 70px;
				font-size: 7rem;
				@include lg {
					font-size: 65px;
					font-size: 6.5rem;
				}
				@include md {
					font-size: 55px;
					font-size: 5.5rem;
				}
				@include sm {
					font-size: 60px;
					font-size: 6rem;
				}
				@include xs {
					font-size: 50px;
					font-size: 5rem;
				}
			}
		}
	}
	.insta {
		dd {
			span {
				font-size: 62px;
				font-size: 6.2rem;
				@include lg {
					font-size: 57px;
					font-size: 5.7rem;
				}
				@include md {
					font-size: 50px;
					font-size: 5rem;
				}
				@include sm {
					font-size: 50px;
					font-size: 5rem;
				}
				@include xs {
					font-size: 45px;
					font-size: 4.5rem;
				}
			}
		}
		a {
			display: block;
			margin: 1.5rem auto 0;
			width: 78%;
			background: $red;
			border-radius: 20px;
			line-height: 25px;
			margin-top: 1.5rem;
			color: #fff;
			border: solid 1px $red;
			transition: all 0.2s 0s ease;
			@include sm {
				width: 60%;
			}
			&:hover {
				background: #fff;
				color: $red;
				border: solid 1px #E03535;
			}
			&:focus {
				outline: none;
			}
		}
	}
}