@import url(https://fonts.googleapis.com/css?family=Raleway:300,700);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);/*アイコンで使用　上に書く必要がある*/

/*--------------------------------------- 
全体共通です
一凛 css

---------------------------------------*/
.wrap{
	margin: 0 auto;
	overflow: hidden;
}
*, *: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;
}

ul,li{
	list-style: none;
}


/*---------アニメーションの指定-----------------*/
.left_slide {
  -webkit-animation-name: sl_img;
  animation-name: sl_img;/*アニメーション名を指定する*/
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

.left_slide img {
  width: 100vw;
}

@-webkit-keyframes sl_img {
  0% {
    position: absolute;
    left: -100vw;
  }
  100% {
    position: relative;
    left: 0;
  }
}

@keyframes sl_img {
  from {
    position: absolute;
    left: -100vw;
  }
  to {
    position: relative;
    left: 0;
  }
}

/*--------------------------------------- 
マップ
---------------------------------------*/
.map_01{
	width: 100%;
	display: flex;
	height: 310px;
}
.map_s01,.map_s02{
	width: 50%;
	padding: 0 5px;
	height: auto;
}

/*--------------------------------------- 
教室ページ　一覧表示
---------------------------------------*/
.col01,.col02{
	width: 100%;
	height: 40px;
	display: flex;
}
.col01_01,.col01_02,.col01_03{
	width: 20%;
	height: auto;
	text-align: center;
}
.col02{/*2列目の背景*/
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	background-color: #FBFAF5;
	margin: 10px 0;
}

.col02_01,.col02_02,.col02_03{
	width:20%;
	text-align: center;
}
.col02_01 p,.col02_02 p,.col02_03 p{
	font-size: 12px!important;
	line-height: 20px!important;
}
.col02_04{
	width:28%;
	text-align: center;
}
.col02_04 img,.col02_05 img{
	vertical-align: middle;
}
.col02_05{
	width:12%;
	text-align: center;
}
.col02_06{
	display: none;
}
/*-----ここまで--------*/

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;
}
#container {
	width: 1000px;
	clear:both;
	margin: 0 auto;
	background-color:#FFF;
}
h1 {
    font-size:0;
	margin: 0;
	padding:0;
}
a:hover{
	opacity:0.8;
}
#main01 p,#main p,.kanren_kizi p,#map1 p{
	font-size: 0.9rem;
	line-height: 2.3rem;
	margin: 0;
}



/*--------------------------------------- 
アコーディオンメニューの上 
---------------------------------------*/
#gnabi_ue{
	max-width: 1000px;
	width: 100%;
	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: #52aed6; /* Old browsers */
	background: -moz-linear-gradient(top, #52aed6 20%, #0b43fa 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #52aed6 20%,#0b43fa 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #52aed6 20%,#0b43fa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52aed6', endColorstr='#0b43fa',GradientType=0 ); /* IE6-9 */	
  /*border-bottom: 4px solid #F9F7F7;*/
  border-radius: 3px 3px 0 0;
  font-weight: normal;
}
#dropmenu li{
  position: relative;
  width:14.2%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
  color:#000000;
  z-index: 1;
  font-weight: normal;
}
#dropmenu li a{/*一番上の階層ボタン 文字の色*/
  display: block;
  margin: 0;
  padding: 23px 0 11px; /*文字の位置調節　下に11px*/
  color: #fff;/*文字の色*/
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
 font-weight: normal;
}
#dropmenu li:hover > a{/*マウスオーバー時 1階層*/
  color:#52AED6 ;/*文字の色　少し青*/
	opacity: 0.6;
}
#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{/*下階層のボタン 2階層目*/
  overflow: hidden;
  width: 200%;
  height: 0;
  /*border-bottom: 1px solid #6087FB;入れないほうがいい*/
  background-color: #0D46F9;/*あおいろ*/
  color: #fff;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
#dropmenu li ul li a{
  padding: 16px 15px;/*高さを変える*/
  background: #0D46F9;/*下階層ボタンのa要素　ボタンの色*/
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu li ul li a:hover{/*下階層ボタンのマウスオーバー時*/
  color:#fff;/*白*/
	opacity: 0.7;
}
#dropmenu li:hover ul li{
  overflow: visible;
  height: 40px;
  /*border-top: 1px solid #689D38;境界線の上線*/
  border-bottom: 1px solid #6087FB; /*境界線の下線*/
}
#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;
}

/*--------------------------------------- 
 スライダー部分
---------------------------------------*/
#bx-pager {
	text-align: center;
}
#bx-pager img{
	width: 23%;/*24%から変更。4つ並んだ画像部分*/
	height: 135px;
}

/*--------------------------------------- 
 ストロングが蛍光ペン風になる 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;
	height: 130px;
	padding: 20px 0 0 0;
}
.box2{
	width: auto;
	float: right;
	height: 130px;
	padding: 15px 0 0 0;
}
.box2 ul{
	height:130px;
	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;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content:space-between;
	/*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;
}	
}

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

h1 {
	padding:0;
	margin: 0;
}
h2 {
	margin: 0;
	padding: 0;
    line-height: 25px;
    font-size:15px;
}
.ai2 {
	display:inline-block;
	line-height: 120px;
	margin: 0;
}


#contents {
	margin:0 auto;
	width:1000px;
	padding:0;
	clear:both;
}
#main00{
	width:1000px;
}
#main01{
	margin: 0 auto;
	/*max-width: 1000px;*/
}
#main {
	float: left;
	width: 770px;
	margin: 0;
	padding:0;
}
#main img {
	height: auto;
	/*border-radius: 10px;*/
}
#main2 {
	float: right;
	width: 600px;
	margin: 0;
	padding:0;
}
/*-----main3はお問合せページで使っています -----*/
#main3 {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding:0;
}
#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: #52aed6; /* Old browsers */
	background: -moz-linear-gradient(top, #52aed6 20%, #0b43fa 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #52aed6 20%,#0b43fa 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #52aed6 20%,#0b43fa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52aed6', endColorstr='#0b43fa',GradientType=0 ); /* IE6-9 */
	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;
}
#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;
}
/*---------------------------------------
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: #52aed6; /* Old browsers */
	background: -moz-linear-gradient(top, #52aed6 20%, #0b43fa 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #52aed6 20%,#0b43fa 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #52aed6 20%,#0b43fa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52aed6', endColorstr='#0b43fa',GradientType=0 ); /* IE6-9 */	
	width: 100%;
	height: 60px;
}
.gnavi_back.m_fixed {/*途中からここを+*/

	position: fixed;
	  top: 0;
  left: 50%;
  transform: translateX(-50%);
	z-index: 99999;
	background: #52aed6; /* Old browsers */
	background: -moz-linear-gradient(top, #52aed6 20%, #0b43fa 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #52aed6 20%,#0b43fa 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #52aed6 20%,#0b43fa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52aed6', endColorstr='#0b43fa',GradientType=0 ); /* IE6-9 */	
	width: 100%;
	height: 60px;
}

/*--------------------------------------- 
  パンくずの中だよん
---------------------------------------*/
#pan{
  margin: 0 auto;
  padding: 15px 0 0 0;
  font-size:12px;
  clear:both;
  height: 55px;
  width: 1000px;
}
#pan ul{
  list-style:none;
  margin: 5px 0 10px 0;
  padding:0;
}
#pan li{
   margin: 0 5px 8px 0;  
  list-style:none;
  float:left;
}
#pan a:visited,
#pan a:link{
	color:#000;
}
/*--------------------------------------- 
   お問い合わせ
---------------------------------------*/
.contact {
  padding: 0 ;
}
/*-------------------------------
list styleです

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

h2 {
	margin: 0;
	padding: 22px 0 0 20px;
	text-align:center;
    line-height: 24px;
    font-size:20px;
	color: #00CCCC;
	background-image:url(../img/h3_back.jpg);
	height:71px;
	background-repeat: no-repeat;
	font-weight:bold;
}
h3 {
	margin: 0 0 10px 0;
	padding: 0px;
    line-height: 29px;
    font-size: 19px;
}
.midasi_h3{  /*--h3の見出し部分 ---*/
	height: 50px;
	width:100%;
	margin:0;
	padding: 12px 0 5px 10px;
	color: #FFAF3D;
	background-repeat: no-repeat;
}


/*-- -----------h3の背景　すべてcssで作ると見えなくなる・・・-----------------*/
.mida01 {
	height:45px;
	width: 100%;
	padding: 9px 0 0 10px;
	background-image: url("https://office-ichirin.net/img/back_h3.jpg");
	background-repeat: repeat-x;
	color:#FFF;
	letter-spacing: 1px;
	font-weight: 400;
}
/*--
.mida01 {
	height:45px;
	width: 100%;
	padding: 9px 0 0 10px;
	background: #52aed6; /* Old browsers 
	background: -moz-linear-gradient(top, #52aed6 20%, #0b43fa 100%); /* FF3.6-15 
	background: -webkit-linear-gradient(top, #52aed6 20%,#0b43fa 100%); /* Chrome10-25,Safari5.1-6 
	background: linear-gradient(to bottom, #52aed6 20%,#0b43fa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52aed6', endColorstr='#0b43fa',GradientType=0 ); /* IE6-9 
	color:#FFF;
	letter-spacing: 1px;
	font-weight: 400;
}
---*/

.mida02{
	height:45px;
	width: 98%;
	padding: 7px 0 0 40px;
	background-image:url(/img/arrow04.jpg);
	background-repeat: no-repeat;
	background-position: 10px 10px;
	color:#000;
}

/*-- -----------スペースの調節に利用-----------------*/
.mi01{
	padding: 10px 0;
	text-align: center;
}
.mi01a{
	font-size:1.1rem !important;
	line-height: 2.8rem !important;
	padding:0;
	text-align: center;
}
.mi01b{
	padding: 35px 0 10px 0;
	text-align: center;
}
.mi01c{
	padding: 35px 0 20px 0;
	text-align: center;
}
.mi01d{
	padding: 50px 0 0 0;
	text-align: center;
}
.mi02a{
	display: none;
}
.mi02{
	padding: 20px 0;
	text-align: center;
}
.mi02b{
	margin: 2rem 0 0 0 !important;
	text-align: center !important;
}
.mi03{
	padding: 15px 0;
}
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;
}
.big02_red{
	font-size: 22px;
	font-weight: bold;
	color:red;
	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;
}
#navi p {
	font-size: 13px;
	line-height: 30px;
}
#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;
}
.table2 td{
	width:50%;
}
/*--文字はセンター　線は細い-*/


/*--　Sサイズ時の縦並びcss end--*/
.price_table_area{/*テーブルの金額エリア*/
    width: 380px;
}
.table3{
	width: 100%;
    margin: 0 0 25px 0;
	padding: 0;
	border-collapse: collapse;
}
.table3 td, .table3 th{
	margin: 0;
	border: 1px solid #CCCCCC;
    text-align:center;
}
.table3 p{
   padding: 0;
   font-size: 0.8rem!important;
}
.t3k{/*処分費用などの項目*/
    font-size: 0.8rem!important;
}
/*------サイズが小さくなると、可変する。
テキストはセンターのテーブルレイアウト -----*/

.table4{
	width: 100%;
    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 #CCCCCC;
	height: 60px;
}
.table5a p{
   padding: 0;
   margin: 0;
   font-size: 1em;
   line-height: 2em;
}
.wh01{
	color:#FFF;/*--文字色を白にする --*/
}
.td_back{
	background-color: #7CBCE6;
	color:#FFF;
	width:20%;
	text-align:center;
}


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

.table6{
    margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table6 td, .table6 th{
	margin: 0 0 0 10px;
	border: 1px solid #CCCCCC;
}
.table6 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;
	height: 0;
	overflow: hidden;
}

.video-container iframe {
	position: absolute;
	top: -10px;
	left: -2px;
	width: 100%;
	height: 100%;
}
.video-container02 {
	position: relative;
	padding-bottom: 80%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container02 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: 110px;
}
.kanren_kizi p{
	font-size: 0.8rem!important;
}
.kanren_kizi a{
	display: block;
	padding: 10px 0 5px 5px;
	border-bottom: dotted 1px #CCC;
	font-size: 14px;
	text-decoration: none;
	height: 140px;/*サイズ調節*/
}
.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{
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	height: auto;
	display: flex;
    -webkit-display: flex;
}
.s_item{
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	width: 30%;
	margin: 20px 20px;
}
.s_item a:hover{
	opacity:0.8;
}
.s_item_img img{
	width: 100%;
}
.s_item p{
	padding: 0 5px;
}
.s_item_01{/*スマホ時に色を変える*/
}
/*--------------------------------------- 
  トップ理念、合格実績など3つ並び　スマホ時には一列になる
　トップページに利用
---------------------------------------*/

.item_3{
	width: 100%;
	margin: 0 auto;
	max-width: 1000px;
	height: auto;
	display: flex;
	flex-wrap:wrap;/*子要素を折り返して、複数行に並べる*/
	justify-content: center; /* 子要素をflexboxにより中央に配置する */
	background-image:url("../img/bck_note.jpg");
	background-repeat: repeat;
}
.item_3 img{
}
.s_item_3{
	width: 280px;
	height:　360px;
	background: #FFFFFF;
	margin: 20px 15px;/*中央に配置した後、マージンで感覚を調節*/
	border: solid 1px #F2F2F2;
}
.s_item_3 p{
	margin: 0 7px !important;
}
.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: 48%;
	margin: 10px 0 40px 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%;
}


/*--------------------------------------- 
  トップページ
  選ばれる理由などに使う　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; /*--大きい画面時は表示させない、スマホ時に表示する---*/
}
.smaho01{/*main_top_smaho*/
	display:none; /*--大きい画面時は表示させない、スマホ時に表示する---*/
}

/*--------------------------------------- 
 スマホフッターボタン部分
---------------------------------------*/
.smaho_footer{
	width:380px;
	display: none;
}
.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;
}
/*--------------------------------------- 
 お客様の声　 customer_box
---------------------------------------*/
.customer_box02{
	display:flex;
	max-width: 770px;
	width: 100%;
	flex-direction: row;
	margin: 30px 0 30px 0;/*上に隙間を開ける*/
}
.cb_r{/*文章エリア*/
	width: 35%;
	padding: 0 10px;
}
.cb_r img{
	width: 100%;
}
.cb_l{/*写真の部分*/
	width: 65%;
	padding: 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: 20px;
    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 a{
	color: #000;
}
.navigation a:visited{
	color: #000;
}
/*----ボタンをクリックした後の場所を指定 かなり大事-----*/
.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-bloc
}
.navigation table td{
	padding: 0 2px;
}
.navigation table a{
	display: inline-table;
	width: 53%;
	height:47px;
	color:none;
	padding: 0;
}
.navigation table a:hover{
	opacity:0.8;
	background-color: #FFF;
}

/*--------------------------------------- 
アコーディオンナビゲーション　Jquery とcss3
https://maku77.github.io/web/menu/accordion.html　を利用してます
---------------------------------------*/
/* メニュー全体 */
.menu {
  width: 378px;
	padding: 0 1px;
}
/* 閉じた状態のサブメニュー */
.menu ul {
    display: none;  /* デフォルトで非表示 */
	font-size: 12px;
	transition: 0.2s;/*アニメーションの設定*/
}
@keyframes my-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 開いた状態のサブメニュー とチェックボックスを表示させる*/
.menu input:checked + ul {/*.menuの直下のulを指定*/
    display: block;  /* 表示する */
    padding: 10px 0 0 10px;
	height: auto;/* これが　全体の高さを算出 */
	font-size: 12px;
	animation-name: my-fade-in;
	animation-duration: 0.6s;
}
.menu ul > li{
	height: 50px;
	padding: 0 0 0 5px !important;
}
.menu li >a{
	width:100%;
	height:50px;
	padding: 0 35px;/*サブナビゲーション　左に余白を入れる */
	line-height: 50px;
	text-decoration:none;
	color:#000000;
}

/* チェックボックスは非表示にして（内部的な on/off 機能を利用する） */
.menu input {
    display: none;
}

/* 開いた状態のサブメニュー */
.menu input:checked + ul {
    display: block;
	font-size: 12px;
	opacity: 1;
	height: auto;
	transition: all 1000ms 0s ease;
}

/* 閉じた状態のサブメニュー */
.menu ul {
    display: none;
	/* 下記は開閉によらず共通の設定 */
	background-color:#fff;
    list-style: none;
    margin: 0;
    padding:0;
	opacity: 0;
}

/* 親項目　トップ、グルメなどに利用 */
.menu label {
    display: block;
	height: 47px;/*高さの指定*/
    margin: 0;
    padding: 16px 0 10px 8px;/*左に空白*/
    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{   /*何もないリンク部分*/
	text-decoration: none;
	display: block;/*幅が広がる*/
	height: 47px;
	width: 100%;
	padding: 16px 0 0;
	position: absolute;
	top:0;
}
.menu label :hover {
	background-color:#EEEEEE;/* マウスオーバーしたときの色 */
}
/* 閉じた状態のサブメニュー */
.menu ul {
    overflow: hidden;
    line-height: 0;
    padding: 0;
    transition: 0.6s;

    /* 下記は開閉によらず共通の設定 */
    background: #FFFFFF;
    list-style: none;
    margin: 0;
}
.ac02 li{/* .menu .acと書かなくてもよい */
border-bottom:dotted 1px #ccc;/* 下線をドットに変更*/
}
.ac02 li >a{
	position: relative;
	display: block;
	text-decoration: none;
	border-bottom: none;/* 下線はいらない*/
	text-decoration: 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);
}
/*.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);
}*/
/* 開いた状態のサブメニュー */
.menu input:checked + ul {
    line-height:1.0rem;
    padding: 0;
}

/*--4つのボタン背景にarrowを入れない --*/
.4btn >a {
	border: none;
}

/*--電話とメールボタン　サイズを調節している --*/
.tel_mail_btn{
	border: 0;/*最大の大きさを指定*/
	max-width: 380px;/*最大の大きさを指定*/
	width: 100%;
}

/*--ナビゲーション内のボタン部分 --*/
.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;
	max-width: 1000px;
	margin: 0 auto;
}

/*--------------------------------------- 
 画像がフェードインするスクリプト
 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{
	height: 70px;/*高さの設定*/
	margin: 0;
	padding: 0;
}
.form_box P{
	margin: 0;
	padding: 5px 0;
}
/*-----住所の部分-------*/
.fbox01 {
	padding: 0;
	margin: 0;
	height: 48px;
}
.fbox01 input[type="text"] {
　margin: 0;
}
.form_box input, .form_box textarea{
	font: 1em sans-serif;
	width: 350px;
	height: 48px;/*高さの設定*/
    border: 1px solid #999;
	text-indent: 5px;
}

/*--------------------------------------- 
フォーム部分
---------------------------------------*/
input{
	font-size:1rem;
		}
.form_box02{
	display: flex;
	flex-wrap:wrap;
	height: 70px;
}
.form_box02 P{
	margin: 0;
	padding: 5px 0;
}
.fbox02 {
	display: row;
	padding: 0;
}

.form_box02 input, .form_box02 textarea{
	font: 1em sans-serif;
	max-width: 350px;/*スマホ時　左側に8px入れているので、はみ出ないように350pxにしてある*/
	width: 100%;
	height: 48px;/*高さの設定*/
    box-sizing: border-box;
    border: 1px solid #999;
	text-indent: 5px;
}
/*--電話番号の部分--*/
.form_box02a{
	height: auto;
	margin: 0 0 10px 0;/*位置の調節*/
}
.form_box02a input, .form_box02a textarea{
	height: 48px;
	margin: 0 0 10px 0;
	text-indent: 5px;/*文字の位置を少し右にする*/
	border: 1px solid #999;/*マージンを入れるとボーダーが消えるのを防ぐ*/
}

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

/*問い合わせの内容部分　プルダウンの場所*/
.form_box03{
	height: 60px;
	margin: 10px 0;
}
.form_box03 select{
	width: 180px;
	height: 48px;/*セレクトボックスの高さを指定する*/
	margin: 0 0 10px 0;
	padding: 0 0 0 10px;/*文字の位置を調節　左に寄りすぎていたため*/
}


/*--------------------------------------- 
チェックボックスの場所 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;
}
.checkbox01>label{
	font-size: 15px;
	height: 40px;
	padding: 0 15px 0 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;
}

/*-------- 教室のボタン2列-----------*/
.btn2{
	display: flex;
}
.btn2_01{
	width:180px;
}
.btn2_02{
	width:180px;
	margin: 0 20px;
}
.btn2_03{
	width:180px;
}

/*-------- 科目紹介のボタン2列-----------*/
.btn02{
	display: flex;
	flex-wrap:wrap;/*初期値は一列に入ってしまう*/
	width: 100%;
}
.btn02_01{
	width: 47%;
	padding: 0 20px 10px 0;
}
.btn02_01 img,.btn02_02 img{
	width: 100%;
}
.btn02_02{
	width: 47%;
}
.btn02_03{
	width:180px;
}
/*-------- ボタン3列-----------*/	

.btn03{
	display: flex;
	width: 100%;
}
.btn03_01{
	width: 32%;
	padding: 0 3px;
}

.none{
	padding: 0 !important;
	margin: 0 !important;
}

/*-------- ICONで出来たボタン部分-----------*/	
.icon_area{
	text-align: center;
}
.icon_navi{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	background: #63BA00;
	display: flex;
	flex-wrap: wrap;
}
.ic01{
	width: 33%;
	height: 60px;
}
.icon_navi a{
	text-decoration: none;
    color: #fff !important;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    background: url(../img/icon01.png) no-repeat;
	background-position: 20px 13px;
    background-size: 35px;
    height: 70px;
    padding-left: 70px;/*文字位置の調節*/
    padding-top: 1.2em;
    letter-spacing: 0.1em;
    transition: all .2s ease-in;
}
icon_navi a:link{
	opacity: 0.3;
	background:#59AA00;
}
.icon_navi a small{
	color: #90e328;
    display: block;
    margin-top: .3em;
    font-size: 10px;
    font-weight: 400;
	font-family: 'Ropa Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.icon_navi a:nth-child(1) {
}
.icon_navi a:nth-child(2) {
    background-image: url(../img/icon02.png);
}

.icon_navi a:nth-child(3) {
    background-image: url(../img/icon03.png);
}
.icon_navi a:nth-child(4) {
    background-image: url(../img/icon04.png);
}
.icon_navi a:nth-child(5) {
    background-image: url(../img/icon05.png);
}
.icon_navi a:nth-child(6) {
    background-image: url(../img/icon06.png);
}
/*----------理念の部分に利用してます。フロートを使わない---------------------------*/
#flo{
	display: flex;
	margin: 0 auto;
	max-width: 1000px;
}
.flo01{
	width: 50%;
	height: auto;
	padding-left: 10px;
}
.tx_area{
	width: 50%;
	padding: 10px;
}
/*--------------------------------------- 
場所：  トップページ
詳細：特徴の部分
---------------------------------------*/
#area_blue{
	background: #D8EEFB;
	margin: 0 auto;
	width: 100%;
	height: auto;
	padding: 0 0 30px 0;
}

#area_tokutyo{
	max-width: 1000px;
	width: 100%;
	height: 23.75rem;/*この高さが大事*/
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0 auto;
}

.t_box01{
	width: 48%;
	height: 160px;
	margin: 10px 0;
	background:url("../img/t_box_back.png") no-repeat;
	position: relative;/*起点を作る*/
	overflow: hidden;
}
.t_box01 a{
	width: 100%;
	height: 100px;
	position: absolute;
	top:0;
	left: 0;
}
.t_box02{
	padding: 10px 10px 20px 130px;
	width: 100%;
}
.t_box02 p{
	line-height: 1.85rem!important;
}
.t_box01a ::before{/*aタグに設定している*/
	content: "";
	position: absolute;
	top:15px;
	left: 10px;
	background:url("../img/t_icon01.png") no-repeat;
	background-position:10px 10px;
	height: 6.25rem;
	width:100px;
	text-decoration: none;
	transition: all .2s ease-in;
}
.t_box02a ::before{/*校舎*/
	content: "";
	position: absolute;
	top:32px;
	left: 10px;
	background:url("../img/t_icon02.png") no-repeat;
	background-position:10px 10px;
	height: 9rem;
	width:100px;
	text-decoration: none;
	transition: all .2s ease-in;
}
.t_box03a ::before{
	content: "";
	position: absolute;
	top:10px;
	left: 10px;
	background:url("../img/t_icon03.png") no-repeat;
	background-position:10px 10px;
	background-size: 100px;
	height:100px;
	width:100px;
	text-decoration: none;
}
.t_box04a ::before{/*ノートとペン*/
	content: "";
	position: absolute;
	top:22px;
	left: 13px;
	background:url("../img/t_icon04.png") no-repeat;
	background-position:10px 10px;
	height: 6.25rem;
	width:100px;
	text-decoration: none;
}
.english{
	font-size: 0.7rem !important;
	letter-spacing: 0.1rem;
	color: #1F468C;
}
.midasi_t{
	font-size: 1.1rem !important;
	padding: 0 0 5px 0;
}
.setumei{
	font-size: 0.8rem !important;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.t_box01 a:link{
	text-decoration: none;
	color: #353535;
}
.t_box01 a:visited{
	text-decoration: none;
	color: #353535;	

}
.t_box01 a:hover{
	opacity: 0.6;
	transition: all .2s ease-in;
}
/*-----ギャラリーページ------*/
.gallery{
	max-width: 1000px;
	margin: 0 auto;
}
/*-----ニュースエリア------*/
.news_area{
	max-width: 1000px;
	margin: 0 auto;
}

.topics_area{
	max-width: 1000px;
	margin: 0 auto;
}

/* ------------------------------
   loopSlider
http://black-flag.net/jquery/20110707-3305.html
------------------------------ */
.loopSliderWrap {
    top: 0;
    left: 0;
    height: 300px;
    overflow: hidden;/*ボックス内に収まらない時に隠す*/
    position: absolute;
}
 
.loopSlider {
    margin: 0 auto;
	width: 1000px;
}
 
.loopSlider ul {
    height: 300px;
	padding: 0;/*これが大事*/
	margin: 0;/*カラム落ちを防ぐ*/
	width: 100%;
    float: left;
    overflow: hidden;
}
 
.loopSlider ul li {
    width: 330px;/*pxじゃないとだめ　画像は320pxで作る事*/
    height: 300px;
    float: left;
    overflow: hidden;
}
 
/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
.loopSliderWrap:after {
    content: "";
    display: none;
    clear: none;
}

/*-----ギャラリー部分で利用------*/
.slider_area{
	width: 100%;
    overflow: hidden;/*ボックス内に収まらない時に隠す*/
    position: relative;
}
.slider01{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
}
.slider01 img{
    height: auto;
    width: 100%;
	padding: 0 5px !important;
}


.member_list_back{
    position: relative;
    float: left;
    width: 33.3333%;
    height: 0;
    padding-bottom: 24%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top: 2px #fff solid;
    border-right: 2px #fff solid;
    overflow: hidden
}
.member_list_front {
    padding: 20px;
    height: 100%;
    position: absolute;
    width: 100%;
}
.frontNameBox {
    padding: 25px;
    font-size: 1.1rem;
}


/*MOREリンクボタン*/
.el_moreLink{
    display: block;
    text-align: center;
}
.el_moreLink *{
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
.el_moreLink a{
    background-color: #fff;
    border: 1px solid #00859b;
    border-radius: 3px;
    height: 32px;
    line-height: 32px;
    font-size: 1.1rem;
    letter-spacing: 1px;
    display: inline-block;
    color: #000;
    padding: 0 2rem;
}
.el_moreLink a:hover{
    background-color: #00859b;
    color: #fff;
}

/*---------ホバー部分------*/
.s_item{
}
.hover002{
	width: 100%;
	}
.hyouzi01{
	overflow: hidden;
    position: absolute;
	margin: 0;
	top:0;
	left: 0;
	padding: 16px 24px;
	box-sizing: border-box;
	color: #fff;
	background: rgba(205,92,92,.9);
	opacity: 0;
    -webkit-transform: translate3d(0%, -100%, 0);/*3dで移動させるのがポイントなのでは？？*/
    transform: translate3d(0%, -100%, 0);/*下に100%ずらす*/
	transition: opacity .6s, transform .6s;
}
.s_item_img a:hover{
	opacity: 1;
	transform: none;
}


/*--------member_listの部分  https://www.esz.co.jp/recruit/--------------*/

.member{
	width:100%;
	max-width: 1000px;
	margin: 0 auto;
	clear: both;
}

.member_list{
    position: relative;/*親要素　相対配置に指定　member_list_backを子要素にするために指定*/
	float: left;
    width: 33.3333%;
    height: 0;/*なくてもよい*/
    padding-bottom: 24%;
    background-repeat:  no-repeat;/*はみ出してもリピートしない*/
    background-position:  center;/*中心に来るように指定*/
    background-size:  cover;/*縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する 画像は場所ごとに変えたいので、直接書き込む*/
    border-top: 2px #fff solid;
    border-right: 2px #fff solid;
    overflow: hidden;/*はみ出した分は表示しない*/
}
.member_list:nth-child(3n){
    border-right: none;
}
.member_list *{
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
.member_list_front{
    padding: 20px;
    height:  100%;
    position:  absolute;
    width: 100%;
}
.member_list_front .el_job{
    font-size: 0.6rem;
    border: 1px solid #333;
    line-height: 25px;
    height: 25px;
    padding:  0 2em;
    display: inline-block;
    letter-spacing: 2px;
}
.frontNameBox{
    padding: 25px;
    font-size: 0.9rem;
}
@media screen and (max-width: 380px) {
    .frontNameBox {
        padding: 10px 20px;
    }
}

.frontNameBox .el_name{
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    margin: 5px 0 8px;
    letter-spacing: 2px;
}


/*----------------ホバー時-------------------*/
.member_list_back{
    position: absolute;/*子要素として、配置するため*/
    left: 0;/*位置を指定*/
	top: 0;/*下の位置*/
    width:  100%;/**/
    height: 100%;/*高さも指定*/
    color:  #fff;
    text-align: center;
}
.backNameBox{
    -webkit-transform: translate3d(0%, -50%, 0);/*3dで移動させるのがポイントなのでは？？*/
    transform: translate3d(0%, -50%, 0);/*下に配置*/
    text-transform: uppercase;/*大文字にする*/
    bottom: 45%;/*%で指定しておけば、小さくなっても相対配置ができる*/
    font-size:  1.1rem;
}
.backNameBox .el_name{
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 3px;
    display: block;
}
.el_memberLink span{
    background-color: #fff;
    border: 1px solid #00859b;
    border-radius: 3px;
    height: 32px;
    line-height: 32px;
    font-size: 0.8rem;
    letter-spacing: 1px;
    display: inline-block;/*一列に並べる？？*/
    color: #000;
    padding: 0 2rem;
}
.el_memberLink span:hover{
    background-color: #00859b;
    color: #fff;
}

.member_list_back .el_memberLink{
    -webkit-transform: translate3d(0%, 100%, 0);
    transform: translate3d(0%, 100%, 0);
    top: 55%;/*上から55%の位置に*/
    margin: 20px 0;
}
.backNameBox,
.member_list_back .el_memberLink {
    position: absolute;
    width: 100%;
    left: 0;
    opacity: 0;
}
.member_list:hover .member_list_back,
.member_list.hover .member_list_back{
    background-color: rgba(8,80,160,0.7);/*背景の色に変化する*/
}


.member_list:hover .backNameBox,
.member_list.hover .backNameBox,
.member_list:hover .member_list_back .el_memberLink,
.member_list.hover .member_list_back .el_memberLink {
    -webkit-transform: translate3d(0%, 0%, 0);
    transform: translate3d(0%, 0%, 0);
    opacity: 1;
}

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

.button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #8FAB32;
-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);
}

.button_blue {
  position: relative;
  display: inline-block;
  padding: .5rem 4rem;
  color:#fff;
  /*border: 1px solid #A9C741;*/
  background:linear-gradient(#2ECCD1,#03BBE9);/*元の色*/
	-webkit-background:linear-gradient(#2ECCD1,#03BBE9);
  text-align: center;
  text-decoration: none;
  transition: .3s;
	-webkit-transition: .3s;
}
.button_blue:hover ,.button_blue a:visited{
  color: #fff;
}
.button_blue::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background:linear-gradient(#02BBEA,#0069FE);/*この色になる　横線のグラデーション*/
	-webkit-transform-origin: right top;
  transform-origin: right top;
	-webkit-transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}

.button_blue:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

/*--------アニメーション----------------*/
.sa {
  opacity: 0;/**/
  transition: all .8s ease-out;
}
 
.sa.show {/*初期状態に戻る*/
  opacity: 1;
  transform: none;
}
 
.sa--lr {
  transform: translate(-100px, 0);/*左から右え*/
}
 
.sa--rl {
  transform: translate(100px, 0);/*右から左に*/
}
 
.sa--up {
  transform: translate(0, 50px);/*下から上に 距離を変更*/
}
 
.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);
}
/*-----------ボックスエリア------------------*/
.box_area{
	width: 100%;
	max-width:1000px;
	height: auto;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.ba01,.ba02{
	width: 23%;
	height:auto;
	margin: 10px;
}
/*-----------ニュースエリア------------------*/
.news_area02{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	font-size: 0.8rem;
	position: relative;
}
.news_area02 a{
	text-decoration: none;
	text-decoration-color: #333333;
}
.news_area02 a:hover{
	text-decoration: underline;
	transition: all .6s ease;
}
.news_area02 ul{
	width: 100%;
	margin: 0;
	padding: 0;/*初期値を消す*/
}
.news_area02 li{
	max-width: 1000px;
	width: 100%;
	height: 2.5rem;
    margin: 20px 0;
    padding: 0 0 35px 0;
	border-bottom: dotted 1px #E0E0E0;
	display: flex;
}
.news_area02 span{
	display: block;
}
.time{
	margin: 0 40px 0 20px;
	letter-spacing: 3px;
}
.icon_btn{
	height: 25px;
	color: #fff;
	background-color: #74A1C2;
	font-size: .7rem;
	padding: 5px 40px;
	letter-spacing: 1px;
}
.icon_btn_new{
	height: 25px;
	color: #fff;
	background-color: #FF3366;
	font-size: .7rem;
	padding: 5px 45px;
	letter-spacing: 1px;
}
.news_text{
	margin: 0 0 0 50px;
	letter-spacing: 1px;
	position: absolute;
	left: 338px;
	overflow: hidden;
}
.more{
	position: absolute;
	right: 10px;
	letter-spacing: 2px;
}
/*-------悩みについて-------*/

#nayami{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	
}


/*-------コンテンツエリアついて-------*/
.contents_area{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	height: auto;
	overflow: hidden;
}

/*-----------------------------
場所：ガイドエリア
コンテンツが並ぶ場所
---------------------------------*/
.contents_areas02{
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.contents_areas02_sub{
	width: 50%;
	padding: 20px 0;/*上下のスペースを空ける*/
}
.contents_areas02_sub img{
	width: 100%;
}

.c_area01{
	position: relative;
	max-width: 1000px;
	max-height: 420px;
	width: 100%;
	height: 400px;
	margin: 35px 0;/*上下に隙間を作る*/
}
.l_img_box{
	position: absolute;
	width: 58%;
	top:0;
	left: 0;
	z-index: 1;
}
.r_img_box{
	position: absolute;
	width: 58%;
	top: 10px;
	right: 0;
	z-index: 1;
}
.cr_box{
	position: absolute;
	height: 400px;
	right: 0;
	top: 40px;
	width: 60%;
	background-color: #EEEEF0;
	z-index: 0;
}
.cl_box{/*左に文字がある*/
	position: absolute;
	left: 0;
	top: 40px;
	width: 60%;
	background-color: #EEEEF0;
	z-index: 0;
}
.cr_box img,.cl_box img{
	width: 100%;
	height: auto;
}
.cr_box_text{
	padding-top: 50px;
	padding-right: 40px;
	padding-left: 40%;
}
.cl_box_text{
	padding-top: 50px;
	padding-left: 7%;
	width: 66%;
	height: 400px;
}

/*-----------qaエリアについて---------------------*/
.qa_area{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}

/*-----------流れページのエリアについて--------------------*/

.nagare_area_sub{
	max-width: 770px;
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	margin: 0 0 20px 0;
	
}
.nagare_text{
	width: 78%;
	padding: 0 10px 0 0;
}
.nagare_icon{
	width: 22%;
}
.pink02{
	color: #FC7571;
}
.sky_blue{
	color:#7FE5E5;
}

/*-----------プライバシーポリシーのボタン部分--------------------*/

.pri_area{
	width: 100%;
	/*max-width: 770px;*/
	justify-content:space-between;/*均等に配置する*/
	display: flex;
	flex-direction: row;/*子要素を横並びにする*/
	flex-wrap: nowrap;
}
.pri_area img{
	width:100%;
}
.pri_01{
	width: 48%;
}

.pri_02{
	width:48%;
}

/*-----------コメントエリアの部分で利用--------------------------*/
/*お悩みのブルーボックス部分*/
.nayami_area{
    width: 100%;
    padding: 15px 10px 20px 10px;
	margin: 0 0 30px 0;
    border: solid 1px #70BDCB;
	border-radius: 5px;
	box-shadow: 12px 12px 0px 0px rgba(116, 178, 189, 0.45);
}
.midasi_area{
    width: 100%;
    padding: 10px 10px;
    border: solid 1px #70BDCB;
	background-color: #F6F5F3;
}
.midasi_area p a:link{
	text-decoration: none!important;
}
.nayami_area p a:link{
	text-decoration: none!important;
}
/*------------コンテンツの目次エリア--------------------------*/

.mokuzi_area{
	background-color: #F9F9F9;
	width: 100%;
}
.mokuzi_area table{
	width: 100%;
	padding: 6px;
}

.mokuzi_area p{
	padding: 5px 0 5px 1rem;
}
.mokuzi_area p a:link{
	text-decoration: none;
}
.mokuzi_area p a:visited{
	text-decoration: none;
}


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

.pagetop {
    display: none;
    position: fixed;/*場所を固定する*/
    bottom: 20px;/*位置の調節*/
    right: 50px;
}
.pagetop a {
	background: url("/img/wrap_arrow.svg") no-repeat;
	background-size: 100% 100%;
	width: 50px;
	height: 50px;
	/*line-height: 10rem;*/
    display: block;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 1.0;
}

.pagetop a:hover {
    display: block;
    /*background-color: #b2d1fb;*/
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
/*-----------------------------------------

コメントエリア　ボックス
場所：全体
-----------------------------------------*/

.come_area{/*ブルーの斜め線ボックスエリア*/
	padding: 1.5rem 1.5rem;
    margin: 1.5rem 0;
    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);
}

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

バナー装飾
場所：全体　h3部分
-----------------------------------------*/
.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);
}
/*-----------------------------------------

写真が並ぶ見本エリア
場所：トップページ
-----------------------------------------*/
.concept_area_back{/*背景をいれる*/
	width:100%;
	background-color: #EAF8FF;
}
.concept_area{
	max-width:1200px;
	width: 100%;
	margin: 0 auto;
	padding: 70px 0 40px 0;
	margin-top:20px;
	margin-bottom:20px;
	text-align: center;
}
.concept_area img{
	width: 100%;
}
/*-----------------------------------------

金額のエリア
場所：トップページ
-----------------------------------------*/
.price_area_back{
	width:100%;
	padding: 0 0 50px 0;
}
.price_area_block{
	max-width:1200px;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 50px 0;
}
.p_block_area{
	max-width:1200px;
	display: flex;
	width: 100%;
	justify-content:space-between;
	margin: 0 auto;
}
.p_block_sub{
	width: 30%;
}
.p_block_sub dt{
	background-color: #53c7d0;
	color: white;
	text-align: center;
	padding: 15px 0 15px 0;/*サイズの調節*/
	 border: solid #BDBDBD;
	border-width: 1px 1px 0 1px;
}

.p_block_sub dd{
	margin: 0;
	padding: 20px 0;
	text-align: center;
	border: solid #BDBDBD;
	border-width: 1px 1px 0 1px;
}
.p_block_sub dd:first-child{
	background-color: #ece9e6;
	margin: 0;
	padding: 20px 0;
	text-align: center;
	border: solid #BDBDBD;
	border-width: 1px 1px 0 1px;
	font-size: 1.2rem;
}
.p_block_sub dd:last-child{
	border: solid #BDBDBD;
	border-width: 1px 1px 1px 1px;
}
.center01{
	text-align: center;
}
.center01_t01{
	text-align: center;
	font-size:1.45rem;
}
.center01_b{/*トップページ*/
	color:#03bbe9;
	
}
.pr_center{
	text-align: center;
	font-size: 1.5rem;/*文字サイズを調節*/
	line-height: 2.0rem;
}
.pb_t{
	font-size: 1.2rem;
	background-color: #f7f5f5;
	font-weight: 600;
	color: #491F20;
}
/*-----------------------------------------

金額のエリア
場所：スマホ時　固定ボタン
画面の下に表示
-----------------------------------------*/




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

point BOX部分

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

.point_box{
	position: relative;
    margin: 2.8em 0 2em;
    padding: .8em 1em 1em;
    border: solid 3px #069dcb;
    border-radius: 3px;
}
.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;
}
.p_name a{
	text-decoration: none;
	color: #069dcb;
}
.center{
	text-align: center;
}

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

プランの料金エリア
場所：船の料金エリアで利用　（複数ページ）

-------------------------------------------*/
.pp_area_back{/*スマホ時　ブルーにする*/

}
.pp_area{/*ボックスの親*/
	display:flex;
	justify-content :space-between;
	margin: 0 auto;
	width:100%;
}
.pp_area_box{/*子ボックス*/
	width:32%;
}
.pp_area_box img{
	width:100%;
}
.pp_price{/*文字がブルー*/
    text-align:center;
	font-size:1.65rem!important;
	color:#0099FF;
}
.pp_price01{/*文字が灰色*/
    text-align:center;
	font-size:1.65rem!important;
	color:#333333;
}
.pp_price_s{
	font-size:0.6rem;
}
.pp_place{
	text-align:center;
	font-size:0.8rem;
}
.pp_txt_s{/*スマホ時のみ表示*/
    text-align:left;
	display:none;/*非表示*/
}
.pp_area_t01{/*プライスのタイトル部分*/
    text-align: center;
    font-size: 1.5rem;
    font-weight: 100;
	margin:0!important;
}
.pp_area_t01a{/*タイトルの色*/
	color:#0099FF;
}
.pp_area_t02{
	text-align:center;
	font-size:0.85rem!important;
	margin-bottom:30px!important;
}
/*-------------------------------------

3つの画像が並んでいるエリア スマホだと1列に並ぶ

--------------------------------------*/
.contents01_area_back{
	width:100%;/*幅は目一杯にする*/
	background-color:#e4f2ff;
	/*background-color:#f7f7f7;*/
	padding-top: 50px;
	/*height: 30%;*/
}
.contents01_area{
	width: 100%;
	max-width: 1200px;/*全体のサイズ*/
	margin: 0 auto;
	/*display: flex;
	justify-content:space-around;
		color: #FFFFFF!important;*/
}


.three_area{
	max-width: 1100px;/*全体のサイズ*/
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
	margin: 0 auto;
	
}
.three_area p{
	padding: 0 13px;
}
.three_area01{/*利用：https://maruyufoods.co.jp/saiyo/product/*/
	width:30%;
	margin: 0 0 60px 0;/*大きめにしている*/
	background-color: white;
	box-sizing: border-box;
    border-radius: 20px;
	padding: 0 0 25px 0;/*白枠を広げる*/
}
.three_area01 img{
	width: 100%;
	border-radius: 5%;
	height: auto;
}
.three_area01 p{
	width: 100%;
}
/**/
.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%;
}
/*customerページ*/
.three_area03{
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	margin: 0 auto;
}
.three_area03_sub{
	width: 30%;
}
.three_area03_sub img{
	width: 100%;
}
.three_area03_sub a{
	text-decoration: none;
}
/*-------------------------------------------

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

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

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

場所:価格部分
詳細:価格部分のテーブル、値段表記などをきれいに修正する

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

.table_price{
	width: 100%;
    margin: 0 0 25px 0;
    padding: 0;
    border-collapse: collapse;
    text-align: center;
}	
	
.table_price td, .table_price th{
	margin: 0;
	border: 1px solid #CCCCCC;
    text-align:center;
}
.table_price p{
   padding: 0!important;
   font-size: 0.75rem!important;/*文字サイズを小さくする*/
   line-height:1.2rem!important;
}

/*よくある質問のテーブル*/
.qa_table{
	width: 100%;
}

/*------------------------
場所：トップページ 4つの場合
2022 8/3に制作

--------------------------*/
.concept_area02_back{
	background-color: #f9f9f9;
}
.concept_area02{
	max-width:770px;/*サイズは調節しよう*/
	width: 100%;
	margin: 0 auto;
	display: flex;
	padding: 50px 0;
	justify-content:space-between;
}
.concept02_sub{
	width: 23%;
	margin: 0 20px;
}
.concept02_sub img{
	max-width: 100%;
}
.concept02_sub h3{
	text-align: center;
}
.ca_01{/*ｐタグの部分*/
	text-align: center;
	padding: 50px 0 0 0;
}
.ca_02{/*h3タグ*/
	text-align: center;
	letter-spacing:0.15rem;
}
.ca_03{/*読解力など文字部分*/
	text-align: center;
}
.ca_04{/*数字を大きくする。色を変える*/
	/*color:#f76262;*/
	color:#2e5ef7;
	font-size: 2.5rem;
}
/*------------------------
場所：トップページ 3つ
770pxのver
2024 10/20に制作

--------------------------*/
.concept_area02a_back{
	/*background-color: #f9f9f9;*/
}
.concept_area02a{
	max-width:770px;/*サイズは調節しよう*/
	width: 100%;
	margin: 0 auto;
	display: flex;
	padding: 40px 0;
	justify-content:space-between;
}
.concept02a_sub{
	width: 30%;
	margin: 0 15px;
}
.concept02a_sub img{
	max-width: 100%;
}
.concept02a_sub h3{
	text-align: center;
}
.ca_01a{/*ｐタグの部分*/
	text-align: center;
	padding: 20px 0 0 0;
}
.ca_02a{/*h3タグ*/
	text-align: center;
	letter-spacing:0.15rem;
}
.ca_03a{/*読解力など文字部分*/
	text-align: center;
}
.ca_04a{/*数字を大きくする。色を変える*/
	/*color:#f76262;*/
	color:#2e5ef7;
	font-size: 2.5rem;
}
/*------------------------------------------------------------

左から右に画像が表示されていく
まとめない事
2024.10.20に追加
------------------------------------------------------------*/
.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);/*０の位置に戻す*/
}
.fadein03 {
transform: translate(0, 30px);/*下Y方向に30pxずらしている*/	
  opacity : 0;
  transition : all 1s;
}
.fadein03.active{/*ここを追加する*/
  opacity : 1;
	bottom: 0;
	transform: translate(0, 0);/*０の位置に戻す*/
}

/*--------------------------------------- 
場所：よくある質問 /qa/
詳細：
---------------------------------------*/
.qa_btn_area{
	width: 100%;
	display: flex;
	margin: 15px 0 0 0;
}
.qa_btn{
	width: 18%;
	color: white;
	background-color: #0d56bd;
	text-align: center;
	padding: 5px 0;
	margin: 0 8px 0 0;
	border-radius: 5px;
}
.qa_btn p{
	font-size: 0.8rem!important;
}
.qa_btn a{
	color: white;
	background-color: #0d56bd;
	text-decoration: none;
	padding: 0;
}
.qa_btn a:hocer{
	opacity: 0.7;
	transition: 0.5s;
}
.table_qa{
	width: 100%;
}
/*--------------------------------------- 
場所：セクション section
詳細：
---------------------------------------*/
section >ul{
	margin:0 0 0 10px;
	padding:0;
}
section >ol{
	margin:0 0 0 10px;
	padding:0;
}