@charset "UTF-8";

/* ------------------------------------
	opening
------------------------------------ */

.opening{
	position:fixed;
	inset:0;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#102D48;
	transition:opacity .8s ease,visibility .8s ease;
}

.opening.is-hide{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}

.opening__inner{
	text-align:center;
}

.opening__logo{
	margin:0;
	opacity:0;
	transform:translateY(2rem);
	animation:openingLogo .8s ease .7s forwards;
}

.opening__logo img{
	width:12rem;
	height:auto;
	display:block;
	margin:0 auto;
}

.opening__company{
	margin-top:2rem;
	color:#fff;
	font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E",serif;
	font-size:2rem;
	font-weight:500;
	letter-spacing:.25em;
	opacity:0;
	transform:translateY(1rem);
	animation:openingLogo .8s ease 1s forwards;
}

@media screen and (max-width:767.98px){

	.opening__logo img{
		width:9rem;
	}

	.opening__company{
		font-size:1.4rem;
		letter-spacing:.18em;
		margin-top:1.5rem;
	}
}

@keyframes openingLogo{

	0%{
		opacity:0;
		transform:translateY(2rem);
	}

	100%{
		opacity:1;
		transform:translateY(0);
	}

}
/* ------------------------------------
	hero
------------------------------------ */

.hero{
	position: relative;
	height: 100svh;
	min-height: 70rem;
	background: url("../img/index/img-mv.jpg");
	background-size: cover;
	background-position: center center;
}
@media screen and (max-width: 1024px){
	.hero{
		height: 90rem;
		min-height: auto;
	}
}
@media screen and (max-width: 767.98px) {
	.hero{
		height: 40rem;
		min-height: auto;
	}
}

.hero .container{
	position: relative;
	height: 100%;
}

.hero__content{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6rem;
	z-index: 2;
}
@media screen and (max-width: 1024px){
	.hero__content{
		bottom: 3rem;
	}
}
@media screen and (max-width: 767.98px) {
	.hero__content{
		left: 0.8rem;
		right: 0.8rem;
		bottom: 2rem;
	}
}

.hero__copy{
	width: 93rem;
	max-width: 100%;
	margin: 0 auto;
}
@media screen and (max-width: 767.98px) {
	.hero__copy{
		width: 100%;
		max-width: 30rem;
		margin: 0 auto;
	}
}

.hero__text{
	color: #FFF;
	margin-top: 3rem;
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 2;
    text-shadow:0 .2rem .8rem rgba(0,0,0,.2);
	text-align: center;
}
@media screen and (max-width: 767.98px) {
	.hero__text{
		margin-top: 1rem;
		font-size: 1.3rem;
		line-height: 1.6;
	}
}

/* ------------------------------------
	about
------------------------------------ */

.about__inner{
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:start;
	gap:3rem;
}
@media screen and (max-width:767.98px){
	.about__inner{
		grid-template-columns:minmax(0,1fr) 18rem;
		column-gap:1.5rem;
		row-gap:2rem;
	}
}

.about__content{
	min-width:0;
}
@media screen and (max-width:767.98px){
	.about__content{
		display:contents;
	}
}

@media screen and (max-width:767.98px){
	.about__content .section__title{
		grid-column:1;
		grid-row:1;
		margin-bottom:0;
	}
}

@media screen and (max-width:767.98px){
	.about__content .section__lead{
		grid-column:1;
		grid-row:2;
		margin-bottom:0;
	}
}

.about__text{
	line-height:1.8;
}
@media screen and (max-width:767.98px){
	.about__text{
		grid-column:1 / 3;
		grid-row:3;
	}
}

.about__text p + p{
	margin-top:3rem;
}
@media screen and (max-width:767.98px){
	.about__text p + p{
		margin-top:1.5rem;
	}
}

.about__image{
	width:100%;
	aspect-ratio:1.46 / 1;
	overflow:hidden;
}
@media screen and (max-width:767.98px){
	.about__image{
		grid-column:2;
		grid-row:1 / 3;
		width: 18rem;
		aspect-ratio:1.46 / 1;
		align-self:start;
	}
}

.about__image img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

/*------------------------------------
message
------------------------------------*/

.message {
	background-color: #F5F5F5;
}

.message__inner{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	align-items:start;
	gap:3rem;
}
@media screen and (max-width:767.98px){
	.message__inner{
		grid-template-columns:minmax(0,1fr) 14rem;
		column-gap:1.5rem;
		row-gap:2rem;
	}
}

.message__image{
	order:2;
}
@media screen and (max-width:767.98px){
	.message__image{
		grid-column:2;
		grid-row:1 / 3;
		width:14rem;
		order:initial;
		align-self:start;
	}
}

.message__image img{
	display:block;
	width:100%;
	height:auto;
}

.message__content{
	min-width:0;
}
@media screen and (max-width:767.98px){
	.message__content{
		display:contents;
	}
}

@media screen and (max-width:767.98px){
	.message__content .section__title{
		grid-column:1;
		grid-row:1;
		margin-bottom:0;
	}
}

@media screen and (max-width:767.98px){
	.message__content .section__lead{
		grid-column:1;
		grid-row:2;
		margin:0;
		align-self:start;
	}
}

.message__text{
	line-height:2;
}
@media screen and (max-width:767.98px){
	.message__text{
		grid-column:1 / 3;
		grid-row:3;
	}
}

.message__sign{
	margin-top:5rem;
}
@media screen and (max-width:767.98px){
	.message__sign{
		grid-column:1 / 3;
		grid-row:4;
		margin-top:.5rem;
	}
}

.message__sign img{
	display:block;
	width:46rem;
	margin-left:auto;
}
@media screen and (max-width:1024px){
	.message__sign img{
		width:30rem;
	}
}
@media screen and (max-width:767.98px){
	.message__sign img{
		width:20rem;
		max-width:100%;
	}
}
.philosophy{
	margin-top: 20rem;
	text-align: center;
}
@media screen and (max-width:767.98px){
	.philosophy{
		margin-top: 6rem;
	}
}

.philosophy__sub {
	margin-bottom: 5rem;
	font-size: 3rem;
}
@media screen and (max-width:767.98px){
	.philosophy__sub {
		margin-bottom: 2rem;
		font-size: 1.8rem;
	}
}

.philosophy__title img{
	display:block;
	width: 60rem;
	max-width: 80%;
	margin:0 auto;
}

.philosophy__copy {
	margin: 2rem 0 9rem;
}
@media screen and (max-width:767.98px){
	.philosophy__copy {
		margin: 1rem 0 6rem;
	}
}

.philosophy__mission img {
	display: block;
	width: 77.5rem;
	max-width: 100%;
	margin: 0 auto;
}

/*------------------------------------
	service
------------------------------------*/

.service{
	color: #FFF;
	background: #102D48;
}

.service__visual{
	position: relative;
	min-height: 50rem;
	padding: 8rem 0;
	background: url("../img/index/bg-service.png") no-repeat center center;
	background-size: cover;
}
@media screen and (max-width:767.98px){
	.service__visual{
		min-height: 20rem;
		padding: 3rem 0;
	}
}

.service__heading{
	width: 50%;
	max-width: 59rem;
}
@media screen and (max-width:767.98px){
	.service__heading{
		width: 100%;
		max-width: none;
	}
}

.service__heading .section__title > span {
    color: #FFF;
}

.service__heading .section__lead {
	color: #FFF;
    text-shadow:0 .2rem .8rem rgba(0,0,0,.2);
}

.service__description{
	margin-top: 2rem;
	color:#FFF;
    text-shadow:0 .2rem .8rem rgba(0,0,0,.2);
}
@media screen and (max-width:767.98px){
	.service__description{
		margin-top: 1rem;
	}
}

.service__body{
	padding: 12rem 0;
}
@media screen and (max-width:767.98px){
	.service__body{
		padding: 4rem 0 6rem;
	}
}

.service__item {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	align-items: center;
	gap: 3rem;
	padding-bottom: 6rem;
	border-bottom: 1px solid rgba(255,255,255,.25);
}
@media screen and (max-width:767.98px){
	.service__item{
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2.5rem;
		padding-bottom: 3rem;
	}
}

.service__item + .service__item{
	padding-top: 6rem;
}
@media screen and (max-width:767.98px) {
	.service__item + .service__item{
		padding-top: 2rem;
	}
}

.service__item:last-child{
	padding-bottom: 0;
	border-bottom: 0;
}

.service__item--reverse .service__content {
	order: 2;
}
@media screen and (max-width:767.98px){
	.service__item--reverse .service__content {
		order: 1;
	}
}

.service__item--reverse .service__images {
	order: 1;
}
@media screen and (max-width:767.98px){
	.service__item--reverse .service__images {
		order: 2;
	}
}

.service__item-title{
	color: #FFF;
	font-size: 3rem;
	font-weight: 500;
}
@media screen and (max-width:767.98px){
	.service__item-title{
		font-size: 1.6rem;
	}
}

.service__item-text{
	margin-top: 1.5rem;
	color: #FFF;
}

.service__images{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	align-items:stretch;
	gap:1.5rem;
	width:100%;
}
@media screen and (max-width:767.98px){
	.service__images{
		grid-template-columns:minmax(0,1fr) minmax(0,1fr);
		gap:.8rem;
	}
}

.service__image{
	width:100%;
	aspect-ratio:4 / 3;
	overflow:hidden;
}
@media screen and (max-width:767.98px){
	.service__image{
		aspect-ratio:4 / 3;
	}
}

.service__image img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}


/*------------------------------------
	equipment
------------------------------------*/

.equipment {
	position: relative;
	padding: 0 0 12rem;
	background: #f5f5f5;
}
@media screen and (max-width:767.98px){
	.equipment {
		padding: 0 0 6rem;
	}
}

.equipment::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 25rem;
	background: #102D48;
}
@media screen and (max-width:767.98px){
	.equipment::before {
		height: 11rem;
	}
}

.equipment .container {
	position: relative;
	z-index: 1;
}

.equipment__mainphoto {
	width: 100%;
	margin: 0;
	aspect-ratio: 2.65 / 1;
	overflow: hidden;
}
@media screen and (max-width:767.98px){
	.equipment__mainphoto {
		aspect-ratio: 1.65 / 1;
	}
}

.equipment__mainphoto img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit:cover;
}

.equipment__body{
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	align-items: start;
	gap: 6rem;
	margin-top: 7rem;
}
@media screen and (max-width:767.98px){
	.equipment__body{
		grid-template-columns:1fr;
		gap: 3rem;
		margin-top: 3rem;
	}
}

.equipment__text {
	margin: 0 0 2.5rem;
}

.equipment__item{
	position: relative;
	padding:1.2rem 0 1.2rem 1.8rem;
	border-bottom:1px solid #B5B5B5;
	color: #000;
	font-size: 1.6rem;
}
@media screen and (max-width:767.98px){
	.equipment__item{
		padding:1rem 0 1rem 1.5rem;
		font-size: 1.2rem;
	}
}

.equipment__item::before {
	content:"・";
	position:absolute;
	top:1.15em;
	left:0;
	line-height:1;
}
@media screen and (max-width:767.98px){
	.equipment__item::before {
		top:1.05em;
	}
}

.equipment__gallery{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:1rem;
}
@media screen and (max-width:767.98px){
	.equipment__gallery{
		display:flex;
		gap:.8rem;
		width:auto;
		margin-right:-2rem;
		padding-right:2rem;
		overflow-x:auto;
		overflow-y:hidden;
		scroll-snap-type:x mandatory;
		scroll-behavior:smooth;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
}

@media screen and (max-width:767.98px){
	.equipment__gallery::-webkit-scrollbar{
		display:none;
	}
}

.equipment__photo{
	width:100%;
	aspect-ratio:1.55 / 1;
	margin:0;
	overflow:hidden;
}
@media screen and (max-width:767.98px){
	.equipment__photo{
		width:82%;
		min-width:82%;
		height:auto;
		aspect-ratio:1.55 / 1;
		flex-shrink:0;
		scroll-snap-align:start;
	}
}

.equipment__photo img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}/*------------------------------------
	company
------------------------------------*/

.company{
	position: relative;
	padding-bottom: 12rem;
	background: #FFF;
}
@media screen and (max-width:767.98px){
	.company{
		padding-bottom: 6rem;
	}
}

.company::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 25rem;
	background: #F5F5F5;
}
@media screen and (max-width:767.98px){
	.company::before{
		height: 9rem;
	}
}

.company .container{
	position:relative;
	z-index:1;
}

.company__mv{
	width:100%;
	aspect-ratio:2.65 / 1;
	overflow:hidden;
}
@media screen and (max-width:767.98px){
	.company__mv{
		width:100%;
		aspect-ratio:2 / 1;
	}
}

.company__mv img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

.company__body{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:6rem;
	margin-top:7rem;
}
@media screen and (max-width:767.98px){
	.company__body{
		grid-template-columns:1fr;
		gap:3rem;
		margin-top:3rem;
	}
}

.company__table{
	width:100%;
	border-collapse:collapse;
	table-layout:fixed;
}

.company__table th{
	width: 13rem;
	padding: 1.2rem 1rem 1.2rem 0;
	border-bottom:1px solid #B5B5B5;
	font-weight:400;
	text-align:left;
	vertical-align: top;
}
@media screen and (max-width:767.98px){
	.company__table th{
		width: 8rem;
		padding:1rem .8rem 1rem 0;
	}
}

.company__table td{
	padding:1.2rem 0;
	border-bottom: 1px solid #B5B5B5;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
    font-weight: 400;
}
@media screen and (max-width:767.98px){
	.company__table td{
		padding: 1rem 0;
	}
}

.company__license{
	margin-top: 6rem;
}
@media screen and (max-width:767.98px){
	.company__license{
		margin-top: 3rem;
	}
}

.company__license-title{
	padding: 0 0 1rem;
	border-bottom:1px solid #B5B5B5;
}

.company__license-item{
	position:relative;
	padding:1.2rem 0 1.2rem 1.8rem;
	border-bottom:1px solid #B5B5B5;
	font-size:1.6rem;
}
@media screen and (max-width:767.98px){
	.company__license-item{
		padding:1rem 0 1rem 1.5rem;
		font-size:1.2rem;
	}
}

.company__license-item::before{
	content:"・";
	position:absolute;
	top:1.15em;
	left:0;
	line-height:1;
}
@media screen and (max-width:767.98px){
	.company__license-item::before{
		top:1.05em;
	}
}

.company__side{
	display:flex;
	flex-direction:column;
	gap:3rem;
}
@media screen and (max-width:767.98px){
	.company__side{
		gap:1.5rem;
		padding-top:0;
	}
}

.company__office{
	width:100%;
	margin:0;
	aspect-ratio:1 / 1;
	overflow:hidden;
}
@media screen and (max-width:767.98px){
	.company__office{
		aspect-ratio:1.2 / 1;
	}
}

.company__office img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.company__map{
	width:100%;
	aspect-ratio: 1.55 / 1;
	overflow:hidden;
}
@media screen and (max-width:767.98px){
	.company__map{
		aspect-ratio: 2 / 1;
	}
}

.company__map iframe{
	display:block;
	width:100%;
	height:100%;
}


/*------------------------------------
	history
------------------------------------*/

.history{
	color: #FFF;
	background: #0F2D47;
}

.history__visual{
	position: relative;
	min-height: 47rem;
	padding: 8rem 0;
	background: url("../img/index/bg-history.jpg") no-repeat center center;
	background-size: cover;
}
@media screen and (max-width:767.98px){
	.history__visual{
		min-height: 20rem;
		padding: 3rem 0;
	}
}

.history__heading {
	width:50%;
	max-width: 59rem;
}
@media screen and (max-width:767.98px){
	.history__heading {
		width: 100%;
		max-width: none;
	}
}

.history__heading .section__title > span {
	color: #FFF;
}

.history__lead{
	color: #FFF;
    margin-bottom: 0;
    text-shadow:0 .2rem .8rem rgba(0,0,0,.2);
}

.history__body{
	padding: 10rem 0;
}
@media screen and (max-width:767.98px){
	.history__body{
		padding: 3rem 0;
	}
}

.history__inner{
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	align-items: start;
	gap: 3rem;
}
@media screen and (max-width:767.98px){
	.history__inner{
		grid-template-columns:1fr;
	}
}

.history__item{
	display: grid;
	grid-template-columns: 22rem minmax(0,1fr);
	gap: 2rem;
	padding: 1.8rem 0;
	border-bottom: 1px solid rgba(255,255,255,.28);
}
@media screen and (max-width:767.98px){
	.history__item{
		grid-template-columns:1fr;
		gap:.8rem;
	}
}

.history__item:first-child{
	padding-top: 0;
}

.history__year{
	color: #FFF;
    font-weight: 400;
}

.history__text{
	color: #FFF;
}

.history__gallery{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	grid-template-areas:
		"ship01 founder"
		"president founder"
		"president ship02"
		"plant plant";
	align-items:stretch;
	gap:1.5rem;
}
@media screen and (max-width:767.98px){
	.history__gallery{
		grid-template-columns:minmax(0,1fr) minmax(0,1fr);
		grid-template-areas:
			"ship01 founder"
			"president founder"
			"president ship02"
			"plant plant";
		gap:.6rem;
	}
}

.history__photo{
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.history__photo img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.history__photo--ship01{
	grid-area: ship01;
	aspect-ratio: 1.55 / 1;
}
@media screen and (max-width:767.98px){
	.history__photo--ship01{
		aspect-ratio: 1.35 / 1;
	}
}

.history__photo--founder{
	grid-area: founder;
	min-height: 43rem;
}
@media screen and (max-width:767.98px){
	.history__photo--founder{
		min-height: 22rem;
	}
}

.history__photo--president{
	grid-area: president;
	min-height: 43rem;
}
@media screen and (max-width:767.98px){
	.history__photo--president{
		min-height: 22rem;
	}
}

.history__photo--ship02{
	grid-area: ship02;
	aspect-ratio: 1.55 / 1;
}
@media screen and (max-width:767.98px){
	.history__photo--ship02{
		aspect-ratio: 1.35 / 1;
	}
}

.history__photo--plant{
	grid-area: plant;
	aspect-ratio: 2.15 / 1;
}
@media screen and (max-width:767.98px){
	.history__photo--plant{
		aspect-ratio: 1.8 / 1;
	}
}

.history__photo figcaption{
	position: absolute;
	left: 1.2rem;
	bottom: 1.2rem;
	z-index: 2;
	margin: 0;
	color: #FFF;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.4;
	text-shadow:0 .1rem .5rem rgba(0,0,0,.8);
}
@media screen and (max-width:767.98px){
	.history__photo figcaption {
		left: .6rem;
		bottom: .6rem;
		font-size: 1rem;
		line-height: 1.3;
	}
}

/*------------------------------------
	contact area
------------------------------------*/

.contact-area{
	position: relative;
	color: #FFF;
	background: url("../img/index/bg-footer.jpg") no-repeat center center ;
	background-size: cover;
}

.contact-area__recruit-inner {
	margin-bottom: 8rem;
	text-align: center;
}
@media screen and (max-width:767.98px){
	.contact-area__recruit-inner {
		margin-bottom: 4rem;
	}
}

.contact-area__recruit-title {
	color: #FFF;
	font-size: 3.5rem;
	font-weight: 500;
}
@media screen and (max-width:767.98px){
	.contact-area__recruit-title{
		font-size: 2rem;
	}
}

.contact-area__recruit-text{
	margin-top: 2rem;
	color: #FFF;
	font-size: 2rem;
	font-weight: 500;
}
@media screen and (max-width:767.98px){
	.contact-area__recruit-text{
		margin-top: 1rem;
		font-size: 1.3rem;
	}
}

.contact-area__recruit-button{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 37.8rem;
	height: 7rem;
	margin: 3rem auto 0;
	border: 1px solid rgba(255,255,255,.5);
	border-radius: 999px;
	background: rgba(95,139,198,.5);
	color: #FFF;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	transition: background .3s ease, color .3s ease;
}
@media screen and (max-width:767.98px){
	.contact-area__recruit-button{
		width: 100%;
		max-width: 28rem;
		height: 5.2rem;
		margin-top: 2.5rem;
		font-size: 1.4rem;
	}
}

.contact-area__recruit-button:hover{
	background: #FFF;
	color: #15588A;
	opacity: 1;
}

.contact-box{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 21rem;
	margin: 0 auto;
	overflow: hidden;
	background-image:
		url("../img/index/bg-contactbox02.png"),
		url("../img/index/bg-contactbox01.png");
	background-repeat:
		no-repeat,
		repeat;
	background-position:
		right bottom,
		center center;
	background-size:
		auto 100%,
		cover;
}
@media screen and (max-width:767.98px){
	.contact-box{
		min-height: 25rem;
		background-size:
			auto 14rem,
			cover;
	}
}

.contact-box__content{
	position: relative;
	z-index: 1;
	padding: 5rem 2rem;
	text-align: center;
}
@media screen and (max-width:767.98px){
	.contact-box__content{
		padding: 4rem 1.5rem;
	}
}

.contact-box__title{
	color: #FFF;
	margin-bottom: 2rem;
	font-family: "Poppins",sans-serif;
	font-size: 6rem;
	font-weight: 500;
	line-height: 1;
}
@media screen and (max-width:767.98px){
	.contact-box__title{
	    margin-bottom: 1rem;
		font-size: 3rem;
	}
}

.contact-box__text{
	color: #FFF;
	font-size: 2rem;
	font-weight: 500;
}
@media screen and (max-width:767.98px){
	.contact-box__text{
		margin-top: 1.5rem;
		font-size: 1.4rem;
	}
}

.contact-box__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 37.8rem;
	height: 7rem;
	margin: 3rem auto 0;
	border-radius: 999px;
	background: rgba(255,255,255,1);
	color: #000;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	transition: background .3s ease, color .3s ease;
}
@media screen and (max-width:767.98px){
	.contact-box__button {
		width: 100%;
		max-width: 28rem;
		height: 5rem;
		margin-top: 2rem;
		font-size: 1.4rem;
		background: rgba(255,255,255,.8);
	}
}

.contact-box__button:hover{
	background: #15588A;
	color: #FFF;
	opacity: 1;
}

.contact-banner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 5rem auto 0;
}
@media screen and (max-width:767.98px){
	.contact-banner {
		margin-top: 2rem;
	}
}

.contact-banner__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc((100% - 3rem) / 2);
	min-height: 8rem;
	background: #FFF;
}
@media screen and (max-width:767.98px) {
	.contact-banner__item{
		width: calc((100% - 1rem) / 2);
		min-height: 6rem;
	}
}

.contact-banner__item:hover {
	opacity:.8;
}