@charset "UTF-8";


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

/* 文字系
----------------------------------------------------------------------------------------- */
.t_left {text-align: left;}
.t_right {text-align: right;}
.t_center {text-align: center;}
.t_l_c {text-align: left;}/*テキスト　スマホはleft　→　PCはcenter*/
.t_bold {font-weight: 700;}
.t_small {font-size: 0.8rem; line-height: 1.1rem;}
.t_big {font-size: 1.5rem; line-height: 2.5rem; font-weight: 600;}
.t_super {font-size: 2rem; line-height: 3rem; font-weight: 600;}
.t_ultra {font-size: 3rem; line-height: 4rem; font-weight: 800;}
.t_s_l {font-size: 1rem; line-height: 2rem; font-weight: 500;}/*テキストSmall→Large*/

.t_under {text-decoration: underline;}
.t_through {text-decoration: line-through;}

.center {
	margin-left: auto;
	margin-right: auto;
}


/* 幅系
----------------------------------------------------------------------------------------- */
.width_30,
.width_50,
.width_60,
.width_70,
.width_80 {width: 100%;}


/* ボタン系 （btn01はbg水色　btn02はbg白）
----------------------------------------------------------------------------------------- */

/* ボタンたちの共通書式 */
.btn01,
.btn02,
.btn03,
.btn_j,
.btn_f,
.btn_c {
	display: block;
	width: 200px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	outline: none;
	position: relative;
	z-index: 2;
	line-height: 50px;
	overflow: hidden;
	margin-top: 50px;
	margin-bottom: 50px;
	font-size: 0.8rem;
	font-weight: 500;
	color: #222;
}
/* ボタン背景 */
.btn01 {background: url(../img/btn_01.png);}
.btn02 {background: url(../img/btn_02.png);}
.btn03 {border: 1px solid #222;}
.btn_j {background: url(../img/btn_j.png);}
.btn_f {background: url(../img/btn_f.png);}
.btn_c {background: url(../img/btn_c.png);}

/* ボタンたちのスルッと入ってくるヤツのスタンバイ */
.btn01::before,
.btn02::before,
.btn03::before,
.btn_j::before,
.btn_f::before,
.btn_c::before {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
}

/* ボタンたちの動きの時間 */
.btn01, .btn01::before, .btn01::after,
.btn02, .btn02::before, .btn02::after,
.btn03, .btn03::before, .btn03::after,
.btn_j, .btn_j::before, .btn_j::after,
.btn_f, .btn_f::before, .btn_f::after,
.btn_c, .btn_c::before, .btn_c::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}

/* ボタンたちの右側三角 */
.btn01::after,
.btn02::after,
.btn03::after,
.btn_j::after,
.btn_f::after,
.btn_c::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	width: 10px;
	height:10px;
	margin-top: -5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-top: 2px solid #222;
	border-right: 2px solid #222;
} 


/* イメージ系、スタンプ系（背景にある飾り的なもの）
----------------------------------------------------------------------------------------- */

/* スタンプ */
.stamp_info {
	background-image: url("../img/stamp_info.png");
	background-repeat: no-repeat;
	background-position: right 0px top 0px;
	background-size: 100px;
}
.stamp_oc {
	background-image: url("../img/event_oc.png");
	background-repeat: no-repeat;
	background-position: right 0px top 0px;
	background-size: 200px;
}

/* 丸くしますよ */
.circle {
	border-radius: 50%;
}


/*アロー系01 "三角形"
.arrow01_wh 右向き三角白
.arrow01_lb 右向き三角水色
.arrow01_gr 右向き三角水色
------------------------------------------------------------------------------------------*/

/* 右向き三角全般の書式 */
.arrow01_wh,
.arrow01_lb,
.arrow01_gr {
	position: relative;
	display: block;
}

.arrow01_wh::after,
.arrow01_lb::after,
.arrow01_gr::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0px;
	margin-top: -5px;/* border-top-width分ずれるので上に戻す */
	border: 7px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
}
/* 右向き三角の白色 */
.arrow01_wh::after {
   border-left-color: #fff;
}
/* 右向き三角の水色 */
.arrow01_lb::after {
   border-left-color: #54c3f1;
}
/* 右向き三角のグレー色 */
.arrow01_gr::after {
   border-left-color: #666;
}


/*アロー系01 "三角形" 下向き
.arrow01_bottom_wh 下向き三角白
.arrow01_bottom_lb 下向き三角水色
.arrow01_bottom_gr 下向き三角水色
------------------------------------------------------------------------------------------*/

/* 右向き三角全般の書式 */
.arrow01_bottom_wh,
.arrow01_bottom_lb,
.arrow01_bottom_gr {
	position: relative;
	display: block;
}

.arrow01_bottom_wh::after,
.arrow01_bottom_lb::after,
.arrow01_bottom_gr::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-top: 25px;/* boxから25px分離す */
	margin-left: -20px;/* left50%にしてもborderの太さ分ずれるので20px分戻す */
	border: 20px solid transparent;
}
/* 右向き三角の白色 */
.arrow01_bottom_wh::after {
   border-top-color: #fff;
}
/* 右向き三角の水色 */
.arrow01_bottom_lb::after {
   border-top-color: #54c3f1;
}
/* 右向き三角のグレー色 */
.arrow01_bottom_gr::after {
   border-top-color: #666;
}


/*アロー系02 " > "
.arrow02_wh 右向き白
.arrow02_lb 右向き水色
.arrow02_gr 右向きグレー
------------------------------------------------------------------------------------------*/
.arrow02_wh,
.arrow02_lb,
.arrow02_gr {
	position: relative;
	display: block;
}

.arrow02_wh::after,
.arrow02_lb::after,
.arrow02_gr::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	width: 10px;
	height:10px;
	margin-top: -5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
/* 右向き三角の白色 */
.arrow02_wh::after {
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
/* 右向き三角のグレー */
.arrow02_gr::after {
	border-top: 2px solid #666;
	border-right: 2px solid #666;
}
/* 右向き三角の水色 */
.arrow02_lb::after {
	border-top: 2px solid #54c3f1;
	border-right: 2px solid #54c3f1;
}


/* フォントカラー
------------------------------------------------------------------------------------------*/
.fc_bl {color: #000;}/*文字_黒*/
.fc_wh {color: #fff;}/*文字_白*/
.fc_b {color: #54c3f1;}/*文字_水色*/
.fc_db {color: #108bbf;}/*文字_濃い水色*/
.fc_r {color: #ff0000;}/*文字_赤色*/

.fc_u {color: #27aca9;}/*文字_青緑*/
.fc_g {color: #52ae73;}/*文字_緑*/
.fc_j {color: #81bd66;}/*文字_黄緑*/
.fc_n {color: #4e86cb;}/*文字_青*/
.fc_w {color: #9983bd;}/*文字_紫*/
.fc_f {color: #ff6ba0;}/*文字_ピンク*/
.fc_c {color: #ff9b47;}/*文字_オレンジ*/


/* 蛍光ペン
------------------------------------------------------------------------------------------*/
.mark_b {background: linear-gradient(transparent 60%, #e1f5fd 0%);}
.mark_u {background: linear-gradient(transparent 60%, #cdf4f3 0%);}
.mark_g {background: linear-gradient(transparent 60%, #d1eada 0%);}
.mark_j {background: linear-gradient(transparent 60%, #ecf5e9 0%);}
.mark_n {background: linear-gradient(transparent 60%, #dee9f5 0%);}
.mark_w {background: linear-gradient(transparent 60%, #ebe7f2 0%);}
.mark_f {background: linear-gradient(transparent 60%, #fcecf0 0%);}
.mark_c {background: linear-gradient(transparent 60%, #ffeee0 0%);}

/* 背景の塗りつぶしじゃなくborderのみ--------------------------------------------------- */
.border_bl {border: 3px #222 solid;}
.border_b {border: 1px solid #54c3f1;}
.border_u {border: 1px solid #27aca9;}
.border_g {border: 1px solid #52ae73;}
.border_j {border: 1px solid #81bd66;}
.border_n {border: 1px solid #4e86cb;}
.border_w {border: 1px solid #9983bd;}
.border_f {border: 1px solid #ff6ba0;}
.border_c {border: 1px solid #ff9b47;}

/* 背景
------------------------------------------------------------------------------------------*/
.bg_gr {background: #666;}/*背景色_グレー asideの背景*/
.bg_wh {background: #fff;}/*背景色_白*/
.bg_b {background: #54c3f1;}/*背景色_濃い水色*/
.bg_lb {background: #83d4f5;}/*背景色_薄い水色*/
.bg_llb {background: #b2e4f9;}/*白boxの裏に濃い斜線飾りがある時の背景色*/
.bg_lllb {background: #c2eafa;}/*白boxの裏に濃い斜線飾りがある時の背景色*/
.bg_main {background: #e1f5fd;}/*見出し用にメインと同じ色の背景色*/

/* 背景学科
------------------------------------------------------------------------------------------*/
.bg_u {background: #27ACA9;}
.bg_g {background: #52AE73;}
.bg_j {background: #81BD66;}
.bg_n {background: #4E86CB;}
.bg_w {background: #9983BD;}
.bg_f {background: #F26F9B;}
.bg_c {background: #FF9B47;}

.bg_lu {background: #88e2e2;}
.bg_lg {background: #a3d4b5;}
.bg_lj {background: #c5e1b9;}
.bg_ln {background: #aac5e6;}
.bg_lw {background: #d9d1e6;}
.bg_lf {background: #ffd1e1;}
.bg_lc {background: #ffdcbe;}

.bg_main_u {background: #d3edec;}
.bg_main_g {background: #d1eada;}
.bg_main_j {background: #ecf5e9;}
.bg_main_n {background: #dee9f5;}
.bg_main_w {background: #ebe7f2;}
.bg_main_f {background: #fcecf0;}
.bg_main_c {background: #ffeee0;}


/* ストライプ----------------------------------------------- */

.bg_gr_deg_img {
	background: url("../img/bg_sla.png");
}

/* グレー　斜め　細い */
.bg_gr_deg_00 {	background: repeating-linear-gradient(-45deg, #fff, #fff 2px, #eee 0, #eee 3px);}
/* グレー　斜め　細い */
.bg_gr_deg_01 {	background: repeating-linear-gradient(-45deg, #c3c3c3, #c3c3c3 3px, #ccc 0, #ccc 6px);}
/* グレー　斜め　太い */
.bg_gr_deg_02 {	background: repeating-linear-gradient(-45deg, #c3c3c3, #c3c3c3 10px, #ccc 0, #ccc 20px);}


/* 黒　斜め　中間 */
.bg_bl_deg_00 {	background: repeating-linear-gradient(-45deg, #fff, #fff 5px, #444 0, #444 10px);}


/* 水色　斜め　細い */
.bg_llb_deg_01 {	background: repeating-linear-gradient(-45deg, #b2e4f9, #b2e4f9 3px, #c2eafa 0, #c2eafa 6px);}
/* 水色　斜め　太い */
.bg_llb_deg_02 {	background: repeating-linear-gradient(-45deg, #b2e4f9, #b2e4f9 10px, #c2eafa 0, #c2eafa 20px);}

/* 水色　縦　太い */
.bg_llb_ver_02 {	background: repeating-linear-gradient(-90deg, #b2e4f9, #b2e4f9 10px, #c2eafa 0, #c2eafa 20px);}


/* 濃い水色　斜め　細い */
.bg_lb_deg_01 {	background: repeating-linear-gradient(-45deg, #b2e4f9, #b2e4f9 3px, #54c3f1 0, #54c3f1 6px);}
/* 濃い水色　斜め　太い */
.bg_lb_deg_02 {	background: repeating-linear-gradient(-45deg, #64c9f2, #64c9f2 10px, #54c3f1 0, #54c3f1 20px);}

/* 濃い水色　縦　太い */
.bg_lb_ver_02 {	background: repeating-linear-gradient(-90deg, #64c9f2, #64c9f2 10px, #54c3f1 0, #54c3f1 20px);}


/* 濃い　斜め　太い　各科 */
.bg_u_deg_02 {	background: repeating-linear-gradient(-45deg, #2abab7, #2abab7 10px, #27aca9 0, #27aca9 20px);}
.bg_g_deg_02 {	background: repeating-linear-gradient(-45deg, #5eb37c, #5eb37c 10px, #52ae73 0, #52ae73 20px);}
.bg_j_deg_02 {	background: repeating-linear-gradient(-45deg, #8bc272, #8bc272 10px, #81bd66 0, #81bd66 20px);}
.bg_n_deg_02 {	background: repeating-linear-gradient(-45deg, #5b8fcf, #5b8fcf 10px, #4e86cb 0, #4e86cb 20px);}
.bg_w_deg_02 {	background: repeating-linear-gradient(-45deg, #a28ec3, #a28ec3 10px, #9983bd 0, #9983bd 20px);}
.bg_f_deg_02 {	background: repeating-linear-gradient(-45deg, #ff7cab, #ff7cab 10px, #ff6ba0 0, #ff6ba0 20px);}
.bg_c_deg_02 {	background: repeating-linear-gradient(-45deg, #ffa458, #ffa458 10px, #ff9b47 0, #ff9b47 20px);}

/* 薄い　斜め　太い　各科 */
.bg_lu_deg_02 {	background: repeating-linear-gradient(-45deg, #88e2e2, #88e2e2 10px, #7adcdf 0, #7adcdf 20px);}
.bg_lg_deg_02 {	background: repeating-linear-gradient(-45deg, #a3d4b5, #a3d4b5 10px, #97ceab 0, #97ceab 20px);}
.bg_lj_deg_02 {	background: repeating-linear-gradient(-45deg, #c5e1b9, #c5e1b9 10px, #bcdcad 0, #bcdcad 20px);}
.bg_ln_deg_02 {	background: repeating-linear-gradient(-45deg, #aac5e6, #aac5e6 10px, #9dbce2 0, #9dbce2 20px);}
.bg_lw_deg_02 {	background: repeating-linear-gradient(-45deg, #d9d1e6, #d9d1e6 10px, #d0c6e0 0, #d0c6e0 20px);}
.bg_lf_deg_02 {	background: repeating-linear-gradient(-45deg, #ffd1e1, #ffd1e1 10px, #ffc0d7 0, #ffc0d7 20px);}
.bg_lc_deg_02 {	background: repeating-linear-gradient(-45deg, #ffdcbe, #ffdcbe 10px, #ffd2ad 0, #ffd2ad 20px);}

/* 薄い　縦　太い　各科 */
.bg_lu_ver_02 {	background: repeating-linear-gradient(-90deg, #88e2e2 0px 10px, #7adcdf 10px 20px);}
.bg_lg_ver_02 {	background: repeating-linear-gradient(-90deg, #a3d4b5 0px 10px, #97ceab 10px 20px);}
.bg_lj_ver_02 {	background: repeating-linear-gradient(-90deg, #c5e1b9 0px 10px, #bcdcad 10px 20px);}
.bg_ln_ver_02 {	background: repeating-linear-gradient(-90deg, #aac5e6 0px 10px, #9dbce2 10px 20px);}
.bg_lw_ver_02 {	background: repeating-linear-gradient(-90deg, #d9d1e6 0px 10px, #d0c6e0 10px 20px);}
.bg_lf_ver_02 {	background: repeating-linear-gradient(-90deg, #ffd1e1 0px 10px, #ffc0d7 10px 20px);}
.bg_lc_ver_02 {	background: repeating-linear-gradient(-90deg, #ffdcbe 0px 10px, #ffd2ad 10px 20px);}


/* チェック柄---------------------------------------------- */
/*グレー格子*/
.bg_gr_grid {
	background-color: #fff;
	background-image: linear-gradient(transparent 65%, rgba(238,238,238,.75) 65%, rgba(238,238,238,.75) 75%, transparent 75%),
										linear-gradient(90deg, transparent 65%, rgba(238,238,238,.75) 65%, rgba(238,238,238,.75) 75%, transparent 75%);
	background-size: 20px 20px;
}
/*水色チェック*/
.bg_llb_check {
	background-color: #fff;
  background-image: linear-gradient(90deg, rgba(219,247,255,.5) 50%, transparent 50%), linear-gradient(rgba(219,247,255,.5) 50%, transparent 50%);
  background-size: 30px 30px;
}

/* ドット柄------------------------------------------------ */
/* 白地にグレードット */
.bg_llb_dot_01 {
  background: #fff;
  background-image: radial-gradient(#eee 9%, transparent 0), radial-gradient(#eee 9%, transparent 0);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}
/* 白地に水色ドット */
.bg_llb_dot_02 {
  background: #fff;
  background-image: radial-gradient(#e1f5fd 9%, transparent 0), radial-gradient(#e1f5fd 9%, transparent 0);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
}
/* 水色地に白色ドット小さい */
.bg_wh_dot_01 {
  background: #b2e4f9;
  background-image: radial-gradient(#e7f8ff 9%, transparent 0), radial-gradient(#e7f8ff 9%, transparent 0);
  background-position: 0 0, 30px 30px;
  background-size: 60px 60px;
}
/* 水色地に白色ドット大きい */
.bg_wh_dot_02 {
  background: #a9e8ff;
  background-image: radial-gradient(#e7f8ff 9%, transparent 0), radial-gradient(#e7f8ff 9%, transparent 0);
  background-position: 0 0, 15px 15px;
  background-size: 30px 30px;
  outline: none;
}


/* 写真柄--------------------------------------------------- */

/* 白レンガ */
.bg_brick {
	background: url(../img/bg_brick.jpg);
}
.bg_hardpaper {
	background: url(../img/bg_hardpaper.png);
}


/* カラム系（基本 親：ul 子：li）
------------------------------------------------------------------------------------------*/

/* flexの中央揃え flexする親要素につける(幅が固定) ----------------------------- */
.flex_center {
	display: flex;/* 横並び */
	-webkit-flex-wrap: wrap; /* 幅によって折り返す Safari */
	flex-wrap: wrap;/* 幅によって折り返す */
	width: 100%;
	justify-content: center;/* 水平位置を中央寄せ */
	position: relative;
	z-index: 0;
}


/*  flexの左揃え flexする親要素につける(幅が可変 下記columnとセットで使う) ----- */
.flex {
	display: flex;/* 横並び */
	-webkit-flex-wrap: wrap; /* 幅によって折り返す Safari */
	flex-wrap: wrap;/* 幅によって折り返す */
	width: 100%;
	justify-content: flex-start;/*水平位置を左寄せ*/
	position: relative;
	z-index: 0;
}

/* 隙間が広いバージョンのmargin （親のulにクラスcolumn～を付ける）-------------- */

/* 1列だからflexはいらない*/
.column1_1_w  > li { margin: 20px 0px 50px 0px;}

/* 必ずflexとセットで*/
.column1_2_w  > li,
.column1_3_w  > li,
.column1_4_w  > li,
.column2_2_w	>	li,
.column2_3_w  > li,
.column2_4_w  > li,
.column2_5_w  > li {
	margin: 20px 2% 20px 2%;
}
/* 隙間が広いバージョンのwidth （親のulにクラスcolumn～を付ける） */
.column1_1_w  > li {width: 100%;}/* sp1列にしたいから100% */
.column1_2_w  > li {width: 100%;}/* sp1列にしたいから100% */
.column1_3_w  > li {width: 100%;}/* sp1列にしたいから100% */
.column1_4_w  > li {width: 100%;}/* sp1列にしたいから100% */
.column2_2_w	>	li {width: 46%;}/* sp2列にしたいから50%　そこからmargin2%分を引いた幅 */
.column2_3_w  > li {width: 46%;}/* sp2列にしたいから50%　そこからmargin2%分を引いた幅 */
.column2_4_w  > li {width: 46%;}/* sp2列にしたいから50%　そこからmargin2%分を引いた幅 */
.column2_5_w  > li {width: 46%;}/* sp2列にしたいから50%　そこからmargin2%分を引いた幅 */




/* 隙間がせまいバージョンのmargin （親のulにクラスcolumn～を付ける）------------ */

/* 1列だからflexはいらない*/
.column1_1  > li { margin: 0 0 30px 0;}

/* 必ずflexとセットで*/
.column1_2  > li,
.column1_3  > li,
.column1_4  > li,
.column2_2  > li,
.column2_3  > li,
.column2_4  > li,
.column2_5  > li {
	margin: 10px 2% 10px 2%;
}
/* 隙間がせまいバージョンのwidth （親のulにクラスcolumn～を付ける）------------- */
.column1_1  > li {width: 100%;}/* sp1列にしたいから100% */
.column1_2  > li {width: 100%;}/* sp1列にしたいから100% */
.column1_3  > li {width: 100%;}/* sp1列にしたいから100% */
.column1_4  > li {width: 100%;}/* sp1列にしたいから100% */
.column2_2  > li {width: 46%;}/* sp2列にしたいから50%　そこからmargin2%分を引いた幅 */
.column2_3  > li {width: 46%;}/* sp2列にしたいから50%　そこからmargin2%分を引いた幅 */
.column2_4  > li {width: 46%;}/* sp2列にしたいから50%　そこからmargin2%分を引いた幅 */
.column2_5  > li {width: 46%;}/* sp2列にしたいから50%　そこからmargin2%分を引いた幅 */



/* 動き
------------------------------------------------------------------------------------------ */

.fade_up {
	-moz-transition: opacity 0.7s;
	-webkit-transition: opacity 0.7s;
	-o-transition: opacity 0.7s;
	transition: opacity 0.7s;
	-moz-transition: transform 0.7s;
	-webkit-transition: transform 0.7s;
	-o-transition: transform 0.7s;
	transition: transform 0.7s;
}

.fade_in {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	visibility: visible !important;
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		-ms-transform: translateY(20px);
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}



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


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

/* 文字系
----------------------------------------------------------------------------------------- */
.t_l_c {text-align: center;}
.t_s_l {font-size: 1.5rem; line-height: 2.5rem; font-weight: 500;}
.t_small {font-size: 0.9rem; line-height: 1.5rem;}


/* 幅系
----------------------------------------------------------------------------------------- */
.width_30 {width: 30%; margin: 0 auto;}
.width_50 {width: 50%; margin: 0 auto;}
.width_60 {width: 60%; margin: 0 auto;}
.width_70 {width: 70%; margin: 0 auto;}
.width_80 {width: 80%; margin: 0 auto;}


/* ボタン系
------------------------------------------------------------------------------------------*/
.btn01, .btn02, .btn03, .btn_f, .btn_j, .btn_c {
	transition: 0s;/* chromeの文字色だけ時間がずれるのを防ぐ */
}

/* ボタン01ホバー */
.btn01:hover {
  color: #fff;
}
.btn01:hover::before {
  top: 0;
  left: 0;
	background: #83d4f5;
}
.btn01:hover::after {
	border-top-color: #fff;
	border-right-color: #fff;
}

/* ボタン02ホバー */
.btn02:hover {
  color: #64c9f2;
}
.btn02:hover::before {
  top: 0;
  left: 0;
  background-color: #fff;
}
.btn02:hover::after {
	border-top-color: #64c9f2;
	border-right-color: #64c9f2;
}

/* ボタン03ホバー */
.btn03:hover {
  color: #222;
 	border: 1px #222 solid;
}
.btn03:hover::before {
  top: 0;
  left: 0;
  background-color: #eee;
}
.btn03:hover::after {
	border-top-color: #222;
	border-right-color: #222;
}

/* ボタン学科ホバー共通部分 */
.btn_j:hover,
.btn_f:hover,
.btn_c:hover { color: #fff;}

.btn_j:hover::before,
.btn_f:hover::before,
.btn_c:hover::before { top: 0; left: 0;}

.btn_j:hover::after,
.btn_f:hover::after,
.btn_c:hover::after {
	border-top-color: #fff;
	border-right-color: #fff;
}

/* ボタン学科ホバー背景色 */
.btn_j:hover::before { background: #9ecc8a;}
.btn_f:hover::before { background: #ff9ec1;}
.btn_c:hover::before { background: #ffb77a;}



/* イメージ系、スタンプ系（背景にある飾り的なもの）
----------------------------------------------------------------------------------------- */

/* スタンプ */
.stamp_info {
	background-image: url("../img/stamp_info.png");
	background-repeat: no-repeat;
	background-position: right 0px top 30px;
	background-size: 200px;
}



/* カラム系
------------------------------------------------------------------------------------------*/

/* 隙間が広いwide--------------------------------------------------------------- */
.column1_1_w  > li {
	text-align: center;/* pc1列だとbox幅が広くて左寄せが変なので */
}
.column1_2_w  > li {width: 46%;}/* sp1列pc2列にしたいから50%　そこから左右margin4%分を引いた幅 */
.column1_3_w  > li {width: 29%;}/* sp1列pc3列にしたいから33%　そこから左右margin4%分を引いた幅 */
.column1_4_w  > li {width: 21%;}/* sp1列pc4列にしたいから25%　そこから左右margin4%分を引いた幅 */
.column2_2_w  > li {width: 46%;}/* sp2列pc2列にしたいから50%　そこから左右margin4%分を引いた幅 */
.column2_3_w  > li {width: 29%;}/* sp2列pc3列にしたいから33.33%　そこから左右margin4%分を引いた幅 */
.column2_4_w  > li {width: 21%;}/* sp2列pc4列にしたいから25%　そこから左右margin4%分を引いた幅 */
.column2_5_w  > li {width: 16%;}/* sp2列pc5列にしたいから20%　そこから左右margin4%分を引いた幅 */


/* 隙間がせまい----------------------------------------------------------------- */
.column1_1  > li {
	text-align: center;/* pc1列だとbox幅が広くて左寄せが変なので */
}
.column1_2  > li {width: 48%;}/* 2列にしたいから50%　そこから左右margin2%分を引いた幅 */
.column1_3  > li {width: 31%;}/* 3列にしたいから33%　そこから左右margin2%分を引いた幅 */
.column1_4  > li {width: 23%;}/* 4列にしたいから25%　そこから左右margin2%分を引いた幅 */
.column2_2  > li {width: 48%;}/* sp2列pc2列にしたいから50%　そこから左右margin2%分を引いた幅 */
.column2_3  > li {width: 31%;}/* sp2列pc3列にしたいから33.33%　そこから左右margin2%分を引いた幅 */
.column2_4  > li {width: 23%;}/* sp2列pc4列にしたいから25%　そこから左右margin2%分を引いた幅 */
.column2_5  > li {width: 18%;}/* sp2列pc5列にしたいから20%　そこから左右margin2%分を引いた幅 */

.column1_2  > li,
.column1_3  > li,
.column1_4  > li,
.column2_2  > li,
.column2_3  > li,
.column2_4  > li,
.column2_5  > li {
	margin: 10px 1% 30px 1%;
}



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