@charset "utf-8";
@import url('reset.css');
@import url('common.css');

/*
コンテンツ
*/
.mv{
    width:92%;
    height:91vh;
    background-image:url(../img/mv1.jpg);
    background-size:cover;
    background-position:center;
    background-attachment: fixed;
    border-radius:10px 0 0 10px;
    margin-top:4vw;
    margin-left:auto;
    position:relative;
}
.mv .box{
    border-radius:0 10px 10px 0;
    background-color:#FFF;
    width:fit-content;
    top:45vh;
    padding:2vw 1vw 2vw 0;
    position:relative;
}
.mv .box:before{
	content:url(../img/curve_t.svg);
    position:absolute;
    top:-19px;
    left:0;
}
.mv .box:after{
	content:url(../img/curve_b.svg);
    position:absolute;
    bottom:-18px;
    left:0;
}
.mv .box h1{
    font-size:calc(1.5rem + 1.5vw);
    line-height:1.5em;
}
.mv .box h1 b{
    color:#32BDEB;
}
.mv .box a{
    display:block;
    font-size:1.25rem;
    font-weight:bold;
    color:#FFF;
    background-color:#32BDEB;
    border-radius:3em;
    background-image:url(../img/arw.svg);
    background-position:right 0.5em center;
    background-size:1.5em;
    padding:0.5em 2em;
    margin-top:1em;
}
.mv .box a:hover{
    background-color:#F60;
}

.mv img[src*="scroll"]{
    position:absolute;
    left: -4vw;
    bottom:0;
}

@media screen and (max-width: 1024px){
.mv .box{
    top:55vh;
    padding:1em 0.5em 1em 0;
}
.mv .box a{
    padding:0.5em 1em;
}
.mv img[src*="scroll"]{
    left: -5vw;
}

}

/*---------------------------------------------------------*/
#vision {
	padding-bottom:2vw;
}
#vision article:nth-of-type(1){
    position:relative;
    margin-bottom:40vw;
}
#vision article:nth-of-type(1):after{
	content:"";
    background-color:#EFF4FA;
    border-radius:10px;
    width:75%;
    height:50vh;
    position:absolute;
    right:0;
    top:50vh;
    z-index:-1;
}
#vision article:nth-of-type(1) > img{
    float:left;
    width:65%;
    border-radius:0 10px 10px 0;
}
#vision article:nth-of-type(1) div{
    width:50%;
    background-color:#EFF4FA;
    padding:3vw;
    top:7vw;
    right:0;
    border-radius:10px 0 0 10px;
    position:absolute;
}
#vision article:nth-of-type(1) div h1{
    display:block;
}


#vision article:nth-of-type(2){
    position:relative;
    padding-top:10vw;
    padding-bottom:0;
}
#vision article:nth-of-type(2) > img{
    float:right;
    width:60%;
    border-radius:10px 0 0 10px;
}
#vision article:nth-of-type(2) div{
    width:40%;
    padding:3vw;
    left:0;
    border-radius:0 10px 10px 0;
}
#vision article:nth-of-type(2) div h1{
    display:block;
    margin:auto;
}
#vision article div h1 img{
	width:100%;
}


@media screen and (max-width: 768px){
#vision article:nth-of-type(1){
    margin-bottom:0;
}

#vision article:nth-of-type(1):after{
	display:none;
}
#vision article:nth-of-type(1) > img{
    float:none;
    width:100%;
    border-radius:10px;
}
#vision article:nth-of-type(1) div{
    width:auto;
    border-radius:10px;
    position:initial;
}

#vision article:nth-of-type(2){
    position:relative;
    padding-top:10vw;
    padding-bottom:0;
}
#vision article:nth-of-type(2) > img{
    float:none;
    width:100%;
    border-radius:10px;
}
#vision article:nth-of-type(2) div{
    width:auto;
    border-radius:10px;
}
#vision article:nth-of-type(2) div h1{
    display:block;
    margin:auto;
}
#vision article div h1 img{
	width:100%;
}
}

#vision2{
    background-color:#EFF4FA;
    width:84%;
    margin-right:auto;
    padding:6vw 2vw 2vw;
    border-radius:0 10px 10px 0;
}

#vision2 h3{
	margin-left:auto;
	text-align:center;
	margin-bottom:2em;
	color:#000;
	font-size:1.25em;
	width:fit-content;
}


#vision2 .flex3{
	max-width:1200px;
	width:calc(100% - 2em);
	margin-left:auto;
}
#vision2 .flex3 article{
    background-color:#FFF;
    padding:1.5em;
    border-radius:10px;
}

#vision2 .flex3 article b{
	display:block;
    color:#32BDEB;
    font-size:2em;
    text-align:center;
}
#vision2 .flex3 article h4{
	text-align:center;
    color:#000;
    font-size:1.2em;
    margin-bottom:0.5em;
}

@media screen and (max-width: 768px){
#vision2{
    width:auto;
    padding:5vw 1em;
    border-radius:10px;
}
#vision2 h3{
	font-size:1em;
	text-align:left;
}


#vision2 .flex3{
	display:block;
	max-width:initial;
	width:auto;
}
#vision2 .flex3 article{
    background-color:#FFF;
    padding:1.5em;
    border-radius:10px;
}

#vision2 .flex3 article b{
	display:block;
    color:#32BDEB;
    font-size:2em;
    text-align:center;
}
#vision2 .flex3 article h4{
	text-align:center;
    color:#000;
    font-size:1.2em;
    margin-bottom:0.5em;
}
}

#vision3 h3{
    color:#32BDEB;
    font-size:2em;
    margin:auto;
    text-align:center;
    margin-bottom:1em;
    line-height:1.5em;
}
#vision3 .flex2{
	max-width:1200px;
	width:calc(100% - 2em);
	margin:auto;
}
#vision3 .flex2 article {
    background-color:#EFF4FA;
    border-radius:10px;
    padding:2em;
}
#vision3 .flex2 article b{
    color:#32BDEB;
    font-size:1.75em;
    text-align:center;
    margin-right:0.5em;
}
#vision3 .flex2 article h4{
	display:inline-block;
	text-align:center;
    color:#000;
    font-size:1.5em;
    margin-bottom:0.5em;
}

@media screen and (max-width: 768px){
#vision3 h3{
    font-size:1.25em;
}
#vision3 .flex2{
	width:auto;
}
#vision3 .flex2 article {
    padding:1em;
}
#vision3 .flex2 article b{
    font-size:1.5em;
}
#vision3 .flex2 article h4{
    font-size:1.25em;
}
}



#composition {
    background-color:rgba(221,221,188,0.16);
}
#composition .flex3{
	max-width:1200px;
	width:calc(100% - 2em);
	margin:auto;
}
#composition .flex3 article{
    background-color:#FFF;
    padding:1.5em;
    border-radius:10px;
    text-align:center;
}
#composition .flex3 article strong{
	display:block;
	font-size:1.25em;
	margin:0.5em;
    color:#015672;
}
#composition .flex3 article ul{
	display:flex;
	justify-content:center;
	gap:3%;
	flex-wrap:wrap;
}
#composition .flex3 article ul li{
	width:30%;
}
#composition .flex3 article ul b{
	display:block;
	font-weight:bold;
	margin-bottom:1em;
}
#composition .flex3 article ul span{
	font-size:3em;
    color:#32BDEB;
	font-weight:bold;
}

#composition .flex3 article:nth-of-type(3) ul li{
	width:48%;
}
#composition .flex3 article:nth-of-type(3) ul b{
	display:inline-block;
	margin-right:0.5em;
}
#composition .flex3 article:nth-of-type(3) ul span{
	font-size:2em;
    color:#32BDEB;
	font-weight:bold;
}


#client .flex3{
	max-width:1200px;
	width:calc(100% - 2em);
	margin:auto;
}
#client .flex3 article{
    background-color:#FAFAF4;
    padding:3em 1em 1em;
    border-radius:10px;
    text-align:center;
}
#client .flex3 article strong{
	display:block;
	font-size:1.25em;
	margin:0.5em;
    color:#000;
}
#client .flex3 article:nth-of-type(2) img{
	margin:1vw 0;
}
@media screen and (max-width: 768px){
#client .flex3 article strong{
	font-size:1em;
}

}

#work {
    background-color:rgba(221,221,188,0.16);
}
#work > p{
	text-align:center;
	font-size:1.25em;
}
#work .box{
	padding:3vw 0;
}
#work .box .title{
	width:95%;
	margin:auto;
	border-radius:10px;
	background-size:cover;
	background-position:center;
	height:30vw;
    position:relative;
}
#work .box .title h1{
	display: inline-block;
    border-radius:0 10px 10px 0;
    background-color:#FAFAF4;
    width:fit-content;
    top:10vw;
    padding:3vw 1vw 2vw 0;
    position:relative;
	left:0;
	color:#000;
	font-size:2.5em;
}
#work .box .title h1:before{
	content:url(../img/curve_t.svg);
    position:absolute;
    top:-27px;
    left:0;
}
#work .box .title h1:after{
	content:url(../img/curve_b.svg);
    position:absolute;
    bottom:-10px;
    left:0;
}

#work .box .title b{
    color:#32BDEB;
    margin-left:1em;
}
#work .box .title b small{
	font-size:0.3em;
}

#work .box article{
	display:flex;
	padding:5vw 0 0;
}
#work .box article figure{
	width:35%;
}
#work .box article figure img{
	width:100%;
    border-radius:0 10px 10px 0;
}
#work .box article:nth-of-type(even) figure img{
   border-radius:10px 0 0 10px;
}
#work .box article > div{
	width:65%;
	padding:0 5%;
}
#work .box article > div h3{
	font-size:2em;
    color:#32BDEB;
    margin-bottom:1em;
	font-weight:normal;
}
#work .box article > div h3 b{
	font-weight:bold;
}

@media screen and (max-width: 768px){
#work > p{
	font-size:1em;
}
#work > p br{
	display:none;
}
#work .box .title{
	width:auto;
	height:50vh;
}
#work .box .title h1{
top:50%;
	font-size:1.25em;
}
#work .box .title h1:before{
top: -20px;
}
#work .box .title h1:after{
bottom: -16px;
}
#work .box article{
	display:block;
}
#work .box article figure{
	width:100%;
}
#work .box article figure img{
    border-radius:10px;
}
#work .box article:nth-of-type(even) figure img{
    border-radius:10px;
}
#work .box article > div{
	width:auto;
	padding:0;
}
#work .box article > div h3{
	font-size:1.25em;
    margin:1em 0;
    text-align:center;
}

}


#education{
	width:90%;
	border-radius:10px;
	margin:1vw auto;
	background-image:url(../img/environment_bg.jpg);
	background-size:cover;
}
#education h2{
	color:#FFF;
}
#education h2:before{
	display:none;
}
#education table{
	margin:auto;
	width:95%;
	max-width:1000px;
}
#education table th,
#education table td{
	color:#FFF;
	border-bottom:1px solid #FFF;
	padding:1em;
	text-align:left;
}
#education table th{
	font-weight:bold;
	white-space:nowrap;
}
@media screen and (max-width: 768px){
#education{
	margin-bottom:5vw;
}
#education table th{
	display:block;
	border:none;
	font-size:1.25em;
	padding:1em 0 0 0;
}
#education table th br{
	display:none;
}
#education table td{
	display:block;
	padding:1em 0;
}

}

#environment{
	width:90%;
	border-radius:10px;
	margin:1vw auto;
	background-image:url(../img/environment_bg.jpg);
	background-position:bottom;
	background-size:cover;
}
#environment h2{
	color:#FFF;
}
#environment h2:before{
	display:none;
}
#environment p{
	color:#FFF;
	text-align:center;
	font-size:1.5em;
}
#environment .flex2{
	justify-content:center;
	margin:auto;
	max-width:1200px;
	flex-wrap:nowrap;
}
#environment .flex2 figure img{
	width:100%;
}
#environment table{
	margin:auto;
	width:95%;
}
#environment table th,
#environment table td{
	color:#FFF;
	border-bottom:1px solid #FFF;
	padding:1em;
	text-align:left;
}
#environment table th{
	font-weight:bold;
	white-space:nowrap;
}

@media screen and (max-width: 768px){
#environment table{
	margin-bottom:2em;
}
#environment table th{
	display:block;
	border:none;
	font-size:1.25em;
	padding:1em 0 0 0;
}
#environment table th br{
	display:none;
}
#environment table td{
	display:block;
	padding:1em 0;
}

}