@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');

/* リセット
----------------------------------------------------------------------------------------- */

/*要素のフォントサイズやマージン・パディングをリセットしています
--------------------------------------------------------------------------------*/
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;
}
/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています
--------------------------------------------------------------------------------*/
ul {
	list-style: none;
	list-style-position: outside;
}
/*縦方向の揃え位置を中央揃えに指定しています
--------------------------------------------------------------------------------*/
input, select {
	vertical-align:middle;
}
/*入れ物の大きさを指定幅通りになるようにしています（余白や線の太さを気にしなくていい）
--------------------------------------------------------------------------------*/
*, *:before, *:after {
    box-sizing: border-box;
}

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

body {
	background: #fff;
	color: #222;
	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"にて設定
		- SEO対策のため学校ロゴはdivに変更。各ページタイトルをh1に変更
		- divのクラス指定は修正前の情報をそのまま使っているため、今後
		- 全体の見直しを行う時に修正。
*/
div.wrap_h2 h1, div.wrap_h2_contents h1 {
	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;
}
div.wrap_h2 h1 {
	padding: 185px 0 0 0;
}
.text-shadow {
	text-shadow: 0 0 10px #666;
}

/* メインメニューの扉ページから１階層入ったページのh2 */
section h2 {
	margin: 0 0 70px 0;
	padding: 60px 0 0 0; /*#リンクの時にヘッダーと重ならないように*/
	/* font-size: 1.7rem; */
	font-size: 2.5rem;
	line-height: 2rem;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 500;
	text-align: center;
}

.h2_contents {
	letter-spacing: 3px;/* 文字間隔を広げる */
	text-shadow: none;
}

/* h3すぐ下の文字が小さいやつ */
/* .h3_sub {
	font-size: 0.9rem;
	text-align: center;
	margin: -60px 0 70px 0;
} */
.h3_sub {
	font-size: 1rem;
	font-weight: normal;
	text-align: center;
	/* margin: 0 0 70px 0; */
	margin: 12px 0 0 0;
}
/* topicsのh3 */
.h3_topics {
	text-align: left;
}

.column_old_h3 {
	margin: 0 0 20px 0;
	padding: 60px 0 0 0;/*#リンクの時にヘッダーと重ならないように*/
	font-size: 2rem;
	line-height: 2rem;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 500;
	text-align: center;
}

/* h4水色の吹き出し */
h3.question {
	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水色の吹き出し用の三角形 */
h3.question:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 17px;
	height: 0;
	width: 0;
	border: 6px solid transparent;
	border-top: 6px solid #c2eafa;
}

/* SEO対策修正前h4タグ */
.under {
	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が画面に合わせて折り返し */
}

h2.line-height28 {
	line-height: 2.8rem;s
}

/* 項目名 */
/* SEO対策修正前h5タグ */
h4 {
	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 -30px;
	padding: 5px 10px;
	width: 130px;
	border-radius: 20px;
}


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


/* sectionの書式
----------------------------------------------------------------------------------------- */
section {
	width: 100%;
	padding: 20px 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;
	list-style-type: disc;
}
/* 数字の箇条書き */
ol.section_list {
	list-style-type: decimal;
}
/* 黒丸と数字の箇条書きの1行1行 */
.section_list li {
	margin: 0 0 1.5rem 1.5rem;
	line-height: 1.8rem;
}

/* 箇条書きの中の箇条書き　ローマ数字 */
ol.section_list_lr {
	margin: 20px 0;
	list-style-type: lower-roman;
}
.section_list_lr li {
	margin: 0 0 1.5rem 4rem;
	line-height: 1.8rem;
}


/* 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: 20px 20px;
	text-align: center;
	line-height: 1.5rem;
	border: 1px #54c3f1 solid;
	border-top: none;
}
.section_dummytable_td dt {
	border-bottom: 1px #aaa dotted;
}
.section_dummytable_td dd {
	margin-bottom: 20px;
}

/* 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: 0 30px 0 20px;
	z-index: auto;
	font-size: 1rem;
	line-height: 1.1rem;
	font-weight: 400;
	background: #fff;
	border: 1px #ccc solid;
	position: relative;/* 右向き矢印用 */
	display: flex;/* 縦方向中央揃えにするのに下のalign-itemsを使うため */
	align-items: center; /* 縦方向中央揃え */
 	justify-content: start; /* 横方向中央揃え */
}
/* 右向き矢印 */
.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;
}

.topics_img {
	
}
.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;
}



/* 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;
}
/* pからh3へ修正用 */
.picture h3 {
	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 h3::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 h3 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 {
	border: 1px solid #000;
	padding: 10px;
	margin: 10px;
}
.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);
}


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

table {
	border-collapse:collapse;
	border-spacing:0;
	margin: 0 0 20px;
	width: 100%;
	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;
}

/* section内の定義リストっぽく見せてるテーブル ----------------------------------------------- */
.section_description {
	width: auto;
}
.section_description th {
	border: none;
	background: none;
	padding: 0.5rem 0;
	font-weight: 600;
	-moz-text-align-last: justify;
	text-align-last: justify;
}
.section_description td {
	border: none;
	padding: 0.5rem;
	text-align: left;
}

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

/* sp縦方向テーブル、pc横方向テーブル------------------- */
.table_y_x {
	font-size: 1rem;

}
.table_y_x th,
.table_y_x td {
	display: block;
	width: 100%;
	border-top: none;
}
.table_y_x tr:first-child th {
	border-top: #54c3f1 1px solid;
}

/* テーブルセル幅------------------- */
.cell_width_5 {	width: 5%;}
.cell_width_10 {	width: 10%;}
.cell_width_20 {	width: 20%;}
.cell_width_30 {	width: 30%;}
.cell_width_40 {	width: 40%;}
.cell_width_50 {	width: 50%;}
.cell_width_60 {	width: 60%;}

#btn_apply a {
	display: none;
}

.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_contents {
	padding: 135px 0 0 0;
	min-width: 768px;
}


/* topicsのh3 */
.h3_topics {
	text-align: center;
}

/*見出しの上の日付*/
.h_date {
	margin: 60px auto 20px;
}



/* パンくずリスト書式
------------------------------------------------------------------------------------------*/
.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 {
	padding: 80px 15px 80px;
	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;
	font-size: 1.1rem;
	line-height: 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;
}
/* pからh3に変更修正用 */
.picture a:hover h3 {
	color: #222;
	background: #fff;
}
.picture a:hover h3::after {
	border-top: 2px solid #222;
	border-right: 2px solid #222;
}

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

/* sp縦方向テーブル、pc横方向テーブル------------------- */

.table_y_x th,
.table_y_x td {
	display: table-cell;
}
.table_y_x th {
	width: 20%;
}
.table_y_x td {
	width: 80%;
	border-top: #54c3f1 1px solid;
}


/* 固定シリーズ　表示したくないページもあるのでヘッダーには入れてない 
---------------------------------------------------------------------- */

/* 申し込みボタン */
#btn_apply a {
	display: block;
	background: #54c3f1;
	border-radius: 10px 0 0 10px;
	padding: 10px;
	box-shadow: 2px 2px 5px 0 #888;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 500;
	font-family: 'M PLUS 1p', sans-serif;
	line-height: 1.2rem;
	width: 40px;
	height: 160px;
	position: fixed;
	top: 100px;
	right: 0;
	z-index: 100;
}
#btn_apply a:hover {
	width: 60px;

}

/* 申し込み写真付きボタン */
.sticker {
	width: 300px;
	position: fixed;
	top: 20vh;
	right: 0;
	z-index: 3;
}
.sticker img {
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
}




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

/* アクセスページで使用 */
.youtube{
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 56.25%;
}

.youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /*境界線の打ち消し*/
}

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


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

	/* h2の文字サイズ */
section h2 {
	font-size: 1.7rem;
}

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

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