@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:100,300,400,500,700,900|Noto+Sans+JP:100,300,400,500,700,900');

/*
	このファイルは他ファイルから利用されていないため、新しいスタイルシートの定義用に利用。
	SEO対策用。
*/

/* 変数を定義 */
:root
{
	/* ITエンジニア科4年制 */
	--u: #2abab7;
	--ub: #88e4e2;
	/* ITエンジニア科 */
	--g: #5eb37c;
	--gb: #a3d4b5;
	/* 情報処理科 */
	--j: #8bc272;
	--jb: #c5e1b9;
	/* ネットワークセキュリティ科 */
	--n: #5b8fcf;
	--nb: #aac5e6;
	/* Webクリエイター科 */
	--w: #a28ec3;
	--wb: #d9d1e6;
	/* ITビジネス科 */
	--f: #ff7cab;
	--fb: #ffd1e1;
	/* こども学科 */
	--c: #ffa458;
	--cb: #ffdcbe;

	/* 基本色 */
	--base-fgcolor: #222;
	--base-bgcolor: #fff;

}


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

/* リセット
----------------------------------------------------------------------------------------- */
/*要素のフォントサイズやマージン・パディングをリセットしています
--------------------------------------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています
--------------------------------------------------------------------------------*/
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています
--------------------------------------------------------------------------------*/
ul { list-style:none; }
/*縦方向の揃え位置を中央揃えに指定しています
--------------------------------------------------------------------------------*/
input, select { vertical-align:middle; }
/*入れ物の大きさを指定幅通りになるようにしています（余白や線の太さを気にしなくていい）
--------------------------------------------------------------------------------*/
*, *:before, *:after { box-sizing: border-box; }


/* 土台
----------------------------------------------------------------------------------------- */
body {
	background: var(--base-bgcolor);
	color: var(--base-fgcolor);
	font-weight: 400;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.0rem;
	line-height: 1.1rem;
	letter-spacing: 0.5px;
	padding: 53px 0 0 0;/* headerがfixするとheaderより下部分が下に潜り込んでしまうのでheaderの高さ分あけておく */
}


/* サイトの幅指定（セクションの中の見えない幅）ヘッダーにも使っているので変えないこと
----------------------------------------------------------------------------------------- */
.inner {
	width: 100%;
}


/* リンク
----------------------------------------------------------------------------------------- */
a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align: baseline;
	background:transparent;
	text-decoration: none;
	outline: none;/*訪問した後のリンクに付く点線を消す*/
	color: inherit;
	display: block;
	width: 100%;
	height: 100%;
}

/* 画像
----------------------------------------------------------------------------------------- */
figure {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
figcaption {
	font-size: 0.8rem;
}
img {
	width: 100%;
	vertical-align: bottom;/* 画像の下に隙間ができるのを阻止 */
}

/* メイン画像（メインメニューの扉ページ）
------------------------------------------------------------------------------------------*/
/* 画像以外の書式 */
.wrap_h2 {
	width: 100%;
	height: 300px;
}

/* 各ページの背景画像 */
.img_about {background: url("../img/top_text_about.png"), 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_about_sp.jpg");}
.img_course {background: url("../img/top_text_course.png"), 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_sp.jpg");}
.img_entrance {background: url("../img/top_text_admission.png"), 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_entrance_sp.jpg");}
.img_life {background: url("../img/top_text_life.png"), 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_life_sp.jpg");}
.img_license {background: url("../img/top_text_license.png"), 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_license_sp.jpg");}
.img_job {background: url("../img/top_text_job.png"), 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_job_sp.jpg");}
.img_access {background: url("../img/top_text_access.png"), 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_access_sp.jpg");}
.img_application {background: url("../img/top_text_application.png"), 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_application_sp.jpg");}
.img_event {background: url("../img/top_text_event.png"), 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_event_sp.jpg");}

/* 各ページの背景画像の書式 */
.img_about,
.img_course,
.img_entrance,
.img_life,
.img_license,
.img_job,
.img_access,
.img_application,
.img_event {
	background-repeat: no-repeat;
	background-position: bottom 10px left 10px, center, center;
	background-size: 150px, cover, cover;
}


/* 画像にグラデを重ねたいときVer
.img_life {
	background: url("../img/top_text_admission.png"),linear-gradient( 135deg, rgba(255, 255, 255, 0.5), rgba(144, 144, 144, 0.5)),url("../img/top_life_sp.jpg");
	background-repeat: no-repeat;
	background-position: bottom 10px left 10px, center, center;
	background-size: 150px, cover, cover;
}
 */

/* メイン画像（メインメニューの扉ページから１階層入った水色ページ）
------------------------------------------------------------------------------------------*/
.wrap_h2_contents {
	width: 100%;
	height: 300px;
	background-color: #83d4f5;
	background-image: url("../img/top_crown.png");
	background-repeat: no-repeat;
	background-position: top 85px center;
	background-size: 100px;
}



/*見出しの書式
------------------------------------------------------------------------------------------*/
/* h1は学校ロゴ画像、header.cssでclass="logo"にて設定 */

h2 {
	width: 100%;
	color: #fff;
	font-size: 2rem;
	line-height: 2.5rem;
	text-align: center;
	text-shadow: 0 0 10px #666;
	letter-spacing: 5px;/* 文字間隔を広げる */
	text-indent: 5px;/* 文字間隔が右に広がって中央がずれるので左端に同じ間隔をあける */
	padding: 135px 0 0 0;
}
/* メインメニューの扉ページから１階層入ったページのh2 */
.h2_contents {
	letter-spacing: 3px;/* 文字間隔を広げる */
	text-shadow: none;
}

/* h3フォント大きめのやつ */
h3{
	margin: 0 0 70px 0;
	padding: 60px 0 0 0;/*#リンクの時にヘッダーと重ならないように*/
	font-size: 1.7rem;
	line-height: 2rem;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 500;
	text-align: center;
	/*text-decoration: underline;*/
}
/* h3すぐ下の文字が小さいやつ */
.h3_sub {
	font-size: 0.9rem;
	text-align: center;
	margin: -60px 0 70px 0;
}
/* topicsのh3 */
.h3_topics {
	text-align: left;
}

/* h4水色の吹き出し */
h4 {
	margin: 0 0 20px;
	padding: 10px;
	color: #222;
	text-shadow: 1px 1px 0px #fff;
	font-size: 1.2rem;
	line-height: 1.5rem;
	border-radius: 3px;
	/*background: repeating-linear-gradient(-45deg, #54c3f1, #54c3f1 6px, #64c9f2 6px, #64c9f2 12px);*/
	background: repeating-linear-gradient(-45deg, #b2e4f9, #b2e4f9 6px, #c2eafa 6px, #c2eafa 12px);
	position: relative;
	font-weight: 500;
	display: flex;/* spanが画面が広けりゃ横並び */
	flex-wrap: wrap;/* spanが画面に合わせて折り返し */
}
/* h4水色の吹き出し用の三角形 */
h4:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 17px;
  height: 0;
  width: 0;
  border: 6px solid transparent;
  border-top: 6px solid #c2eafa;
}

/* 項目名 */
h5 {
	margin: 0 0 20px;
	padding: 5px 0.5rem;
	font-size: 1.2rem;
	line-height: 1.5rem;
	font-weight: 500;
	border-bottom: 1px #666 solid;
	display: flex;/* spanが画面が広けりゃ横並び */
	flex-wrap: wrap;/* spanが画面に合わせて折り返し */
}

/*見出しの上の日付*/
.h_date {
	text-align: center;
	font-size: 0.8rem;
	margin: 60px auto -50px;
	padding: 5px 10px;
	width: 130px;
	border-radius: 20px;
}


/* mainの書式
----------------------------------------------------------------------------------------- */
main {
	padding: 20px 10px;
	background: #e1f5fd;
}


/* sectionの書式
----------------------------------------------------------------------------------------- */
section {
	width: 100%;
	padding: 10px 15px 40px;
	margin-bottom: 10px;
	background-color: #fff;
}

/* section内で見出し以外を囲む見えない枠 */
.frame {
	width: 95%;
	margin: 0 auto 50px;
}

/* section内の文章 --------------------------------------------------- */
.section_text {
	margin: 0 0 20px;
	padding: 5px 0;
	line-height: 2rem;
}


/* section内の文章強調 ----------------------------------------------- */
.section_strong {
	margin: 0 0 20px;
	font-size: 1.1rem;
	line-height: 2.0rem;
	font-weight: 500;
	text-shadow: 2px 2px 1px #ddd;
}


/* section内の注釈 --------------------------------------------------- */
.section_small {
	margin: 0 0 20px;
	font-size: 0.8rem;
	line-height: 1.2rem;
}


/* section内の箇条書き ----------------------------------------------- */
.section_list {
	margin: 20px 0;
}
.section_list li {
	margin: 0 0 10px;
	line-height: 1.5rem;
	padding-left: 1.5rem;
	text-indent: -1.5rem;
}


/* section内のflexでtableぽく見せてるやつの書式 ---------------------- */
.section_dummytable {
	margin: 0 0 20px;
	font-size: 0.9rem;
	line-height: 1.3rem;
	display: flex;
	flex-wrap: wrap;
}
.section_dummytable li {
	width: 100%;
	margin: 0 5px 15px;
}
/* section内のflexでtableぽく見せてるやつの見出しセル */
.section_dummytable_th {
	background: #c2eafa;
	color: #222;
	font-weight: 500;
	padding: 5px 30px;
	text-align: center;
	border: 1px #54c3f1 solid;
}
/* section内のflexでtableぽく見せてるやつのデータセル */
.section_dummytable_td {
	background: #fff;
	padding: 10px 25px;
	text-align: center;
	line-height: 1.5rem;
	border: 1px #54c3f1 solid;
	border-top: none;
}
.section_dummytable_td dd {
	margin-bottom: 10px;
}

/* section内の角丸四角形(1個)----------------------------------------- */
.section_box {
	margin: 0 0 20px;
	padding: 20px;
	border-radius: 20px;
	line-height: 1.5rem;
}


/* section内の角丸四角形(複数ある) （親のulにクラスboxを付ける）------ */

.box > li,
.box_main_b > li,
.box_main_j > li,
.box_main_f > li,
.box_main_c > li {
	position: relative;/* 斜線の背景用 */
	z-index: auto;/* 斜線の背景用 */
	padding: 15px;
	border-radius: 20px;
}

/* event.htmlの日付部分 */
.box_main_b > li,
.box_main_j > li,
.box_main_f > li,
.box_main_c > li {
	text-align: center;
}

.box > li {background: #fff;}
.box_main_b > li {background: #e1f5fd;}
.box_main_j > li {background: #ecf5e9;}
.box_main_f > li {background: #fff3f7;}
.box_main_c > li {background: #ffeee0;}

/* box内タイトル */
.box_title {
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.5rem;
	font-weight: 500;
	padding: 20px 5px 25px;
	border-bottom: #ccc 1px solid;
	color: #54c3f1;
	margin: 0 0 10px 0;
}
/* box内タイトルがある場合の内容部分 */
.box_text {
	padding: 20px 5px 10px;
	line-height: 2rem;
}
/* box内タイトルがある場合の画像 */
.box_img {
	padding: 20px 5px 10px;
}

/* box内の箇条書き */
.box_list {
	margin: 20px 10px;
}
.box_list li {
	margin: 0 0 10px;
}


/* boxの装飾 斜線背景 */
.box_deg_shadow::before {
	content: "";
	display: block;
  position: absolute;
  width: 98%;
  height: 100%;
  background: repeating-linear-gradient(-45deg, #54c3f1, #54c3f1 3px, #b2e4f9 0, #b2e4f9 6px);
  left: 0%;
  top: 0%;
  z-index: -1;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

/* section内 リンクする「box」の書式 
（親のulにクラスbox_linkを付ける）------------------------------------ */
.box_link li a {
	border-radius: 10px;
	height: 100px;
	padding: 40px 0 0 20px;
	z-index: auto;
	font-size: 1rem;
	font-weight: 400;
	background: #fff;
	border: 1px #ccc solid;
	position: relative;/* 右向き矢印用 */
	display: block;/* 右向き矢印用 */
}
/* 右向き矢印 */
.box_link li a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	width: 10px;
	height:10px;
	margin-top: -5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-top: 2px solid #54c3f1;
	border-right: 2px solid #54c3f1;
}

/* section内 写真＆日付つきtopix用
---------------------------------------------------------------------- */
.topics li {
	background: #fff;
	font-size: 0.9rem;
	line-height: 1.2rem;
	padding: 5px;
	margin-bottom: 50px;
}

.topics p {
	padding: 5px;
}

/* section内 写真とボタンの組み合わせ
---------------------------------------------------------------------- */

.picture p {
	width: 100%;
	display:  table;/* 文字を縦位置中央にするため */
	height: 50px;/* 文字が2行になっても高さを不変にするため */
	background: #222;
	border: 2px #222 solid;
	color: #fff;
	text-align: center;
	font-weight: 400;
	font-size: 0.9rem;
	position: relative;
}
/* 右向き矢印 */
.picture p::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	width: 10px;
	height:10px;
	margin-top: -5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
.picture p span {
	display:  table-cell;/* 文字を縦位置中央にするため */
	vertical-align: middle;/* 文字を縦位置中央にするため */
	padding: 0 15px;
}


/* 横スクロール
----------------------------------------------------------------------------------------- */
.scroll_topics,
.scroll_gallery {
	display: flex;
	margin: 0 auto;
	width: 95%;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}
.scroll_topics li,
.scroll_gallery li {
	margin-right: 2%;
	width: 23%;
	flex: 0 0 90%;
	background: #fff;
	padding: 5px;
	font-size: 0.9rem;
	line-height: 1.2rem;
}
.scroll_topics li p {
	padding: 5px;
}

/* インタビュー関連
------------------------------------------------------------------------------------------ */

/* インタビュー写真下の名前 */
.interview_picture_name {
	font-size: 0.7rem;
	margin-bottom: 20px;
}
.interview_picture_name li {
	background: #c2eafa;
	border-radius: 10px;
	padding: 10px;
	margin: 5px;
}
.interview_picture_name_header {
	border-bottom: 1px #000 dotted;
	margin-bottom: 10px;
}


/* インタビュー名前 */
.interview_name {
	display: inline-block;/* 文字の長さにするため */
	font-size: 0.8rem;
	padding: 5px;
	margin-right: 10px;
	/*background: #e1f5fd;*/
	border: 1px #222 solid;
	/*border-radius: 20px;*/
	box-shadow: 1px 1px 2px #999;
	transform: rotate(-5deg);
}

/* トピックス・トピックス一覧
------------------------------------------------------------------------------------------ */
.page {
	width: 100%;
	margin: 30px 0 0 0;
	display: flex;
	justify-content: center;
}
.page > li {
	margin: 0 30px;
}
.page > li a {
	display: block;
	background: #e1f5fd;
	position: relative;
	padding: 10px 15px;
	text-align: center;
}
.prev_page a::before,
.next_page a::after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	height: 0;
	width: 0;
	border: 19px solid transparent;
}
.prev_page a::before {
	right: 100%;
	border-right: 18px solid #e1f5fd;
}
.next_page a::after {
	left: 100%;
	border-left: 18px solid #e1f5fd;
}


/* テーブル
------------------------------------------------------------------------------------------ */

table {
	border-collapse:collapse;
	border-spacing:0;
	margin: 0 0 20px;
	width: 100%;
	border: #54c3f1 1px solid;
	font-size: 0.9rem;
	line-height: 1.5rem;
}
caption {
	font-size: 1.2rem;
	font-weight: 500;
	padding: 5px 0 5px 0.5rem;
	border-bottom: 1px #666 solid;
	margin: 20px 0 10px 0;
	text-align: left;
}
th {
	border: #54c3f1 1px solid;
	background: #c2eafa;
	color: #222;
	padding: 10px 5px;
	font-weight: normal;
	vertical-align: middle;
	text-align: center;
}

td {
	border: #54c3f1 1px solid;
	background: #fff;
	padding: 20px;
	vertical-align: middle;
	text-align: center;
}


/* スクロールするテーブル */

/* スクロールするテーブルのframeにつける */
.scroll_frame {
	overflow-x:scroll;
}
/* スクロールするtableにつける */
.scroll_table {
	width: 700px;
}

.pc { display: none; }
.sp { display: block; }

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


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

/* 土台
----------------------------------------------------------------------------------------- */

body {
	padding: 0 0 0 0 ;/* spのpaddingを戻す */
}

/*1000pxにおさめるための枠*/
.inner {
	max-width: 1000px;/*横スクロールしても大丈夫なように*/
	margin: 0 auto;
	position: relative;
	top: 0px;
}


/* リンク全般
----------------------------------------------------------------------------------------- */

/* リンク全般の書式 a>pと直接指定しないと動かない部分もある（クロームのバグ）*/
a, a img, a>p {
	transition: all .3s ease 0s;/* マウスホバー時ふわっとする */
}
a img {
	-webkit-backface-visibility: hidden; /* 画像のカクツキを消す */
	backface-visibility: hidden; /* 画像のカクツキを消す */
}
a:hover img {
	opacity: 0.7;/*マウスホバー時30％透過*/
	transform: scale(1.1);
	outline: none;
	background: none;
}

a:hover,
a:focus {
	outline: none;
}



/* メイン画像
------------------------------------------------------------------------------------------*/

.wrap_h2 {
	min-width: 768px;
	height: 400px;
	background-size: cover;
}

/* 各ページの背景画像 */
.img_about {background: url("../img/top_text_about.png"), 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_about_pc.jpg");}
.img_course {background: url("../img/top_text_course.png"), 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_pc.jpg");}
.img_entrance {background: url("../img/top_text_admission.png"), 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_entrance_pc.jpg");}
.img_life {background: url("../img/top_text_life.png"), 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_life_pc.jpg");}
.img_license {background: url("../img/top_text_license.png"), 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_license_pc.jpg");}
.img_job {background: url("../img/top_text_job.png"), 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_job_pc.jpg");}
.img_access {background: url("../img/top_text_access.png"), 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_access_pc.jpg");}
.img_application {background: url("../img/top_text_application.png"), 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_application_pc.jpg");}
.img_event {background: url("../img/top_text_event.png"), 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_event_pc.jpg");}

/* 各ページの背景画像の書式 */
.img_about,
.img_course,
.img_entrance,
.img_life,
.img_license,
.img_job,
.img_access,
.img_application,
.img_event {
	background-repeat: no-repeat;
	background-position: bottom left 5%, center, center;
	background-size: 400px, cover, cover;
}


/* メイン画像（メインメニューの扉ページから１階層入ったページ）
------------------------------------------------------------------------------------------*/
.wrap_h2_contents {
	min-width: 768px;
	margin: 0 auto;
}


/*h2の文字部分が縦位置で中央にくるように*/
h2 {
	padding: 185px 0 0 0;
	min-width: 768px;
}
.h2_contents {
	padding: 135px 0 0 0;
	min-width: 768px;
}

/* h3 */
h3{
	font-size: 2.5rem;
	line-height: 3rem;
	padding: 80px 0 0 0;
}
/* topicsのh3 */
.h3_topics {
	text-align: center;
}


/* パンくずリスト書式
------------------------------------------------------------------------------------------*/
.wrap_topicpath {
	background: #e1f5fd;
	min-width: 768px;
}

ol.topic-path {
	position: relative;
	padding: 4.5px;
	font-size: 0.7rem;
	line-height: 0.8rem;
	font-weight: 100;
	margin: 5px auto;
	color: #444;
	width: auto;
	display: inline-block;/*olの長さを中身の長さにするため*/
	background: #fff;/*#e1f5fd;*/
}

ol.topic-path li {
	padding: 0 0 0 5px;
	display: inline-block;/*liを横並びにするため*/

}

ol.topic-path li.first {
	padding: 0 0 0 13px;
	background: url(../img/icon_home.png) no-repeat left;
}

ol.topic-path li a {
	display: inline-block;/*<a>全部にblockをつけているため元に戻している*/
	padding: 0 20px 0 0;
	background: url(../img/icon_arw01.png) no-repeat right;
}

ol.topic-path:after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	height: 0;
	width: 0;
	border: 11.5px solid transparent;
	border-left: 12px solid #fff;
}

/* main
------------------------------------------------------------------------------------------*/
main {
	padding: 30px;
	min-width: 768px;/*フッター部分が横スクロールしても大丈夫なように*/
}


/* section
------------------------------------------------------------------------------------------*/
section {
	margin-bottom: 30px;
}

/* section内で見出し以外を囲む見えない枠 */
.frame {
	margin: 0 auto 50px;
}

/* section内のflexでtableぽく見せてるやつの書式 */
.section_dummytable li {
	width: auto;
}

/* section内 リンクする「box」の書式 
（親のulにクラスbox_linkを付ける）------------------------------------ */
.box_link li a {
	height: 150px;
	padding: 63px 0 0 20px;
	font-size: 1.2rem;
}
.box_link li a:hover {
	color: #222;
	background: #e1f5fd;
	border: 1px #83d4f5 solid;
}

/* インタビュー関連
------------------------------------------------------------------------------------------ */

.interview_picture_name {
	display: flex;
	justify-content: center;
}
.interview_picture_name li {
	max-width: 40%;
	flex: 1;
}


/* 横スクロール
---------------------------------------------------------------------- */
.scroll_topics,
.scroll_gallery {
	width: 100%;
	overflow-x: visible;
	flex-wrap: wrap;
}
.scroll_topics li {
	margin: 0 1% 40px;
	width: 23%;
	flex: 0 0 auto;
}
.scroll_gallery li {
	margin: 0 0.5% 40px;
	width: 32%;
	flex: 0 0 auto;


}

/* section内 写真とボタンの組み合わせ
---------------------------------------------------------------------- */
.picture a:hover p {
	color: #222;
	background: #fff;
}
.picture a:hover p::after {
	border-top: 2px solid #222;
	border-right: 2px solid #222;
}


/*テーブル系
---------------------------------------------------------------------- */
/* スクロールするテーブル */
/* スクロールするテーブルのframeにつける */
.scroll_frame {
	overflow-x: auto;
}
/* スクロールするtableにつける */
.scroll_table {
	width: 100%;
}

.pc { display: block; }
.sp { display: none; }


}/* タブレット・PC向けレイアウト終わり*******************************************************************/


/* スマホだけの設定　～768px
*******************************************************************************************/
@media screen and (max-width: 768px) {

/* パンくずを消す設定 */
ol.topic-path {
	display: none;
}

}/*スマホだけの設定終わり******************************************************************/