@charset "UTF-8";

/* ---------------------------------------------
	INTERNSHIPトップページ
--------------------------------------------- */

/*------------------トップビジュアル------------------*/
#topVisual{
    height: 260px;
    background-color: #00aabe;
    position: relative;
    /* background-image: url("../../img/bg01.png"), url("../photo/main.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center 0, center 0;
    background-size: auto, cover;
    background-attachment: fixed, fixed; */
}
#topVisual::after{
    content: "";
    display: block;
    position: fixed;
    background-image: url("../../img/bg01.png"), url("../photo/main.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center 0, center 0;
    background-size: auto, cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
#topVisual a{
    display: block;
    position: relative;
    height: 260px;
}
#topVisual h2{
    /* background: url("../img/logo_internship_seminar.png") no-repeat center 0; */
    background: url("../img/logo_creators-school.png") no-repeat center 0;
    width: 1068px;
    height: 36px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: -19px auto 0;
    text-indent: -300%;
    overflow: hidden;
    white-space: nowrap;
    z-index: 500;
    background-size: contain;
}
#topVisual div:nth-of-type(1){
    width: 1060px;
    height: 5px;
    background-color: #ffde48;
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    margin: 19px 0 0 -560px;
    z-index: 400;
}
#topVisual div:nth-of-type(2){
    width: 1070px;
    height: 40px;
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    margin: -6px 0 0 -520px;
    z-index: 300;
}

@media screen and (max-width: 1130px) {
    #topVisual::before{
        content: "";
        display: block;
        width: 100%;
        height: 36px;
    }
    #topVisual{
        height: 324px;
    }
    #topVisual h2{
        background: url("../img/logo_creators-school_sp.png") no-repeat center 0;
        width: 90%;
        height: 70px;
        top: 40%;
        background-size: contain;
    }
    #topVisual div:nth-of-type(1){
        width: 72%;
        top: auto;
        bottom: 38%;
        margin: 0 0 0 -38%;
    }
    #topVisual div:nth-of-type(2){
        width: 82%;
        margin: 8px 0 0 -41%;
    }
}
@media screen and (max-width: 690px) {
    #topVisual div:nth-of-type(1){
        width: 82%;
        bottom: 43%;
    }
    #topVisual div:nth-of-type(2){
        width: 92%;
        margin: 0 0 0 -45%;
    }
}
@media screen and (max-width: 450px) {
    #topVisual::before{ height: 34px;}
    #topVisual{ height: 254px;}
    #topVisual a{ height: 200px;}
    #topVisual h2{ top: 41%;}
    #topVisual div:nth-of-type(1){
        width: 86%;
        bottom: 45%;
        margin: 0 0 0 -39%;
    }
    #topVisual div:nth-of-type(2){
        width: 88%;
        top: 36%;
        margin: 8px 0 0 -41%;
    }
}

/*------------------NEWS------------------*/
#newsWrap{
    background-color: #e8e8e8;
    position: relative;
    z-index: 700;
}
#newsWrap:before{
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: 0;
    top: -30px;
    border-style: solid;
    border-width: 0 100vw 30px 0;
    border-color: transparent transparent #e8e8e8 transparent;
}
#newsWrap:after{
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: 0;
    bottom: -46px;
    border-style: solid;
    border-width: 46px 100vw 0 0;
    border-color: #e8e8e8 transparent transparent transparent;
}
#newsWrap > div{
    width: 960px;
    margin: 0 auto;
    padding: 10px 0 0px;
}
#newsWrap h3{
    background-image: url("../../img/parts_common.png");
    background-repeat: no-repeat;
    background-position: 0 -480px;
    background-size: 171px;
    overflow: hidden;
    text-indent: -500%;
    white-space: nowrap;
    width: 80px;
    height: 30px;
    float: left;
    margin: -6px 0 0 0;
}
#newsWrap ul{
    padding: 0 0 0 108px;
}
#newsWrap li{
    font-size: 88%;
    line-height: 1.4;
    margin-bottom: 0.5em;
    color: #555;
    border-bottom: solid 2px #fff;
    padding-bottom: 0.3em;
}
#newsWrap li dl{
    display: flex;
    flex-wrap: wrap;
}
#newsWrap li dl > *{ flex-shrink: 0;}
#newsWrap li dd{ width: 7em;}
#newsWrap li dt{ width: calc( 100% - 7em);}
#newsWrap li a{ color: #555;}
#newsWrap li a dt::after{
    content: " >>>";
}
#newsWrap li a:hover{
    color: #1da1f2;
}

@media screen and (max-width: 960px) {
    #newsWrap > div{
        width: 94%;
    }
    #newsWrap h3{
        float: none;
        margin: -26px 0 6px;
        position: relative;
        z-index: 300;
        /*width: 120px;
        height: 45px;
        background-size: 256px;
        background-position: 0 -720px;*/
    }
    #newsWrap ul{ padding: 0;}
}

/*------------------メイン------------------*/
#mainWrap{
    position: relative;
    background-color: #fff;
    z-index: 500;
}
#mainWrap::before {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background-repeat:no-repeat;
    background-position:50% 100%;
    background-image:url("../../img/bg01.png");
    background-size:cover;
}

#mainWrap > div{
    width: 960px;
    margin: 0 auto;
    padding: 4em 0;
    position: relative;
    z-index: 100;
}
#mainWrap .intro{
    text-align: center;
    color: #4b4b4b;
    font-size: 128%;
    line-height: 1.8;
    margin-bottom: 20px;
}
#mainWrap .sub{
    text-align: center;
    font-size: 110%;
    line-height: 1.4;
    margin-bottom: 20px;
    color: #ff496c;
}
@media screen and (max-width: 960px) {
    #mainWrap > div{
        width: 94%;
    }
    #mainWrap .intro{
        font-size: 120%;
        line-height: 1.6;
    }
}

/*-------------部門ボタン-------------*/
#categoryList.len1,
#categoryList.len2{
    margin-bottom: 50px; display: inline-block;
}
#categoryList{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#categoryList li{
    width: 231px;
    margin: 0 12px 30px 0;
    position: relative;
    flex-shrink: 0;
}
#categoryList.len3 li{
    width: 288px;
}
#categoryList li:nth-of-type(4n){ margin: 0 0 30px 0;}
#categoryList.len3 li:nth-of-type(4n){ margin: 0 12px 30px 0;}
#categoryList.len3 li:nth-of-type(3n){ margin: 0 0 30px 0;}

#categoryList.end li,
#categoryList li.comingsoon,
#categoryList li.end{ opacity: 0.6;}
#categoryList li.comingsoon2,
#categoryList li.end2{ opacity: 0.45;}
#categoryList li.comingsoon::after,
#categoryList li.end::after,
#categoryList li.comingsoon2::after,
#categoryList li.end2::after{
    content: "Coming Soon";
    line-height: 1.2;
    position: absolute;
    top: 0.1em;
    left: 0.2em;
    z-index: 9999;
    font-size: 150%;
    color: #777;
    -webkit-transform: skew(-15deg,0);
    -ms-transform: skew(-15deg,0);
    transform: skew(-15deg,0);
    font-weight: bold;
}
#categoryList li.end::after{
    content: "募集終了";
}
#categoryList li.end2::after{
    content: "募集終了";
    top: auto;
    bottom: 1.1em;
    left: auto;
    right: 0.2em;
    font-size: 120%;
    text-shadow: 1px 1px 2px #fff;
    color: #555;
}
#categoryList li.comingsoon2::after{
    content: "Coming Soon...";
    top: auto;
    bottom: 0.7em;
    left: auto;
    right: 0.2em;
    font-size: 140%;
    text-shadow: 1px 1px 2px #fff;
    /*font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';*/
    font-family: 'Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}
.cx_smartphoneview #categoryList li.end2::after{
    bottom: 0.8em;
    font-size: 110%;
}
.cx_smartphoneview #categoryList li.comingsoon2::after{
    font-size: 120%;
    bottom: 0.6em;
}
/*#categoryList li.comingsoon2::before{
    content: "秋以降開催予定";
    line-height: 1.0;
    position: absolute;
    bottom: 2.5em;
    right: 0.3em;
    z-index: 9999;
    font-size: 100%;
    color: #fff;
    -webkit-transform: skew(-15deg,0);
    -ms-transform: skew(-15deg,0);
    transform: skew(-15deg,0);
    font-weight: bold;
    text-shadow: 1px 1px 2px #fff;
}
.cx_smartphoneview #categoryList li.comingsoon2::before{
    font-size: 90%;
    bottom: 2.1em;
}*/
@media screen\0 {
     #categoryList li.end2::after{
        font-size: 80%;
        bottom: 0.7em;
    }
    #categoryList li.comingsoon2::after{ font-size: 72%;}
}
#categoryList li.announce.comingsoon2::after,
#categoryList li.announce.comingsoon2::before{ color: #cb0a0a;}
#categoryList li.drama.comingsoon2::after,
#categoryList li.drama.comingsoon2::before{ color: #c75900;}
#categoryList li.variety.comingsoon2::after,
#categoryList li.variety.comingsoon2::before{ color: #709500;}
#categoryList li.news.comingsoon2::after,
#categoryList li.news.comingsoon2::before{ color: #2d9b0b;}
#categoryList li.sports.comingsoon2::after,
#categoryList li.sports.comingsoon2::before{ color: #008364;}
#categoryList li.digital.comingsoon2::after,
#categoryList li.digital.comingsoon2::before{ color: #03689b;}
#categoryList li.technique.comingsoon2::after,
#categoryList li.technique.comingsoon2::before{ color: #2e26bc;}
#categoryList li.sales.comingsoon2::after,
#categoryList li.sales.comingsoon2::before{ color: #b25da9;}


#categoryList li a{ display: block; position: relative;}
#categoryList li.internship a::before,
#categoryList li.seminar a::before{
    content: "INTERNSHIP";
    position: absolute;
    top: 8px;
    left: 0px;
    z-index: 9999;
    font-size: 94%;
    line-height: 1.0;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: solid 2px #fff;
    color: #fff;
    padding: 0.2em 0.5em;
}
#categoryList li.seminar a::before{
    content: "SEMINAR";
}
#categoryList li a div{
    height: 231px;
    background-color: #ddd;
    position: relative;
}
#categoryList.len3 li a div{
    height: 288px;
}
#categoryList li.announce a div{ background-color: rgba(240, 120, 120, 0.2);}
#categoryList li.drama a div{ background-color: rgba(255, 167, 96, 0.4);}
#categoryList li.variety a div{ background-color: rgba(194, 226, 98, 0.4);}
#categoryList li.news a div{ background-color: rgba(141, 221, 116, 0.4);}
#categoryList li.sports a div{ background-color: rgba(106, 225, 196, 0.4);}
#categoryList li.digital a div{ background-color: rgba(124, 199, 238, 0.4);}
#categoryList li.technique a div{ background-color: rgba(143, 138, 232, 0.4);}
#categoryList li.design a div{ background-color: rgba(231, 139, 221, 0.4);}
#categoryList li.sales a div{ background-color: rgba(231, 139, 221, 0.4);}

#categoryList li a div::before{
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    border-style: solid;
    border-width: 231px 231px 0 0;
    border-color: rgba(255,255,255,0.18) transparent transparent transparent;
    z-index: 300;
}
#categoryList.len3 li a div::before{ border-width: 288px 288px 0 0;}
#categoryList li a div::after{
    content: "";
    display: block;
    width: 114px;
    height: 114px;
    position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    margin: -57px auto 0;
    background-color: rgba(0,0,0,0.1);
    border-radius: 50%;
    z-index: 400;
    border-bottom: solid 1px #fff;
}
#categoryList li a div::after{
    background-image: url("../img/icn_internship.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 114px;
    height: 114px;
}
#categoryList li.comingsoon a div::after{ opacity: 0.6;}
#categoryList li.drama a div::after{ background-position: 0 -114px;}
#categoryList li.variety a div::after{ background-position: 0 -228px;}
#categoryList li.news a div::after{ background-position: 0 -342px;}
#categoryList li.sports a div::after{ background-position: 0 -456px;}
#categoryList li.digital a div::after{ background-position: 0 -570px;}
#categoryList li.technique a div::after{ background-position: 0 -684px;}
#categoryList li.design a div::after{ background-position: 0 -798px;}
#categoryList li.sales a div::after{ background-position: 0 -912px;}

#categoryList li a div span{
    display: block;
    height: 201px;
    background-color: #ccc;
    position: relative;
    z-index: 200;
}
#categoryList.len3 li a div span{ height: 248px;}
#categoryList li a div span::after{
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 0;
    bottom: -30px;
    border-style: solid;
    border-width: 30px 231px 0 0;
    border-color: #ccc transparent transparent transparent;
    z-index: 250;
}
#categoryList.len3 li a div span::after{ border-width: 40px 288px 0 0;bottom: -40px;}
#categoryList li.announce a div span{ background-color: #f07878;}
#categoryList li.announce a div span::after{ border-color: #f07878 transparent transparent transparent;}
#categoryList li.announce a:hover div span{ background-color: #ed6262;}
#categoryList li.announce a:hover div span::after{ border-color: #ed6262 transparent transparent transparent;}
#categoryList li.announce.comingsoon2 a:hover div span{ background-color: #f07878;}
#categoryList li.announce.comingsoon2 a:hover div span::after{ border-color: #f07878 transparent transparent transparent;}
#categoryList li.drama a div span{ background-color: #ffa760;}
#categoryList li.drama a div span::after{ border-color: #ffa760 transparent transparent transparent;}
#categoryList li.drama a:hover div span{ background-color: #ff9846;}
#categoryList li.drama a:hover div span::after{ border-color: #ff9846 transparent transparent transparent;}
#categoryList li.variety a div span{ background-color: #c2e262;}
#categoryList li.variety a div span::after{ border-color: #c2e262 transparent transparent transparent;}
#categoryList li.variety a:hover div span{ background-color: #aedd21;}
#categoryList li.variety a:hover div span::after{ border-color: #aedd21 transparent transparent transparent;}
#categoryList li.variety.comingsoon2 a:hover div span{ background-color: #c2e262;}
#categoryList li.variety.comingsoon2 a:hover div span::after{ border-color: #c2e262 transparent transparent transparent;}
#categoryList li.news a div span{ background-color: #8ddd74;}
#categoryList li.news a div span::after{ border-color: #8ddd74 transparent transparent transparent;}
#categoryList li.news:hover a div span{ background-color: #6ad14a;}
#categoryList li.news:hover a div span::after{ border-color: #6ad14a transparent transparent transparent;}
#categoryList li.news.comingsoon2 a:hover div span{ background-color: #8ddd74;}
#categoryList li.news.comingsoon2 a:hover div span::after{ border-color: #8ddd74 transparent transparent transparent;}
#categoryList li.sports a div span{ background-color: #6ae1c4;}
#categoryList li.sports a div span::after{ border-color: #6ae1c4 transparent transparent transparent;}
#categoryList li.sports a:hover div span{ background-color: #36d1ab;}
#categoryList li.sports a:hover div span::after{ border-color: #36d1ab transparent transparent transparent;}
#categoryList li.sports.comingsoon2 a:hover div span{ background-color: #6ae1c4;}
#categoryList li.sports.comingsoon2 a:hover div span::after{ border-color: #6ae1c4 transparent transparent transparent;}
#categoryList li.digital a div span{ background-color: #7cc7ee;}
#categoryList li.digital a div span::after{ border-color: #7cc7ee transparent transparent transparent;}
#categoryList li.digital a:hover div span{ background-color: #53bcf2;}
#categoryList li.digital a:hover div span::after{ border-color: #53bcf2 transparent transparent transparent;}
#categoryList li.digital.comingsoon2 a:hover div span{ background-color: #7cc7ee;}
#categoryList li.digital.comingsoon2 a:hover div span::after{ border-color: #7cc7ee transparent transparent transparent;}
#categoryList li.technique a div span{ background-color: #8f8ae8;}
#categoryList li.technique a div span::after{ border-color: #8f8ae8 transparent transparent transparent;}
#categoryList li.technique a:hover div span{ background-color: #7973ea;}
#categoryList li.technique a:hover div span::after{ border-color: #7973ea transparent transparent transparent;}
#categoryList li.technique.comingsoon2 a:hover div span{ background-color: #8f8ae8;}
#categoryList li.technique.comingsoon2 a:hover div span::after{ border-color: #8f8ae8 transparent transparent transparent;}
#categoryList li.design a div span{ background-color: #e78bdd;}
#categoryList li.design a div span::after{ border-color: #e78bdd transparent transparent transparent;}
#categoryList li.design a:hover div span{ background-color: #ed76e0;}
#categoryList li.design a:hover div span::after{ border-color: #ed76e0 transparent transparent transparent;}
#categoryList li.design.comingsoon2 a:hover div span{ background-color: #ed76e0;}
#categoryList li.design.comingsoon2 a:hover div span::after{ border-color: #ed76e0 transparent transparent transparent;}
#categoryList li.sales a div span{ background-color: #e78bdd;}
#categoryList li.sales a div span::after{ border-color: #e78bdd transparent transparent transparent;}
#categoryList li.sales a:hover div span{ background-color: #ed76e0;}
#categoryList li.sales a:hover div span::after{ border-color: #ed76e0 transparent transparent transparent;}
#categoryList li.sales.comingsoon2 a:hover div span{ background-color: #ed76e0;}
#categoryList li.sales.comingsoon2 a:hover div span::after{ border-color: #ed76e0 transparent transparent transparent;}


#categoryList li.announce.comingsoon a div span,
#categoryList li.drama.comingsoon a div span,
#categoryList li.variety.comingsoon a div span,
#categoryList li.news.comingsoon a div span,
#categoryList li.sports.comingsoon a div span,
#categoryList li.digital.comingsoon a div span,
#categoryList li.technique.comingsoon a div span,
#categoryList li.design.comingsoon a div span,
#categoryList li.sales.comingsoon a div span,
#categoryList li.announce.end a div span,
#categoryList li.drama.end a div span,
#categoryList li.variety.end a div span,
#categoryList li.news.end a div span,
#categoryList li.sports.end a div span,
#categoryList li.digital.end a div span,
#categoryList li.technique.end a div span,
#categoryList li.design.end a div span,
#categoryList li.sales.end a div span,
#categoryList li.announce.end2 a div span,
#categoryList li.drama.end2 a div span,
#categoryList li.variety.end2 a div span,
#categoryList li.news.end2 a div span,
#categoryList li.sports.end2 a div span,
#categoryList li.digital.end2 a div span,
#categoryList li.technique.end2 a div span,
#categoryList li.design.end2 a div span,
#categoryList li.sales.end2 a div span{ background-color: #aaa;}
#categoryList li.announce.comingsoon a div span::after,
#categoryList li.drama.comingsoon a div span::after,
#categoryList li.variety.comingsoon a div span::after,
#categoryList li.news.comingsoon a div span::after,
#categoryList li.sports.comingsoon a div span::after,
#categoryList li.digital.comingsoon a div span::after,
#categoryList li.technique.comingsoon a div span::after,
#categoryList li.design.comingsoon a div span::after,
#categoryList li.sales.comingsoon a div span::after,
#categoryList li.announce.end a div span::after,
#categoryList li.drama.end a div span::after,
#categoryList li.variety.end a div span::after,
#categoryList li.news.end a div span::after,
#categoryList li.sports.end a div span::after,
#categoryList li.digital.end a div span::after,
#categoryList li.technique.end a div span::after,
#categoryList li.design.end a div span::after,
#categoryList li.sales.end a div span::after,
#categoryList li.announce.end2 a div span::after,
#categoryList li.drama.end2 a div span::after,
#categoryList li.variety.end2 a div span::after,
#categoryList li.news.end2 a div span::after,
#categoryList li.sports.end2 a div span::after,
#categoryList li.digital.end2 a div span::after,
#categoryList li.technique.end2 a div span::after,
#categoryList li.design.end2 a div span::after,
#categoryList li.sales.end2 a div span::after{ border-color: #aaa transparent transparent transparent;}

#categoryList li a p{
    text-align: right;
    position: absolute;
    bottom: -0.7em;
    right: 10px;
    line-height: 1.2;
    font-size: 108%;
    color: #fff;
    z-index: 500;
    -webkit-transform: skew(-15deg,0) translate3d(0, 0, 0);
    -ms-transform: skew(-15deg,0) translate3d(0, 0, 0);
    transform: skew(-15deg,0) translate3d(0, 0, 0);
    transition: all 200ms ease-out;
    padding: 5px 10px;
}
@media screen and (min-width: 960px) {
    #categoryList li.on a:hover p{
        transform: skew(-15deg,0)  translate3d(-15px, 0, 0);
        -webkit-transform: skew(-15deg,0)  translate3d(-15px, 0, 0);
        -moz-transform: skew(-15deg,0)  translate3d(-15px, 0, 0);
        -ms-transform: skew(-15deg,0)  translate3d(-15px, 0, 0);
        transition: all 200ms ease-out;
    }
    #categoryList li.on a:hover p::after{
        content: "";
        display: block;
        position: absolute;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 10px 0 10px 12px;
        border-color: transparent transparent transparent #ffb62d;
        bottom: 5px;
        right: -20px;
    }
}
#categoryList li.comingsoon a p{ color: #ccc;}
.cx_displaydevice #categoryList li.comingsoon a:hover p,
.cx_displaydevice #categoryList li.comingsoon2 a:hover p,
.cx_displaydevice #categoryList li.end2 a:hover p{
    -webkit-transform: skew(-15deg,0) translate3d(0, 0, 0);
    -ms-transform: skew(-15deg,0) translate3d(0, 0, 0);
    transform: skew(-15deg,0) translate3d(0, 0, 0);
    transition: all 200ms ease-out;
}
.cx_displaydevice #categoryList li.comingsoon a:hover p::after,
.cx_displaydevice #categoryList li.comingsoon2 a:hover p::after,
.cx_displaydevice #categoryList li.end2 a:hover p::after{
    display: none;
}
#categoryList li.announce a p{ background-color: #c84e4e;}
#categoryList li.drama a p{ background-color: #c27a3f;}
#categoryList li.variety a p{ background-color: #8da644;}
#categoryList li.news a p{ background-color: #64a64f;}
#categoryList li.sports a p{ background-color: #479e89;}
#categoryList li.digital a p{ background-color: #589cbf;}
#categoryList li.technique a p{ background-color: #6965af;}
#categoryList li.design a p{ background-color: #b25da9;}
#categoryList li.sales a p{ background-color: #b25da9;}

#categoryList li.announce.comingsoon a p,
#categoryList li.drama.comingsoon a p,
#categoryList li.variety.comingsoon a p,
#categoryList li.news.comingsoon a p,
#categoryList li.sports.comingsoon a p,
#categoryList li.digital.comingsoon a p,
#categoryList li.technique.comingsoon a p,
#categoryList li.design.comingsoon a p,
#categoryList li.sales.comingsoon a p,
#categoryList li.announce.end2 a p,
#categoryList li.drama.end2 a p,
#categoryList li.variety.end2 a p,
#categoryList li.news.end2 a p,
#categoryList li.sports.end2 a p,
#categoryList li.digital.end2 a p,
#categoryList li.technique.end2 a p,
#categoryList li.design.end2 a p,
#categoryList li.sales.end2 a p{ background-color: #777;}

@media screen and (max-width: 960px) {
    #categoryList.len1,
    #categoryList.len2{ display: block;}
    #categoryList li,
    #categoryList.len3 li{
        width: 32%;
        margin: 0 2% 30px 0;
    }
    #categoryList li:nth-of-type(4n){ margin: 0 2% 30px 0;}
    #categoryList li:nth-of-type(3n),
    #categoryList li:nth-last-of-type(1){ margin: 0 0 30px 0;}
    #categoryList li a div span,
    #categoryList.len3 li a div span{
        height: 230px;
        height: 25vw
    }
    #categoryList li a div span::after,
    #categoryList.len3 li a div span::after{
        border-width: 5vw 30vw 0 0;
        bottom: -5vw;
    }
    #categoryList.len1 li{ margin: 0 auto 30px;}
    #categoryList li a div,
    #categoryList.len3 li a div{ width: 100%; height: 30vw;}
    #categoryList li a div::before,
    #categoryList.len3 li a div::before{ border-width: 30vw 30vw 0 0}
/*    #categoryList li a div span::after{}*/
    #categoryList li a p,
    #categoryList.len3 li a p{ font-size: 99%;}
    
}
@media screen and (max-width: 640px) {
    #categoryList li,
    #categoryList.len3 li{
        width: 49%;
        margin: 0 2% 30px 0;
    }
    #categoryList li:nth-of-type(3n),
    #categoryList.len3 li:nth-of-type(3n){ margin: 0 2% 30px 0;}
    #categoryList li:nth-of-type(2n),
    #categoryList.len3 li:nth-of-type(2n){ margin: 0 0 30px 0;}
    #categoryList li a div span,
    #categoryList.len3 li a div span{
        height: 230px;
        height: 41vw
    }
    #categoryList li a div span::after,
    #categoryList.len3 li a div span::after{
        border-width: 5vw 46vw 0 0;
        bottom: -5vw;
    }
    #categoryList li a div,
    #categoryList.len3 li a div{ width: 100%; height: 46vw;}
    #categoryList li a div::before,
    #categoryList.len3 li a div::before{ border-width: 46vw 46vw 0 0}
}


/*------------------下部ログインボタン------------------*/
#btmBtn{
    background-color: #e8e8e8;
    padding: 20px 0;
    position: relative;
    z-index: 500;
}
#btmBtn ul{
    width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
#btmBtn li{
    flex-shrink: 0;
    width: 49%;
}
#btmBtn li:nth-of-type(1){ margin-right: 2%;}
#btmBtn li a{
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: solid 5px #00aabe;
}
#btmBtn li:nth-of-type(1) a{ background-color: #fff;}
#btmBtn li:nth-of-type(2) a{ background-color: #00aabe;}
#btmBtn li a:hover{ border: solid 5px #00b4c9;}
#btmBtn li:nth-of-type(1) a:hover{ background-color: #f5fffb;}
#btmBtn li:nth-of-type(2) a:hover{ background-color: #00b4c9;}
#btmBtn li a p{
    text-align: center;
    line-height: 3em;
    font-size: 118%;
    -webkit-transform: skew(-15deg,0);
    -ms-transform: skew(-15deg,0);
    transform: skew(-15deg,0);
}
#btmBtn li:nth-of-type(1) a{ color: #00aabe;}
#btmBtn li:nth-of-type(2) a{ color: #fff;}

@media screen and (max-width: 960px) {
    #btmBtn ul{ width: 94%;}
    #btmBtn li{
        width: 100%;
    }
    #btmBtn li:nth-of-type(1){ margin: 0 0 12px;}
}