@charset "utf-8";
/* CSS Document */

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

    .pc {
        display: none !important;
    }


    html {
        font-size: 62.5%;
        -webkit-text-size-adjust: 100%;
    }

    @font-face {
        font-family: 'Noto Sans CJK JP';
        font-style: normal;
        font-weight: 900;
        src: local('Noto Sans CJK JP Black'), local('NotoSansCJKjp-Black'), local('NotoSansJP-Black'), url('../fonts/NotoSansJP-Black.woff') format('woff');
    }

    @font-face {
        font-family: 'Noto Sans CJK JP';
        font-style: normal;
        font-weight: 700;
        src: local('Noto Sans CJK JP Bold'), local('NotoSansCJKjp-Bold'), local('NotoSansJP-Bold'), url('../fonts/NotoSansJP-Bold.woff') format('woff');
    }

    /*タグ初期設定*/
    section,
    nav,
    article,
    figure,
    aside,
    header,
    footer,
    main {
        display: block;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    img {
        display: block;
        width: 100%;
        height: auto;
    }

    ul,
    li {
        list-style-type: none;
    }

    body {
        margin: 0;
        padding: 0;
        font-size: 1.4em;
        color: #222;
        font-family: 'Noto Sans JP',
            "Helvetica Neue",
            Arial,
            "Hiragino Kaku Gothic ProN",
            "Hiragino Sans",
            Meiryo,
            sans-serif;
    }

.btn-wrap{
position:relative;
width:94%;
margin:30px auto 30px;
font-weight: 700;
text-align: center;
}
/*
.btn-wrap a img{
width:60%;
margin: auto;
font-weight: 700;
text-align: center;
}
*/

/*
.btn-wrap span{
position:relative;
display:block;
margin:auto;
width:300px;
z-index:1;
text-align:center;
color: #222;
font-size: 1.6rem;
background-color:#fff;
padding:0.6rem 0;
border-radius:100px;
}
*/
.btn-orange{
position:relative;
top:-20px;
display:block;
color: #FFF;
font-size: 2.0rem;
letter-spacing: 0.075rem;
width:100%;
padding:2.6rem 0;
background-color:#F28130;
border:solid 4px #fff;
border-radius:100px;
box-shadow: 0px 0px 20px 0px rgba(147, 147, 147, 0.9);
text-decoration:none;
}
.btn-wrap span:has(+ .btn-orange) strong{
color:#F28130;
}

.btn-red{
position:relative;
top:-20px;
display:block;
color: #FFF;
font-size: 2.0rem;
letter-spacing: 0.075rem;
width:100%;
padding:2.6rem 0;
background-color:#ee5638;
border:solid 4px #fff;
border-radius:100px;
box-shadow: 0px 0px 20px 0px rgba(147, 147, 147, 0.9);
text-decoration:none;
}
.btn-wrap span:has(+ .btn-red) strong{
color:#ee5638;
}

.btn-green{
position:relative;
top:-20px;
display:block;
color: #FFF;
font-size: 2.0rem;
letter-spacing: 0.075rem;
width:100%;
padding:2.6rem 0;
background-color:#00c472;
border:solid 4px #fff;
border-radius:100px;
box-shadow: 0px 0px 20px 0px rgba(147, 147, 147, 0.9);
text-decoration:none;
}
.btn-wrap span:has(+ .btn-green) strong{
color:#00c472;
}

.btn-brightred{
position:relative;
/*top:-20px;*/
display:block;
color: #FFF;
font-size: 2.0rem;
letter-spacing: 0.075rem;
width:100%;
padding:1.5rem 0;
background-color:#e52655;
border:solid 3px #fff;
border-radius:100px;
box-shadow: 0px 0px 10px 0px rgba(147, 147, 147, 0.9);
text-decoration:none;
}
.btn-wrap span:has(+ .btn-brightred) strong{
color:#e52655;
}
	

#fv-area {
width: 100%;
height: auto;
position: relative;
}
	
#fv-area .btn-wrap{
	top: -60px;
	height: 0;
}	
#content2,
#content3,
#content4,
#content5,
#content6,
#content7,
#content8,
#content9,
#content10,
#content11,
#content12,
#content13,
/*#content15,*/
#content16,
#content17,
#content18{
width: 100%;
margin: auto;
padding: 30px 0;
}
#content01 div,
#content2 div,
#content3 div,
#content4 div,
#content5 div,
#content6 div,
#content7 div,
#content8 div,
#content9 div,
#content10 div,
#content11 div,
#content13 div,
#content14 div,
#content15 div{
	width: 93%;	
	height: auto;
	margin: auto;
	}

#content01{
	margin: 40px auto 0;	
	padding: 40px 0;
	width: 100%;
	height: auto;
	background-color: #F7F0E7;
	}
#content2{
	margin: auto;
	}
#content3{
	background-image: url("../images/graduate_back01_sp.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	}
	

#content4 div :nth-child(1){
	margin-top: 30px;
	width: 87.5%;
	margin: 0 auto 30px;
	}	
.freeinfo{
	background-color: #e2f6ff;
	padding: 15px 0 30px;
		
	}
.freeinfo div{
	width: 93%;	
	height: auto;
	margin: auto;
	}
.freeinfo .btn-wrap{
	margin: 15px auto 0;
	width: 100%;
	}

#content6{
	background-color: #efefef;
	}

#content6 div .btn-wrap{
	margin-top: 30px;
	width: 100%;
	}
#content8{
		padding: 0 0 30px;
	}
	
#content9{
	background-color: #c06569;
	}
#content9 div{
	width: 79%;
	}
#content10 div img:last-child{
		margin-top: 20px;
	}

#content11{
		background-color: #efefef;
	}	
#content11 div{
		width: 86%;
	}
#content11 div img:last-child{
		margin-top: 20px;
	}

#content12{
		padding:  0;background-color: #fff0eb;
	}
#content13{
	background-color:  #fff0eb;
	padding: 15px 0	30px;
	}
	
#content13 div {
margin: 0 auto 0;
	}

#content13 div img:last-child{
		margin-top: 10px;
	}

#content14{
	margin: 0 auto 0 ;	
	padding: 40px 0 0;
	width: 100%;
	height: auto;
	}	
	
#content14  .reskill{
	width: 89.53%;
	height: auto;
	margin: 0 auto 40px;

	}
#content15 .course{
	width: 100%;
	height: auto;
	padding: 0 0 40px;
	background-image: linear-gradient(#57c3ea, #39baf4 30%, #1ab1ff);

	}
	#content15 .course img{
	display: block;
	width: 76.85%;
	height: auto;
	margin: 0 auto;
	}
	

#content16{
		background-color: #e2f6ff;
	}
#contentsMovie{
width: 93%;
height: auto;
padding: 3% 0 3%;
background: #fff;
margin: 5% auto 0;
border-radius: 5px;
}
#contentsMovie div{
display: flex;
flex-direction: row;
justify-content: center;
width: 94%;
margin: auto;
}

#aboutustytle{
	width: 38.82%;
	height: auto;
	margin: auto;
			
	}
#faqtitle{
	width: 86%;
	height: auto;
	margin: auto;
	margin-bottom: 30px;
	}
	
#faqcontent{
	width:93%;
	height: auto;
	margin: auto;	
	font-size: 0.8em;
	color: #505050;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: 0.03em;

	}
	
	#faqcontent li{
		width: 100%;
		height: auto;
		padding: 0px;
		border-top: solid 2px #c9caca;	
		position: relative;
	}
	
	#faqcontent li:last-child{
		border-bottom: solid 2px #c9caca;	
	}
	#faqcontent li details{
		width: 100%;
/*		background-color: red;*/
	}

	#faqcontent li details summary{
		list-style: none;
		display: flex;
		align-items: center;
		width: 85%;	
		line-height: 1.3;
/*		background-color: aquamarine;*/
	
	}
	#faqcontent li details summary::before{
		content: url("../images/Q.png");
		vertical-align: middle;
  		padding-right: 5px;
		transform: scale(0.5);
/*		background-color: yellow;*/

	}
#faqcontent li details summary::after{
		content: url("../images/allow.png");
		vertical-align: middle;
  		transition: rotate .5s;
		transform: scale(0.5);
		position: absolute;
		right: 5px;
/*	background-color: pink;*/

	}
#faqcontent li details[open] summary::after{
		rotate: 180deg;
	}
	
	#faqcontent li details[open]{
		margin-bottom: 10px;
	}

	#faqcontent li details p{
		display: flex;
		align-items: center;
		width: 100%;
		margin-top: 10px;
	}
	#faqcontent li details p::before{
		content: url("../images/A.png");
  		padding-right: 10px;
		transform: scale(0.5);
	}
	
	
	
	
	
	
#content18{
		background-image: url("../images/graduate_back02_pc.jpg");
		background-size:cover;
		background-repeat:no-repeat;
	}
#content18 .sp{
		width:93%;
		height: auto;
		margin: auto;
	}	
	#content18 .interviewtitle{
		width: 86.25%;
		height: auto;
		margin: auto;
		margin-bottom: 30px;
	} 
	#content18 .interviewcontent img{
		margin-bottom: 20px;
	}
	#content18 .interviewcontent :last-child{
		margin-bottom: 0;
	}
	
/*----------20251030　中本追加------------*/	
	
#jobchg-f-benefit-area{
	width: 100%;
	margin: 0 auto 10%;
	padding: 10% 0 10%;
	background-color: #fff0eb;
}
#jobchg-f-benefit-area h2{
	width: 92%;
	height: auto;
	margin: auto;
	text-align: center;
	font-size: 1.3em;
	font-weight: 700;
	margin-bottom: 0.8em;
	letter-spacing: 0.04em;
	line-height: 150%;
	color: #2b2b2b;
}
#jobchg-f-benefit-area h2 .text-pink{
	color: #ec6d65;
	}	
#jobchg-f-benefit-area h2 .text-border{
	border: solid 1px #ec6d65;
	padding: 0 5px;
	margin-right: 5px;
	background-color: #fff;
	border-radius: 3px;
	}		
#jobchg-f-benefit-area h2+ div{
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 70px solid transparent;
  border-left: 70px solid transparent;
  border-top: 45px solid #f7c5c1;
  border-bottom: 0;
	border-radius: 5px;
	margin: auto;
	position: relative;
	margin-top: 20px;
	}

#jobchg-f-benefit-area h2+ div p{
	position: absolute;
	color:  #ec6d65; 
	font-size: 1.2em;
	width: 140px;
	text-align:  center;  
	top: -42px;               
    bottom:  0;
    left:  -70px;
    right:  0; 
	margin: auto;	
	}		
#jobchg-f-benefit-area section{
	width: 92%;
	height: auto;
    background: #fff;
	text-align: center;
    padding: 0 0 4% 0;
	margin: 10% auto 0;
    border-radius: 5px;
	border: solid  1px #cccccc;
	position: relative;
	overflow: visible;
	box-shadow: 0px 0px 10px rgba(204,204,204, 1);
	}	
#jobchg-f-benefit-area section h3{
	background-color: #ec6d65;
	width: 80%;
	height: 36px;
	text-align: center;
	font-weight: 700;
	color: #fff;
	margin: auto;
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	font-size: 1em;
	padding: 8px 0 8px;
	line-height: 1;
	border-radius: 18px;
	}	

#jobchg-f-benefit-area section h3 .text-yellow{
		color: #ffed63;
		font-size: 1.2em;
	}	
#jobchg-f-benefit-area section #jobchg-f_bnf_dis{
    background-color: #efefef;
    border-radius: 5px 5px 0 0;
	width: 100%;
	height: auto;
	padding: 13% 0 10%;
	
	}
#jobchg-f-benefit-area section #jobchg-f_bnf_dis img{
	width: 90%;
	height: auto;
	display: block;
	margin: auto;
	}	
#jobchg-f-benefit-area section div:nth-of-type(1) {
    padding: 5% 0;	
	width: 92%;
	height: auto;
	margin: auto;
	}
	
#jobchg-f-benefit-area section div:nth-of-type(1) ul{
		width: 100%;
		margin: auto;
		display: flex;
		justify-content: space-between;
	align-items: center;
	}	

#jobchg-f-benefit-area section div:nth-of-type(1) ul li img{
		width: 100%;
		height: auto;
	}			
#jobchg-f-benefit-area section section{
		width: 92%;
		margin: 0 auto 15px;
		background-color: #fff0eb;
		border-radius: 5px;
		padding: 10% 4% 8%;
		position: relative;
		overflow: hidden;
		border:none;
		box-shadow: none;
	}	
#jobchg-f-benefit-area section section #jobchg-f-bnf-ex{
		width: 200px;
  		height: 80px;
		position: absolute;
		background-color: #ec6d65;
		top: -30px;
		left: -90px;
		padding: 0;
		transform:rotate(-45deg); 
	}
#jobchg-f-benefit-area section section #jobchg-f-bnf-ex p{
		color: #fff;
		font-size: 0.8em;
		font-weight: 700;
		text-align: center;
		line-height: 1;
		position: absolute;
		bottom: 0;
		padding: 0 0 10px;
		width: 100%;
	}			
#jobchg-f-benefit-area section section h4{
		text-align: center;
		font-size: 1.4em;
		line-height: 1.5;
		color: #2b2b2b;
		font-weight: 700;
	}
#jobchg-f-benefit-area section section h4 span{
		font-size: 0.8em;
		color: #ec6d65;
		line-height: 1.2;
		display: block;
		margin-bottom: 10px;
	}	
#jobchg-f-benefit-area section section #jobchg-f-bnf-price{
		width: 100%;
		align-items: center;
		margin: 20px auto 15px;
		list-style: none;
		background-image: url(../images/jobchg-f_bnf_arrow01_90deg.png);
		background-repeat: no-repeat;
		background-position: 50% 48%;
		background-size: 25px;
	}
#jobchg-f-benefit-area section section #jobchg-f-bnf-price li{
		width: 80%;
		height: auto;
		background-color: #fff;
		border-radius: 5px;
		border: 1px solid #cccccc; 
		padding: 10px 0;
		display: block;
		margin: auto;
		
	}
#jobchg-f-benefit-area section section #jobchg-f-bnf-price li:first-of-type{
		margin-bottom: 15%;
	}

	
#jobchg-f-benefit-area section section #jobchg-f-bnf-price li p{
		text-align: center;
		font-weight: 700;
		color: #2b2b2b;
		font-size: 1em;
		padding: 0;
	}
#jobchg-f-benefit-area section section #jobchg-f-bnf-price li:nth-of-type(1) span{
		font-size: 1.5em;
	}
#jobchg-f-benefit-area section section #jobchg-f-bnf-price  li:nth-of-type(2) p{
		line-height: 1.3;
	}
	
#jobchg-f-benefit-area section section #jobchg-f-bnf-price  li:nth-of-type(2) span{
		font-size: 2.25em;
		color: #ec6d65;
	}	
#jobchg-f-benefit-area section section #jobchg-f-bnf-payment{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		font-size: 1.1em;
		font-weight: 700;
		padding: 0;
	}

#jobchg-f-benefit-area section section #jobchg-f-bnf-payment span{
		color: #e52655;
		font-size: 1.4em;	
		margin: 0 5px;
		line-height: 1em;
		font-weight: 900; 
	}
#jobchg-f-benefit-area section section #jobchg-f-bnf-payment strong{
		font-size: 1.7em;
		line-height: 1;
		font-weight: 700;
		vertical-align: -10%;
	}		
	
#jobchg-f-benefit-area section #jobchg-f_bnf_csl{
	width: 92%;
	height: auto;
	margin: auto;
	background-image: url("../images/jobchg-f_bnf_arrow02_90deg.png");
	background-repeat: no-repeat;
	background-size: 10% auto;
	background-position: 50% 43%;
	
	}	
#jobchg-f-benefit-area section #jobchg-f_bnf_csl p{
	padding: 4% 0 5% 27%;
	text-align: left;
	background-image:url("../images/jobchg-f_bnf_pic_01.png");
	background-repeat: no-repeat;
	background-size: 23% auto;
	background-position: left top;
	font-size: 1.125em;
	color: #ec6d65;
	font-weight: 700;
	line-height: 1.5;
	width: 92%;
	height: auto;
	margin: auto;
	}	
#jobchg-f-benefit-area section #jobchg-f_bnf_csl p span{
		display: block;
		color: #2b2b2b;
		font-size: 0.75em;
	}
#jobchg-f-benefit-area section #jobchg-f_bnf_csl a{
		text-decoration: none;
	}	
#jobchg-f-benefit-area section #jobchg-f_bnf_csl #jobchg-f-benefit-btn{
		position: relative;
		display: block;
		width: 100%;
		margin: 20% auto 10px;
		padding: 9% 0 7%;
		text-align: center;
		font-weight: bold;
		color: #fff;
		background: #e52655;
		border-bottom: 4px solid #ac3133;
		font-size: 1.125em;
		border-radius: 60px;
}
	
#jobchg-f-benefit-area section #jobchg-f_bnf_csl #jobchg-f-benefit-btn span {
	position: absolute;
	display: block;
	width: 70%;
	margin: auto;
	top: -12px;
	left: 0;
	right: 0;
	color: #2b2b2b;
	font-size: 12px;
/*font-size: 0.68em;*/
	padding: 1% 0;
	border-radius: 60px;
	background: #fff;
	text-align: center;
	border: 1px solid #e52655;
}	
#jobchg-f-benefit-area section #jobchg-f_bnf_csl #jobchg-f-benefit-btn span strong{
		color: #e52655;
	}					
	
/*------------------------------------------*/	
	/*----------20251119　中本追加------------*/		
	
.popup-bnr{
display: none;
position: fixed;
z-index: 20;
bottom: -20px;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 94%;
text-align: center;
font-size: 1.2em;
font-weight: bold;
line-height: 120%;
}

	
	
.popup-bnr a{
display: block;
height: auto;
padding: 20px 0;
text-decoration: none;
color:#fff;
filter: drop-shadow(0 0 6px rgba(0,67,118,0.2));
transition: all 0.3s ease;
border-radius: 50px;
background-color: #e52655;
position:relative;
font-size: 2.0rem;
letter-spacing: 0.075rem;
width:100%;
border:solid 3px #fff;
	}
		
	
/*------------------------------------------*/
	
#advertiser{
	width: 100%;
	height: auto;
	background-color: #505050;
	padding: 30px 0 20px;

}
#advertiser h2{
	margin: 0 auto 20px;
	color: #ffffff;
	font-size: 1.5em;
	line-height: 1;
	text-align: center;
	padding: 0;
	

}
#advertiser ul{
	width: 90%;
	height: auto;
	margin: auto;
	list-style: none;
	padding: 0;
	font-size: 0.85em;
}

#advertiser ul li{
	display: flex;
	margin-bottom: 10px;
	
}
#advertiser ul li .adhead{
	width: 100px;
	height: 1.5em;
	text-align: center;
	background-color: #ffffff;
	color: #505050;
	line-height: 1.5;
	letter-spacing: 0.1em;
}

#advertiser ul li .adcontent{
	margin: 0 0 0 20px;
	color: #ffffff;
	letter-spacing: 0.05em;
}
#advertiser ul li .adcontent a{
	color: #ffffff;
	text-underline-offset:0.3em;
}
	
footer {
    background-color: #505050;
    text-align: center;
    padding: 0 0 30px;
    color: #fff;
    font-size: 0.75em;
}
footer div{
	width: 90%;
	margin: auto;
	padding: 30px 0 0;
	border-top: 1px solid #ffffff;
}

footer img {
    width: 36%;
	margin: 0 auto 20px;
}

footer p {
    margin-bottom: 0;
}



.shine {
  overflow: hidden;
}

.shine::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.75) 32%, rgba(255, 255, 255, 0.75) 78%, rgba(255, 255, 255, 0) 82%);
  animation: shine-loop 2.2s linear infinite;
mix-blend-mode:screen;
}

@keyframes shine-loop {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(200%);
  }
}