/*--------------------------------------- 
全体共通だよん　マルユーさん
会社サイト　本体
---------------------------------------*/
.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;

}
/*-------------------------------------------------------------*/

.smaho{
	display:none; /*--大きい画面時は表示させない、スマホ時に表示する---*/
}
.smaho01{
	visibility:hidden;/*隠す*/
}

hr{
border:none;
border-top:dashed 1px #CCC;
height:1px;
color: #CCC;
width:100%;
}
body{
	margin: 0 auto;
	background-attachment: fixed;/*ここを固定させてる*/
	/*background-color:#f5f6f7;*/
	font-family:"Yu Mincho","Meiryo","MS Pゴシック",sans-serif;
}
ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
dl{
	margin:10px 10px;
}
li{
	
}
#container {
	width: 1200px;/*1000pxだった*/
	clear:both;
	margin: 0 auto;
	background-color:#FFF;
}
h1 {
    font-size:0;
	margin: 0;
	padding:0;
}
h2 {
    margin: 0 0 10px 0;
    padding: 0px;
    font-size: 1.1rem;
    line-height: 1.8rem;
}
/*h3 {
	margin: 0 0 10px 0;
	padding: 0px;
    line-height: 29px;
    font-size: 18px;
}*/
h3 {
    margin: 0 0 10px 0;
    padding: 0px;
    font-size: 1.1rem;
    line-height: 1.8rem;
}
a:hover{
	opacity:0.8;
}


p {
    font-size: 0.9rem;
    line-height: 2.3rem;
    margin: 0;
    font-weight: 500;
}

/*
	font-size: 0.9rem;
	line-height:1.9rem;
	margin:0;

*/
.arrow{
	vertical-align: middle;
}
.box1 ul,.box1a ul{
	display: flex;
	justify-content:flex-end;
	width: 730px;
}
.box1 li,.box1a li{
	padding: 13px 15px 0 15px;
	font-size: 0.9rem;
}
/*上に表示されている文字の色*/
.box1 li a{
	text-decoration: none;
	color:#000000;/*文字の色*/
	/*color: #131313;*/
}
.box1a li a{
	text-decoration: none;
	color:black;
}
.login_header a{
	color: #FFFFFF!important;
}


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

管理画面用
左ナビ　icon部分のグラデーションなど

----------------------------------------------*/
.icon_navi{
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(245,246,247,1) 100%);
	border-radius: 10px;/*角を丸くする*/
}


/*--------------------------------------- 
  naviの中だよん
---------------------------------------*/
#navi {
	float: right;
	width: 210px;
	margin-top: 0px;
	padding: 0;
	background-color: #fff;
}
/*画像の最大サイズを決めておく*/
#navi img{
	width: 100%;
	max-width: 210px;
}
#navi h3 img{
	width: 100%;
}

#navi a:hover {
	opacity:0.5;
}

#navi2 {
	float: left;
	width: 210px;
	font-size: 12px;
}
#navi1 {
	height: 196px;
	width: 300px;
	background-repeat: no-repeat;
}
#navi ul,#navi2 ul {
	list-style-type: none;
	width: 100%;
	display: block;
	margin: 5px 0 0 0;	
	padding: 0;
	clear:both;
}
#navi li,#navi2 li {
	width:100%;
	display:block;
	list-style-type: none;
	clear: both;
	font-size: 12px;
	line-height: 50px;
	padding: 0 0 0;
	/*border-bottom: #CCCCCC 1px solid;*/
}
#navi li a,#navi2 li a{
	text-decoration:none; /*-- アンダーバーを消す-----*/
	color:#666;
	display:block;
	line-height:50px;
	margin: 0;
	padding: 0;
}
#navi li a:hover,#navi2 li a:hover{
	opacity:0.5;
}
.icon_navi li img{/*位置を決める*/
	margin: 0px 20px -8px 0;
}

/*---iphoneで拡大するのを防ぐ----input[type=text] {
  font-size: 16px;
  transform: scale(0.8);
}
--*/
/*--------------------------------------- 
 スライダー部分
---------------------------------------*/
#bx-pager {
	text-align: center;
}
#bx-pager img{
	width: 100%;/*4つ並んだ画像部分*/
	height: 135px;
}

/*------------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;
}


/*--------------------------------------- 
 アコーディオングローバルナビに利用しています
cssだけで作っています
---------------------------------------*/

#gnabi{
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	font-size: 13px;
}
#dropmenu{
  list-style-type: none;
  width: 1000px;
  height: 40px;
  margin: 0 auto 0;
  padding: 0;
  background: #F1EBEB;
  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;
  z-index: 1;
  font-weight: normal;
}
#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  color: #000000;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
 font-weight: normal;
}
#dropmenu li:hover > a{
  background: #F9F7F7;
  color:#000000 ;
}
#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}
#dropmenu li ul{
	list-style: none;
	position: absolute;
	top: 100%;
	left: -22px;
	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;
  color: #fff;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
#dropmenu li ul li a{
  padding: 13px 15px;
  background: #F1EBEB;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu li:hover ul li{
  overflow: visible;
  height: 38px;
  border-top: 1px solid #E5E5E5;/*境界線の上線*/
  border-bottom: 1px solid #E5E5E5; /*境界線の下線*/
}
#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;
}


/*--------------------------------------- 
 ストロングが蛍光ペン風になる 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,.box1a{
	width:1000px;/*大きいサイズ時*/
	display: flex;
}
.box1 p,.box1a p{
	width: 100px;
}
.login_header{
	margin: 0;
	background: linear-gradient(90deg, rgba(255,138,133,1) 0%, rgba(252,109,120,1) 100%);
	color: #FFFFFF;
	padding: 15px 15px;
	border-radius: 100vh;
	text-decoration: none;
}
.box2{
	width: 0px;
}
.box2 ul{
	/*height: 60px;*/
	list-style:none;
	margin:0;
	padding:0;
}
.box2 li{
	/*height: 60px;*/
	margin: 0 0 0 0;/*調節*/
	
}
.he_btn{
	display: flex;
	justify-content:flex-end;/*右に配置する */
}
/*---------------------------------------
メンバー一覧部分
---------------------------------------*/
.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;
}
/*--------------------------------------- 
 写真が変化する　グルメ紹介ページに使用
---------------------------------------*/
.grume_photo{
	width: 100%;
}
.grume_photo p img{
	width: 100%;
	border-radius:10px;
}
.grume_photo ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}

.grume_photo li {
	flex-wrap: wrap;
    margin: 0;
	padding: 0.4%;
    width: 170px;
	list-style: none;
	border-radius: 20px;
}
.grume_photo li img {
    width: 170px;
    height: auto;
	border-radius:10px;
}

/*--------------------------------------- 
 写真が変化する　メンバーページに使用
よつ写真
---------------------------------------*/
#user_head{
}
.photo{
	width: 400px;
	float: left;
	padding: 0 15px 0 0;
}
.photo ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}

.photo li {
	flex-wrap: wrap;
    margin: 0;
	padding: 0.4%;
    width: 92px;
	list-style: none;
	border-radius: 20px;
}
.photo li img {
    width: 92px;
    height: 92px;
	border-radius:10px;
}
.photo img{
	border-radius:10px;
} 
.message_user{
	width: 94%;
}
#shumi{
	float: none;
	clear: both;
}

/*---------------------------------------
header のなかみ html5で記述
---------------------------------------*/
#header {
	max-widh:1000px ;
	margin: 0 auto;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content:space-between;
	background-color: rgba(255,255,255,1);
}
.header_back{
	width: 100%;
	background-color: #FFFFFF;
}

#header.m_fixed {/*途中からここを+*/
	position: fixed;
	max-widh:1000px ;
	top:0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	background:rgba(255,255,255,0.95);/*薄目の白にする*/
	/*background-color: #fff;/*色を合わせる*/
	margin: 0 auto;
}


.menu03{ /*ログイン、アカウント登録*/
	margin: 0 10px;
}
.menu04{
	padding: 20px 45px 0 0;
}
.menu05{
	padding: 20px 35px 0 0;
}
/* ログインボタンの部分 */
.btn_login {
  position: relative;
  display: inline-block;
  padding: 12px;
  text-decoration: none;
  color: #FFF;
  background: #65D0A6;/*色*/
	border-radius: 4px;
	font-size: 12px;
	margin: 10px 0;

}

.btn_login:active { /*押したとき*/
	opacity: 0.8;
}


@media (min-width: 768px) {/* 大きい画面用の設定 */	
	
#header{
	max-width: 1000px;
}

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


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

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

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

/*--検索部分--*/
.menu02,.menu03{ 
	display: none;
}
/*--写真のサイズ--*/

#main img {
	max-width: 770px;
	height: auto;
}	
}

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

h1 {
	/*padding:0;
	margin: 0;*/
}
.ai2 {
	display:inline-block;
	line-height: 120px;
	margin: 0;
}


#contents {
	margin:0 auto;/*中央に浮く*/
	max-width:1000px;
	width: 100%;
	padding:0;
	clear:both;
}
#main00{
	width:1000px;
}
/*-----------------------------------------------------------------------
うなぎ新規

-------------------------------------------------------------------*/
.main_area_back {/*うなぎ背景をつける*/
    width: 100%;
    height: 620px;
    margin: 0 auto;
    padding: 50px 0 0 0;
    background-color: #fefbec;
    background-image: url("../img/unagi/main_unagi_back.png");
    background-repeat: no-repeat;
    background-position: right 50% bottom 10%;
}
.main_area{/*うなぎ画像*/
	width: 100%;
	max-width:360px;
	margin: 0 auto;
	height: auto;
	display: flex;
	align-items: center;
	text-align: center;/*写真を中心にする*/
}
.main_area img{
	width: 100%;
}

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

ログイン部分

-------------------------------------------------------------------*/
#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_img/back1a.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("../img/back_img/back1.jpg");
	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;  
}

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

topページエリア

----------------------------------------------------------*/
.contents01_area_back{
	width:100%;
	background-color: #FFFFFF;
	padding: 0;/*隙間を空ける*/
	clear: both;
	/*marginだと動画のfix背景時に穴あくので、paddingに変更*/
}
.contents01_area{
	max-width: 1100px;/*広げる*/
	width: 100%;
	margin: 0 auto;
	background-color: #FFFFFF;
}
.contents01_area img{
	max-width: 100%;
}
.contents01_area_back01{
	width:100%;
	background-image: url("../img/nayami_back.png");
	background-repeat:  repeat-x;
	margin: 30px 0 0 0;/*隙間を空ける*/
}

.contents01_area_back02{
	width:100%;
	background-color:#f2fafd;
}

.center01a{
	padding: 50px 0 30px 0;/*悩み部分*/
	text-align: center;
}
.contents01_area01{/*悩み部分*/
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
.contents01_area{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	background-color: #FFFFFF;
}
.t_title01{/*タイトル部分*/
	text-align: center;
	padding: 50px 0 0 0;
	font-size: 1.4rem;
	letter-spacing:0.3rem;/*文字の間隔*/
	line-height: 0;
}
.t_title02{
	text-align: center;
	font-size: 0.8rem;
}
/*------3つの画像が並んでいるエリア スマホだと1列に並ぶ----*/
.three_area{
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
	
}
.three_area01{
	width:30%;
	margin: 0 0 50px 0;
}
.three_area01 img{
	width: 100%;
}
.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%;
}
/*-----------------------------------------

/service/sale.php

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

.list_area_back{
	width:100%;
	background-color: #f7f3ef;
	margin: 30px 0;/*隙間を空ける*/
	clear: both;
	/*marginだと動画のfix背景時に穴あくので、paddingに変更*/
}
.list_area{
	max-width: 1000px;/*広げる*/
	width: 100%;
	margin: 0 auto;
	/*background-color: #FFFFFF;*/
}
/*リスト*/
.list_three_area{
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.list_three_area01{
	width:30%;
	margin: 0 0 50px 0;
	background-color: white;
}
.li_img img{
	max-width: 100%;
	padding: 10px;
}
.list_three_area01 p{
	width: 100%;
	padding:0 20px;
}
.li_title{
	text-align: center;
	margin: 15px 0;
}
.li_p {
    font-size: 0.8rem;
    line-height: 2.0rem;
    margin: 0 0 20px 0;
}
.li_style01{
	color: #909090;
	font-size: 0.75rem;
	line-height: 1.5rem;
}
.li_img_btn{
	text-align: center;
	margin: 30px 0 15px 0;
}


/*----------------------------
2列の部分
場所：トップ（画像が左にある場合）
-------------------------------------*/
.two_areas{/*親ボックス*/
	width: 100%;
	margin: 30px 0;
	display: flex;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:space-between;/*両端に置く*/
	
}
.two_areas01{/*左の写真エリア*/
	width:50%;
	margin: 0 0 20px 0;
}
.two_areas01 img{
	width: 100%;
}
.two_areas02{
	width: 50%;
	padding: 10px 10px 0 40px;/*文字の間隔を空ける*/
}
.two_areas02 img{
	width: 100%;
}
/*----------------------------
2列の部分
場所：マンション販売　（画像が右にある場合）
-------------------------------------*/
.two_areas_01{/*親ボックス*/
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:space-between;/*両端に置く*/
	
}
.two_areas01a{/*左の写真エリア*/
	width:50%;
	margin: 0 0 20px 0;
}
.two_areas01a img{
	width: 100%;
}
.two_areas02a{
	width: 50%;
	padding: 10px 10px 0 40px;/*文字の間隔を空ける*/
}
.two_areas02a img{
	width: 100%;
}


/*----------------------------
2列の部分
共通：マルユーとはの部分
-------------------------------------*/
.two_areas_hazimete{/*親ボックス*/
	width: 100%;
	display: flex;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:space-between;/*両端に置く*/
	
}
.two_areas01_photo{/*左の写真エリア*/
	width:50%;
	margin: 0 0 20px 0;
}
.two_areas01_photo img{
	width: 100%;
}
.two_areas02_txt{
	width: 50%;
	padding: 0 0 0 30px;
}
.two_areas02_txt img{
	width: 100%;
}



/*-----------------ここから画像が大きいエリア-------------------------------*/
.contents02_area_back{
	width:100%;/*幅は目一杯にする*/
	background-color:#f7f7f7;
	height: 460px;
}
.contents02_area{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content:space-around;
		color: #FFFFFF!important;
}
.two_area02{/*大きい画像*/
	margin: -20px 0 0 0;
	width: 600px;
}
.two_area02 img{
	width: 100%;
}

.two_area01{
	margin: 60px 0 0 0;
	width: 400px;
	color: black;
	padding: 0 20px 0 0;
}


/*--------------ログイン部分の制御-------------------------*/
.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;
}

/*-- トップの画面 --*/
#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.0rem;/*調節*/
	color: white;
	font-weight: 600;
	letter-spacing:0.1rem;/*文字の間隔*/
	text-shadow:2px 2px 3px #716a6a;
}

/*-------------------------------main部分-------------------------------*/
#main {
	float: left;
	width: 770px;
	margin: 0;
	padding:0;
	background-color: #FFFFFF;
}
#main img {
	height: auto;
	border-style:none;
}
.main1_back{/*追加　背景に動画が出るのを防ぐ*/
	width: 100%;
	background: white;
}
.main1{/*会社概要など*/
	max-width: 1000px;/*widthにすると、iframがバグります*/
	width: 1000px;
	margin: 0 auto;
	background-color: white;
}
.main1 img{
	max-width: 100%;
}

#main1 p{
	font-size: 0.9rem;
	line-height:1.9rem;/* 新しい書き方*/
	margin:0;
}

#main2 {
	float: right;
	width: 600px;
	margin: 0;
	padding:0;
}
/*-----main3はお問合せページで使っています -----*/
#main3 {
	width: 1000px;
	margin: 0;
	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-color:black ;/*#fe6a2e*/
	color:#FFF;
}
#footer a{
	text-decoration: none;
	color: white;
}
/*----フッターのコンテンツ部分　　---*/
.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;
	background-color: white;
	clear: both;

} 
.map1_back{/*動画のfix用に*/
	width: 100%;
	background-color: white;
}
#logo {
    float:left;
    margin:0;
	padding:0;
}
.m1{ 
   margin: 0 0 0 25px;
   padding: 0;
}
/*---------------------------------------
gnavi のなかみだよ

---------------------------------------*/
.gnavi_back{
	background: #fe6a2e;/* #0cb59b;もとの色*/
	position: relative;/*基点にする*/
}
#gnavi {
    max-width: 1000px;
	height: 60px;
	clear:both;
	z-index: 1000;
	margin: 0 auto;/*中央寄席*/
	background:#fe6a2e;/* #0cb59b;もとの色*/
	}
.gnavi_back.m_fixed {/*途中からここを+*/
	max-width: 100%;
	position: fixed;
	  top:15px;/*30だった*/
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
	z-index: 99999;
	width: 100%;
}

#gnavi ul {
    max-width:1000px;
	width: 100%;
    list-style:none;
	margin:0;
	padding:0;
	display: flex;
}
#gnavi li{
	width: 20%;
	height: 60px;
	padding: 18px 0 0 0;
	text-align: center;
	margin: 0;
}
#gnavi li a{
	color: white;
	text-decoration: none;
	font-size:0.75rem;
}
#gnavi img{
	border: 0;
}
#gnavi li a:hover{
	padding: 0;
	opacity:0.7;
 
}
/*--------------------------------------- 
  パンくずの中だよん
---------------------------------------*/
#pan{
  margin: 0 auto;
  padding: 15px 0 0 0;
  font-size:12px;
  clear:both;
  height: 59px;
  max-width: 1000px;
  width: 100%;
  background-color: transparent;
}
#pan ul{
  list-style:none;
  margin: 5px 0 0 0;
  padding:0;
}
#pan li{
   margin: 0 5px 8px 0;  
  list-style:none;
  float:left;
}
#pan a:visited,
#pan a:link{
	color:#000;
	text-decoration: none;
}
/*--------------------------------------- 
   お問い合わせ
---------------------------------------*/
.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;
    margin: 0px 0 27px 0;
	background:linear-gradient(90deg, rgb(255 167 36) 0%, rgb(255 242 113) 100%);
	/*background: linear-gradient(90deg, rgba(30,187,163,1) 0%, rgba(78,206,138,1) 100%);*/
	color:#F0F0F0;
}
.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 1.3rem;
	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);
}

.mida02w{/*woman*/
	height:45px;
	width: 100%;
	padding: 7px 0 0 40px;
	background-image:url("../img/arrow_woman.png");
	background-repeat: no-repeat;
	background-position: 10px 10px;
	color:#585858;
}
.mida03{/*コメントで利用しています*/
	height:70px;
	width: 100%;
	padding: 10px 0 0 50px;
	margin: 0 0 10px 0 0;
	background-image:url("https://raku-tano.com/img/bar_comment.png");
	background-repeat: no-repeat;
	background-position: 10px 10px;
	color:#000;
}

.mida_ryori{
	height: 45px;
	width: 98%;
	padding: 7px 0 0 0;
	background-image:url(https://raku-tano.com/img/bar_sen.png);
	background-repeat: repeat-x;
	background-position: 0px 43px;
	color:#000;
}
.search_bar {
	background-image: url("https://raku-tano.com/img/bar_kensaku.png");
	background-repeat: no-repeat;
	height: 52px;
	position: relative;
}
.seaarch_bar01{
	padding: 0 0 0 30px;
}
.search_bar::before{
    content: url("https://raku-tano.com/img/search_aicon.png");
	position: absolute;
}
h4 {
	font-size: 0.9rem;
	margin: 0;
	padding: 0 15px;
    line-height: 40px;
}
.main_login01 h5{
   font-size:12px;
   padding: 0 0 30px 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;
}
.midasi_account{
	text-align: center;
	padding: 20px 0;
}
.big{
	font-size: 20px;
	font-weight: bold;
	color: #000000;
}
.big02{
	font-size: 22px;
	font-weight: bold;
	color: #000000;
	line-height: 35px;
}
.account{
	font-size:16px;
	font-weight: bold;
}
.an{
	margin: 0 0 0 4px;
	font-size:13px;
}

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



/*--------------------------------------- 
  topの中だよん
---------------------------------------*/
.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}


/*--------------------------------------- 
  tableの中だよん
---------------------------------------*/
.table2{
	margin: 0;
	width: 100%;
	border-collapse: collapse;
	border:none;
}
.table2 td, .table3 th{
	margin: 0 0 0 10px;
	border: 1px solid #CCCCCC;
}
.table2 p{
   padding: 0 0 0 10px;
   font-size: 0.9rem;
}
.table3{
    margin: 0;
	padding: 0;
	border-collapse: collapse;
	width: 100%;
}
.table3 td, .table3 th{
	margin: 0 0 0 10px;
	border: 1px solid #CCCCCC;
    text-align:center;
}
.table3 p{
   padding: 0 0 0 10px;
   font-size: 13px;
}

.table_rimawari{
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	width: 100%;
}
.table_rimawari td, .table_rimawari th{
	margin: 0 0 0 10px;
	border:solid 1px white;
    text-align:center;
}



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

.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: 17px;
   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;
}
.td_back02{
	background-color: #7CBCE6;
	color:#FFF;
	text-align:center;
}



/*------サイズが小さくなると、可変する。
ボーダーの色は水色
テキストはセンター表示 -----*/

.table5b{
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table5b td, .table5a th{
	padding: 0;
	border: 1px solid #BFDEF2;
	text-align: center;
	height: 40px;
}
.table5b p{
   padding: 0;
   margin: 0;
   font-size: 0.8em;
   line-height: 2em;
}

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

.table6{
    margin: 0;
	padding: 0;
	border-collapse: collapse;
	width: 100%;
}
.table6 td, .table6 th{
	margin: 0 0 0 10px;
	padding: 10px 0;
	border: 1px solid #CCCCCC;
}
.table6 p{
   padding: 0 10px;
   font-size: 12px;
}
.hai{
	background:#F0F0F0;
	text-align: center;
	height: 47px;
	padding: 0 5px;
}
.hai02{
	background:#F0F0F0;
	text-align: center;
	height: auto;
}
/*------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(https://raku-tano.com/img/new_back.jpg);
	background-repeat: no-repeat;
	height: 282px;
	width: 576px;
	margin: 0 0 0 2px;
}
.renew {
	background-image: url(https://raku-tano.com/img/renew_back.jpg);
	background-repeat: no-repeat;
	height: 282px;
	width: 576px;
	margin: 0 0 0 2px;
}
.seo {
	background-image: url(https://raku-tano.com/img/seo.jpg);
	background-repeat: no-repeat;
	height: 282px;
	width: 576px;
	margin: 0 0 0 2px;
}
/*--------------------------------------- 
 floatだよん
---------------------------------------*/
.f1{
   margin: 0 5px 0 0;
   padding: 0;
   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;
}
.bred02 {
    font-size:24px;
	color: #FF0000;
	fone-weight: bold;
}
.gray{
	color: #999999;
}
.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は見えない
---------------------------------------*/

.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;
}
/*----小さいときは横並びは非表示にする--*/

/*---------------------------------------
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: -5px;
    width: 100%;
    height: 100%;
}
.video-container02 {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 450px;
	overflow: hidden;
}

.video-container02 iframe {
    position: absolute;
    top: -10px;
    left: -5px;
    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: 140px;
}
.kanren_kizi .f1{
	float: left;
	margin-right: 20px;
}
.kanren_kizi a:hover{
	background-color: #eeeeee;

}

.kanren_kizi a:after{
	content: "";
	display:block;
	height:auto;
	clear:both;
}
/*--------------------------------------- 
   この記事を読んだ人は、こんな記事も読んでます
   関連記事のcss
---------------------------------------*/

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

}

.kanren_kizi02 a:after{
	content: "";
	display:block;
	height:auto;
	clear:both;
}


/*--------------------------------------- 
  topics　3つ並び　最後は一列になる
---------------------------------------*/

.item{
	width: 100%;
	height: auto;
	background-color:#F5F1E5;
	background-repeat:repeat;
}
.s_item{
	width: 300px;
	margin: 20px 13px;
	display: block;
	float:left;
}
.s_item 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;
	width: 100%;
	max-width: 770px;
}

.item_2fs > p{
	font-size:90%;
}
.item_2fs{
	width: 49%;
	margin: 10px 0;
}

.item_2fs 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_footer{
	width:380px;
	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: -2px;/*調節しています*/
    right: 24px;/* アイコンの位置を調節右からの距離 */
    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: 600px;/*高さを算出して、スクロールできるようにする*/
	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: -16px;/*調節しました*/
	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: 15px 0 0 15px;
	width:180px;
}
.logo_s img{
	width: 200px;
	height: 50px;
}

.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;
}

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

.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;
}

/*--------------------------------------- 
 画像がフェードインするスクリプト
 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;
}

/*--------------------------------------- 
 出典部分のサイズ調節
---------------------------------------*/
.shuten{
	font-size: 66%!important;
}
.shuten img{
	width: 78px;
	height: 25px;
}
.shuten a:link,.shuten a:visited{
	text-decoration: none;
	color: #B7B7B7;;
}

/*--------------------------------------- 
 この記事を書いた人
---------------------------------------*/
.about_us{
	display: flex;
	flex-direction: row;
}
.a_name{
	width: 30%;
}	
.a_text{
	width: 70%;
	padding: 10px;
}
/*--------------------------------------- 
 タグリスト
---------------------------------------*/
.tag ul{
	list-style: none;
}
.tag li{
	margin: 0 5px;
	float: left;
	font-size: 0.9em;
}
.tag li a{
	color: #333;
}
.tag li a:hover{
	text-decoration: none;
}
/*--------------------------------------- 
男ボタン　女性ボタン
---------------------------------------*/

.btn_icon01{
	padding: 0 3px;
}

.event{
	position: relative;
}
.okini{
	position: absolute;
	right: 0px;
	top: 80%;
}

/*--------------------------------------- 
calender　部分 テーブルを利用しています
---------------------------------------*/
.calender01{
	width: 100%;
	text-align: center;
	border-collapse:collapse;
}
.calender01 table{
}
.calender01 th,.calender01 td{
	border: solid 1px #AAAAAA;
	height: 30px;
	font-size: 8px;
}
.back_top{
	background-color: #F8F6F1;
}

/*--------------------------------------- 
  メンバーページ 趣味などの部分　写真3つ並び
文字は並ばない
---------------------------------------*/

.item02{
	width: 100%;
	height: auto;
}
.item02 ul{
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content :space-between;
}
.item02 li{
	width: 30%;
	padding: 0;
}
.s_item02 a:hover{
	opacity:0.8;
}
/*--------------------------------------- 
 写真3つ並び+下の文字が入るver
---------------------------------------*/

.item03_m1{
	width: 100%;
	height: auto;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content :space-between;
}
.item03_b1{
	width: 30%;
	padding: 0 0 5px 0;
}
.item03_b1 >p{
	text-size:12px;
	text-align: center;
}
.item03_b1 img{
	border-radius: 10px;
}
.item03_b1 a:hover{
	opacity: 0.8;
}

/*--------------------------------------- 
 ランキング
---------------------------------------*/
.hosi_y{
	font-size: 18px;
	color:#FF9900;
	letter-spacing: 5px;
}
.hosi_y02{
	font-size: 14px;
	color:#FF9900;
	letter-spacing: 5px;
}
/*----------------------  
棒グラフのチャート
参照：https://sedoriplan.com/css-barchart/
-------------------------*/
.ranking_box01{
	width: 100%;
}
.rank_btn {
	width: 93px;
	height: 24px;
	padding: 0 10px 0 0;
}
.chart_box {
    width: 230px;
	color:#E3E3E3;
	background-color: #D7D7D7;
	margin-bottom: 10px;
}
 
.chart_box .bar1 {
    display: block;
	margin: 0 0 10px 0;
    background: #F2AB00;
    text-align: center;
    color: #f0ffff;
    height: 2em;
    line-height: 2em;
    width:60%; /*ここの数値を変えるとグラフが変わる*/
}
.chart_box .bar2 {
    display: block;
	margin: 0 0 10px 0;
    background: #F2AB00;
    text-align: center;
    color: #f0ffff;
    height: 2em;
    line-height: 2em;
    width:80%; /*ここの数値を変えるとグラフが変わる*/
}

.kazu01{
	padding: 0 0 5px 15px;
	vertical-align: middle;
}

/*--------------------------------------- 
 ページナビ部分
---------------------------------------*/


ul.page_nav01 {
	padding: 10px;
	text-align: center;
}

ul.page_nav01 li {
	display: inline;
	margin: 0 2px;
	height: 50px;
	color: #000000;
}

.select{
	display: inline-block;
	margin-bottom: 5px;
	padding: 13px 13px; /*サイズの調節*/
	background: #3D94EB;
	color: #FFF;
	text-decoration: none;
	vertical-align: middle;
}

ul.page_nav01 li a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 13px 13px; /*サイズの調節*/
	background: #CCCCCC;/*背景の色*/
	text-decoration: none;
	vertical-align: middle;
	color:#FFF;/*文字の色*/
}
ul.page_nav01 li a:hover {
	background: #eeeff7;
}
.dotted_line{
	background: 0 0;
	padding:  0 15px;
	
}


/* -------------------
検索フォーム部分
-------------------*/
.search_a{
	width: 250px;
}
.search1{
	margin: 40px 0 20px 0;
}

dl.search1{
	position:relative;
	background-color:#fff;
	border:1px solid #aaa;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-o-border-radius:6px;
	-ms-border-radius:6px;
	border-radius:6px;
}
dl.search1 dt{
	margin-right:40px;
	padding:11px 0 8px 0;
	height: 47px;
}
dl.search1 dt input{
	width:100%;/*テキストボックスの長さ*/
	height:24px;
	line-height:24px;
	background:none;
	border:none;
	padding: 0 0 0 15px;
}
dl.search1 dd{
	position: absolute;
	top: 3px;/*アイコンボタンの位置*/
	right: 4px;
}
dl.search1 dd button{
	display:block;
	padding:10px;
	background:none;
	border:none;
}
dl.search1 dd button span{
	display:block;
	width:20px;
	height:20px;
	background: url("../img/search01.png") no-repeat scroll 0 0;/*虫眼鏡アイコン部分の表示*/
}

.search1 input[type="text"]:focus {
  outline: 0;
}

/*-----------------スマホの検索------------------*/
.search_b{
	width: 380px;
	height: 67px;
	padding:0;
}

/*-----------------タグのエリア------------------*/
.tag_area{
	width: 100%;
	height: auto;
}
.tag_area ul{
	display:flex;
	flex-wrap: wrap;
	
}
.tag_area li{
	position: relative;/*起点を作る*/
		text-size:3px !important;
}

.tag_a{/*li　部分*/
	/*display: inline-block;*/
	width: 7rem;
	height: 2.9rem;
	border: solid 1px #19bfbf;/*線の色を付ける*/
	border-radius: 10px;/*丸み*/
	padding: 12px 0; /*文字間隔の調節*/
	margin: 10px 5px;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;/*はみ出した時は消す*/
	font-size: 0.7rem;
}
.tag_a a{
	text-decoration: none;/*線を消す*/
	color: #666666;
	width: 100%;/*クリックできるようにaタグを広げる　heightも*/
	height: 100%;
	position: absolute;
	top:0;/*起点*/
	left: 0;
}
.tag_a a:hover{
	background: #50C3D1;
	transition:  all .6s ease-out; /*アニメーションの設定 allが大事*/
	color: #fff;
}
.tag_b{
	margin: 0 5px 0 0;
	position: relative;
	top: 10px;
}
.tag_c,.tag_d{
	display: inline-block;
	position: relative;
	top: 3px;
}
/*-----------サーチ部分背景に利用   -------------------*/
.tag_arrow{
	font-size: 1rem;
	position: relative;/*起点を作る*/
	margin: 10px 0 10px 0;
}
.tag_arrow::before{/*隙間を空けずに書く事*/
	content: url("../img/arrow_tag02.png");/*背景画像を入れる*/
	position: absolute;/*起点からの距離計算　top leftは必須*/
	left: 10px;/*左からの距離*/
	top:7px;/*上からの距離*/
}
.tag_arrow p{
	padding: 7px 0 0 40px;/*上と左に余白をいれて調節*/
	height: 40px;
	background-color:#FCFCFC;/*背景に色を付ける*/
}
.tag_sp{
	margin: 18px 0 14px 0;
}


/*-----------フォーム画面   -------------------*/

.form_box{
	display: flex;/*フォーム 住所部分に利用*/
	flex-wrap:wrap;
	margin: 0 0 15px 0;
}
.form_box P{
	margin: 0;
	padding: 0;
}
.fbox01 {/*フォーム 住所部分に利用*/
	padding: 0;
	height: 48px;
	width: 100%;/*横並びを防ぐ*/
}
.form_box input,.form_box02a input,.form_box textarea{
	font: 1em sans-serif;
	max-width:95%;
	height: 48px;/*高さの設定*/
	margin: 0 10px 0 0;
	padding: 0;
    box-sizing: border-box;
    border: 1px solid #999;
	text-indent: 5px;
}
.form_box02a{/*電話番号部分*/
	padding: 0 0 15px 0;
}

.fbox360{
	padding: 0;
	height: 48px;
}
.fbox360 input{
	font: 1em sans-serif;
	max-width: 360px;
	width: 360px;
	height: 48px;/*高さの設定*/
	margin: 0;
	padding: 0;
    box-sizing: border-box;
    border: 1px solid #999;
	text-indent: 5px;
}
.lt{
	margin: 0;
	padding: 0;
}

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

---------------------------------------*/
.form_box02{
	display: flex;
	display: row;
	flex-wrap:wrap;
	/*height: 70px; 文字の間隔がエラー時におかしくなるので無し*/
	margin: 0 0 20px 0;
}
.form_box02 P{
	margin: 0 10px 0 0;
	padding: 5px 0;
}
.fbox02 {
	display: row;
	padding: 0 10px 0 0;
	width: 100%;/*エラーを改行して表示させるため*/
}
.fbox02a{/*メールアドレス部分*/
	margin: 0 0 15px 0;/*上下に隙間を作る*/
	width: 100%;
}
.fbox02a input{
	padding: 0 0 0 10px;
	border: 1px solid #999;/*ボーダーの色をそろえる*/
}
.form_box02 input, .form_box02 textarea{
	font: 1em sans-serif;
	max-width: 95%;/*幅を綺麗にする*/
	height: 48px;/*高さの設定*/
    box-sizing: border-box;
    border: 1px solid #999;
	text-indent: 5px;
}


.form_box02m{/*メールアドレス専用*/
	display: flex;
	display: row;
	flex-wrap:wrap;
	/*height: 70px;*/
}
.form_box02m P{
	margin: 0 10px 0 0;
	padding: 5px 0;
}
.fbox02m {
	display: row;
	padding: 0 10px 0 0;
}
.form_box02m input,.form_box02m textarea{
	font: 1em sans-serif;
	width: 250px;
	height: 48px;/*高さの設定*/
    box-sizing: border-box;
    border: 1px solid #999;
	text-indent: 5px;
}

.form_box_add{/*アドレスに利用*/
	display: flex;
	flex-direction: column;
	height: 140px;
}
.form_box_add P{
	margin: 0 10px 10px 0;
	padding: 5px 0;
}
.fbox_add {
	padding: 0 10px 0 0;
}
.form_box_add input, .form_box_add 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: 200px;
	height: 80px;
	margin: 0 0 15px 0;/*修整*/
}

/*--------------------------------------- 
チェックボックスの場所 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 {/*--送信ボタン --*/
	width: 280px;
	padding: 15px 100px;/*文字の余白部分*/
	margin: 5px 0 0 0;
    font-size: 1em;
    background-color:#B3B6C9;/*背景色の設定*/
    color: #fff;/*文字色を白に指定*/
	border-style: none; /*submitボタンのを枠を非表示にする*/
	border-radius: 3px; /*角丸*/
	-webkit-border-radius: 3px; /*角丸*/
     -webkit-transition: all 0.5s;
     transition: all 0.5s;/*アニメーション*/
	letter-spacing: 1px;
}
input#submit_button:hover{
	background-color:#FD9B9B;
}

input#submit_button02 {/*--新規登録の部分に利用 --*/
	width: 280px;
	padding: 15px 50px;/*文字の余白部分*/
	margin: 5px 0 0 0;
    font-size: 1em;
    background-color:#B3B6C9;/*背景色の設定*/
    color: #fff;/*文字色を白に指定*/
	border-style: none; /*submitボタンのを枠を非表示にする*/
	border-radius: 3px; /*角丸*/
	-webkit-border-radius: 3px; /*角丸*/
     -webkit-transition: all 0.5s;
     transition: all 0.5s;/*アニメーション*/
	letter-spacing: 1px;
}
input#submit_button02:hover{
	background-color:#FD9B9B;
}



input#submit_button_modoru{
	width: 170px;
	padding: 15px 0;
	margin: 5px 15px 0 0;
    font-size: 1em;
    background-color:#B3B6C9;/*背景色の設定*/
    color: #fff;/*文字色を白に指定*/
	border-style: none; /*submitボタンのを枠を非表示にする*/
	border-radius: 3px; /*角丸*/
	-webkit-border-radius: 3px; /*角丸*/
     -webkit-transition: all 0.5s;
     transition: all 0.5s;/*アニメーション*/
	letter-spacing: 1px;
}
input#submit_button_modoru:hover{
	background-color:#FD9B9B;
}
input#submit_button_kakunin{
	width: 170px;
	padding: 15px 0;
	margin: 5px 0 0 0;
    font-size: 1em;
    background-color:#FF4D5A;/*背景色の設定*/
    color: #fff;/*文字色を白に指定*/
	border-style: none; /*submitボタンのを枠を非表示にする*/
	border-radius: 3px; /*角丸*/
	-webkit-border-radius: 3px; /*角丸*/
     -webkit-transition: all 0.5s;
     transition: all 0.5s;/*アニメーション*/
	letter-spacing: 1px;
}
submit_button_kakunin:hover{
	background-color:#FD9B9B;
}

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

/*--管理画面部分のナビゲーション　テキストエリアのボタンに利用 --*/
input#submit_button_navi {/*--送信ボタン --*/
	width: 95px;
	padding: 7px 10px;/*文字の余白部分*/
	margin: 5px 0 0 50px;
    font-size: 0.8em;
    background-color:#3A7FB9;/*背景色の設定*/
    color: #fff;/*文字色を白に指定*/
	border-style: none; /*submitボタンのを枠を非表示にする*/
	border-radius: 3px; /*角丸*/
	-webkit-border-radius: 3px; /*角丸*/
	-webkit-transition: all 0.5s;
     transition: all 0.5s;/*アニメーション*/
	letter-spacing: 1px;
}
input#submit_button_navi:hover{
	background-color:#FD9B9B;
}


/*--管理画面部分のナビゲーション　テキストエリアのボタンに利用 --*/
input#submit_button_henkou {/*--送信ボタン --*/
	width: 100px;
	padding: 10px 20px;/*文字の余白部分*/
	margin: 0 0 10px 0;
    font-size: 0.8em;
    background-color:#3A7FB9;/*背景色の設定*/
    color: #fff;/*文字色を白に指定*/
	border-style: none; /*submitボタンのを枠を非表示にする*/
	border-radius: 3px; /*角丸*/
	-webkit-border-radius: 3px; /*角丸*/
	-webkit-transition: all 0.5s;
     transition: all 0.5s;/*アニメーション*/
	letter-spacing: 1px;
}
input#submit_button_henkou:hover{
	background-color:#FD9B9B;
}



/*-------- 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;
}




/*--------------新規登録画面-------------------------*/
#toroku_area{/*一番上の部分*/
	width: 100%;
	max-width: 1000px;
	height: auto;
	display: flex;
	flex-direction:row;/*子要素を横並びにする*/
	flex-wrap: wrap;/*はみ出したら上から下に並べる*/
}
#toroku_area .id_title{
	font-size: 12px;
	margin: 0 0 10px 0;
}
.toroku_new{ /*新規会員 登録部分*/
	width: 500px;
	background-color: #F6F8FA;
	padding: 20px;
	height: 550px;
}
.toroku_login{
	width: 500px;
	padding: 20px;
}

/*--------------料理ページ 材料部分  -----------------*/
.material_table{
	width: 100%;
	border-collapse: collapse;
}
.material_table tr{
	border-bottom:1px #eee solid;
	height: 40px;
}

/*-----------料理部分のボタン  ----------*/
.time_area{
	display: flex;
}
.btn_tyori{
  max-width: 130px;
  text-align: left;
  background-color: #7AE0D1;
  font-size: 13px;
  color: #FFF;
  text-decoration: none;
  padding: 10px 25px;
  border-radius: 5px;
	margin: 0 20px 0 0;
}
.btn_price{
  max-width: 160px;
  text-align: left;
  background-color: #FFACAC;
  font-size: 13px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 25px;
  border-radius: 5px;
}

/*-----------ネーム部分  ----------*/
.name_area01{
	max-width: 210px;
	width: 100%;
	height: auto;
	background-image:url("/img/name_area.png");
	background-repeat: no-repeat;
	display: flex;
}
.user_photo{
	width: 40%;
	padding: 32px 20px;
}
.comment{
	width: 60%;
	padding: 35px 0 0 10px;
}
.comment p {
    font-size: 0.7rem;
    line-height: 1.4rem;
    margin: 0;
}
/*-----------管理画面の左側  ----------*/
#navi_area{
	background-color: #F8F8F8;
}
#navi_area ul{
	list-style-type: none;
	width: 210px;
	display: block;
	margin: 5px 0 0 0;	
	padding: 0;
	clear:both;
}

#navi_area li {
	width:200px;
	display:block;
	list-style-type: none;
	clear: both;
	font-size: 12px;
	line-height: 50px;
	border-bottom: #CCCCCC 1px solid;
	padding: 0 0 0 10px;
}


#navi_area li a{
	text-decoration:none; /*-- アンダーバーを消す-----*/
	color:#666;
	display:block;
	line-height:50px;
	margin: 0;
	padding: 0;
}
#navi_area li a:hover{
	opacity:0.5;
}

img.navi_area_btn {
	vertical-align: middle;
}
#navi_area p{
	font-size: 0.8rem;
	line-height: 1.8rem;
	text-align: center;
	
}

/*-----------管理画面 アカウント情報の登録、ユーザーの画像  ----------*/

#user_photo_area{
	width: 100%;
	display: flex;
	flex-direction: row;
}
.u_photo_a01{
	width: 22%;
	padding: 0 10px 0 0;
}
.u_photo_a02{
	width: 78%;
}
.u_photo_a02 p{

	line-height: 2.5rem;
}

/*-----------コメントエリア 口コミ投稿の部分 ----------*/
.comment_area {
	background: #FAFAFA;
	padding: 10px 0 0 20px;
}

.comment_area textarea{
	font: 1em sans-serif;
	width: 360px;
	height: 130px;/*高さの設定*/
	border-radius: 1em;
    box-sizing: border-box;
    border: 1px solid #999;
	text-indent: 5px;
}

/*--管理画面部分のナビゲーション　テキストエリアのボタンに利用 --*/
input#submit_button_comment {/*--送信ボタン --*/
	width: 100px;
	padding: 10px 10px;/*文字の余白部分*/
	margin: 5px 0 0 0;
    font-size: 0.8em;
    background-color:#42D45C;/*背景色の設定*/
    color: #fff;/*文字色を白に指定*/
	border-style: none; /*submitボタンのを枠を非表示にする*/
	border-radius: 3px; /*角丸*/
	-webkit-border-radius: 3px; /*角丸*/
	-webkit-transition: all 0.5s;
     transition: all 0.5s;/*アニメーション*/
	letter-spacing: 1px;
}
input#submit_comment:hover{
	background-color:#FD9B9B;
}

/*------ユーザーコメント部分 ------------------------*/

.comment_user_area{/*ユーザーコメント部分*/
	width: 100%;
}
.comment_sub_area{
	width: 100%;
	margin: 15px 0;
}
.comment_user_area_icon{/*アイコン部分*/
	width: 10%;
	height: auto;
}
.comment_user_area_comment{
	width: 90%;
	padding: 0 0 0 10px;/*アイコンの右に余白を入れる*/
}



.good_btn{
	display: inline-block;
	width: 20px;
}
.good_number{
	display: inline-block;
	text-align: center;
	width: 50px;
	color: #C0C0C0;
}
.bad_btn{
	width: 30px;
	display: inline-block;
}
.hensin{/*返信の文字*/
	display: inline-block;
	color: #C0C0C0;
	text-align: center;
	width: 50px;
}
.hensin02{
	font-size: 0.8rem;
	margin: 15px 0 0 0;
}
.hensin02 a:link{
	text-decoration: none;
	color:#000000;
}
.hensin02 a:vistited{
	text-decoration: none;
	color:#000000;
}
/*--返信コメント部分 --*/
.comment_user_area_s{
	display:flex;
}
.comment_user_area_icon02{/*返信ようのアイコン*/
	width: 56px;
	display: inline-block;
}
.comment_user_area_comment02{
	width: 80%;
	padding: 7px 0 0 10px;
	display: inline-block;
}	
/*------------ディナー、ランチアイコン--------------------------*/

.price_icon{
	text-decoration: none;
	height: 35px;
	margin: 5px 0 0 0;
}
.price_icon li{
	float: left;
	margin: 0 20px 0 0;
	font-size: 0.9rem;
	height: 25px;
}
.dinner_icon {
    padding-left: 30px;
	padding-top: 1px; 
    background: url(/img/dinner_icon.png) no-repeat left center;
}

.lunch_icon {
    padding-left: 30px;
	padding-top: 1px; 
    background: url(/img/lunch_icon.png) no-repeat left center;
}

/*------------旅のページ　価格のアイコンなど--------------------------*/

.price_icon02{
	text-decoration: none;
	margin: 5px 0 0 0;
}
.price_icon02 ul{
	display: flex;
}
.price_icon02 li{
	margin: 5px 20px 0 0;/*スマホ時にバランスをとるために上下に5px追加*/
	padding: 0 0 0 30px;
	font-size: 0.9rem;
	height: 25px;
}
/*ホテルの価格のアイコン　t=travel*/
.price_t_icon {
    padding-left: 30px;
	padding-top: 1px; 
    background: url(/img/icon_price_t.png) no-repeat left center;
	background-size:22px 22px;
}
/*userの利用用途のアイコン*/
.use_icon {
    padding-left: 30px;
	padding-top: 1px; 
    background: url(/img/icon_use.png) no-repeat left center;
	background-size:22px 22px;/*倍のサイズで作っている*/
}


/*-------------広告　調節用--------------------------*/

.bar_ad{/*広告用下線　下の線をたしています。*/
	border-bottom: dotted 1px #CCC;	/*選はドットにする*/
}


/*------------コンテンツの目次エリア--------------------------*/

.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;
}

/*------------練習用--------------------------*/

.acd-check{/*チェックボックスを消す*/
    display: none;
}
.acd-label{/*ラベルの部分*/
    background: #333;
    color: #fff;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
}
.acd-content{/*開く部分、最初は高さなし、*/
    border: 1px solid #333;
    height: 0;
    opacity: 0;/*数値が大きいほど不透明度が高くなります。表示されない*/
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;/*ここが大事*/
}
.acd-check:checked + .acd-label + .acd-content{/*ラベルとコンテンツに入れるチェックされたときにどうなるか？　高さと表示がふわっとでてくる*/
    height: 40px;
    opacity: 1;/*数値が大きいほど。表示される*/
    padding: 10px;
    visibility: visible;
}


/*--------------------------------------- 
アコーディオンナビゲーション　Jquery とcss3
https://maku77.github.io/web/menu/accordion.html　を利用してます
---------------------------------------*/
/* メニュー全体 */
@keyframes my-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* チェックボックスを押したときにどうなるかを指定*/
.menu {
	/*始めは見えない*/
	width: 378px;
	padding: 0 1px;
}
/* 閉じた状態のサブメニュー */
.menu ul {
	/*overflow: hidden;*/
	/*overflow: hidden;/*はみ出た部分を消す*/
    /*visibility: hidden;/* デフォルトで非表示 */
	/*display: none; これは使えない*/
	/*opacity: 0;*/
	font-size: 12px;
	/*transition: all 2000ms 0s ease;*/
	/*transition: 0.4s;/*アニメーションの設定*/
	line-height: 0;
}
.la01{/*ラベル部分*/
	display: block;
}
.accordion{/*チェックボックスを消す*/
	display: none;
	height: 0; /*高さを消す*/
	overflow: hidden;
}


/*.menu input:checked + ul {.menuの直下のulを指定
    display: block;   表示するにdisplay: block;をやめる
    padding: 10px 0 0 10px;
	height: 100%;/* これが　全体の高さを算出 
	font-size: 12px;
	animation-name: my-fade-in;
	animation-duration: 1.3s;ゆっくり出てくる
}*/

/* 開いた状態のサブメニュー */
.menu input:checked + ul {
	font-size: 12px;
	/*opacity: 1;*/
	height: 100%;
	line-height:1.0rem;
    padding: 0;
	/*visibility: visible;*/
	/*transition: 0.3s;*/
	/*display: block; displayだとふわっと表示されない*/
}

/*書く位置を変えればいいのでは？*/

.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 {
    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{   /*何もないリンク部分*/
	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{
	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;/*ここが大事 はじめは見えない*/
	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%;
}

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



/*------------アイコンエリア　----　------------
　　　食べログ、ぐるなびボタン
　　　グルメページ全般に利用します。　　　-------------*/

.icn_kutikomi_area{
	width: 100%;
	display: flex;/*親要素*/
}
.icon_k01,.icon_k02{
	width: 170px;
	height: 50px;
}
.icon_k02{
	margin: 0 0 0 20px;
}
/*-------------------------------------------------
　　　サイドのランキング部分　　　
------------------------------------------------*/
.side_ranking {
    position: relative;
	margin: 10px 0;
}
.side_ranking img{/*画像サイズに合わせるため*/
	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;/*調節する*/
}
/*--------------------------------------- 
travel　客室に利用
---------------------------------------*/

.room_item02{/*2つ並びなので2*/
	width: 100%;
	max-width: 770px;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content :space-between;
}
.room_item02s{
	width: 48%;
	margin: 0 0 10px 0;
}
.room_item02 img{
	width: 100%;
}
.room_item02s a:hover{
	opacity:0.7;
}
.room_item02 p{
	font-size: 0.9rem;
}

/*--------------------------------------- 
おすすめ宿　　2つ並び
---------------------------------------*/

.yado_item02{/*2つ並びなので2*/
	width: 100%;
	max-width: 770px;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content :space-between;
}
.yado_item02s{
	width: 48%;
	margin: 0 0 10px 0;
}
.yado_item02 img{
	width: 100%;
}
.yado_item02s a:hover{
	opacity:0.7;
}
.yado_item02 p{
	font-size: 0.9rem;
}

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

.pagetop {
    display: none;
    position: fixed;/*場所を固定する*/
    bottom: 80px;/*上にしておくとよい*/
    right: 50px;
}
.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 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:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

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

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

.img-wrap:before {
	/*cubic-bezierが速度変化*/
  animation: img-wrap 2s 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;
	margin: 0;
}
.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;
	margin: 0;
}
.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;
	margin: 0;
}

@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);
  }
}
/*-----------------------------------

管理画面のプロフィールエリア

---------------------------------------*/
.prf_area{
	display: flex;
	flex-direction:row; /*横に並ぶ*/
	width: 100%;
	padding-bottom: 20px;
	}
.prf_area_01{
	width: 40%;
	}
.prf_area_02{
	width: 15%;
	margin: 0 5px;
	}
.prf_area_03{
	width: 15%;
	margin: 0 5px;
	}
.prf_area_04{
	width: 15%;
	}
.prf_a {/*--親エリアのdiv--*/
  position: relative;/*相対配置をする*/
  }

.num_01 {
  position: absolute;/*絶対配置をする*/
  color:#f7b431;/*文字の色*/
  font-size: 1.9rem;
  top: 25%;
  right: 25%;
 }
.num_01a {
  position: absolute;/*絶対配置をする*/
  color:#f7b431;/*文字の色*/
  font-size: 2.5rem!important;
  top: 28%;
  right: 40%;
 }
.num_02 {
  position: absolute;/*絶対配置をする*/
  color:#606060;/*文字の色 黒*/
  font-size: 1.0rem;
  top: 56%;
  right: 12%;
  }

.prf_a img {
  width: 100%;
  }

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

メッセージ部分 

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

.tab_wrap{
	width:100%; 
	margin: 20px auto;
}

input[type="radio"]{display:none;}

.tab_area{font-size:0; margin:0 10px;}

.tab_area label{/*ラベル部分*/
	width: 120px;/*ラベルの幅*/ 
	margin:0 5px; 
	display:inline-block; 
	padding:12px 0; 
	color:#999; 
	background:#ddd; 
	text-align:center;
	font-size:13px; 
	cursor:pointer; 
	border-radius: 10px 10px 0 0;/*左上の右上がまるい*/
	transition:ease 0.2s opacity;
}

.tab_area label:hover{
	opacity:0.5;}

.panel_area{
	background:#fff;
	border-radius: 10px;
	border-collapse: collapse;/*1本の線にする*/
	border: solid 1px #D5D5D5;/*外枠*/
}

.tab_panel{
	width:100%; 
	padding: 25px 0;
	display:none;
}

.tab_panel p{/*フォント*/
	font-size:14px; letter-spacing:1px; 
	text-align:left;
	padding: 0 10px 0 30px;
}

#tab1:checked ~ .tab_area .tab1_label{
	background:#fff; 
	color:#000;
	border: solid 1px #D5D5D5;/*外枠*/
}
#tab1:checked ~ .panel_area #panel1{
	display:block;
}
#tab2:checked ~ .tab_area .tab2_label{
	background:#fff; color:#000;
	border: solid 1px #D5D5D5;/*外枠*/
}
#tab2:checked ~ .panel_area #panel2{display:block;}

#tab3:checked ~ .tab_area .tab3_label{
	background:#fff; color:#000;
	border: solid 1px #D5D5D5;/*外枠*/}
#tab3:checked ~ .panel_area #panel3{display:block;}

.right{
	text-align: right!important;
}
/*---------------------------------------------------

価値観の部分　value

------------------------------------------------------*/
.value_area{
	width: 100%;
	height: 200px;
	display: flex;
	margin: 0;
}
/*.value_area::-webkit-scrollbar {
	display: none;
}*/
.value_area01{
	width: 20%;/*5個並んでいる*/
	margin: 0 10px 10px 0;
}
.value_area01 img{
	width: 100%;
	border-radius: 10px;
}
.value_area01 p{
	font-size: 0.7rem;
    line-height: 2.1rem;
	 width: 130px;/*%にするとばバグル*/
	overflow:hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
}
/*---------------------------------------------------

iconエリア
管理画面のアイコン部分

------------------------------------------------------*/
.icon_area {
	background-color: #FFFFFF;
	width: 100%;
	height: 100%;
	padding: 30px 0;/*調節*/
	margin: 20px 0 0 0;/*上に空白を入れる*/
}
.icon_area ul{
	display: flex;
	flex-wrap: wrap;
}
.icon_area li{
	width: 19%;
	height: 130px;
	position: relative;
}
.icon_area li img{
	width: 100%;
}
.badge01{
	position: absolute;
	background-color: red;
	color: white;
	width: 30px;
	height: 30px;
	text-align: center;
	border-radius: 100%;
	top: 10%;
	right: 14%;/*場所の調節*/
	padding: 4px 0 0 1px;
}
/*---------------------------------------------------

管理画面プロフィール　スマホ時のみ表示されます
------------------------------------------------------*/

.prf_smaho_area{/*背景色をグラデーションに*/
	background: linear-gradient(180deg, rgba(11,191,246,0.7567401960784313) 0%, rgba(11,99,246,1) 69%, rgba(245,246,247,1) 69%);/*2色のグラデーション*/
	width: 100%;
	max-width: 770px;
	padding: 10px 0 10px 0;
}
.prf_smaho_area_01{
	background-color:#FFFFFF;
	margin: 20px;
	padding: 30px 0 0 0;/*上の空き部分を調節*/
	border-radius: 10px;
	height: 400px;
}
.prf_smaho_area_01 img{
	width:200px;
	height: 200px;
	border-radius: 50%;
}
.prf_smaho_area_01 h3{
	text-align: center;
}

.prf_box_area{
	width: 100%;
	height: 110px;
	display: flex;
	align-items: center;
}
.prf_box_area01{
	padding: 20px 0 0 0;
	width: 50%;
	text-align: center;
}
.prf_box_area01　p{
	text-align: center;
}
.prf_box_area02{
	width: 100%;
}
.prf_box_area02 img{
	border-radius: 0%;
	width: 250px;
}
.num_03{
	font-size: 2.5rem!important;
	padding-bottom: 10px;
}
.num_03a{
	font-size: 1.5rem!important;
	padding-bottom: 10px;
}

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

管理画面下のボタンエリア
利用：管理画面
スマホ時のみ表示

---------------------------------------*/
.footer_icon_area{
	width: 100%;
	display: flex;
	 justify-content: space-between;
	height: 63px;
	position: fixed;
	bottom: 0px;
	background-color:#F9F9F9;
	border-top: solid 1px #D9D9D9;/*ボーダーの色が大事*/
	z-index: 100;/*上に行く　値が大きいほど上*/
}
.footer_icon_area01{
	width: 20%;
    padding: 10px 0 10px 0px;/*上に空白*/
}
.footer_icon_area01 img{
	width: 24px;
	height: 24px;
	opacity: 0.8;
}
.footer_icon_area01 p{
	text-align: center;
}
.footer_icon_font{
	font-size: 0.4rem!important;
	color: #949494;/*色の調節*/
	margin: 0;
	padding: 0;
	line-height: 0;
}
/*-----------------------------------

管理画面下のボタンエリア
利用：プロフィールの部分

ボタンを3つ並べる。web,スマホで表示させる。
下の部分に固定

---------------------------------------*/
.footer_icon_area02{
	width: 500px;
    display: flex;
    justify-content: space-between;
    height: 100px;
    position: fixed;
    bottom: 10px;
    left: 40%;
    z-index: 100;
    margin: 0 auto;
}
.footer_icon_area01a{
	width: 33%;
    padding: 10px 0 10px 0px;/*上に空白*/
}
.footer_icon_area01a img{
	width: 87px;
	height: 87px;
}
.footer_icon_area01a p{
	text-align: center;
}


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

slick　の部分です
http://plus-work.jp/service/seo_online.php

--------------------------------------------------------*/
.slick01 img{
    max-width: 100%;/*ここが原因だった*/
}
.slick_sub{
    margin: 0 auto;
}
.slick-slide {
    /*margin: 0 10px;voiceページに使うので修整*/
    border-right:1px solid #ffffff;
}
.slick_sub a:hover{
    opacity: 0.5;
}

/*-----navi_logo_area--------------------------------*/

.navi_logo_area{
	height: 80px;
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(252,253,253,1) 97%, rgba(245,246,247,1) 100%);
}

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

メンバーの部分　テーブル
利用場所：メンバーページ

--------------------------------------------------*/
.member_table{
	width: 100%;
	/*border-collapse: collapse;/*1本の線にする*/
	/*border: solid 1px #D5D5D5;/*外枠*/

}
.member_table td{
	text-align: center;
	padding: 0 0 0 10px;
	/*border-bottom: dotted 1px #D5D5D5;*/
}
.member_table td p{
	font-size: 0.8rem;
}
.mida05{
	background-image:url("../img/bar_background_profile.jpg");
	background-repeat: repeat-x;
	height: 45px;
	padding: 10px 0 0 10px;
	color: white;
	margin: 0 0 20px 0;
}
.mida05a{/*検索条件などに*/
	background-color: #f5f6f7;
	height: 45px;
	padding: 10px 0 0 10px;
	color:#0F0707;
	margin: 0 0 20px 0;
}

/*---------------------------------------------------
横スクロール部分
場所：コミュニテイーから探す
------------------------------------------------------*/
.horizon {
  overflow-x: scroll;
  overflow-scrolling: touch;/*指定がなくても大丈夫*/
  -webkit-overflow-scrolling: touch;/*タッチパネルから指を話しても、スクロールする*/	
  padding: 0 0 8px 0;
  display: -ms-flexbox;
  display: flex;
	width: 100%;
}

.horizon > li {
  width: 20%;
	margin: 0 5px;
}
.horizon li img{
	max-width: 135px;/*ここが大事*/
	border-radius: 10px;
}
.horizon a:link{
	text-decoration: none;
}
.s_text{
	width:140px;
	font-size: 0.7rem;
}

/*コミュニテイー　*/
.horizon02 {
  padding: 0 0 8px 0;
  display: -ms-flexbox;
  display: flex;
  flex-wrap:wrap;
  width: 100%;
}

.horizon02 > li {
  width: 18%;
	margin: 10px 7px;
}
.horizon02 li img{
	max-width: 135px;/*ここが大事*/
	border-radius: 10px;
}
.horizon02 a:link{
	text-decoration: none;
}
.s_text02{
	width:140px;
	font-size: 0.7rem;
}
.s_text03{/*数値部分*/
	color: #A3A3A3;
	font-size: 0.6rem;
}

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

見出し部分　すべて見る>>
場所：マイページ画面

------------------------------------------------------*/
.midasi_area{/*一番上の部分*/
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: space-between;
	margin: 0 0 10px 0;
}
.midasi_area a:link{
	text-decoration: none;
}
.midasi_area a:visited{
	color: #1035f2;/*リンクの色*/
}
.midasi_area01{/*左側*/
	width: 50%;
}
.midasi_area02{
	width: 50%;
	text-align: right;
	padding-right: 10px;
}
.midasi_area02 p{
	margin: 4px 0 0 0;
}
.prf_navi{

}
.prf_navi img{
	width: 180px;
	height: 180px;
	border-radius: 5%;/*角を丸くする*/
}
.prf_navi_btn img{
	max-width: 156px!important;
	text-align: center;
}
/*---------------------------------------------------

カレンダー部分
場所：管理画面

------------------------------------------------------*/
.calendar01{
	width: 100%;
	background-color: white;
	border-collapse: collapse;/*1本の線にする*/
	/*border: solid 1px #D5D5D5;/*外枠*/
	padding: 10px;
	border-radius: 5px;
}
.calendar01 td{
	border-collapse: collapse;
	border-bottom: solid 1px #D5D5D5;
	text-align: center;
	height: 60px;
}
.calendar01 tr{
	border-bottom: solid 1px #D5D5D5;
}
.on{
	background-color: #FFBD7E;
	color: #fff;
}
.usume{
	color: #8e8888;
}
/*---------------------------------------------------

mapエリア
場所：探すを使う場所　top

------------------------------------------------------*/
.maps_area_back{
	background-image: url("../img/back_map.png");
	background-position: right 10% top 20%;
	background-repeat: no-repeat;
}
.maps_area{
	width: 100%;
	height: auto;
	display: flex;
	margin: 20px 0;
	
}
.maps_area01{
	width:15%;
	margin: 8px 10px 0 0;
}
.maps_area01 p{
	background-color: #0bbf8e;
	text-align: center;
	color: white;
}
.maps_area02{
	width: 85%;
	align-items:center;/*中央へ*/
}

/*ulとliを変更して、ボタンを押したらページに飛べるようにする*/
.maps_area02 li {
  display: -webkit-box; /* safari, Chrome */
  display: -moz-box;    /* Firefox */
  display: -o-box;      /* Opera */
  display: -ms-box;     /* IE */
  display: box;         /* ベンダープレフィックスなし */
}
.maps_area02 a {
  display: block;
}
.maps_area02 li {
  -webkit-box-align: center; /* safari, Chrome */
  -moz-box-align: center;    /* Firefox */
  -o-box-align: center;      /* Opera */
  -ms-box-align: center;     /* IE */
  box-align: center;         /* ベンダープレフィックスなし */
}


.maps_area02 ul{
	display: flex;
	flex-wrap: wrap;/*折り返す*/
	align-items:center;
}
.maps_area02 li{
	position: relative;
	z-index: 1;
	width:12%;
	margin: 8px 5px;
	text-align: center;
	height: 40px;
	border: 1px solid #e0e0e0;
	background-color: #FFFFFF;
	color:#8c8c8c;/*文字の色*/
}
.maps_area02 li a{
	position: absolute;
	text-align: center;
	line-height:40px;
	width: 100%;
	z-index: 2; 
	color: #8c8c8c;/*文字の色*/
	
}
.maps_area02 a:link{
	text-decoration: none;
}
.maps_area02 a:hover{
	background-color: #e0e0e0;
}
/*-------------------------------------------------

お気に入りエリア
場所：お気に入り　マイページ
-------------------------------------------------------*/
.favorite_area{
	width: 100%;
	display: flex;
	flex-wrap: wrap;/*折り返し*/
}
.spa02{
	width: 30%;
	margin: 15px 10px;
}
.spa02 p{
	font-size: 0.8rem;
	line-height: 1.1rem;
}
.spa02 a{
	text-decoration: none;
	display:block;/*opacityを使えるようにする*/
	 position: relative;
}
.spa02 a:hover{
	opacity: 0.7;
}
.spa02 img{
	max-width: 230px;
	border-radius: 5%;
}
.mes02{
	color: #000000;/*濃い色*/
	font-size: 0.8rem!important;
	padding: 10px 0 0 0;
}


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

探すエリア　プロフ
場所：写真が並ぶ部分

------------------------------------------------------*/
.search_prf_area{
	width: 100%;
	display: flex;
	flex-wrap: wrap;/*折り返し*/
}
.spa{
	width: 17.3%;
	margin: 10px 10px 25px 10px;
}
.spa p{
	font-size: 0.8rem;
	line-height: 1.1rem;
}
.spa a{
	text-decoration: none;
	display:block;/*opacityを使えるようにする*/
	 position: relative;
}
.spa a:hover{
	opacity: 0.7;
}
.mes{
	color: #000000;
}
.mes01{
	color:#929292;
	font-size: 0.6rem!important;
}
.spa img{
	max-width: 133px;
	border-radius: 10%;
	/*border-radius: 50%;*/
}
.first{/*入ったばかりのメンバー*/
	color: #3FB128;
}
.usually{
	color: #E3E833;
}
.authentication{/*入ったばかりのメンバー*/
	color: #62d1b1;
}
.new_badg{/*新しい人のバッジ部分*/
	cursor: pointer;
	position: absolute;
	top:0;
	left: 0;
	box-sizing:border-box;
	background-color: #EB3033;
	color: #FFFFFF;
	width: 40px;
	height: 40px;
	padding: 13px 9px 13px 9px;
	border-radius: 50%;
	font-size: 0.6rem;
	text-align: center;
}
/*---------------------------------------------------

メッセージエリア
場所：メッセージエリア

------------------------------------------------------*/
.message_area{
	width: 100%;
	display: flex;
}
.message_area01{
	width: 23%;
	padding: 0 15px;
}
.message_area01 img{
	border-radius: 50%;
	width: 150px;
}
.message_area02{
	width: 72%;
	padding: 0 0 0 20px;
}
.message_area02 p{
	line-height: 1.6rem;
}
.message_area03{/*小さいアイコン*/
	width: 5%;
	position: relative;/*aリンクのために*/
}
.message_area03　a{
	text-decoration: none;
	position: absolute;
	top: 0;
	right: 0;
}
.message_area03　a:link{
	text-decoration: none;
}
.message_area ul{
	width: 100%;
}
.message_area li{
	display: flex;
	width: 100%;
	position: relative;
	padding: 10px 0;
	border: solid 1px #D0D0D0;
	margin: 10px 0;
}
.message_area ul li a{
    text-decoration: none;
    position: absolute;
    width: 80%;
    height: 100%;
    top: -2px;
    left: -5px;
}
.message_area ul li a:hover{
	opacity: 0.4;
	filter: alpha(opacity=40);
	background: #fff;
}
.time{
	color: #878787;
	padding-top: 10px;
}
.button{
	position: relative;
}
.pop_up,.pop_up02 {
    position: absolute;
    top: 0px;
    left: -113px;
    width: 100px;
    height: 50px;
    background-color: #E5E5E5;
    text-align: center;
    cursor: pointer;
    padding: 0px 0 0 10px;
	border-radius: 10px;
	z-index: 30;
}
.pop_up p{
	line-height: 3rem;/*タカサ調節*/
}
.message_area ul li .pop_up a{
	width: 100%;
}
.match_color{
	color:#ff8f91;
	font-weight: 700;
}

/*切り替え部分*/
.kirikae_area{
	width: 100%;
	height: 50px;
	display: flex;
	margin: 10px 0 20px 0;
}
.kirikae_area p{
	text-align: center;
}
.kirikae_area a{
	text-decoration: none;
}

/*-- Bounce To Top カーソルを合わせると、弾む部分　無駄部分---*/
.hvr-bounce-to-top {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}
.hvr-bounce-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fcd9e8;/*色*/
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-top:hover, .hvr-bounce-to-top:focus, .hvr-bounce-to-top:active {
  color:#000000;
}
.hvr-bounce-to-top:hover:before, .hvr-bounce-to-top:focus:before, .hvr-bounce-to-top:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}





/*選択中*/
.kirikae01a{
	width: 50%;
	border-bottom: solid 5px #f16182;
}
.kirikae01a a{/*色を変える*/
	width: 100%;
	color: #f16182!important;
	display: block;/*枠内すべてが反応する*/
}


.kirikae01{/*選択してない方*/
	width: 50%;
	border-bottom: solid 5px #e1e1e1;
}
.kirikae01 a{/*色を変える*/
	color: #B5B5B5;
	display: block;/*枠内すべてが反応する*/
}
.kirikae01 a:hover{
	opacity: 0.5;
	height: 50px;
}
.kirikae01a a:hover{
	opacity: 0.5;
	height: 50px;
}
.kirikae01a a:visited{
	color: wheat;
}

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

場所：足跡エリア

-----------------------------------------------*/
.foot_area{
	width: 100%;
	display: flex;
}
.foot_area01{
	width: 23%;
	padding: 0 15px;
}
.foot_area01 img{/*画像部分*/
	border-radius: 50%;
	width: 150px;
}
.foot_area02{
	width: 50%;
	padding: 10px 0 0 20px;/*文字の部分を調節*/
}
.foot_area02 p{
	line-height: 1.4rem;
}
.foot_area02 a{/*文字部分*/
	color: #000000;
}
.foot_area02 a:hover{
	opacity: 0.6;
}
.foot_area03 a{
	width: 27%;
	background: linear-gradient(90deg, rgba(255,138,133,1) 0%, rgba(252,109,120,1) 100%);
	color: #FFFFFF;
	padding: 15px 60px;
	border-radius: 100vh;
	text-decoration: none;}
.foot_area03{
	margin: 30px 0 0 0;
}
.foot_area03　a{
	text-decoration: none;
}
.foot_area03　a:link{
	text-decoration: none;
}
.foot_area ul{
	width: 100%;
}
.foot_area li{
	display: flex;
	width: 100%;
	position: relative;
	position: relative;
	padding: 10px 0;
	border-bottom: solid 1px #D0D0D0;
	margin: 10px 0;
}
.foot_area ul li a{
    text-decoration: none;
}
.foot_area ul li a:hover{
	opacity: 0.4;
}


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

場所：プロフィール
写真のエリア

-----------------------------------------------*/
.prf_p_area{
	width: 100%;
	display: flex;
	margin: 50px 0 0 0;
}
.prf_details{
	width: 50%;
}
.prf_photo_area{
}
.prf_p_big{
	width: 380px;
	height: 380px;
}

.prf_p_big img{
	width: 380px;
	height: 380px;
	border-radius: 10px;
} 
.prf_p_sml{
	
}
.prf_p_sml ul{
	display: flex;
	flex-wrap: wrap;/*下にいく*/
	width: 380px;
	margin-top:10px; 
}
.prf_p_sml li {
    width: 23%;
    margin: 0 auto;
	cursor: pointer;
}
.prf_p_sml li img{
	width: 100%;
	border-radius: 10px;
}
.prf_icon{
	margin: 15px 0 0 0;
	text-align: center!important;
}

.btn_good_area{
	display: flex;
	justify-content:center;
}
.btn_good_area p{
	text-align: center;
}
/*ボタン　部分*/
.goukon{
	width: 50%;
}
.good{
	width: 50%;
}




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

場所：メッセージエリア

-----------------------------------------------*/
.message_yaritori_area{
	display: flex;
	width: 100%;
	margin: 20px 0;
}

.oaite{/* 左の画像部分 */
	width: 10%;/*20だと間が空きすぎる*/
}
.oaite img, .me img{
	width: 60px;
	height: 60px;
	border-radius: 50%;
}
.oaite_message{
	width: 80%;
}
.oaite_message01{/*メッセージ部分*/
	width: 100%;
	height: auto;
	background-color: #F4F4F4;
	border-radius: 20px;
	padding: 15px;
}
.message_time{
	width: 100%;
}
.message_time p{
	color: #BCBCBC;
}
/*自分のメッセージエリア*/
.my_message_area{
	width: 100%;
	display: flex;
}
.my_message{
	width: 100%;

}
.my_message01{
	width: 80%;
	height: auto;
	margin: 0 0 0 auto;
	background-color: #fe6970;/*背景の色*/
	/*border: #8ae1f1 1px solid;*/
	border-radius: 20px;
	padding: 15px;
}
.my_message01 P{
	color: #FFFFFF;
}
.message_time{
	margin: 0 0 0 auto;
}
.message_time02{
	margin: 0 0 20px 0;
	
}
.message_time02 p{
	text-align: right;
	color: #BCBCBC;
}
.message_form{
  vertical-align: top;
  width: 100%;
  max-height: 170px;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  outline: none;
  resize: vertical;
	font-size: 17px;
}
a.message_sousin_btn {/*メッセージ送信ボタン*/
	background: linear-gradient(90deg, rgba(255,138,133,1) 0%, rgba(252,109,120,1) 100%);
	color: #FFFFFF;
	padding: 15px 60px;
	border-radius: 100vh;
	text-decoration: none;
}
a.message_sousin_btn:hover{
	color: #FFFFFF;
	background: #F59293;
}

.sen01{
	width: 100%;
	height: 40px;
	border-radius: -30px;
	border: none;
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 100%);
}

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

場所：コミュニテイーエリア

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

.category_area{
	width: 100%;
	display: flex;
	flex-wrap:wrap;
}
.ca_area01{/*親ボックス*/
	width: 22%;
	margin: 10px 10px;
	position: relative;
}
.ca_title{
    position: absolute;
	width: 100%;
    top:50%;
    color: #FFFFFF;
	text-align: center!important;
}
.black{
	background: #000000;/*背景を黒*/
	border-radius: 5%;
}
.ca_area01 img{
	width: 100%;
	border-radius: 5%;
	opacity: 0.8;
}
.ca_area01 p{
	line-height: 0;
	text-align: center;
}

.main_c img{/*丸くする*/
	border-radius: 20px;
}

.mainc_area{
	width: 100%;
	position: relative;
}
.mainc_area p{
	position: absolute;
	top: 60%;
	left: 4%;
	color: #FFFFFF;
    line-height: 2.0rem;
    font-size: 1.2rem;
	text-shadow: 1px 2px 3px #808080; 
}

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

設定部分

--------------------------------------------*/
.prof_area_back{
	width: 100%;
	max-width: 770px;
	height: auto;
	background: linear-gradient(110deg, rgba(251,184,106,1) 0%, rgba(251,118,153,1) 100%);
	padding-bottom: 30px;
	border-radius: 5px;
}
.prof_area{
	width: 100%;
	height: auto;
	display: flex;
	 justify-content: center;
	align-items:center;
}
.prof_area_01{
	width: 25%;
	margin: 70px 0 0 0;
}
.prof_area_01 p,.prof_area_03 p{
	text-align: center;
	color: #FFFFFF;
	line-height: 1.8rem;
}
.prof_area_02{
	width: 30%;
	margin: 0;
}
.prof_area_02 p{
	text-align: center;
	color: #FFFFFF;
	line-height: 4rem!important;
}
.prof_area_02 img{
	width: 100%;
	border-radius: 50%;
}
.prof_area_03{
	width: 25%;
	margin: 70px 0 0 0;
}
.prof_area_b{
	width: 100%;/*幅を横まで広げる*/
	display: flex;
	 justify-content: center;
	align-items:center;
}
.prof_area_01b{
	width: 25%;
	border-right: 1px dotted #FFFFFF;
}
.prof_area_01b p,.prof_area_02b p,.prof_area_03b p{
	text-align: center;
	color: #FFFFFF;
}
.prof_area_02b{
	width: 30%;
}
.prof_area_03b{
	width: 25%;
	border-left: 1px dotted #FFFFFF;
}
.point_prf{
	font-size: 1.9rem;
	margin-top: 2px;
}
.point_prf02{
	font-size: 1.3rem;
}
.prf_photo_area02{/*画像登録の部分*/
	width: 100%;
}

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

セレクト部分など

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

select{
	height: 50px;/*共通*/
	padding: 0 0 0 10px;
	border: #D3D3D3 1px solid;
	margin: 10px 0;
	width: 200px;
	font-size: 16px;/*拡大表示対策*/
	/*transform: scale(0.8);　ボックスごと小さくなってしまうのでダメ*/
}
input{
}
input[type="text"]{
	height: 50px;
	/*font-size: 1.6rem;*/
	/*background-color:#FF0004;*/
}
.height{
	width: 200px;
	height: 50px;
	border: #D3D3D3 1px solid;
	margin: 10px 0;
	
}
.text_box_name{
	width: 200px;
	height: 50px;
	padding: 0 0 0 10px;
	border: #D3D3D3 1px solid;
	margin: 10px 0;
}
.mail_box_name{
	width:300px;
	height: 50px;
	padding: 0 0 0 10px;
	border: #D3D3D3 1px solid;
	margin: 10px 0;
	
}

.cancel a{
	width: 27%;
	background: #BBBBBB;
	color: #FFFFFF;
	padding: 15px 50px;
	border-radius: 100vh;
	text-decoration: none;
}


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

マイページ　チェックボックス部分

---------------------------------------------------------*/
.drink_check{
	width: 100%
}

.drink_check input[type='checkbox'] {
    cursor: pointer;
	display: none;
}

.checkbox01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.checkbox01::before {
    background: #fff;
    border: 1px solid #C8C8C8;/*7bc8cf*/
    content: '';
    display: block;
    height: 16px;
    width: 16px;/*ボックスの大きさ*/
	
	left: 5px;/*位置*/
    margin-top: -8px;
    position: absolute;
    top: 50%;
   
}
.checkbox01::after {
    border-right: 3px solid #7bc8cf;
    border-bottom: 3px solid #7bc8cf;
    content: '';
    display: block;
    height: 19px;/*9が初期値、18で長くなった*/
	width: 7px;/*5*/
	
    left: 13px;/*位置*/
    margin-top: -14px;/*マイナスにすると上に移動する*/
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    
}
.drink_check input[type=checkbox]:checked + .checkbox01::after {
    opacity: 1;
}


.drink_check label {
  cursor: pointer;
}
.drink_check ul{
	display: flex;
	flex-wrap:wrap;/*折り返し*/
}
.drink_check li{
	width: 25%;
	margin: 15px 0;
	color: #7bc8cf;/*文字の色*/
	font-weight: 600;
	
}
/*---------------------------------------------------

マイページ　チェックボックス部分

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

.check_area{
	width: 100%;
}

.check_area input[type='checkbox'] {
    cursor: pointer;
	display: none;
}
.check_area input[type=checkbox]:checked + .checkbox01a::after {
    opacity: 1;
}


.check_area label {
  cursor: pointer;
}
.check_area ul{
	display: flex;
	flex-wrap:wrap;/*折り返し*/
	padding: 0 0 0 20px;
}
.check_area li{
	width: 100%;
	margin: 15px 0;
	color: #309095;/*文字の色 #7bc8cf  */
	font-weight: 600;
	/*border-bottom: dotted 1px #BDBDBD;*/
}



.checkbox01a {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.checkbox01a::before {
    background: #fff;
    border: 1px solid #C8C8C8;/*7bc8cf*/
    content: '';
    display: block;
    height: 16px;
    width: 16px;/*ボックスの大きさ*/
	
	left: 5px;/*位置*/
    margin-top: -8px;
    position: absolute;
    top: 50%;
   
}
.checkbox01a::after {
    border-right: 3px solid #7bc8cf;
    border-bottom: 3px solid #7bc8cf;
    content: '';
    display: block;
    height: 19px;/*9が初期値、18で長くなった*/
	width: 7px;/*5*/
	
    left: 13px;/*位置*/
    margin-top: -14px;/*マイナスにすると上に移動する*/
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    
}



/*------------------今日のピックアップ--------------------------------------------*/
.today_pickup{
	width: 380px;
	height: 550px;
	margin:  0 auto;
	/*margin-top:30px; */
	background: linear-gradient(180deg, rgba(11,191,246,1) 0%, rgba(36,154,228,1) 65%, rgba(249,249,249,1) 80%, rgba(255,255,255,1) 100%);
}
.pickup_img img{
	width: 95%;
	border-radius: 10px;
}

.pickup_img{
	text-align: center;
}
.pt_area{/*親ボックス*/
		position: relative;
}

.pick_text_area {/*子ボックス*/
	background: #fff;
	width: 92%;
	border-radius: 10px;
	margin: 0 auto;
	padding: 10px;
	position: absolute;
	bottom: 26px;
	left: 15px;
}
.pick_text_area p{
	font-size: 12px;
	line-height: 25px;
}
.wh02{
	color:#FFF;/*--文字色を白にする --*/
	height: 60px;
	padding: 0 0 0 10px;
}
.wh03{
	font-size: 24px!important;/*×の大きさを調節*/
	padding: 0 10px 0 0;
}
.wh03 a{
	text-decoration: none;
	color: white;
}
.right01{
	text-align: right;
	padding: 0 10px 0 0;
}
.pt_area02{
	display: flex;
	justify-content:center;
}
.pt_area02 p{
	padding: 0 15px;
}
/*-----------------------------------------------
ログインボーナス
場所：
------------------------------------------------*/
.login_bonus{
	width: 380px;
	height: 550px;
	margin:  0 auto;
}


/*-----------------------------------------------
マッチング
場所：マッチ成立時
------------------------------------------------*/
.matching_area{
		width: 380px;
	height: 550px;
	margin: auto;
	background-image: url("../img/mtching/match_back.jpg")
}
.wh_ma01{
	color:#FFF;/*--文字色を白にする --*/
	text-align: center;
}

.ma_pr{/*画像が並ぶところ*/
	display: flex;
	justify-content: center;
	align-items: center;
}
.ma_pr p{
	text-align: center;
}
.ma_pr01_01,.ma_pr01_03{
	width: 33%;
}
.ma_pr01_02{
	width: 15%;
}
.ma_pr01_01 img,.ma_pr01_03 img{
	width: 120px;/*画像のサイズ*/
	border-radius: 50%;
}
.message_btn{
	width: 300px;
	margin: 0 auto;
}
.message_btn a{
	background-color: #FFFFFF;
	padding: 18px 40px;
	border-radius: 45px;
	text-decoration: none;
	color: #ed8c93;
}
.ato_okuru{
	line-height: 7rem;
	color: #FFFFFF;
}
.ato_okuru a{
	text-decoration: none;
	color: #FFFFFF;
}

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

条件指定

-------------------------------------*/
.zyoken01{
}


.zyoken01 a{
	text-decoration: none;
	color: #252525;
}


.mokuteki_area{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.mokuteki_area input[type="checkbox"] {/*シカクを消す*/
    display: none;


}
.radio-input + label{
	font-size: 12px;
	padding: 20px 13px 22px 11px;/*バランス調節*/
	text-align: center;
	position:relative;
	cursor: pointer;
	display: flex;
	margin: 0 20px 19px 5px;/*ここの値が大事*/
}
.radio-input + label::before{/*●をつくる*/
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;/*丸のサイズ*/
  height: 60px;
  border: 1px solid #d0d0d0;/*線の色*/
  border-radius: 50%;
}
.radio-input:checked + label{
  color: #d01137;/*文字の色*/
}
.radio-input:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
	color: #d01137;
  background:rgba(245,121,155,0.4);
  border-radius: 50%;
	border: 2px solid #fffff;
}

.nenrei01{
	width: 80px;
}
.nenrei02{
	width: 100px;/*身長の部分*/
}

#main_select{
	width: 380px;
	margin:  0 auto;
	background-color: #FFFFFF;
}

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

条件指定

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

.zyoken01 a{
	text-decoration: none;
	color:#5F5F5F;
	margin: 0 0 0 15px;
	line-height: 70px;
}

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

場所：非表示
マイページ部分

--------------------------------------*/
.users_area{
	display: flex;
	width: 100%;
}
.photos{
	width: 15%;
}
.photos img{
	width:80px;
	border-radius: 50%;
}
.users_area01{
	width: 50%;
	
}
.users_area02{
	margin: 18px 0 0 0;
	
}
.sakuzyo_btn a{
	margin: 15px 0 0 0;
	width: 27%;
	background: linear-gradient(90deg, rgba(255,138,133,1) 0%, rgba(252,109,120,1) 100%);
	color: #FFFFFF;
	padding: 15px 60px;
	border-radius: 100vh;
	text-decoration: none;
}
/*----------------------------------------

場所：設定ページ
マイページの設定ページ部分

--------------------------------------*/
.setting_area img{
	width: 15px;
	height: 15px;
	margin:  0 15px 0 0;
}
.setting_area a{
	text-decoration: none;
	color: #626161;
}
.setting_area li{
	line-height: 4rem;
	border-bottom: 1px dotted #D3D0D0;
}
.setumei{
	color: #6E6E6E;
}

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

場所：ナビエリア

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

.table_navi{
    margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table_navi td, .table_navi th{
	padding:0 0 0 20px;/*文字ｎ位置を調節*/
	margin:0;
	border: 1px solid #F3F3F3;/**/
	height: 50px;
	position: relative;
}
.icon_ue{
	position: relative;
}

.icon_search{/*マイページのアイコン*/
	position: absolute;
	top:10px;
	left: 10px;
	background-image: url("../img/kanri/icon_search02.png");
	background-repeat: no-repeat;
	background-size: 25px 25px;
	opacity: 0.8;
	line-height: 30px;
	width: 90%;
}
.icon_mypage{
	position: absolute;
	top:10px;
	left: 10px;
	background-image: url("../img/kanri/icon_profile02.png");
	background-repeat: no-repeat;
	background-size: 25px 25px;
	opacity: 0.8;
	line-height: 30px;
	width: 90%;
}
.icon_mypage p{
	width: 100%;
}
.icon_message{/*メッセージ　のアイコン*/
	position: absolute;
	top:10px;
	left: 10px;
	background-image: url("../img/kanri/icon_message02.png");
	background-repeat: no-repeat;
	background-size: 25px 25px;
	opacity: 0.8;
	line-height: 30px;
	width: 90%;
}
.icon_favorit{/*メッセージ　のアイコン*/
	position: absolute;
	top:10px;
	left: 10px;
	background-image: url("../img/kanri/icon_favorit02.png");
	background-repeat: no-repeat;
	background-size: 25px 25px;
	opacity: 0.8;
	line-height: 30px;
	width: 90%;
}
.icon_good{/*メッセージ　のアイコン*/
	position: absolute;
	top:10px;
	left: 10px;
	background-image: url("../img/kanri/icon_good02.png");
	background-repeat: no-repeat;
	background-size: 25px 25px;
	opacity: 0.8;
	line-height: 30px;
	width: 90%;
}
.icon_asiato{/*メッセージ　のアイコン*/
	position: absolute;
	top:10px;
	left: 10px;
	background-image: url("../img/kanri/icon_asiato02.png");
	background-repeat: no-repeat;
	background-size: 25px 25px;
	opacity: 0.8;
	line-height: 30px;
	width: 90%;
}
.icon_community{/*メッセージ　のアイコン*/
	position: absolute;
	top:10px;
	left: 10px;
	background-image: url("../img/kanri/icon_community02.png");
	background-repeat: no-repeat;
	background-size: 25px 25px;
	opacity: 0.8;
	line-height: 30px;
	width: 90%;
}
.icon_goout{/*メッセージ　のアイコン*/
	position: absolute;
	top:10px;
	left: 10px;
	background-image: url("../img/kanri/icon_goout02.png");
	background-repeat: no-repeat;
	background-size: 25px 25px;
	opacity: 0.8;
	line-height: 30px;
	width: 90%;
}

.icon_setei{/*メッセージ　のアイコン*/
	position: absolute;
	top:10px;
	left: 10px;
	background-image: url("../img/kanri/icon_setei02.png");
	background-repeat: no-repeat;
	background-size: 25px 25px;
	opacity: 0.8;
	line-height: 30px;
	width: 90%;
}

.icon_help{/*メッセージ　のアイコン*/
	position: absolute;
	top:10px;
	left: 10px;
	background-image: url("../img/kanri/icon_help02.png");
	background-repeat: no-repeat;
	background-size: 25px 25px;
	opacity: 0.5;
	line-height: 30px;
	width: 90%;
}


.table_navi p{
   margin: 0;
   padding: 0 0 0 40px;
	font-size: 0.7rem;
}
.table_navi a{
	color: #535353;
	text-decoration: none;
	background-color: antiquewhite;
}
.table_navi img{
	padding: 5px 0 0 0;
	height: 25px;
}


.prf_n img{/*画像を丸くする　ナビゲーション内部*/
	width: 100px;
	border-radius: 50%;
}
.burger_table{/*ナビゲーションエリアの画像部分*/
	margin: 30px 0 30px 0;
}


.navi_menu_area ul{
	max-width: 380px;
	display: flex;
	flex-direction: wrap!important;
}
.navi_menu_area ul li{
	width: 100%;/*全体表示*/
	height: 50px;
}

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

場所：マイページ　
場所：検索

------------------------------------------------*/
.seaarch_icon_area{
	display: flex;
	width: 100%;
}

.search_c{/*テーブルの幅*/
	width: 150px;
}


/*ボタン*/
.search_btn a{
	background: linear-gradient(90deg, rgba(255,138,133,1) 0%, rgba(252,109,120,1) 100%);
	color: #FFFFFF;
	padding: 15px 40px;
	border-radius: 100vh;
	text-decoration: none;
}
.si_area02 select {
    height: 60px;
    padding: 0 0 0 20px;
    border: #D3D3D3 1px solid;
	color:#747474;
	border-radius: 100vh;
    margin: 10px 0;
    width: 200px;
    font-size: 16px;
}
/*--------------------------------------
場所：マイページのプロフィール
ボタンなど
------------------------------------------*/
.btn_prf_area{
	display: flex;
	width: 100%;
	max-width: 770px;
	justify-content:space-between;
}
.btn_prf_area01{
	width: 50%;
}
.btn_prf_area02{
	position: relative;/*親*/

}

.btn_prf_area01 button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
	 border: 0;
  border-radius: 100%;
  background-color:#414141;
	color: white;/*文字の色*/
	height: 30px;
	width:30px;
	cursor: pointer;
	font-size: 1.3rem;
	text-align: center;
	line-height: 1.3rem;
	padding: 0;
	margin: 0;
}
.btn_prf_area02 button{
	  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;/*まず使えるようにする*/
	border-radius: 50%;
	background-color:#414141;
	color: white;/*文字の色*/
	height: 30px;
	width:30px;
	cursor: pointer;
	font-size: 1.3rem;
	text-align: center;
	line-height: 1.3rem;
	padding: 0;
	margin: 0;
}

/*--表示、非表示エリア----*/
.button_option_area{
	display: none;
	position: absolute;
    top: -2px;
    left: -160px;
    width: 150px;
	background-color: white;
	border: 1px solid #E0E0E0;
	border-radius: 10px;
	z-index: 11;
	
}
.button_option_area ul{
	display: flex;
	flex-direction:column;/*縦に並べる*/
	
}
.button_option_area li{
	height: 50px;
	padding: 15px 0 0 25px;
	border-bottom: 1px dotted #CCCCCC;
}
.button_option_area li:last-child{
	border-bottom:none;
	
}
.button_option_area li a{
	text-decoration: none;
	color: #3A3A3A;;
}
.option_btn{
	z-index: 10;
}
/*-----------------------------------

場所：行きたい

-----------------------------------*/
.prf_go_area{/*親ボックス*/
	display: flex;
	width:100%; 
	align-items:center;
}
.prf_go_area01{
	width: 35%;
}
.prf_go_area01 img{
	width: 200px;
	height: 200px;
	border-radius: 50%;
}

.prf_go_area02{
	
}
.test001{
	margin: 20px 0;
}
/*-----------------------------------

場所：メニュー　バーガー内

-----------------------------------*/
.navi_menu_area01{
	max-width: 380px;
	width: 100%;
	margin: 10px 0 20px 0;
}
.navi_menu_area01 td{
	width: 118px;
	padding: 0!important;
}
.navi_menu_area01 td img{
	width: 118px;
}

.navi_btn_area{
	max-width: 380px;
}
.navi_btn_area　ul{
	all: initial;
	display: flex!important;
	flex-wrap: wrap;
	
}
.navi_btn_area li img{
	width: 118px;
	height: 100px;
}
/*----------------------------------------------

場所：プロフィール
写真のエリア　右に並ぶver

-----------------------------------------------*/
.prf_photo_area02{/*親ボックス*/
	width: 100%;
	display: flex;
}
.prf_p_area02{
	width: 100%;
	display: flex;
	margin: 50px 0 0 0;
}
.prf_details02{
	width: 50%;
}

.prf_p_big02{/*大きい画像*/
	width: 250px;/*左に並べるため*/
	height: 250px;
}
.prf_p_login{/*ログイン部分*/
	width: 250px;
	height: 250px;
	margin: 0 auto;
	margin-bottom: 30px;
}
.prf_p_big02 img,.prf_p_login img{
	width: 250px;/*写真サイズの指定*/
	height: 250px;
	border-radius: 10px;
} 

.prf_p_sml02{/*左側*/
}

.prf_p_sml02 ul{
	display: flex;
	flex-wrap: wrap;/*下にいく*/
	width: 520px;
}

.prf_p_sml03 ul{/*ログイン部分*/
	display: flex;
	flex-wrap: wrap;/*下にいく*/
	max-width: 380px;
	margin: 0 auto;
	justify-content:center;
}

.prf_p_sml02 li,.prf_p_sml03 li {
    width: 22%;
    margin: 0 5px 10px 10px;
	cursor: pointer;
}
.prf_p_sml02 li img,.prf_p_sml03 li img{
	width: 100%;
	border-radius: 10px;
}
.prf_icon02{
	margin: 15px 0 0 0;
	text-align: center!important;
}

.btn_good_area02{
	display: flex;
	justify-content:center;
}
.btn_good_area02 p{
	text-align: center;
}
/*ボタン　部分*/
.goukon{
	width: 50%;
}
.good{
	width: 50%;
}

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

ログイン部分
場所：

-----------------------------------------------*/
.arrow_area{
	position: relative;
}
.arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.arrow::before,
.arrow::after{
    position: absolute;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.p_big{
	position: relative;
}


.migi::before{
	position: absolute;
    top: -217px;
    left: 373px;
	width: 30px;
    height: 30px;
    border-top: 2px solid #7a0;
    border-right: 2px solid #7a0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);	
}

.hidari::before{
	position: absolute;
	   top: -258px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-top: 2px solid #7a0;
    border-left: 2px solid #7a0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);	
}

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

スライドショー部分

---------------------------------------------------------------------*/
.slideshow{
	background-color: rgb(0,0,0);
	height: 465px;
	min-width: 960px;
	position: relative;/*親ボックス*/
}
.slideshow-slides{
	height: 100%;
	position: absolute;
	width: 100%;/*leftはJs指定*/
}
.slideshow-slides .slide{
	height: 100%;
	overflow: hidden;/*はみ出した部分は隠す*/
	position: absolute;
	width:100%; /*leftはJs指定*/
}
.slideshow-slides .slide img{
	left: 50%;
	margin-left: -800px;
	position: absolute;
}
.slideshow-nav a,
.slideshow-indicator a{
	overflow: hidden;
}
.slideshow-nav a:before,
.slideshow-indicator a:before{
	content: url(../img/arrow_01.png);/*画像を追加する*/
	display: inline-block;
	font-size: 0;
	line-height: 0;
}


.slideshow-nav a{
	position: absolute;
	top:50%;
	left: 50%;
	width:72px;
	height: 72px;
	margin-top: -36px;
}
.slideshow-nav a.prev{
	margin-left: -480px;/*注意*/
}
.slideshow-nav a.next{
	margin-left: 408px;
}
.slideshow-nav a.next:before{
	margin-left: -80px;
	margin-top: -20px;
}
.slideshow-nav a.disabled{
	display: none;
}

/*インジケーターデザイン*/
.slideshow-indicator{
	bottom: 30px;
	height: 16px;
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
}
.slideshow-indicator a{
	display: inline-block;
	width:16px;
	height: 16px;
	margin-left: 3px;
	margin-right: 3px;
}
.slideshow-indicator a.active{
	cursor: default;
}
.slideshow-indicator a:before{
	margin-left: -110px;
}
.slideshow-indicator a.active:before{
	margin-left: -130px;
}

.no-js .slideshow{
	height: auto;
}
.no-js .slideshow-slides{
	height: auto;
	position: static;
}
.no-js .slideshow-slides .slide{
	display: block;
	height: auto;
	position: static;
}
.no-js .slideshow-slides .slide img{
	margin: auto;
	position: static;
}
.no-js .slideshow-nav,
.no-js .slideshow-indicator{
	display: none;
}



/*イイネボタンなどに利用してます*/
.messa_btn a{
	width: 27%;
	background: linear-gradient(90deg, rgba(255,138,133,1) 0%, rgba(252,109,120,1) 100%);
	color: #FFFFFF;
	padding: 15px 60px;
	border-radius: 100vh;
	text-decoration: none;
}
.messa_btn02 a{/*お気に入りで利用*/
	margin: 23px 0 0 0;
	width: 80%;
	background: linear-gradient(90deg, rgba(255,138,133,1) 0%, rgba(252,109,120,1) 100%);
	color: #FFFFFF;
	padding: 15px 60px;
	border-radius: 100vh;
	text-decoration: none;
}
/*---------------------------------------------

場所：マイページコメント
運営に、メッセージを送る事ができます。

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

.comment_text_area textarea{
	width: 100%;
	border: 1px solid #ADADAD;
	font-size: 17px;
}

.comment_text_area textarea:focus {
  border: solid #EDB46A;
  outline: 0;
}
.comment_area02 input[type="submit"],.comment_area02 input[type="button"],.comment_area02 input[type="reset"] {
	  -webkit-appearance: none;
}

.comment_area02{
	margin-top: 20px;
	padding: 10px 30px;
	background: linear-gradient(90deg, rgba(255,138,133,1) 0%, rgba(252,109,120,1) 100%);
	color: #FFFFFF;
	border-radius: 100vh!important;
	text-decoration: none;
}
.comment_area02:hover{
	opacity: 0.6;
}


/**-------------------------------------------------*/
.banner_back{
	background-img: url("../img/banner_back.png")!important;
	background-repeat: no-repeat;
	background-position: center center;
	margin: 0 auto;
	max-width: 1920px;
	height: 180px;
}

.black02{
	color: black!important;
}
/*---------------------------------------------------------

お客様の声部分
---------------------------------------------------------*/
.koe_area{
	width: 100%;
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;/*子要素の折り返し*/
}
.koe_area01{
	width: 49%;
	padding: 0 10px 0 0;
	border-radius: 20px;
	margin: 0 0 15px 0;
}
.koe_area01 img{
	width: 100%;
}
/*------------------------------------------------------------

アニメーション

----------------------------------------------------------------*/
.sa {
  opacity: 0.6;/**/
  transition: all .8s ease-out;/*.8*/
}
 
.sa.show {/*初期状態に戻る*/
  opacity: 1;
  transform: none;
}
 
.sa--lr {
  transform: translate(-10px, 0);/*左から右え 初期は100*/
}
 
.sa--rl {
  transform: translate(20px, 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);
}

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


場所：よくある質問

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

.qa_area{
	width: 100%;
	border-bottom: 1px dotted #ACACAC;
	margin: 30px 0;
}
.qa_area p{
	line-height: 2.2rem!important;
}
.q_area00{
	display: flex;
}

.q_area01{
	width: 8%;
}

.q_area02{
	width: 92%;
}

.a_area{
	width: 100%;
	display: flex;
	padding: 0 0 15px 0;
}
.a_area01{
	width: 8%;
}
.a_area02{
	width: 92%;
}
/*-------------------------------------------------
メガメニューの部分

gnavi_backを基点に.big_menu_seは計算している。
これにより、ずれを修整している。

-------------------------------------------------*/
.bmenu_01{
	/*position: relative;*/
}
.big_menu_area{
	display: none;/*最初は非表示にしておく*/
	width: 100%;
	height: 250px;
	background: #FFFFFF;
	position: absolute;
	top: 60px;/*100px+60px足して計算する gnaviのulを基点にしている*/
	left: 0;
	opacity: 0.9;
}
.big_menu_area02{
	display: none;/*最初は非表示にしておく*/
	width: 100%;
	height: 250px;
	background: #FFFFFF;
	position: absolute;
	top: 60px;/*100px+60px足して計算する gnaviのulを基点にしている*/
	left: 0;
	opacity: 0.9;
}
.big_menu_se01{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	margin-top: 30px;
	display: flex;
	flex-direction: row;/*左から右に*/
}
.bm_sp{/*写真が並ぶ部分*/
	width: 20%;
	margin: 0 18px 0 0;
}
.bm_sp img{
	width: 100%;
}
.bm_sp a{
	color: #8F8F8F;
	text-decoration: none;/*した線を消す*/
}
.bm_sp img:hover,.bm_sp a:hover{
	opacity: 0.7;
}
.bm_sp p{
	line-height: 1.4rem;
	font-size: 0.8rem;
}
.center_sp{
	color: #8F8F8F;
	text-align: center;
}
/*---------------------------------------------------------

場所：よくある質問部分

----------------------------------------------------------*/
.faq_area{
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px 0;/*上下に隙間をつくる*/
}
.faq_area p{
	font-size: 1rem;
	line-height:2.5rem;/* 新しい書き方*/
	margin: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;/*上下に隙間を作る*/
}
.is_active{
	background-color: #f0f3f5;/*背景の色*/
}
.textbox{
	width: 100%;
}
.textbox textarea{
	max-width: 500px;
	width: 95%;/*幅を調節*/
}
/*---------------------------------------------------------

場所：中央ぞろえ

----------------------------------------------------------*/
.center01{
	text-align: center;
}
.center_check{
	text-align: center;
	margin: 10px 0 15px 0;/*下は15pxがきれい*/
}
.center_faq{
	text-align: center;
	line-height: 1.0rem!important;
}
/*---------------------------------

お知らせ部分

-------------------------------------*/
.news_area{
	max-width: 1000px;
	width: 100%;
	margin: 20px 0;
}
.news_area01{
	max-width: 1000px;
	width: 100%;
	display: flex;
	margin: 20px 0;
	border-bottom: 1px dotted #A0A0A0;
}
.time01{/*時間部分*/
	width: 15%;
}
.news_txt{/*テキスト部分*/
	width: 85%;
}
.news_txt a{
	text-decoration: none;
	color: #3A3A3A;
}
/*---------------------------------------------------------

各ページのmain部分

-----------------------------------------------------*/
.main_photo_kanri{
		width: 100%;
	background-image: url("../img/back_img/back13.jpg");
	height: 60vh;/*60vh*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-bottom: 30px;
}

.main_photo_renove{
		width: 100%;
	background-image: url("../img/back_img/renove.jpg");
	height: 60vh;/*60vh*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-bottom: 30px;
}
.main_photo_service01{
	width: 100%;
	background-image: url("../img/back_img/back1a.jpg");
	height: 60vh;/*60vh*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-bottom: 30px;
}

.main_photo_invest{
	width: 100%;
	background-image: url("../img/back_img/back1.jpg");
	height: 60vh;/*60vh*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-bottom: 30px;
}
.main_photo_company{
	width: 100%;
	background-image: url("../img/back_img/back6.jpg");
	height: 80vh;/*60vh*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-bottom: 30px;
}

.main_photo_company_movie{
	position: fixed;
	z-index: -1;/*最背面に設定*/
    top: 150px;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
}
.main_video{
	position: absolute;
	z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 177vh;
	height: 56.25vw;
    min-height: 100%;
    min-width: 100%;
}
.main_photo_company_movie::after{
	content: '';
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	
	background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);/*111が初期*/
	background-color: rgba(63,63,63,0.1);
	background-size: 4px 4px;
	background-position: 0 0, 2px 2px;
	 opacity: 0.2;
}



.main_photo_contact{
	width: 100%;
	background-image: url("../img/back_img/city.jpg");
	height: 50vh;/*60vh*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-bottom: 30px;
}
.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-bottom: 30px;
}
.main_photo_manshon{
		width: 100%;
	background-image: url("../img/back_img/back1a.jpg");
	height: 80vh;/*60vh*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-bottom: 30px;
}
.main_photo_voice{
	width: 100%;
	background-image: url("../img/back_img/back17.jpg");
	height: 60vh;/*60vh*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin-bottom: 30px;
}
.main_photo_service{/*サービス*/
		width: 100%;
	background-image: url("../img/back_img/back19.jpg");
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 15px 0;/*隙間づくり　プロダクトindexページ*/
}

.main_photo_customer{/*サービス*/
		width: 100%;
	background-image: url("../img/back_img/customer.jpg");
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 20px 0;
}
.main_photo_hazimete{
	width: 100%;
	background-image: url("../img/back_img/back6.jpg");
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.main_photo_qa{
	width: 100%;
	background-image: url("../img/back_img/qa02.jpg");
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.main_photo_profile{
	width: 100%;
	background-image: url("../img/back_img/qa02.jpg");
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 20px 0;/*下に隙間を作っておく*/
}
.main_photo_seminar{
	width: 100%;
	background-image: url("../img/back_img/back_seminar.jpg");
	height: 60vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 0 20px 0;/*下に隙間を作っておく*/
}
.main_photo_bike{/*ランディングページ用*/
	width: 100%;
	background-image: url("../img/back_img/back_bike02.jpg");
	height: 80vh;
	background-repeat: no-repeat;
	background-attachment: fixed;
}


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

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

--------------------------------------------*/
.main_title_area{
	 width: 100%;
    height: auto;
    padding: 15% 0 0 22%;
}
.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;
}

/*-------------動画で利用　---------------------*/
.main_titles{/*画面部分の背景　高さを出す*/
	width: 1000px;/*幅を指定*/
	height: 600px;
	margin: 0 auto;
}
.main_title02{
	letter-spacing:1px;
	font-size: 2.0rem;
	font-weight: 450;
	/*text-align: center;*/
	color: white;
	line-height: 4.5rem;
	text-shadow:2px 2px 3px #716a6a;
}
.main_title_e02{/*英語の部分*/
	padding: 50px 0 0 0;
	font-size: 1.3rem;
	line-height: 2.0rem;/*調節*/
	color: white;
	font-weight: 600;
	letter-spacing:0.1rem;/*文字の間隔*/
	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: #f1d155;
	/*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: #f1d155;/*background: #0cb59b;/*
	color: white;/*文字の色*/
	padding: 0 0 0 15px;
	color: white;

}

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

スタッフエリア
場所：

--------------------------------------------*/
.staff_area_back{
	margin-bottom: 30px;
}
.staff_area{/*1200px にするか？1000pxにするか？*/
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;/*折り返す*/
}
.staff_area_sub{
	width: 23%;
	margin: 0 23px 50px 0;
}
.staff_area_sub img{
	width: 100%;
}
.center_staff01{/*title*/
	text-align: center;
	font-size: 2.93rem;
	line-height: 2.93rem;
	font-family: din-2014, 游ゴシック, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
	margin-top: 50px;
    margin-bottom: 15px;
    letter-spacing: 9px;
    font-weight: 200;
    font-style: italic;
	color: #555555;
}
.center_staff02{
	color: #555555;
	text-align: center;
	 margin-bottom: 40px;
}
.st_name{
	font-size: 1.5rem;
	letter-spacing: 3px;/*文字の間隔*/
	padding: 0 0 10px 0;
}
/*-------------------------------------------

場所:全ページ
ローディング部分

----------------------------------------------*/
#load_bg{/*背景部分*/
  width: 100vw;
  height: 100vh;
  transition: all 1s;	
  background: radial-gradient(#e6dee9,#fdcbf1);/*背景の色　グラデもできる*/
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

/* ローディングアニメーション */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

#load_bg p{
	color:#000000;
	text-align: center;
}

.loader {/*回る部分*/
  color:#D38BE3;/**/
  font-size: 20px;
  margin: 200px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
	z-index: 9999;
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

.loaded {/*ここで非表示にする*/
  opacity: 0;
  visibility: hidden;
	display: none;
}


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

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

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

/*----------------悩みエリア-----------------------------*/
.nayami_midasi{
	text-align: center;
	color: #6acdd4;
	font-size: 1.0rem;
	line-height: 3.0rem;
	font-weight: 600;
	letter-spacing:0.3rem;/*文字の間隔*/
	padding: 50px 0 0 0;
}
.nayami_midasi02{
		text-align: center;
	color: #6acdd4;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing:0.3rem;/*文字の間隔*/
	padding: 0 0 50px 0;
}
.nayami_midasi03{
	color: #6acdd4;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing:0.1rem;/*文字の間隔*/
	padding: 12px 0 0 0;
}
.logo img{
	width: 160px;
	height: 55px;
}
/*------------------------------------------

ボタン部分
--------------------------------------------*/
.btn_green{
  color: #fff;
  background-color: #ff704d;
	padding: 15px 30px;
	text-decoration: none;
	border-radius: 10px;
}
.btn_green:hover {
  color: #fff;
  background: #D85433;
}
.btn_green_otoi{
  color: #fff;
  background-color: #ff704d;
	padding: 15px 40px;
	text-decoration: none;
	border-radius: 10px;
}
.btn_green_otoi:hover {
  color: #fff;
  background: #D85433;
}
.btn_green_otoi02{
  color: #fff;
  background-color: #ff704d;
	padding: 15px 40px;
	text-decoration: none;
	border-radius: 10px;
}
.btn_green_otoi02:hover {
  color: #fff;
  background: #D85433;
}


.contact_btn_area{
	display: flex;
	margin: 30px 0 0 0;
}
.contact_btn_area_sub{
	margin: 0 30px 0 0;
}

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

お問い合わせ ボタン部分
場所：トップ

--------------------------------------------*/
.contact_back{
	background-color:ececec;
	width: 100%;
	margin: 100px 0 100px 0;
}

.contact_area{
	display: flex;
	justify-content: space-between;
	padding-bottom: 97px;
	background-color: #f5f4f4;
}
.contact_area_sub01{
	width: 49.6%;
	position: relative;/*基点*/
	text-align: center;
}
.over{/*画像のサイズを規定して、はみ出した部分は消す*/
	width: 100%;
	overflow: hidden;
}
.contact_area_sub01 img{
	width: 100%;
	transition:1s all;
}
.contact_area_sub01 img:hover,.contact_area_sub02 img:hover{
  transform:scale(1.2,1.2);
	transition:1s all;
}
.contact_area_sub01 a,.contact_area_sub02 a{/*ボタンを押せるようにする*/
	text-decoration: none;/*線を消す*/
	color: #222222;/*色を黒くする*/
}
.contact_area_sub02{
	width: 49.6%;
	position: relative;/*基点*/
	text-align: center;
	transition:1s all;
}
.contact_area_sub02 img{
	width: 100%;
	transition:1s all;
	
}
.sub01_text_area,.sub02_text_area{
	position: absolute;
	width:70%;
	top:82%;
	left: 17%;
	background:rgba(255,255,255,0.95);
	padding: 20px;
	border-radius: 5px;
	display: block;
}
/*------------------------------------------

お問い合わせ ボタン部分
場所：トップh

--------------------------------------------*/
.tel_txt{
	color: white;
	text-align: center;
	font-size: 1.1rem;
	padding:30px 20px; 
}
.contact02_area_back{
	width: 100%;
	background-color: #fe6a2e;/*#ff3131 #0cb59b*/
	height: 230px;/*高さ　小さくしました*/
	margin: 30px 0;
	clear: both;/*回り込みをやめる*/
}
.contact02_area{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items:center;/*垂直方向*/
}
.contact02_area_sub{
	width: 48%;
	padding: 0 30px;
}
.cho01{/*調節用*/
	text-align: right;
}


.point_num{
	background-color:#f5e9ea;
	padding: 7px 10px;
	margin: 0 0 10px 0;
	width: 95px;
	height: 30px;
	color:#a7575f;
	font-style: italic;
	line-height: 1;
	letter-spacing: .11em;
}
.point_num02{
	padding: 7px 10px;
	margin: 0 0 10px 0;
	width: 95px;
	height: 30px;
	color:#060606;
	border-top: 1px solid #060606;
	border-bottom: 1px solid #060606;
	font-style: italic;
	line-height: 1;
	letter-spacing: .11em;
}
/*------------------------------------------

共通
--------------------------------------------*/
.modoru a{
	text-decoration: none;
	color: black;
}
/*------------------------------------------

利用場所：管理実績
使用方法：二列に並べる

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

.area_txt{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;/*はみ出したら複数行に*/
}
.area_txt_sub{
	width: 32%;
}

/*------------------------------------------
場所：はじめての方へ
利用：右と左に並べる
--------------------------------------------*/
.point_area{
	width:100%;
	display: flex;
	padding: 20px 0;
}
.point_area_sub01{
	width:50%;
}
.point_area_sub02{
	width:50%;
}
.point_area_sub02 img{
	width: 100%;
}
.point_txt{
	font-size: 1.4rem;
	font-weight: 200;
	padding: 20px 0;
}
/*------------------------------------------
場所：/unagi/ウナギ
利用：
--------------------------------------------*/
.point_area_u{
	width:100%;
	display: flex;
	flex-direction:column;/*縦に並べる*/
	padding: 20px 0;
	/*font-family: "Hannari";*/
}
.point_area_u_sub01{/*縦のテキスト*/
	max-width:100%; /*width　だと*/
	margin: 0 auto;
	padding: 30px 0;
	writing-mode: vertical-rl;
	-ms-writing-mode:tb-rl;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.2rem;
}
.point_area_u_sub01a{
	max-width:100%; /*width　だと*/
	margin: 0 auto;
	padding: 30px 0;
	writing-mode: vertical-rl;
	-ms-writing-mode:tb-rl;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.2rem;
}
.point_area_u_sub01 h3{
	font-size: 1.5rem!important;
    line-height: 3rem;
}
.point_area_u_sub01 p {/*文字のサイズ*/
    font-size: 1.28rem!important;
    line-height: 3rem;
}
.point_area_u_sub01:after{
	width: 100%;
}
.point_area_u_sub02{/*画像とタイトル*/
	width: 100%;
	padding: 20px 0;
	margin: 0 auto;
	text-align: center;
}
.point_area_u_sub02 img{
	max-width: 100%;
}
/*------------------------------------------
場所：/unagi/ウナギ
利用：黒バックのエリア
--------------------------------------------*/
.point_area_u02{
	width: 100%;
	padding:50px 0;
	background-color: #000000;
	margin: 0 auto;

}
.point_area_u02_back{/*sennta-yoseiする*/
	width: 100%;
	display:  flex;
	max-width: 1500px;
	margin: 0 auto;
	padding: 50px 0;
}
.point_area_u02_box1{
	width: 40%;
}

.point_area_u02_box2{
	width: 60%;
	display:  flex;
	flex-direction:column;
}
.point_area_u02_box2 img{
	max-width: 100%;
}
.point_area_u02_photo{
	with:100%;
}
.point_area_u02_photo img{
	with:100%!important;
}
.point_area_u02_txt{
	with:100%;
	color: white;
}

/*------------------------------------------
場所：はじめての方へ
利用：右と左に並べる
--------------------------------------------*/
.nagare_area{
	display: flex;
	flex-wrap:wrap;/*折り返し*/
	width:100%;
	justify-content:space-between;
	padding: 40px 0;
}
.nagare_area_sub{
	width: 14%;
}
.nagare_area_sub img{
	width: 100%;
}

/*ボックス部分*/
.flow_num_box{/*親ボックス*/
	width: 100%;
	display: flex;
	padding: 20px ;
}
.flow_num_txt_box{/*文字のボックス*/
	width: 90%;
	border:1px solid #D7D7D7;/*ボーダー*/
	line-height: 77px;
}
.flow_num{/*数字の部分*/
	height: 80px;
	width: 80px;
	line-height: 80px;
	background-color: #0cb59b;
	text-align: center;
	color: white;
}
.flow_num_txt{
	width:30%;
	padding: 0 20px;
	color: #0cb59b;
}
.flow_num_txt02{
	width:50%;
	padding: 0 20px;
}
.arrow_area{
	max-width: 1000px;
	width: 100%;
	height: 30px;
}
.arrow_down{/*下やじるし*/
  width: 30px;
  height: 30px;
  border: 3px solid;/*線の太さ*/
  border-color:  transparent transparent #565656 #565656;
  transform: rotate(-45deg);
	position: relative;
	left: 50%;
	bottom: 50%;
	padding: 0;
}
/*-------------------------
場所：セミナー

-------------------------------------*/
.seminar02_area_back{
	width: 100%;
	background-color: #f1f1f1;
	height: auto;
	margin: 50px 0 100px 0;
}
.seminar02_area{
	width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content:space-between;
}
.seminar02_are_sub{
	width: 30%;
	height: 500px;
	background-color: white;
	padding: 30px;
	border-radius: 10px 10px 0 0;
}
.center_se02{
	padding: 50px 0;
	text-align: center;
	letter-spacing:2px;
}
.se_title01{
	color: #5A5A5A;
	padding: 20px 0;
	text-align: center;
}
.se_title02{
	color: #6A6A6A;
	padding: 10px 0 20px 0;
	text-align: center;	
}
.greens{
	color: #0cb59b;
}

/*--------------------------
お問い合わせ
--------------------*/
.thanks_area{
	width: 1000px;
	margin: 0 auto;
	text-align: center;
	clear: both;/*回り込みを解除*/
	padding: 30px 0 0 0;
}
.zirei {
    color: #A4A4A4;
    font-size: 0.7rem;
    padding-bottom: 10px!important;
}
.thanks_t{
	font-weight: 500;
	letter-spacing: 2px;
}
/*------------------------------------------------------------

ボタン部分
場所：全てのページ

-------------------------------------------------------------*/
.footer_fix_btn {
	position:fixed;
	bottom:0;
	left: 50%;
	transform: translate(-50% , 0);
	width:380px;
	height: 60px;
	padding: 0 auto;
	background-color: #FFFFFF;
}

.ones ul{
	width: 100%;
	display: flex;
	flex-direction:column;
}
.ones ul li{
	width: 100%;
	border-bottom: 1px solid #B4B4B4;
}
.news_more{
	margin: 30px 0 0 0;
}
/*---------------------------------------------------------
場所：トップ
画像が流れるエリア
----------------------------------------------------------*/
.photo_nagare{
	width: 100%;
	margin: 0 0 -12px 0;
	clear: both;
}
.photo_nagare img{
	width: 100%;
}
.photo_nagare ul{
	text-decoration: none;
	width: 100%;
}
.photo_nagare li{
	/*width: 20%;*/
	text-decoration: none;
	width: 100%;
	/*height: 280px;*/
}
/*----------------------------------------------------

場所：/unagi/index
二つ交互に並ぶ

-------------------------------------------------------------*/
.two_area{
	width: 100%;
	margin: 0 auto;
	padding: 100px 0;
}
.two_box01{
	width: 100%;
	max-width: 1200px;
	display: flex;
	margin: 0 auto;
	padding: 30px 0;
}
.two_box02{
	

	width: 100%;
	max-width: 1200px;
	display: flex;
	margin: 0 auto;
	padding: 30px 0;
}
.two_photo{
	width: 50%;
	/*margin: 0 30px;*/
}
.two_photo img{
	width: 95%;
	border-radius: 20px;/*文字を丸くする*/
}
.two_txt{
	width: 50%;
}
.two_txt h3{
	font-size: 1.25rem;
}
.two_box02{
	width: 100%;
	max-width: 1200px;
	display: flex;
}
.center_logo{/*うなぎエリア*/
	text-align: center;
	padding: 0 0 30px 0;
}
.btn_more02 {
    border: 1px solid #717171;
    color: black;
    background: #fff;
    text-decoration: none;
    text-align: center;
    width: 130px;
    margin-top: 30px;
    /* margin: 0 auto; */
    font-size: 0.8rem;
}
.btn_more02 a{
	text-decoration: none;
	display: block;
	color: black;
	padding: 12px 0;
	transition:all 0.6s ease-out;
	letter-spacing: 1px;
}

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

/*---------------------------------------------------------
場所：採用トップ
エントリーエリア
----------------------------------------------------------*/
.entry_area{
	width: 100%;
	height: 300px;
	background-image:url("../img/back_img/back_entry.jpg");
}
.entry_txt_are{
	max-width: 1300px;
	margin: 0 auto;
	text-align: center;
	opacity: 1.0;
	color: white;
	padding: 40px 0 0 0;
}
.entry_area_back{/*緑色の背景　画像の上にかぶせて薄くする*/
	background: linear-gradient(90deg, rgba(17,215,178,1) 0%, rgba(62,199,213,1) 100%);
	opacity: 0.8;
	height: 300px;
}
.entry_txt_are p{
	font-size: 1.3rem;
	line-height: 3.0rem;
}
.entry_txt_are h3{
	letter-spacing: 2.0px;
}
.btn_entry{
	background-color: white;
	text-align: center;
	width: 300px;
	color: #2D967D;
	margin: 0 auto;
	border-radius: 20px;
	margin-top: 20px;
	font-size: 1.0rem!important;
}
.btn_entry a{
	color: #2D967D;
	text-decoration: none;
	font-weight: 400;
}
/*---------------------------------------------------------
場所：
文化エリア
----------------------------------------------------------*/
.culture_area{
	max-width: 1980px;
	width: 100%;
	margin: 0 auto;
}	

/*---------------------------------------------------------
採用ボタン部分
場所：information
----------------------------------------------------------*/
.recruit_btn_area{
	max-width: 1000px;
	width: 100%;
	display: flex;
	margin: 0 auto;
}
.recruit_btn_area01{
	width: 33%;
}
.re_btn a{/*ボタン部分*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*margin: 0 auto;*/
  padding: 1em 2em;
  width: 300px;/*サイズを変える*/
  color: #333;
  font-size: 18px;
  font-weight: 700;
  background-color: white;
  transition: 0.3s;
	text-decoration: none;
	border: solid 1px #D7D7D7;
}

.re_btn a::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px solid;
  border-color:  transparent transparent #565656 #565656;
  transform: rotate(-45deg);
  transition: 0.3s;
}

.re_btn a:hover {
  text-decoration: none;
  background-color: #e90000;
  color: white;
	transform: translateY(3px);
}

.re_btn a:hover::after {
	transform: rotate(-45deg);
	border-color:  transparent transparent #ffffff #ffffff;
}
.re_txt{
	color: #A4A4A4;
	font-size: 0.7rem;
	margin-top: 20px;
}

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

文化エリア
-----------------------------------------------------*/
.two_area_full{
	width: 100%;
	display: flex;
	margin: 50px 0;
}
.two_area_full_sub01{
	width: 60%;
}
.two_area_full_sub01 img{
	width: 100%;
}
.two_area_full_sub01a{/*すこしシカクイ staff詳細で利用*/
	width: 50%;
}
.two_area_full_sub01a img{
	width: 100%;
}

.two_area_full_sub02{
	width: 40%;
	padding: 100px 100px 0 100px;
	text-align: left;
}
.two_area_full_sub02 h3{
	font-size: 1.5rem;
}
.two_area_full_sub03{/*左側に画像*/
	width: 40%;
	padding: 100px 100px 0 100px;
	text-align: left;
}
.two_area_full_sub03 h3{
	font-size: 1.5rem;
}

.two_area_full_sub04{
	width: 60%;
	
}
.two_area_full_sub04 img{
	width: 100%;
}


/*---------------------------------------------------------
募集要項エリア　テーブルの部分
information
-----------------------------------------------------*/
.recruite_area_back{
	width: 100%;
	background-color: #f4f4f4;
	padding: 50px 0;

}
.recruite_area{
	max-width: 1300px;
	margin: 0 auto;
	background-color: white;
	padding: 100px 50px;
	text-align: left;
}
/*---------------------------------------------------------
募集要項エリア
募集要項のテーブル部分
-----------------------------------------------------*/

.table_boshu{
	width: 100%;
	border-top: 1px dotted #666666;
}
.table_boshu td{
	border-bottom: 1px dotted #666666;
}
.table_boshu td{
	padding: 25px 0;/*隙間を作る*/
}
/*---------------------------------------------------------
企業理念
場所：philosoph
-----------------------------------------------------*/
.corporate_area_back{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	background-color: #e6e6e6;
	padding: 3rem 0;
}
.corporate_area{
	background-color: white;
	width: 95%;
	margin: 0 auto;
}
.cp_t{
	text-align: center;
	padding-top: 60px;
	font-weight: 400;
	font-size: 2.3rem;
}
.cp_t02{
	text-align:center;
}
.cp_t02{
	text-align: center;
	font-size: 0.6rem;
}
.cp_t03{
	text-align: center;
	font-size: 1.2rem;
	padding-top: 35px;
	letter-spacing: 3px;
}
/*---------------------------------------------------------
企業理念ページ
場所：図の部分
-----------------------------------------------------*/
.company_pr_area{
	max-width: 1000px;
	width: 100%;
	height: 700px;
	margin: 0 auto;
	position: relative;
}
.cpr_t{
	position: absolute;
	width: 30%;
	top: 1%;
	left:0;
	z-index: 1;
}
.cpr_img{
	position: absolute;
	top:0;
	right: 0;
    width: 80%;
    height: auto;
	z-index: -1;
	padding: 0 15px;
}
.cpr_img img{
	width: 100%;
}
.ch_01a{
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 3.5rem;
}
/*------------------------------------------

事業紹介　エリア

--------------------------------------------------*/
.service_info_area_back{
	width: 100%;
	background-color: #f9f9f9;
}		
.service_info_area{
	max-width: 1500px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap:wrap;
	justify-content:center;
	padding: 50px 0;
}

.service_info01{
	width: 30%;
	padding: 0 30px;
	height: 500px;

}
.se_ph01{
	position: relative;
	z-index: 1;
}
.service_txt {
    background-color: white;
    padding: 20px;
    position: relative;
    z-index: 0;
    margin: -50px 0 0px 15px;
    width: 100%;
}
.service_info01 img{
	width: 100%;
}
.st_t01{
	font-weight: 300;
	font-size: 1.0rem;
}
/*------------------------------------------

場所：service/sale

--------------------------------------------------*/
.store_area_back{
	width: 100%;
	/*background-color: #f9f9f9;*/
}
.store_area{
	width: 1500px;
	padding-top: 50px;
	margin: 0 auto;
	display: flex;
}
.store_photo{
	width: 30%;
	margin: 0 20px;
}
.store_photo img{
	max-width: 100%;
}
.sct_01{
	text-align: center;
	padding-top: 10px;
}
/*--------------------------------------------------

アクセスマップ
場所：全部の場所

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

.access_map_back{
	background-color: #f7f4f2;
	width: 100%;
}
.access_map{
	margin: 0 auto;
	padding-top: 100px;
	width: 1200px;
	max-width: 100%;
	display: flex;
}
.access_map img{
	max-width: 100%;
}
.access_map01{
	width: 50%;
}
.access_map02{
	width: 50%;
}
.access_staff{
	display: flex;
	margin: 15px 0 0 0;
}
.access_staff li{
	margin: 0 15px 0 0;
}