/*--------------------------------------- 
全体共通
pisa塾のCSS 新しく作ったver
---------------------------------------*/
.wrap{
	margin: 0 auto;
}
input[type="text"]{
	 font-size: 16px;
}

/*-----フォームの設定、全て変えてしまう。
参照：http://phiary.me/css3-box-sizing/
------*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

hr{
border:none;
border-top:dashed 1px #CCC;
height:1px;
color: #CCC;
width:auto;
}
body{
	margin: 0 auto;
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;/*文字修整を追加　2024.08*/
}
p{
	line-height: 2.0rem;
	/*margin: 0;*/
}

/*-----------------------------------------------------------------------

LPで利用

-------------------------------------------------------------------*/
#main_login{/*ログインで利用*/
	width: 100%;
	max-width:500px;
	margin: 0 auto;
	height: auto;
	display: flex;
	align-items: center;
}


#main_login p{
	padding:0;
    margin: 4px 0;
}
#main_login a{
	text-decoration: none;
	color: #212121;
	letter-spacing: 1px;
}
.body_back{
	width: 100%;
	background-size: contain;/*縦横比を保持・背景領域を完全に覆う最小サイズに背景画像を拡大縮小する*/
	/*background: url("../img/back_img/back1.jpg");*/
	background-position:top;
	background-repeat: no-repeat;
}

.back{/*最初の背景*/
	background-size: cover;/*containがもともと縦横比を保持・背景領域を完全に覆う最小サイズに背景画像を拡大縮小する*/
	/*background: url("../img/back/back_lp.jpg");*/
	background-position:50% 50%;
	height: 100vh;
	background-repeat: no-repeat;
	/*background-attachment: fixed;*/
}


.back_smaho{
	display: none;
}
.bg-slider{
	background-size: contain;/*縦横比を保持・背景領域を完全に覆う最小サイズに背景画像を拡大縮小する*/
	/*background: url("");*/
	background-position:top;
	background-repeat: no-repeat;
} 


.back_login{
	background-image: url("../img/back_login.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	 background-attachment: fixed;
	background-position: center center;  
}




#container {
	width: 1000px;
	clear:both;
	margin: 0 auto;
}
h1 {
    font-size:0;
	margin: 0;
	padding:0;
}

a:hover{
	opacity:0.8;
}
#main01 p,#main p,#map1 p{
	font-size:0.95rem;
	line-height: 2.5rem;
	margin:0;
}
.kanren_kizi p{
	font-size:0.75rem;
	line-height: 2.5rem;
	margin:0;
}
/*---------------------------------------
gnavi のなかみだよ

---------------------------------------*/
#gnavi {
	width:1000px;
	height: auto;
	margin: 0 auto;
	clear:both;
	}

#gnavi ul {
    list-style:none;
	margin:0;
	padding:0;
}
#gnavi li{
	height: 60px;
	padding: 0;
	margin: 0;
	float: left;
}
#gnavi img{
	border: 0;
}
#gnavi li a:hover{
	height: 60px;
	padding: 0;
	opacity:0.7;
}
.gnavi_back{
	background: #04aa72;
	width: 100%;
	border-radius: 3px 3px 0 0;
}
.gnavi_back.m_fixed {/*途中からここを+*/
	position: fixed;
	  top: 0;
  left: 50%;
  transform: translateX(-50%);
	z-index: 99999;
	background-color: #04aa72;/*色を合わせる*/
	width: 100%;
	border-radius: 3px 3px 0 0;
}


/*--------------------------------------- 
アコーディオンメニューの上 
---------------------------------------*/
#gnabi_ue{
	width: 1000px;
	height: 38px;
	background-color: #EBF2D5;
	margin: 0 auto;
}
#gnabi_ue ul{
	list-style: none;
	display: flex;
	padding: 0 10px;
}
#gnabi_ue li{
	flex-wrap: nowrap;
	width: 10%;
	padding: 10px 0;
	font-size: 11px;
	text-align: center;
}
#gnabi_ue li a,#gnabi_ue li a:visited{
	text-decoration: none;
	color:#272727;
}
	
/*--------------------------------------- 
 アコーディオングローバルナビに利用しています
cssだけで作っています
---------------------------------------*/

#gnabi{
	font-family: メイリオ,Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,Meiryo,serif;
	font-size: 12px;
}
#dropmenu{
  list-style-type: none;
  width: 1000px;
  height: 60px;
  margin: 0 auto 0;
  padding: 0;
  /*グラデーション*/
/*	background: #b5c675; /* Old browsers */
/*	background: -moz-linear-gradient(top, #B5C675 0%, #97BE32 49%, #98C727 100%); /* FF3.6-15 */
/*	background: -webkit-linear-gradient(top, #B5C675 0%,#97BE32 49%,#98C727 100%); /* Chrome10-25,Safari5.1-6 */
/*	background: linear-gradient(to bottom, #B5C675 0%,#97BE32 49%,#98C727 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: #04aa72;	
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5c675', endColorstr='#98c727',GradientType=0 ); /* IE6-9 */
  /*background: #A3C43C;*/
  /*border-bottom: 4px solid #F9F7F7;した線をやめる*/
  border-radius: 3px 3px 0 0;
  font-weight: normal;
		
}
#dropmenu li{
  position: relative;
 width:12.5%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
  color:#000000;
  font-weight: normal;
	z-index:100000;/*上にする*/
}
#dropmenu li a{/*一番上の階層ボタン 文字の色*/
  display: block;
  margin: 0;
  padding: 25px 0 11px; /*文字の位置調節　下に11px*/
  color: #fff;/*文字の色*/
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
 font-weight: normal;
}
#dropmenu li:hover > a{/*マウスオーバー時 1階層*/
  background:#04aa72;/*マウスオーバー時 背景の色*/
  color:#000000 ;/*文字の色*/
}
#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}
#dropmenu li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  border-radius: 0 0 3px 3px;
}
#dropmenu li:last-child ul{
  left: -100%;
  width: 100%
}
#dropmenu li ul li{/*下階層のボタン*/
  overflow: hidden;
  width: 200%;
  height: 0;/*高さ*/
  background-color: #04aa72;
  color: #fff;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
	/*した線はここに入れない*/
}
#dropmenu li ul li a{
  padding: 25px 15px;/* 13px*/
  background: #04aa72;/*下階層ボタンのa要素　ボタンの色*/
  text-align: left;
  font-size: 12px;
  font-weight: normal;
	border-bottom: 1px solid #8DA27A; /*境界線の下線*/
	cursor: pointer;
}
#dropmenu li ul li a:hover{/*下階層ボタンのマウスオーバー時*/
  color:#000;
}
#dropmenu li:hover ul li{/*高さの調節　隠れている部分*/
  overflow: visible;
  height: 60px;
  /*border-top: 1px solid #689D38;境界線の上線*/
  border-bottom: 1px solid #689D38; /*境界線の下線*/
}
#dropmenu li:hover ul li:first-child{
  border-top: 0;
}
#dropmenu li:hover ul li:last-child{
  border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
  border-radius: 0 0 3px 3px;
}
/*--------------------------------------- 
  パンくずの中だよん
---------------------------------------*/
#pan{
  margin: 0 auto;
  padding: 15px 0 0 0;
  font-size:12px;
  /*clear:both;*/
  height: 60px;/*余白を広く修整*/
  max-width: 1000px;
	width: 100%;
}
#pan ul{
display: flex;	
  list-style:none;
  margin: 5px 0 0 0;
  padding:0;
}
#pan li{
   margin: 0 5px 8px 0;  
  list-style:none;
}
#pan a:visited,
#pan a:link{
	color:#000;
	width: 20%;
}

/*--------------------------------------- 
 ストロングが蛍光ペン風になる cssは丈夫に表示させておくこと
---------------------------------------*/
strong {
 background: linear-gradient(transparent 40%, #ffff66 40%);
 -webkit-:background: linear-gradient(transparent 40%, #ffff66 40%);
}

/*--------------------------------------- 
強調　今回だけ
---------------------------------------*/

.kyoucyou{
	background-color: #F0F0FF;
	border: 1px solid #96C;/*---紫の枠　薄いムラサキ---*/ 
	padding:10px;
}

.hako2{
	background-color: #FFFFCC;
	border: 2px solid #FF0000; /*---枠:赤　背景：クリーム---*/ 
	padding: 10px;
}
.hako-midori {
    background-color: #FFFFCC;
    border: 2px solid #339933;
    padding: 10px;
}

/*--------------------------------------- 
親要素の高さを算出する
---------------------------------------*/

.clearfix::after{
	content:'';
	display: block;
	clear:both;
}
.clear{
	clear:both;
	height:1px;
}

/*---------------------------------------
header　boxの中身
---------------------------------------*/
.box1{
	width: 500px;
}
.box2{
	width: auto;
	float: right;
}
.box2 ul{
	height:80px;
	list-style:none;
	margin:0;
	padding:0;
}
.box2 li{
	height:60px;
	margin: 0 20px;
}
.box2 li p{
	margin: 0;
	padding: 5px 0;
	line-height: 0;
}

/*---------------------------------------
メンバー一覧部分
---------------------------------------*/
.member_box {
	width: 780px;
	height:auto;
	clear: both;
}

.member {
	width: 180px;
	height:auto;
	padding: 0 10px 0 0;
	float: left;
}
/*--写真のサイズ--*/
.member_size{ 
    width: 175px;
    height:175px;
	border: none;
}


/*---------------------------------------
header のなかみ html5で記述
---------------------------------------*/
#header {
	widh: 1000px;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
	/*height: 130px;/* LPで高さを算出してしまうのでなくす*/
	display: flex;
	align-items: center;
	justify-content:space-between;
	background-color:rgba(0,0,0,0);
	/*border-top: 5px solid #144387;*/
}
#heder p{
	font-size: 12px;
	line-height: 20px;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
		/* 大きい画面用の設定 */

#header{
	max-width: 1000px;
}

/*大きい画面時にbox2の中のメニューを表示させない */
.menu01{
	display: none;
}
}/* 大きい画面用の設定　終わり */


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

@media (max-width: 767px) {
	/* 小さい画面用の設定 */

#header{
	margin:0;
	padding:0;
}
.box1{
	width:10%;
}
.box2{
	width:90%;
}

/*--小さい画面では、電話ボタンを消す--*/
.menu02{ 
	display: none;
}

	
/*--写真のサイズ--*/
.member_size{ 
    width: 150px;
    height:150px;
	border: none;
}
	
#main img {
	height: auto;
	border: 0;
	max-width: 100%;
}	
}

@media (min-width: 768px) {
	/* 大きい画面用の設定 */
}/* 大きい画面用の設定 終わり*/

h1 {
	padding:0;
	margin: 0;
}


h2,h3 {
	margin: 0 0 10px 0;
	padding: 0px;
    line-height: 29px;
    font-size: 19px;
}
.ai2 {
	display:inline-block;
	line-height: 120px;
	margin: 0;
}


#contents {
	margin:0 auto;
	width:1000px;
	padding:0;
	clear:both;
}
main00{
	width:1000px;
}
#main {
	float: left;
	width: 770px;
	margin: 0;
	padding:0;
}
#main img {
	height: auto;
	border-style:none;
	max-width: 100%;
}
#main2 {
	float: right;
	width: 600px;
	margin: 0;
	padding:0;
}
/*-----main3はお問合せページで使っています -----*/
#main3 {
	width: 1000px;
	margin: 0;
	padding:0;
}
#main3 p {
	font-size: 16px;
	line-height: 150%;
}
#main3　img {
	width:100%;
}

#footer_contact {
	width: 1000px;
	text-align: center;
	background-color:#000;
	clear: both;
	height: 50px;
	font-size: 12px;
	color:#FFF;
}
/*-----main3　終わり----*/

#footer {
	margin: 0 auto;
	text-align: center;
	clear: both;
	height: 70px;
	font-size: 12px;
	background-color:#04aa72;
	color:#FFF;
}
/*----フッターのコンテンツ部分　　---*/
.fnavi {
	width:1000px;
	margin:0 auto;
	border: 0;
}
#footer02 {
	clear: both;
	font-size: 12px;
    background-color:#FEF8EB;
	margin: 0 auto;
}
#footer02 p{
	color:#666666;
	line-height: 1.7rem;
}
#footer02 a:link{
	color:#666666;
	text-decoration: none;
}
#footer02 a:visited{
	color:#666666;
	text-decoration: none;
}
#footer02 a:hover{
	color:#666666;
	text-decoration: underline;
}
#map1 {
    width: 1000px;
	margin: 0 auto;
}   
#logo {
    float:left;
    margin:0;
	padding:0;
}
.m1{ 
   margin: 0 0 0 25px;
   padding: 0;
}



/*--------------------------------------- 
   お問い合わせ
---------------------------------------*/
.contact {
  padding: 0 ;
}
/*-------------------------------
list styleです

---------------------------------*/

.midasi_h3{  /*--h3の見出し部分 ---*/
	height: 50px;
	width:100%;
	margin:0;
	padding: 12px 0 5px 10px;
	color: #FFAF3D;
	background-repeat: no-repeat;
}

.mida01 {
	height:45px;
	width: 100%;
	padding: 9px 0 0 10px;
	background-image:url(../img/back_h03.jpg);
	background-repeat: repeat-x;
	color:#FFF;
}
.mida02{
	height:45px;
	width: 100%;
	padding: 7px 0 0 40px;
	background-image:url("../img/arrow04.jpg");
	background-repeat: no-repeat;
	background-position: 10px 10px;
	color:#000;
}
.mida02a{
    color: #6cb4e4;
    padding: 0.8rem 0 0.5rem 0.5rem;
	margin: 0 0 2.2rem 0;
    border-top: solid 2px #deedf7;
    border-bottom: solid 2px #e2f0f9;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
.mida03{
	/*スマホ調節用*/
}
h4 {
	font-size: 18px;
	margin: 0;
	padding: 0px;
    line-height: 40px;
}
h5{
   font-size:12px;
   line-height: 10px;
   margin: 0;
   padding: 0;
}
.kadai{  /*--h4の背景が灰色の部分につかっている　東洋経済のトピックみたいな ---*/
	margin:0 0 0 10px;
	padding: 0 0 0 10px;
}

.sen {
	color: #FF0000;
	text-decoration: underline;    
}
address{
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	margin: 5px 0 0 0;
	font-size: 12px;
	font-style: normal;
}
.ai {
	padding:35px 15px 5px 0;
	font-size: 12px;
	text-align:right;
	margin-top: 0;
	color: #FFFFFF;
}
.ai a:link{
	color: #FFFFFF;
	text-decoration: none;
}
.ai a:visited{
	color: #FFFFFF;
	text-decoration: none;
}
.ai a:hover{
    color:#FFFFFF;
	text-decoration:underline;
}

.style5 {
	color: #009933;
	font-weight: bold;
	font-size: 13px;
}
.midasi{
	margin: 15px 0 10px 0;
}
.big{
	font-size: 22px;
	font-weight: bold;
	color: #000000;
}
.big02{
	font-size: 22px;
	font-weight: bold;
	color: #000000;
	line-height: 35px;
}
.an{
	margin: 0 0 0 4px;
	font-size:13px;
}

.copy{
   margin: 5px 0 0 0;
   padding: 0;
   font-size: 11px;
}


/*--------------------------------------- 
  naviの中だよん
---------------------------------------*/
#navi {
	float: right;
	width: 210px;
	margin-top: 0px;
	padding: 0;
	background-color: #fff;
}
/*画像の最大サイズを決めておく*/
#navi img{
	width: 100%;
	max-width: 210px;
}
#navi p {
	font-size: 13px;
	line-height: 30px;
	margin: 0;
}
#navi a:hover {
	opacity:0.5;
}

#navi2 {
	float: left;
	width: 210px;
	font-size: 12px;
}
#navi1 {
	height: 196px;
	width: 300px;
	background-image: url(../img/back_navi1.jpg);
	background-repeat: no-repeat;
}
#navi ul,#navi2 ul {
	list-style-type: none;
	width: 210px;
	display: block;
	margin: 5px 0 0 0;	
	padding: 0;
	clear:both;
}
#navi li,#navi2 li {
	width:210px;
	display:block;
	list-style-type: none;
	clear: both;
	font-size: 12px;
	line-height: 50px;
	border-bottom: #CCCCCC 1px solid;
}
#navi li a,#navi2 li a{
	text-decoration:none; /*-- アンダーバーを消す-----*/
	color:#666;
	display:block;
	line-height:50px;
}
#navi li a:hover,#navi2 li a:hover{
	opacity:0.5;
}
/*--------------------------------------- 
  topの中だよん
---------------------------------------*/
.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}


/*--------------------------------------- 
  tableの中だよん
---------------------------------------*/
.customer{
	background-image:url(../img/back_koe.jpg);
	background-repeat: no-repeat;
	height:176px;
	width:778px;
}
.table2{
	margin: 0;
	width: 100%;
	border:none;
}
.table3{
    margin: 0;
	padding: 0;
	border-collapse: collapse;
	width: 100%;
}
.table3 td, .table3 th{
	margin: 0;
	border: 1px solid #CCCCCC;
    text-align:center;
}
.table3 p{
   padding: 0 0 0 10px;
   font-size: 13px;
}
/*------サイズが小さくなると、可変する。
テキストはセンターのテーブルレイアウト -----*/

.table4{
    margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table4 td, .table4 th{
	padding:0;
	margin:0;
	border: 1px solid #CCCCCC;
}
.table4 p{
   margin: 0;
   padding: 0;
   text-align:center;
}
.table5{
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	background-color:#FAFAFA;
}
.table5 td, .table5 th{
	margin: 0 0 0 10px;
	border: 1px solid #CCCCCC;
}
.table5 p{
   padding: 0 0 0 10px;
   font-size: 18px;
   line-height: 40px;
   font-weight:bold;
}
/*------サイズが小さくなると、可変する。
ボーダーの色は白
テキストは左のテーブルレイアウト -----*/


.table5a{
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table5a td, .table5a th{
	padding: 0 10px;
	border: 1px solid #BFDEF2;
	height: 40px;
}
.table5a p{
   padding: 0;
   margin: 0;
   font-size: 0.8em;
   line-height: 2em;
}
.wh01{
	color:#FFF;/*--文字色を白にする --*/
}
.td_back{
	background-color: #7CBCE6;
	color:#FFF;
	width:20%;
	text-align:center;
}


/*------サイズが小さくなると、可変する。
テキストはセンターのテーブルレイアウト -----*/

.table6{
	width: 100%;
    margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table6 td, .table6 th{
	margin: 0;
	border: 1px solid #CCCCCC;
}
.table6 p{
   padding: 0;
   font-size: 12px;
   text-align: center;
}
/*------end -----*/

/*------サイズが小さくなると、可変する。
テキストはセンターのテーブルレイアウト -----*/

.table7{
	width: 100%;
    margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table7 td, .table7 th{
	margin: 0;
	border: 1px solid #A0A0A0;
}
.table7 p{
   padding: 0 0 0 10px;
   font-size: 12px;
}
/*------end -----*/


/*-----お問合せフォーム専門のcss -----*/

.table_contact{
    margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table_contact td, .table_contact th{
	margin: 0 0 0 10px;
	border: 1px solid #CCCCCC;
}
.table_contact p{
   padding: 0 0 0 10px;
   font-size: 12px;
   line-height:30px;
}
.contact_01 {
	width:160px;
	height: 55px;
	background-color:#F6F6F6;
}
/*-----お問合せ 高さが180px-----*/

.contact_02 {
	width:160px;
	height: 180px;
	background-color:#F6F6F6;
}
.contact_haba{
	width: 450px;
}
/*-----住所の高さが77px-----*/

.contact_add{
	height:77px;
	background-color:#F6F6F6;	
}

.error{
	color:#F00;
	font-weight:bold;
}
/*------end -----*/


.meigen{
    margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.meigen td, .meigen th{
	margin: 0 0 0 10px;
	padding: 0 0 0 0;
	border: 1px solid #CCCCCC;
    text-align:center;
}
.meigen p{
     font-size: 25px;
	 padding: 0 0 30px 0;
}
.otoi{
    margin: 0 0 0 5px;
	padding: 0;
	border-collapse: collapse;
}
.otoi td, .otoi th{
	margin: 0 0 0 10px;
	border: 1px solid #CCCCCC;
}
.otoi p{
   padding: 0 0 0 10px;
   font-size: 12px;
}
.seo1{
   margin: 0 0 0 10px;
   padding: 0;
   font-size: 12px;
   text-align: center;
   border-collapse: collapse;
}
.seo1 td{
	margin: 0 0 0 10px;
	border: 1px solid #CCCCCC;
}
.cor {
   margin: 0 0 0 15px;
   padding: 0;
}
.company{
	margin: 0;
	padding: 0;
}
.company tr{
    vertical-align: middle;
}
.company td{
    border-top: none;
	border-right: none;
	border-bottom: 1px dotted #CCCCCC;
	border-left: none;
}
.m{
   margin: 0 0 0 5px;
   padding: 0;
}
.new {
	background-image: url(../img/new_back.jpg);
	background-repeat: no-repeat;
	height: 282px;
	width: 576px;
	margin: 0 0 0 2px;
}
.renew {
	background-image: url(../img/renew_back.jpg);
	background-repeat: no-repeat;
	height: 282px;
	width: 576px;
	margin: 0 0 0 2px;
}
.seo {
	background-image: url(../img/seo.jpg);
	background-repeat: no-repeat;
	height: 282px;
	width: 576px;
	margin: 0 0 0 2px;
}
/*--------------------------------------- 
 floatだよん
---------------------------------------*/
.f1{
   float: left;
} 
.f2{
   margin: 0 20px 0 0;
   padding: 0;
   float: left;
} 
.r1{
  float: right;
  margin: 0 5px 0 5px;
  padding: 0;
}
.r2{
  float: right;
  padding: 0 7px 0 0;
}

/*--------------------------
詳細ボタンに使っています　
----------------------------*/
.ten{ 
  margin: 0 0 0 10px;
  padding: 0;
}


.ten_sita{
	margin: 10px 0 10px 0;
}
.zero {
   margin: 0;
   padding: 0;
}
/*--------------------------------------- 
  footerの中だよん
---------------------------------------*/
#footer ul {
	list-style-type: none;
	padding: 15px 0 0 0;
	margin: 0;
	text-align: center;
	margin-right: 0px;
}
#footer li {
    display:inline;
	margin: 0px 10px 0 10px;
	list-style-type: none;
}

.f4 {
   margin: 0;
   padding:15px 25px 0 0;
   float: right;
}
.non{
   margin: 0;
   padding: 0;
}

/*--------------------------------------- 
  文字のデコレーションです
---------------------------------------*/
.red {
	color: #FF0000;
	font-weight: bold;
}
.redbig {
	color: #FF0000;
	font-weight: bold;
	font-size: 24px;
}
.wh {
	color:#FFFFFF;
	font-size: 12px;
	text-align: center;
}
.wt {
     color: #FFFFFF;
	 font-weight:bold;
	 text-align: center;
}
.wt02 {
     color: #FFFFFF;
}
.bred {
    font-size:24px;
	color: #FF0000;
	fone-weight: bold;
	text-align: center;
}
.blue {
	color: #3899E0;
	font-weight: bold;
}
.green{
	color: #006666;
}
.woman_pink{
	color: #FF9899;
	font-weight:bold;
}
.woman_pink_company{
	color: #E383A5;
	font-weight:bold;
	text-align:center;
}
.pink {
	color: #F3F;
	font-weight: bold;
}
.qa1 {
	color: #996600;
	font-weight: bold;
}
.orange{
	color: #FA6B02;
	font-size: 13px;
	font-weight: bold;
}
.orange02{
	color: #FFAF3E;
	font-size: 20px;
	line-height:40px;
	font-weight: bold;
}
.qa2{
	margin: 0;
	background-color: #03496D;
	padding: 5px;
	font-size: 13px;
	display: block;
	color: #FFFFFF;
}
.style9 {
    color: #D0D0D0;
	font-size: 9px;
}

/*--------------------------------------- 
  768px以上の時は　menuは見えない
---------------------------------------*/
.slicknav_menu {
	display:none;
}
/*Media Queries*/
@media screen and (max-width: 599px) {
	.js #menu {
		display:none;
	}
	
	.js .slicknav_menu {
		display:block;
	}
}


.map02{
	display:none;
}
/*--------------------------------------- 
  モバイルのmenuは見えない
---------------------------------------*/
#menu {
	display: none;
}

/*--------------------------------------- 
  ページの調節用
---------------------------------------*/

.sita10 {
	margin: 0 0 10px 0;
}

/*--------------------------------------- 
   メンバーページのcss
---------------------------------------*/

#main_back{
	background-color: #F3F3F3;
	height: 2300px;
	width: 780px;
}

#profile {
	float: left;
	width: 260px;
	height: 680px;
	margin: 10px;
	background-color:#FFF;
}
#profile p,#profile02 p,#comment p,#profile_photo p {
	margin: 0 0 0 10px;
}

#profile_photo {
	float: right;
	width: 470px;
	height: 680px;
	margin: 10px;
	background-color:#FFF;
}
#profile02 {
	float: left;
	width: 260px;
	height: 1520px;
	margin: 10px;
	background-color:#FFF;
}
#comment {
	float: right;
	width: 470px;
	height: auto;
	margin: 10px;
	background-color:#FFF;
}

/*--------------------------------------- 
   モバイル部分のボタン
---------------------------------------*/
#footer_btn{
	margin: 0;
	padding: 0;
	display: none;
}
#footer_btn ul{
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 0;
}
#footer_btn li{
	height: 50px;
	float: left;
	margin: 1px;
	padding: 0;
}
/*--------------------------------------- 
  トップページ
---------------------------------------*/
.hicon{
	height:27px;
	width:20px;
}
.bicon{
	height:26px;
	width:100%;
}

/*--------------------------------------- 
  
予約ボタンの表示設定
  
---------------------------------------*/
.yoyaku02{
	display: none;
}
/*----小さいときは横並びは非表示にする--*/

/*---------------------------------------
topページのnewsの点線など
---------------------------------------*/
.news{
	width: 100%;
}
.news p{
	margin: 0;
	line-height: 40px;
}
.news_tensen{
	height: 40px;
	background-image: url(../img/bar_sita_tensen.png);
	background-repeat: no-repeat;
	margin: 0;
}
/*---------------------------------------
categoryボタンの中
---------------------------------------*/
.category p{
	font-size: 12px;
}
/*---------------------------------------
詳細情報のテーブルレイアウト　調節用
---------------------------------------*/
.shousai p{
	font-size: 12px;
	margin: 0 0 0 10px;
}
.shosai01 td {
	margin: 0;
	padding: 0;
}
/*---------------------------------------

記事のアイコン
---------------------------------------*/
.kijicat {
	margin-bottom: 25px;
}
.kijicat ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.kijicat li a{
	display: block;
	margin-right:5px;
	padding: 4px 5px;
	border-radius: 2px;
	background-color:#17E3C5;
	color:#FFF;
	font-size: 12px;
	text-decoration: none;
}
.kijicat li a:hover{
	background-color:#A0F5E9;
}
.kijicat ul:after{
	content:"";
	display:block;
	clear:both;
}
.kijicat li {
	float: left;
	width:auto;
}
/*---------------------------------------

バッジ

---------------------------------------*/
.badge {
	width: 60px;
	height:60px;
	padding-top: 10px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	border-radius:60px;
	background-color:#17E3C5;
	color: #FFF;
	text-align:center;
	box-shadow: 0 0 4px #000000;
}
.badge i {
	display: block;
	font-size: 11px;
}
/*----表示位置の設定 ---*/
.pickup {
	position:relative;
}
.badge{
	position:absolute;
	top: 40%;
	right: -15px;
	font-size: 11px;
}
/*---------------------------------------

注意などに使うボックスについて
強調したい箇所につかいます
---------------------------------------*/

.attention{
	height:auto;
	width:680px;
	background-color:#EEEEEE;
}
.attention p{
	margin: 0 0 0 15px;
	line-height:30px;
}

/*---------------------------------------


a {
    text-decoration: none;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
---------------------------------------*/

/*---------------------------------------

ボタンとoverlayについての記述

---------------------------------------*/
/* OPEN / CLOSE BTNS */
.menu-btn {
	height:60px;
	width:50px;
}
.menu-btn a {
    display: inline-block;
    text-decoration: none;
    /* safari hack */
}
/*
.btn-open:after {
    color: #333;
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    transition-property: all .2s linear 0s;
}
.btn-open:hover:after {
    color: #F00;
}
.btn-close:after {
    color: #fff;
    content: "\f2d7";
    font-family: "Ionicons";
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    transition-property: all .2s linear 0s;
}
.btn-close:hover:after {
    color: #FFF;
}
 */


/* OVERLAY ボタンを押すと出てくるところ */
.overlay {
    position: fixed;
    top: 0;
    z-index:10000;
    display: none;
    overflow: auto;
    width: 100%;
    height: 100%;
    background: #333; /*背景の色です*/
}
.o_menu{
	margin: 20px 0 0 20px;
}
.o_menu p{
	color:#FFF;
	font-size: 2em;
	line-height: 4em;
	margin: 0;
}

.o_menu a:link{
	color: #FFF;
	text-decoration:none;
}

.o_menu a:visited{
	color: #FFF;
	text-decoration:none;
}

.o_menu a:hover{
	color: #FFF;
	text-decoration:underline;
}
/*------------------------

実績の部分　２列横並び、Ｓサイズ時に１列

--------------------------*/
.boxA-1{
	clear:both;

}
.gaiyou{ 
margin-bottom: 20px;
}
.gaiyou a{
	display: block;
    border: solid 1px #CCC;
    color: #666;
    text-decoration: none;
}
.gaiyou a:hover{
	box-shadow: 0 0 10px #666;
}
.gaiyou img {
	max-width:100%;
	height:auto;
	border:none;
	margin-bottom:15px;
	vertical-align: bottom;
}
.gaiyou p{
	margin:0 15px 10px 5px;
	font-size: 14px;
}
.boxA-1:after{
	content:"";
	display: block;
	clear:both;
}
.boxA-1 .gaiyou{
	float:left;
	width:50%;
}	

.boxA-1 .gaiyou:nth-child(odd){
	padding-right:5px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	clear:both;
}
.boxA-1 .gaiyou:nth-child(even){
	padding-left:5px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
/*--------------------------------------- 
   youtubeの可変
---------------------------------------*/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	margin: 15px 0;/*追加で調節*/
	height: 0;
	overflow: hidden;
}

.video-container iframe {
	position: absolute;
	top: -4px;
	left: -2px;
	width: 100%;
	height: 100%;
}
/*------------------------

メニューボタンのサイズ調節
--------------------------*/
.mbt{
	width: 57px;
	height: 67px;
}
/*--------------------------------------- 
   Mサイズの時は社長の顔+コメント部分は非表示にする
---------------------------------------*/
.coment{
	height: 150px;
	width: 735px;
	background-image:url(../img/back_coment.jpg);
	background-repeat:no-repeat;
	border: none;
}

/*--------------------------------------- 
   この記事を読んだ人は、こんな記事も読んでます
   関連記事のcss
---------------------------------------*/

.kanren_kizi img {
	width: 170px;
	height: 100px;
}
.kanren_kizi a{
	display: block;
	padding: 10px 0 5px 5px;
	border-bottom: dotted 1px #CCC;
	font-size: 14px;
	text-decoration: none;
	height: 160px;/*広げる*/
}
.kanren_kizi .f1{
	float: left;
	padding-right: 20px;
}
.kanren_kizi a:hover{
	background-color: #eeeeee;

}

.kanren_kizi a:after{
	content: "";
	display:block;
	height:auto;
	clear:both;
}
/*--------------------------------------- 
  トップ理念、合格実績など3つ並び　スマホ時には一列になる
　トップページに利用
---------------------------------------*/

.item{
	width: 100%;
	height: auto;
	display: flex;
    -webkit-display: flex;
}
.s_item{
	width: 32%;
	margin: 20px 6px;
}
.s_item a:hover{
	opacity:0.8;
}
/*--------------------------------------- 
  トップ理念、合格実績など3つ並び　スマホ時には一列になる
　トップページに利用
---------------------------------------*/

.item_3{
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap:wrap;/*子要素を折り返して、複数行に並べる*/
	justify-content: center; /* 子要素をflexboxにより中央に配置する */
	background-image:url("../img/bck_note.jpg");
	background-repeat: repeat;
}
.item_3 img{
	width: 256px;
}
.s_item_3{
	width:　256px;
	margin: 20px 30px;/*中央に配置した後、マージンで感覚を調節*/
}
.s_item_3 a:hover{
	opacity:0.8;
}

/*--------------------------------------- 
 2つ並び　topページのサービスにつかっています
 item_2t とは2列トップのt
---------------------------------------*/

.item_2t{
	width: 100%;
	height: auto;
}
.s_item2t{
	width: 480px;
	height: 300px;
	margin: 20px 10px;
	display: block;
	float:left;
}
.s_item2t a:hover{
	opacity:0.8;
}
/*--------------------------------------- 
subページのサービスにつかっています
 item_2ts とは2列トップのt subのs
---------------------------------------*/

.item_2ts{
	width: 100%;
	height: auto;
}
.s_item2ts{
	width: 360px;
	height: 300px;
	margin: 20px 5px;
	display: block;
	float:left;
}
.s_item2ts a:hover{
	opacity:0.8;
}
/*--------------------------------------- 
会社概要ページ　地図の部分につかっています
 item_2ts01 とは2列トップのt subのs
---------------------------------------*/

.item_2ts01{
	width: 100%;
	height: auto;
}
.s_item2ts01{
	width: 360px;
	height: 370px;
	margin: 20px 5px;
	display: block;
	float:left;
}
.s_item2ts01 a:hover{
	opacity:0.8;
}
/*--------------------------------------- 
フレックスボックスで作成　770px幅　2列
 item_2ts01 とは2列トップのt subのs
---------------------------------------*/

#item_2f{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 770px;
}
.item_2fs > p{
	font-size:90%;
}
.item_2fs{
	width: 49%;
	margin: 10px 0;
}

.item_2fs img{
	width: 100%;
}
.item_2fs_t{
	color: #178fd4;
	font-weight: 200;
	font-size: 1.2rem!important;
}
.item_2fs_t a{
	text-decoration: none;
	color: #178fd4;
}

/*--------------------------------------- 
フレックスボックスで作成　770px幅　2列
 item_2f_s1  
sサイズに時に写真が一列なので　s1
---------------------------------------*/
#item_2f_s1{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 770px;
}
.item_2fs_s1 > p{
	font-size:90%;
}
.item_2fs_s1{
	width: 49%;
	margin: 10px 0;
}

.item_2fs_s1 img{
	width: 100%;
}
/*--------------------------------------- 
フレックスボックスで作成　770px幅　2列
 item_2f_s2 とは2列トップのt subのs
講師紹介で利用中

---------------------------------------*/
#item_2f_s2{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 770px;
}
.item_2fs_s2 > p{
	font-size:90%;
}
.item_2fs_s2{
	width: 49%;
	margin: 10px 0;
}

.item_2fs_s2 img{
	width: 100%;
}


/*--------------------------------------- 
  トップページ
  選ばれる理由などに使う　2列表示
  
  協議書をサポートなどに利用
---------------------------------------*/

.item2{
	background-color:#F5F1E5;
	background-repeat:repeat;
	width: 100%;
	height: auto;
}
.s_item2{
	width: 365px;
	height: 420px;
	margin: 8px 10px;
	display: block;
	float:left;
}
.s_item2 a:hover{
	opacity:0.8;
}

/*--------------------------------------- 
  トップページ
  社長の声をご紹介
---------------------------------------*/

.koe_box{
	width: 100%;
	height: 170px;
	display:block;
}
.koe_box01{
	width: 18%;
	height: 140px;
	margin: 20px 0;
	display: block;
	float:left;
}
.koe_box02{
	width: 76%;
	height: 140px;
	margin: 20px 0;
	float: left;
	background-image:url(../img/mesa_back.png);
	background-repeat:no-repeat;
}
.koe_box02 p{
	margin: 0 0 0 40px;
}
.koe_box01 a:hover{
	opacity:0.8;
}


/*--------------------------------------- 
トップページ　3つ並んでいる部分
---------------------------------------*/
.brand{
	background-color:#F5F1E5;
	background-repeat:repeat;
	width: 100%;
	height: auto;
}
.b_item{
	width: 360px;
	height:350px;
	margin: 8px 8px;
	display: block;
	float:left;

}
.b_item p{
	font-size:13px;
}
.b_item a:hover{
	opacity:0.7;
}
/*--------------------------------------- 
 買取りボタン領域
---------------------------------------*/
.kaitori{
	width:1000px;
	clear:both;
}
.kaitori01{
	float:left;
	margin:0 15px;
}
.kaitori01 a:hover{
	opacity:0.7;
}
/*--------------------------------------- 
 流れ部分
---------------------------------------*/
.nagare{
	background-image:url(../img/back_nagare.jpg);
	background-repeat:repeat;
	text-align:center;
}
.nagare a:hover{
	opacity:0.7;
	border:0;
}
.smaho{
	display:none; /*--大きい画面時は表示させない、スマホ時に表示する---*/
}

/*--------------------------------------- 
 スマホフッターボタン部分
---------------------------------------*/
.smaho_footer{
	max-width:414px;
	width: 100%;
	display: none;
	margin: 0 auto;
}
.smaho_footer a:hover{
	opacity:0.6;
}
.smaho_footer ul{
	display: table;
	margin:0;
	padding:0;
}
.smaho_footer li{
	list-style:none;
	display: table-cell;
	float:left;
	width:49%;
	padding: 0;
	font-size:11px;
	border: solid 1px #EEE;
}
.smaho_footer li a{
  display: block;
  line-height: 48px;
  padding: 0 10px;
  color: #000;
  text-decoration: none;
}
.smaho_footer li a:hover{
	background-color:#FFF4FF;
}
.smaho_footer li:nth-child(even) {
  border-left: none;
}
.smaho_footer li:nth-child(3){
 border-top: none;
 border-bottom: none;
}
.smaho_footer li:nth-child(4){
 border-top: none;
 border-bottom: none;
}

/*--------------------------------------- 

お客様の声エリア
---------------------------------------*/
.customer_box{
	background-color:#FEFBF6;
	width: 100%;
	clear:both;
}
.customer_box h3{
	font-size: 18px;
	line-height: 30px;
	color:#FF9999;
	padding: 10px 0 0 10px;
}
.customer_box p{
	padding: 10px 0 0 10px;
}


/*--------------------------------------- 

流れ エリア

---------------------------------------*/
.nagare_box{
	width:100%;

}
.t_box{
	display:block;
	width:60%;
	float:left;
	padding: 10px 10px;
}
.t_box h3{
	color:#FFAF3D;
	font-weight:bold;
}

.p_box{
	display:block;
	width: 33%;
	float:right;
	padding:0 10px 0 0;
}
.btn_kaitori01{
padding: 0 10px;
}

/*--------------------------------------- 
 よくある質問　 qa_box
---------------------------------------*/
.qa_box .btn_qa{
	width:42px;
	height:42px;
	padding: 0 10px;
}
/*--------------------------------------- 
 ブランドボックスエリア　 brand_box
---------------------------------------*/
.brand_box{
	width: 740px;
}
.brand_item{
	width:170px;
	height:230px;
	padding: 6px;
	float:left;
	display:block;
}
.brand_item p{
	font-size:12px;
	text-align:center;
	line-height:18px;
}
/*--------------------------------------- 
  topの中だよん
---------------------------------------*/
.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}

/*--------------------------------------- 
親要素の高さを算出する
---------------------------------------*/

.clearfix::after{
	content:'';
	display: block;
	clear:both;
}
.clear{
	clear:both; /*テキストの回り込みを防ぐために書く　トップページなどで使用*/
	height:1px;
}

/*--------------------------------------- 
ドローワーのメニュー部分
http://three-works.net/blog/coding/drawer-menu/

---------------------------------------*/

/*--フレックスボックスを使う時に記入---*/
.drawer,.burger,.burger,.line{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}


/* ハンバーガーアイコン */
.burger {
    width: 30px;
    height: 24px;
    position: relative;/* ここで決まる */
    display: flex;
     -webkit-display: flex;
	align-items: center;
    top: 30px;/*2023.06に修整*/
    right: 10px;/* アイコンの位置を調節右からの距離 */
    z-index: 2000;/* 値が大きいほど上 */
}
/* 真ん中の線 */
.burger .line {
    width: 100%;
    height: 3px;
    background: #444;
    -webkit-transition: 0.6s;
	transition: 0.6s;
}
/* 上の線 */
.burger::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    top: 0;
    right: 0;
    background: #444;
    -webkit-transition: 0.6s;
	transition: 0.6s;
}
/* 下の線 */
.burger::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    right: 0;
    background: #444;
    -webkit-transition: 0.6s;
	transition: 0.6s;
}

/*---- スライドして表示されるメニュー -----*/
/*navigation {
    width: 100%;/*--はみ出さないようにする--
    height: 100%;/*高さを算出して、スクロールできるようにする
	overflow:scroll;
    background: #fff;
	color: #000000;/*---- 黒い文字を指定 -----
    position:fixed;
    right: -130vw;/*---- 120にすると、右に少し表示される枠線が消える-120の場所にとどまっている -----
    -webkit-transition: 0.6s;
	transition: 0.6s;
	z-index: 1000;
	display:block;
}*/
.navigation {
    width: 100%;/*--はみ出さないようにする--*/
    height: 100%;/*高さを算出して、スクロールできるようにする*/
	overflow: unset;
    background: #fff;
	color: #000000;/*---- 黒い文字を指定 -----*/
    position:fixed;
    right: -130vw;/*---- 120にすると、右に少し表示される枠線が消える-120の場所にとどまっている -----*/
    -webkit-transition: 0.6s;/*フワット表示される*/
	transition: 0.6s;
	z-index: 1000;
	display:block;
	background-color: #FFFFFF;
}
.navigation p,.navigation h3{
	background-color: white;
}

/*----ボタンをクリックした後の場所を指定 かなり大事-----*/
.burger-active {
	top: 20px;
	right: 20px;
}
.burger-active::before {
   -webkit-transform: rotate(135deg);
   transform: rotate(135deg);
    top: 0;
    bottom: 0;
    margin: auto;
}
.burger-active::after {
	transform: rotate(135deg);
	-webkit-transform: rotate(-135deg);
    top: 0;
	bottom: 0;
    margin: auto;
}
.burger-active > .line {
    -webkit-transform: scale(0);
	transform: scale(0);
}
.nav-active {/*クリックすると、この位置に移動してくる */
    right: 0;/*右からあらわれる */
	top:0;/*位置を揃える */
}

.navigation ul{
	list-style:none;
	width: 100%;
	display: inline-block;
	z-index: 1;
	position: static;
	}

.navigation ul li{/*---子要素ですがドロワー内の全体に影響する--*/
	display: inline-block;
	width:100%;
	height: 50px;
	font-size: 12px;
	z-index: 1;
	position: relative;
}

#menu_ac li,#menu_ac li ul{
	position: relative;
	z-index: 1;
	}
#menu_ac li ul li a {
	display: inline-block;
	width: 100%;
	height: 50px;
}
#menu_a li{
	position: relative;
	z-index: 1;
}
.logo_smaho{/*一番目だけ枠線を消す */
	border: none !important;/*優先して、消す */
	height: 80px;
	padding: 5px 0 0 0;
}
	
.tel_btn{/*ラストの枠線を消す */
	border: none !important;
	height:180px;
	padding: 15px 0;
}
/*.navigation ul li:nth-of-type(10){/* 
	border: none;
	height:70px;
	padding: 15px 0;
}*/
.gnavi03 li >a{
	width:100%;
	height:50px;
	padding: 0 10px;
	line-height: 50px;
	text-decoration:none;
	color:#000000;
	display:block;
}
.logo_s{
	padding: 10px 15px;
	width:180px;
	height: 80px;
}
.logo_s a:hover{
	background-color:#FFF;
}
.navigation li a:hover{
	opacity:0.8;
	background-color:#F3F3F3;
	-webkit-taransition:.15s;/*ここが関係しているかも*/
	 taransition:.15s;
}

.navigation table{
	display: inline-block;
}
.navigation table td{
	padding: 0 0 0 20px;
}
/*.navigation table a{
	display: inline-table;
	width: 53%;
	height:47px;
	color:none;
	padding: 0;
}*/
.navigation table a:hover{
	opacity:0.7;
	background-color: #FFF;
}

/*--------------------------------------- 
アコーディオンナビゲーション　Jquery とcss3
https://maku77.github.io/web/menu/accordion.html　を利用してます
---------------------------------------*/
/* メニュー全体 */
@keyframes my-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* チェックボックスを押したときにどうなるかを指定*/
.menu {
	/*始めは見えない*/
  width: 100%;/*サイズを100%に変更*/
	padding: 0 1px;
}

.menu ul {
    /*display: none;  /* デフォルトで非表示 */
	font-size: 12px;
	line-height: 0;
}
.la01{/*ラベル部分*/
	display: block;
}
.accordion{/*チェックボックスを消す*/
	display: none;
	height: 0; /*高さを消す*/
	overflow: hidden;
}

/* 開いた状態のサブメニュー */
.menu input:checked + ul {
	font-size: 12px;
	height: 100%;
	line-height:1.0rem;
    padding: 0;
}
.menu ul > li{
	/*height: 50px;*/
	padding: 0 0 0 5px;
	background-color: white;
}
.menu li >a{
	width:100%;
	/*height:50px;*/
	padding: 0 35px;/*サブナビゲーション　左に余白を入れる */
	line-height: 50px;
	text-decoration:none;
	color:#000000;
}
/* 親項目　初めにボタンを押す部分に利用 */
.menu label {
	height: 50px;/*高さを合わせる*/
    /*display: block;*/
    margin: 0;
    padding: 18px 0 18px 10px;
    background: #FFFFFF;
	color:#000000;
    cursor: pointer;/*カーソルをポインターにする*/
	font-size: 12px;
	border-bottom: solid 1px #ccc;/* 下線の指定 */
	position: relative;
}
.menu label::before {/*arrowボタンの場所　右の十字*/
	content: "";/*文字を入れられるようにする*/
    display: block;
	lign-height: 50px;
	color:#666;
	font-size: 12px;
	position: absolute;
	right: 25px;/*右からの場所*/
	width: 13px;
	height: 13px;
	top: 50%;/*位置を調節する*/
	margin-top: -7px;
	background-image: url("../img/arrow02.gif");
	background-repeat: no-repeat;
}
.menu label .active {
	content: "";
    display: block;
	lign-height: 50px;
	color:#666;
	font-size: 12px;
	position: absolute;
	right: 25px;
	width: 13px;
	height: 13px;
	top: 50%;
	margin-top: -7px;
	background-image: url("../img/arrow03.gif");
	background-repeat: no-repeat;
}
.menu label a::before{
	content: "";
	position: relative;
	display: block;
	lign-height: 50px;
	cursor: pointer;
}
.menu label a{   /*何もないリンク部分*/
	color: black;
	text-decoration: none;
	display: block;/*幅が広がる*/
	height: 47px;
	width: 100%;
	padding: 16px 0 0;
	position: absolute;
	top:0;
}
.menu label :hover {
	background-color:#EEEEEE;/* マウスオーバーしたときの色 */
}
/*最初は非表示にしておく　全て非表示を書いておく*/
#links01,#links02,#links03,#links04,#links05,#links06,#links07,#links08,#links09{/*作ったら追加しよう*/
	display: none;
}
.ac02 li{/* .menu .acと書かなくてもよい */
border-bottom:dotted 1px #ccc;/* 下線をドットに変更*/
}
.ac02 li >a{
	position: relative;
	display: block;
	text-decoration: none;
	border-bottom: none;/* 下線はいらない*/
}
/*右向きの矢印部分の調節*/
.menu .ac02 li >a::before{
	display: block;
	content: "";
	position: absolute;
	top:50%;/*中央の位置に指定*/
	left: 20px;
	width: 4px;
	height: 4px;
	margin-top: -2px;/* 矢印のずれを修正　before afterは一緒にする */
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.accordion ul{/**/
    opacity: 0;/*数値が大きいほど不透明度が高くなります。表示されない*/
	/*transition: .5s;*/
	visibility: hidden;/*ここが大事 はじめは見えない*/
    /*transition: .2s;/*.5は遅すぎる*/
	height: 0;/*高さはない*/
}
/*.menu .ac02 a::after{
	display: block;
	content: "";
	position: absolute;
	top:50%;
	left: 20px;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}*/



/*--4つのボタン背景にarrowを入れない --
.menu .4btn a:link{
	border: none;
}
*/
/*--電話とメールボタン　サイズを調節している --*/
.tel_mail_btn{
	border: 0;/*最大の大きさを指定*/
	max-width: 380px;/*最大の大きさを指定*/
	width: 100%;
	margin: 0 auto;
}

/*--ナビゲーション内のボタン部分 --*/
.a_icon{/*アコーディオンメニュー内のアイコンという意味*/
	padding: 15px 0 5px 0;
	margin: 0 auto;
}

/*--------- ナビゲーション部分ここまで-------------*/

.toggle_switch {
  position: relative;/* 子要素の起点を指定 */
  cursor: pointer;
  padding: 5px 10px;
  border-top: dotted 1px #ccc;
}
.toggle_switch.open {
  border-bottom: dotted 1px #ccc;
}
.toggle_switch:hover {
  background-color:#E0E0E0;
}
.toggle_switch::after {
  content: "";/*文字は何もなし  */
  display: inline-block;
  width: 18px;
  height: 50px;
  background: url(../img/arrow_down.svg) no-repeat center center;
  background-size: contain;/*縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する*/
  position: absolute;/*  */
  top: 50%;/*上から50%位置に指定  */
  transform: translateY(-50%);/* 縦に-50％移動をする */
  right: 30px;
  transition: transform .2s;/* 0.2秒かけて */
}
.toggle_switch.open::after {
  transform: rotateZ(180deg);/* アイコンを反転させる180ド回転*/
  top: 46%;
}
.toggle_contents {
  display: none;
  padding: 5px 10px;
}

/*--------------------------------------- 
社長挨拶の部分　top
---------------------------------------*/
.message {/*- 起点を指定-*/
position:relative;
}

.message .f03{/*- 写真部分はフロートさせない-*/
float:none;
}


.message02{/*- 強制的にポジションをつけています-*/
width:auto;
float:none;
position:absolute;
left:50px;
top:50px;
}

/*--------------------------------------- 
社長挨拶の部分　sub
---------------------------------------*/
.message01 {/*- 起点を指定-*/
position:relative;
}

.message01 .f03{/*- 写真部分はフロートさせない-*/
float:none;
}


.message02a{/*- 強制的にポジションをつけています-*/
	position: absolute;
	width:auto;
	float:none;
	left:10px;
	top:20px;
}

/*--------------------------------------- 
 大きいサイズの時は見せない
---------------------------------------*/
.smaho_slider{
	display: none;
}
.web_slider{
	display:block;
}
.main_areas01{
	display:block;
}

/*--------------------------------------- 
 画像がフェードインするスクリプト
 http://skill-stock.hokoweb.com/skill/31/
---------------------------------------*/

.fade-up {
  transition: opacity 0.7s;
  -moz-transition: opacity 0.7s;
  -webkit-transition: opacity 0.7s;
  -o-transition: opacity 0.7s;
  transition: transform 0.7s;
  -moz-transition: transform 0.7s;
  -webkit-transition: transform 0.7s;
  -o-transition: transform 0.7s;
}
/*--------------------------------------- 
 tlanselate テスト
---------------------------------------*/
.kaiten_y{
	transition-duration: 2s; 
}
.kaiten_y:hover{
	transform:rotateY(180deg) scale(1,0.8); /*y方向に回転して、大きくなる*/
}

/*--------------------------------------- 
 合格実績のテーブル
---------------------------------------*/
.gokaku{
	width: 100%;
	border: 0;
}
.gokaku td{
	border-bottom: dotted 1px #4F4F4F;
}
.gokaku td p{
	font-size: 16px!important;
	line-height: 30px;
}
.gname{
	width: 50%;
}
.gkazu{
	width: 50%;
	text-align: center;
	color: #FF0004;
}

/*--------------------------------------- 
 フォーム
---------------------------------------*/

input[type="text"]:focus {
  box-shadow: 0 0 1px 0 rgba(255,153,0,1);
  outline: 0;
}
label {
  /* すべてのラベルを同じサイズにして、きちんと揃える */
  display: flex;
  text-align: left;
}
.lt{
	margin: 0;
	padding: 0;
}
.form_box{
	display: flex;
	display: row;
	flex-wrap:wrap;
	height: 70px;/*高さの設定*/
}
.form_box P{
	margin: 0 10px 0 0;
	padding: 5px 0;
}
.fbox01 {
	display: row;
	padding: 0 10px 0 0;
	height: 48px;
}
.form_box input, .form_box textarea{
	font: 1em sans-serif;
	width: 360px;
	height: 48px;/*高さの設定*/
    box-sizing: border-box;
    border: 1px solid #999;
	text-indent: 5px;
}

/*--------------------------------------- 

---------------------------------------*/
.form_box02{
	display: flex;
	display: row;
	flex-wrap:wrap;
	height: 70px;
}
.form_box02 P{
	margin: 0 10px 0 0;
	padding: 5px 0;
}
.fbox02 {
	display: row;
	padding: 0 10px 0 0;
}
.form_box02 input, .form_box02 textarea{
	font: 1em sans-serif;
	width: 360px;
	height: 48px;/*高さの設定*/
    box-sizing: border-box;
    border: 1px solid #999;
	text-indent: 5px;
}


input:focus, textarea:focus {
  /* アクティブな要素を少し強調する */
  border-color: #000;
}

.form_box03{
	width: 300px;
	height: 60px;
}

/*--------------------------------------- 
チェックボックスの場所 01はなく、02からスタートしています。
---------------------------------------*/
.radio02{
	display: flex;
	height: 50px;
}
.radio02>label{
	font-size: 15px;
	padding: 0 18px 0 0;
}
.radio02-input{
  display: none;
}
.radio02-input + label{
  padding-left: 30px;
  position:relative;
  margin-right: 20px;
}

.radio02-input + label::before{/*円の外側*/
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 50%;
}
.radio02-input:checked + label{
  color: #009a9a;
}
.radio02-input:checked + label::after{/*円の内側*/
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 11px;
  height: 11px;
  background: #009a9a;
  border-radius: 50%;
}
.fbox03{/*-- option属性　学年　希望校舎など--*/
	height: 48px;
	width:100px;
}
.fbox03 >option{
	text-align: center;
}

.fbox04{/*--少し大きいサイズ--*/
	height:48px;
	width:250px;	
}
.fbox04 >option{
	text-align: center;
}
/*------- チェックボックスの部分　------------------*/
.checkbox01{
   display: flex;
   flex-wrap:wrap;
　　padding: 0 0 10px 0;
}
.checkbox01>label{
	font-size: 15px;
	height: auto;
	padding: 0 15px 0 0;
	margin: 0 0 10px 0;/*調節分*/
}
.checkbox01-input{
  display: none;
}
.checkbox01-parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkbox01-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 1px;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox01-input:checked + .checkbox01-parts{
  color: #009a9a;
}
.checkbox01-input:checked + .checkbox01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 6px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}

textarea{
    width: 90%;
    height: 200px;
	padding: 10px 10px;
	line-height: 150%;
}

input#submit_button {/*--送信ボタン --*/
    padding: 15px 40px;
    font-size: 1.2em;
    background-color:#FB6566;/*背景色を黒に指定*/
    color: #fff;/*文字色を白に指定*/
	border-style: none; /*submitボタンのを枠を非表示にする*/
	border-radius: 10px; /*角丸*/
	-webkit-border-radius: 10px; /*角丸*/
     -webkit-transition: all 0.5s;
     transition: all 0.5s;/*アニメーション*/
}
input#submit_button:hover{
	background-color:#FD9B9B;
}

.norton{
	width: 115px;
	height: 82px;
	text-align: center;
	margin: 0 auto;
}

/*-------- iOSでのデフォルトスタイルをリセット　ボタンのcssをリセットさせます-----------*/
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}


/*-----------ボタン部分----------------------*/
.button {
  position: relative;
  display: inline-block;
  padding: .5rem 4rem;
  color:#CCCCCC;
  border: 1px solid #CCCCCC;
  background-color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  transition: .3s;
	-webkit-transition: .3s;
}
.button:hover ,.button a:visited{
  color: #2F2F2F;
}

.button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #fff;
-webkit-transform-origin: right top;
  transform-origin: right top;
	-webkit-transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.button:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
/*-----------ボタン部分 usui緑色----------------------*/
.btn_3retu{
	display: flex;
	flex-direction: row;
	 justify-content: space-between;
}
.btn_3a{
	width: 33%;
}


/*************************ここから************************/
.btn_4retu{
	display: flex;
	flex-direction: row;
	 justify-content: space-between;
}
.btn_4a{
	width: 25%;
}




/*************************ここまで************************/


.button {
  position: relative;
  display: inline-block;
  padding: .5rem 2rem;
  color:#777777;
  border: 1px solid #CCCCCC;
  background-color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  transition: .3s;
	-webkit-transition: .3s;
}
.button:hover ,.button a:visited{
  color: #FFFFFF;/*文字の色　白がいい*/
}

.button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #F0181B;/*この色に変化する*/
-webkit-transform-origin: right top;
  transform-origin: right top;
	-webkit-transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.button:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}




.midori {
	color: #92DD30;
	font-weight: bold;
}
.midori02{
	color:#3cb200;
}
.midori03{
	color:#259679;
}
.osirase {
    border: #88CD90 solid 2px;
    -webkit-border-radius: 12;
    -moz-border-radius: 12;
    border-radius: 12px;
    background: #FFFFFF;
	padding: 20px 20px 20px;
}

.syuryo {
    border: #599FFF solid 2px;
    -webkit-border-radius: 12;
    -moz-border-radius: 12;
    border-radius: 12px;
    background: #FFFFFF;
	padding: auto;
}

.table62{
	width: 100%;
    margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table62 td, .table6 th{
	margin: 0;
	border: 1px solid #000000;
}
.table62 p{
   padding: 0;
   font-size: 12px;
   text-align: center;
}





.jlscontainer{

	width: 94%;
	margin: 1.5em auto;
	padding: px;
}

.jlsclearfix:after{
	content: "";
	clear: both;
	display: block;
}

.jlscontainer　img {
	width:100%;
}

.jlshalf_l{
	width: 50%;
	float: left;
}


.blink {
	-webkit-animation: blink 0.5s ease infinite;
	animation: blink 0.5s ease infinite;
}
@-webkit-keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


.jlshalf_r{
	width: 50%;
	float: right;
}
/*------------matome エリア--------------------------*/

.matome_area{
	border: solid 1px #70BDCB;
	width: 100%;	
}

.matome_area table{
	width: 100%;
	padding: 6px;
}

.matome_area p{
	padding: 5px 0 5px 1rem;
}
/*------------matome エリア　ここまで-------------------*/

/*お悩みのブルーボックス部分*/
.nayami_area{
    width: 100%;
    padding: 10px 10px;
    border: solid 1px #70BDCB;
}
.nayami_area a{
	text-decoration: none;
	font-weight: 500;
}
.nayami_area a:link,.nayami_area a:visited{
	color: #3754e4;
	font-weight: 500;
}

/*--------------------------------------- 
ページトップに戻るの jquery部分
---------------------------------------*/

.pagetop {
    display: none;
    position: fixed;/*場所を固定する*/
    bottom: 70px;/*位置の調節*/
    right: 100px;
}
.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 10px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
    background-color: #b2d1fb;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:10px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
	cursor: pointer;
}

/*---------------------------------------------------------

各ページのmain部分

-----------------------------------------------------*/
.main_ph_area{
	width: 100%;
	text-align: center;
}
.main_ph_area img{
	max-width: 100%;
}
.main_photo_lp{/*ランディングページ用*/
	clear: both;
	width: 100%;
	background-image: url("../img/back/back_lp.jpg");
	height: 80vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}
.main_photo_guide{/*ガイドページ専用*/
	clear: both;
	width: 100%;
	background-image: url("../img/back/back_lp.jpg");
	height: 60vh;/*狭いほうが良い*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}
.main_photo_service{/*コース紹介*/
	clear: both;
	width: 100%;
	background-image: url("../img/back/service_back.jpg");
	height: 60vh;/*狭いほうが良い*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}

.main_photo_kanri{
		width: 100%;
	background-image: url("../img/back_img/back13.jpg");
	height: 60vh;/*60vh*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}

.main_photo_service01{
	width: 100%;
	background-image: url("../img/back_img/back1a.jpg");
	height: 60vh;/*60vh*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}
.main_photo_contact{
	width: 100%;
	background-image: url("../img/back_img/city.jpg");
	height: 50vh;/*60vh*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}
.main_photo_staff{
	width: 100%;
	background-image: url("../img/back_img/back_staff.jpg");
	height: 80vh;/*人が写っている場合は、あえて100%で行くのもあり*/
	background-position:center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}
.main_photo_voice{
	width: 100%;
	background-image: url("../img/back/back_voice.jpg");
	height: 60vh;/*60vh*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-bottom: 30px;
}
.main_photo_customer{/*サービス*/
		width: 100%;
	background-image: url("../img/back/customer.jpg");
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}
.main_photo_hazimete{
	width: 100%;
	background-image: url("../img/back/back01.jpg");
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}
.main_photo_rinen{
	width: 100%;
	background-image: url("../img/back/back_lp02.jpg");
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}
.main_photo_teacher{
	width: 100%;
	background-image: url("../img/back/back04.jpg");
	/*https://www.photo-ac.com/main/detail/23696694*/
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}
.main_photo_gokaku{
	width: 100%;
	background-image: url("../img/back/back06.jpg");
	/*https://www.photo-ac.com/main/detail/23696694*/
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}
.main_photo_qa{
	width: 100%;
	background-image: url("../img/back/back05.jpg");
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}
.main_photo_kyositu{
	width: 100%;
	background-image: url("../img/back/back07.jpg");
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}
.main_photo_koshu_summer{/*夏期講習*/
	clear: both;
	width: 100%;
	background-image: url("../img/back/koshu_summer.jpg");
	height: 60vh;/*狭いほうが良い*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 10px 0;/*隙間づくり*/
}

/*-------------------------------------------

タイトルの部分
場所：サブページ共通

--------------------------------------------*/
.main_title_area{/*大枠*/
	 width: 100%;
    height: auto;
    padding: 15% 0 0 22%;
}
.main_title_area02{/*ガイドページで利用　大枠*/
	 width: 100%;
    height: auto;
    padding: 7% 0 0 22%;
}
.main_title_s{/*ガイドページ*/
    font-size: 1.3rem;
    line-height: 2.4rem;
    color: white;
    letter-spacing: 0.1rem;
    text-shadow: 2px 2px 3px #716a6a;
}
.main_title_b{/*ガイドページ*/
	    font-size: 2.3rem;
    font-weight: 450;
    color: white;
    line-height: 4.5rem;
    text-shadow: 2px 2px 3px #716a6a;
}

.main_title_e {/*小さい文字　英語部分*/
    font-size: 1.3rem;
    line-height: 2.4rem;
    color: white;
    letter-spacing: 0.1rem;
    text-shadow: 2px 2px 3px #716a6a;
}

.main_title_sub{/*文字の大きさ*/
    font-size: 2.3rem;
    font-weight: 450;
    color: white;
    line-height: 4.5rem;
    text-shadow: 2px 2px 3px #716a6a;
}

/*-------------------------------------------

naviの部分
場所：全部のページに共通

--------------------------------------------*/
.btn01 a {/*大本のボックス*/
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	height: 60px;
	font-size: 0.8rem;
	font-weight: 400;
	text-decoration: none;
	transition: 0.3s;
	background: #0cb59b;
	color: white;/*文字の色*/
	padding: 0 0 0 15px;
}

.btn01 a:hover {
	color: #f2f2f2;/*マウスをのせた時の色*/
}

/*コンテンツボタンの部分*/
.btn_contents a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color:white;/*矢印の色*/
}

.btn_contents a:hover {
	opacity: 0.8;
	border-color: #333;
}

.btn_contents a:hover::after {
	border-color: #f2f2f2 #f2f2f2 transparent transparent;
}
/*問い合わせ部分*/
.btn02 a {/*大本のボックス*/
	display: flex;
	/*justify-content: center;/*水平方向*/
	align-items: center;
	position: relative;
	width: 100%;
	height: 60px;
	font-size: 0.8rem;
	font-weight: 400;
	text-decoration: none;
	transition: 0.3s;
	/*background:#75D1C3;*/
	color: black;
	border-bottom:#989898 dotted 1px;
}

.btn02 a:hover {
	color: #333;/*文字の色*/
}
.btn_contents02 a{/*白の文字部分に*/
	padding: 0 0 0 10px;
}

.btn_contents02 a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: rotate(45deg) translateY(-50%);
	width: 6px;
	height: 6px;
	border-width: 2px 2px 0 0;
	border-style: solid;	
}

.btn_contents02 a:hover {
	opacity: 0.8;
	border-color: #333;
}

.btn_contents02 a:hover::after {
	border-color: #333 #333 transparent transparent;
}

.navi_cover{/*枠線の部分*/
	border:solid 5px #ebebeb;
}

/*お問い合わせ*/
.btn03 a {/*大本のボックス*/
	display: flex;
	/*justify-content: center;*/
	align-items: center;
	position: relative;
	width: 100%;
	height: 50px;
	font-size: 0.8rem;
	font-weight: 400;
	text-decoration: none;
	transition: 0.3s;
	background: #0cb59b;
	color: white;/*文字の色*/
	padding: 0 0 0 15px;

}

.btn03 a:hover {
	color: #f2f2f2;/*マウスをのせた時の色*/
}

/*--------------ログイン部分の制御-------------------------*/
.main_login01{
	margin: 0 auto;
	position: relative;
	width: 380px;
    height: 1000px; /*高さこんなにいるか？*/
}
.login_area{ /*ログインエリアの制御*/
	margin-left:-180px;/*戻す*/
	position: absolute;
	left: 50%;
}

/*ログイン時の調節*/
.logo_h3{
	padding:12px 0 42px 80px !important;/*ロゴの部分に余白を入れています*/
}
.login_btn_t01{/*ログインボタンの調節用*/
	padding: 0 0 0 5px !important;
}
.login_area01{/*背景を白くして、薄くする*/
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 250px 0 0 0;
	/*background:rgba(255,255,255,0.8);*/
}
.login_area01 p{
	opacity: 1;
}

/*------------------------------------------------ 

トップのタイトルエリアLP

----------------------------------------------------*/
#main_title_areas{/*lpで利用する*/
	width: 100%;
	max-width: 1000px;
	height: 700px;/*このサイズが大事*/
	margin: 0 auto;
	/*font-family: "見出ゴMB31", sans-serif;*/
	font-family: "教科書ICA R","Times New Roman","A-OTF A1 Mincho Std","My A1 Mincho","A1 Mincho",YuMincho,"Yu Mincho",yu-mincho-pr6,"Hiragino Mincho ProN",serif;
	letter-spacing: 3px;
}
.main_title_areas01{/*背景を白くして、薄くする*/
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 30px 0 0 300px;/*位置を調節*/
	/*background:rgba(255,255,255,0.8);*/
}
.main_title_areas01 p{
	opacity: 1;
}
.main_title01{/*大きい文字の部分*/
	font-size: 2.0rem;
	font-weight: 900;
	/*text-align: center;*/
	color:black;/*文字の色*/
	line-height: 2.6rem;
	/*text-shadow:2px 2px 3px #716a6a;*/
}
.main_title_e01{/*lp専用*/
	font-size: 1.0rem;
	line-height: 2.2rem;/*調節*/
	color:black;
	letter-spacing:0.1rem;/*文字の間隔*/
	/*text-shadow:2px 2px 3px #716a6a;*/
	font-weight: 600;
}
.main_title01c{/*対象年齢の部分*/
	padding: 10px 0 5px 0;
}

/*LPここまで*/
/*------------------------------------------------ 

トップのタイトルエリアNEXT

----------------------------------------------------*/
#main_title_areas_next{
		width: 100%;
	max-width: 1000px;
	height: 700px;/*このサイズが大事*/
	margin: 0 auto;
	/*font-family: "見出ゴMB31", sans-serif;*/
	font-family: "教科書ICA R","Times New Roman","A-OTF A1 Mincho Std","My A1 Mincho","A1 Mincho",YuMincho,"Yu Mincho",yu-mincho-pr6,"Hiragino Mincho ProN",serif;
	letter-spacing: 3px;

}
#main_title_areas02{
	width: 100%;
	max-width: 1000px;
	height: 700px;/*このサイズが大事*/
	margin: 0 auto;
	/*font-family: "見出ゴMB31", sans-serif;*/
	font-family: "教科書ICA R","Times New Roman","A-OTF A1 Mincho Std","My A1 Mincho","A1 Mincho",YuMincho,"Yu Mincho",yu-mincho-pr6,"Hiragino Mincho ProN",serif;
	letter-spacing: 3px;
}
.main_title_areas02{/*背景を白くして、薄くする*/
	width: 1000px;
	height: auto;
	margin: 0 auto;
	padding: 20px 0 0 0;/*位置を調節*/
	/*background:rgba(255,255,255,0.8);*/
}


/*-----------------------------------------------------------------------------------*/
#main_login02{
	width: 100%;
	max-width: 1000px;
	height: 750px;/*このサイズが大事*/
	margin: 0 auto;
	font-family: "教科書ICA R","Times New Roman","A-OTF A1 Mincho Std","My A1 Mincho","A1 Mincho",YuMincho,"Yu Mincho",yu-mincho-pr6,"Hiragino Mincho ProN",serif;
}
.main_title{
	font-size: 2.3rem;
	font-weight: 450;
	/*text-align: center;*/
	color: white;
	line-height: 4.5rem;
	text-shadow:2px 2px 3px #716a6a;
}
.main_title_e{/*英語の部分*/
	font-size: 1.3rem;
	line-height: 2.4rem;/*調節*/
	color: white;
	letter-spacing:0.1rem;/*文字の間隔*/
	text-shadow:2px 2px 3px #716a6a;
}
.main_title01a{/*大きい文字の部分*/
	font-size: 1.8rem;
	color:black;/*文字の色*/
	line-height: 7.0rem;
}
.main_title01b{/*pointエリア*/
	line-height:3.5rem;
}
/*------------------------------------------------------------

アニメーション

----------------------------------------------------------------*/
.sa {
  opacity: 0;/**/
  transition: all .6s ease-out;/*.8*/
}
 
.sa.show {/*初期状態に戻る*/
  opacity: 1;
  transform: none;
}
 
.sa--lr {
  transform: translate(-100px, 0);/*左から右え*/
}
 
.sa--rl {
  transform: translate(100px, 0);/*右から左に*/
}
 
.sa--up {
  transform: translate(0, 20px);/*下から上に*/
}
 
.sa--down {
  transform: translate(0, -100px);/*上から下に*/
}
 
.sa--scaleUp {
  transform: scale(.5);
}
 
.sa--scaleDown {
  transform: scale(1.5);
}
 
.sa--rotateL {
  transform: rotate(180deg);
}
 
.sa--rotateR {
  transform: rotate(-180deg);
}
/*------------------------------------------------------------

左から右に画像が表示されていく

------------------------------------------------------------*/
.fadein {
transform: translate(0, 30px);/*下Y方向に30pxずらしている*/	
  opacity : 0;
  transition : all 1s;
}
.fadein.active{/*ここを追加する*/
  opacity : 1;
	bottom: 0;
	transform: translate(0, 0);/*０の位置に戻す*/
}

.fadein02 {
transform: translate(0, 30px);/*下Y方向に30pxずらしている*/	
  opacity : 0;
  transition : all 1s;
}
.fadein02.active{/*ここを追加する*/
  opacity : 1;
	bottom: 0;
	transform: translate(0, 0);/*０の位置に戻す*/
}

/*--------------------------------------- 
  画像アニメーション

---------------------------------------*/
.img-wrap{
  overflow: hidden;
  position: relative;
}
.img-wrapR {
  overflow: hidden;
  position: relative;
}

.img-wrap:before {
	/*cubic-bezierが速度変化*/
  animation: img-wrap 3s cubic-bezier(.4, 0, .2, 1) forwards;/*1秒だったが*/
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.img-wrapR:before{
  animation: img-wrapR 1s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}


@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}
@keyframes img-wrapR {
  100% {
	  /*translateX(X方向の移動距離)*/
    transform: translateX(-100%);
  }
}


.img-animation {
  animation: img-opacity 1s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}
.img-animationR{
  animation: img-opacityR 1s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  position: relative;
}


.img-animation:before {
  animation: img-animation 1s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.img-animationR:before{
  animation: img-animationR 1s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-opacity {
  0% {/*スタートは透明*/
    opacity: 0;
  }
}
@keyframes img-opacityR {
  0% {/*スタートは透明*/
    opacity: 0;
  }
}

@keyframes img-animation {
  100% {
    transform: translateX(100%);/*-100%で右から出てくる*/
  }
}
@keyframes img-animationR {
  100% {/*アニメーション終了時　-100%に移動＝右から左へ*/
    transform: translateX(-100%);/*-100%で右から出てくる*/
  }
}
/*--------------------------------------- 
  
文字のスライドアニメーション

---------------------------------------*/
.Headline{
  animation: SlideIn 1.6s;
}
@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/*-----------------------------------------------
悩みのエリア
-------------------------------------------------*/

.contents01_nayami_area{
	width: 1300px;
	margin: 0 auto;
	padding: 20px 0 0 0;
}
.contents01_nayami_area img{
	max-width: 100%;
}
.ct_n01{
	font-size: 1.0rem;
	text-align: center;
	letter-spacing: 2px;
}
.ct_n02{
	font-size: 1.3rem;
	padding: 10px 0 30px 0;
	text-align: center;
}


/*-----------------------------------------------
解決エリア
-------------------------------------------------*/
.solution_area_back{
	background-color:#ddf6fd;/*薄目の色にしておく*/
	width: 100%;
	height: auto;
	padding-top:50px;/*隙間を作る*/ 
}
.solution_area{
	max-width: 1200px;
	width: 100%;
	background-color: white;
	margin: 0 auto;/*中央よせ*/
	padding: 50px;
position: relative;
	 z-index: 1;
}
.center_b01{/*タイトル部分*/
	font-size: 1.5rem;
	text-align: center;
	padding: 10px 0 30px 0;
	letter-spacing: 2px;
}
.center_s01{
	text-align: center;
}
.center_a01{/*タイトルの上の部分*/
	text-align: center;
	line-height: 3.4em;
}
.solution_area02{
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;/*中央よせ*/
	padding: 50px;
}
.osusume{
    z-index: -1;
    position: absolute;
    right: -10px;
	bottom:-10px;
}
/*-----------------------------------------------

背景の部分

-------------------------------------------------*/
.solution_area03_back{
	background-color:#ddf6fd;/*薄目の色にしておく*/
	width: 100%;
	height: auto;
	padding:50px 0;/*隙間を作る*/ 
}
.solution_area03{
	width: 1200px;
	background-color: white;
	margin: 0 auto;/*中央よせ*/
	padding: 0 50px 30px 50px;
	z-index: 1;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;/*中央ぞろえ*/
}
.solution_area03_block{
	width: 50%;
	display: flex;
	margin: 50px 0 0 0;/*下にスペースを入れる*/
}
.sa03_ph{/*写真の部分*/
	width: 45%;
}
.sa03_ph img{
	width: 100%;
}
.sa03_txt{
	width: 55%;
	padding: 0 30px 0 20px;
}
.sa03_blue{/*タイトルの色*/
	color: #31b4d9;
	font-weight: 600;
}
/*-----------------------------------------

場所：トップなど

------------------------------------------*/
.solution_area04_back{
	width: 100%;
	margin-top: 50px;
}
.solution_area04{
	max-width: 1200px;
	width: 100%;
	/*background-color: white;*/
	margin: 0 auto;/*中央よせ*/
	padding: 0 50px 30px 50px;
	z-index: 1;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;/*中央ぞろえ*/
}
.solution_area04_sub{
	background-color: white;
	width: 47%;
	margin: 30px 0 0 0;/*下にスペースを入れる*/
	padding: 0px 0 30px 0;/*文字の間隔を綺麗にする*/
}
.solution_area04_sub img{
	width: 100%;
}
.sa04_txt{
	text-align: center;
	font-weight: 500;
	letter-spacing: 1px;
}
.sa04_txt02a{/*タイトル部分*/
	margin: 0 15px;
	line-height: 3.1rem;
}
.sa04_txt02{
	margin: 0 15px;
}
.sa04_blue{/*タイトルの色*/
	color:#2e5ef7;
	font-weight: 600;
}
.sa04_blue02{/*タイトルの色*/
	color:#2e5ef7;
	font-weight: 500;
}

/*------------------------------------------

ながれエリア
場所：next
-------------------------------------------*/
.nagare_area_back{
	background-color:#ddf6fd;/*薄目の色にしておく*/
	width: 100%;
	height: auto;
	padding:50px 0;/*上下に隙間を作る*/ 
}
.nagare_area{
	width: 1200px;
	background-color: white;
	margin: 0 auto;/*中央よせ*/
	padding: 0 50px 30px 50px;
	z-index: 1;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;/*中央ぞろえ*/
}
.na_ph{
	width: 50%;
	padding: 0 0 0 40px;
}
.na_ph img{
	max-width: 100%;
}
.na_txt{
	width: 50%;
	padding: 60px 20px 0 20px;
}
.triangle{/*矢印部分*/
	width: 0;
	height: 0;
border-style: solid;
border-width: 80px 125px 0 125px;/*左右の高さを合わせる*/
border-color: #FFFFFF transparent transparent transparent;/*白の矢印*/
	text-align: center;
	margin-bottom: 50px;
	
}
.triangle02{
	  width: 50px;
  height: 50px;
  background-color: #E91E63;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

/*------------------------------------------
3つの画像が並んでいるエリア スマホだと1列に並ぶ
--------------------------------------------*/
.three_area{
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
	
}
.three_area01{
	width:30%;
	margin: 0 0 20px 0;
	/*background-color: white;*/
}
.three_area01 img{
	max-width: 100%;
	width: 100%;
}
.three_area01 p{
	width: 100%;
	line-height: 2.0rem;
}
/*ここからマンション実績で使う*/
.three_area_02{
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
}

.three_area02{/*マンション販売エリア用*/
	width: 31%;
	margin: 0 0 40px 0;
}
.three_area02 img{
	width: 100%;
}
.center_b02{
	font-size: 1.5rem;
	text-align: center;
	padding-bottom: 55px;/*下に空きを作る*/
}
/*バナー*/
.btxt_area01{
	background-color:#0082d2;
	height: 100px;
	text-align: center;
	padding: 5px 0;
	margin: 50px 0;/*上下に隙間を作る*/
}
/*-------------------------------------

夏期講習の説明エリア
用途：
場所：https://usuigakuen.co.jp/pisajuku/next/koshu/2023/
---------------------------------------*/
.concept_area{
	max-width: 1150px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap:wrap;
	margin-top: 100px;
	margin-bottom: 100px;
}
.concept_area_sub{
	max-width: 1150px;
	width: 100%;
	margin: 0 auto;
	padding: 15px;
}
.btxt_area03a{
	background-color:#0082d2;
	height: 150px;
	text-align: center;
	margin: 50px 0 0 0;/*上だけに隙間*/
}
.btxt01a{/*帯の上文字部分*/
	color: white;
	font-size: 1.2rem;
	letter-spacing:2px;
	padding:30px 0 0 0;/*文字の上に余白*/
}
.btxt01b{/*帯の下文字部分*/
	color: white;
	font-size: 1.8rem;
	letter-spacing:2px;
	padding:10px 0 0 0;/*文字の上に余白*/
}

/*-------------------------------------

メッセージエリア
用途：社長の挨拶、スタッフ挨拶

---------------------------------------*/
.message_area{
	width: 1300px;
	margin: 0 auto;
	display: flex;
	flex-wrap:wrap;
	margin-top: 100px;
	margin-bottom: 100px;
}
.me_t{/*テキストエリア*/
	width: 50%;
	padding: 0 50px 0 0;
}
.me_p{/*写真エリア*/
	width: 50%;
}
.me_p img{
	width: 100%;
}
.center01{
	text-align: center;
}
/*-------------------------------------

メッセージエリア
用途：社長の挨拶、スタッフ挨拶

---------------------------------------*/
/*バナー*/
.btxt_area03{
	background-color:#0082d2;
	height: 100px;
	text-align: center;
	margin: 50px 0 0 0;/*上だけに隙間*/
}
.btxt_a03{
	text-align: center;
}
.btxt01{/*帯の部分*/
	color: white;
	font-size: 1.35rem;
	letter-spacing:2px;
	padding:30px 0 0 0;/*文字の上に余白*/
}
.point_area_back{/*背景エリア*/
	background-color: #bae5f0;/*背景の色*/
	width: 100%;
	padding: 100px 0;/*青の部分を作る*/
}
.point_area{/*内側*/
	width: 1300px;
	margin: 0 auto;
	background-color: white;
	padding-top:80px; 
}

.point_areas{
	width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	padding: 30px 0;
}
.pa_p{
	width: 30%;
}
.pa_t{
	width: 70%;
	padding: 15px 0 15px 50px;
}
.pa_p img{
	width: 100%;
}
.point_area hr{
	width: 80%;
}
/*-------------------------------------

用途：nextページに利用

---------------------------------------*/
.point_area02{/*内側*/
	width: 1300px;
	margin: 0 auto;
	background-color: white;
	/*margin-top:60px;*/
	/*text-align: center;*/
}
.pa_p02{/*ictの文章部分　画像で作成*/
	text-align: center;
	padding: 30px 0 0 0;
}
.pa_p02 img{
	max-width: 100%;
}
.pa_p03{
	text-align: center;
}
.pa_i01{/*imag部分*/
	padding-top:60px; 
	text-align: center;
}
.pa_i01 img{
	max-width: 100%;
}
.point_area02 img{
	/*max-width: 100%;*/
}
/*コンセプトの文章部分*/
.concept_message{/*反転学習*/
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	padding:15px;
	margin-bottom: 30px;
}

/*-------------------------------------

用途：夏期講習　4つの特徴

---------------------------------------*/
.point_area04{/*内側のみ*/
	max-width: 1050px;/*微妙なサイズがきれい*/
	width: 100%;
	margin: 0 auto;
	background-color: white;
	margin-top:60px;
	margin-bottom: 60px;
	/*text-align: center;*/
}
.point_area_oya{
	width: 100%;
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;/*折り返しあり*/
}
.point_area_sub{
	width: 48%;/*2つに横並び*/
	margin-bottom: 40px;
}
.point_area_sub img{
	width: 100%;
}
.yane{
	text-align: center;
	margin: 0;
	padding: 0;
}
.txt_big_blue{/*4の文字を大きくする*/
	font-size: 2.0rem;
	color: #0168b7;/*青色*/
}
.txt_big_blue02{/*4の文字を大きくする*/
	font-size: 1.4rem;
	color: #0168b7;/*青色*/
}
.pa_tyousetu{/*paポイントエリア　した文字の調節*/
	margin: 10px 0 50px 0;
	text-align: center;
}
.blue_summer{/*見出しの色*/
	color: #0168b7;
}
/*-------------------------------------

メッセージエリア
用途：pisa塾について

---------------------------------------*/
.point_areas01{
	width: 1300px;
	margin: 0 auto;
	padding: 50px 0 50px 0;
}
.hosei01{
	/*width: 270px;*/
	/*height: 200px;*/
	margin: 0 auto;/*画像をセンターにする*/
}
/*-------------------------------------

ナンバーエリア

---------------------------------------*/
.number_area_back{
	width: 100%;
	background-color: #F8F8F8;
	padding: 60px 0;/*タイトルと文字を離す*/
}
.number_area{
	width: 1200px;
	margin: 0 auto;
	padding: 80px 0;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.number_area01{
	width: 48%;
	background-color: white;
	border-radius: 10px;
	padding: 0 0 0 15px;
}
.number_area02{
	width: 48%; 
	background-color: white;
	border-radius: 10px;
	padding: 0 0 0 15px;
}
.number_area03{/*ブロックの大きさを可変にしておく*/
	width: 48%; 
	background-color: white;
	border-radius: 10px;
	margin-top:80px;/*隙間づくり*/ 
	padding: 0 0 0 30px;
}
.cna3{
	padding: 30px 0 0 0;/*調節用*/
}
.cna4{
	color: #787878;
	font-size: 0.8rem;
}
.number_area04{/*ブロックの大きさを可変にしておく*/
	width: 48%; 
	background-color: white;
	border-radius: 10px;
	margin-top:80px; 
	padding: 0 0 0 30px;
}
.number_area01 img{
	max-width: 100%;
}
.number_area02 img{
	max-width: 100%;
}
.number_area03 img{
	max-width: 100%;
}
.number_area04 img{
	max-width: 100%;
}

.wakumidasi01{
	 padding: 0.8rem 2rem;
	background: #E72E5C;/*帯の色*/
	width: 270px;
	color: white;
	margin: -20px 15px;
}
.t01{
	padding: 50px 0 0 10px;
}
.t02{/*ここで調節する*/
	padding: 40px 0 0 40px;
}
.ct01{
	color:#E72E5C;
	text-align: center;
	font-size: 1.5rem;
	line-height: 3.2rem;/*隙間のサイズ*/
}
/*-------------------------------------
マップ部分
場所：LP
---------------------------------------*/
.map_area{
	width: 1200px;
	margin: 0 auto;
	padding: 30px 0;
}
.ct_ma01 img{
	width: 100%;
	height: auto;
}
/*-------------------------------------
合格の数エリア
場所：LP
赤 #E72E5C
緑　#ABCD05
　
---------------------------------------*/
.gokaku_score{
	width: 1200px;
	margin: 0 auto;
}
.ct_g01{
	text-align: center;
	padding: 20px 0;
	letter-spacing: 2px;
}
.wakum_name{
	width:60%;
	padding: 0.8rem 2rem;
	background: #E72E5C;/*帯の色*/
	color: white;
	text-align: center;
	margin: 0 auto;
	letter-spacing: 3px;
}
.center_wn{
	text-align: center;
	line-height: 4rem;
	padding: 50px 0 0 0;
}
.num01{/*数値部分*/
	font-size: 5rem;
	font-weight: 600;
	color: #E72E5C;/*赤　#E72E5C*/
}
.num02{
	font-size: 2rem;
	font-weight: 600;
}
.t_area{/*three_area親ボックス　参列部分*/
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content:space-between;/*均等配置*/
	
}
.t_area01{/*小さいボックスエリア*/
	width: 33%;
}
.t_area02{
	width: 33%;
}
.t_area03{
	width: 33%;
}
/*-------------------------------------
お問い合わせ部分
場所：LP　
---------------------------------------*/

.contact_area_back{/*背景部分*/
	width: 100%;
	margin-top:150px;/*隙間づくり*/ 
}
.contact_area_obi{/*帯部分*/
	width: 100%;
	background-color: #DBF7F4;
	height: 330px;/*帯の高さ*/
	margin: 30px 0; 
}
.contact_area{
	width: 1300px;
	margin: 0 auto;
	padding: 30px 0;/*隙間づくり*/
	position: relative;/*基点*/
}
.contact_comment{/*人のアイコン*/
	position: absolute;
	right: 88px;/*調節*/
	bottom: -110px;
	z-index: 0;
}
.ct_a01{/*色の調節*/
	color: #15D7B5;
	text-align: center;
	padding: 40px 0 20px 0;
	letter-spacing: 2px;
	font-size: 1.3rem;
}
.contact_cbtn{
	width:35%;
	/*padding: 2rem 2rem;*/
	color: white;
	text-align: center;
	margin: 0 auto;
	letter-spacing: 3px;
	font-size: 1.5rem;
	background: rgb(17,215,178);
	background: linear-gradient(90deg, rgba(17,215,178,1) 0%, rgba(62,199,213,1) 100%);
}
.contact_cbtn a{
	display: block;/*全体クリック出来るようにする*/
	color: white;
	text-decoration: none;
	padding: 2rem 2rem;
	z-index: 10;/*上に表示*/
}
.slick03,.slick02{
	padding: 0;
	margin: 0 auto;
}


/*-------------------------------------
お問い合わせ部分
場所：トップページetc
---------------------------------------*/
.contact_area02_back {
    width: 100%;
    background-color: #0863c2;/*青い色*/
    padding: 40px 0 70px 0;/*青の幅を変えられる*/
}

.ca02_a_style{/*リンクを全体に広げる部分*/
	text-decoration: none;
	color: #2A2A2A;/*子要素は各自で設定で上書きする*/
}

.ca02_title{/*タイトルの部分*/
	text-align: center;
	color: white;
	margin: 0 0 30px 0;
	letter-spacing: 1px;
}
.contact_area02{
	margin: 0 auto;
	max-width: 1000px;
	width: 100%;
	/*height: 200px;*/
	background-color: white;
	display: flex;
	position: relative;/*基準値*/
}
.ca02_imgs {/*女性の画像部分*/
    position: absolute;
    z-index: 2;
    right: -31%;
    bottom: -35%;
}
.ca02_imgs02 {/*男性部分*/
    position: absolute;
    z-index: 2;
    left: -20%;
    bottom: -35%;
}

.contact_area02_sub01{
	width:69%;
	background-color: #f2f2f2;
	margin: 20px;
	padding:15px 0 30px 0;/*上に隙間を入れる*/
}



.contact_area02_sub01_block{/*電話と番号部分*/
	width: 100%;
	display: flex;
	align-items:center;/*垂直方向　真ん中*/
	justify-content:center;/*横方向　中央*/
    padding: 5px 0 10px 0;
	text-align: center;
}



.casb01{/*電話アイコン部分　左側*/
	width:auto; 
}
.casb01 img{
	width: 50px;
	height: 50px;
}
.casb02{/*番号部分 右側*/
	width: auto;
	color: #0863c2;/*青い色*/
	font-size: 2.3rem;
	font-weight: 500;
	margin: 0 0 0 10px;
}
.contact_area02_sub01_block02{
	width: 100%;
	display: flex;
	align-items:center;/*垂直方向　真ん中*/
	justify-content:center;/*横方向　中央*/
}

.casb03 {/*営業時間部分*/
    width: auto;
    background-color: #0863c2;
    color: white;
    text-align: center;
    font-size: 0.8rem;
    padding: 2px 10px;
	letter-spacing: 1px;
}

.casb04{
	width: auto;
	margin: 0 0 0 10px;
}

.contact_area02_sub02{/*ボタン部分*/
	width: 12%;
	background-color: #0863c2;
	color: white;
	margin: 20px 10px 20px 0;
	/*padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;*/
	position:relative;
}
.contact_area02_sub02 .link{
    position: absolute;
    width: 100%;
    height: 100%;
	color: white;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
}
.contact_area02_sub03{/*ラストのブロック*/
	width: 12%;
	background-color: #3eb134;/*ラインの色*/
	color: white;
	margin: 20px 10px 20px 0;
	position:relative;

}
.contact_area02_sub03 .link{
	 position: absolute;
    width: 100%;
    height: 100%;
	color: white;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*---------------------------------------------------------

場所：よくある質問部分

----------------------------------------------------------*/
.faq_area{
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px 0;/*上下に隙間をつくる*/
}
.faq_area dd{
	padding: 0 10px 30px 10px;
	margin: 0;
}
.faq_area p{
	font-size: 1rem;
	line-height:2.5rem;/* 新しい書き方*/
	margin:0;
	padding: 0 15px 0 0;
}
.faq_list{/*全体の大きさ*/
	width: 100%;
}
.faq_itm{
	border-top: 1px solid #d7dde0;/*上に薄い線を入れる*/
}
.faq_mark{/*マークの部分*/
	display: inline-block;
    vertical-align: middle;
    width: 3%;
    font-family: "FFMarkWebProBold";
    font-size: 24px;
    color: #1ba2e6;
}
.faq_text{/*テキストの部分*/
	display: inline-block;
    vertical-align: middle;
    width: 97%;
    padding-left: 23px;
    font-family: "default-font-M";
    font-size: 16px;
    letter-spacing: 0.04em;
}
.faq_itm a{
	cursor: pointer;
	text-decoration: none;/*線を消す*/
}
.faq_link {
    display: block;
    background-color: #fff;
    padding: 42px 129px 44px 29px;
    font-size: 0;
    letter-spacing: 0;
    color: #000;
    position: relative;/*起点を作る*/
    -webkit-transition: background-color 0.3s ease-in-out, letter-spacing 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out, letter-spacing 0.3s ease-in-out;
}
.faq_link_icon{/*円の部分*/
	display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #d7dde0;
    position: absolute;
    top: 50%;
    right: 23px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}
.faq_link_icon:before{
	content: "";
    display: block;
    width: 7px;
    height: 7px;
    border: 2px solid #000;
    border-left-width: 0;
    border-top-width: 0;
    position: absolute;
    top: 46%;
    left: -5px;
    right: 0;
    -webkit-transform: rotate(45deg) translateY(-50%);
    -ms-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
    margin: 0 auto;
    -webkit-transition: left 0.3s ease-in-out, top 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: left 0.3s ease-in-out, top 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.faq_.is-active{/*クリック後*/
	background-color: #1ba2e6;
    border-color: transparent;
}
.faq_link:hover .faq_link_icon {
    border-color: #1ba2e6;
    background-color: #1ba2e6;
}
.faq_link.is-active .faq_link-icon:before {
    top: 50%;
    left: 0;
    border-color: #fff;
    -webkit-transform: translateY(-50%) rotate(225deg);
    -ms-transform: translateY(-50%) rotate(225deg);
    transform: translateY(-50%) rotate(225deg);
}
.faq_content{/*答えの部分*/
	display: none;
	padding: 43px 0 59px 0;/*上下に隙間を作る*/
}
.is_active{
	background-color: #f0f3f5;/*背景の色*/
}
.textbox{
	width: 100%;
}
.textbox textarea{
	max-width: 500px;
	width: 95%;/*幅を調節*/
}
/*-----------------------------------------------------------------------

LPで利用
場所：教室のスクロール部分

-------------------------------------------------------------------*/
.contents01_area_back02{
	width:100%;
	background-color:#f2fafd;
	clear: both;/*周りこみさせない*/
}
.contents01_area01{
	width: 1200px;
	margin: 0 auto;
	padding: 15px 0 0 0;
}
.user_area{
	width: 100%;
}
.user_area01{
	margin: 0 auto;
	text-align: center;
}
.user_area01 p{
	line-height: 1.4rem;
}
.user_area01 img{
	margin: 0 auto;
}
/*------------------------------------------

場所：ポイントボックス

-------------------------------------------*/

.point_box{
	position: relative;
    margin: 2.8em 0 2em;
    padding: .8em 1em 1em;
    border: solid 3px #069dcb;
    border-radius: 3px;
}
.one_point_box{
	position: relative;
    margin: 2.8em 0 2em;
    padding: .8em 1em 1em;
    border: dashed 2px #288c66;
    border-radius: 3px;
}
.point_title02{
	font-size: 1em;
	font-weight: 700;
    line-height: 1.25;
    display: inline-block;
    position: absolute;
    top: -10px;
    left: 10px;
    padding: 0 9px;
    background: #fff;
	color:#288c66;
}
.point_title02:before {
    padding-right: 5px;
    font-family: FontAwesome;
    content:url("../img/point_comment03.png");/*\f0eb画像部分*/
    font-size: 1.1em !important;
	/*background-image: url("../img/point_comment02.png");*/
	width: 16px;
	height: 19px;
	background-size: contain;
	background-repeat: no-repeat;
}
.point_title{
	font-size: 1em;
	font-weight: 700;
    line-height: 1.25;
    display: inline-block;
    position: absolute;
    top: -10px;
    left: 10px;
    padding: 0 9px;
    background: #fff;
	color: #069dcb;
}
.point_title:before {
    padding-right: 5px;
    font-family: FontAwesome;
    content:url("../img/point_comment02.png");/*\f0eb画像部分*/
    font-size: 1.1em !important;
	/*background-image: url("../img/point_comment02.png");*/
	width: 16px;
	height: 19px;
	background-size: contain;
	background-repeat: no-repeat;
}
.point_comment{
	padding: 10px 0 0 10px;
}
.point_comment ol{
	list-style-type: none!important;
    padding: 0;
    counter-reset: number;
}
.point_comment ol li {
	position: relative;
    padding: .5em 0 .5em 28px !important;
    line-height: 1.5;
    color: #333;
}
.point_comment ol li:before{
	display: inline-block;
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #069dcb;
    color: #fff;
    font-family: "Quicksand",sans-serif;
    font-size: 14px;/*ここが大事*/
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    line-height: 19px;
    content: counter(number);
    counter-increment: number;
}
/*------------------------------------------

場所：LP（NEXT）
詳細：時間割の部分
ファイル：next/next.php

-------------------------------------------*/
.time_table{
	width: 1300px;
	margin: 0 auto;
}
.kakomi_box{/*時間割の文字と枠*/
	margin: 0 auto;
	margin-top:4.0rem;
	margin-bottom: 1.3rem;
	padding: 0.5rem;
	width: 120px;
	background-color: #fff; /* 背景色 */
	border: 2px solid #6586c2;; /* 枠線 */
	text-align: center;
	font-weight: 300;
	color: #6586c2;
}
.tt_01{
	text-align: center;
	color: #8F8F8F;
}
.tt_02{
	width: 100%;
	text-align: center;
	margin: 4.5rem 0;
}
.tt_02 img{
	max-width: 100%;
}
.tt_03{
	text-align: center;
	color: #8F8F8F;
	margin-top:1.5rem; 
}
.kakomi_box02{/*時間割の文字と枠*/
	margin: 0 auto;
	margin-top:4.0rem;
	padding: 0.5rem;
	width: 200px;
	background-color: #6586c2; /* 背景色 */
	border: 2px solid #6586c2;; /* 枠線 */
	text-align: center;
	font-weight: 300;
	color: #fff;
}
.kakomi_box_s01{/*時間割の文字と枠*/
	margin:0 1.2rem 0 1.2rem;
	padding: 0.3rem 1.5rem;
	width: 120px;
	background-color: #fff; /* 背景色 */
	border: 2px solid #6586c2;; /* 枠線 */
	text-align: center;
	font-weight: 300;
	color: #6586c2;
}
.purple{
	margin: 20px 0 25px 0;
	color: #6586c2;
}
.ph_size{/*時間割の画像エリア*/
	width: 100%;
	padding: 10px 20px;
}
.ph_size img{
	width: 100%;
}
.tasu{
	text-align: center;
	margin: 15px 0;/*上下に10px*/
}
.kakomi_box_s02{/*塾と家庭部分*/
	margin:0 1.2rem 0 1.2rem;
	padding: 0.3rem 1.5rem;
	width: 120px;
	background-color: #fff; /* 背景色 */
	border: 2px solid #00c1f4;; /* 枠線 */
	text-align: center;
	font-weight: 300;
	color: #00c1f4;
}
.blue02{
	margin: 20px 0 25px 0;
	color: #00c1f4;
}
/*--------------------------------------- 
 出典部分のサイズ調節
場所：ガイドなどで
---------------------------------------*/
.shuten{
	font-size: 80%;
	line-height: 0.8rem;
}
.shuten img{
	width: 78px;
	height: 25px;
}
.shuten a:link,.shuten a:visited{
	text-decoration: none;
	color:#474747;
}
/*-------------------------------------------------
　　　サイドのランキング部分　　　
------------------------------------------------*/
.side_ranking_area{
	width: 210px;
}
.side_ranking {
	max-width: 210px;
    position: relative;
	margin: 10px 0;
}
.side_ranking img{/*画像サイズに合わせるため*/
	max-width: 210px;
	width: 100%;
}
.side_ranking p{
	font-size: 0.8rem;
	
}
.side_ranking a{
	color: #666666;
	text-decoration: none;
}
.side_ranking a:visited{
	text-decoration: none;
	color: #666666;
}
.side_ranking a:hover img{
	opacity: 0.5;
}
.rank{
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
	width: 45px;
	height: 45px;
	border-style: solid;
	border-width: 45px 45px 0 0;
	border-color: #19BFBF transparent transparent transparent;
	cursor: pointer;
	position: absolute;
    top: 0;
    left: 0;
}
.rank i{
	position: absolute;
    top: 0;
    left: 0;
	margin: -47px 0 0 5px;/*調節する*/
}
/*--------------------------------------- 
全体共通
コメントエリア
---------------------------------------*/
.person_box{
	width: 100%;
	display: flex;
}
.names_area{
	width: 12%;
}
.names_area img{
	width: 100%;
	border-radius: 50%;
}
.comments_area{
	width: 88%;
	border: solid 2px #999;
	border-radius: 10px;
	padding: 15px;
	margin: 0 0 0 15px;
	position: relative;
	background-color: #fbfbfb;
}
.comments_area p{
	line-height: 2.8rem;
}
.comments_area:before{
    display: inline-block;
    position: absolute;
    top: 9px;
    left: -27px;
    border: 13px solid transparent;
    border-right: 13px solid #999;
    content: "";
}
.comments_area:after{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: -23px;
    border: 12px solid transparent;
    border-right: 12px solid #fbfbfb;
    content: "";
}
.p_name{
	color:#029fe8;
	text-align: center;
}
.p_name a{
	color:#029fe8;
	text-decoration: none;
}
/*-------------------------------------------

場所:全体
詳細:ボタン部分

-------------------------------------------*/
.btn_more{
	border: 1px solid #3E3E3E;/*ボタンの枠線の色*/
	color: black;
	background: #fff;
	text-decoration: none;
	text-align: center;
	width: 180px;
	/*margin: 0 auto;*/
	font-size: 0.8rem;
}
.btn_more a{
	text-decoration: none;
	display: block;
	color: black;
	padding: 15px 0;
	transition:all 0.6s ease-out;
}

.btn_more a:hover{
	color: #fff;
	background:#000000;
	text-decoration: none;
}
/*-------------------------------------------

場所:お客様の声
詳細:

-------------------------------------------*/
.cu_block_area{
	background-color: #FAFCEE;
}
.cu_block{
	background-color:white;
	border: 2px solid #3E3E3E;/*ボタンの枠線の色*/
	padding: 30px 30px;
}
.cu_p{
}
.cu_p img{
	width: 100%;
}
/*---------------------------------------------------------
場所：トップ
画像が流れるエリア
----------------------------------------------------------*/
.photo_nagare{
	width: 100%;
	margin: 0 0 -12px 0;
	clear: both;
}
.photo_nagare ul{
	text-decoration: none;
	width: 100%;
	padding: 0;/*追加*/
}
.photo_nagare li{
	/*width: 20%;*/
	text-decoration: none;
	width: 100%;
	height: 280px;
}
/*-------------------------------------------------------

slick　の部分です

--------------------------------------------------------*/
.slick01 img{
    max-width: 100%;/*ここが原因だった*/
}
.slick_sub{
    margin: 0 auto;
}
.slick-slide {
    margin: 0 10px;
    border-right:1px solid #ffffff;
}
.slick_sub a:hover{
    opacity: 0.5;
}

/*-------------------------------------------------------

お客様の声　塾生の声

場所：/koe/

--------------------------------------------------------*/
.koe_spin{
	max-width: 100%;
}
/*-------------------------------------------------------

お客様の声　塾生の声　タグエリア

場所：/koe/
--------------------------------------------------------*/
.cu_tag_area{
	max-width: 100%;
	display: inline-block;
	margin: 10px 0 30px 0;/*下に少し隙間を入れる*/
}
.cu_tag{
	width: 140px;
	/*border: 1px solid #3E3E3E;/*ボタンの枠線の色*/
	color: black;
	background: #fff;
	text-decoration: none;
	text-align: center;
	/*margin: 0 auto;*/
	font-size: 0.8rem;
	display: inline-block;
}
.cu_tag a{
	text-decoration: none;
	display: block;
	padding: 10px 0;
	transition:all 0.6s ease-out;
	background-color: #b4d33a;
	color: white;
}
.cu_tag a:hover{
	color: #fff;
	background:#000000;
	text-decoration: none;	
}
/*-------------------------------------
場所：kouza
講座の申し込みボタン
------------------------------------*/
	
.kotira_btn{
	padding: 0.5em 1.5em;
	margin: 0.5em 1em;
	color: #FFFFFF;
	background: #FFCE24;
	border: solid 1px #FFCE24;
	/*border-bottom: solid 1px gray;背景色*/
	font-weight: bold;
	font-size: 1rem;/*文字サイズの調節*/
	/*width: 40%;*/
	border-radius: 5px;
	text-decoration: none;
}


.kotira_btn a{
	text-decoration: none;
	color: #000000;
/*	transition: background-color 1s linear;
	transition: color 0.5s linear;*/
	transition: scale 3s;
	border: solid 1px #FFCE24;
}


.kotira_btn:hover{
/*	transform: scale(1.1);
	transition: scale 3s linear;
*/
	color: #FFCE24;
	background: #FFFFFF;
	border: solid 1px #FFCE24;
}

.important{
      font-weight: bold;
      font-size: 20px;
      color: red;
    }
 .pcBreak{
      display: none;
    }

.txtA{
      text-align: center;
      font-size: 26px !important;
      margin: 20px 0 !important;
}
/*-----------------------------------------------------------------------

場所：よくある質問
用途：サイズの調節など

-------------------------------------------------------------------*/
.table_qa {
	width: 100%;
}
.qa_btn_area{
	width: 100%;
	display: flex;
	margin: 15px 0 0 0;
}
.qa_btn{
	width: 18%;
	color: white;
	background-color: black;
	text-align: center;
	padding: 10px 0;
	margin: 0 8px 0 0;
	border-radius: 5px;
}
.qa_btn a{
	color: white;
	background-color: black;
	text-decoration: none;
	padding: 0;
}
/*-----------------------------------------------------------------------

場所：理念
用途：

-------------------------------------------------------------------*/
.ri_mess{
	text-align: center;
	padding: 20px 0;
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	font-weight: 500;
}
.ri_mess p{
	font-size: 1.2rem!important;
	line-height: 2.6rem!important;
}
/*--------------------------------------- 
スライダー部分
場所：教室の紹介
---------------------------------------*/
#bx-pager {
	width: 100%;
}
#bx-pager img{
	/*width: 23%;/*4つ並んだ画像部分*/
	height: 135px;
}
*#bx-pager >a {
    width: 23%;
    /*float: left;*/
    margin: 0 1% 0 0;
}
#bx-pager:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}
.bx-pager01{
	width: 100%
}
.bx-pager01 ul{
	width: 100%;
	display: flex;
	margin: 0;
	list-style: none;
	padding: 0;
}
.bx-pager01 ul li{
	width: 25%;
	list-style: none;
	padding: 0 5px 0 0;
}
.bx-pager01 ul li img{
	width: 100%;
}
/*--------------------------------------- 
ネクストのトップ　LP
場所：3つのステップ部分
---------------------------------------*/
.steps_area_back{
	width: 100%;
	background-color: #62c5d9;
	padding: 50px 0;
	margin: 0 0 30px 0;
}
.st01_w{
	text-align:center;
	color: white;
	padding: 10px 0 30px 0;
}
.st01_w01{/*文字を大きくする*/
	font-size: 2.0rem;
}
.steps_area{
	width: 1200px;
	margin: 0 auto;
	display: flex;
	text-align: center;
}

.steps_area_sub{
	width: 33%;
	color: white;
}
.steps_area_sub img{
	max-width: 100%;
}
/*--------------------------------------- 
ネクスト 夏期講習　料金と日程
場所：日程部分
https://www.usuigakuen.co.jp/pisajuku/next/koshu/2023/
---------------------------------------*/
.price_area{
	max-width: 1300px;
	width: 100%;
	padding: 50px 0;
	margin: 0 auto;
	margin-bottom: 100px;
}
.price_area_box_back{
	max-width: 900px;
	width: 100%;
	height: 710px;
	background-color: #f5f5f5;
	margin: 0 auto;
	margin-bottom: 60px;
	margin-top: 50px;
	padding: 30px 0 0 0;
}
.price_area_box{
	max-width: 850px;
	width: 100%;
	height: 660px;
	background-color: #FFFFFF;
	margin: 0 auto;
}
.pa_taisho{/*対象について*/
	background-color: #04a8ff;
	color: white;
	text-align: center;
	padding: 5px 0;
}
.pa_area01{/*日程など*/
	display: flex;
	border-bottom: solid 1px #04a8ff;
	padding: 15px 0;
	font-size: 1.1rem;
}
.pa_area02{/*日程など*/
	display: flex;
	border-bottom: solid 1px #04a8ff;
	background-color: #e9f5ff;
	padding: 15px 0;
	font-size: 1.1rem;	
}
.pa_01{
	width: 22%;
	text-align: center;
	color: #04a8ff;
}
.pa_02{
	width: 78%;
}
.txt_middle{
	font-size: 1.5rem;
}

/*--------------------------------------- 
ネクスト 夏期講習　流れ
場所：日程部分
https://www.usuigakuen.co.jp/pisajuku/next/koshu/2023/
---------------------------------------*/
.nagare_area01_back{/*背景部分*/
	background-color: #f4faff;
}
.nagare_area01{
	max-width: 1000px;
	width: 100%;
	padding: 0 0 50px 0;
	margin: 0 auto;
	margin-bottom: 100px;
	display: flex;
	justify-content:space-between;
}
.nagare_area01_block{
	width: 23%;
	background-color:white;
	height: 350px;
	padding: 15px;
}
/*--------------------------------------- 
ネクスト 夏期講習　
場所：開催教室の部分
https://www.usuigakuen.co.jp/pisajuku/next/koshu/2023/
---------------------------------------*/
.rooms_area_back{
	background-color: #f4faff;
}
.rooms_area{
	max-width: 1200px;
	width: 100%;
	padding: 0 0 50px 0;
	margin: 0 auto;
	margin-bottom: 30px;
	display: flex;
	flex-wrap: wrap;
	 overflow-wrap: break-word;/*文字の折り返し*/
	justify-content:space-between;
	height: 100%;
}
.rooms_area_block{
	width: 30%;
	background-color:white;
	height: 100%;
	padding: 15px;
	margin-top: 30px;
}
.rooms_area_block img{
	max-width: 98%;
	text-align: center;
}
.kaki_btn{
	text-align: center;
    margin:0 auto;
    font-weight: 700;
    background-color: #fff;
    color: #0168B7;
    max-width: 540px;
    display: block;
    width: 100%;
    font-size: 1.2rem;

    padding: 21px 0px;
    position: relative;
    border-radius: 50px;
    border: 2px solid #0168B7;
    font-family: "Noto Sans JP", sans-serif;
    transition: .3s;
	text-decoration: none;
}

/*--------------------------------------- 

場所：学年部分
---------------------------------------*/
.class_tokutyo_area_back{
	
}
	
.class_tokutyo_area{
	padding: 50px 0;
}
.class_tokutyo_area_sub{
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}
.class_tokutyo_area_sub01 {
    width: 60%;
    padding: 0 20px 0 0;
}
.class_tokutyo_area_sub01 ul{
	all: initial;/*全て解除*/
}
.class_tokutyo_area_sub01 ul li{
	all: initial;
	width: auto;
    background-color: #0863c2;
    color: white;
    text-align: center;
    font-size: 0.8rem;
    padding: 5px 15px;
	letter-spacing: 1px;
}
.class_tokutyo_area_sub02{/*画像部分*/
	width: 40%;
}
.class_tokutyo_area_sub02 img{
	width: 100%;
}
/*-------------------------------------------------------

合格ガイド
場所：/gokaku/など（全部のページで使える）
--------------------------------------------------------*/
.gokaku_guide_area{
	display: flex;
	width: 100%;
}

.gokaku_guide_sub{
	width: 50%;
}

/*-------------------------------------------------------
合格ガイド
場所：/gokaku/など（全部のページで使える）
--------------------------------------------------------*/
.gokaku_guide_area{
	display: flex;
	width: 100%;
	margin: 0 auto;
	justify-content:space-between;
}


.gokaku_guide_sub{
	width: 48%;
}
.gokaku_guide_sub img{
	max-width: 100%;
}
.guide_title{
	text-align: center;
	margin: 0!important;
}
.guide_title02{
	text-align: center;
	margin: 0 0 25px 0!important;
	font-size: 0.8rem!important;
}