@charset "UTF-8";

.mainTitleBox.projectTitle .title {
    font-size: clamp(26px,3.4vw,50px);
}

.project{
    /*background: rgba(255,255,255,0.8);*/
	padding: clamp(50px, 8vw, 150px) 1em clamp(50px,5vw,100px);
	position: relative;
}

.projectInner{
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

.projectBox{
    background: #fff;
    padding: clamp(20px,3vw,50px);
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.50);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.50);
	margin-bottom: clamp(30px,4vw,60px);
}

.projectBox:last-of-type{
	margin-bottom: 0;
}

.projectBox .inner{
	display: flex;
    gap: clamp(20px,3vw,40px);
}

.projectBox .imgBox{
	background: #F2F5F7;
	position: relative;
}

.projectBox .imgBox:before {
    content: "";
    display: block;
    padding-top: 72.72%;
}

.projectBox .imgBox .img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 1em;
}

.projectBox .imgBox .img img{
    max-height: 100%;
}

.projectBox .textBox{
}

.projectBox .textBox .title{
    font-size: clamp(20px,3vw,28px);
    font-weight: bold;
    color: #00B170;
    margin-bottom: 1em;
}

.projectBox .textBox .text{
}

/*スマホ*/
@media screen and (max-width:575.98px) {
.projectBox .inner {
    flex-direction: column;
}
}
/*タブレット以降*/
@media screen and (min-width:576px) {
.projectBox .imgBox{
	width: 50%;
}
	
.projectBox .textBox{
	width: 50%;
    padding: 40px 0;
}
}