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


#heroimg{
//	padding-top: 80px;
	position: relative;
	margin-bottom: 8rem;
//	@include lg{padding-top: 60px;}
//	@include xs{padding-top: 0px;}
	.row{
		justify-content: flex-end;
		height: 70vh;
		@include md{height: 50vh;}
		.imgArea{
			background: url("../img/heroimg.jpg") no-repeat right 25% top/cover;
			@include xs{background: url("../img/heroimg.jpg") no-repeat right 31% top/cover;}
			width: 75vw;		
		}
		.copyright{
			-ms-writing-mode: tb-rl;
			  writing-mode: vertical-rl;
			  text-orientation: sideways;
			color: #939393;
			font-size: 1.25rem;
			width: 100px;
			text-align: center;
			p{padding-right: 1.5rem;}
			@include md{width: 70px;}
			@include xs{
				font-size: 1rem;
				width: 60px;
			}
		}
	}
	.catchContainer{
		position: absolute;
		top: 150px;
		left: 150px;
		@include lg{left: 100px;}
		@include md{
			left: 50px;
			top: 120px;
		}
		@include sm{
			top: 50px;
		}
		@include xs{
			left: 20px;
  			top: 40px;
		}
		.catchcopy{
			display: inline-block;
			background: #1b377f;
			color: #fff;
			font-size: 3.5rem;
			font-weight: 500;
			padding: 15px;
			margin-bottom: 2.25rem;
			@include md{
				font-size: 2.75rem;
				padding: 10px;
			    margin-bottom: 1.5rem;
			}
			@include xs{
				font-size: 2rem;
				padding: 6px;
				margin-bottom: 1rem;
			}
		}
	}
}


#wrapper #info .container{
	@include lg{max-width: 800px;}
}


#info{
	padding: 5rem 0;
	background: linear-gradient(to right, #ffa64f, #f77f2f);
	position: relative;
	.container{max-width: 1000px;}
	h2{
		color: #fff;
		font-size: 2.25rem;
		span{font-size: 1.25rem;}
	}
	.heichanTop{
		position: absolute;
		display: flex;
		align-items: center;
		width: 150px;
		height: auto;
		top: -220px;
		left: 200px;
		@include lg{left: 120px;}
		@include md{
			top: -150px;
			left: 60px;
			width: 100px;
			height: auto;
		}
		@include sm{
			top: -150px;
			width: 100px;
			height: auto;
			left: 30px;
		}
		@include xs{
			width: 90px;
			height: auto;
			left: 20px;
		}
	}
//	.info{
//		a{transition: 0.2s all linear;
//			.info-box{
//				img{
//					width: 100%;
//					height: 200px;
//					object-fit: cover;
//				}
//				dl{
//					background-color: #fff;
//					padding: 1.5rem 2rem;
//					dt{
//						font-size: 1.85rem;
//						margin-bottom: 0.75rem;
//					}
//					dd{
//						font-size: 1.5rem;
//						line-height: 2.5rem;
//					}
//				}
//			}
//			&:hover dt{color: #ef821d;}
//			&>div{margin-bottom: 2rem;}
//		}
//	}
	.heichanInfo{
		width: 90px;
		position: absolute;
		bottom: 30px;
		right: 2%;
		@include md{
			width: 90px;
			position: inherit;
			margin: 2rem auto 0;
		}
	}
}
	

#menu{
	margin-bottom: 8rem;
	.box{column-gap: 5px;}
	.item{
		width: 100%;
		height: 400px;
		position: relative;
		@include sm{height: 300px;}
		@include xs{height: 350px;}
	}
	.menu-gas{background: url("../img/nav-gas.jpg") no-repeat center top/cover;}
	.menu-ss{background: url("../img/nav-ss.jpg") no-repeat center top/cover;}
	.menu-cooking{
		background: url("../img/nav-cooking.jpg") no-repeat center top/cover;
		margin-top: 5px;	
	}
	dl{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		background-color: rgba(255,255,255,0.85);
		width: 500px;
		padding: 4rem 4rem;
		transition: 0.2s all linear;
		pointer-events: none;
		@include md{width: 350px;}
		@include sm{
			width: 85%;
			padding: 3rem;
		}
		&:hover{background-color: rgba(255,255,255,1);}
		dt{
			font-size: 2.75rem;
			color: #1b377f;
			margin-bottom: 1.25rem;
			@include xs{
				font-size: 2.25rem;
				margin-bottom: 0;
			}
			span{
				font-size: 1.35rem;
				color: #808080;
			}
		}
		.arrow{pointer-events: auto;}
	}
//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーここから実験
//	
//	.menu-box{
//		position: absolute;
//		top: 50%;
//		left: 50%;
//		transform: translateY(-50%) translateX(-50%);
////		-webkit- transform: translateY(-50%) translateX(-50%);
//		background-color: rgba(255,255,255,0.85);
//		width: 500px;
//		padding: 4rem 4rem;
//		transition: 0.2s all linear;
//		pointer-events: none;
//		@include md{width: 350px;}
//		@include sm{
//			width: 85%;
//			padding: 3rem;
//		}
//		h3{
//			font-size: 2.75rem;
//			color: #1b377f;
//			margin-bottom: 1.25rem;
//			@include xs{
//				font-size: 2.25rem;
//				margin-bottom: 0;
//			}
//			span{
//				font-size: 1.35rem;
//				color: #808080;
//			}
//		}
//		&:hover{background-color: rgba(255,255,255,1);}
//	}
//	
	//ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーここまで実験
}	



#heichan{
	margin: 3rem 3rem 18rem;
	@include xs{margin: 0 auto 13rem;}
	.heichanMain{
		max-width: 250px;
		position: absolute;
		top: -40px;
		left: 100px;
		z-index: 10;
		@include md{
			left: 80px;
		}
		@include sm{
			max-width: 200px;
			top: 40px;
			left: 40px;
		}
		@include xs{
			max-width: 180px;
			position: initial;
			margin: 0 auto 2rem;
		}
	}
	.container{
		position: relative;
		background: #fbeee0;
		padding: 3rem 4rem 4rem;
		@include xs{padding: 3rem 3rem 3rem;}
		dl{
			margin-bottom: 6rem;
			@include xs{margin-bottom: 3rem;}
			dt{
				font-size: 2.5rem;
				span{font-size: 1.25rem;}
			}
		}
		.heichanGallery{
			position: relative;
			z-index: 11;
			&>div{@include sm{margin-bottom: 1.5rem;}}
		}
	}
}