@charset 'UTF-8';

/**ECから移植
*/

.ec-topicRole .ec-topicRole__list {
    display: flex;
    flex-wrap: wrap; 
    }
.ec-topicRole .ec-topicRole__listItem {
    margin-bottom: 50px;
    width: 70%;
    height: auto; 
    margin:20px auto;
    }
.ec-topicRole .ec-topicRole__listItem a {
      overflow: hidden; }
.ec-topicRole .ec-topicRole__listItem h3 {
      text-align: center; }
.ec-topicRole .ec-topicRole__listItem .faq-link a {
      display: block;
      overflow: hidden;
      background-color: transparent;}
.ec-topicRole .ec-topicRole__listItem a img {
        display: block;
        transition: transform .3s ease-out, opacity .3s linear; }
.ec-topicRole .ec-topicRole__listItem a:hover img {
        transform: scale(1.03);
        opacity: .5; }
.ec-topicRole .ec-topicRole__listItemTitle {
    margin-top: .5em;
    color: black;
    font-size: 0.9rem;
    max-width:285px;
    margin:1em auto 0;
    }
.ec-topicRole .ec-topicRole__listItemTitle span {
    color: black;
    font-size: 0.7rem;}
.ec-topicRole .ec-topicRole__list img {
	width:100%;
	}
	
.ec-topicRole h3 {
	padding-top:32px;
}

.ec-topicRole__list a:hover img {
opacity: 0.7;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 60);
filter: alpha(opacity = 60);
transition: all 0.4s;
}

.ec-topicRole__list .no_item {
    display:none;
    pointer-events: none;
}





@media screen and (min-width: 768px) {
	.ec-topicRole {
      padding-bottom: 10px; }
    .ec-topicRole .ec-topicRole__list {
        flex-wrap: nowrap; }
    .ec-topicRole .ec-topicRole__listItem {
        width: calc(100% / 2); }
    .ec-topicRole .ec-topicRole__listItem:not(:last-of-type) {
          margin-right: 30px; }
    .ec-topicRole .ec-topicRole__listItemTitle {
        margin-top: 20px;
        font-size: 0.9rem; }
    .ec-topicRole .ec-topicRole__listItemTitle span {
        font-size: 0.8rem; }
    .ec-topicRole__list .no_item {
        display:block;
        opacity:0;
    }
}

    @media only screen and (max-width: 767px) {
        .ec-topicRole img {
            width:80%;
            margin:0 auto;
        }
        .ec-topicRole .ec-topicRole__listItemTitle {
            max-width:none;
        }
        .pageTit {
            padding-top:120px;
        }
    }


    @media only screen and (max-width: 572px) {
        .pageTit {
            padding-top:80px;
        }
    }