@charset "UTF-8";

.circlebox {
background-image:url(../img/about/bg_main.gif);
background-position: top;
background-repeat: no-repeat;
}


/* 画像 */

.img_aria {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 96%;
max-width: 560px;
margin: 3rem auto 2rem;
}

.img_aria li {
width: 100%;
max-width: 130px;
padding: 2px 3px;
}

.img_aria li:last-child {
max-width:none;
text-align: center;
}

.img_aria li a img {
width: 100%;
border: 1px solid #4e4e4e;
}

.img_aria li a img:hover {
opacity: .8;
}


.maintxt {
/*width: 90%;
max-width: 650px;*/
text-align: left;
padding: .5rem;
opacity: 1;
line-height: 1.8;
letter-spacing: .1rem;
margin: 2rem auto;
font-family: 'Noto Sans JP', sans-serif;
font-size: .9rem;
color: white;
}

.left, .right {
height: 133px;
width: 10%;
}

.left {
float: left;
shape-outside: polygon(0% 0%, 100% 100%, 26% 0%);
}

.right {
float: right;
shape-outside: polygon(100% 100%, 0% 100%, 86% 0%);
}


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

}

@media screen and (max-width:980px) {
.img_aria {
max-width: 530px;
}
.img_aria li {
max-width: 13vw;
}
}

@media screen and (max-width:865px) {
.maintxt {
/*max-width: 545px;*/
line-height: 1.6;
margin: 1rem auto;
font-size: .8rem;
}
    
.left, .right {
width: 14%;
}    
}

@media screen and (max-width: 767px) {
h2 {
width: 96%;
margin: 0 auto 1rem;
font-size: 1.1rem;
letter-spacing: .2rem;
}   

.img_aria li {
max-width: 33.5vw;
}

.maintxt {
width: 91%;
line-height: 1.5;
letter-spacing: .1rem;
margin: 2rem auto;
font-size: .8rem;
}
    
.left, .right {
display: none;
}    
}

@media screen and (max-width: 480px) {
.img_aria li {
max-width: 160px;
} 
}