@charset "UTF-8";

/* 教育訓練給付制度　benefit_sys
----------------------------*/
div.ttl_wrap {
	width: 100%;
    background-color: rgba(192,210,230,1.0);
}
#main_box {
	position: relative;
	margin: 0 auto;
    padding: 0 10px;
	max-width: 1280px;
	height: 186px;
	overflow: hidden;
    background-image: url("../img/bg_ttl.webp?2601221459");
    background-repeat: no-repeat;
    background-position: 90% top;
    -webkit-background-size: 530px;/*cover か contain*/
    background-size: 530px;
    /*background-color: rgba(255,255,255,.2);*/
}

#main_box img {
    display: block;
    margin: 0 0 0 10%;
    max-width: 337px;
}

/* ########### 800px以下 ########### */
@media (max-width: 800px) {
#main_box {
    background-position: 30vw top;
}
}
/* ########### 600px以下 ########### */
@media (max-width: 600px) {
#main_box img {
    margin: 0 auto;
}
}



/* 教育訓練給付制度について　benefit
----------------------------------------------- */

#benefit {
	position: relative;
    padding: 0 20px 60px;
}

#benefit img {
	width: 100%;
}
#benefit img.benefit_img {
    display: block;
    margin: 0 auto;
	max-width: 388px;
}
#benefit img.ext_img {
	width: 26px;
    margin-bottom: -5px;
}
#benefit .con_wrap a {
    text-decoration: underline;
}
#benefit .heading {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 10px 10px 60px;
    background-color: rgba(217,230,242,1);
    border-radius: 9999px;
}
#benefit .heading h2 {
    font-size: 24px;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-style: normal;
}
#benefit .con_wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 0 0;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-style: normal;
    /*background: rgba(112,226,249,0.3);*/
}
#benefit .con_wrap .no_ind {
	font-size: 16px;
    line-height: 1.5;
    text-align: justify;
}
#benefit .con_wrap .row {
	font-size: 16px;
    line-height: 1.5;
    padding-left: 2rem;
    text-indent: -2rem;
}
#benefit .con_wrap .row2 {
	font-size: 16px;
    line-height: 1.5;
    padding-left: 1.25rem;
    text-indent: -1.25rem;
}
#benefit .con_wrap p.sub_tit,
#benefit .con_wrap p.sub_tit_L {
    font-size: 24px;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-style: normal;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#benefit .con_wrap p.sub_tit span {
    margin: 5px 0 0 10px;
    font-size: 16px;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}
#benefit .con_wrap p.cau {
    font-size: 16px;
    color: rgba(255,0,4,1.00);
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-style: normal;
}
#benefit .con_wrap p.hello {
    max-width: 360px;
    margin: 0 0 0 auto;
    padding: 10px 0;
    font-size: 16px;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-style: normal;
}
#benefit .con_wrap p.hello_2 {
    width: 100%;
    margin: 0;
    padding: 10px 0;
    font-size: 16px;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-style: normal;
}
#benefit .con_wrap p.box {
    padding: 20px 30px;
    font-size: 16px;
    line-height: 1.75;
    background-color: #E1E1E1;
    text-align: start;
}
#benefit .cdr_btn {
	max-width: 400px;
    margin: 0 0 0 auto;
    border: 1px solid #BBB;
}
#benefit .cdr_btn p {
    max-width: 300px;
    margin: 0 auto;
    font-size: 24px;
    line-height: 1.5;
    /*text-align: center;*/
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 400;
    font-style: normal;
    display: flex;
    justify-content: space-around;
}
#benefit .cdr_btn p img {
    width: 26px;
}
#benefit .cdr_btn a {
    display: block;
    padding: 20px 0;
    color: #000;
	transition: all 0.3s 0s ease;
}
@media (any-hover: hover) {
#benefit .cdr_btn a:hover {
	background-color: #D1E4FF;
}
}
#benefit .con_wrap .course p {
    font-size: 16px;
    line-height: 1.75;
}
#benefit .con_wrap .course p.c_name {
    font-size: 20px;
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 500;
    font-style: normal;
}


/* ########### 720px以下 ########### */
@media (max-width: 720px) {

}
/* ########### 600px以下 ########### */
@media (max-width: 600px) {
#benefit .cdr_btn {
    margin: 0 auto;
}
}
/* ########### 500px以下 ########### */
@media (max-width: 500px) {
#benefit .heading {
    padding: 10px 10px 10px 10vw;
}
#benefit .heading h2 {
    font-size: calc(20px + 4 * (100vw - 320px)/180);/*500px〜320px間・18px〜16pxまで可変*/
}
#benefit .con_wrap {
	padding: 40px 0 0;
}
}
/* ########### 445px以下 ########### */
@media (max-width: 445px) {

}
/* ########### 420px以下 ########### */
@media (max-width: 420px) {
#benefit .con_wrap p.sub_tit_L {
    justify-content: center;    
}
#benefit .con_wrap p.sub_tit_L,
#benefit .con_wrap p.sub_tit {
    font-size: calc(21px + 3 * (100vw - 320px)/100);/*420px〜320px間・24px〜21pxまで可変*/
}
#benefit .cdr_btn p {
    font-size: calc(20px + 4 * (100vw - 320px)/100);/*420px〜320px間・24px〜20pxまで可変*/
}
}
/* ########### 338px以下 ########### */
@media (max-width: 338px) {

}