@charset "utf-8";

/*-----------------------------------------------------------
cover
-----------------------------------------------------------*/

.cover-text-block {
	padding: 7px 0 6px 20px;
    background: #000000;
	background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 70%,rgba(0, 0, 0, 0) 100%);
	opacity: .72;
}

.cover-text-block:before {
	content: "";
	position: absolute;
  	top: 0;
  	bottom: 0;
  	right: 0;
  	margin: auto;
  	width: 54%;
    height: 1px;
  	background: var(--white);
  	z-index: 1;
}

.cover-title {
 	font-family: var(--font-family02);
	font-size: 24px;
  	letter-spacing: 0.1em;
    line-height: 1.17;
}


/*-----------------------------------------------------------
beginner
-----------------------------------------------------------*/

.clipped-box {
    max-width: 978px;
    width: 100%;
    height: auto;
    padding: 0 15px 40px;
    position: static;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto auto;
    background: var(--white);
    z-index: 1;
}

.top01-text-box .text01, .top03-text-box .text01, .top06-text-box .text01 {
	line-height: 3.2em;
}

/*-----------------------------------------------------------
recruit
-----------------------------------------------------------*/

.top06-area:before {
    content: "";
    position: absolute;
    top: 0;
  	right: 0;
    left: 0;
  	bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background: url(/system_panel/uploads/images/top-recruit-mask.png) no-repeat center top;
    background-size: cover;
    z-index: 1;
}

.top06-frame:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
  	max-width: 300px;
    width: 30%;
    height: 54.64%;
    background: url(/system_panel/uploads/images/top-recruit-line-left.svg) no-repeat left top;
    background-size: contain;
    filter: brightness(2);
    z-index: 1;
}

.top06-frame:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    margin: auto;
  	max-width: 300px;
    width: 30%;
    height: 54.64%;
    background: url(/system_panel/uploads/images/top-recruit-line-right.svg) no-repeat right bottom;
    background-size: contain;
    filter: brightness(2);
    z-index: 1;
}

.top06-img-box {
    max-width: 295px;
    width: 60%;
    margin: 40px auto 0;
    mask-image: url("/system_panel/uploads/images/loop_mask.png");
    -webkit-mask-image: url("/system_panel/uploads/images/loop_mask.png");
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.top06-btn-box .btn01-black {
    color: var(--white);
}

.top06-btn-box .btn01-black:before {
    background: var(--white);
}

.top06-btn-box .btn01-black:after {
    border: 1px solid var(--white);
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:375px) {

}/* min-width: 375px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:414px) {



}/* min-width: 414px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:576px) {



}/* min-width: 576px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 768px) {

	/*-----------------------------------------------------------
	cover
	-----------------------------------------------------------*/
  
    .cover-title {
        font-size: 35px;
    }
  
	/*-----------------------------------------------------------
	top01
	-----------------------------------------------------------*/
    .clipped-box {
		width: 85%;
		height: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
		padding: 120px 15px 188px;
        margin: 40px auto auto;
        background: linear-gradient(135deg, #fff, #fff);
		clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)
	}

    /*-----------------------------------------------------------
	top06
    -----------------------------------------------------------*/
    .top06-img-box {
        width: 30%;
      	margin: 0 auto;
	}


}/* min-width: 768px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:992px) {

}/* min-width: 992px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 1024px) {

	/*-----------------------------------------------------------
	cover
	-----------------------------------------------------------*/
  
    .cover-text-block {
        padding: 7px 0 6px 40px;
    }  
  
    .cover-title {
        font-size: 40px;
    }
  
	/*-----------------------------------------------------------
	top01
	-----------------------------------------------------------*/
    .clipped-box {
        width: 100%;
		height: 750px;
		padding: 150px 15px 188px;
        clip-path: polygon(33.44% 0%, 100% 0%, 67.59% 100%, 0% 100%);
	}
 

}/* min-width: 1024px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1200px) {

	/*-----------------------------------------------------------
	cover
	-----------------------------------------------------------*/
  
    .cover-text-block {
        padding: 7px 0 6px 80px;
    }

    .cover-title {
        font-size: 45px;
    }



}/* min-width: 1200px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1400px) {

	/*-----------------------------------------------------------
	全体スタイル
	-----------------------------------------------------------*/

	/*-- 改行 --*/


}/* min-width: 1400px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1500px) {

	/*-----------------------------------------------------------
	全体スタイル
	-----------------------------------------------------------*/

	/*-- 改行 --*/

	/*-----------------------------------------------------------
	タイトル
	-----------------------------------------------------------*/

	/*-----------------------------------------------------------
	ヘッダー
	-----------------------------------------------------------*/


}/* min-width: 1500px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1600px) {

	/*-----------------------------------------------------------
	top01
	-----------------------------------------------------------*/

	.top01-title-box, .top01-text-box {
        padding: 0 0 0 60px;
    }
  
	.top01-bnt01-box {
        margin: 65px auto 0 10px !important;
    }
  
    .clipped-box {
        top: 0;
        right: auto;
        bottom: 0;
        left: 23%;
	}


}/* min-width: 1600px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1700px) {

}/* min-width: 1700px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */