@charset "UTF-8";

.under_mv{
    background: url("../img/mv.png") center;
    -webkit-background-size: cover;
    background-size: cover;
}
/*attempt*/
.attempt {
    padding: 100px 0;
}
.att_bg {
    max-width: 1044px;
    width: 90%;
    margin: auto;
}
.att_inner {
}
.att_top {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    margin-top: 60px;
}
.att_logos {
    display: flex;
    flex-wrap: wrap;
    max-width: 360px;
}
.att_cont {
    margin: 10px;
}
.att_cont a {
    text-decoration: underline;
}
.att_cont a:hover {
    text-decoration: none;
    opacity: 1;
}

.att_gallery {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 30px;
}
.att_img {
    margin: 10px;
}
.environment .att_bg {
    background: url("../img/bg_01.png") no-repeat top 50px right 0px;
}
.social {
    background: #EFF2F8;
}
.social .att_top {
    flex-direction: row-reverse;
}
.social .att_bg {
    background: url("../img/bg_02.png") no-repeat top 50px left 0px;
}
.gov .att_bg {
    background: url("../img/bg_03.png") no-repeat top 50px right 0px;
}
.sus {
    background: #EFF2F8;
}
.sus .att_top {
    flex-direction: row-reverse;
}
.sus .att_bg {
    background: url("../img/bg_04.png") no-repeat top 50px left 0px;
}
.par .att_bg {
    background: url("../img/bg_05.png") no-repeat top 50px right 0px;
}
/*intro*/
.intro{
    background: url("../img/bg_00.png")top center;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 60px 0;
}
.intro_inner{
    max-width: 1024px;
    width: 90%;
    margin: auto;
    box-sizing: border-box;
    background: rgba(255,255,255,.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 5% 120px;
}
.intro_midashi {
    font-size: 2.8rem;
    text-align: center;
    font-weight: bold;
}
.intro_img {
    margin-top: 30px;
}
.intro_text {
    max-width: 676px;
    width: 100%;
    margin: 50px auto 0;
}

@media screen and (max-width: 767px) {
.sec_title {
    max-width: 90%;
    margin: auto;
}
.social .att_top, .att_top {
    flex-direction: row;
    flex-wrap: wrap;
}
.att_cont img {
    max-width: calc(45vw - 20px );
}
.att_gallery {
    flex-direction: column;
    align-items: center;
}
.sp_o1{
    order: 1;
}
.sp_o2{
    order: 2;
}
.sp_o3{
    order: 3;
}
}
