@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap');

header{}
.header_box{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	padding:10px 20px;
}
.header_logo{
	max-width:200px;
}

/*=================
共通
=================*/

h2.atwill-h2{
	position: relative;
	display:flex;
	flex-wrap: wrap;
	width: fit-content;
	margin: auto;
	padding:0 2.3em;
	font-size:40px;
}
h2.atwill-h2 span{
	position: relative;
	display: block;
	margin: auto auto 0;
	font-family: "M PLUS 1p", sans-serif;
	font-weight:900;
	letter-spacing:0.05em;
	color:#222;
	z-index: 2;
}
h2.atwill-h2 span.min{
	font-size:60%;
	padding-bottom:.25em;
}
h2.atwill-h2::before{
	content:"";
	position: absolute;
	top:50%;
	left:50%;
	display: block;
	width:100%;
	height:100%;
	background-color:#E7FF00;
	transform: translateX(-50%) translateY(-50%) skewX(-14deg);
}

/*=================
MV
=================*/
.mv_area{
	width:100%;
	height:auto;
	aspect-ratio:16/8;
	background-image: url("../images/atwill_mv.webp");
	background-position: center bottom;
	background-size:cover;
}
.mv_sp_img{display:none;}
.mv_box{
	height:100%;
	position: relative;
	width:82%;
	margin: auto;
}
.mv_title_box{
	position:absolute;
	right:0;
	bottom:23%;
	max-width:58%;
}
.mv_title_box img:nth-child(2){
	padding-top:2.5%;
	filter:drop-shadow(1px 3px 8px rgba(0, 0, 0, .6));
}

.mv_circle_area{
	position: relative;
	width:100%;
	height:auto;
	aspect-ratio:16/3;
	overflow-x: hidden;
	overflow-y: visible;
	margin-top:-5vw;
}
.mv_circle{
	position:absolute;
	background-color:#fff;
	border-radius:50%;
	width:130%;
	height:100%;
	top:0;
	left:50%;
	transform: translateX(-50%);
}


/*=================
仕事内容
=================*/
.desc_area{
	position: relative;
	margin-top:-10vw;
	z-index: 2;
	padding:0 40px 120px;
}
.desc_box{
	max-width:1100px;
	margin:auto;
	padding:0 30px;
}
.desc_box h3{
	padding-top:10px;
	font-size:25px;
	font-family: "M PLUS 1p", sans-serif;
	font-weight:800;
	color:#222;
}
.desc_text{
	padding:45px 30px;
}
.desc_text p{
	font-size:18px;
	font-weight:600;
	line-height:1.5em;
	letter-spacing:0.05em;
	padding-bottom:1.2em;
}


/*=================
@will
=================*/
.mta_area{
	background-color:rgba(0,0,0,.08);
	padding:120px 40px;
}
.mta_box{
	max-width: 1100px;
    margin: auto;
    padding: 0 30px;
}
.mta_h2_sub{
	font-size:20px;
	font-family: "M PLUS 1p", sans-serif;
	font-weight:800;
	color:#222;
	padding-bottom:5px;
}
.mta_text{
	padding:40px 30px;
}
.mta_text p {
    font-size: 18px;
    font-weight: 600;
    line-height:1.5em;
	letter-spacing:0.05em;
	padding-bottom:1.2em;
}

.mta_img{
	max-width:800px;
	margin: auto;
	padding-top:60px;
}


/*=================
仕事の流れ
=================*/

.prcs_area{
	padding:120px 30px 90px;
}
.prcs_box{
	max-width:900px;
    margin: auto;
    padding: 0 30px;
}
.prcs_box h2{
	font-size:60px;
	font-family: "M PLUS 1p", sans-serif;
	font-weight:800;
	color:#222;
	padding-bottom:30px;
}
.prcs_flow_wrap{
	position: relative;
	display:flex;
	flex-wrap: wrap;
	gap:20px;
}
.prcs_flow_wrap::after{
	content:"";
	display:block;
	position: absolute;
	width:3px;
	height:105%;
	background-color:#2DAFEF;
	top:5px;
	left:28px;
	z-index:-1;
}
.prcs_flow_wrap:last-child::after{
	content: none;
}

.prcs_flow_num{
	margin:0 0 auto;
	width:60px;
	height:auto;
	aspect-ratio:1/1;
	display: flex;
	flex-wrap: wrap;
	border-radius:50%;
	background-color:#2DAFEF;
}
.prcs_flow_num span{
	margin:auto;
	font-family: "M PLUS 1p", sans-serif;
	font-weight:800;
	color:#fff;
	font-size:25px;
}

.prcs_flow_text{
	width:calc(100% - 80px);
	padding:10px 0 45px;
}
.prcs_flow_text h3{
	text-align:left;
	font-size:30px;
	font-family: "M PLUS 1p", sans-serif;
	font-weight:800;
	line-height:1.2em;
}
.prcs_flow_h3sub{
	text-align:left;
	font-size:20px;
	line-height:1.3em;
    font-weight: 600;
}
.prcs_flow_detail{
	text-align:left;
	padding-top:10px;
}

.prcs_flow_note{
	text-align:left;
}


/*=================
スケジュール
=================*/
.schedule_area{
	padding-bottom:150px;
}
.schedule_box{
	padding:0 30px;
}
.schedule_text_box{
	background-color:#EDF4F9;
	max-width:900px;
    margin: auto;
    padding:60px 70px;
}
.schedule_text_box h3 {
	font-size:36px;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 800;
	color: #222;
	padding-bottom:40px;
	letter-spacing:0.05em;
}

.schedule_text p {
    font-size: 16px;
    font-weight: 600;
    line-height:1.6em;
	letter-spacing:0.05em;
	padding-bottom:1.4em;
}


/*=================
POINT
=================*/
.blue_bk_area{
	
}

.point_area{
	background:#bae0f7;
}

.point_box{
	max-width:860px;
    margin: auto;
    padding:120px 30px 150px;
}

.point_text_box{
	filter:drop-shadow(1px 2px 3px rgba(0, 0, 50, .3));
	background-color:rgba(255,255,255,.95);
	padding:35px 50px 50px;
	position: relative;
}

h2.atwill-h2.point span{color:#fff;font-size:40px;filter:drop-shadow(1px 2px 3px rgba(0, 0, 50, .3));}
h2.atwill-h2.point::before{background-color:#5cb3e6;}

.point_text{
	padding-top: 35px;
}

.point_text p{
	text-align: center;
    font-size: 18px;
    font-weight: 600;
    line-height:1.55em;
	letter-spacing:0.1em;
	padding-bottom:1em;
	color:#333;
}
.point_text p span{
	font-size:110%;
	background:linear-gradient(rgba(255,255,255,0) 40%,#E7FF00 40%,#E7FF00 90%,rgba(255,255,255,0) 90%);
}
.point_text p:last-child{
	font-size:170%;
	padding-top:1em;
}


/*=================
さなるとは
=================*/
.what_box{
	position: relative;
	max-width:1100px;
    margin:auto;
    padding:160px 60px 130px;
	
}
.what_text_box{}
.what_text_box h2{
	text-align:left;
	font-size:70px;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 800;
	padding-bottom:0.2em;
}
.what_text_box h2 span:nth-child(1){font-size:0.6em;}
.what_text_box h2 span:nth-child(2){}
.what_text_box h2 span:nth-child(3){font-size:0.6em;}

.what_text p {
	font-size: 18px;
	font-weight: 600;
	line-height:1.7em;
	letter-spacing:0.05em;
	padding-bottom:1em;
}

.what_img{
	max-width:800px;
	margin: auto;
	padding-top:60px;
}


/*=================
募集要項
=================*/

.guidelines_box{
	max-width:1000px;
    margin:auto;
    padding:120px 30px;
}

.guidelines_wrap{
	display: flex;
	flex-wrap: wrap;
	padding:40px 30px;
}

.guidelines_wrap dt{
	width: 200px;
	display: flex;
	flex-wrap: wrap;
	background-color: rgba(0, 0, 0, .08);
	border-bottom: #fff solid 4px;
	padding:5px 10px;
}
.guidelines_wrap dt h3{
	margin: auto;
	font-weight:600;
	letter-spacing:0.07em;
}
.guidelines_wrap dd{
    width: calc(100% - 200px);
    text-align: left;
	padding:20px;
	letter-spacing:0.04em;
}
.guidelines_wrap dd *{
	font-size: 16px;
}
.guidelines_wrap dd .h4_box{
	padding-bottom:15px;
}
.guidelines_wrap dd .h4_box > div{
	padding-left:15px;
}
.guidelines_wrap dd .h4_box:last-child{
	padding-bottom:0;
}
.guidelines_wrap dd h4{
	display: inline-block;
	border:1px solid #222;
	padding:3px 8px 0;
	line-height:1em;
	font-weight:600;
}
.guidelines_wrap dd ul.dot li::before{
	content:"・";
}


/*=================
選考プロセス
=================*/
.select_text_box{
	max-width:1000px;
    margin:auto;
    padding:0 60px 120px;
}
.select_text_box h2{
	font-size:50px;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    color: #222;
    padding-bottom:15px;
}

.select_text p{
	font-size: 18px;
	font-weight: 600;
	line-height:1.7em;
	letter-spacing:0.05em;
}


/*=================
エントリー
=================*/
.entry_area{
	background-color: rgba(0, 0, 0, .08);
    padding: 120px 30px;
}

.entry_btn_area{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:10px 25px;
	padding:35px 0;
}

.entry_text{
	padding-top:15px;
	font-size: 18px;
    font-weight: 600;
    line-height: 1.5em;
    letter-spacing: 0.05em;
}

.entry_btn_area a{
	position:relative;
	display:block;
	background-color:#1E2B72;
	color:#fff;
	font-weight:600;
	padding:2px 45px 0;
	font-size:27px;
	border-radius:30px;
	filter: drop-shadow(1px 2px 3px rgba(0, 0, 50, .3));
}
.entry_btn_area a:after {
	position: absolute;
	content:'';
	width:15px;
	height:15px;
	border-bottom: #fff 2px solid;
	border-right: #fff 2px solid;
	bottom:23px;
	right:20px;
	transform: rotate(-45deg);
	transition: .2s;
}

.entry_btn_area a span{
	font-size:150%;
	padding:0 2px;
}

.entry_btn_area a.line{
	background-color:#00b900;
}


/*=================
SNS
=================*/
.channel_sns_area{
	padding:0 40px;
}

.channel_sns_links{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: auto;
	max-width: 860px;
	gap: 60px;
	padding: 60px 0;
}

.channel_sns_links a {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	width: calc((100% - 60px) / 2);
	border: 1px solid #ddd;
	padding: 15px 0;
	color:#222;
	transition:.2s;
}

.channel_sns_links a img {
	width: 60px;
	margin: auto 0;
}

.channel_sns_links a span {
	margin: auto 0;
	display: block;
	text-align: left;
	font-family: sans-serif;
	font-size: 16px;
	font-weight: 600;
}

@media screen and (min-width: 768px) {
	.channel_sns_links a:hover{
		opacity:.5;
	}
}

/*=================
footer
=================*/

.footer_group {
	margin: auto;
	background-color: #fff;
	max-width: 1400px;
	padding: 60px 40px 100px;
}

.footer_group_box {
	margin: auto;
	max-width: 1100px;
	display: flex;
	flex-wrap: wrap;
	gap: 35px;
}

.footer_group_box h4 {
	width: 100%;
}
.footer_group_box h4 span {
	display: block;
	margin: auto;
	max-width: 240px;
}
.footer_group_box a{
	display: block;
	width: calc((100% - (35px * 3)) / 4);
	height: auto;
	aspect-ratio: 117 / 13;
	transition: .2s;
}
.footer_group_box a img {
	width: auto;
	height: 100%;
	transition: .2s;
}
.footer_group_box a[href*="keimeikan"] img {
	height: 124%;
	margin-top: -2.8%;
}

@media screen and (min-width: 768px) {
	.footer_group_box a:hover{opacity:.5;}
}

address {
    background-color: rgba(0, 0, 0, .75);
    font-size: 12px;
    padding: 4px 0 90px;
    color: #fff;
}


/*=================
固定ボタン
=================*/
.fixed_area {
	position: fixed;
	z-index: 50;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(255,255,255,.7);
}
.fixed_box{
	padding:20px 0;
}
.fixed_btn_area{
	display: flex;
	flex-wrap: wrap;
	gap:20px;
	justify-content: center;
}
.fixed_btn_area a{
	position:relative;
	display:block;
	background-color:#1E2B72;
	color:#fff;
	font-weight:600;
	padding:2px 45px 0;
	font-size:19px;
	border-radius:30px;
	filter: drop-shadow(1px 2px 3px rgba(0, 0, 50, .3));
}
.fixed_btn_area a:after {
	position: absolute;
	content:'';
	width:15px;
	height:15px;
	border-bottom: #fff 2px solid;
	border-right: #fff 2px solid;
	bottom:14px;
	right:20px;
	transform: rotate(-45deg);
	transition: .2s;
}

.fixed_btn_area a span{
	font-size:150%;
	padding:0 2px;
}

.fixed_btn_area a.line{
	background-color:#00b900;
}





@media screen and ( max-width:1250px) {

	.entry_area{padding: 70px 40px;}
	.entry_btn_area{display: block;margin:auto;max-width:800px;}
	.entry_btn_area a{margin-bottom:20px;}
}


@media screen and ( max-width:1100px) {
	
	.mv_area{background-size:115%;}
	.mv_box{width:92%;}
	.mv_title_box {bottom:20%;}
	
	.desc_area{padding:0 40px 70px;}
	.desc_box{padding:0;}
	
	.mta_area{padding: 90px 40px;}
	
	.what_box{padding: 100px 60px 90px;}
	.mta_text{padding: 40px 0;}
	
	.guidelines_box{padding: 70px 40px;}

}

@media screen and (max-width: 980px) {
	.footer_group_box {gap:30px 20px;}
	.footer_group_box a{width: calc((100% - (20px * 3)) / 4);}
}

@media screen and (max-width: 940px) {
	.channel_sns_links a{gap:10px;}
	.channel_sns_links a span{width:100%;text-align:center;}
}

@media screen and (max-width:900px) {
	address {padding:4px 0 70px;}
	.fixed_box{padding:14px 0;}
	.fixed_btn_area a{font-size:15px;}
	.fixed_btn_area a:after{bottom:12px;width:10px;height:10px;}
}

@media screen and (max-width: 767px) {
	
	.mv_area{aspect-ratio:13 / 8;background-size: 150%;background-position:33% bottom;}
	.mv_title_box{max-width:64%;}
	
	.desc_box h3{line-height:1.3em;padding-top:15px;}
	.desc_text{padding:45px 0;}
	
	.mta_box{padding:0;}
	.mta_text{padding:40px 0 0;}
	
	.prcs_area {padding:90px 30px 90px;}
	.schedule_area{padding-bottom: 90px;}
	.schedule_text_box{padding: 60px 40px;}
	
	.point_box{padding:100px 30px 120px;}
	.point_text_box{padding:35px 30px 50px;}
	
	.what_box{padding: 100px 40px 70px;}
	.what_text_box h2{font-size:60px;}
	
	.guidelines_wrap{padding:40px 0;}
	.guidelines_wrap dt {width:150px;}
	.guidelines_wrap dd {width: calc(100% - 150px);}
	.guidelines_wrap dt h3{font-size:16px;letter-spacing:0;}
	.guidelines_wrap dd{padding-right:0;}
	
	.select_text_box{padding:0 40px 100px;}
	
	.entry_btn_area a{font-size:22px;}
	.entry_btn_area a:after{bottom:18px;width:13px;height:13px;}
	
	.channel_sns_area{padding:0 40px;}
	.channel_sns_links {gap: 20px;}
	.channel_sns_links a {width: calc((100% - 20px) / 2);}
    .channel_sns_links a span{font-size:14px;}
		
	.footer_group {padding:20px 40px 100px;}
	.footer_group_box {max-width: 490px;gap: 15px 20px;}
	.footer_group_box a {width: calc((100% - 20px) / 2);}
	.footer_group_box a:nth-child(even){text-align:right;}
	.footer_group_box a:nth-child(odd){text-align:left;}
	address {padding:4px 0 113px;}
	
	.fixed_btn_area{max-width:450px;margin:auto;gap:10px;padding:0 15px;}
	.fixed_btn_area a{width:100%;}
	.fixed_btn_area a:after{bottom:10px;width:13px;height:13px;}
	
}

@media screen and (max-width:600px){
	
	.header_box{padding: 7px 15px;}
	.header_logo{max-width: 130px;}
	
	h2.atwill-h2{font-size:7.6vw;padding:0 2em;}
	
	.mv_area{aspect-ratio:auto;background-image:none;}
	.mv_sp_img{display:inline;}
	.mv_box{display:none;}
	
	.mv_circle_area{display:none;}
	
	.desc_area{margin-top:0;padding:14vw 7vw 5vw;}
	.desc_box h3{font-size:5vw;}
	.desc_text{padding:6vw 0;}
	.desc_text p{font-size:16px;}
	
	.prcs_area{padding:13vw 7vw;}
	.prcs_box{padding:0;}
	.prcs_box h2{font-size:10vw;padding-bottom:4vw;}
	.prcs_flow_wrap{gap:3vw;}
	.prcs_flow_wrap::after{left:calc(5vw - .5px);}
	.prcs_flow_num{width:10vw;}
	.prcs_flow_num span{font-size:4.5vw;}
	.prcs_flow_text{width:calc(100% - 13vw);padding:1.5vw 0 7vw;}
	.prcs_flow_text h3{font-size:6.4vw;}
	.prcs_flow_h3sub{font-size:4.2vw;}
	.prcs_flow_detail{padding-top:1.3vw;font-size:15px;}
	.prcs_flow_note{font-size:14px;}
	
	.schedule_area{padding-bottom:14vw;}
	.schedule_box{padding:0 7vw;}
	.schedule_text_box{padding:12vw 7vw 8vw ;}
	.schedule_text_box h3{font-size:6vw;padding-bottom:5vw;}
	.schedule_text p{font-size:15px;}
	
	.mta_area{padding:14vw 7vw 12vw;}
	.mta_h2_sub{padding-bottom:.5vw;}
	.mta_text{padding:4vw 0 0;}
	.mta_text p{font-size:16px;}
	.mta_img{padding-top:4vw;}
	
	.point_box {padding:14vw 3vw 10vw;}
	.point_text_box{padding:5vw 6vw;}
	.point_text{padding-top:7vw;}
	.point_text p{font-size:16px;}
	.point_text p:last-child{font-size:155%;letter-spacing:-0.02em;padding-top:.7em;}
	
	.what_box{padding:14vw 7vw;}
	.what_text_box h2{font-size:11vw;padding-bottom:4vw;}
	.what_text p{font-size:16px;}
	.what_img{padding-top:8vw;}
	
	.guidelines_box{padding:8vw 7vw;}
	.guidelines_wrap{padding:10vw 0 5vw;}
	.guidelines_wrap dt{width:100%;border-bottom:none;}
	.guidelines_wrap dt h3{letter-spacing: 0.07em;}
	.guidelines_wrap dd{width:100%;padding:5px 5px 15px;}
	.guidelines_wrap dd *{font-size:15px;line-height:1.4em;}
	.guidelines_wrap dd .h4_box:first-child{padding-top:5px;}
	.guidelines_wrap dd div.sp_center{text-align:center;}
	
	.guidelines_wrap dd ul.dot.row{display:flex;flex-wrap:wrap;justify-content:center;}
	.guidelines_wrap dd ul.dot.row li::before {content:none;}
	.guidelines_wrap dd ul.dot.row li::after {content:"/";padding:5px;}
	
	.select_text_box{padding:0 7vw 16vw;}
	.select_text_box h2{font-size: 10vw;padding-bottom:4vw;}
	.select_text p{font-size:16px;}
	
	.entry_area{padding:14vw 7vw 8vw;}
	.entry_text {text-align:left;padding-top:4vw;font-size:16px;}
	.entry_btn_area{padding:9vw 0;}
	.entry_btn_area a {font-size:4vw;padding:.85vw 2vw .5vw;}
	.entry_btn_area a:after{right:4vw;bottom:3.7vw;width:2vw;height:2vw;}
	
	.channel_sns_area{padding:0 7vw;}
	.channel_sns_links{padding:14vw 0;}
	
	.footer_group{padding:2vw 7vw 14vw}
	address {padding: 4px 0 25vw;}
	
	.fixed_box{padding:3vw 0;}
	.fixed_btn_area a {font-size:3vw;padding: .85vw 2vw .5vw;}
	.fixed_btn_area a:after {bottom:2.8vw;right:3vw;width:2vw;height:2vw;}
}

@media screen and (max-width: 520px) {
	
	.channel_sns_links a {width: 100%;}
	.channel_sns_links a img {width: 36px;}
	.channel_sns_links a span{width: auto;text-align: left;font-size: 12px;}
	
	.footer_group_box {justify-content:center;gap:14px 0;}
	.footer_group_box a{width:100%;max-width:180px;}
	.footer_group_box a:nth-child(even),.footer_group_box a:nth-child(odd) {text-align:center;}
}