@charset "utf-8";
html {
  scroll-behavior: smooth;
}

body {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	margin: 0;
	padding: 0;
	background: #FFF;
}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}

li {
	font-family: "メイリオ";
	font-size: 13px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: justify;
	text-justify: inter-ideograph;
}


li a {
	font-size: 13px;
	font-family: "メイリオ";
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}



h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 15px;
	padding-left: 15px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}


p {
	font-family: "メイリオ";
	font-size: 13px;
	margin: 0;
	padding: 0;
	text-align: justify;
	text-justify: inter-ideograph;
}


p a { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	font-family: "メイリオ";
	font-size: 13px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}


a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color:#414958;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}

/* ~~ このコンテナが他のすべての div を囲み、パーセンテージに基づいた幅を指定します。~~ */





/**　link show　***********************************************************************************/


/** block *****************************************/
.pc-show-block {
    display: block;
}
.pc-hide-block {
  display: none;
}

@media screen and (max-width: 480px) {
  .pc-show-block {
    display: none;
  }
  .pc-hide-block {
    display: block;
  }
}


/** inline-block *****************************************/
.pc-show-inline {
    display: inline-block;
}
.pc-hide-inline {
  display: none;
}

@media screen and (max-width: 480px) {
  .pc-show-inline {
    display: none;
  }
  .pc-hide-inline {
    display: inline-block;
  }
}


/** none *****************************************/
.pc-show {
}
.pc-hide {
  display: none;
}

@media screen and (max-width: 480px) {
  .pc-show {
    display: none;
  }
  .pc-hide {
      display: inline;
  }
}







/**　header_pc　***********************************************************************************/
/*************************************************************************************/
@media screen and (max-width: 480px) { /*ウィンドウ幅が最大480pxの場合にPC非表示*/
.header_pc {
	display: none;
}
}
@media screen and (min-width: 481px) { /*ウィンドウ幅が最少481pxの場合にPC表示*/
.header_pc {
    padding: 0;
    margin: 0 auto;
}
}
/*************************************************************************************/


/**　header_sp　***********************************************************************************/
/*************************************************************************************/
@media screen and (min-width: 481px) { /*ウィンドウ幅が最少481pxの場合にSP非表示*/
.header_sp {
	display: none;
}
}
@media screen and (max-width: 480px) { /*ウィンドウ幅が最大480pxの場合にSP表示*/
.header_sp {
	width: 100%;
    position: fixed;
    margin: 0;
    padding: 0;
    z-index:9999;
}
}
/*************************************************************************************/








.container {
	overflow: hidden;
	margin: 0 auto;
	border-bottom: 1px solid #CCC;
}



/***************************************************************************************************************************/
/** 【PC用】　↓↓↓　*****************************************************************************************************/
@media screen and (min-width: 481px) { /*ウィンドウ幅が最少481pxの場合にPC表示*/


.school {
    width: 100%;
	background: #4C4D4E;/**　学校ごとに色を変える　**/
	height: 130px;
	margin: 0 auto;
}

.school div {
    width: 1080px;
    margin: 0 auto;
    
}

.school div img {
	float: left;
	width: 86px;/**■■■ロゴの大きさ　縦はそのまま**/
	height: 100px;
	margin: 10px 0 0 10px;
	padding: 0;
}


.school div h1 {
	float: right;
	display: block;
	width: 674px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 30px;
    color: #fff;/**　学校ごとに色を変える　**/
	font-weight: bold;
	line-height: 35px;
	text-align: right;
	margin: 30px 10px 0 0;
	padding: 0;
}


.school div h2 {
	float: right;
	display: block;
	width: 674px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 25px;
    color: #fff;/**　学校ごとに色を変える　**/
	line-height: 30px;
	text-align: right;
	margin: 10px 10px 0 0;
	padding: 0;
}


/*****************************************************/
.topimg {
	width: 1080px;
	height: 90px;
	margin: 0 auto;
	padding: 310px 0 0 0;
	clear: both;
    background: url("../images/westlake_girls_high_school/topimg.jpg") no-repeat;
    background-color: #fff;
}


.topimg ul{
	display: block;
	width: 1080px;
	height: 65px;
	margin: 0;
	padding: 25px 0 0 0;
	background: #FFF;
	background-color: rgba( 255, 255, 255, 0.7 );
	color: blue;
}



.topimg li {
	text-align: right;
	margin: 0 25px 0 0;
}


.topimg li a {
	font-family: "メイリオ";
	font-size: 15px;
	color: #000;
	line-height: 20px;
	text-decoration: none;
}
.topimg li a:before {
	content: "　|　";
	color: #000;
}


.topimg li.tel {
	display: block;
	font-family: "メイリオ";
	font-size:18px;
	color: #000;
	font-weight: bold;
	line-height: 20px;
	margin: 20px 10px 0 0;
}
.topimg li.tel:before {
	content: "";
}

.topimg li a:hover {
	color: #999;
}




/** コンテント ***************************************************/
#content {
	height: auto;
	margin: 10px auto;
	padding: 0;
}


#content p {
    width: 1080px;
    font-family: "メイリオ";
    font-size: 14px;
	margin: 30px auto;
}



/** main1 **********************************/
#content .main1 {
    width: 1080px;
    margin: 0 auto;
    padding: 0;
    background: url("../images/westlake_girls_high_school/photo002.jpg") left bottom no-repeat;
    background-size: 355px;
    }

#content .main1 div {
	height: auto;
	margin: 30px 10px 0 0;
	padding: 0 0 0 370px;
    background: url("../images/westlake_girls_high_school/photo001.jpg") no-repeat top left;
    background-size: 355px;
}

#content .main1 div h3 {
    font-family: "メイリオ";
    font-size: 18px;
    font-weight: bold;
	margin: 10px 0 20px 0;
    padding: 0;
    text-align: right;
    border-bottom: 3px solid #555;
}

#content .main1 p {
    width: 650px;
    font-family: "メイリオ";
    font-size: 14px;
	margin: 10px 0 0 50px;
    padding: 0;
    line-height: 170%;
}




/** main2 ■■■■■動画 個別修正■■■■■ **********************************/
#content .main2 {
    overflow: hidden;
	background: #EEDFCA;
    margin: 30px 0 0;
    padding: 20px 0 15px;
}

#content .main2 div {
    width: 1080px;
    display: flex;
    margin: 0 auto;
    padding: 0;
}

#content .main2 p {
	flex: 1; 
    width: 210px;
    height: 118px;
	margin: 0;
    padding: 0;
    justify-content: space-between;
    text-align: center;
}


    
    
    
/** main3 **********************************/
#content .main3 {
    width: 1080px;
    overflow: hidden;
    margin: 30px auto 0;
    padding: 0;
    clear: both;
}

#content .main3 p {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 0 10px;
    padding: 0;
}

#content .main3 .map {
    float: left;
    width: 400px;
    height: 420px;
    margin: 0 0 0 19px;
    padding: 0;
}

#content .main3 ul{
    float: left;
    width: 641px;
	justify-content: space-between;
	align-items: center;
}

#content .main3 li {
	display: flex;
    margin: 0;
    padding: 0;
    clear: both;
}

#content .main3 li p.left {
	display: flex;
    width: 119px;
    font-size: 14px;
    font-weight: bold;
    color: #444;
    margin: 0 1px 1px 0;
    padding: 8px 10px 6px;
    line-height: 18px;
    background-color: #EEDFCA;
    align-items: center;
}

#content .main3 li h2 {
    width: 476px;
    font-size: 14px;
    color: #555;
    font-weight: normal;
    margin: 0 0 1px;
    padding: 8px 15px 6px 10px;
    background: #F8F1E9;
    line-height: 20px;
}

#content .main3 li p.right {
    width: 476px;
    font-size: 13px;
    color: #555;
    font-weight: normal;
    margin: 0 0 1px;
    padding: 8px 15px 6px 10px;
    background: #F8F1E9;
    line-height: 18px;
}
    
    
    
    
    
    
    
/** information **********************************/
#content .information {
	margin: 30px 0 0;
	padding: 0;
	background: #EEECE1;
}


#content .information .map {
	overflow: hidden;
	width: 1080px;
	margin: 0 auto;
	padding: 30px 0;
	background: url(../images/westlake_girls_high_school/img-map.jpg) 0 40px no-repeat;
}


#content .information .map div {
	margin: 0 20px 0 370px;
	padding: 10px 20px;
	background: #4C4D4E;
	    /** 角丸 ******************************/
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

#content .information .map h2 {
    font-size: 25px;
    font-family: "メイリオ";
    font-weight: normal;
    color: #fff;
	margin: 0 0 0;
	padding: 0;
    border-bottom: 1px solid #fff;
}
#content .information .map h3 {
    font-size: 25px;
    font-family: "メイリオ";
    font-weight: normal;
    color: #fff;
	margin: 0;
	padding: 5px 0 0;
    text-align: right;
}

#content .information .map ul.auk {
	display: block;
	margin: 20px 20px 0 370px;
	padding: 15px 20px;
	background: #FFF;
	    /** 角丸 ******************************/
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}


#content .information .map ul.nzl {
	display: block;
	margin: 20px 20px 0 150px;
	padding: 20px 20px;
	background: #FFF;
	    /** 角丸 ******************************/
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}


#content .information .map ul.auk li,
#content .information .map ul.nzl li {
	padding: 5px 0 0 0.5em;
}


#content .information .map ul.auk li.title,
#content .information .map ul.nzl li.title {
	font-size: 15px;
	font-weight: bold;
	color: #F63;
	border-bottom: 1px dotted #787145;
	margin: 0 0 5px 0;
	padding: 0 0 5px 0;
}
#content .information .map ul.auk li.title:before,
#content .information .map ul.nzl li.title:before {
	content: "■ ";
	color: #F63;
}


}/*ウィンドウ幅が最少481pxの場合にPC表示終了*/
/** 【PC用】　↑↑↑　*****************************************************************************************************/
/***************************************************************************************************************************/









/************************************************************************************************************************************/
/** 【SP用】　↓↓↓　***************************************************************************************************************/


#nav-drawer {
    display: inline-block;
    position: relative;
    padding: 11px 12px 8px 17px;
    margin: 0 80% 0 0;
    background: #002653;/**　■■■■学校ごとに色を変える　**/
        /** 角丸 ******************************/
    border-radius: 50px;        /* CSS3草案 */  
    -webkit-border-radius: 50px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 50px;   /* Firefox用 */  
        /** 半透明（背景のみ） ******************************/
	background-color: rgba( 76, 77, 78, 0.55 );/**　■■■■学校ごとに色を変える　**/
	color: #4C4D4E;
/*********************
0が「完全に透明」　1が「完全に不透明」で、小数を使って不透明割合を指定
「55％不透明(＝45％透明)」
**********************/
}
    
#nav-drawer p.menu {
    display: block;
    font-size: 10px;
    color: #fff;/**　■■■■学校ごとに色を変える　**/
    padding: 0;
    margin: 0 3px 0 0;
    text-align: center;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
    position: absolute;
    height: 3px;/*線の太さ*/
    width: 25px;/*長さ*/
    border-radius: 3px;
    background: #fff;/**　■■■■学校ごとに色を変える　**/
    display: block;
    content: '';
    cursor: pointer;
}

@media screen and (max-width: 480px) { /*ウィンドウ幅が最少480pxの場合にPC非表示*/
    

.school {
	background: #4C4D4E;/**　■■■■学校ごとに色を変える　**/
	height: 130px;
	margin: 0 auto;
}

.school div {
    margin: 0 10% 0;
    padding: 10px 0 30px 0;
}

/** 学校ロゴ　■■■個別修正■■■**/
.school div img {
    display: block;
    width: 39px;/**　■■■■高さ45pxで幅のみ変更　**/
    height: 45px;
    margin: 0 auto 0;
    padding: 0;
    text-align: center;
}

.school div h1 {
	display: block;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 15px;
    color: #fff;/**　■■■■学校ごとに色を変える　**/
	font-weight: bold;
	text-align: center;
	margin: 5px 0 0 0;
	padding: 0;
}


.school div h2 {
	display: block;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size: 15px;
    color: #fff;/**　学校ごとに色を変える　**/
	text-align: center;
	margin: 5px 0 0 0;
	padding: 0;
}


/*****************************************************/
.topimg {
	margin: 0 auto;
	padding: 120px 0 0 0;
	clear: both;
    background: url("../images/westlake_girls_high_school/topimg-sp.jpg") no-repeat;
    background-color: #fff;
}


.topimg ul{
	margin: 0;
	padding: 10px 0 0 0;
	background: #FFF;
	background-color: rgba( 255, 255, 255, 0.7 );
	color: blue;
}

.topimg li {
	text-align: center;
	margin: 0 15px 0 0;
}
.topimg li span {
    display: block;
}


.topimg li a {
	font-family: "メイリオ";
	font-size: 12px;
	color: #000;
	line-height: 20px;
	text-decoration: none;
    word-wrap: normal;
}
.topimg li a:before {
	content: "| ";
	color: #000;
}

.topimg li.tel {
	display: block;
	font-family: "メイリオ";
	font-size:13px;
	color: #000;
	font-weight: bold;
	line-height: 20px;
	margin: 10px 10px 0 0;
}
.topimg li.tel:before {
	content: "";
}

.topimg li a:hover {
	color: #999;
}





/** コンテント ***************************************************/
#content {
	height: auto;
	margin: 0;
	padding: 0;
    border-top: 1px solid #ccc;
}


#content p {
    font-family: "メイリオ";
    font-size: 14px;
	margin: 20px 15px 10px;
}



/** main1 **********************************/
#content .main1 {
    margin: 0 10px;
    padding: 0 0 200px;
    background: url("../images/westlake_girls_high_school/photo002.jpg") no-repeat center bottom;
    }

#content .main1 div {
   background: url("../images/westlake_girls_high_school/photo001.jpg") no-repeat;
    padding: 270px 0 0;
}

#content .main1 div h3 {
    font-family: "メイリオ";
    font-size: 15px;
    font-weight: bold;
	margin: 10px 15px  20px;
    padding: 0;
    text-align: right;
    border-bottom: 3px solid #555;
}

#content .main1 p {
    font-family: "メイリオ";
    font-size: 14px;
	margin: 0 15px 10px;
    padding: 0;
    line-height: 150%;
}




/** main2 **********************************/
#content .main2 {
    overflow: hidden;
	background: #EEDFCA;
    margin: 30px 0 0;
    padding: 20px 0 15px;
}

#content .main2 div {
    margin: 0 auto;
    padding: 0;
}

#content .main2 iframe {
    width: 80%;
    height: 80%;
}

#content .main2 img {
    width: 80%;
    height: 80%;
}

#content .main2 p {
	margin: 0 0 20px;
    padding: 0 0 0;
    text-align: center;
}


#content .main2 p.scroll a {
	margin: 0 0 20px;
    padding: 0 0 0;
    padding: 0;
    text-align: center;
}


#content .main2 p.scroll a:hover {
    /** 半透明（全体） ******************************/
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
/*********************
『filter:alpha(opacity=50);』--【IE】/ 透過無しの状態"100%"を指定する際は「filter:alpha(opacity=100);」。
『-moz-opacity: 0.5;』--【Firefox（Mozilla）】/ 透過無しの状態"100%"を指定する際は「-moz-opacity:1;」。
『opacity: 0.5;』--【SafariやOpera】/ 透過無しの状態"100%"を指定する際は「opacity:1;」。
**********************/

}


    
    
    
    
/** main3 **********************************/
#content .main3 {
    margin: 30px 0 0;
    padding: 0;
    clear: both;
}

#content .main3 p {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 0 10px;
    padding: 0;
}

#content .main3 .map {
    width: 90%;
    height: 90%;
    margin: 20px 5% 0;
    padding: 0;
}

#content .main3 ul{
    margin: 0 10px 0 10px;
    padding: 0;
}

#content .main3 li {
    margin: 0;
    padding: 0;
    clear: both;
}

#content .main3 li p.left {
    font-size: 14px;
    font-weight: bold;
    color: #444;
    margin: 5px 0 0;
    padding: 8px 10px 6px;
    background-color: #EEDFCA;
    line-height: 18px;
}
#content .main3 li p.left:before {
    content: "▮";
    color: #AAA06A;
}

#content .main3 li h2 {
    font-size: 13px;
    color: #555;
    font-weight: normal;
    margin: 0;
    padding: 5px 15px 6px 10px;
    line-height: 18px;
}
#content .main3 li h2 span{
    display: block;
}

#content .main3 li p.right {
    font-size: 12px;
    color: #555;
    font-weight: normal;
    margin: 0 0 1px;
    padding: 5px 15px 6px 10px;
    line-height: 18px;
}

    
    
    
    
    
    
    
/** information **********************************/
#content .information {
	margin: 30px 0 0;
	padding: 0;
	background: #EEECE1;
}


#content .information .map {
	margin: 0 auto;
	padding: 20px 0;
	background: url(../images/westlake_girls_high_school/img-map.jpg) center 100px no-repeat;
}


#content .information .map div {
	margin: 0 15px 0;
	padding: 10px 20px;
	background: #4C4D4E;/**　学校ごとに色を変える　**/
	    /** 角丸 ******************************/
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

#content .information .map h2 {
    font-size: 14px;
    font-family: "メイリオ";
    font-weight: normal;
    color: #fff;
	margin: 0 0 0;
	padding: 0;
    border-bottom: 1px solid #fff;
}
#content .information .map h3 {
    font-size: 14px;
    font-family: "メイリオ";
    font-weight: normal;
    color: #fff;
	margin: 0;
	padding: 5px 0 0;
    text-align: right;
}

#content .information .map ul.auk {
	display: block;
	margin: 530px 10px 0;
	padding: 15px 20px;
	background: #FFF;
	    /** 角丸 ******************************/
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}


#content .information .map ul.nzl {
	display: block;
	margin: 20px 10px;
	padding: 20px 20px;
	background: #FFF;
	    /** 角丸 ******************************/
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}


#content .information .map ul.auk li,
#content .information .map ul.nzl li {
	padding: 5px 0 0 0.5em;
}


#content .information .map ul.auk li.title,
#content .information .map ul.nzl li.title {
	font-size: 15px;
	font-weight: bold;
	color: #F63;
	border-bottom: 1px dotted #787145;
	margin: 0 0 5px 0;
	padding: 0 0 5px 0;
}
#content .information .map ul.auk li.title:before,
#content .information .map ul.nzl li.title:before {
	content: "■ ";
	color: #F63;
}
    
    
    
    
    
}




/** フッター ***************************************************/
.footer_pc {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background: #4C4D4E;/**　学校ごとに色を変える　**/
}


.container .footer_pc p.copyright,
.container .footer_sp p.copyright {
	color: #FFF;/**　学校ごとに色を変える　**/
	background: #4C4D4E;/**　学校ごとに色を変える　**/
}