@charset "utf-8";
/* CSS Document */
header .siteName{
	display: flex;
	justify-content: space-between;
	align-items: center;
    font-size: clamp(2.2rem, 1.909rem + 1.45vw, 3rem);
	line-height: 1;
}
header .siteName span{
	margin-right: 1rem;
}

.mainview{
	background-image:url("../images/greeting/mainview.jpg");
	width: auto;
	height: 230px;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	align-items: center;
	background-origin: border-box;
	background-position: 50% 0;
	margin-bottom: 8rem;
}
.mainview .container{
	justify-content: center;
}
.mainview .container h1{
    font-size: clamp(3.2rem, 2.909rem + 1.45vw, 4rem);
    line-height: 6rem;
}
section h2 {
	display: flex;
	justify-content: flex-start;
	align-items: center;
    font-size: clamp(3.2rem, 2.764rem + 2.18vw, 4.4rem);
    margin-bottom: 4.5rem;
}
section h2 span {
    font-size: clamp(1.8rem, 1.509rem + 1.45vw, 2.6rem);
    color: #9ab3cc;
    margin-left: 2.5rem;
}
.box1400{
    max-width: 1400px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.imgbox {
    max-width: 260px;
    width: 100%;
}

/* ---------------------------
#greeting
--------------------------- */
#greeting{
margin-bottom: 11rem;
}
#greeting .container{
		display: flex;
	justify-content: space-between;
}
#greeting .mass1{
	max-width: 450px;
	width: 100%;
}
#greeting .mass1 img{
	width: 100%;
	height: auto;
}
#greeting .mass2{
	max-width: 700px;
	width: 100%;
	padding: 5.5rem 0 12.5rem;
}
#greeting .mass2 p:nth-of-type(2){
	padding-top: 1rem;
	text-align: right;
}
/* ---------------------------
#three
--------------------------- */
#sanit_three{
margin-bottom: 12rem;
}
#sanit_three .container{
    background: #ccedec;
	padding: 5rem 7rem 7rem;
	max-width: calc(1200px - 14rem);
	width: 100%;
	position: relative;
}
#sanit_three h2{
	display: block;
	margin: 0 auto;
	width: 40rem;
	margin-bottom:7rem;
}
#sanit_three dt{
	color: #0a51a1;
	border-bottom: 1px solid #0a51a1;
	font-size: 2.4rem;
margin-bottom: 1.6rem;    
}
#sanit_three dd{
	margin-bottom:7rem;
}
#sanit_three dd:nth-of-type(3){
	margin-bottom:0;
}
#sanit_three dd span{
	color: #0a51a1;
}
#sanit_three .mass1{
	display: flex;
	justify-content: space-between;
}
#sanit_three .mass2{
	max-width: 510px;
	width: 100%;
	margin-right: 5rem;
}

#sanit_three .mass3{
	max-width: 412px;
	width: 100%;
}
#sanit_three .mass3 img{
	width: 100%;
	height: auto;
}
#sanit_three .ph_three01{
	position: absolute;
	top: -100px;
	right: -100px;
	}

#sanit_three .imgbox img {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 1400px) {
#sanit_three .container {
    margin: 0 auto 12.5rem;
	position: relative;
}    
#sanit_three .ph_three01 {
	position: absolute;
	top: -60px;
	right: 0px;
    width: 20%;
    height: auto;
}}
@media screen and (min-width: 768px) {
#greeting .container {
	width: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}
#greeting .mass1 img {
    width: 95%;
    height: auto;
}
#sanit_three .container {
    width: 80%;
}
}
@media screen and (max-width: 767.9px){
.mainview {
    margin-bottom: 6rem;
}
#greeting .container {
	width: auto;
	padding-left: 2rem;
	padding-right: 2rem;
	flex-flow: column;
}
#greeting .mass1 {
    max-width: initial;
    width: 100%;
}
#greeting .mass1 img {
    width: 30%;
    height: auto;
}
#greeting .mass2 {
    padding: 0 0 3rem;
    max-width: initial;
}
#sanit_three {
    margin-bottom: 6rem;
}
#sanit_three .container {
    max-width: initial;
    width: auto;
    position: relative;
    padding: 5rem 2rem 5rem;
	margin: 0 2rem 5rem;
}
#sanit_three h2 {
    width: auto;
    margin-bottom: 4rem;
}
#sanit_three dd {
    margin-bottom: 4rem;
}
}
@media screen and (max-width: 430px){
#sanit_three h2 {
    width: auto;
}
#sanit_three .mass1 {
	flex-flow: column;
}
#sanit_three .mass3 img {
    width: 50%;
}
#sanit_three .ph_three01 {
    position: absolute;
    top: -60px;
    right: 0px;
    width: 30%;
    height: auto;
}
section h2 span {
	display: block;
	margin-left: 0;
}
}