/*

iMEDIA_選ばれる5つの理由1
エンタメ総合学科
page-reason-entertainment

*/
@import url("slick/slick.css");
@import url("slick/slick-theme.css");

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

.page-reason-entertainment{
}
.title-area{
    height: 650px;
    background-image: url(../images/reason-entertainment/mainvisual.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}
.title-area .text-area{
    position: absolute;
    left:calc(50% - 600px);
    bottom:40px;
}
.title-area p.copy{
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    margin: 0;
    line-height: 1.8;
}
.title-area p.copy span{
    background-color: #EA609E;
    padding: 0.2rem 1rem ;
}
.title-area p.text{
    color: #fff;
    font-size: 16px;
    margin: 1rem 0;
}
.page-navi{
    width:100%;
    margin: auto;
    background-image: url(../images/reason-entertainment/navi_bg.jpg);
    background-color: #F087C2;
}
.page-navi ul{
    width:100%;
    max-width: 1200px;
    margin: auto;
    display: flex;
    list-style: none;
    padding: 0;
}
.page-navi ul li{
    width:25%;
    display: block;
}
.page-navi ul li a{
    display: block;
    text-align: center;
    color: #fff;
    padding: 1rem;
    border: solid 1px #fff;
    margin-bottom: -1px;
    margin-right: -1px;
    font-size: 28px;
    position: relative;
    text-decoration: none;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.page-navi ul li a:hover{
    background-color: #EA609E;
}
.page-navi ul li a span{
    display: block;
    font-size: 22px;
}
.page-navi ul li a::after{
    content: "▼";
    font-size: 20px;
    position: absolute;
    margin: auto;
    top:40%;
    right:1rem;
}
.ctg-title{
    font-size:32px;
    text-align: center;
    position: relative;
    margin-bottom: 60px;
}
.ctg-title img{
    display: block;
    width: 140px;
    margin: auto;
}
#step1{}
#step1 .wrap{
    max-width: 1400px;
}
#step1 .text01{
    width:600px;
    margin: auto;
}
#step1 .occupation-area{
    padding: 50px 0;
    max-width: 1400px;
}
#step1 .flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#step1 .flex .box-ocp{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px #00000026;
    width: 24%;
    display: flex;
    flex-direction: column;
}
.obi{
    position: relative;
    z-index: 1;
    text-align: center;
    margin: -20px auto 20px auto;
    padding: 1rem;
    width: 240px;
    font-size:22px;
    color:#fff!important;
    font-weight: 700;
}
.obi::before{
    transform: skewX(-30deg);
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
    background:#E8639E;
    box-shadow: 7px 7px 0 #E8639E4D;
}
.obi.blue::before{
    background:#1EB8E2;
    box-shadow: 7px 7px 0 #1EB8E24D;
}
.obi.green::before{
    background:#1BB1A0;
    box-shadow: 7px 7px 0 #1BB1A04D;
}
.obi.yellow::before{
    background:#F5A227;
    box-shadow: 7px 7px 0 #F5A2274D;
}
#step1 .flex .box-ocp .job-list{
    columns: 2;
    padding: 2rem;
    font-size: 13px;
}
#step1 .flex .box-ocp .job-list span{}
#step1 .flex .box-ocp .image{
    margin-top: auto;
    text-align: center;
}

#step2{
    background-image: url(../images/reason-entertainment/bg_gradientcolor1.jpg);
    background-size: 100% 100%;
    background-position: center;
}

.wrap{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 0;
}

#step2 .flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#step2 .field-artist{
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 30px;
    width: 310px;
    box-shadow: 0px 5px 15px #00000026;
}
#step2 .field-creator{
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 30px;
    width: 310px;
    box-shadow: 0px 5px 15px #00000026;
}
#step2 .flex .obi{
    margin: -40px auto 20px auto;
}
#step2 .box-ocp .image{
    width: 60%;
    margin: auto;
}
#step2 .box-ocp .ocp{
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    position: relative;
    margin-bottom: 40px;
}
#step2 .box-ocp .ocp::after{
    content: "";
    width: 30px;
    height: 1px;
    border: solid 2px #E8639E;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: -20px;
}
#step2 .box-ocp .ocp.blue,
#step2 .box-ocp .ocp.purple,
#step2 .box-ocp .ocp.yellow{
    color:#000!important;
}
#step2 .box-ocp .ocp.blue::after{
    border: solid 2px #1EB8E2;
}
#step2 .field-creator .box-ocp .ocp::after{
    border: solid 2px #1BB1A0;
}
#step2 .field-creator .box-ocp .ocp.purple::after{
    border: solid 2px #767CBB;    
}
#step2 .field-creator .box-ocp .ocp.yellow::after{
    border: solid 2px #F57721;    
}

#step2 .box-ocp .text{
    font-size: 12px;
    margin: 1rem 2rem;
}
/*slick スライダー*/
.slick-arrow:before{
    content:""!important;
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}
.slick-prev, .slick-next{
    width: 50px;
    height: 50px;
    top: 30%;
}
.slick-prev {
    left: -40px;
}
.slick-next{
    right: -40px;
}
.slick-next:before{
    background: url(../images/reason-entertainment/slider_arrow_r.png)!important;
    background-size: contain!important;
}
.slick-prev:before{
    background: url(../images/reason-entertainment/slider_arrow_l.png)!important;
    background-size: contain!important;
}
.field-creator .slick-next:before{
    background: url(../images/reason-entertainment/slider_arrow2_r.png)!important;
    background-size: contain!important;
}
.field-creator .slick-prev:before{
    background: url(../images/reason-entertainment/slider_arrow2_l.png)!important;
    background-size: contain!important;
}
.slick-dots li.slick-active button::before{
    color:#E8639E;
    opacity: 1;
}
.field-creator .slick-dots li.slick-active button::before{
    color:#1BB1A0;
    opacity: 1;
}


#step3{
    padding: 0px 0;
    background-color: #FDEEF5;
    background-image: url(../images/job/bg_strip.png);
    background-size: 100%;
}
#step3 .flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#step3 .box-area{
    width:200px;
    margin: 30px;
}
#step3 .box-area img.shadow{
    box-shadow: 10px 10px 0px #EA609E;
}
#step3 .box-area.blue img.shadow{
    box-shadow: 10px 10px 0px #1EB8E2;
}
#step3 .box-area.green img.shadow{
    box-shadow: 10px 10px 0px #1BB1A0;
}
#step3 .box-area.yellow img.shadow{
    box-shadow: 10px 10px 0px #F5A227;
}
#step3 .box-area .job{
    font-size: 15px;
    margin: 2rem 0 0 0;
    color: #EA609E;
}
#step3 .box-area.blue .job{color: #1EB8E2;}
#step3 .box-area.green .job{color: #1BB1A0;}
#step3 .box-area.yellow .job{color: #F5A227;}
#step3 .box-area .name{
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color:#000;
}
#step3 .box-area .name span{
    font-size: 16px;
}

.open,
[class^="open"]{
	cursor:pointer;
    position: relative;
}
.open::after,
[class^="open"]::after {
    content: "";
    width:55px;
    height: 54px;
    background-image: url(../images/reason-entertainment/icon_plus_pink.png);
    background-size: 100%;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    position: absolute;
    right:-27px;
    bottom:-27px;
}
.blue [class^="open"]::after {
    background-image: url(../images/reason-entertainment/icon_plus_blue.png);
}
.green [class^="open"]::after {
    background-image: url(../images/reason-entertainment/icon_plus_green.png);
}
.yellow [class^="open"]::after {
    background-image: url(../images/reason-entertainment/icon_plus_yellow.png);
}
.open:hover::after,
[class^="open"]:hover::after{
    width:61px;
    height: 60px;
    right:-30px;
    bottom: -30px;
}
#pop-up,
[id^="pop-up"] {
	display: none;
}
.overlay,
[class^="overlay"] {
	display: none;
    animation: w-fadein 0.5s ease;
}
@keyframes w-fadein {
    0% { opacity: 0 }
  100% { opacity: 1 }
 }
#pop-up:checked + .overlay,
[id^="pop-up"]:checked + [class^="overlay"] {
	display: block;
	z-index: 9999;
	background-color: #00000090;
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}
.window {
	width: 90vw;
	max-width: 1000px;
	height: 450px;
    max-height: 90vh;
	background-color: #ffffff;
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    padding: 25px;
    color: #000!important;
}
.window .profile{
    position: absolute;
    top:-30px;
    left:0;
    background: #fff;
	border-radius: 10px 10px 0 0;
    padding: .5rem 1rem;
    margin: 0;
    color: #EA609E;
    font-size: 18px;
    letter-spacing: .2rem;
    font-family: 'Roboto', sans-serif;
}
.window .w-pic-area {
    width: 50%;
}
.window .w-text-area {
    width: 50%;
    padding: 20px 40px;
}
.window .w-name{
	font-size: 28px;
    font-weight: 700;
    margin: 0;
}
.window .w-name span{
	font-size: 18px;
}
.window .w-job{
	font-size: 16px;
    margin: 0;
    color: #EA609E;
    padding-bottom: 1rem;
    border-bottom: solid 1px #EA609E;
}
.window .text {
    margin: 0;
	font-size: 14px;
}
.window .close {
	cursor:pointer;
	position: absolute;
    top:-30px;
	right: 0;
    background: #fff;
    padding: .5rem 1rem;
    color: #EA609E;
    font-size: 18px;
	border-radius: 10px 10px 0 0;
}
.blue .window .profile,
.blue .window .w-job,
.blue .window .close{color: #1EB8E2;}
.green .window .profile,
.green .window .w-job,
.green .window .close{color: #1BB1A0;}
.yellow .window .profile,
.yellow .window .w-job,
.yellow .window .close{color: #F5A227;}
.blue .window .w-job{border-bottom: solid 1px #1EB8E2;}
.green .window .w-job{border-bottom: solid 1px #1BB1A0;}
.yellow .window .w-job{border-bottom: solid 1px #F5A227;}



#step3 .interview{
    width:420px;
    margin: 0 auto 6rem auto;
}
#step3 .interview .htext{
    text-align: center;
    font-size: 20px;
}
#step3 .interview .movie-area{
    margin: 20px 0;
    width: 100%;
    aspect-ratio: 16 / 9;
}
#step3 .interview .movie-area iframe {
    width: 100%;
    height: 100%;
}

#step3 .interview .name-area{
    color: #fff;
    border-radius: 5px;
    padding: 1rem 2rem;
    font-size: 15px;
}
#step3 .interview .name-area.pink{
    background-color: #EA609E;
}
#step3 .interview .name-area.green{
    background-color: #1BB1A0;
}
#step3 .interview .name-area p{
    margin: 0;
}
#step3 .interview .name-area .name{
    font-size: 22px;
    font-weight: 700;
}
#step3 .interview .company-area{
    margin: 1rem 0;
}

#step4{}
#step4 .text2{
    text-align: center;
    margin-bottom: 100px;
}
#step4 .artist-area{
    background-color: #FDEFF5;
    margin-bottom: 100px;
}
#step4 .creator-area{
    background-color: #E7F7F5;
    /* margin-bottom: 100px; */
}
#step4 .header{
    display: flex;
    align-items: end;
    width:700px;
    margin: -150px auto 0px auto;
    justify-content: space-between;
}
#step4 .header img.title{
    width: 330px;
    padding-bottom: 40px;
}
#step4 .header img.illust{
    width: 300px;
}
#step4 .flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#step4 .flex .box{
    width:330px;
    margin: 10px 20px;
}
#step4 .artist-area .fukidashi{
    background-color: #E8639E;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    border-radius: 20px;
    padding: 10px;
    position: relative;
}
#step4 .creator-area .fukidashi{
    background-color: #1BB1A0;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    border-radius: 20px;
    padding: 10px;
    position: relative;
}
#step4 .artist-area .fukidashi:after{
    content: "";
    position: absolute;
    bottom:-20px;
    left:0;right:0;
    margin: auto;
    width:20px;
    height: 20px;
    border-right: 10px solid transparent;
    border-top: 16px solid #E8639E;
    border-left: 10px solid transparent; 
}
#step4 .creator-area .fukidashi:after{
    content: "";
    position: absolute;
    bottom:-20px;
    left:0;right:0;
    margin: auto;
    width:20px;
    height: 20px;
    border-right: 10px solid transparent;
    border-top: 16px solid #1BB1A0;
    border-left: 10px solid transparent; 
}
#step4  .ans{
    text-align: center;
    color: #E8639E;
    margin: 3rem 0 2rem 0;
    font-weight: 700;
    font-size: 14px;
}
#step4 .creator-area  .ans{
    color: #1BB1A0;
}
#step4 .creator-area  .ans .big{
    font-size: 25px;
}
#step4 .artist-area .box .text-area{
    background-color: #E8639E;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    border-radius: 0 0 10px 10px;
    margin-bottom: 20px;
    padding: 10px;
}
#step4 .artist-area .box .text-area p{
    margin: 0;
}
#step4 .artist-area .box .text-area p.large-text{
    font-size: 24px;
    color:#FFFF00;
    font-weight: 700;
}
#step4 .artist-area .box .text-area p.large-text .num{
    font-size: 40px;
}
#step4 .link-btn{
    text-align: center;
}
#step4 .link-btn a {
    width: 280px;
    display: block;
    background-color: #fff;
    padding: 1.5rem 1rem;
    color: #E8639E;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    margin: auto;
    border-radius: 10px;
    position: relative;
}
#step4 .creator-area .link-btn a {color: #1BB1A0;}
#step4 .link-btn a::before {
    content: "";
    border: solid 1px #E8639E;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    position: absolute;
    top:3px;
    left: 3px;
}
#step4 .creator-area .link-btn a::before {border: solid 1px #1BB1A0;}
#step4 .link-btn a::after{
    content:"";
    position: absolute;
    top:0;bottom:0;
    right:2rem;
    margin: auto;
    width:10px;
    height: 10px;
    border-right: 1px solid #E8639E;
    border-top: 1px solid #E8639E;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}#step4 .creator-area .link-btn a::after{
    border-right: 1px solid #1BB1A0;
    border-top: 1px solid #1BB1A0;
}
#step4 .flex .box .title{
    font-size: 18px;
    font-weight: 700;
    padding-left: 40px;
    padding-bottom: 20px;
    line-height: 1.3;
    border-bottom: solid 1px #00B1A0;
}
#step4 .flex .box .title.pin-creator{
    background-image: url(../images/job/creator_icon.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size:32px;
}
#step4 .flex .box .fukidasi{
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #00B1A0;
}
#step4 .flex .box .fukidasi span{
    position: relative;
}
#step4 .flex .box .fukidasi span::before,
#step4 .flex .box .fukidasi span::after{
    content: "";
    width: 2px;
    height: 30px;
    background-color: #00B1A0;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
}
#step4 .flex .box .fukidasi span::before{
    left: -30px;
    transform:rotate(-25deg);
}
#step4 .flex .box .fukidasi span::after{
    right: -30px;
    transform:rotate(25deg);
}

.flex{
    display: flex;
    flex-wrap: wrap;
}

.red{color: #FF0000;}
.black{color: #000000;}
.pink{color: #EA609E;}
.blue{color: #1EB8E2;}
.green{color:#1BB1A0;}
.yellow{color:#F5A227;}
.flex{display:flex;}

.pc{display: block;}
.sp{display: none;}











@media screen and (max-width: 700px) {
    
    .sp{display: block;}
    .pc{display: none;}

    .title-area{
        background-image: url(../images/reason-entertainment/mainvisual_sp.jpg);
        height: 70vh;
    }
    .title-area .text-area{
        position: absolute;
        left:auto;
        top: auto;
        width:100%;
    }
    .title-area p.copy{
        color: #fff;
        font-size: 28px;
    }
    .title-area p.copy span{
        padding: 0.2rem 2rem ;
    }
    .title-area p.text{
        color: #fff;
        font-size: 12px;
        line-height: 2;
        margin: 1.5rem 2rem 0rem 2rem
    }
    .page-navi{
        width:100%;
        margin: auto;
        background-image: url(../images/reason-entertainment/navi_bg.jpg);
        background-color: #F087C2;
        background-size: 100%;
    }
    .page-navi ul{
        width:100%;
        max-width: auto;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
    }
    .page-navi ul li{
        width:50%;
        display: block;
    }
    .page-navi ul li a{
        display: block;
        text-align: center;
        color: #fff;
        padding: 1rem;
        border: solid 1px #fff;
        margin-bottom: -1px;
        margin-right: -1px;
        font-size: 18px;
        position: relative;
        text-decoration: none;
      transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    }
    .page-navi ul li a:hover{
        background-color: #EA609E;
    }
    .page-navi ul li a span{
        display: block;
        font-size: 14px;
    }
    .page-navi ul li a::after{
        content: "▼";
        font-size: 12px;
        position: absolute;
        margin: auto;
        top:40%;
        right:1rem;
    }
    .ctg-title{
        font-size:28px;
        text-align: center;
        position: relative;
        margin-bottom: 40px;
    }
    .ctg-title img{
        display: block;
        width: 140px;
        margin: auto;
    }
    #step1{overflow-x: hidden;}
    #step1 .wrap{
        max-width: auto;
        padding: 5%;
    }
    #step1 .text01{
        width:100%;
        margin: auto;
    }
    #step1 .occupation-area{
        padding: 50px 0;
        max-width: auto;
        width: 100%;
    }
    #step1 .flex{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #step1 .flex .box-ocp{
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 5px 15px #00000026;
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 50px;
    }
    .obi{
        position: relative;
        z-index: 1;
        text-align: center;
        margin: -20px auto 20px auto;
        padding: 1rem;
        width: 240px;
        font-size:22px;
        color:#fff!important;
        font-weight: 700;
    }
    .obi::before{
        transform: skewX(-30deg);
        content: "";
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        z-index: -1;
        background:#E8639E;
        box-shadow: 7px 7px 0 #E8639E4D;
    }
    .obi.blue::before{
        background:#1EB8E2;
        box-shadow: 7px 7px 0 #1EB8E24D;
    }
    .obi.green::before{
        background:#1BB1A0;
        box-shadow: 7px 7px 0 #1BB1A04D;
    }
    .obi.yellow::before{
        background:#F5A227;
        box-shadow: 7px 7px 0 #F5A2274D;
    }
    #step1 .flex .box-ocp .job-list{
        columns: 2;
        padding: 2rem;
        font-size: 13px;
    }
    #step1 .flex .box-ocp .job-list span{}
    #step1 .flex .box-ocp .image{
        margin-top: auto;
        text-align: center;
    }
    
    #step2{
        background-image: url(../images/reason-entertainment/bg_gradientcolor1.jpg);
        background-size: 100% 100%;
        background-position: center;
        overflow-x: hidden;
    }
    
    .wrap{
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 0;
    }
    
    #step2 .flex{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #step2 .field-artist{
        background-color: #fff;
        border-radius: 10px;
        padding: 20px;
        margin: 30px;
        width: 310px;
        box-shadow: 0px 5px 15px #00000026;
    }
    #step2 .field-creator{
        background-color: #fff;
        border-radius: 10px;
        padding: 20px;
        margin: 30px;
        width: 310px;
        box-shadow: 0px 5px 15px #00000026;
    }
    #step2 .flex .obi{
        margin: -40px auto 20px auto;
    }
    #step2 .box-ocp .image{
        width: 60%;
        margin: auto;
    }
    #step2 .box-ocp .ocp{
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        position: relative;
        margin-bottom: 40px;
    }
    #step2 .box-ocp .ocp::after{
        content: "";
        width: 30px;
        height: 1px;
        border: solid 2px #E8639E;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        bottom: -20px;
    }
    #step2 .field-creator .box-ocp .ocp::after{
        border: solid 2px #1BB1A0;
    }
    
    #step2 .box-ocp .text{
        font-size: 12px;
        margin: 1rem 2rem;
    }
    /*slick スライダー*/
    .slick-arrow:before{
        content:""!important;
        width: 100%!important;
        height: 100%!important;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 1;
    }
    .slick-prev, .slick-next{
        width: 50px;
        height: 50px;
        top: 30%;
    }
    .slick-prev {
        left: -40px;
    }
    .slick-next{
        right: -40px;
    }
    .slick-next:before{
        background: url(../images/reason-entertainment/slider_arrow_r.png)!important;
        background-size: contain!important;
    }
    .slick-prev:before{
        background: url(../images/reason-entertainment/slider_arrow_l.png)!important;
        background-size: contain!important;
    }
    .field-creator .slick-next:before{
        background: url(../images/reason-entertainment/slider_arrow2_r.png)!important;
        background-size: contain!important;
    }
    .field-creator .slick-prev:before{
        background: url(../images/reason-entertainment/slider_arrow2_l.png)!important;
        background-size: contain!important;
    }
    .slick-dots li.slick-active button::before{
        color:#E8639E;
        opacity: 1;
    }
    .field-creator .slick-dots li.slick-active button::before{
        color:#1BB1A0;
        opacity: 1;
    }
    
    
    #step3{
        padding: 40px 0;
        background-color: #FDEEF5;
        background-image: url(../images/job/bg_strip.png);
        background-size: 100%;
        overflow-x: hidden;
    }
    #step3 .wrap{
        max-width: auto;
        padding: 5%;
    }
    #step3 .flex{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #step3 .box-area{
        width: 40%;
        margin: 5%; 
    }
    #step3 .box-area img.shadow{
        box-shadow: 10px 10px 0px #EA609E;
    }
    #step3 .box-area.blue img.shadow{
        box-shadow: 10px 10px 0px #1EB8E2;
    }
    #step3 .box-area.green img.shadow{
        box-shadow: 10px 10px 0px #1BB1A0;
    }
    #step3 .box-area.yellow img.shadow{
        box-shadow: 10px 10px 0px #F5A227;
    }
    #step3 .box-area .job{
        font-size: 15px;
        margin: 2rem 0 0 0;
        color: #EA609E;
    }
    #step3 .box-area.blue .department{color: #1EB8E2;}
    #step3 .box-area.green .department{color: #1BB1A0;}
    #step3 .box-area.yellow .department{color: #F5A227;}
    #step3 .box-area .name{
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        color:#000;
    }
    #step3 .box-area .name span{
        font-size: 14px;
    }
    
    .open,
    [class^="open"]{
        cursor:pointer;
        position: relative;
    }
    .open::after,
    [class^="open"]::after {
        content: "";
        width: 40px;
        height: 40px;
        right: -20px;
        bottom: -20px;
    }
    .blue [class^="open"]::after {
        background-image: url(../images/reason-entertainment/icon_plus_blue.png);
    }
    .green [class^="open"]::after {
        background-image: url(../images/reason-entertainment/icon_plus_green.png);
    }
    .yellow [class^="open"]::after {
        background-image: url(../images/reason-entertainment/icon_plus_yellow.png);
    }
    .open:hover::after,
    [class^="open"]:hover::after{
        width: 50px;
        height: 50px;
        right:-25px;
        bottom: -25px;
    }
    #pop-up,
    [id^="pop-up"] {
        display: none;
    }
    .overlay,
    [class^="overlay"] {
        display: none; 
    }
    #pop-up:checked + .overlay,
    [id^="pop-up"]:checked + [class^="overlay"] {
        display: block;
        z-index: 9999;
        background-color: #00000090;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    .window {
        width: 90vw;
        max-width: 1000px;
        height: auto;
        max-height: auto;
        background-color: #ffffff;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 2rem;
        color: #000!important;
    }
    .window .profile{
        position: absolute;
        top:-30px;
        left:0;
        background: #fff;
        border-radius: 10px 10px 0 0;
        padding: .5rem 1rem;
        margin: 0;
        color: #EA609E;
        font-size: 16px;
        letter-spacing: .2rem;
        font-family: 'Roboto', sans-serif;
    }
    .window .w-pic-area {
        width: 100%;
        margin-bottom: 0;
    }
    .window .w-text-area {
        width: 100%;
        padding: 10px 0;
    }
    .window .w-name{
        font-size: 20px;
        font-weight: 700;
        margin: 0;
    }
    .window .w-name span{
        font-size: 14px;
    }
    .window .w-job{
        font-size: 14px;
        margin: 0;
        color: #EA609E;
        padding-bottom: 1rem;
        border-bottom: solid 1px #EA609E;
        margin-bottom: 1rem;
    }
    .window .w-text {
        margin: 0;
        font-size: 12px;
    }
    .window .logo {
        margin: 0;
    }
    .window .close {
        cursor:pointer;
        position: absolute;
        top:-30px;
        right: 0;
        background: #fff;
        padding: .5rem 1rem;
        color: #EA609E;
        font-size: 18px;
        border-radius: 10px 10px 0 0;
    }
    .blue .window .profile,
    .blue .window .w-job,
    .blue .window .close{color: #1EB8E2;}
    .green .window .profile,
    .green .window .w-job,
    .green .window .close{color: #1BB1A0;}
    .yellow .window .profile,
    .yellow .window .w-job,
    .yellow .window .close{color: #F5A227;}
    .blue .window .w-job{border-bottom: solid 1px #1EB8E2;}
    .green .window .w-job{border-bottom: solid 1px #1BB1A0;}
    .yellow .window .w-job{border-bottom: solid 1px #F5A227;}
    
    #step3 .interview{
        width:100%;
        margin: 0 auto 6rem auto;
    }
    #step3 .interview .htext{
        text-align: center;
        font-size: 18px;
    }
    #step3 .interview .movie-area{
        margin: 20px 0;
    }
    #step3 .interview .name-area{
        color: #fff;
        border-radius: 5px;
        padding: 10px;
        font-size: 15px;
    }
    #step3 .interview .name-area.pink{
        background-color: #EA609E;
    }
    #step3 .interview .name-area.green{
        background-color: #1BB1A0;
    }
    #step3 .interview .name-area p{
        margin: 0;
    }
    #step3 .interview .name-area .name{
        font-size: 22px;
        font-weight: 700;
    }
    #step3 .interview .company-area{
        margin: 1rem 0;
    }
    
    #step4{overflow-x: hidden;}
    #step4 .wrap{
        max-width: auto;
        padding: 5%;
    }
    #step4 .text2{
        text-align: center;
        margin-bottom: 100px;
        font-size:12px;
    }
    #step4 .artist-area{
        background-color: #FDEFF5;
        margin-bottom: 100px;
    }
    #step4 .creator-area{
        background-color: #E7F7F5;
        margin-bottom: 100px;
    }
    #step4 .header{
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        width:100%;
        margin: -60px auto 0px auto;
        justify-content: space-between;
    }
    #step4 .header img.title{
        width: 80%;
        margin: auto;
        padding-bottom: 40px;
    }
    #step4 .header img.illust{
        width: 60%;
        margin: auto;
    }
    #step4 .flex{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #step4 .flex .box{
        width:100%;
        margin: 10px 0px;
    }
    #step4 .artist-area .fukidashi{
        background-color: #E8639E;
        color: #fff;
        text-align: center;
        font-size: 18px;
        font-weight: 700;
        border-radius: 20px;
        padding: 10px;
        position: relative;
    }
    #step4 .creator-area .fukidashi{
        background-color: #1BB1A0;
        color: #fff;
        text-align: center;
        font-size: 18px;
        font-weight: 700;
        border-radius: 20px;
        padding: 10px;
        position: relative;
    }
    #step4 .artist-area .fukidashi:after{
        content: "";
        position: absolute;
        bottom:-20px;
        left:0;right:0;
        margin: auto;
        width:20px;
        height: 20px;
        border-right: 10px solid transparent;
        border-top: 16px solid #E8639E;
        border-left: 10px solid transparent; 
    }
    #step4 .creator-area .fukidashi:after{
        content: "";
        position: absolute;
        bottom:-20px;
        left:0;right:0;
        margin: auto;
        width:20px;
        height: 20px;
        border-right: 10px solid transparent;
        border-top: 16px solid #1BB1A0;
        border-left: 10px solid transparent; 
    }
    #step4  .ans{
        text-align: center;
        color: #E8639E;
        margin: 3rem 0 2rem 0;
        font-weight: 700;
    }
    #step4 .creator-area  .ans{
        color: #1BB1A0;
    }
    #step4 .creator-area  .ans .big{
        font-size: 25px;
    }
    #step4 .artist-area .box .text-area{
        background-color: #E8639E;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        border-radius: 0 0 10px 10px;
        margin-bottom: 20px;
        padding: 10px;
    }
    #step4 .artist-area .box .text-area p{
        margin: 0;
    }
    #step4 .artist-area .box .text-area p.large-text{
        font-size: 24px;
        color:#FFFF00;
        font-weight: 700;
    }
    #step4 .artist-area .box .text-area p.large-text .num{
        font-size: 40px;
    }
    #step4 .link-btn{
        text-align: center;
    }
    #step4 .link-btn a {
        width: 280px;
        display: block;
        background-color: #fff;
        padding: 1.5rem 1rem;
        color: #E8639E;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        margin: auto;
        border-radius: 10px;
        position: relative;
    }
    #step4 .link-btn a::before {
        content: "";
        border: solid 1px #E8639E;
        border-radius: 10px;
        width: 100%;
        height: 100%;
        position: absolute;
        top:3px;
        left: 3px;
    }
    #step4 .link-btn a::after{
        content:"";
        position: absolute;
        top:0;bottom:0;
        right:2rem;
        margin: auto;
        width:10px;
        height: 10px;
        border-right: 1px solid #E8639E;
        border-top: 1px solid #E8639E;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    #step4 .flex .box .title{
        font-size: 18px;
        font-weight: 700;
        padding-left: 40px;
        padding-bottom: 20px;
        line-height: 1.3;
        border-bottom: solid 1px #00B1A0;
    }
    #step4 .flex .box .title.pin-creator{
        background-image: url(../images/job/creator_icon.png);
        background-repeat: no-repeat;
        background-position: left center;
        background-size:32px;
    }
    #step4 .flex .box .fukidasi{
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        color: #00B1A0;
    }
    #step4 .flex .box .fukidasi span{
        position: relative;
    }
    #step4 .flex .box .fukidasi span::before,
    #step4 .flex .box .fukidasi span::after{
        content: "";
        width: 2px;
        height: 30px;
        background-color: #00B1A0;
        position: absolute;
        bottom: 0;
        top: 0;
        margin: auto;
    }
    #step4 .flex .box .fukidasi span::before{
        left: -30px;
        transform:rotate(-25deg);
    }
    #step4 .flex .box .fukidasi span::after{
        right: -30px;
        transform:rotate(25deg);
    }
    
    .flex{
        display: flex;
        flex-wrap: wrap;
    }



}


/* ---scrollAnimation------------------------- */
.u-fade-type-up{
    transform: translateY(50px);
    opacity: 0;
}
.u-fade-type-up.is-active{
    transition: .8s;
    transform: translateY(0);
    opacity: 1;
}
.u-fade-type-up.d2.is-active{
    transition-delay: .4s;
}
.u-fade-type-up.d3.is-active{
    transition-delay: .8s;
}
.u-fade-type-up3.d3.is-active{
    transition-delay: .8s;
}