@charset "UTF-8";


/*基本のレイアウト（スマホ向けレイアウト）
*******************************************************************************************/


/* メイン画像
------------------------------------------------------------------------------------------*/
.img_u {background: url("../img/top_text_u.png"), linear-gradient( 130deg, rgba(39, 172, 169, 0.7) 0%, rgba(39, 172, 169, 0.7) 25%, rgba(39, 172, 169, 0) 25%, rgba(39, 172, 169, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_u_sp.jpg");}
.img_g {background: url("../img/top_text_g.png"), linear-gradient( 130deg, rgba(82, 174, 115, 0.7) 0%, rgba(82, 174, 115, 0.7) 25%, rgba(82, 174, 115, 0) 25%, rgba(82, 174, 115, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_g_sp.jpg");}
.img_j {background: url("../img/top_text_j.png"), linear-gradient( 130deg, rgba(129, 189, 102, 0.7) 0%, rgba(129, 189, 102, 0.7) 25%, rgba(129, 189, 102, 0) 25%, rgba(129, 189, 102, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_j_sp.jpg");}
.img_n {background: url("../img/top_text_n.png"), linear-gradient( 130deg, rgba(78, 134, 203, 0.7) 0%, rgba(78, 134, 203, 0.7) 25%, rgba(78, 134, 203, 0) 25%, rgba(78, 134, 203, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_n_sp.jpg");}
.img_w {background: url("../img/top_text_w.png"), linear-gradient( 130deg, rgba(153, 131, 189, 0.7) 0%, rgba(153, 131, 189, 0.7) 25%, rgba(153, 131, 189, 0) 25%, rgba(153, 131, 189, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_w_sp.jpg");}
.img_f {background: url("../img/top_text_f.png"), linear-gradient( 130deg, rgba(255, 107, 160, 0.7) 0%, rgba(255, 107, 160, 0.7) 25%, rgba(255, 107, 160, 0) 25%, rgba(255, 107, 160, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_f_sp.jpg");}
.img_c {background: url("../img/top_text_c.png"), linear-gradient( 130deg, rgba(255, 155, 71, 0.7) 0%, rgba(255, 155, 71, 0.7) 25%, rgba(255, 155, 71, 0) 25%, rgba(255, 155, 71, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_c_sp.jpg");}
.img_c {position: relative;}
.img_u,
.img_g,
.img_j,
.img_n,
.img_w,
.img_f,
.img_c {
	background-repeat: no-repeat;
	background-position: top 10px left 5px, center, center, center;
	background-size: 130px, cover, cover, cover;
}

/* 見出し
-----------------------------------------------------------------------------------------*/
/* h2 各科メイン画像の上の学科名 */
.h2_course {
	font-size: 1.5rem;
	/*text-align: left;*/
	letter-spacing: 0;
	padding: 135px 0 0 0;
}


/* h3 学科選択ページの学科名とそれに続く説明文の書式 */
.course_name {
	font-family: 'M PLUS 1p', sans-serif;
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	padding: 20px 0 20px 0;
	margin-top: 10px;
	margin-bottom: 0px;
	color: #fff;
	text-decoration: none;
}
.course_name+p{
	font-size: 0.8rem;
	text-align: center;
	padding: 10px;
	margin-bottom: 0px;
}

/* h3 各科ページの最初の目標部分の書式 */
.course_purpose {
	font-size: 1.3rem;
	line-height: 2rem;
	text-align: left;
}

/* h4 各科ページの吹き出しの書式 */
.h4_u,
.h4_g,
.h4_j,
.h4_n,
.h4_w,
.h4_f,
.h4_c {
	margin: 0 0 20px;
	padding: 10px;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1.5rem;
	text-shadow: none;
	border-radius: 3px;
	position: relative;
	font-weight: 500;
	display: flex;/* spanが画面が広けりゃ横並び */
	flex-wrap: wrap;/* spanが画面に合わせて折り返し */
}
.h4_u{background: repeating-linear-gradient(-45deg, #2abab7, #2abab7 6px, #27aca9 0, #27aca9 12px);}
.h4_g{background: repeating-linear-gradient(-45deg, #5eb37c, #5eb37c 6px, #52ae73 0, #52ae73 12px);}
.h4_j{background: repeating-linear-gradient(-45deg, #8bc272, #8bc272 6px, #81bd66 0, #81bd66 12px);}
.h4_n{background: repeating-linear-gradient(-45deg, #5b8fcf, #5b8fcf 6px, #4e86cb 0, #4e86cb 12px);}
.h4_w{background: repeating-linear-gradient(-45deg, #a28ec3, #a28ec3 6px, #9983bd 0, #9983bd 12px);}
.h4_f{background: repeating-linear-gradient(-45deg, #ff7cab, #ff7cab 6px, #ff6ba0 0, #ff6ba0 12px);}
.h4_c{background: repeating-linear-gradient(-45deg, #ffa458, #ffa458 6px, #ff9b47 0, #ff9b47 12px);}

.h4_u:after,
.h4_g:after,
.h4_j:after,
.h4_n:after,
.h4_w:after,
.h4_f:after,
.h4_c:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 17px;
	height: 0;
	width: 0;
	border: 6px solid transparent;
}
.h4_u:after {  border-top: 6px solid #2abab7;}
.h4_g:after {  border-top: 6px solid #5eb37c;}
.h4_j:after {  border-top: 6px solid #8bc272;}
.h4_n:after {  border-top: 6px solid #5b8fcf;}
.h4_w:after {  border-top: 6px solid #a28ec3;}
.h4_f:after {  border-top: 6px solid #ff7cab;}
.h4_c:after {  border-top: 6px solid #ffa458;}



/*テーブル系 各科
-----------------------------------------------------------------------------------------*/
/* u */
.table_u {	border: #2abab7 1px solid;}
.table_u th {	border: #2abab7 1px solid;	background: #88e4e2;}
.table_u td {	border: #2abab7 1px solid;}

/* g */
.table_g {	border: #5eb37c 1px solid;}
.table_g th {	border: #5eb37c 1px solid;	background: #a3d4b5;}
.table_g td {	border: #5eb37c 1px solid;}

/* j */
.table_j {	border: #8bc272 1px solid;}
.table_j th {	border: #8bc272 1px solid;	background: #c5e1b9;}
.table_j td {	border: #8bc272 1px solid;}

/* n */
.table_n {	border: #5b8fcf 1px solid;}
.table_n th {	border: #5b8fcf 1px solid;	background: #aac5e6;}
.table_n td {	border: #5b8fcf 1px solid;}

/* w */
.table_w {	border: #a28ec3 1px solid;}
.table_w th {	border: #a28ec3 1px solid;	background: #d9d1e6;}
.table_w td {	border: #a28ec3 1px solid;}

/* f */
.table_f {	border: #ff7cab 1px solid;}
.table_f th {	border: #ff7cab 1px solid;	background: #ffd1e1;}
.table_f td {	border: #ff7cab 1px solid;}

/* c */
.table_c {	border: #ffa458 1px solid;}
.table_c th {	border: #ffa458 1px solid;	background: #ffdcbe;}
.table_c td {	border: #ffa458 1px solid;}


/* 企業様からのメッセージ
-----------------------------------------------------------------------------------------*/
.co-name{
	text-align: center;
	font-size: 1.0rem;
	line-height: 1.5rem;
	font-weight: 500;
	padding: 20px 5px 10px;
	margin: 0 0 10px 0;
}
.co-person {
    text-align: center;
	font-size: 0.9rem;
	border-bottom: #ccc 1px solid;
	padding: 0px 5px 25px;
	margin: 0 0 20px 0;
}
.co-message >figure {
    width: 60%;
    margin-bottom: 20px;
}
.co-message > p {
	padding: 0px 5px 10px;
	line-height: 1.8;
}

dif.wrap_h2 h1 {
	padding-top: 2rem;
	letter-spacing: -10px;
}

section#head {
	padding-top: 1rem;
}

section h2 {
	padding-top: 1rem;
}

.no-bmargin {
	margin-top: 0;
	margin-bottom: 0;
}

.h2_course {
	font-size: 2rem;
	padding: 185px 0 0 0;
}

section h3 {
	margin: 0 0 70px 0;
	padding: 60px 0 0 0; /*#リンクの時にヘッダーと重ならないように*/
	/* font-size: 1.7rem; */
	font-size: 2.5rem;
	font-weight: normal;
	text-align: center;
}
/*****************************************************************************************
基本のレイアウト（スマホ向けレイアウト）終わり*/



/*タブレット・PC向けレイアウト768px～
*******************************************************************************************/
@media screen and (min-width: 768px) {

/* マウスホバー
-----------------------------------------------------------------------------------------*/
a:hover img {
	transform: none;
}


/* メインイメージ
-----------------------------------------------------------------------------------------*/
.img_u {background: url("../img/top_text_u.png"), linear-gradient( 130deg, rgba(39, 172, 169, 0.7) 0%, rgba(39, 172, 169, 0.7) 25%, rgba(39, 172, 169, 0) 25%, rgba(39, 172, 169, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_u_pc.jpg");}
.img_g {background: url("../img/top_text_g.png"), linear-gradient( 130deg, rgba(82, 174, 115, 0.7) 0%, rgba(82, 174, 115, 0.7) 25%, rgba(82, 174, 115, 0) 25%, rgba(82, 174, 115, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_g_pc.jpg");}
.img_j {background: url("../img/top_text_j.png"), linear-gradient( 130deg, rgba(129, 189, 102, 0.7) 0%, rgba(129, 189, 102, 0.7) 25%, rgba(129, 189, 102, 0) 25%, rgba(129, 189, 102, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_j_pc.jpg");}
.img_n {background: url("../img/top_text_n.png"), linear-gradient( 130deg, rgba(78, 134, 203, 0.7) 0%, rgba(78, 134, 203, 0.7) 25%, rgba(78, 134, 203, 0) 25%, rgba(78, 134, 203, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_n_pc.jpg");}
.img_w {background: url("../img/top_text_w.png"), linear-gradient( 130deg, rgba(153, 131, 189, 0.7) 0%, rgba(153, 131, 189, 0.7) 25%, rgba(153, 131, 189, 0) 25%, rgba(153, 131, 189, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_w_pc.jpg");}
.img_f {background: url("../img/top_text_f.png"), linear-gradient( 120deg, rgba(255, 107, 160, 0.7) 0%, rgba(255, 107, 160, 0.7) 25%, rgba(255, 107, 160, 0) 25%, rgba(255, 107, 160, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_f_pc.jpg");}
.img_c {background: url("../img/top_text_c.png"), linear-gradient( 130deg, rgba(255, 155, 71, 0.7) 0%, rgba(255, 155, 71, 0.7) 25%, rgba(255, 155, 71, 0) 25%, rgba(255, 155, 71, 0) 100%), repeating-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2) 2px,  rgba(100, 100, 100, 0.3) 0,  rgba(100, 100, 100, 0.3) 3px), url("../img/top_course_c_pc.jpg");}

.img_u,
.img_g,
.img_j,
.img_n,
.img_w,
.img_f,
.img_c {
	background-repeat: no-repeat;
	background-position: top 80px left 10px, top 0 left 0px, center, center;
	background-size: 230px, cover, cover, cover;
}


/* 見出し
-----------------------------------------------------------------------------------------*/


/* h3　学科選択ページの学科名とそれに続く説明文の書式 */
.course_name {
	font-size: 1.5rem;
	width: 50%;
	padding: 60px 0 60px 0;
	margin-top: 0px;/* spのネガティブマージンを初期化 */
	position: absolute;
	top: 0;
	z-index: 3;
}
.course_name+p{
	font-size: 1rem;
	width: 350px;
	padding: 30px;
	text-align: left;
	line-height: 1.2rem;
	position: absolute;/* innerがrelativeなので */
	top: 145px;
	z-index: 2;
}



/* sectionの書式
----------------------------------------------------------------------------------------- */
/* section内の各学科を包む枠 */
.wrap_course {
	height: 470px;
}

/* section内の各学科画像 */
.course_img {
	position: absolute;/* innerがrelativeなので */
	bottom: 0;
	right: 0;
	z-index: 1;
}



/* 企業様からのメッセージ
-----------------------------------------------------------------------------------------*/
.co-name{
	font-size: 1.2rem;
	line-height: 1.5rem;
	font-weight: 500;
	padding: 20px 5px 10px;
	margin: 0 0 10px 0;
}
.co-person {
	font-size: 1rem;
	border-bottom: #ccc 1px solid;
	padding: 0px 5px 25px;
	margin: 0 0 10px 0;
}
.co-message {
    display: flex;
    padding: 10px 30px 20px 30px;
}
.co-message >figure {
    width: 30%;
}
.co-message > p {
    width: 70%;
    text-align: left;
	padding: 0px 5px 10px 10px;
}

}/*タブレット向け終わり*/


/* こども学科ステッカー */
.top_sticker_c {
    width: 170px;
    position: absolute;
    right: 20px;
    bottom: -30px;
}
.updown {
    filter: drop-shadow( 2px 2px 5px #333);
    animation-name:updown1;   /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 3s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite; 
}
@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@media screen and (min-width: 768px) {

    .top_sticker_c {
        width: 200px;
        position: absolute;
        right: 20px;
        bottom: -60px;
    }
    
}