@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;
  }
}
//ブレイクポイントを指定------ここまで

html {scroll-behavior: smooth;}
#headerImg{
	margin-bottom: 0;
	.imgContainer{
		background: url( "../img/header-business.jpg") no-repeat center center/cover;
	}
}

//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー仕事内容見出し　３つとも共通の装飾
.businessHeader{
	height: 25vw;
    width: 80%;
    margin: 0 auto 6rem auto;
	position: relative;
	@include sm{
		width: 100%;
		height: 300px;
	}
	.headerTitle{
		position: absolute;
		top: 8%;
		left: 3%;
		p{
			color: #fff;
			margin-bottom: 0;
		}
		h4{
			display: inline-block;
			color: #1b377f;
			font-size: 3rem;
			font-weight: 600;
			background: #fff;
			padding: 5px 10px;
		}
	}
	.mainWorks{
		position: absolute;
		right: 5%;
		bottom: -50px;
		background: linear-gradient(to right, #ffa64f, #f77f2f);
		color: #fff;
		padding: 1.5rem 2.5rem;
		min-width: 200px;
		dt{
			font-size: 1.75rem;
			margin-bottom: 0.75rem;
		}
		li{font-weight: 400;}
	}
}


//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー仕事内容見出し　それぞれの装飾
#gas .businessHeader{
	background: url( "../img/business-gas.jpg") no-repeat center center/cover;
}
#ss .businessHeader{
	background: url( "../img/business-ss.jpg") no-repeat center center/cover;
}
#cooking .businessHeader{
	background: url( "../img/business-cooking.jpg") no-repeat center center/cover;
}

.descRight{
	background:linear-gradient(90deg,#fff 0%,#fff 15%,#fbeee0 15%,#fbeee0 100%);
	@include xs{background: none;}
	margin-bottom: 7rem;
	dl{
		padding: 5rem 5rem;
		@include sm{padding: 5rem 5rem 5rem 0rem;}
		@include xs{padding: 0 2rem;}
	}
}
.descLeft{
	background:linear-gradient(270deg,#fff 0%,#fff 15%,#fbeee0 15%,#fbeee0 100%);
	@include xs{background: none;}
	margin-bottom: 7rem;
	dl{
		padding: 5rem 5rem;
		@include sm{padding: 5rem 0rem 5rem 5rem;}
		@include xs{padding: 0 2rem;}
	}
}
.descImg{
	margin-top: -3rem;
	padding-bottom: 3rem;
	@include xs{padding-bottom: 1.5rem;}
}


//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーガスのお仕事
#gas{
	padding-top: 15rem;
	@include xs{padding-top: 5rem;}
	.pickup{
		margin-top: 3rem;
		margin-bottom: 5rem;
		h5{
			text-align: center;
			font-size: 2.5rem;
			line-height: 2rem;
			margin-bottom: 2rem;
			span{
				font-size: 1.25rem;
				font-weight: 400;
			}
			&::before{
				content: '';/*何も入れない*/
				display:block;/*忘れずに！*/
				height: 10px;
				background: url("../img/deco-18.svg") no-repeat center center/contain;
				margin: 0 auto 15px;
			}
		}
		>div{
			padding: 5rem 7rem;
			border-radius: 20px;
			@include sm{
				padding: 4rem;
				text-align: center;
			}
		}
		.row{
			dt{
				font-size: 2.25rem;
				margin-bottom: 1.5rem;
			}
		}
		.kantakunImg{
			max-width: 200px;
			margin: 0 auto;
			@include sm{margin-bottom: 3rem;}
		}
	}
	.products{
		margin-bottom: 5rem;
		.row{
			max-width: 85%;
   			margin: 0 auto;
			@include xs{width: 60%;}
			figure{margin-bottom: 3rem;}
			figcaption{
				color: #ef821d;
				font-size: 2rem;
				margin-top: 1.5rem;
				font-weight: 500;
				@include xs{font-size: 1.5rem;}
			}
		}
		dl{
			dt{
				display: flex;
				align-items: center;
				&::before,&::after{
					content: "";
					flex-grow: 1;
					border-top: 2px dotted #444;
					display: block;
				}
				&::before{margin-right: 1em;}
				&::after{margin-left: 1em;}
			}
			ul{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				li{
					margin: 4px 20px;
				}
			}
		}
	}
	.price{
		padding: 5rem 7rem;
		border-radius: 20px;
		margin-bottom: 8rem;
		@include sm{padding: 4rem 4rem;}
	}
}

//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーガソリンスタンドのお仕事
#ss{
	padding-top: 15rem;
	@include xs{padding-top: 5rem;}
	.businessHeader{margin-bottom: 15rem;}
	.descLeft{
		position: relative;
//		.coffee{
//			position: absolute;
//			width: 100px;
//			right: 10px;
//			bottom: 0;
//			@include xs{bottom: 160px;}
//		}
	}
}
//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーパン・洋菓子教室
#cooking{
	padding-top: 15rem;
	@include xs{padding-top: 5rem;}
	.course,.cookingInfo,.cookingGallery,.plaza{margin-bottom: 10rem;}
	.row{
			max-width: 100%;
   			margin: 0 auto;
			@include sm{max-width: 100%;}
			figure{
				@include xs{
					padding-right: 5px;
   					padding-left: 5px;
				}
			}
			figcaption{
				color: #ef821d;
				font-size: 1.8rem;
				margin-top: 1.5rem;
				font-weight: 500;
			}
		}
	.course .row{
		@include xs{width: 60%;}
		figure{margin-bottom: 4rem;}
	}
//	.info{
//		a{transition: 0.2s all linear;
//			.info-box{
//				img{
//					width: 100%;
//					max-height: 200px;
//					object-fit: cover;
//				}
//				dl{
//					padding: 1.5rem 2rem;
//					background: #f0f0f0;
//					dt{
//						font-size: 1.85rem;
//						margin-bottom: 0.75rem;
//					}
//					dd{
//						font-size: 1.5rem;
//						line-height: 2.5rem;
//					}
//				}
//			}
//			&:hover dt{color: #ef821d;}
//		}
//	}
	
.blogitem {
	.trim {
		img {
		  top: 50%;
		  -webkit-transform: translate(-50%, -50%);
		  -ms-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
		}
	}
}
	
	.cookingInfo .blogitem{
		background: #f0f0f0;
		margin-bottom: 2rem;
	}
	.cookingGallery{
		ul{
			padding-left: 0;
			li{
				max-height: 300px;
				margin: 0 30px;
				overflow: hidden;
				@include sm{
					margin: 0 10px;
				}
				img{
					object-fit: cover;
				}
			}
		}
	}
	.plaza{margin-bottom: 17rem;}
	.plaza dt{@include xs{margin-top: 2rem;}}
}