@charset "Shift_JIS";

/************************************/
/*   兵庫県立神戸北高等学校         */
/*   ウェブサイト用スタイルシート   */
/*      main.css                    */
/*      By Kaz 長澤                 */
/*    平成30年（2018年）5月〜       */
/*    令和 4年（2022年）4月18日     */
/************************************/


/*--------------------------------------------------------
  ●共通レイアウトパーツ設定●
--------------------------------------------------------*/

/* ■ヘッダー内パーツ */

#hpb-headerMain{
    height: 19px; /* ★元は 19px */
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

#hpb-headerMain h1{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align: left;
    font-weight: normal;
    line-height: 18px;
    font-size: 10px;
    color: #ffffff; /* ★ヘッダー説明文文字色 */
}

#hpb-headerLogo{
    width: 400px; /* ★元は 400px */
    float: left;
}

#hpb-headerLogo a{
    height: 70px; /* ★元は 75px ★ */
    display: block;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-indent: -9999px;
    overflow: hidden;
    background-image : url(../img/top_logo.png);
    background-position: top left;
    background-repeat: no-repeat;
}

#hpb-headerExtra1{
    width: 220px; /* ★元は 330px → 300px ★ */
    height: 65px; /* ★元は 75px → 70px ★ */
    margin-top: 0;
    margin-right: 10px;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 10px; /* ★元は 20px ★ */
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    float: right;
}

#hpb-headerExtra1 p.tel{
	/* ★電話番号の文字設定 */
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-size: 1.2em; /* ★元は 1.5em */
    font-weight: bold;
    color: #6CBD1E;
    line-height: 1.2;
    text-align: right;
}

#hpb-headerExtra1 p.tel span{
	/* ★電話番号の「TEL」文字設定 */
    color: #CCCCCC;
}

#hpb-headerExtra1 p.address{
	/* ★住所文字設定 */
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    line-height: 1.2;
    font-size: 90%; /* ★追記 */
    text-align: right;
}

#hpb-headerExtra2{
	/* ★英語ページボタン★ */
    width: 70px;
    float: right;
}

#hpb-headerExtra2 a{
	/* ★英語ページボタン★ */
    width: 70px;
    height: 50px;
    display: inline-block;
    margin: 12px 5px 0 0;
    padding: 0 0 0 0;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url(../img/btn-eng1.png);
    background-repeat: no-repeat;
    border-radius: 3px;
    float: right;
}

#hpb-headerExtra3{
	/* ★からとんボタン★ */
    width: 60px;
    float: right;
}

#hpb-headerExtra3 a{
	 /* ★からとんボタン★ */
    width: 60px;
    height: 60px;
    display: inline-block;
    margin: 6px 18px 0 0;
    padding: 0 0 0 0;
    text-indent: -9999px;
    overflow: hidden;
    background-image: url(../img/karaton-top.png);
    background-repeat: no-repeat;
    float: right;
}


/* ■フッター内パーツ */

#hpb-footerMain{
    width: 300px;
    float: right;
    padding-top: 35px;
}

#hpb-footerMain p{
	/* ★コピーライト文字設定 */
    font-size: 0.8em;
    text-align: right;
}

#hpb-footerLogo{
}

#hpb-footerExtra1{
    padding-top: 9px;
}

#hpb-footerExtra1 ul{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    list-style-type: none;
    text-align: left;
}

#hpb-footerExtra1 li{
	/* ★フッターナビ設定 */
    display: inline;
    background-image : url(../img/fpoint.png);
    background-position: 7px 4px;
    background-repeat: no-repeat;
    padding-left: 23px;
    padding-right: 10px;
    font-weight: bold;
}

#hpb-footerExtra1 a:link{
    color: #666666;
    text-decoration: none;
}
#hpb-footerExtra1 a:visited{
    color: #666666;
    text-decoration: none;
}
#hpb-footerExtra1 a:hover{
    color: #6CBD1E;
    text-decoration: none;
}
#hpb-footerExtra1 a:active{
    color: #6CBD1E;
    text-decoration: none;
}

#hpb-footerExtra2{
}


/* ■サイドブロック内パーツ */

#french{
    margin: 10px 0 0 0;
    text-align: center;
    border-radius: 4px;
}

#banner{
    margin-top: 12px; /* ★元は 15px */
    background-color: #F4F4F4;
    padding-top: 8px; /* ★元は 10px */
}

#banner ul{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    list-style-type: none;
}

#banner li{
    padding-bottom: 8px; /* ★元は 10px */
}

#banner li a{
    display: block;
    width: 250px; /* ★ボタンの表示サイズ */
    height: 70px; /* ★元は 80px */
    margin-left: auto;
    margin-right: auto;
    text-indent: -9999px;
    overflow: hidden;
}

#banner a#banner-blog{
	/* ★ブログバナー */
    background-image : url(../img/top_banner_blog.png);
    background-position: top center;
    background-repeat: no-repeat;
    border-radius: 5px;

}
#banner a#banner-toku{
	/* ★特色ある取り組みバナー */
    background-image : url(../img/top_banner_toku.png);
    background-position: top center;
    background-repeat: no-repeat;
    border-radius: 5px;

}
#banner a#banner-JHS{
	/* ★中学生の皆さんへバナー */
    background-image : url(../img/top_banner_jhs.png);
    background-position: top center;
    background-repeat: no-repeat;
    border-radius: 5px;
}
#banner a#banner-ruikei{
	/* ★特色類型バナー */
    background-image : url(../img/top_banner_ruikei.png);
    background-position: top center;
    background-repeat: no-repeat;
    border-radius: 5px;
}
#banner a#banner-access{
	/* ★アクセスバナー */
    background-image : url(../img/top_banner_access.png);
    background-position: top center;
    background-repeat: no-repeat;
    border-radius: 5px;
}

#chiyori-new a{
    display: block;
    width: 250px; /* ★タイ王国バナーの表示サイズ */
    height: 60px;
    text-indent: -9999px;
    overflow: hidden;
}
#chiyori-new a#chiyori-new-top{
	/* ▼タイ王国バナー */
    margin: 5px auto 0px auto;
    background-image : url(../img/top_banner_Thai.png);
    background-position: top center;
    background-repeat: no-repeat;
    border-radius: 4px;
}

#minori-new a{
    display: block;
    width: 250px; /* ★からとんバナーの表示サイズ */
    height: 55px;
    text-indent: -9999px;
    overflow: hidden;
}
#minori-new a#minori-new-top{
	/* ▼からとんバナー */
    margin: 8px auto 12px auto;
    background-image : url(../img/top_banner_krtn.gif);
    background-position: top center;
    background-repeat: no-repeat;
    border-radius: 4px;
}

/* ▲ school-info は、サイドブロック内の「学校案内」▲ */

#school-info dl{
	line-height:1.5em; /* ★元は 1.5em */
}
#school-info dt{
	float:left;
	clear:left;
	font-size:115%; /* ★元は 110% */
	border-top:1px dotted #666666;
}
#school-info dt a{
	display:block;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:22px; /* ★元は 18px */
	width:115px; /* ★元は 95px */
	background:url(../img/ico_arrow.gif) no-repeat 4px 16px;
	overflow:hidden;
	text-align:left; /* 追記 */
}
#school-info dt a:hover{
	color:#333333; /* ★元は 115px */
	background:url(../img/ico_arrow.gif) no-repeat 4px 16px #d1e69b;
}
#school-info dd{
	padding-top:10px;
	margin-bottom:10px;
	padding-left:5px;
	margin-left:120px; /* ★元は 115px */
	border-top:1px dotted #666666;
	font-size:100%; /* ★元は 85% */
	text-align:left; /* 追記 */
}

#sguide{
		/* ★自作 */
	font-size:150%;
	text-align:center;
	padding:12px 0 0 0;
	margin:0 0 0 0;
	border-top:1px dotted #666666;
}
#sguide_font{
		/* ★自作 */
	font-size:60%;
}

/* ▲ companyinfo は、school-info と m-special の間 ▲ */

#hpb-inner #companyinfo{
    padding-top: 0px;
    padding-bottom: 8px; /* ★元は 10px */
    background-color: #F3F3F3;
    font-size: 100%;
}
#hpb-inner #companyinfo h3{
    color: #FFFFFF;
    text-align: left;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 5px;
    background-color: #4C9D01;
    font-size: 1em;
}
#hpb-inner #companyinfo p{
    margin-bottom: 5px; /* ★元は 10px */
    padding-left: 15px;
    padding-right: 5px;
}
#hpb-inner #companyinfo .tptm{
	 /* ★追記 */
    border-top: 1px dotted #4C9D01;
    padding-top: 10px;
    text-align: center;
}

/* ▲ m-special は、サイドブロック最下端部分 ▲ */

#m-special li a{
	display:block;
	border-left:10px solid #4C9D01; /* ★元は 7px */
	padding:3px 8px; /* ★元は 5px 8px */
	margin-bottom:0.6em; /* ★元は 0.6em */
	font-size:110%; /* ★追記 当初は 125% → 115%*/
	float:left; /* ★追記 */
}
#m-special a:hover{
	background:#d1e69b;
	color:#333333;
}


/*--------------------------------------------------------
  ●ナビゲーションデザイン設定●
--------------------------------------------------------*/

#hpb-nav li a{
	/* ★ナビゲーション文字設定 */
    font-size: 118%; /* ★追記 */
    font-weight: bold;
}

#hpb-nav li a:link{
    color: #666666;
    text-decoration: none;
}


/* ■ナビゲーション文字色設定 */

#hpb-nav li a:visited{
    color: #666666;
    text-decoration: none;
}
#hpb-nav li a:hover{
    color: #ffffff;
    text-decoration: none;
}
#hpb-nav li a:action{
    color: #ffffff;
    text-decoration: none;
}
#hpb-nav li span.en{
    display: none;
}


/*--------------------------------------------------------
  ●基本パーツデザイン設定●
--------------------------------------------------------*/

/* ■リンク文字色 */

a:link{
    color: #6CBD1E;
    text-decoration: underline;
}
a:visited{
    color: #6CBD1E;
    text-decoration: underline;
}
a:hover{
    color: #6CBD1E;
    text-decoration: none;
}
a:active{
    color: #6CBD1E;
    text-decoration: none;
}

#hpb-skip{
	/* ★ヘッダースキップの非表示 */
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-indent: -9999px;
}

p{
    margin-top: 0.5em;
    margin-bottom: 0.8em; /* ★元は 2em */
    padding-right: 0.5em; /* ★元は 0.1em */
    padding-left: 0.5em; /* ★元は 0.1em */
    line-height: 1.4; /* ★元は 1.4 */
    text-align: left;
}

p.picon{
	/* ▲この上の p を改編したもの。数値を変更するなら両方とも！▲ */
    margin-top: 0.5em;
    margin-bottom: 0.8em; /* ★元は 2em */
    padding-right: 0; /* ★右端スペースをゼロに */
    padding-left: 0; /* ★左端スペースをゼロに */
/*  line-height: 1.4; ★元は 1.4 */
    text-align: left;
}

ul,ol,dl{
    line-height: 1.4;	/* ●追加 */
}

.li_pl{		/* リストの左のインデントを減らす */
    padding-left: 1.5em;
}
.li_pl2{	/* リストの左のインデントを減らす */
    padding-left: 2.0em;
}

/* ▼この下の class 名、元の p.large から p を取った
   また !important を付けないと指定色にならないことがある */
.large{
    color: #3C7A01 !important;
    font-weight: bold;
    font-size: 1.1em; /* ★追記 */
}
.large2{
	/* ●追加 */
    color:#3C7A01;
    font-weight:bold;
    font-size:1.5em;
    margin:1em 0 0.3em 0;
}
p.indent{
    padding-left: 25px;
}
p.L1em{
    margin-left:1em;
}
p.L2em{
    margin-left:2em;
}
.indent1em{
    margin-left:1em;
    text-indent:-1em;
}
.indent1-5em{
    margin-left:1.5em;
    text-indent:-1.5em;
}
.indent2em{
    margin-left:2em;
    text-indent:-2em;
}
.indent3em{
    margin-left:3em;
    text-indent:-3em;
}
.left{
    float: left;
}
.right{
    float: right;
}
.radius8{
    border-radius: 8px;
}
.radius5{
    border-radius: 5px;
}
.radius3{
    border-radius: 3px;
}
.radius3k{
    border-radius: 3px;
    margin-left: 5px;
}

hr{
    width: 100%;
    height: 1px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    padding: 0;
    clear: both;
    color: #ffffff;
    border-width: 1px;
    border-style: none;
}

hr.hr1{
			/* ★自作 */
    width: 100%;
    height: 0px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    padding: 0;
    border-top-width: 1px;
    border-right-width: 0px;
    border-left-width: 0px;
    border-bottom-width: 1px;
    border-style: groove;
}

hr.hr2{
			/* ★自作 */
    width: 100%;
    height: 4px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    padding: 0;
    border-top-width: 1px;
    border-right-width: 0px;
    border-left-width: 0px;
    border-bottom-width: 1px;
    border-style: groove;
}


.hpb-layoutset-02 h2{
    background-image : url(../img/title_content.png);
    width: 800px; /* ★元は 650 */
    border-top-right-radius: 12px;   /* ★右上丸角 追加 */
    border-bottom-left-radius:12px; /* ★左下丸角 追加 */
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0.5em;
    margin-left: 0;
    height: 46px; /*★元は 50px */
    line-height: 52px; /* ★元は 57px */
    text-align: left;
    overflow: hidden;
}

.hpb-layoutset-02 h2 span.ja{
    font-size: 1.0em; /* ★元は 1.15em */
    color: #ffffff;
    padding-right: 10px;
    line-height: 50px;
    padding-left: 18px;
}

h2 span.en{
    font-size: 0.85em; /* ★元は 0.9em */
    color: #C4F493;
}

.hpb-layoutset-02 #hpb-wrapper h3{
    margin-top: 2em;	/* ●元 0.5em */
    margin-bottom: 0.6em;	/* ●元 0.5em */
    text-align: left;
    padding-top: 3px;
    padding-left: 1px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #3C7C00;
    font-size: 1.3em;
    color: #3C7A01;
}

h3.hpb-c-index{
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-indent: -9999px;
    background: none;
}

h4{
    display: inline-block; /* 追加 */
    margin: 0 0;
    padding-top: 2px; /* 元 5px */
    padding-right: 5px; /* 元 10px */
    padding-bottom: 2px; /* 元 2px */
    padding-left: 5px; /* 元 2px */
    text-align: left;
    font-size: 1.1em;
    line-height: 1.3em;
    color: #3C7A01;
    background: #daffb6;
    border-radius: 0.2em;
}

.h4g{
    display: inline-block; /* ★上の h4 の色・文字サイズ等違い */
    margin: 0 0.5em 0.5em 0.5em; /* ★臨時休校のお知らせ掲載時に追加 */
    padding: 2px 0.5em;
    text-align: left;
    font-size: 1.0em;
    font-weight: bold;
    line-height: 1.3em;
    color: #3C7A01;
    background: #daffb6;
    border-radius: 0.3em;
}

.h4r{
    display: inline-block; /* ★上の h4 の色・文字サイズ等違い */
    margin: 0 0.5em 0.5em 0.5em; /* ★臨時休校のお知らせ掲載時に追加 */
    padding: 2px 0.5em;
    text-align: left;
    font-size: 1.0em;
    font-weight: bold;
    line-height: 1.3em;
    color: #ff0000;
    background: #F9D1D8;
    border-radius: 0.3em;
}
.h4r a:link{color: #ff0077;}
.h4r a:visited{color: #ff0077;}
.h4r a:hover{color: #ff0077;}
.h4r a:active{color: #ff0077;}

h5{
			/* ★改造した */
    display: inline-block; /* 元 inline */
    margin: 0.3em 0;
    padding: 0.2em 0.3em; /* 文字周りの余白 */
/*  padding: 4px 10px 2px 25px;
    background: url(../img/point.png) no-repeat 6px 8px; */
    font-size: 1.1em;
    line-height: 1.1em;
    color: #3C7A01;
    border: solid 1px #3C7A01;
    border-radius: 0.3em;
    background: #daffb6;
}

.h5p{
			/* ★追加 */
    padding-top: 0.2em;
    padding-right: 5px;
    padding-bottom: 0;
    padding-left: 25px;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.4;
    color: #3C7A01;
    background: url(../img/point.png) no-repeat 0.4em 0.6em;
}
#activities .h5p, #tokushoku .h5p{
    padding-top: 0.8em;
    border-top: dotted 2px #DDDDDD;
    background: url(../img/point.png) no-repeat 0.4em 1.1em;
}

.h5p2{
			/* ★ 上の h5p より文字が小さい */
    padding-top: 0.2em;
    padding-right: 5px;
    padding-bottom: 0;
    padding-left: 25px;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.4;
    color: #3C7A01;
    background: url(../img/point.png) no-repeat 0.4em 0.6em;
    vertical-align: middle;
}

.table-tb1{
	/* ★これは元々の設定 */
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: 0px;
    border-collapse: collapse;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #cccccc;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #cccccc;
}

.table-tb2{
	/* ★これは上を基に手を加えたもの */
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: auto; /* ★元は 0 */
    border-collapse: collapse;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #cccccc;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #cccccc;
}

.table-tb1 th{
	/* ★これは元々の設定 */
    padding-top: 8px;
    padding-right: 8px; /* ★元は 15px */
    padding-bottom: 8px;
    padding-left: 8px;
    text-align: left;
    background-color: #eeeeee;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #cccccc;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #cccccc;
}

.table-tb2 th{
	/* ★これは上を基に手を加えたもの */
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    text-align: center;
    background-color: #eeeeee;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #cccccc;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #cccccc;
}

.table-tb1 td{
	/* ★これは元々の設定 */
    padding-top: 8px;
    padding-right: 8px; /* ★元は 15px */
    padding-bottom: 8px;
    padding-left: 8px;
    text-align: left;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #cccccc;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #cccccc;
}

.table-tb2 td{
	/* ★これは上を基に手を加えたもの */
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    text-align: center;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #cccccc;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #cccccc;
}

.rina{
    width: 60%;
}
.rina2{
    width: 95%;
}

:not(#special) #hpb-main p a[href$=".pdf"]{
    background:url('../img/ico_pdf.gif') no-repeat 0px 4px; /* ★元は 0 0 */
    padding:0 0 0 20px;
}
:not(#special) #hpb-main ol a[href$=".pdf"]{ /* ★上の項目を ol に変えて追加 */
    background:url('../img/ico_pdf.gif') no-repeat 0px 4px; /* ★元は 0 0 */
    padding:0 0 0 20px;
}
.rina a[href$=".pdf"]{
    background:url('../img/ico_pdf.gif') no-repeat 0px 4px; /* ★元は 0 0 */
    padding:0 0 0 20px;
}
#hpb-main a[href$=".mp3"]{
    background:url('../img/ico_mp3.gif') no-repeat 0px 4px; /* ★元は 0 0 */
    padding:0 0 0 20px;
}
#hpb-main a[href$=".mp4"]{
    background:url('../img/ico_mp3.gif') no-repeat 0px 4px; /* ★元は 0 0 */
    padding:0 0 0 20px;
}
#hpb-main a[href$=".docx"]{
    background:url('../img/ico_word.png') no-repeat 0px 4px; /* ★元は 0 0 */
    padding:0 0 0 20px;
}
#hpb-main a[href$=".xlsx"]{
    background:url('../img/ico_excel.png') no-repeat 0px 4px; /* ★元は 0 0 */
    padding:0 0 0 20px;
}
#hpb-main a[href$=".xlsm"]{
    background:url('../img/ico_excel.png') no-repeat 0px 4px; /* ★元は 0 0 */
    padding:0 0 0 20px;
}
#hpb-main a[href$=".ppsx"]{
    background:url('../img/ico_ppt.png') no-repeat 0px 4px; /* ★元は 0 0 */
    padding:0 0 0 20px;
}
#hpb-main a[href$=".zip"]{
    background:url('../img/ico_zip.png') no-repeat 0px 3px; /* ★元は 0 0 */
    padding:0 0 0 20px;
}
#hpb-main a[href$=".exe"]{
    background:url('../img/ico_play.png') no-repeat 0px 4px; /* ★元は 0 0 */
    padding:0 0 0 20px;
}

.imgvt img {	/* ●追記: new の原寸 縦横 27px */
    vertical-align: middle;
    width: 1.4em; /* 1em=16px として約22px */
}

.icon30{
	/* ▼スマイルマークなど縦横 30px のもの用 */
   line-height: 30px;
   /* vertical-align: middle; ★記述しなくても line-height で効用あり */
   padding: 0;
   text-indent: 35px;
}

.icon34-23{
	/* ▼小さいサイズの国旗用 */
   line-height: 23px;
   padding: 0;
   text-indent: 39px;
}

.icon42-28{
	/* ▼大きいサイズの国旗用 */
   line-height: 28px;
   padding: 0;
   text-indent: 47px;
}

.icon46-33{
	/* ▼最も大きいサイズの豪州／仏蘭西国旗用 */
   line-height: 33px;
   padding: 0;
   text-indent: 51px;
}

.icon36-30{
	/* ▼「新聞」アイコン用 */
   line-height: 30px;
   padding: 0;
   text-indent: 41px;
}

.iconLAC{
	/* ▼ LAC ページのリストマーク用 */
   line-height: 30px;
   padding: 0;
   text-indent: 74px;
}

.iconSMenu{
   line-height: 1.0em;
   padding: 0;
   text-indent: 21px;
}

.iconENG{
	/* ▼トップページやサイドバーのユニオンジャック小 34-23 */
   padding: 0;
   background: url(../img/flag-UK2.png) no-repeat 10px 50%;
}

.iconENG-L{
	/* ▼トップページやサイドバーのユニオンジャック大 42-28 */
   padding: 0;
   background: url(../img/flag-UK-L.png) no-repeat 6px 50%;
}

.icon91-33{
	/* ▼91×33px のバナー用 */
   line-height: 33px;
   padding: 0;
   text-indent: 98px;
}

.icon32{
	/* ▼からとんのリストマーク用 */
   line-height: 32px;
   padding: 0;
   text-indent: 37px;
}

.img-new{
   background-image: url(../img/new-03.png);
   /* 1=37-27, 2&3=27-27, 4=74-25 */
   background-repeat: no-repeat;
   background-position: left center;
   text-indent: 25px;
   padding-right: 30px;
}

.marker_pink-60 {
  background: linear-gradient(transparent 60%, #fec1fe 0%);
}
.marker_yellow-60 {
  background: linear-gradient(transparent 60%, #ffff00 0%);
}
.marker_blue-60 {
  background: linear-gradient(transparent 60%, #00d2ff 0%);
}
.marker_brown-60 {
  background: linear-gradient(transparent 60%, #b16e49 0%);
}
.marker_orange-60 {
  background: linear-gradient(transparent 60%, #fcb848 0%);
}


/* ■メインコンテンツ内基本パーツ */

#hpb-main-ul ul{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    list-style-type: none;
}

#hpb-main-ul ul li{
    text-align: left;
    line-height: 1.4;
    padding-top: 7px; /* ★元は 10px ★ */
    padding-right: 15px;
    padding-bottom: 7px; /* ★元は 10px ★ */
    padding-left: 25px;
    background-image: url(../img/point.png);
    background-position: 0.4em 0.8em; /* ★元は 5px 12px */
    background-repeat: no-repeat;
    border-bottom-width: 2px; /* ★元は 1px */
    border-bottom-style: dotted;
    border-bottom-color: #DDDDDD;
    color: #000000;
}

#hpb-main dl{
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 12px; /* ★元は 20px */
    margin-left: 0;
    padding: 0 0 0 0;
    zoom: 100%;
}

#hpb-main dt{
    float: left;
    margin: 0 0 0 0;
    text-align: left;
    line-height: 120%; /* ★元は 16px のちに 120% */
    min-height: 16px;
    font-weight: bold;
    width: 170px !important;
    padding-top: 7px; /* ★元は 10px ★ */
    padding-right: 0;
    padding-bottom: 7px; /* ★元は 10px ★ */
    padding-left: 25px;
    background-image : url(../img/point.png);
    background-position: 0.4em 0.8em; /* ★元は 5px 12px */
    background-repeat: no-repeat;
    color: #57A110;
}

#hpb-main dd{
    margin: 0 0 0 0;
    padding-top: 7px; /* ★元は 10px ★ */
    padding-right: 15px;
    padding-bottom: 7px; /* ★元は 10px ★ */
    text-align: left;
    line-height: 120%; /* ★元は 16px のちに 120% */
    min-height: 16px;
    padding-left: 195px;
    border-bottom-width: 2px; /* ★元は 1px */
    border-bottom-style: dotted;
    border-bottom-color: #DDDDDD;
}

*:first-child + html #hpb-main dd{
    /* ★ for IE7 */
    padding-left: 10px;
    min-height: 20px;
}

* html #hpb-main dd{
    /* ★ for IE6 */
    height: 20px;
    padding-left: 0px;
}

#hpb-main dl::after{
    content: ".";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

#hpb-main img.left{
    margin-top: 5px;
    margin-right: 20px;
    margin-bottom: 10px;
    float: left;
}

#hpb-main img.right{
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 20px;
    float: right;
}

.pagetop{
    margin-top: 10px;
    margin-right: 1em; /* ★元 auto */
    margin-bottom: 0;
    margin-left: auto;
    text-align: right;
}

.pagetop a{
	/* ★ページの先頭へのリンク設定 */
    display: block;
    margin-left: auto;
    width: 125px;
    height: 21px;
    overflow: hidden;
    background-image: url(../img/returnTop.png);
    background-position: top left;
    background-repeat: no-repeat;
    text-align: left;
    text-indent: -9999px;
}

/* ▲ FAQ 用 ▲ */

.question{
	background: url(../img/ico_faq_1.png) no-repeat 0 0px; /* ★元 0 5px */
	padding-left: 30px !important;
	line-height: 30px; /* ★元 40px */
	margin-bottom: 5px; /* ★元 0.5em */
	padding-bottom: 5px; /* ★自分で追加 */
	border-bottom: 1px dotted blue;
	color: #369;
	font-weight: bold;
	border-left: none !important;
	border-radius: 0 !important;
}
.answer{
	background: url(../img/ico_faq_2.png) no-repeat 0 0px; /* ★元 0 5px */
	/* padding-top: 5px; */
	padding-left: 30px !important;
	line-height: 30px; /* ★自分で追加 */
	/* padding-bottom: 10px; */
	color: #3C7A01;
	font-weight: bold;
}

#map{
	/* ▼「アクセス」のグーグルマップ用 */
	width: 100%;
	height: 350px;
	/* background-color: grey; */
}


/* ■トップページ デザイン定義 */

#minorin{
	/* ★トップページに現れるゆずりん★ */
    padding: 0 0 0 0;
    float: right;
}

#minorin a{
	/* ★トップページに現れるゆずりん★ */
    width: 150px;
    height: 164px;
    margin: 20px 40px 0 0;
    display: block;
    overflow: hidden;
    text-indent: -9999px;
    background-image: url(../../30-special/30-yuzurin/yuzurin_anim_w150.gif);
    background-position: center;
    background-repeat: no-repeat;
}

.hpb-layoutset-01 #hpb-title h2{
    margin: 0;
    overflow: hidden;
    text-indent: -9999px;
    height: 235px;
/*    background-image: url(http://eh12ng.zashiki.com/img/slides.gif); */
    background-image: url(../img/slides/top_page_slides_20220418_2.5sec.gif); /* ■トップ画像■ */
    background-position: top center;
    background-repeat: no-repeat;
}

.TPD1{display:inline-block; margin: 5px 50px 5px 5px;} /* ★R2年1月創設 */
.TPD2{display:inline-block; margin: 5px 50px 5px 0px;}
.TPD3{display:inline-block; margin: 5px 0px 5px 0px;}
.TPD4{display:inline-block; margin: 5px 0px 5px 70px;}
.TPD5{margin: 0 0 0.5em 0.3em;}		/* ● TPD5~7 は使われていない R3.4.21 確認 */
.TPD6{display:inline-block; margin: 0px 0px 25px 1.0em;}
.TPD7{display:inline-block; margin: 0.5em 1em 0.5em 0.5em;} /* ★R3年1月追記 */
.sthb{display:inline-block; margin: 0 0 10px 0;}

#toppage-topics h3{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    height: 26px;
    overflow: hidden;
    background-image: url(../img/top_indexBg.png);
    background-position: top left;
    background-repeat: no-repeat;
    line-height: 28px;
    padding-left: 10px;
    text-align: left;
    color: #ffffff;
    font-size: 1.2em;
}

#toppage-news h3{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    height: 26px;
    overflow: hidden;
    background-image: url(../img/top_indexBg.png);
    background-position: top left;
    background-repeat: no-repeat;
    line-height: 28px;
    padding-left: 10px;
    text-align: left;
    color: #ffffff;
    font-size: 1.2em;
}

#toppage-news h3 span.ja{
    display: none;
}

ul#special li a{
	/* ■ special は、トップページ・メインの最下部 */
	display: block;
	border-left: 7px solid #3C7A01; /* ★元は 7px */
	padding: 3px 8px; /* ★元は 5px 8px */
	margin-left: 1em;
	margin-bottom: 0.6em; /* ★元は 1em */
}
ul#special a:hover{
	background: #d1e69b;
	color: #333333;
}
ul#special,ul.bn{
	list-style:none;
	padding:0;
}
ul#special li{
	display:inline-block;
	margin-right:1em;
}
ul.bn li{
	display:inline-block;
	margin-right:1em;
}

#info .bn{
	/* ← ▼これは何？不明！ */
	margin-top:1em;
}
#info .bn a{
	border:none;
}
#info .bn img:hover{
	outline:1px solid #66cdaa;
}

div.updates{
	/* ★更新履歴表示窓 */
   width: 97%;
   height: 9.7em;
   overflow: auto;
   padding: 0; /* ★元は 5px 10px */
   margin: auto auto;
   border: #888888 1px dotted;
   background-color: #F4F4F4;
}


/* =======================================================
  ●●レスポンシブ設定●●
======================================================= */

@media screen and (max-width: 568px) {


	/*--------------------------------------------------------
	  ●共通レイアウトパーツ設定●
	--------------------------------------------------------*/

	/* ■ヘッダー内パーツ */

	#hpb-headerMain{
		height: auto;
	}
	#hpb-headerMain h1{
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;
		line-height: 1.4;
		background-color: #3b7901;
	}
	#hpb-headerLogo{
		width: 98%;
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	#hpb-headerLogo a{
		display: block;
		max-width: 100%;
		background-size: contain;
		background-position: top center;
		margin-top: 4px; /* ★元は 10px */
		margin-bottom: 0px; /* ★元は 10px */
		margin-left: auto;
		margin-right: auto;
	}
	#hpb-headerExtra1{
		width: 48%;/* ★元は 98% → 70% */
		height: 54px; /* 新規追加 H31.1.16 */
		margin-left: 0px;
		margin-right: 3%; /* ★元は auto */
		margin-top: 10px; /* ★新規追加 元10px */
		margin-bottom: 0px; /* ★新規追加 元5px */
		float: right; /* ★元は none */
		padding-top: 0px; /* ★元は 10px → 4px*/
	}
	#hpb-headerExtra2{
	/* ★自作★ 英語ページボタン */
		width: 20%;
		margin: 4px 0 0 5px;
		float: left;
	}
	#hpb-headerExtra2 a{
	/* ★自作★ 英語ページボタン */
		margin: 4px 0 0 5px; /* なぜ上と同じ margin 指定をここでもせなならん？ */
	}
	#hpb-headerExtra3{
	/* ★自作★ からとんボタン */
		width: 16%;
		float: left;
		margin: 0 0 0 10px;
		padding: 0 0 0 0;
	}
	#hpb-headerExtra3 a{
	/* ★自作★ からとんボタン */
		margin: 0 0 0 10px; /* なぜ上と同じ margin 指定をここでもせなならん？ */
	}


	/* ■フッター内パーツ */

	#hpb-footerMain{
		width: 100%;
		float: none;
		padding-top: 10px;
		padding-bottom: 10px;
		background-color: #F3F3F3;
	}
	#hpb-footerMain p{
	/* ★コピーライト文字設定 */
		text-align: center;
		margin-top: 0;
		margin-bottom: 0;
		padding-left: 5px;
		padding-right: 5px;
		word-break: break-all;
	}
	#hpb-footerExtra1{
		padding-top: 15px;
		padding-bottom: 15px;
	}
	#hpb-footerExtra1 ul{
		text-align: center;
	}
	#hpb-footerExtra1 li{
		/* ★フッターナビ設定 */
		display: inline-block;
		margin-top: 2px;
		margin-bottom: 2px;
	}

	/* ■サイドブロック内パーツ */
	#banner{
		margin-top: 0px;
		font-size: 125%; /* ●追記 */
	}
	#banner li a{
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	#banner a#banner-blog,
	#banner a#banner-toku,
	#banner a#banner-JHS,
	#banner a#banner-LAC,
	#banner a#banner-access{
		background-position: top center;
		background-size: auto; /* ★画像の幅と高さの比率 → 元は contain */
	}

	#school-info{
		font-size: 112%; /* ★サイドブロック内の「学校案内」全体のフォントサイズ */
	}
	#school-info dt a{
		padding-left:35px; /* ★PCでは 22px */
		background:url(../img/ico_arrow.gif) no-repeat 15px 16px; /* ★PCでは 3px 16px */
	}
	#school-info dt a:hover{
		background:url(../img/ico_arrow.gif) no-repeat 15px 16px #d1e69b; /* ★PCでは 3px 16px */
	}
	#school-info dd{
		padding-left:20px; /* ★PCでは 5px */
		margin-left:150px; /* ★PCでは 120px */
	}

/*	#m-special{clear:both;} ★ m-special は、サイドブロック最下端部分 */

	#m-special li{
		display:inline-block;	/* ★要削除？？ */
		margin-right:1em;
		width: 78%; /* ■追記 */
		font-size: 112%; /* ■追記 */
	}

	#m-special li a{
		display:block;
		border-left:10px solid #4C9D01;
		padding:4px 10px; /* ★元は 5px 8px */
		margin-bottom:0.6em; /* ★元は 1em */
	}

	#m-special a:hover{
		background:#d1e69b;
		color:#366;
	}

	#hpb-inner #companyinfo{
	/* ●追加 */
		font-size:125%;
	}

	#sguide{
	/* ●追加 */
		font-size:220%;
	}
	#sguide_font{
	/* ●追加 */
		font-size:60%;
	}


	/*--------------------------------------------------------
	  ●ナビゲーションデザイン設定●
	--------------------------------------------------------*/
	#hpb-nav h3.hpb-c-index{
		width: 100px; /* ★メニューボタンの幅：元は 27 */
		height: 20px;
		background-image : url(../img/btn_menu.png);
		background-position: top left;
		background-repeat: no-repeat;
		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
		overflow: hidden;
		text-indent: -9999px;
		cursor: pointer;
	}


	/*--------------------------------------------------------
	  ●基本パーツデザイン設定●
	--------------------------------------------------------*/

	p{
		padding-right: 0;
		padding-left: 0;
	}
	img.left{
		margin-left: 0;
	}
	img.right{
		margin-right: 0;
	}
	.hpb-layoutset-02 h2{
		background-image: none;
		background-color: #4da102;
		width: 100%;
		height: auto;
		line-height: 1.15; /* ★元は 1.4 */
		padding-top: 8px; /* ★元は 12px */
		padding-bottom: 8px; /* ★元は 12px */
		word-break: break-all;
		box-sizing: border-box;
	}
	.hpb-layoutset-02 h2 span.ja{
		display: inline-block;
		font-size: 120%; /* ●追記 */
		line-height: 1.15; /* ★元は 1.4 */
		padding-right: 18px;
	}
	h2 span.en{
		display: block;
		font-size: 95%; /* ●追記 */
		padding-right: 18px;
		padding-left: 18px;
	}
/*	h4{
		padding-right: 0;
		padding-left: 0;
	}
	h5{
		padding-right: 0;
	}				*/
	table{
		width: 98%; /* ★元は 96% */
		padding-right: 0;
		padding-left: 0;
		margin-left: auto;
		margin-right: auto;
		line-height: 1.3em; /* ★追記 */
	}

	:not(#special) #hpb-main p a[href$=".pdf"]{
		background:url('../img/ico_pdf.gif') no-repeat 0px 0px; /* ★元は 0 0 */
		padding:0 0 0 20px;
	}
	:not(#special) #hpb-main ol a[href$=".pdf"]{	/* ★上の項目を ol に変えて追加 */
		background:url('../img/ico_pdf.gif') no-repeat 0px 0px; /* ★元は 0 0 */
		padding:0 0 0 20px;
	}
	.rina a[href$=".pdf"]{
		background:url('../img/ico_pdf.gif') no-repeat 0px 0px; /* ★元は 0 0 */
		padding:0 0 0 20px;
	}
	#hpb-main a[href$=".mp3"]{
		background:url('../img/ico_mp3.gif') no-repeat 0px 0px; /* ★元は 0 0 */
		padding:0 0 0 20px;
	}
	#hpb-main a[href$=".mp4"]{
		background:url('../img/ico_mp3.gif') no-repeat 0px 0px; /* ★元は 0 0 */
		padding:0 0 0 20px;
	}
	#hpb-main a[href$=".docx"]{
		background:url('../img/ico_word.png') no-repeat 0px 0px; /* ★元は 0 0 */
		padding:0 0 0 20px;
	}
	#hpb-main a[href$=".xlsx"]{
		background:url('../img/ico_excel.png') no-repeat 0px 0px; /* ★元は 0 0 */
		padding:0 0 0 20px;
	}
	#hpb-main a[href$=".xlsm"]{
		background:url('../img/ico_excel.png') no-repeat 0px 0px; /* ★元は 0 0 */
		padding:0 0 0 20px;
	}
	#hpb-main a[href$=".ppsx"]{
		background:url('../img/ico_ppt.png') no-repeat 0px 0px; /* ★元は 0 0 */
		padding:0 0 0 20px;
	}
	#hpb-main a[href$=".zip"]{
		background:url('../img/ico_zip.png') no-repeat 0px 0px; /* ★元は 0 0 */
		padding:0 0 0 20px;
	}
	#hpb-main a[href$=".exe"]{
		background:url('../img/ico_play.png') no-repeat 0px 0px; /* ★元は 0 0 */
		padding:0 0 0 20px;
	}

	.radius3k{
		margin-left: 0px;
	}

	p.indent1em{
		padding-left:1em;
	}
	p.indent1-5em{
		padding-left:1.5em;
	}
	p.indent2em{
		padding-left:2em;
	}
	p.indent3em{
		padding-left:3em;
	}


	/* ★メインコンテンツ内基本パーツ */


	#minorin{
	/* ★みのりん の ★ */
		float: none;
		padding: 0 0 0 0;
	}
	#minorin a{
	/* ★ちよりちん の ★ */
		width: 220px;
		height: 239px;
		margin: 0 auto;
		display: block;
		overflow: hidden;
		text-indent: -9999px;
		background-image : url(../../30-special/30-yuzurin/yuzurin_anim_w220.gif);
		background-repeat: no-repeat;
	}


	#hpb-main p{
		margin-left: 0;
		margin-right: 0;
	}


	/* ■文字サイズを大きく／小さく■ */

	#hpb-main ul,ol,dl{
	/* ★■追加・始まり■★ */
		line-height: 1.3; /* ★ p やレスポンシブ前は 1.4 */
	}
	#hpb-main p,ul,ol,dl{
		font-size: 120%;
	}
	.hpb-layoutset-02 #hpb-wrapper h3{
	 /* ★h2 の定義は上方に */
		font-size: 140%;
	}
	#hpb-main h4, h5{
		font-size: 130%;
	}
	#hpb-main .h5p{
		padding-left: 15px;
		font-size: 120%;	/* ★元 130% */
		background: url(../img/point.png) no-repeat 0 0.6em;
	}
	#activities .h5p, #tokushoku .h5p{
		background: url(../img/point.png) no-repeat 0 1.1em;
	}
	#hpb-main .h5p2{
	/* ★上の h5p より文字が小さい */
		padding-left: 15px;
		font-size: 115%;	/* ★元 120% */
		background: url(../img/point.png) no-repeat 0 0.6em;
	}
	#hpb-main p.large,p.large2{
		font-size: 125%;
	}
	#hpb-main table{
		font-size: 120%;
	}
	#hpb-main table p,table ul,table ol{
		font-size: 100%;
	}
	#hpb-main .table-tb2{
		font-size: 100%;
	}
	#career table{
		font-size: 100%;
	}
	#career h4{
		font-size: 120%;
	}
	.updates ul{
		font-size: 108%;
		padding-left: 1.5em;
	}		/* ★■追加・終わり■★ */

	#hpb-main ul li{
		padding-right: 0;
	}
	#hpb-main dt{
		float: none;
		max-width: 100% !important;
		padding-bottom: 0;
	}
	#hpb-main dd{
		padding-right: 0;
		padding-left: 25px;
	}
	#hpb-main img.left{
		margin-right: 0;
		float: none;
	}
	#hpb-main img.right{
		margin-left: 0;
		float: none;
	}

	.pagetop a{
	/* ★ページの先頭へのリンク設定 */
		max-width: 100%;
	}

	.rina{
		width: 90%;
	}
	.rina2{
		width: 85%;
	}
	.ai300-60{
	/* 学校の概要・校章 */
		width: 60%;
		max-width: 300px;
		margin: auto;
	}
	.ai350-70{
	/* 行事計画・イラスト */
		width: 70%;
		max-width: 350px;
		margin: auto;
	}
	.ai500-90{
	/* からとんページ用 */
		width: 90%;
		max-width: 500px;
		margin: auto;
	}
	.ai600-90{
	/* アクセス・写真 */
		width: 90%;
		max-width: 600px;
		margin: auto;
	}


	/* ★ YouTube フレームのレスポンシブ化  */

	.youtube_video{
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
		overflow: hidden;
		/* margin-bottom:20px; 元 25px */
	}
	.youtube_video iframe{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.youtube_video video{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}


	#top-contents,#contents{
		overflow:hidden;
		padding-right:10px;
		padding-left:10px;
	}


	#m-school h2{
	/* ★この m-school が何なのか不明 */
	clear:both;
	}
	#m-school ul{
		overflow:hidden;
		margin-bottom:2em;
	}
	#m-school ul li{
		float:left;
		line-height:2.5em;
		border-bottom:1px dashed #3C7A01;
		padding-right:1em;
	}


	/* ★トップページ デザイン定義 */

	.hpb-layoutset-01 #hpb-title h2{
		width: 100%;
		height: 29vw; /* ●元は 140px → 27.3vw ● */
		background-size: contain;
	}

	.TPD1{margin:5px 0 5px 8px !important;} /* ■R2年1月創設■ */
	.TPD2{margin:8px 0 5px 8px !important;}
	.TPD3{margin:8px 0 5px 8px !important;}
	.TPD4{margin:5px 0 5px 8px !important;}
	.TPD5{margin:0px 0 8px 0.3em !important;} /* ● TPD5~7 は使われていない R3.4.21 確認 */
	.TPD6{margin:0px 0 25px 0.6em !important;}
	.TPD7{display:inline-block; margin:0.8em 0.3em 0.5em 0.2em !important;}


}