.head {
	position: absolute;
	z-index: 100;
}
.head-box {
	padding: 15px 40px;
}

.logo {
	max-width: 400px;
}

.logo h2 {
	font-size: 80%;
	color: #878787;
	margin-bottom: 10px;
}

.head-box h1 {
	max-width: 280px;
}

.menu {
	position: -webkit-sticky; /* Safari */  
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 99;
}

.menu ul {
	display: flex;
	justify-content: flex-end;
	padding: 40px;
	background-color: #fff;
	margin-left: auto;
}
.menu ul li {
	padding: 0 2px;
}
.menu ul li a {
	font-size: 110%;
	font-weight: bold;
	color: #000;
	padding: 10px;
}

.menu ul li a:hover {
	color: #DB1D3B;
	opacity: 1;
}


.main-box {
	background-image: url("../img/cati-bac.png"),url("../img/mainimg-bg-3.jpg");
	background-size: 55%,100% auto;
	background-position: left -13% top 100px,bottom;
	background-repeat: no-repeat,no-repeat;
	display: flex;
	justify-content: space-between;
	padding-bottom:35%;
}

.cati {
	position: -webkit-sticky; /* Safari */  
	position: sticky;
	width: 40%;
	height: 100%;
	top: 40vh;
	box-sizing: border-box;
	padding-left: 10%;
	margin-bottom: 80px;

	
}
.cati img {
	display: inline-block;
	max-width: 500px;
}
.cati h6 {
	color: #DB1D3B;
	font-size: 140%;
	font-weight: bold;
	font-family: Arial, Helvetica, "sans-serif";
	margin-top: 20px;
}
.mainimg {
	width: 60%;
}

.mainimg-text {
	margin-top: 80px;
	margin-left: 20%;
}

.mainimg-text p {
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 150%;
	font-weight: bold;
	line-height: 2.5;
	margin-top: 40px;
	margin-bottom: 40px;
	letter-spacing: 0.2em;
}

.gyara {
	position: absolute;
	width: 100%;
	box-sizing: border-box;
	padding-right: 2%;
	height: 80vh;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	z-index: 10;
	right: 0;
}
.gyara a {
	display: block;
	max-width: 300px;
	background-color: #fff;
	padding: 20px;
	border-radius: 6px;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
	border: 1px solid #fff;
}
.gyara a:hover {
	opacity: 1;
	border: 1px solid #DB1D3B;
}


.sphead {
	display: none;
}



@media screen and ( max-width:800px )
{
.sphead {
	display: block;
}
	.head-box ul {
		display: none;
	}
	
	.menu {
		display: none;
	}
.head {
	position: inherit;
	z-index: 100;
	width: 100%;
}

.logo {
	max-width: 100%;
}
.head-box {
	padding: 15px 80px 15px 20px;
	width: 100%;
	box-sizing: border-box;
}
	
.cati { 
	position: inherit;
	width: 100%;
	height: 100%;
	top: auto;
	box-sizing: border-box;
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 40px;
	margin-top: 40px;

	
}
.cati img {
	display: inline;
	max-width: 100%;
}
	
.main-box {
	background-size: 55%,100% auto;
	background-position: right -13% top 60px,bottom;
	background-repeat: no-repeat,no-repeat;
	display: inherit;
	padding-bottom:35%;
}
.mainimg {
	width: 100%;
}
.mainimg-text {
    margin-top: 40px;
    margin-left: 5%;
	padding-right: 5%;
}
.mainimg-text p {
    font-size: 120%;
    font-weight: bold;
    line-height: 2.0;
    margin-top: 20px;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
}
	
	.sm-conta {
		padding-top: 20px;
		text-align: center;
	}
	.sm-conta h6 a {
		color: #000000;
		font-family: Arial, Helvetica, "sans-serif";
		font-size: 180%;
		font-weight: bold;
		margin-top: 20px;
	}
	
.gyara {
    position: inherit;
    padding: 0% 5% 5% 5%;
    height: auto;
    display: inherit;
    z-index: 10;
    right: 0;
}

}