/*--------------------------------------- 
  全体共通だよん マルユー本体　ｓサイズ
---------------------------------------*/
*, *: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_slider{
	display: block;
}
.web_slider{
	display:none;
}

.smaho{
	display:block;
}
.smaho01{
	visibility:visible;
}
.web,.web02{
	display:none;
}
/*-------------------------------------------*/

.bxslider li img{
}
.misenai{
	display:none;
}
.wrap{
	overflow: hidden;
}
/*--- 上のコードはログインボタンな
どの大きさを調節する------*/


/*---画面表示　重要な部分---*/
.smaho{
	display: block;
}
.smaho01{
	visibility:visible;/*小さい画面では見える*/
}

/*---------------------------------------
header　box2の中身
---------------------------------------*/
.box1 ul,.box1a ul{
	display: none;
}

.box2 ul{
	list-style:none;
	/*float: right;*/
	/*display: flex;*/
	/*justify-content: flex-end;*/
}
.box2 li{
	/*height:63px;*/
}

/* ログインボタンの部分 */
.btn_login {
	margin: 10px 30px 0 0;/*ずらす*/
}

.menu01 {
    float: right;
}

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

#main img,#main01 img {
	max-width: 100%;
	height: auto;
}
.main1{/*新しく追加*/
	width: 100%;
}
.main1 p{
	font-size: 0.8em;
	line-height: 28px;
	padding: 0 15px;/*左右に隙間を作る*/
}

hr{
border:none;
border-top:dashed 1px #CCC;
height:1px;
color: #CCC;
}
.koe01 {
	display: none;
}
body{
	width: 100%;/*--100％にしてデバイスごとにサイズを最適化する-----*/
	margin: 0;/*左に8ｐｘはいっているのをやめる*/
	padding:0;
	background-image: none;
	word-wrap:break-word;
	overflow:scroll;/*scrollになっていた*/
  　word-wrap:normal;
	/*background-color:#f5f6f7;背景に色をつける*/
	font-family:"Yu Mincho","Meiryo","MS Pゴシック",sans-serif;
}
#container {
	width: 100%;
}

#header {
	height: 80px;
	width: 100%;
	margin: 0;
	padding:0;
	background-color: rgba(255,255,255,0);
	/*background-image:url("../img/header_back.jpg");*/
	/*background-position: bottom;*/
	/*background-repeat: repeat-x; */
}
.header_back{
	background-color: rgba(255,255,255,0);
}
#header.m_fixed {/*途中からここを+*/
	padding-top: -80px; 
	
}
.ai2 {
	display:none;
	line-height: 120px;
	margin: 0 0 0 400px;
}

#contents {
	width: 100%;
	margin: 0;
	padding: 0;
}
#contents02 {
	width: 100%;
	margin: 0;
	padding: 0;
	clear:both;
}
#contents03 {
	width: 100%;
	margin: 0;
	padding: 0;
	clear:both;
	background-color: #FFFFFF;
}
#main {
	float: none;
	clear: both;
	width: 100%;
	/*background-color: aqua;*/
	padding: 0 10px;
	/*background-color:#f5f6f7;背景に色をつける bodyではなく、ここに色をつける*/
}
#main00 {
	width: 98%;
	margin: 0;
	padding:0;
	clear: both;
	float: none;
}
#main01 p{
	font-size:12px;
	line-height: 26px;
}
#main02 {
	float: none;
	width: 70%;
	margin: 0;
	padding:0;
}

/*------------matome エリア　ここまで-------------------*/

/*お悩みのブルーボックス部分*/
.nayami_area p{
	padding: 5px 0 0 0;/*ここは大事*/
}

/*--------------------------------------- 
  お問合せページで使っています
---------------------------------------*/
#main3 {
	width:380px;
	margin: 0;
	padding:0;
	background-color: #FFFFFF;
	float: none;
}
#main3 p{
	font-size: 0.8em;
	padding: 0 5px 0 15px;/*コンタクトページで利用*/
}
#main3 p img {
	width:100%;
}
#main3 table{
	width:100%;
}
.maki{ /*--- contact2の写真サイズの修正用--*/
	height:240px;
	width: 160px;
}
.textbox{
	padding: 0 15px;
}
/*--------------------------------------- 
  footerの中だよん
---------------------------------------*/
.f4 {
   margin: 0;
   padding:15px 25px 0 0;
   float: right;
}
#footer {
	width: 100%;
	clear: both;
	font-size: 0.6em;
	background-color:#FF9899F;
	color:#FFF;
}
#footer p{
    margin:0;
	padding: 0;
	font-size: 13px;
	line-height:25px;
}
#footer a:visited{
	color:#FFF;
	font-size: 12px;
	line-height:25px;
	text-decoration:none;
}
#footer a:link{
	text-decoration:none;
	color:#FFF;
}
#footer a:hover{
	text-decoration:underline;
}

#footer02 {
	display: none;
	width: 98%;
	text-align: center;
	margin: 3px 0 0 0; 
	clear: both;
	height: 30px;
	background-color: #124266;
	color: #FFFFFF;
	font-size: 9px;
}
#footer02 p{
    margin:0;
	padding: 7px 0 0 0;
	font-size: 12px;
}
#logo {
    float:left;
    margin:0;
	padding:0;
}
/*---------------------------------------
gnavi のなかみだよ

---------------------------------------*/
#gnabi {/*--　グローバルナビ--*/
	display: none;
	color:#3A3A3A;
}
#gnavi {
    width: 100%;
	height: auto;
	clear:both;
	float: none;
	display:none;
	}
#gnavi ul {
    width: 100%;
    list-style:none;
	margin:0;
	padding:0;
	display:none;
}
#gnavi li{
	height: auto;
	width: 33%;
	padding: 0;
	margin: 0;
	float: left;
}
/*-------------------------------
list styleです

---------------------------------*/
#main p{
  font-size: 0.8em;
  line-height: 24px;
}
#main00 p{
  margin: 0;
  padding: 0;
  font-size: 0.8em;
  line-height: 2em;
}

h1 {
	max-width: 380px;
	height:auto;
	display:inline-block;
    margin: 0 0 0 10px;
	padding:0;
}
h1 img{
	width: 180px;
	height: auto;
}
h2 {
	font-size: 13px;
}
/*h3{ 親を継承する
	font-size: 15px;
	font-weight: bold;
	line-height:24px;
	
}*/

.mida01 {
	height:43px;
	width: 100%;
	padding: 10px 8px;
	color:#FFF;
}
h4 {
	font-size: 12px;
	margin: 0;
	/*padding: 0 0 0 15px;*/
}
h5{
   font-size:12px;
   line-height: 10px;
   margin: 0;
   padding: 0;
}
.mida01{/*h3の重要部分*/
	margin: 0px 0 6px 0;/*調節*/
}
.kadai{  /*--h4の背景が灰色の部分につかっている　東洋経済のトピックみたいな ---*/
	margin:0;
	padding: 0 0 0 5px;
	line-height:25px;
}

.mini{
   font-size: 9px;
   line-height: 120%;
}
.mini02{
    color:#FF0000;
	font-size: 10px;
   line-height: 130%;
}
.mini03{
   font-size: 10px;
   line-height: 130%;
}

.style1 {
	font-size: 24px;
	font-weight: bold;
}
.sen {
	color: #FF0000;
	text-decoration: underline;    
}
address{
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	margin: 5px 0 0 0;
	font-size: 12px;
	font-style: normal;
}
.orange{
	color: #FA6B02;
	font-size: 13px;
	font-weight: bold;
}
.midasi{
    margin:0 0 10px 0;
}
.midasi02{
    margin: 10px 0 5px 0;
}
.midasi03{
	background-image: url(https://raku-tano.com/img/back_h03.jpg);
	height: 35px;
	width: auto;
	padding: 0 0 0 8px;
	color: #FFF;
}
.btn{
	padding: 0 0 0 120px;
}
.an{
	margin: 0 0 0 4px;
	font-size:13px;
}
.q{ 
  background-image:url(https://raku-tano.com/qa/img/q_back.gif);
  background-repeat: no-repeat;
  height: 31px;
  width: 56%;
  font-size: 18px;
  margin: 0 0 0 30px;
}
.kokuban {
  width: 56%;
  height: 208px;
  background-image:url(https://raku-tano.com/img/kokuban.jpg);
  background-repeat: no-repeat;
}

/*--------------------------------------- 
  パンくずの中だよん
---------------------------------------*/
#pan{
  padding: 0;
  font-size:12px;
  clear:both;
  height:35px;
  width: 99%;
  float: none;
  color:#000;
	background-color: rgba(255,255,255,0);
}
#pan ul{
  list-style:none;
  margin: 0 0 0 15px;
  padding:0;
}
#pan li{
   margin: 8px 5px 8px 0;  
  list-style:none;
  float:left;
}
/*--------------------------------------- 
  naviの中だよん
---------------------------------------*/
#navi {
	float: none;
	width: 100%;
	padding:0;
	background-color: #F0F0F0;
	display: none;
}
#navi2 {
	float: none;
	display: none;
	width: 100%;
	height: auto;
	background-image: url(https://raku-tano.com/img/lnavi02.jpg);
	background-repeat: no-repeat;
}
#navi ul,#navi2 ul {
	list-style-type: none;
	width: 100%;
	height: auto;
	display: block;
	margin: 0;	
	padding: 0;
	clear:both;
}
#navi li,#navi2 li {
	width:100%;
	margin: 0 0 0 10px;
	padding: 0;
	display:block;
	list-style-type: none;
	clear: both;
	font-size: 12px;
	line-height: 25px;
}
/*--------------------------------------- 
  トップページ
  社長の声をご紹介
---------------------------------------*/

.koe_box{
	width: 380px;
	height: 160px;
	display:block;
}
.koe_box01{
	width: 100px;
	height: 140px;
	margin: 0 1px;
	display: block;
	float:left;
}
.koe_box02{
	width:270px;
	height: 140px;
	margin: 0 0;
	float: left;
	background-image:none;
	background-repeat:no-repeat;
	border: 2px solid #09F;
	border-radius: 20px; /* 角丸の指定 */
}
.koe_box02 p{
	margin: 0 0 0 10px;
}
.koe_box01 a:hover{
	opacity:0.8;
}  
/*--------------------------------------- 
  topの中だよん
---------------------------------------*/
.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}


/*--------------------------------------- 
  tableの中だよん
---------------------------------------*/
table {
	width:100%;
	/*border-collapse:collapse;　線がくっつく*/
}
th {
	padding:5px;
}
td {
	/*padding: 10px;*/
}
.waku02{
	width: 100%;
	background-color: #FAFAFA;
	border: none;
}

.waku{
  background-image:url(https://raku-tano.com/remake/img/waku.gif);
  background-repeat:no-repeat;
}
.top{
    margin: 0;
	padding: 0;
	border-collapse: collapse;
	border:1px solid #E8E8E8;
	vertical-align:top;
}
.top td{
    margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 24px;
}
.toi{
   margin:0 0 0 5px;
   padding: 0;
}
.tel{
   text-align:right;
   float: right;
   margin: 0;
   padding: 20px 0 0 0;
   width: 10px;
   display: none;
}
.news{
    margin: 0 0 0 40px;
	padding: 0;
}
/*--　Sサイズ時の縦並びにするcss--*/

.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.8rem;
}
/*--　Sサイズ時の縦並びcss end--*/

.table3{
	width: 100%;
    margin: 0;
	padding: 0;
	border-collapse: collapse;
	text-align: center;
}
.table3 td p {
	font-size:12px;
    margin: 0 0 0 5px;
}
.table3 td{
    border:1px solid #E8E8E8;
	margin: 0;
	font-size:14px;
}
.news td{
    margin: 0;
	padding: 0;
	font-size:12px;
}

/*--　Sサイズ時の可変テーブル--*/
.table4{
    margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table4 td p {
	font-size: 11px;
    margin: 0 0 0 5px;
	padding:0;
	text-align: center;
}
.table4 td{
    border:1px solid #E8E8E8;
	margin: 0;
	padding:0;
	font-size: 11px;
	text-align: center;
}
/*--　Sサイズ時の可変テーブル終わり--*/


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


.table5a{
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table5a td, .table5a th{
	margin: 0;
	padding: 0 10px;
	border: 1px solid #BFDEF2;
}
.table5a p{
   margin: 0;
   padding:0;
   font-size: 10px!important;/*スポットなどで利用*/
   line-height: 2.0em;
}

.td_back{
	background-color: #7CBCE6;
	color:#FFF;
	width:20%;
	text-align:center;
}

/*--------------------------------------- 
  お客様の声　ナンバー部分 tableを利用しています 
---------------------------------------*/

.num1{
	width:120px;
	text-align:center;
}

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

.table6{
    margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table6 td, .table6 th{
	margin: 0 0 0 10px;
	border: 1px solid #CCCCCC;
}

.table6 p{
   padding: 0 10px;
   font-size: 0.8em;
   line-height: 15px;
}


/*--------------------------------------- 
  ボックスの背景　強調するボックス
---------------------------------------*/
.table5{
    margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	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: 20px;
   line-height: 20px;
   font-weight:bold;
}

/*-----------------------------------
お問合せフォーム専門のcss 
-----------------------------------*/
.contact {
  margin: 0 0 0 5px;
  padding: 0 ;
  width:100%;
}
.contact_table{
	width:380px; /*問い合わせの幅を指定*/
}
.table_contact{
	width:380px;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
.table_contact tr{
}

.table_contact td{
	margin: 0;
	padding:10px 0;
	display:block;
	border: none;
	line-height:40px;
}
.table_contact p{
   padding: 0;
   margin:0;
   font-size: 12px;
   line-height:40px;/*-ボックスの高さ調節ができる--*/
}

/*-----お問合せ 名前入力の高さ-----*/

.contact_name {
	width:100%;
	height:40px;
	padding: 0;
	background-color:#F6F6F6;
}
.contact_01 {
	width:100%;
	height:40px;
	padding:0;
	background-color:#F6F6F6;
}
/*-----お問合せ 高さが20px-----*/

.contact_02 {
	width:100%;
	height:40px;
	background-color:#F6F6F6;
}
.contact_haba{
	width:360px
}
/*-----住所 高さがpx-----*/

.contact_add{
	width:100%;
	height:40px;
	background-color:#F6F6F6;
}
.contact_add02{
	height:70px;
	padding:0;
	width:100%;
}
.error{
	color:#F00;
	font-weight:bold;
	font-size: 0.7em;
}
/*--------------------------------------- 
 お問合せページのテーブルおわり
---------------------------------------*/
.company{
	padding: 10px 0 0 5px;
	border-top: none;
	border-right: none;
	border-bottom: thin dotted #EBEBEB;
	border-left: none;
}
.company tr{
    vertical-align: middle;
}
.price{
	margin: 0 0 0 30px;
	font-size: 12px;
	text-align:center;
}
.m{
   margin: 0 0 0 5px;
   padding: 0;
}

/*--------------------------------------- 
 floatだよん
---------------------------------------*/
.f1{
   margin: 0;
   padding: 0;
   float: none;
} 
.f2{
   margin:0;
   padding: 0 10px 0 0; 
   float: left;
}
.f2 img {
	width: 110px;
	height: auto;
}
.shosai {
	display: none;
}
.r1{
	float: none;
	margin: 0 ;
	padding: 0 0 0 60px;
}

.r2{
  float: none;
  padding: 0 7px 0 0;
}
.ten{ 
  margin: 0 0 0 10px;
  padding: 0;
}

.note{
	position: absolute;
	top: 1254px;
	right: 150px;
	left: 467px;
}
.zero{
    margin: 0;
	padding: 0;
}

/*--------------------------------------- 
  カラーです
  
---------------------------------------*/

.red {
	color: #FF0000;
	font-weight: bold;
}
.red02 {
	color: #FF0000;
}
.emeblue {
	color: #5CC7BD;
	font-weight: bold;
	font-size: 16px;
}

.wh {
	color:#FFFFFF;
	font-size: 12px;
}
#footer .wh{
	display:none;
}
.wt {
     color: #FFFFFF;
	 font-weight:bold;
	 text-align: center;
}
.rblue {
	color: #0066FF;
	font-weight: bold;
}
.copy {
     font-size: 6px;
	 margin:5px 0 0 0;
	 color: #FFFFFF;
}
.to1 {
     font-size: 12px;
	 margin: 0;
	 padding: 0;
}
.pink{
    color:#FF3399;
	font-size:24px;
	margin: 0 0 5px 0;
	font-weight:bold;
}
.woman_pink{
	color: #FF9899;
	font-weight:bold;
}
.hati{
   font-size: 8px;
}

/*--------------------------------------- 
   お問い合わせ
---------------------------------------*/

.waku02{
	background-color: #F0F0F0;
	border: none;
	width: 100%;
}
.koeback {
	display: none;
}
#map1{
	display:none;
}
.map{
	display:none;
}
.map02{
	display: block;
}
/*--------お問い合わせ　サンクスページ-------------*/
.thanks_area{
	max-width: 100%;
	padding: 0 15px;
	margin: 30px 0 0 0!important;
}
.thanks_area img{
	width: 85%;
}

/*--------------------------------------- 
   youtubeの可変
---------------------------------------*/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-container02 {/*access_map*/
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container02 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*--------------------------------------- 
   モバイル部分のボタン
---------------------------------------*/
#footer_btn{
	margin: 0;
	padding: 0;
	display: block;
}
#footer_btn ul{
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 0;
}
#footer_btn li{
	height: 50px;
	float: left;
	margin: 1px;
	padding: 0;
}
/*--------------------------------------- 
   メンバーページのcss
---------------------------------------*/
#main_back{
	height:auto;
	max-width: 380px;
	clear:both;
}
#profile {
	display: none;
	float: left;
	width: 380px;
	height: auto;
	margin: 0;
}
#profile_photo {
	float: left;
	width: 380px;
	height: auto;
	margin: 0;
}
.photo_member02 {
	width:380px;
	height:auto;
}
#profile02 {
	float: left;
	width: 380px;
	height: auto;
	margin: 0;
	clear:both;
}
#comment {
	float: left;
	width: 380px;
	height: auto;
	margin: 0;
	clear:both;
}
.box4 {
	clear:both;
	width:380px;
	height:100px;
}

/*--------------------------------------- 
  メンバー写真を並べているテーブルについて
---------------------------------------*/
#profile p,#profile02 p,#comment p,#profile_photo p {
	margin: 0 0 0 3px;
}
.table_member{
	margin: 0;
	padding: 0;
	width: 100%;
}
.table_member td{
	border: none;
}
.table_member img{
	width: 78px;
	height:auto;
	margin: 0;
	padding: 0;
}

/*--------------------------------------- 
  メンバー一覧ページ
---------------------------------------*/


.member_box {
	width: 380px;
	height:auto;
	clear: both;
}

.member {
	width: 44%;
	height: 260px;
	padding: 0 20px 0 0;
	float: left;
}	
.member  img{
	width: 100%;
	height: auto;
}
/*--------------------------------------- 
  トップページ
---------------------------------------*/
.photo{
	width: 100%;
	float: none;
	clear: both;
}

/*--------------------------------------- 
  トップページ
---------------------------------------*/
.hicon{
	height:27px;
	width:20px;
}
.bicon{
	height:26px;
	width:100%;
}

/*----人型アイコン---*/

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


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

バッジ

---------------------------------------*/
.badge {
	width: 60px;
	height:60px;
	padding-top: 6px;
	-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 #FFFFFF;
}
.badge i {
	display: block;
	line-height: 0;
	font-size: 12px;
}
/*----表示位置の設定 ---*/
.pickup {
	position:relative;
}

.badge {
	-ms-transform: scale(0.9);
	-ms-transform-origin: right top;
	-webkit-transform:scale(0.9);
	-webkit-transform-origin: right top;
	transform:scale(0.9);
	transform-origin: right top;
	top: -8px;
	right:10px;
}
/*---------------------------------------

注意などに使うボックスについて

強調したい箇所につかいます

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

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


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

オーバーレイ部分コンテンツ小さいときの 配置や文字サイズの調節

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

.o_menu{
	margin: 20px 0 0 20px;
}
.o_menu p{
	color:#FFF;
	font-size: 18px;
	line-height: 50px;
	margin: 0;
}
.o_menu a:link, .o_menu a:visited{
	color: #FFF;
	text-decoration:none;
}
.o_menu a:hover{
	color: #FFF;
	text-decoration:underline;
}

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

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

--------------------------*/
.gaiyou img {
	width:100%;
	height:auto;
}
.gaiyou p{
	margin:0 15px 20px 5px;
	font-size: 14px;
}
.boxA-1:after{
	content:"";
	display: block;
	clear:both;
}
.boxA-1 .gaiyou{
	float:left;
	width:100%;
}

/*--------------------------------------- 
   Sサイズの時は社長の顔+コメント部分は非表示にする
---------------------------------------*/
.coment{
	display:none;
	height: 150px;
	width: 735px;
	background-image:url(https://raku-tano.com/img/back_coment.jpg);
	background-repeat:no-repeat;
	border: none;
}
/*--------------------------------------- 
   この記事を読んだ人は、こんな記事も読んでます
   関連記事のcss
---------------------------------------*/

.kanren_kizi img {
	width: 130px;
	height: 80px;
}
.kanren_kizi p{/*---- 文字がはみ出した時に・・・になる。必ず3つ記述すること ----*/
	font-size: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.kanren_kizi a{
	display: block;
	height: 110px;
	padding: 10px 0 0 0;
	border-bottom: dotted 1px #CCC;
	font-size: 14px;
	text-decoration: none;
}
.kanren_kizi .f1{
	float: left;
	margin-right: 20px;
}
.kanren_kizi a:hover{
	background-color: #eeeeee;

}

.kanren_kizi a:after{
	content: "";
	display:block;
	clear:both;
}
/*--------------------------------------- 
   topicsに利用　トップ
---------------------------------------*/
.item{
	width: 100%;
	background-color:#F5F1E5;
	background-repeat:repeat;
	height:auto;
}
.item img {
	max-width: 100%;
	height: auto;
}
.s_item{
	width: 44%;
	margin: 20px 8px;
	display: block;
	float:left;
}
.s_item a:hover{
	opacity:0.7;
}
/*--------------------------------------- 
   選ばれる理由　subページ
---------------------------------------*/
.item2{
	width: 100%;
	background-color:#F5F1E5;
	background-repeat:repeat;
	height:auto;
	margin: 0;
}
.item2 img {
	max-width: 100%;
	height: auto;
}
.s_item2{
	width: 330px;
	margin: 20px 25px 5px 25px;
	display: block;
	float:left;
}
.s_item2 a:hover{
	opacity:0.7;
}
/*--------------------------------------- 
 2つ並び　topページのサービスにつかっています
 item_2t とは2列トップのt
---------------------------------------*/

.item_2t{
	width: 100%;
	height: auto;
}
.s_item2t img {
	max-width: 100%;
	height: auto;
}
.s_item2t{
	width: 100%;
	height: auto;
	margin: 20px 0;
	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 img {
	max-width: 100%;
	height: auto;
}
.s_item2ts{
	width: 100%;
	height: auto;
	margin: 20px 0 20px 10px;
	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 img {
	max-width: 100%;
	height: auto;
}
.s_item2ts01{
	width: 100%;
	height: auto;
	margin: 20px 5px;
	display: block;
	float:left;
}
.s_item2ts01 a:hover{
	opacity:0.8;
}

/*--------------------------------------- 
 トップページの 選ばれる理由など
 
---------------------------------------*/
.brand{
    background-color:#F5F1E5;
	background-repeat:repeat;
	width: 100%;
	height: auto;
}
.brand img {
	max-width: 100%;
	height: auto;
}
.b_item{
	width: 320px;
	margin: 5px 40px;
	display: block;
	height:320px; /*--高さを入れた方がいい --*/
	float:left;
}
.b_item a:hover{
	opacity:0.7;
}
/*--------------------------------------- 
 買取りボタン領域
---------------------------------------*/
.kaitori{
	width:100%;
	clear:both;
}
.kaitori img{
	max-width: 100%;
	height: auto;
}
.kaitori01{
	float:left;
	width:360px;
	margin:10px 10px;
}
.kaitori01 a:hover{
	opacity:0.8;
}

/*--------------------------------------- 
 買取りの流れ部分
---------------------------------------*/
.nagare{
	background-image:url(https://raku-tano.com/img/back_nagare.jpg);
	background-repeat:repeat;
}
.nagare img{
	max-width: 100%;
	height:auto;
}
.nagare a:hover{
	opacity:0.7;
	border:0;
}

.nagare_kaitori{
	display:none;
}
.sumaho02{   /*----スマホ時には見えない webでは見える---*/
	display:none;
}

.t_box{
	display:block;
	width:100%;
}

.p_box{
	display:block;
	text-align:center;
	width: 100%;
	padding:0 10px 0 0;
}


/*--------------------------------------- 
 スマホフッターボタン部分
---------------------------------------*/
.smaho_footer{
	width:380px;
	display:block;
}
.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{
	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;
}
/*--------------------------------------- 
 よくある質問　 qa_box
---------------------------------------*/
.qa_box .btn_qa{
	width:42px;
	height:42px;
}
.qa_box p{
	padding: 0 0 0 10px;
}
/*--------------------------------------- 
 ブランドボックスエリア　 brand_box
---------------------------------------*/
.brand_box{
	width: 100%;
}
.brand_item{
	width:170px;
	height:230px;
	padding: 7px;
	float:left;
	display:block;
}
.brand_item p{
	font-size:12px;
	text-align:center;
	line-height:18px;
}
/*--------------------------------------- 
社長挨拶の部分
---------------------------------------*/
.message {/*- 高さを指定して重なりをふせぐ-*/
height:620px;/*- 全体の高さを調節-*/
position:relative;
}

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


.message02{/*- 強制的にポジションをつけています-*/
	width:auto;
	float:none;
	position:absolute;
	left:0;
	top:310px;/*- 写真の分だけ下にする-*/
}

/*--------------------------------------- 
社長挨拶の部分　sub
---------------------------------------*/
.message01 {/*- 高さを指定して重なりをふせぐ-*/
height:610px;/*- 全体の高さを調節-*/
position:relative;
}

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


.message02a{/*- 強制的にポジションをつけています-*/
	width:auto;
	float:none;
	position:absolute;
	left:0;
	top:310px;/*- 写真の分だけ下にする-*/
}

/*--------------------------------------- 
 この記事を書いた人
---------------------------------------*/
.about_us{
	display: flex;
	flex-direction: column;/*縦方向に配置する*/
}
.a_name{
	width: 100%;
}	
.a_text{
	width: 100%;
}

/*--------------------------------------- 
男ボタン　女性ボタン
---------------------------------------*/

.okini{
	position: absolute;
	right: 0px;
	top: 63%;/*- 場所の調節-*/ 
}
.okini img{
	width: 75px;
	height: 75px;
}
/*--------------------------------------- 
  メンバーページ 趣味などの部分　3つ並び　最後は一列になる
---------------------------------------*/

.item02{
	width: 100%;
	height: auto;
}
.item02 ul{
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content :space-between;
}
.item02 li{
	width: 30%;
}
.s_item02 a:hover{
	opacity:0.8;
}

/*--------------------------------------- 
 写真3つ並び+下の文字が入るver
---------------------------------------*/
.item03_b1 p{
	font-size:0.7em !important;
	text-align: center;
}
/*--------------------------------------- 
 写真が変化する　グルメ紹介ページに使用
---------------------------------------*/
.grume_photo li img{
	height: 46px;
}

/*--------------------------------------- 
 フォーム部分　サイズの変更
---------------------------------------*/
.toroku_new{ /*新規会員 登録部分*/
	width: 500px;
	background-color: #F6F8FA;
	padding: 10px;
	height: 300px;/*短くしています*/
}

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

#user_photo_area{
	width: 100%;
	display: flex;
	flex-direction: row;
}
.u_photo_a01{
	width: 38%;
}
.u_photo_a02{
	width: 62%;
}
.u_photo_a02 p{
	line-height: 2.0rem !important;
}


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

.comment_user_area_comment{
	padding: 0 0 0 15px;/*アイコンの右に余白を入れる*/
}

/*------------アイコンエリア　----　------------
　　　食べログ、ぐるなびボタン　　　グルメページ全般に利用します　-------------*/
.icon_k01,.icon_k02{
	width: 130px;
	height: 50px;
}


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

.price_icon02 ul{
	flex-direction: column;
}
/*------------------------------------------------ 
メッセージ部分 
--------------------------------------------------*/
.tab_area label{/*ラベル部分*/
	width: 80px;/*ラベルの幅*/ 
}
.message_area01 {
    width: 32%;
}
.message_area02 {
    width: 60%;
	padding: 0 0 0 10px;
}
.button P{
	font-size: 1.0rem!important;/*ボタンを大きくする*/
}
.message_area03{
	width: 8%;
}
.kirikae_area p {
    padding: 0;
	line-height: 50px!important;
}
.kirikae01a a{
}

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

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

--------------------------------------------------*/
.prf_area{
	display: flex;
	flex-direction:row; /*横に並ぶ*/
	width: 100%;
	flex-wrap:wrap;/*折り返し*/
	justify-content:center;
	
	}
.prf_area_01{
	width: 100%;
	display: none;
	}
.num_01 {
  font-size: 2.1rem!important;
  top: 34%;
  right: 25%;
 }
.num_01a {/*ランク部分だけ1文字*/
    font-size: 2.6rem!important;
    top: 35%;
    right: 40%;
}
.prf_area_02{
	margin: 0;
	width: 30%;
	}
.prf_area_03{
	width: 30%;
	}
.prf_area_04{
	width: 30%;
	}

.rank_area{
	font-size: 1.3rem;/*文字は少し大きい方がいい*/
}
.name_size{
	font-size: 1.0rem!important;
	line-height: 2.5rem!important;
}

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

価値観の部分　value

------------------------------------------------------*/
.value_area{
	width: 100%;
	height: 150px;
	flex-wrap: nowrap;
	background-color: white;
}
.value_area01{/**/
	width: 33%;
	margin: 0 10px 0 0;
}
.value_area01 p{
	 width: 100px;/*%にするとばバグル*/
	font-size: 0.6rem!important;

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

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

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

.member_table td p{
	font-size: 0.9rem!important;
}
.member_table td {
    padding: 8px 0 8px 10px;
	border-bottom: dotted 1px #D5D5D5;/*スマホの時だけした線を入れる。*/
}
/*----------------------------------------------------　

横スクロールの部分

--------------------------------------------------*/
.horizon{
	overflow-x: scroll;
}
.horizon li {
  width: 100%;
}
.horizon li img{
	width: 100%;
}
.horizon::-webkit-scrollbar {
 /* display: none;/*スクロールバーを非表示にする*/
}

.s_text{
	width:100px;
}
.s_text02{
	width:110px;
}
/*小さい*/
.horizon02 > li {
  width: 29%;
}
/*----------------------------------------------------　

エリア部分
利用場所：エリアで探す

--------------------------------------------------*/
.maps_area02 li{
	width:20%;
}

/*左側*/
.maps_area01 p {
	height: auto;
	padding: 6px 0px 9px 0;
}
/*-------------------------------------------------

お気に入りエリア
場所：お気に入り　マイページ
-------------------------------------------------------*/
.favorite_area{
	width: 100%;
	display: flex;
	flex-wrap: wrap;/*折り返し*/
}
.spa02{
	width: 85%;
	margin: 0 auto;/*中央ぞろえ*/
	padding: 10px 0 20px 0;
}
.new_badg{
	font-size: 0.5rem;
}
.mes02{
	font-size: 1.2rem!important;
}


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

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

------------------------------------------------------*/
.search_prf_area{
	width: 100%;
	display: flex;
	flex-wrap: wrap;/*折り返し*/
}
.spa{
	width: 44%;
	margin: 10px 10px;/*上下に少し空きをつくる*/
}
.mes01{
	font-size: 0.6rem!important;/*元のサイズに戻す*/
}


.pop_up p{
	line-height: 3.4rem!important;/*タカサ調節*/
}
/*----------------------------------------------

場所：プロフィール

-----------------------------------------------*/
.prf_photo_area{
	display: contents;
}
.prf_p_big{
	width: 380px;
	height: 380px;
}


.prf_p_area{
	flex-direction:column;
	background: linear-gradient(180deg, rgba(11,191,246,0.7567401960784313) 0%, rgba(11,99,246,1) 30%, rgba(245,246,247,1) 30%);/*2色のグラデーション*/
	margin: 0;
	padding: 0 0 20px 0;/*下に間をつくる*/
}

.prf_details{
	width: 100%;
	order: 2;
}
.prf_p_big{/*画像　部分*/
	width: 100%;
	height: auto;
	/*order: 1;*/
}
.prf_p_big p{
	text-align: center;
	padding: 20px 0 0 0;/*上に隙間を空けて、グラデーションを見せる*/
}
.prf_p_big img{
	width: 340px;
	height: 340px;
}
.prf_p_sml ul{
	width: 360px;
	margin: 0 auto;
}
.prf_details{
	margin: 20px 0 0 0;
}

.prf_photo_area02 {
     display: contents;/*縦に並べられるようにする*/
}

/*画像の部分*/
.prf_p_big02{
	width: 250px;
	height: 250px;
    margin: 0 auto;/*下に隙間を作る*/
	margin-bottom: 10px;
}

.prf_p_big02 img{
	width: 250px;
	height: 250px;
}
.prf_p_big02 p{
	margin: 0 auto;
	text-align: center;
}

.prf_p_sml02 ul{
	display: flex;
	flex-wrap: wrap;/*下にいく*/
	width: 100%;
}
.prf_p_sml02 li {
    width: 21%;
	margin: 0 auto;
	margin-bottom: 10px;
    /*margin: 0 5px 10px 5px;*/
    cursor: pointer;
}

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

場所：メッセージエリア

-----------------------------------------------*/
.oaite{/* 左の画像部分 */
	width: 20%;
}
.oaite_message01{/*メッセージ部分*/
	width: 100%;
}

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

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

-----------------------------------------------*/
.ca_area01{
	width: 44%;
}
.ca_area01 p{
	line-height: 0!important;
}

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

場所：足あとエリア

-----------------------------------------------*/
.foot_area01{
	width: 20%;
	padding: 0 5px;
}
.foot_area01 img{
	width: 100%;
}
.foot_area02{
	width: 50%;
	padding: 0 0 0 5px;/*文字の部分を調節*/
}
.foot_area03{
	width: 30%;
}
.foot_area03 a {
    padding: 15px 12px;
}
/*-----------------------------------

セレクト部分など

-----------------------------------------------*/
select{/*まずリセットする*/
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/*color: #7bc8cf;/*文字の色*/
	margin: 0 auto;
}


select{
	background-color: white;
    /*margin: 0 0 0 30px;調節*/
	position: relative;
	width:100%;
}
input{
	background-color: white;
	font-size: 16px;/*拡大表示対策*/
	/*transform: scale(0.8);*/
	
}
.text_box_name{
}


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

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

.drink_check li{
	width: 45%;
	margin: 15px 0 7px 22px;;
}

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


.drink_check li {
    width: 50%;
    margin: 15px 0px 7px 0px;
	font-size: 16px;/*拡大表示対策*/
	transform: scale(0.9);
	font-weight: 700;
}


/*--------------------------------------------------
トップの画面

------------------------------------------------*/
.login_area01{/*背景を白くして、薄くする*/
	width: 100%!important;
	height: auto;
	margin: 0 auto;
	/*background:rgba(255,255,255,0.7);*/
}
.nenrei02{
	width: 80px;/*身長の部分*/
}
.zyoken01 a{
	color:#7bc8cf;
	font-weight: 700;

}

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

お知らせ部分

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

.news_area{
	flex-direction:column;
}
.news_area_time{
	width: 100%;
}
/*---------------------------------------------------

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: 33%;
	height: 110px;
	position: relative;
}
.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;
}
/*----------------------------------------

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

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

.photos{
	width: 30%;
}
.users_area01{
	width: 40%;
	
}
.users_area02{
	width: 30%;
}
.sakuzyo_btn a{
	padding: 15px 25px;
}

.setting_area{
	margin: 0 0 0 20px;
}

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

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

------------------------------------------------*/
.search_c{
	width: 105px;
}
.search_btn a {
    padding: 15px 15px;
}
.si_area02 select {
    padding: 0 0 0 20px;
    margin: 10px 0;
    width: 180px;
}

.si_area02 select{
    padding: 0 0 0 30px;
}


.shuten{
	font-size: 0.6rem!important;
	color: #B7B7B7;
}
.shuten a{
	color: #B7B7B7;
}
/*--------------------------------------

場所：マイページのプロフィール
ボタンなど
------------------------------------------*/
.btn_prf_area{
	height: 37px;
}
.btn_prf_area01 button {

	padding: 0 0 6px 0;
}
.btn_prf_area02 button{
	padding: 0 0 6px 0;
}
/*---- スライドして表示されるメニュー -----*/
.navigation {
	height: 580px;
 
}
/*---------------------------------

お知らせ部分

-------------------------------------*/
.news_area_message p{
	font-size: 0.9rem;
	padding: 0 0 15px 0;
}
.messa_btn02 a{/*お気に入りで利用*/
	margin: 23px 0 0 0;
	width: 80%;
	padding: 15px 60px;
}
/* ----------------------------------

場所：検索フォーム部分

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

dl.search1 dt input {
    padding: 0px;
}
/*-----------------------------------

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

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

---------------------------------------*/
.footer_icon_area01a {
    width: 30%;
}
.footer_icon_area02{
	justify-content :center;
	width: 380px;
	height: 100px;
    left: 50%;
	transform: translate(-50%, 0%);
}

.footer_icon_area01a img{
	width: 80px;
	height: 80px;
}
.two_area01{
	width: 100%;
	margin: 0;
	order: 1;
}

.two_area02{/*画像部分*/
	width: 100%;
	margin: 0;
	order: 0;/*こちらを先にする*/
}

.two_area02 img{
	width: 100%;
}


.contents02_area{
	width: 100%;
	margin: 0 auto;
	justify-content:space-around;
	flex-direction:column;
}

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

場所：
画像指定の事例
https://www.keicode.com/script/css-background-size.php

------------------------------------*/
#main_login02 {
    height: 500px;/*サイズの調節 上に80pxを足している*/
    margin: 0 auto;
	padding: 0 0 0 20px;
}
.main_title{/*メインのタイトル*/
	font-size: 1.3rem;
	font-weight: 450;
	line-height: 3.5rem;
}
.main_title02{/*追加*/
	font-size: 1.3rem;
	font-weight: 450;
	line-height: 3.5rem;
	padding: 0 0 0 30px;
}
.body_back{
	
	background-size: 500px 800px;
	background-position:center center;

}
.back{
	background-size: contain;/*縦横比を保持・背景領域を完全に覆う最小サイズに背景画像を拡大縮小する*/
	background-size: 500px 800px;/*縦横比を保持・背景領域を完全に覆う最小サイズに背景画像を拡大縮小する*/
	background-position:top;
	background-repeat: no-repeat;
}
.back_smaho{
	background-size: 500px 800px;/*縦横比を保持・背景領域を完全に覆う最小サイズに背景画像を拡大縮小する*/
	background-position:top;
	background-repeat: no-repeat;
	display: block;
}
.bg-slider{/*ログインの背景*/
	background-size: 500px 800px;/*縦横比を保持・背景領域を完全に覆う最小サイズに背景画像を拡大縮小する*/
	background-position:top;
	background-repeat: no-repeat;
} 
.login_area01{/*背景を白くして、薄くする*/
	width: 60%;
	height: auto;
	margin: 0 auto;
	padding: 120px 0 0 0;
	/*background:rgba(255,255,255,0.8);*/
}

/*---------------------------
場所：top、serviceなど三つ並ぶ部分。
利用頻度：高
--------------------------*/
.three_area01{
	width: 100%;
	margin-bottom: 50px;
	
}
.three_area01 p{
	padding: 0 15px;/*横の隙間調節*/
}
.three_area01 img{
	width: 100%;
}
/*-----------------ここから画像が大きいエリア-------------------------------*/
.contents02_area_back{
	height: 700px;
	padding: 0 0 40px 0;/*marginだと背景に穴ができるのでpaに変える*/
}
.two_area01 {
    padding: 10px 0 10px 20px;
}
.two_area02{
	margin: 0;
}


/*-------------------------------------*/
.koe_area01{
	width: 100%;
	margin: 0 auto;
	padding: 10px 0;
}

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


場所：よくある質問

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

.q_area01{
	width: 10%;
}

.q_area02{
	width: 90%;
}

.a_area{
	width: 100%;
	display: flex;
}
.a_area01{
	width: 10%;
}
.a_area02{
	width: 90%;
}


/*----------------------------
2列の部分
場所：トップ（画像が左にある場合）
-------------------------------------*/
.two_areas{/*親ボックス*/
	width: 100%;
	display: flex;
	flex-direction:column-reverse;/*順番を逆にする*/
	
}
.two_areas01{
	width: 100%;
	margin: 0 0 20px 0;
	order: 1;
}
.two_areas02{
	order: 0;
}
.two_areas01 p,.two_areas01 h3{
	padding: 0 15px;/*左に隙間を作る*/
}
.two_areas01 img{
}
.two_areas02{
	width: 100%;
	padding: 10px;
}
/*----------------------------
2列の部分
場所：マンション販売（画像が右にある）
-------------------------------------*/
.two_areas01a{
	width: 100%;
	margin: 0 0 20px 0;
	order: 1;
}
.two_areas02a{/*右側の画像が上にくるようにする*/
	order: 0;
}
.two_areas01a p,.two_areas01a h3{
	padding: 0 15px;/*左に隙間を作る*/
}
.two_areas02a{
	width: 100%;
	padding: 10px;
}


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

はじめての方へ
-------------------------------*/
.two_areas01_photo{
	width: 100%;
	margin: 0 0 20px 0;
}
.two_areas01_photo p,.two_areas01_photo h3{
	padding: 0 15px;/*左に隙間を作る*/
}
.two_areas02_txt{
	width: 100%;
	padding: 10px;
}


.nayami_midasi03{
	color: #6acdd4;
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing:0.1rem;/*文字の間隔*/
}



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

お知らせ部分 s
場所：トップ
-------------------------------------*/

.news_area{
	flex-direction:column;
}
.time01{
	width: 30%;
	padding: 0 0 0 15px;
}
.news_area_time{
	width: 100%;
}
/*---------------------------------------------------------
サブページのメイン部分　背景に画像を設定して、パララックス効果を
-----------------------------------------------------*/
.main_photo_company{
	background-image: url("../img/back_img/back1s.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;/*センターの中央に行く*/
	height: 400px;
	margin-bottom: 0;
}
.main_photo_contact{
	background-image: url("../img/back_img/back1s.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;/*センターの中央に行く*/
	height: 400px;
	margin-bottom: 0;
}
.main_photo_kanri{
		background-image: url("../img/back_img/back3s.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;/*センターの中央に行く*/
	height: 500px;
	margin-bottom: 0;
}

.main_photo_renove{
		background-image: url("../img/back_img/back3s.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;/*センターの中央に行く*/
	height: 400px;
	margin-bottom: 0;
}
.main_photo_invest{
	background-image: url("../img/back_img/back1s.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;/*センターの中央に行く*/
	height: 400px;
	margin-bottom: 0;
}
.main_photo_manshon{
	background-image: url("../img/back_img/back1s.jpg");
	background-repeat: no-repeat;
	background-position: top;/*センターの中央に行く*/
	height: 400px;
	background-attachment: fixed;
	margin-bottom: 0;
}
.main_photo_staff{
	background-image: url("../img/back_img/sft_s.jpg");
	background-repeat: no-repeat;
	height: 400px;
	background-attachment: fixed;
	background-position: top;/*センターの中央に行く*/
	margin-bottom: 0;
}
.main_photo_voice{/*お客様の声*/
	background-image: url("../img/back_img/kazoku_s01.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;/*センターの中央に行く*/
	height: 400px;
	margin-bottom: 0;
}
.main_photo_hazimete{
	background-image: url("../img/back_img/back1s.jpg");/*高さ500px*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;/*センターの中央に行く*/
	height: 400px;
	margin-bottom: 0;
}
.main_photo_service{
	background-image: url("../img/back_img/back5s.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;/*センターの中央に行く*/
	height: 500px;
	margin-bottom: 20px;
}

.main_photo_service01{
	background-image: url("../img/back_img/back1s.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top;/*センターの中央に行く*/
	height: 400px;
}
.main_photo_qa{
	background-image: url("../img/back_img/qa_s.jpg");
	background-repeat: no-repeat;
	background-position: top;/*センターの中央に行く*/
	background-attachment: fixed;
}
.main_photo_customer{
	background-image: url("../img/back_img/customer_s.jpg");
	background-repeat: no-repeat;
	background-position: top;/*センターの中央に行く*/
	background-attachment: fixed;
	height: 400px;
}
.main_photo_profile{
	background-image: url("../img/back_img/qa_s.jpg");
	background-repeat: no-repeat;
	background-position: top;/*センターの中央に行く*/
	height: 400px;
	background-attachment: fixed;
}
.main_photo_seminar{
	background-image: url("../img/back_img/seminar_s.jpg");
	background-repeat: no-repeat;
	background-position: top;/*センターの中央に行く*/
	background-attachment: fixed;	
	height: 390px;
}
.main_photo_bike{
	background-image: url("../img/back_img/bike_s02.jpg");
	background-repeat: no-repeat;
	background-position: top;/*センターの中央に行く*/
	background-attachment: fixed;	
	height: 400px;
}
.main_photo_company_movie{
    top: 0;/*画像が下に回り込む位置を一番上にする*/
}

.main_photo_company_movie::after{
	display: none;
}

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

スマホ画面のタイトルの部分
場所：サブページ共通

--------------------------------------------*/
.main_title_area{
    padding: 22% 0 0 8%;
}
.main_title_e {/*小さい文字　英語部分*/
    font-size: 1.0rem;
    line-height: 1.8rem;
    color: white;
    letter-spacing: 0.1rem;
    text-shadow: 2px 2px 3px #716a6a;
}
.main_title_e02{
	padding: 50px 0 0 30px;
	 font-size: 1.0rem;
    line-height: 1.8rem;
    color: white;
    letter-spacing: 0.1rem;
    text-shadow: 2px 2px 3px #716a6a;
}

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


/*----------------悩みエリア　size-----------------------------*/
.contents01_area01 p{/*悩み*/
	padding: 0 15px;/*左右に余白*/
	font-size: 0.8rem;
}
.contents01_area p{/*社長あいさつ部分*/
	padding: 0 15px;/*左右に余白*/
	font-size: 0.8rem;
}


.nayami_midasi{
	font-size: 1.0rem;
	line-height: 3.0rem;
	font-weight: 700;
	letter-spacing:0.1rem;/*文字の間隔*/
	padding: 20px 0 0 0;
}
.nayami_midasi02{
	color: #6acdd4;
	font-size: 1.3rem;
	padding: 0 0 30px 0;
	font-weight: 700;
	letter-spacing:0.1rem;/*文字の間隔*/
}
.size_w img{
	width: 100%;
}

/*-------------------------------------------
よくある質問
--------------------------------------------*/
.faq_itm dd{
	margin: 0 0 0 10px;/*左に空きすぎたスペースの修整*/
}
.faq_text{/*テキストの部分*/
    font-size: 0.8rem;
}
.faq_link{
	padding: 42px 68px 44px 10px;/*文字を読みやすくする*/
}

.faq_area p{
	font-size: 0.8rem;
	line-height:2.2rem;/* 新しい書き方*/
	margin:0;
	padding: 0 20px 0 0;/*15だとせまい*/
}
	
/*------------------------------------------

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

--------------------------------------------*/
.contact_area{
	flex-direction:column;/*縦に並ぶ*/
	height: 580px;
}
.contact_area_sub01{
	width: 100%;
}
.contact_area_sub02{
	width: 100%;
}
.sub01_text_area,.sub02_text_area{
	width: 80%;
	left: 10%;/*真ん中に寄せる*/
}
/*------------------------------------------

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

--------------------------------------------*/
.tel_txt{
	padding:20px 10px 10px 10px; 
}
.contact_back {
	margin: 50px 0 50px 0;/*調節*/
}
.contact02_area_back{
	height: 100%;
	height: 320px;/*サイズの調節*/
	}
.contact02_area_sub{
	text-align: center;
}
.contact02_area_sub img{
	width: 60%;
	height: 30%;
}
.tel_txt{
	font-size: 1.1rem;
	line-height: 2.5rem;
}
.contact02_area{
	width: 100%;
	flex-direction:column;/*縦に並ぶ*/
}
.contact02_area_sub{
	width: 100%;
	padding: 10px 0;
}
.cho01{/*調節用*/
	text-align: center;
}
/*-------------------------------------------

スタッフエリア
場所：

--------------------------------------------*/
.staff_area_sub{
	width: 100%;
	margin: 0 0 40px 0;
}
.staff_area_sub img{
	width: 100%;
}
.staff_area_sub p{
	padding: 0 15px;
}
/*------------------------------------------

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

--------------------------------------------*/
.area_txt_sub{
	width: 100%;
}

/*------------------------------------------
場所：はじめての方へ
利用：右と左に並べる
--------------------------------------------*/
.point_area{
	flex-direction:column;/*縦に並ぶ*/

}
.point_area_sub01{
	width:100%;
	order: 1;
}
.point_area_sub02{
	width:100%;
	order: 0;
}

.arrow_area p{
	padding: 0;
}
/*------------------------------------------
場所：はじめての方へ
利用：高さ
--------------------------------------------*/
.nagare_area{
	flex-wrap:wrap;/*子要素を折り返す*/
}
.nagare_area_sub{
	width: 33%;
	padding: 0 0 20px 0;
}
.flow_num_box{
	padding: 0 10px;
}
.flow_num{
	height: 110px;/*高さ*/
}
.flow_num_txt_box{/*文字のボックス*/
	width: 90%;
	display: flex;
	flex-direction:column;/*縦に並べる*/
	line-height: 27px;/*高さの調節*/
	
}
.flow_num_txt{
	width: 100%;
	padding: 15px 0 0 20px;
}
.flow_num_txt02{
	width: 100%;
	font-size: 0.9rem;
}
.arrow_area{
	height: 50px;
}
.arrow_down{
	bottom: 0;
}
/*-----------------------------
セミナー情報
--------------------------------*/

.seminar02_area_back{
	margin: 0;
}
.seminar02_area{
	width: 100%;
	flex-direction:column;
}
.seminar02_are_sub{
	width: 95%;
	margin: 0 auto;
	margin-bottom: 30px;
}
/*--------------------------------------- 
ページトップに戻るの jquery部分
---------------------------------------*/

.pagetop {
    right: 15px;
}
.smaho_txt{
	padding: 0 0 0 15px;
}
/*--------------------------------------- 
場所：/unagi/
背景が黒
---------------------------------------*/
.point_area_u02_back{
	max-width: 430px;/*iphone15 ProMAx*/
	padding: 0;
}

.point_area_u02_box1{
	width: 100%;
	display: none;/*ロゴは消す*/
}
.point_area_u02_box2{
	width: 100%;
}
.point_area_u02_photo img{
	with:100%!important;
}
/*------------------------------------------
場所：/unagi/ウナギ
利用：
--------------------------------------------*/
.point_area_u_sub01{/*縦のテキスト*/
	padding: 0 20px;/*横の幅を広げる*/
	writing-mode:horizontal-tb;
	-ms-writing-mode:horizontal-tb;
}

.point_area_u_sub01 p {/*文字のサイズ*/
    font-size: 1rem!important;
	line-height: 2.5rem;
}
.point_area_u_sub02 img{
	width: 95%;
}
.point_area_u_sub02 h3{
	font-size: 1.2rem!important;
}

.point_area_u02_txt{/*テキストエリア*/
	padding: 0 30px;
}
.point_area_u02_txt h3{
	font-size: 0.9rem;
}
/*----------------------------------------------------
場所：/unagi/index
二つ交互に並ぶ
-------------------------------------------------------------*/
.two_area{
	padding: 30px 0;/*再調節*/
}
.two_box01{
	flex-direction: column;/*縦並びにする*/
}
.two_box02{
	flex-direction: column-reverse;/*写真と文章の順序を変える*/
	padding: 0 0 10px 0;
}
.two_photo{
	width: 95%;
	margin: 0 auto;
}
.two_photo img{
	width: 100%;
}
.two_txt{
	width: 95%;
	padding: 0 15px;
	margin: 0 auto;
}
/*--------------------------------------------------

アクセスマップ
場所：全部の場所
/service/sales.php

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

.access_map_back{
}
.access_map{
	max-width: 600px;
	flex-direction:column;/*縦並び*/
	
}
.access_map01{
	width: 100%;
	margin:0 30px;
}
.access_map02{
	width: 100%;
	margin:0;
}
/*-----------------------------------------

/service/sale.php

------------------------------------*/
.list_three_area{
	flex-direction:column;
}

.list_three_area01 {
    width: 85%;
    margin: 0 auto;
    margin-bottom: 50px;
	padding: 0;
}

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

場所：service/sale

--------------------------------------------------*/
.store_area{
	width: 100%;
	padding: 20px 0 0 0;
}
.store_photo{
	width: 100%;
	margin: 0 20px;
}
.sct_01{/*タイトルの部分*/
	padding-top: 25px;
}