@charset "UTF-8";

.ec-headerTitle .ec-headerTitle__title{
    text-align:left;
}

.ec-eyecatchRole{
    margin-top:50px;
}

.ec-eyecatchRole__intro{
/*    width: 60%;*/
    width: 100%;
    display: block;
}

.ec-topicRole .ec-topicRole__listItem {
    text-align: center;
}


/* SP css */
@media only screen and (max-width: 767px){
    
    .ec-eyecatchRole .ec-eyecatchRole__image {
        display: block;
        text-align: center;
    /*
        margin-bottom: 40px;
        width: 100%;
        height: 100%;
    */
    }
    .ec-role img{
        max-width: 80%;
        max-width: auto;
    }

    .ec-categoryRole .ec-categoryRole__listItem {
        width: 80%;
        text-align: center;
        max-width: 400px;
        margin: 10px auto;
    }

    .shop_title_sp{
        display: inline-block;
        margin: 0 auto;
        padding: 20px 20px 10px 20px;
    }
    .shop_title_sp a{

        text-decoration: none;
        font-size: 24px;
        font-weight: 700;

        color: #555;
        text-align: center;
    }
    .shop_title_sp a:hover{
        text-decoration: none;
        opacity: 0.8;
    }
}

@media only screen and (min-width: 768px){
    .ec-role img {
        max-width: 100%;
    }
    .shop_title_sp{
        display: none;
    }
    .ec-itemNav{
        text-align:left;
    }
    .ec-itemNav__nav li {
        position: inherit;
        text-align:left;
        /*    padding-top:30px;*/
    }
    .ec-itemNav__nav > li:hover > a {
        background: inherit;
    }
    .ec-itemNav__nav li a {
        text-decoration:underline;
        display: inline-block;
        padding: 16px 5px;
    }
    .ec-itemNav__nav li a:hover {
        background: inherit;
    }

    .ec-itemNav__nav li ul li {
        overflow: inherit;
        /*    padding-top: 10px;*/
    }
    .ec-itemNav__nav li ul li:before {
        content: "- ";
        margin-left: 20px;
    }
    .ec-itemNav__nav li ul li a {
        border-bottom:none;
        background: inherit;
        color:#2e3233;
            padding: 6px 22px 6px 6px;
    }
    .ec-itemNav__nav > li:hover li:hover > a {
        background: inherit;
    }
    
    
	.ec-headerTitle .ec-headerTitle__title a {
	    font-size: 2.3vw;
	}
	.ec-itemNav__nav ul {
	    text-align:left;
	}
	.ec-itemNav__nav li {
	    float: none;
	    width: auto;
	}
	.ec-itemNav__nav li a {
	    text-align: left;
	    border-bottom: none;
	}
	.ec-itemNav__nav li ul {
	    position: inherit;
	}
	.ec-itemNav__nav li ul li {
	    overflow: inherit;
	    height: 0;
	}
	.ec-itemNav__nav li ul li {
	    height: auto;
	}

}
@media only screen and (min-width: 1200px){
    .ec-headerTitle .ec-headerTitle__title a {
        font-size: 28px;
    }
}