section h2{
color: #aaa;
line-height: 1.3;
font-size: 1.1rem;
}
section h2 span{
display: block;
color:var(--dark-blue);
font-size: 4.6rem;
}

section > .content{
padding-top: 8.3rem;
}

@media screen and (max-width:750px) {
section > .content{
padding-top: 15vw;
}

}

/**
MAIN VISUAL
*/

#mv{
position: relative;
z-index: 20;
display: flex;
align-items: center;
flex-wrap: wrap;
background:linear-gradient(to bottom, rgba(255,255,255,0),rgba(255,255,255,1) 5%);
padding-bottom: 6vw;
}

#mv .photo{
overflow: hidden;
border-radius: 0 26.143vw 26.143vw 0;
width:50%;
height: 52.286vw;
box-shadow:10px 10px 10px rgba(132,228,235,0.25);
}

#mv .photo img{
object-fit: cover;
object-position: right center;
width: 100%;
height: 100%;
}

#mv h2{
padding: 0 0 2.2em 1.45em;
line-height: 1.33;
font-size: 4vw;
font-weight: 700;
letter-spacing: 0.2em;
}

#mv .text{
position: absolute;
bottom: 0.75em;
display: flex;
overflow: hidden;
width: 100%;
line-height: 1;
font-size:10vw;
font-weight: 700;
letter-spacing: 0.05em;
}

#mv .text span{
display: block;
white-space: nowrap;
background: linear-gradient(to bottom, var(--grad-top-blue) 12%, var(--grad-bottom-blue) 85%);
background-clip:text;
-webkit-text-fill-color:transparent;
height: 1em;
padding-right: 0.5em;
line-height: 1;
animation: marquee-left 60s linear infinite;
}

@keyframes marquee-left {
	0%{
		transform: translateX(0);
	}
	100%{
		transform: translateX(-100%);
	}
}

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

#mv{
display: block;
padding-bottom: 15vw;
}

#mv .photo{
width: 100vw;
height: calc(100vh - 4rem);
border-radius: 0 0 100vh 0;
}

#mv h2{
position: absolute;
top: 50%;
transform: translateY(calc(-50% - 15vw));
color: #fff;
text-shadow: 0.4rem 0.4rem 2rem rgba(0,0,0,0.8);
padding: 0 0 0 1em;
font-size: 2.5rem;
}

#mv .text{
bottom: calc(15vw + 0.5em);
font-size: 20vw;
}

}

/**
SERVICE
**/

#service{
position: relative;
z-index: 20;
background: linear-gradient(to bottom, var(--grad-top-blue), var(--grad-bottom-blue));
}

#service .content{
width: 97rem;
margin: auto;
padding-bottom:2.4rem;
}

#service .content > div{
display: flex;
align-items: center;
}

#service h2{
color: #fff;
}

#service .content > div p{
padding:0 13em 0 9em;
font-size: 1.4rem;
}


#service ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 81.1rem;
margin: auto;
padding: 4rem 0 0 0;
list-style: none;
}

#service li{
width: 23.1rem;
height: 23.1rem;
margin-bottom: 5.9rem;
}

#service li a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #fff;
box-shadow: 0 3px 6px rgba(0,0,0,0.16);
border-radius: 26.84%;
width: 100%;
height: 100%;
transition: all 0.3s ease-in-out;
}

#service li a:link,
#service li a:visited{
color: #000;
text-decoration-color:transparent;
}

#service li a:hover{
color:var(--dark-blue);
text-decoration-color: var(--dark-blue);
}


#service li img{
width: 6.7rem;
height: auto;
}

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

#service .content{
width: 92vw;
margin: auto;
padding-bottom:11vw;
}

#service .content > div{
flex-direction: column;
align-items: flex-start;
}

#service .content > div p{
padding:1em 0 0 0;
text-align: justify;
}

#service ul{
width: 100%;
}

#service li{
width: 44vw;
height: 44vw;
margin-bottom: 4vw;
}

#service li img{
width:4.87rem;
min-width: 60px;
}

}

/**
NEWS
*/

#news{
position: relative;
z-index: 20;
background-color: #fff;
}

#news .content{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 97rem;
margin: auto;
}

#news .viewmore{
margin-right: 4.6rem;
}

#news article{
display: flex;
align-items: center;
border-bottom: 1px solid #ccc;
width: 97rem;
padding: 3rem 0;
margin: auto;
}

#news article:first-of-type{
border-top: 1px solid #ccc;
margin-top: 4rem;
}

#news article div{
order: 3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 19rem);
line-height: 1;
text-align: justify;
}

#news article h3,
#news article .text{
display: inline;
font-size: 1.2rem;
}

#news h3{
padding-right: 2em;
}


#news article p{
margin-top: 0;
margin-bottom: 0;
line-height: 1;
}


#news .date{
order: 1;
width: 8.4em;
padding-right: 2em;
font-size: 1.2rem;
}

#news .category{
order: 2;
width: 10em;
padding-right: 2em;
font-size: 0.9rem;
}

#news .category a{
display: inline-block;
border-radius: 2em;
width: 8em;
padding: 0.8em 0 0.9em 0;
text-align: center;
text-decoration: none;
}

#news .category a:link,
#news .category a:visited{
background-color: var(--dark-blue);
color: #fff;
transition: all 0.3s ease-in-out;
}

#news .category a:hover{
background-color: var(--grad-top-blue);
}

#news h3 a,
#news .text a{
transition: all 0.3s ease-in-out;
}

#news h3 a:link,
#news h3 a:visited{
color: var(--dark-blue);
text-decoration-color: #fff;
}

#news h3 a:hover{
text-decoration-color:var(--dark-blue);
}


#news .text a:link,
#news .text a:visited{
color: #888;
text-decoration-color: #fff;
}

#news .text a:hover{
color: #888;
text-decoration-color: #888;
}

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

#news .content{
flex-direction: column;
align-items: flex-start;
width: 92vw;
}

#news h2{
margin-bottom: 1.4rem;
}

#news article{
flex-wrap: wrap;
justify-content: space-between;
width: 92vw;
padding: 1.5rem 0;
}

#news .category{
width: 15em;
padding-right: 0;
text-align: right;
}

#news .category a{
width: auto;
padding: 0.8em 1.5em 0.9em 1.5em;
}

#news article > div{
width: 100%;
}

#news article h3,
#news article .text{
display: block;
}

#news article h3{
margin: 0.5rem 0 1em 0;
}

#news .text a{
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}

}

/**
BLOG
*/


#blog{
position: relative;
z-index: 20;
background-color: #fff;
}

#blog .content{
position: relative;
display: flex;
align-items: center;
width: 97rem;
margin:auto;
}

#blog h2{
margin-right: 4.65rem;
}

#blog .noposts p{
margin:5em 0;
text-align:center;
}


#blog nav{
display: flex;
margin-left: auto;
}

#blog .next,
#blog .prev{
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border: 1px solid #000;
border-radius: 4.3rem;
width: 4.3rem;
height: 4.3rem;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

#blog .next{
margin-left: 1.2rem;
}

#blog .next:hover,
#blog .prev:hover{
background-color: var(--grad-bottom-blue);
border-color: var(--grad-bottom-blue);
color: #fff;
}


#blog .swiper{
padding: 5.2rem 0 8rem 0;
}

#blog li{
box-sizing: border-box;
padding: 0 1.5rem;
}

#blog li > a{
display: flex;
flex-direction: column;
transition: all 0.3s ease-in-out;
}

#blog li > a:link,
#blog li > a:visited{
color: var(--dark-blue);
text-decoration-color: #fff;
}

#blog li > a:hover{
text-decoration-color: var(--dark-blue);
}

#blog h3{
order: 2;
}

#blog .date{
order: 3;
margin-bottom: 0.5rem;
}


#blog .thumb{
position: relative;
order: 1;
border-radius: 1.5rem;
overflow: hidden;
padding-top:90.1961%;
margin-bottom: 1rem;
}

#blog .thumb img{
position: absolute;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 100%;
transition: all 0.3s ease-in-out;
}

#blog li > a:hover .thumb img{
width: 120%;
height: 120%;
margin: -10%;
}


#blog .category{
font-size: 0.9rem;
}

#blog .category a{
display: inline-block;
border-radius: 2em;
width: 8em;
padding: 0.8em 0 0.9em 0;
text-align: center;
text-decoration: none;
}

#blog .category a:link,
#blog .category a:visited{
background-color: var(--dark-blue);
color: #fff;
transition: all 0.3s ease-in-out;
}

#blog .category a:hover{
background-color: var(--grad-top-blue);
}


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

#blog .content{
position: static;
flex-wrap: wrap;
width: 92vw;
}

#blog h2{
width: 100%;
margin-bottom: 1.4rem;
}

#blog nav{
position: absolute;
z-index: 10;
bottom: 12vw;
left: 50%;
transform: translateX(-50%);
}

#blog .swiper{
padding: 4rem 0 35vw 0;
}

#blog h3,
#blog .date{
font-size: 1.2rem;
}


}



/**
CAMPAIGN
*/

#campaign{
position: relative;
z-index: 20;
background: linear-gradient(to bottom, #F3FCFD, #F0F6FC);
}

#campaign .content{
position: relative;
display: flex;
align-items: center;
width: 97rem;
margin: auto;
}

#campaign h2{
margin-right: 4.65rem;
}

#campaign .viewmore{
margin-right: 4.6rem;
}

#campaign ul{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 97rem;
margin:auto;
padding:5rem 0 8.7rem 0;
list-style: none;
}

#campaign li{
width: 48.454%;
margin-bottom: 3.092%;
}

#campaign li img{
width: 100%;
}

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

#campaign .content{
flex-wrap: wrap;
width: 92vw;
}

#campaign h2{
width: 100%;
margin-bottom: 1.4rem;
}

#campaign ul{
flex-wrap: wrap;
width: 92vw;
padding:4rem 0 11vw 0;
}

#campaign li{
width: 100%;
margin-bottom: 4vw;
}

}


/**
RECRUIT
*/

#recruit{
position: relative;
z-index: 20;
background-color: #fff;
padding-top:8.3rem;
}

#recruit .content{
position: absolute;
top: 8.3rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
justify-content: center;
width: 97rem;
height: calc(100% - 8.3rem);
margin: auto;
padding:0;
}

#recruit p{
color:var(--dark-blue);
margin: 1em 0;
font-size: 2.4rem;
font-weight: 700;
}

#recruit .photo{
text-align: right;
}

#recruit .photo img{
box-shadow: -10px 0 10px rgba(0, 0, 0, 0.16);
border-radius:20vw 0 0 20vw;
width: 50%;
}

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

#recruit{
padding: 15vw 0 8vw 0;
}

#recruit .content{
position: relative;
top: 0;
left: 0;
transform: translateX(0);
display: flex;
width: 94vw;
padding: 0 0 15vw 0;
}

#recruit p{
margin: 1.4rem 0 2rem 0;
font-size: 2rem;
}

#recruit .photo{
width: 100vw;
height: 90vw;
text-align: left;
}

#recruit .photo img{
object-fit: cover;
box-shadow:-1vw 4vw 4vw rgba(0, 0, 0, 0.16);
border-radius: 0 0 60vw 0;
width: 100%;
height: 100%;
}

}