@charset "UTF-8";
/**
 * *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-*
 *
 *  be english academy common.css
 *  2015.10.23
 *
 * *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-* *-*
**/

body {
  color: #222;
  font-size: 13px;
  line-height: 1.6;
  background: #FFF;
  
  width:100%;
  height:100%;
  min-width:1100px;
}

mark { font-weight: bold; color: #004E9D; }

input,
select,
textarea {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "Lucida Grande", sans-serif;
  padding: 2px;
  border: 1px solid #C4C4C4;
  font-size: 14px;
}
input:focus,
textarea:focus {
  border: 1px solid #0E8ACA;
}

/* ---------------------------------------------------------------------------
//  header
--------------------------------------------------------------------------- */



#pc-header {
  background: #FFF802;
}
.header-yellow {
	height: auto;
	padding: 15px 20px;
	box-sizing: border-box;
	  }
#pc-header div.cf {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-items: stretch;
  gap: 20px;
}

#pc-header div.cf div {
	display: flex;
	align-items: center;
	justify-content: center;
}

#pc-header div.cf div:first-child {
	justify-content: flex-start;
}

#pc-header div.cf div:last-child {
	justify-content: flex-end;
}

#pc-header div.cf img {
	max-width: 100%;
	height: auto;
	display: block;
}





/* ---------------------------------------------------------------------------
//  nav
--------------------------------------------------------------------------- */
nav {
  background: #0E8ACA;
}
nav div {
	width: 1100px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}
nav ul li { float: left; }
nav ul li a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

nav ul li a	{}

.main-nav li {
	text-align: center;
	padding-right: 30px;
	padding-left: 30px;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	}
.main-nav li a {
	color: #FFF;
	}
.main-nav li span {
	display:block
	}
.nav-ja {
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	}
.nav-en {
	color: #FFF;
	}

/* ---------------------------------------------------------------------------
//  footer
--------------------------------------------------------------------------- */

footer {
  margin-top: 40px;
}

footer .foot-menu {
  background: #0E8ACA;
}

footer .foot-menu ul {
  width: 1100px;
  margin: 0 auto;
  padding: 27px 0;
}
footer .foot-menu ul li {
  border-left: 1px solid #3FA0D3;
  height: 66px;
  text-align: center;
  float: left;
}
footer .foot-menu ul li:nth-child(1) { width: 464px; }
footer .foot-menu ul li:nth-child(2) { width: 332px; }
footer .foot-menu ul li:nth-child(3) { width: 300px; border-right: 1px solid #3FA0D3; }
footer .foot-menu ul li p {
  color: #FFF;
  margin-top: 8px;
  font-size: 12px;
}


footer .foot-nav {
  background: #14557F;
  text-align: center;
}
footer .foot-nav h1 {
  background: url("../img/foot-sitemap.jpg") left 50px no-repeat;
  width: 1100px;
  margin: 0 auto;
  padding: 50px 0 20px;
  height: 29px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

footer .foot-nav .sitemap {
  width: 1100px;
  margin: 0 auto;
  border-top: 1px solid #48769A;
  border-bottom: 1px solid #48769A;
  padding-bottom: 10px;
}
footer .foot-nav .sitemap ul { float: left; margin-right: 25px; }
footer .foot-nav .sitemap ul:nth-child(1) { width: 170px; }
footer .foot-nav .sitemap ul:nth-child(2) { width: 255px; }
footer .foot-nav .sitemap ul:nth-child(3) { width: 220px; }
footer .foot-nav .sitemap ul:nth-child(4) { width: 225px; }
footer .foot-nav .sitemap ul:nth-child(5) { width: 130px; margin-right: 0; }

footer .foot-nav .sitemap ul li { color: #FFF; }
footer .foot-nav .sitemap ul li:first-child { border-bottom: 1px solid #48769A; padding: 8px 0; margin-bottom: 5px; }
footer .foot-nav .sitemap ul li a { color: #FFF; display: block; }
footer .foot-nav .sitemap ul li a:hover { color: #72A0C4; }

.copy {
  margin: 0 auto;
  text-align: center;
  color: #FFF;
  font-size: 11px;
  padding: 20px 0 50px;
}



























.single-contets {
	padding-top: 70px;
	padding-bottom: 70px;	
	}

.single-wrapper {
	max-width: 1100px;
    margin: 0 auto;
	display: flex;
	}

.main-col {
	flex:1;
}
.sub-col {
	width: 250px;
}
.main-col,
.sub-col {
  padding: 2%;
  border-radius: 10px;
}










.contents-head {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	margin-bottom: 15px;
	padding-bottom: 30px;
	}
.contents-head h1 {
	font-size: 24px;
	margin-bottom: 15px;	
	}



.contetns-main {
	padding-top: 20px;
	padding-bottom: 20px;
	}
.contetns-main img {
	margin-bottom: 20px;
	max-width: 100%!important;	
	}
.contetns-main figure {
	margin-bottom: 20px;
	max-width: 100%!important;	
	}






.article ul li,
.article ol li {
  margin: 0.2em;
}
.article ul ul, .article ul ol,
.article ol ul,
.article ol ol {
  margin: 0;
}
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  line-height: 1.25;
  font-weight: bold;
}
.article h3,
.article h4,
.article h5,
.article h6 {
  margin-top: 35px;
  margin-bottom: 20px;
}
.article h4,
.article h5,
.article h6 {
  font-size: 20px;
  padding: 6px 10px;
}


	
.article h2 {
     position: relative;
     color: white;
     padding:0.5em 0.5em 0.5em 1.8em;
     background-color: #446689;
     border-radius: 5px;
	 margin-top: 35px;
	 margin-bottom: 20px;
}
 
.article h2::after {
     position: absolute;
     top: 50%;
     left:0.7em;
     transform:translateY(-50%);
     content: '';
     width: 8px;
     height:8px;
     border: solid 3px white;
     border-radius:100%;
}



.article h3 {
     position: relative;
     padding-left: 0.7em;
}
 
.article h3::after {
     position: absolute;
     top: 50%;
     left:0;
     transform:translateY(-50%);
     content: '';
     width: 5px;
     height:1em;
     background-color: #446689;
}




.article h4 {
     position: relative;
     padding-bottom: 0.5em;
}
 
.article h4::after {
     position: absolute;
     content: '';
     left: 0;
     bottom: 0;
     width: 100%;
     height: 7px;
     box-sizing: border-box;
     border-top: 3px solid black;
     border-bottom: 1px solid black;
}



.article h5 {
  border-bottom: 2px solid #ccc;
}
.article h6 {
  border-bottom: 1px solid #ccc;
}


.contents-footer {
	margin-top: 70px;	
	}
.contents-footer h2 {
	margin-bottom: 40px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #F0F0F0;
	padding-bottom: 10px;
	}



















#search-2 {
	margin-bottom: 30px;
	}
	

.widget .widget-title {
	border-bottom: solid 3px #516ab6;/*下線*/
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 20px;
	font-family: "Yu Gothic" !important;
	font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif;
	padding-top: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 25px;
	background-image: url("../img/icon.png");
	background-repeat: no-repeat;
	background-position: left;
}

.widget ul {
	margin: 0;
    padding: 0;
    list-style-type: none;
	margin-bottom:30px;	
}
.widget ul li a {
	margin: 0;
	color: #000;
	text-decoration: none;
}
.widget ul li a:hover {
	text-decoration: underline;
}

.news-date {
	margin-bottom: 20px;	
	}

.tag {
	background-color: #09C;
	color: #FFF;
	text-align: center;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border-radius: 4px;
	}

.recent-tag {
	background-color: #09C;
	color: #FFF;
	text-align: center;
	font-size: 10px;
	padding-top: 3px;
	padding-right: 7px;
	padding-bottom: 3px;
	padding-left: 7px;
	border-radius: 4px;
	}

.recent-wrap {
	display: flex;
	}
	
.recent-item {
    width : -webkit-calc(100% / 3) ;
    width : calc(100% / 3) ;
	}
.recent-item .recent-img {
	margin-bottom: 15px;
	}

.recent-item .recent-title a {
	margin-bottom: 10px;
	color: #333;	
	}



.detail-date {
	margin-bottom: 10px;
	}

.topics-note {
	font-size: 15px;
	text-align: center;
	margin-top: 40px;
}

@media (max-width: 768px) {
.topics-note {
	font-size: 13px;
	text-align: left;
	margin-top: 30px;
}
}