
/*　display
---------------------*/
.dpib{ display:inline-block; }
.dpi{display:inline;}
.db{display:block;}
.dpif{ display:inline-flex; }
.dpf{ display:flex;align-items: center;justify-content: space-between;flex-wrap: wrap;}
.dpfc{ display:flex;align-items: center;justify-content: center;flex-wrap: wrap;}
.dpf_stretch{ display:flex;align-items:stretch;r;justify-content: space-between;flex-wrap: wrap;}
.df{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.fdc{flex-direction: column; }
.fdr{flex-direction: row;}

/* float
-------------*/
.fl{float:left;}
.fr{float:right;}

/* display*/
.dn{display: none;}

/* Margin
-------------*/
.mauto{margin:auto;}
.m0{margin:0;}
.m10{margin:10px;}
.m30{margin:30px;}
.m-co{margin-top:25px;}

.mt0{margin-top:0px !important;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}
.mt80{margin-top:80px;}

.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}
.mb70{margin-bottom:70px;}
.mb80{margin-bottom:80px;}
.mb90{margin-bottom:90px;}
.mb100{margin-bottom:100px;}

.mr3{margin-right:3px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}

.ml3{margin-left:3px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}


/* padding
---------------------*/
.p5{padding:5px;}
.p10{padding:10px;}
.p15{padding:15px;}
.p20{padding:20px;}
.p30{padding:30px;}
.p50{padding:50px;}

.ptb3{padding:3px 0;}
.ptb5{padding:5px 0;}
.ptb8{padding:8px 0;}
.ptb10{padding:10px 0;}
.ptb15{padding:15px 0;}
.ptb20{padding:20px 0;}
.ptb50{padding:50px 0;}

.plr5{padding:0 5px;}
.plr10{padding:0 10px;}
.plr15{padding:0 15px;}
.plr20{padding:0 20px;}
.plr25{padding:0 25px;}
.plr30{padding:0 30px;}

.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl20{padding-left:20px;}

.pr5{padding-right:5px;}
.pr10{padding-right:10px;}

.pb0{padding-bottom:0px;}
.pb40{padding-bottom:40px;}

/* align
------------------- */
.tac{text-align:center}
.tal{text-align:left}
.tar{text-align:right}

/* width:
------------------- */
.w20{width:20%;}
.w30{width:30%;}
.w48{width:48%;}
.w50{width:50%;}
.w70{width:70%;}
.w80{width:80%;}
.w100{width:100%;}
.w480{max-width:480px;}

.h60{height: 60px;}
.h230{height: 230px;}
.h400{height:400px;}
.h100{height: 100%;}

.hr12{
	max-width:1200px;
	width:100%;
	margin:0px auto;
}

/* height:
------------------- */
.mh50{min-height:50px;}
.mh150{min-height:150px;}
.mh200{min-height:200px;}
.mh230{min-height:230px;}
.mh300{min-height:300px;}


/* フォント
-------------------*/
.fwb{font-weight:bold;}
.fwbb{font-weight:500;}
.fwn{font-weight:normal;}
.fsss{font-size:0.5em;}
.fss{font-size:0.8em;}
.iconfss{font-size:.8em !important}
.iconfsss{font-size:.7em !important}
.fsb{font-size:1.3em;}
.fsbb{font-size:1.6em;}
.fc-red{  color:#cc0000; }
.fc-black{color:#1b1b1b;}
.fc-image{  color:#e42a42 !important;} /*駅近ドットコム　イメージカラー */
.fc-food{  color:#e42a42; } /*駅近ドットコム　飲食店ガイドイメージカラー */
.fc-beauty{color:#5689c4; } /*駅近ドットコム　飲食店ガイドイメージカラー */
.fc-pink{ color: #eb6363; }
.fc-navy{ color: #09348b; }
.fc-gray{ color: #999 !important}
.fc-bgray{ color: #666; }
.fc-navy{ color: #09348b; }
.fc-lemon{ color: #ffff00; }
.fc-yellow{ color: #f9e8cd; }
.fc-white{ color: #fff; }
.fc-black{ color: #000; }
.fc-service{color:var(--concept-color);}

/* 背景
-------------------*/
.bg-pink{ background-color: #e94557;}
.bg-eee{ background-color: #eee;}
.bg-grey{ background-color: #ccc;}
.bg-gray{ background-color: #ccc;}
.bg-blue{background-color:#3a7ad2;}
.bg-mizuiro{background-color:#99ccff;}
.bg-beige{background-color:#fbf8f7;}
.bg-yellow{ background-color:#f39700;}
.bg-red{ background-color:#CC0000;}
.bg-image{ background-color:#e42a42;}
.bg-thiny{background-color:#f9e8cd;}
.bg-white{background-color:#fff;}
.bg-food{background-color:#e42a42;}
.bg-beauty{background-color:#5689c4;}
.bg-life{background-color:#5cda62;}
.bg-fb{background-color: #3B5998;}
.bg-tw{background-color:#55acee;}
.bg-line{background-color:#5ae628;}

/*ロゴ*/
.st0{fill:#E42A42;}
.st1{fill:#3D3A39;}
.st2{fill:#313333;}
.st3{fill:#FFFFFF;}
.st0_ft{fill:#E42A42;}
.st1_ft{fill:#3D3A39;}
.st2_ft{fill:#313333;}
.st3_ft{fill:#FFFFFF;}

/*line-height*/
.ls13{line-height: 1.3em;}


.tab_menu_style{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width:100%;
    justify-content: space-between;

}

/* ボーダー
-------------------*/
.border{border:1px solid #1e1e1e; margin:1em auto;}
.bbottom{border-bottom:1px solid #eee;}

/*テーブル*/
table.bordertable {
  text-align: center;
  border:1px solid #ccc;
  width: 100%;
  padding:20px;
  margin:15px auto;
}
table.bordertable th,table.bordertable td {
  color:#333;
  border:1px solid #ccc;
  vertical-align: middle;
}
table.bordertable th{
    font-weight: 500;
}

.im-instagram{
    color:#fff;
}


/*スクロールに応じての動き*/
.topsv_left_box[data-emergence=hidden] {
transition: all .6s;
	 opacity:0;
}
.topsv_left_box[data-emergence=visible] {
transition: all .6s;
	 opacity:1;
}

.fade[data-emergence=hidden] {
transition: all .28s;
white-space: nowrap;
overflow: hidden;
width: 0;
}
.fade[data-emergence=visible] {
transition: all .28s;
width:100%;
white-space: nowrap;
overflow: hidden;
}
.fade-btn[data-emergence=hidden] {
transition: all .28s;
white-space: nowrap;
overflow: hidden;
width: 0;
}
.fade-btn[data-emergence=visible] {
transition: all .28s;
width:350px;
white-space: nowrap;
overflow: hidden;
}


.fade-down[data-emergence=hidden] {
transition: all .5s;
	 opacity:0;
transform: translate(0,-10px);
}
.fade-down[data-emergence=visible] {
transition: all .5s;
	 opacity:1;
transform: translate(0,0);
}

/*PC*/
@media screen and (min-width:769px){

}

/*SP*/
@media screen and (max-width:768px){
    .fade-btn[data-emergence=visible] {
    transition: all .38s;
    width:100%;
    }

}

@media screen and (max-width:640px){

}

@media screen and (max-width:480px){

}
