@charset "UTF-8";

/* 基本色 */
:root {
	--main-color: #008E91;
	--accent-color: #BF6A7A;
	--dark-main-color: #197162;
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #C1C1C1;
	--gray-color: #C1C1C1;
	--large-width: 1000px;
	--middle-width: 800px;
}


/* 基本設定： フォントサイズ */
@media (max-width: 599px) {
	:root {
		font-size: 12px;
	}
}

@media (min-width: 600px) and (max-width: 799px) {
	:root {
		font-size: 18px;
	}
}

@media (min-width: 800px) {
	:root {
		font-size: 20px;
	}
}

body {font-size: 18px;}



/* 基本設定： ページ全体 */
body {
	margin: 0;
	font-family: 'メイリオ',
		'Hiragino Kaku Gothic Pro', 
		sans-serif;
	letter-spacing: 0.1rem;
}
h2{
	font-size: 2rem;
	letter-spacing: 0.2rem;
}
.subtitle{
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
}


/* コンテンツA： ヒーローイメージ */
.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 450px;
	background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1)), url(img/back-sp-img.jpg);
	background-color: #197162;
	background-position: 75% 50%;
	background-size: cover;
	text-align: center;
}

.conA img {
	width: 90vw;
}

.btn-square-pop {
  display: block;
  padding: 0.5em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*背景色*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  width: 100%;
  margin: 0 auto;
}

.conA p {
	font-size: 23px;
	margin: 5px 0;
}
.contact{
	padding: 7px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
	background-color: white;
	margin-top:0px;
}

.conA .title{
	color: #454545;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
}
.web-top{
	padding-top: 5px;
	margin: 0 auto;
	width: 100%;
	display: none;
}
.web-top a:hover	{
	background-image: linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2));
}

.btn-square-pop {
	width: 80vw;
	margin: 0 auto;
}
.web{
	padding-top: 5px;
	padding-bottom:20px;
	border-bottom:  1px solid #828282;
}
.web a:hover	{
	background-image: linear-gradient(rgba(255,255,255,0.2),rgba(255,255,255,0.2));
}

.tel{
	padding-top: 10px;
}

.tel a{
	text-decoration: none;
	color: black;
	font-family: 'Roboto', sans-serif;
	font-size: 25px;
	font-weight: bold;
	padding-bottom: 3px;
}

.tel p{
	font-size: 12px;
	color: #454545;
}

.web .title:before{
    font-family: "Font Awesome 5 Free";
    content: '\f0e0';
    margin-right: 10px;
}

.tel .title:before{
    font-family: "Font Awesome 5 Free";
    content: '\f095';
    margin-right: 10px;
}


@media (min-width: 768px) {
	.conA{
		background-position: center;
		background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1)), url(img/back-img.jpg);
		padding-top: 20px;
	}
	.conA h1 {
		font-size: 115px;
	}
	.conA img{
		width: 55%;
		margin-top: 30px;
		margin-bottom:20px; 
	}
	.btn-square-pop {
		width: 50%;
		margin: 0 auto;
	}
	.btn-square-pop.bottom {
		width: 80%;
		margin: 0 auto;
	}	
	.contact{
		display: flex;
		background-color: white;
		width: 80%;
		margin: 0 auto;
		padding: 10px 5px 10px 5px;
	}
	.contact .web{
		flex: 1;
	}
	.contact .tel{
		flex: 1;
		border-left: 1px solid #828282;	
	}
	a[href^="tel:"]{
    	pointer-events: none;
    }
    .tel{
		padding-top: 0;
	}
	.web-top{
		padding-top: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
	.web{
		padding-top: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
}

/*コンテンツA2*/
.conA2 .backimg{
	background-image: url(img/kyoushitsu2.jpg);
	background-size: cover;
	background-position: 50% 80%;
	height: 20vh;
}
.conA2-box{
	text-align: center;
	padding-top: 100px;
	padding-bottom: 30px;
	padding-left: 20px;
	padding-right: 20px;
}
.conA2 .container{
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
}

.conA2 span{
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
}
.conA2 p{
	text-align: left;
	font-size: 16px;
	line-height: 1.8;
}

@media (min-width: 768px) {
	.conA2 .container {
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
	}
	.conA2{
		background-image: url(img/kyoushitsu2.jpg);
		background-size: cover;
		background-position: 50% 55%;
		padding-bottom: 200px;
}
.conA2 .backimg{
	display: none;
}
}

/* コンテンツB： 概要（アイコン＋テキスト） */

.conB{
	padding-bottom: 50px;
}

.conB-box{
	text-align: center;
	padding-top: 100px;
	padding-bottom: 30px;
	padding-left: 20px;
	padding-right: 20px;
}

.conB.container {
	padding-top: 20px;
	padding-bottom: 20px;
}

.conB .text {
	padding: 30px 20px 20px 30px;
	padding-left: 20px;
	text-align: center;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 15px;
}


.jitsuyou{
	background-color: #FBFBFB;
}
.manabi{
	background-color: #FBFBFB;
}
.jishuu{
	background-color: #FBFBFB;
}


.conB .jitsuyou{
	border-top: 5px solid #EB6B8C;
}
.conB .manabi{
	border-top: 5px solid #3B7ABF;
}
.conB .jishuu{
	border-top: 5px solid #F5A21B;
}



.conB h3 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}

.conB p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}

.conB a {
	color: #5D9AB2;
	color: var(--main-color);
	text-decoration: none;
}

.conB a:hover	{
	text-decoration: underline;
}

.conB .icon	{
	display: inline-block;
	margin-bottom: 20px;
	font-size: 40px;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
	background-color: #fff;
	background-color: var(--icon-color);
}

.conB .jitsuyou .icon {
	color: #EB6B8C;
}

.conB .manabi .icon {
	color: #3B7ABF;

}
.conB .jishuu .icon {
	color: #F5A21B;
}

.conB ul{
	padding: 0;
	text-align: left;
}
.conB li{
	list-style: none;
	font-size: 15px;
}


.list5 ul,.list5 ol {
  margin: 3em 0 1em 0;
  border: solid 2px #595757;
  padding: 0.3em 0.5em;
  position: relative;
  color: #595757;
  list-style-type: none;
}
.jitsuyou .list5 ul,.list5 ol{
	border: solid 2px #EB6B8C;
}
.manabi .list5 ul,.list5 ol{
	border: solid 2px #3B7ABF;
}
.jishuu .list5 ul,.list5 ol{
	border: solid 2px #F5A21B;
}


.list5 ol {
  counter-reset: number;
}
.list5 ul li,.list5 ol li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.6em;
  border-bottom: dashed 1px #595757;
}
.list5 ul li:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  left : 0.5em;
  color: #595757;
}
.list5 ol li:before {
  display: inline-block;
  position: absolute;
  font-family: "Quicksand", sans-serif;
  content: counter(number);
  counter-increment: number;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #595757;
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
}
.list5 ul li:after,.list5 ol li:after{
  background: #595757;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 10px 0 10px;
  content: "こんな方におすすめ";
  letter-spacing: 0.1em;
}

.jitsuyou .list5 ul li:after,.list5 ol li:after{
	background: #EB6B8C;
}
.manabi .list5 ul li:after,.list5 ol li:after{
	background: #3B7ABF;
}
.jishuu .list5 ul li:after,.list5 ol li:after{
	background: #F5A21B;
}


.list5 ul li:last-of-type,.list5 ol li:last-of-type{
  border-bottom: none;
}

@media (min-width: 768px) {
	.conB{
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}

	.conB .container {
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.conB .text	{
		flex: 1;
		margin-right: 15px;
		margin-left: 0px;
	}
	.conB .text:last-child{
		margin-right: 0px;
	}
}



/* コンテンツC： 概要（画像＋テキスト） */

.conC {
	background-color: #197162;
	background-color: var(--dark-main-color);
	color: #fff;
	color: var(--text-bright-color);
	padding-top: 100px;
	padding-bottom: 50px;
}

.conC .container{
	padding: 20px 20px;
}

.conC-box{
	text-align: center;
	padding-bottom: 30px;
	padding-left: 20px;
	padding-right: 20px;
}


.conC .text {
	padding: 20px;
	border-bottom: solid 0.5px ;
}

.conC h3 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}

.conC p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.9;
}

.conC .photo p{
	position: absolute;
    top: 0px;/*画像の左上に配置*/
    left: 0px;
    margin: 0; /*余計な隙間を除く*/
    color: white;/*文字を白に*/
    font-size: 12px;
    line-height: 1;/*行高は1に*/
    text-align: center;
    padding: 5px 5px;/*文字周りの余白*/
    width: 90px;
}

.conC .manabi{
	background-color: #3B7ABF;
}

.conC .jitsuyou{
	background-color: #EB6B8C;
}

.conC .photo {
	min-height: 200px;
	background-position: center;
	background-size: cover;
	position: relative;
}
#ips{
	background-image: url(img/ips.jpg);
}
#money{
	background-image: url(img/money.jpg);
}
#kakuritsu{
	background-image: url(img/kakuritsu.jpg);
}
#toeic{
	background-image: url(img/toeic.jpg);
}
#shinka{
	background-image: url(img/shinka.jpg);
}
#kobun{
	background-image: url(img/kobun.jpg);
}
#english{
	background-image: url(img/english.jpg);
}



.date{
	border-left: solid 0.75px;
	padding-left: 1rem;
}

.date p{
	font-family: 'Roboto', sans-serif; 
	font-size: 20px;
	opacity: 1;
}

.date span{
	font-family: 'Roboto', sans-serif; 
	font-size: 10px;
	opacity: 1;
}

#jishuu{
	background-color: #f5f5f5;
	color: black;
	padding: 20px 20px;
	margin: 20px 20px;
}

.jishuu-box{
	background-color:  #F5A21B;
	text-align: center;
}

.jishuu-box h3{
	color: #fff;
}

.inner-box{
	padding-top:1em;
	padding-bottom: 1em;
	margin-bottom: 1em;
}

.jishuu-box .icon	{
	display: inline-block;
	margin-bottom: 20px;
	font-size: 40px;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
	color: #F5A21B;
	background-color: #fff;
	background-color: var(--icon-color);
}

table{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  font-size: 15px;
}

.conC table tr{
  border-bottom: solid 1px #bfbfbf;
}

table td{
  width: auto;
  padding: 7px 0 7px 3px;
}



@media (min-width: 768px) {
	.conC .container {
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.conC .photo {
		flex: 3;
	}

	.conC .text {
		flex: 3;
		padding: 20px 50px;
	}

	#jishuu {
		display: flex;
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}

	.jishuu-box{
		flex: 2;
	}

	.jishuu-text{
		flex: 3;
		padding: 20px 50px;
	}
	.jishuu-box{
	position: relative;
	background-color: #F5A21B;
	}

	.inner-box{
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	-webkit-transform : translate(-50%,-50%);
 	transform : translate(-50%,-50%);
 	text-align: center;/*一応BOX内の文字も中央寄せ*/
    }
}

/*CTAエリア*/

.CTA{
	background-color: #FFFBC7;
	text-align: center;
	padding: 40px 15px 50px 15px;
	display: none;
}

.CTA .title{
	font-size: 16px;
	font-weight: bold;
	color: #454545;
}

.CTA-inner{
	padding: 0 15px;
	margin-bottom: 20px;
}

.CTA p{
	font-size: 15px;
}

.free-icon{
	width: 100%;
}

.CTA table{
	border: 1px solid #197162;
}

.CTA td:first-of-type{
	background-color: #197162;
	text-align: center;
	color: white;
	line-height: 1.1;
	padding:10px;
}
.CTA td{
	padding: 0 5px;
	text-align: center;
}




@media (min-width: 768px) {
	.CTA .container {
		display: block;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	.free-icon{
		width: 70%;
	}
	.CTA table{
		width: 70%;
		margin: 0 auto;
	}
}


/* アクセス　*/

.access{
	padding-top: 100px;
}

.access-box{
	text-align: center;
	padding-bottom: 30px;
	padding-left: 20px;
	padding-right: 20px;
}

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media (min-width: 768px) {
	.access .container {
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50px;
	}
}



/* フッター */
footer {
	color: #fff;
	color: var(--text-bright-color);
	background-color: #197162;
	background-color: var(--dark-main-color);
}

footer .container {
	padding: 40px 20px;
}


@media (min-width: 768px) {
	footer .container {
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.footC {
		flex: 0 0 100%;
	}
}


/* フッターC： コピーライト */
.footC {
	font-size: 12px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
}

/* ヘッダー */
header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	background-color: rgba(0,0,0,0.7);
}

/* ヘッダーA: サイト名 */
.headA {
	padding-left: 0.5rem;
	padding-top: 0.5rem;
}
.headA img{
	width: 30vw;
	display: inline-block;
}
@media (min-width: 768px){
	.headA img{
		width: 10vw;
	}
}

/* ヘッダーB： ナビゲーションメニュー */

.headB ul {
	margin: 0 10px 10px 10px;
	padding: 0;
	list-style: none;
	text-align: center;
}

.headB a {
	display: block;
	padding: 20px;
	color: #fff;
	font-size: 15px;
	text-decoration: none;
}

@media (min-width: 768px) {
	header .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}
	.headB a{
		font-size: 12px;

	}
	.headB ul {
		display: flex;
		margin: 0;
	}
	.headB a:hover {
	     background-color: rgba(0,0,0,0.3);
	}
}


/* ヘッダーC： トグルボタン */

@media (max-width: 767px) {
	/* 小さい画面用の設定 */
	header .container-small {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	#menu-trigger,
	#menu-trigger span {
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
	}
	#menu-trigger {
	  position: relative;
	  width: 35px;
	  height: 20px;
	  margin-right: 10px;
	}
	#menu-trigger span {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background-color: #fff;
	  border-radius: 2px;
	}
	#menu-trigger span:nth-of-type(1) {
	  top: 0;
	}
	#menu-trigger span:nth-of-type(2) {
	  top: 9px;
	}
	#menu-trigger span:nth-of-type(3) {
	  bottom: 0;
	}
	#menu-trigger.active span:nth-of-type(1) {
	  -webkit-transform: translateY(9px) rotate(-45deg);
	  transform: translateY(9px) rotate(-45deg);
	}
	#menu-trigger.active span:nth-of-type(2) {
	  opacity: 0;
	}
	#menu-trigger.active span:nth-of-type(3) {
	  -webkit-transform: translateY(-9px) rotate(45deg);
	  transform: translateY(-9px) rotate(45deg);
	}
}

@media (min-width: 768px) {
	/* 大きい画面用の設定 */
	.headC {
		display: none;
	}

	.headB {
		display: block !important;
	}
}


/* フェードイン　*/

.move{
	transition: 0.8s;
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.move2{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

/*  SNSメニュー */
.sns {
	padding-top: 5px;
	}

.sns ul {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sns a {
	display: block;
	margin-bottom: 0;
	margin-right: 10px;
	padding: 0;
	color: white;
	font-size: 40px;
	text-decoration: none;
	text-align: center;
}



@media (min-width: 768px) {
	/* 大きい画面用の設定 */
	.sns a:hover{
		opacity: 0.8;
	}
}