@charset "UTF-8";
/* CSS Document */
html{line-height: 1; width: 100%; box-sizing: border-box; background-color: #ffffff; font-size: 62.5%;}
h1,h2,h3,h4,h5,p {margin: 0; border: 0; padding: 0;}
a{color: #fff; text-decoration: none;}

body{width: 100%;}
.bgpack{min-height: 100vh; background: url("../img/hss_bg4.jpg") top / cover;}
/*header*/
header{position: relative; display: grid; grid-template-columns: 12.5% repeat(3, 1fr) 12.5%; grid-template-rows: auto; width: 100%; height: auto; padding: 20px 0;}
.en{font-family: adobe-garamond-pro, sans-serif; font-weight: 400; font-style: normal;}
.en2{font-family: kinescope,sans-serif; font-weight: 400; font-style: normal;}
.jp{font-family: yu-gothic-pr6n, sans-serif; font-weight: 400; font-style: normal;}

#home,#concept,#menu{font-size: 1.6rem;}
.boxa{grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; text-align: left;}
.boxb{grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; text-align: center;}
.boxc{grid-column-start: 4; grid-column-end: 5; grid-row-start: 1; grid-row-end: 2; text-align: right;}
/*body*/
/*section-maintitle*/
.mtitle{margin-bottom: 222px; padding-top: 20px; padding-left: 12.5%; font-size: 3.2rem; line-height: 0; color: #ffffff;}
.stitle{width: 50%; padding: 1.5rem 12.5% 1.5rem 12.5%; font-size: 1.4rem; background-color: #ffffff;}
.stitle2{padding: 333px 12.5% 20px 12.5%; font-size: 1.2rem; color: #ffffff;}

/*section-conts*/
.tjpg img{padding: 20px 67.5% 10px 7.5%; width: 25%; height: auto;}
.jpg img{padding: 0 5%; width: 90%;}
#conts p{padding: 0.25rem 5% 20px; font-size: 1.4rem; line-height: 1.5;}

/*section-info*/
#info{padding-top: 80px; display: grid; grid-template-columns: 12.5% repeat(3, 1fr) 12.5%; grid-template-rows: auto; width: 100%; color: #000000;}
.a{grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; text-align: left; margin-bottom: 10px;}
.d{grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; text-align: left;}
.e{grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; text-align: center;}
.f{grid-column-start: 4; grid-column-end: 5; grid-row-start: 2; grid-row-end: 3; text-align: right; margin-bottom: 50px;}

.g{grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; text-align: left; margin-bottom: 10px;}
.j{grid-column-start: 2; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; text-align: left;}
.k{grid-column-start: 3; grid-column-end: 4; grid-row-start: 4; grid-row-end: 5; text-align: center; margin-bottom: 5px;}
.m{grid-column-start: 2; grid-column-end: 3; grid-row-start: 6; grid-row-end: 7; text-align: left;}
.n{grid-column-start: 3; grid-column-end: 4; grid-row-start: 6; grid-row-end: 7; text-align: center; margin-bottom: 50px;}

.p{grid-column-start: 2; grid-column-end: 3; grid-row-start: 7; grid-row-end: 8; text-align: left; margin-bottom: 10px;}
.s{grid-column-start: 2; grid-column-end: 3; grid-row-start: 8; grid-row-end: 9; text-align: left;}
.t{grid-column-start: 3; grid-column-end: 4; grid-row-start: 8; grid-row-end: 9; text-align: center;}
.u{grid-column-start: 4; grid-column-end: 5; grid-row-start: 8; grid-row-end: 9; text-align: right;}

.n a{color: #000;}

.title{font-size: 1.3rem;}
.details{font-size: 1.4rem;}

footer{padding: 100px 0 75px; text-align: center; color: #000000;}
footer .p{font-size: 1.2rem;}

@media screen and (min-width:600px){
	/*header{background-color: #fff;}*/
	.bgpack{background: url("../img/hss_bg_land4.jpg") top / cover; margin-bottom: 25px;}
	.stitle{width: 20%; padding: 1.5rem 5% 1.5rem 5%; font-size: 1.4rem; background-color: #ffffff;}
	#conts{display: grid; grid-template-columns: 2.5% repeat(2, 1fr) 2.5%; grid-template-rows: auto; width: 100%;}
	.tjpg img{padding: 0 50% 1rem 2.5%; width: auto; height: 2.5rem;}
	#elujuda{grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#plarmia{grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#nigelle{grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#ordeve{grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#prejume{grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#purifica{grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#loretta{grid-column-start: 2; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#addict{grid-column-start: 3; grid-column-end: 4; grid-row-start: 4; grid-row-end: 5; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#doglovers{grid-column-start: 2; grid-column-end: 3; grid-row-start: 5; grid-row-end: 6; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	.jpg img{padding: 0; width: 100%;}
}
	
@media screen and (min-width:1025px){
	/*header{background-color: #fff;}*/
	.bgpack{margin-bottom: 50px;}
	#conts{display: grid; grid-template-columns: 2.5% repeat(3, 1fr) 2.5%; grid-template-rows: auto; width: 100%;}
	#elujuda{grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#plarmia{grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#nigelle{grid-column-start: 4; grid-column-end: 5; grid-row-start: 1; grid-row-end: 2; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#ordeve{grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#prejume{grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#purifica{grid-column-start: 4; grid-column-end: 5; grid-row-start: 2; grid-row-end: 3; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#loretta{grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#addict{grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
	#doglovers{grid-column-start: 4; grid-column-end: 5; grid-row-start: 3; grid-row-end: 4; margin: 1rem; padding: 2rem; border: 0.1rem solid;}
}