@charset "UTF-8";

/* -------------------------------------
	サステナアナ
------------------------------------- */
.content-wrap{ padding-top: 1em;}
.content-wrap__h2{
    background: url("../img/logo.png") no-repeat center center;
    width: 600px;
    height: 160px;
    text-indent: -300%;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 auto 0.3em;
    background-size: contain;
}
.content-wrap__h2.ver2{
    background: url("../img/logo_2.png") no-repeat center center;
}
@media screen and (max-width: 660px) {
    .content-wrap__h2,
    .content-wrap__h2.ver2{
        width: 90%;
        height: 0;
        padding-top: 24%;
    }
}
.content-wrap__inner{
    width: 96%;
}

.sustainability__intro,
.sustainability__intro-sub{
    text-align: center;
    line-height: 1.4;
}
.sustainability__intro__wrap{ text-align: center;}
.sustainability__intro{
    font-size: 120%;
    font-weight: 500;
    margin: 0 auto 0.6em;
    background: linear-gradient(transparent 75%, #00dbed 0%);
    display: inline-block;
}
.sustainaAna__all{
    margin-top: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.sustainaAna__list{
    flex-shrink: 0;
    width: 18%;
    margin-right: 2.5%;
    /* width: 23.5%;
    margin-right: 2%; */
}
.sustainaAna__list#list00{ opacity: 0;}
.sustainaAna__list:nth-of-type(6n){ margin-right: 0;}
.sustainaAna__list > li{
    width: 100%;
    margin-bottom: 2em;
    transition : .3s;
    position: relative;
    opacity: 0;
    text-align: center;
    transition : .3s ease-out .3s;
    background: url("../img/bg.png")no-repeat center 0;
    background-size: contain;
}
.sustainaAna__list > li.show{ opacity: 1;}
.sustainaAna__list > li::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 111;
    transition : .3s ease-out .3s;
}
.cx_displaydevice .sustainaAna__list > li:hover::after{
    background-color: rgba(255,255,255,0.0);
}

@media screen and (min-width: 1800px) {
    .sustainaAna__list{
        width: 15%;
        margin-right: 2%;
    }
    .sustainaAna__list:nth-of-type(6n){ margin-right: 2%;}
    .sustainaAna__list:nth-of-type(7n){ margin-right: 0;}
}
@media screen and (max-width: 1400px) {
    .sustainaAna__list{
        width: 23.5%;
        margin-right: 2%;
    }
    .sustainaAna__list:nth-of-type(5n){ margin-right: 0;}
}
@media screen and (max-width: 950px) {
    .sustainaAna__list{
        width: 32%;
        margin-right: 2%;
    }
    .sustainaAna__list:nth-of-type(4n){ margin-right: 0;}
}
@media screen and (max-width: 660px) {
    .sustainaAna__list{
        width: 47%;
        margin-right: 2%;
    }
    .sustainaAna__list:nth-of-type(3n){ margin-right: 0;}
}
.sustainaAna__list__photo{
    width: 60%;
    margin: 0 auto;
    position: relative;
    z-index: 222;
}
.cx_displaydevice .sustainaAna__list__photo{
    -ms-transform: scale(1) translate3d(0, 0, 0);
    -webkit-transform: scale(1) translate3d(0, 0, 0);
    -moz-transform: scale(1) translate3d(0, 0, 0);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.2s ease-out;
    -ms-transition: opacity 0.2s, -ms-transform 0.2s ease-out;
    transition: opacity 0.2s, transform 0.2s ease-out;
}
/* .cx_displaydevice .sustainaAna__list > li:hover .sustainaAna__list__photo{
    -ms-transform: scale(0.5) translate3d(0, 0, 0);
    -webkit-transform: scale(0.5) translate3d(0, 0, 0);
    -moz-transform: scale(0.5) translate3d(0, 0, 0);
} */
/* .sustainaAna__list__photo::after{
    content: "";
    display: block;
    width: 100%;
    height: 40%;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 222;
} */
.sustainaAna__list__photo img{
    position: relative;
    z-index: 333;
}
.sustainaAna__list__photo__bg{
    position: absolute;
    height: 29%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 111;
}
.sustainaAna__list__photo__bg::after{
    content: "";
    display: block;
    width: 40%;
    height: 100%;
    position: absolute;
    top: -25%;
    left: 0; right: 0;
    margin: 0 auto;
    background: url("../img/parts1.svg") no-repeat center 0;

}
.sustainaAna__list__photo__bg.parts1::after{ background: url("../img/parts1.svg") no-repeat center 0;}
.men .sustainaAna__list__photo__bg.parts1::after{ top: -28%;}
.sustainaAna__list__photo__bg.parts2::after{
    width: 38%;
    top: -26%;
    background: url("../img/parts2.svg") no-repeat center 0;
}
.men .sustainaAna__list__photo__bg.parts2::after{
    top: -28%;
    background: url("../img/parts2_m.svg") no-repeat center 0;
}
.sustainaAna__list__photo__bg.parts3::after{
    width: 40%;
    top: -21%;
    background: url("../img/parts3.svg") no-repeat center 0;
}
.men .sustainaAna__list__photo__bg.parts3::after{
    top: -28%;
    background: url("../img/parts3_m.svg") no-repeat center 0;
}
.sustainaAna__list__photo__bg__clothes{ fill: #00a5b5;}
/* .sustainaAna__list__photo__bg__clothes.col1{ fill: #ff6a53;}
.sustainaAna__list__photo__bg__clothes.col2{ fill: #ffc562;}
.sustainaAna__list__photo__bg__clothes.col3{ fill: #f6e86e;}
.sustainaAna__list__photo__bg__clothes.col4{ fill: #74c64d;}
.sustainaAna__list__photo__bg__clothes.col5{ fill: #52d172;}
.sustainaAna__list__photo__bg__clothes.col6{ fill: #54c9c0;}
.sustainaAna__list__photo__bg__clothes.col7{ fill: #4fade7;}
.sustainaAna__list__photo__bg__clothes.col8{ fill: #6289e3;}
.sustainaAna__list__photo__bg__clothes.col9{ fill: #7a6ec9;}
.sustainaAna__list__photo__bg__clothes.col10{ fill: #9b55c1;}
.sustainaAna__list__photo__bg__clothes.col11{ fill: #bc5bb1;}
.sustainaAna__list__photo__bg__clothes.col12{ fill: #db6881;}
.sustainaAna__list__photo__bg__clothes.col13{ fill: #878787;}
.sustainaAna__list__photo__bg__clothes.col14{ fill: #878787;}
.sustainaAna__list__photo__bg__clothes.col15{ fill: #878787;}
.sustainaAna__list__photo__bg__clothes.col16{ fill: #878787;}
.sustainaAna__list__photo__bg__clothes.col17{ fill: #878787;} */
.sustainaAna__list__photo__bg__clothes.col1{ fill: #43783a;}
.sustainaAna__list__photo__bg__clothes.col2{ fill: #1176b6;}
.sustainaAna__list__photo__bg__clothes.col3{ fill: #31a740;}
.sustainaAna__list__photo__bg__clothes.col4{ fill: #084e87;}
.sustainaAna__list__photo__bg__clothes.col5{ fill: #063266;}
.sustainaAna__list__photo__bg__clothes.col6{ fill: #e20b28;}
.sustainaAna__list__photo__bg__clothes.col7{ fill: #d5a525;}
.sustainaAna__list__photo__bg__clothes.col8{ fill: #249640;}
.sustainaAna__list__photo__bg__clothes.col9{ fill: #c4142e;}
.sustainaAna__list__photo__bg__clothes.col10{ fill: #e53625;}
.sustainaAna__list__photo__bg__clothes.col11{ fill: #1ba7d7;}
.sustainaAna__list__photo__bg__clothes.col12{ fill: #f9bd2c;}
.sustainaAna__list__photo__bg__clothes.col13{ fill: #960f33;}
.sustainaAna__list__photo__bg__clothes.col14{ fill: #ea6b21;}
.sustainaAna__list__photo__bg__clothes.col15{ fill: #da177c;}
.sustainaAna__list__photo__bg__clothes.col16{ fill: #f3a22a;}
.sustainaAna__list__photo__bg__clothes.col17{ fill: #d09123;}
.sustainaAna__list__name{
    text-align: center;
    font-size: 108%;
    font-weight: 500;
    /* display: inline-block; */
    /* background: linear-gradient(transparent 66%, #00dbed 0%); */
    /* border: solid 0.2em #000; */
    position: relative;
    z-index: 333;
    margin: -1.5em auto 0.8em;
    text-shadow: 1px -1px 2px #fff, 1px -1px 2px #fff, -1px -1px 2px #fff, -1px 1px 2px #fff, 1px -1px 2px #fff, -1px -1px 2px #fff, -2px -2px 2px #fff, 2px -2px 2px #fff;
}
.sustainaAna__list__name p{
    line-height: 1.2;
    position: relative;
    z-index: 333;
}
@media screen and (max-width: 660px) {
    .sustainaAna__list__name{
        font-size: 3vw;
    }
}
.sustainaAna__list__name::before{
    content: "";
    display: block;
    width: 45%;
    height: 1.2em;
    background-color: #fff;
    position: absolute;
    top: -0em;
    left: 0; right: 0;
    z-index: 111;
    margin: 0 auto;
}
.sustainaAna__list__name::after{
    content: "";
    display: block;
    width: 100%;
    height: 0.4em;
    /* background-color: #000; */
    background-color: #aaa;
    position: relative;
    z-index: 222;
    border-radius: 0.2em;
}
.sustainaAna__list__data__comment,
.sustainaAna__list__data__activity{
    background-color: #fff;
    /* border: solid 0.2em #000; */
    border: solid 0.2em #aaa;
    padding: 1em;
    font-size: 94%;
    line-height: 1.6;
    margin-bottom: 2px;
    text-align: left;
    position: relative;
    z-index: 555;
    border-radius: 1em;
}
.sustainaAna__list__data__activity{
    border-radius: 0.3em;
    border-top: solid 0.4em #aaa;
    border-bottom: solid 0.4em #aaa;
    border-left: none;
    border-right: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.5em;
}
.cx_displaydevice .sustainaAna__list__data__comment,
.cx_displaydevice .sustainaAna__list__data__activity{
    display: none;
    opacity: 0;
    -ms-transform: scale(1,0.2) translate3d(0, 0, 0);
    -webkit-transform: scale(1,0.2) translate3d(0, 0, 0);
    -moz-transform: scale(1,0.2) translate3d(0, 0, 0);
    -webkit-transition: opacity 0.2s, border-radius 0.3s, -webkit-transform 0.2s ease-out;
    -ms-transition: opacity 0.2s, border-radius 0.3s, -ms-transform 0.2s ease-out;
    transition: opacity 0.2s, border-radius 0.3s, transform 0.2s ease-out;
    transform-origin: center top;
}
.cx_displaydevice .sustainaAna__list > li:hover .sustainaAna__list__data__comment,
.cx_displaydevice .sustainaAna__list > li:hover .sustainaAna__list__data__activity,
.cx_smartphoneview .sustainaAna__list__data__comment,
.cx_smartphoneview .sustainaAna__list__data__activity{
    opacity: 1;
    -ms-transform: scale(1,1) translate3d(0, 0, 0);
    -webkit-transform: scale(1,1) translate3d(0, 0, 0);
    -moz-transform: scale(1,1) translate3d(0, 0, 0);
}
.cx_smartphoneview .sustainaAna__list__data__comment,
.cx_smartphoneview .sustainaAna__list__data__activity{ display: block;}
.sustainaAna__list__data__comment::before{
    content: "";
    display: block;
    background: url("../img/fukidashi.svg") no-repeat center center;
    position: absolute;
    width: 100%;
    height: 1em;
    top: -1em;
    left: 0; right: 0;
    margin: 0 auto;
}

.sustainaAna__list__data__activity_ttl{
    font-weight: bold;
    color: #333;
}
@media screen and (max-width: 660px) {
    .sustainaAna__list__data__activity_ttl{ font-size: 94%;}
}
.sustainaAna__list__data__activity__link__photo{ margin-bottom: 0.4em;}
.sustainaAna__list__data__activity__link__btn{
    display: block;
    background-color: #00dbed;
    color: #003346;
    line-height: 1.2;
    font-weight: 500;
    padding: 0.5em 0;
    border-radius: 0.2em;
    -ms-transition: all 0.2s, -ms-transform 0.2s ease-out;
    -webkit-transition: all 0.2s, -webkit-transform 0.2s ease-out;
    transition: all 0.2s, transform 0.2s ease-out;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    position: relative;
    margin-top: 0.5em;
}
.sustainaAna__list__data__activity__link__btn::after{
    content: "";
    display: block;
    background: url("../../img/arrow.svg") no-repeat 0 0;
    width: 1em; height: 1em;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 5%;
    margin-top: -0.3em;
}
.cx_displaydevice .sustainaAna__list__data__activity:hover .sustainaAna__list__data__activity__link__btn{
    background-color: #18ffff;
}