@charset "UTF-8";
/* CSS Document */

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

   サロン一覧ページ 

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


/* エリアタイトル */

#salonWrp .shoparea_box {
    margin-bottom: 55px;
}
#salonWrp .shoparea_box h1 {
    font-size: 30px;
}
#salonWrp .shoparea_box p {
    display: block;
    margin-bottom: 10px;
    border-bottom: 1px solid #61371D;
    width: auto;
    max-width: 58px;
    margin-left: auto;
    margin-right: auto;
}
/* 一覧リスト */

#salonWrp {
}
#salonWrp .txt_box {
    margin-bottom: 5%;
}
#salonWrp .flexbox li {
    margin-bottom: 7%;
    width: 29%;
}
#salonWrp .flexbox li p {
    margin-bottom: 10px;
}
#salonWrp .flexbox li .flexbox.clm2 {
    border-top: 1px solid #61371d;
    padding-top: 15px;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 20px;
}
#salonWrp .flexbox li .sns {
    text-align: left;
    margin-top: 0px;
    width: 50%;
}
#salonWrp .flexbox li .sns img {
    width: 20px;
    margin-right: 10px;
}
#salonWrp .flexbox li .btn {
    text-align: right;
    width: 50%;
}
#salonWrp .address  {
	display: inline-block;
    vertical-align: top;
	white-space: normal; 
}
#salonWrp .sns {
    margin-bottom: 8%;
}
#salonWrp .sns .text {
    margin-bottom: 2%;
}
#salonWrp .sns .line {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}
#salonWrp .btn_line{
	width: 150px;
	margin-left: auto;
}
.flexbox.clm3 li .btn_line {
}
#instagramWrp {
    background: #fff;
}
#instagramWrp .nailgarden {
    max-width: 274px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
}
#instagramWrp .txt14_kaku {
    margin-bottom: 30px;
}
#instagramWrp .btn_g2 {
    margin-bottom: 80px;
}
#instagramWrp .txt24.didot {
    display: inline-block;
    padding-left: 25px;
    background-image: url(../assets/img/icon/sns/instagram_bwn.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px auto;
    margin-bottom: 10px;
}
#instagramWrp #instagram li {
    width: 20%;
}
#instagramWrp #instagram li img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
#salonlistWrp {
    padding-bottom: 10%;
}
/*.flexbox.clm3 li .add {
	height: 40px;
}*/

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

   サロン詳細ページ 

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


/* 共通 */

.f-futura {
    font-family: 'Futura LT W01 Light', "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}
.lh-1 {
    line-height: 1;
}
.fs-i {
    font-style: italic;
}
.f-os {
    font-family: 'Oswald', "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}
.va-mid {
    vertical-align: middle;
}
.f-24 {
    font-size: 22px;
}
/* 大枠 */

#salonlistWrp {
    background-color: #FFFFFF;
    width: 100%;
}
#salonlistWrp .cttWrp {
    max-width: 1060px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
}
#salonlistWrp .area_01 {
    background: linear-gradient(90deg, transparent 50%, #F1EBDE 50%);
    height: 510px;
    position: relative;
}
/* 店名の縦文字 */

#salonlistWrp .update {
    position: absolute;
    left: 2%;
    z-index: 1;
    line-height: 1;
    font-size: 13px;
    font-size: 1rem;
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

/* 予約ボタン */
#salonlistWrp .pick-up-text {
    position: absolute;
    top: -44px;
    right: 126px;
    z-index: 20;
    width: 110px;
    font-size: 27px;
    font-size: 2.7rem;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.12em;
}
#salonlistWrp .pick-up-text .table-cell {
    height: 110px;
    background-color: #fea8a8;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
#salonlistWrp .table-style {
    display: table;
    table-layout: fixed;
    width: 100%;
}
#salonlistWrp .table-cell {
    display: table-cell;
}
#salonlistWrp .pick-up-text .text {
    padding: 9px 0 0;
    font-size: 26px;
    color: #FFFFFF;
}
/* WEB予約の中の文字 */
#salonlistWrp .table-style {
    display: table;
    table-layout: fixed;
    width: 100%;
}

/* テキスト部分 */

#salonlistWrp .salon_name {
    text-align: left;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 3px;
}
#salonlistWrp .ttl-box .post-ttl {
    margin-top: 15px;
    display: block;
    text-align: left;
    font-size: 14px;
}
#salonlistWrp .ttl-box {
    padding: 35px;
    width: 415px;
    height: 245px;
    background-color: #FFFFFF;
    float: right;
    margin-right: 2%;
    margin-top: -30%;
}
#salonlistWrp .area_01 .shopimg {
    max-width: 620px;
    width: 100%;
    padding-top: 5%;
    float: left;
    margin-left: 3%;
}
/* snsボタン */

#salonlistWrp .cttWrp .area_01 .sns {
    text-align: right;
    margin-top: -5%;
    width: 50%;
    float: right;
    margin-right: 2%;
}
#salonlistWrp .cttWrp .area_01 .sns img {
    width: 20px;
    margin-right: 10px;
}
#salonlistWrp .area_02 {
    margin-top: 10%;
}
#salonlistWrp .area_02 .flexbox {
    -webkit-justify-content: space-between;
    justify-content: space-between;  /* 横方向の整列 flex-start space-around */
}
#salonlistWrp .area_02 .flexbox li {
}
#salonlistWrp .area_02 .flexbox .list-left {
    width: 40%;
}
#salonlistWrp .area_02 .flexbox .list-right {
    width: 55%;
}
#salonlistWrp .area_02 li dl {
    text-align: left;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#salonlistWrp .area_02 li dt {
    font-size: 11px;
    color: #C9B797;
    margin-bottom: 10px;
    border-bottom: 1px solid #C9B797;
}
#salonlistWrp .area_02 li dd {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 15px;
    color: #61371D;
}
#salonlistWrp .area_02 .f-24 {
    font-size: 22px;
    margin-top: 20px;
}
#salonlistWrp .area_02 .reserve {
    margin-top: 30px;
}
#salonlistWrp .area_02 iframe {
    margin-top: 20px;
}
#salonlistWrp .area_02 .btn_line {
	width: 150px;
	margin-left: auto;
	margin-top: 8%;
}
#salonlistWrp .area_03 {
    margin-top: 10%;
}
#salonlistWrp .area_03 .flexbox.clm4 li img {
    max-width: 249px;
    width: 100%;
    height: auto;
}

@media screen and (max-width:768px) {
#conceptWrp .inner1000 {
    padding-left: 30px;
    padding-right: 30px;
}
#navWrp .flexbox {
}
#navWrp .flexbox li {
    width: 50%;
}
#navWrp .flexbox li .tit_box .didot {
    font-size: 30px;
}
#contentsWrp .txt_box {
    margin-bottom: 10%;
}
#salonlistWrp .area_01 {
    height: auto;
    background: none;
}
#salonlistWrp .ttl-box {
    width: auto;
    height: auto;
    background-color: none;
    float: none;
    margin-right: 0;
    margin-top: 0;
    position: relative;
    z-index: 1;
}
#salonlistWrp .update {
    position: static;
	text-align: left;
}
#salonlistWrp .area_01 .shopimg {
    max-width: 620px;
    width: 100%;
    padding-top: 5%;
    float: none;
    margin-left: 0;
}
/* web予約ボタン */
#salonlistWrp .pick-up-text {
    position: absolute;
    top: -44px;
    right: 20px;
    z-index: 20;
    width: 100px;
}
#salonlistWrp .pick-up-text .table-cell {
    height: 100px;
}
/* snsボタン */

#salonlistWrp .cttWrp .area_01 .sns {
    text-align: right;
    margin-top: 0;
    width: 100%;
    float: none;
    margin-right: 2%;
    position: relative;
    z-index: 2;
}
#salonWrp .flexbox {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}
#salonWrp .flexbox li {
    width: 46%;
}
#salonWrp .flexbox li .flexbox.clm2 {
    width: 100%;
}
#salonWrp .flexbox li .sns {
    width: 50%;
}
#salonWrp .flexbox li .sns img {
    margin-right: 5px;
    width: 18px;
}
#salonWrp .flexbox li .btn {
    width: 50%;
}
#salonWrp .flexbox li .btn_f {
}
.list-right dl dd {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}
.list-right dl dd iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
}

@media screen and (max-width:480px) {
#salonWrp .flexbox {
    width: 95%;
}
#salonWrp .shoparea_box h1{
	font-size: 24px;
}
#salonWrp .sns {
    margin-bottom: 14%;
}
#salonlistWrp .pick-up-text {
    position: absolute;
    top: -24px;
    right: 0px;
    z-index: 20;
    width: 80px;
	font-size: 1.4rem;
	font-size: 14px;
}
	#salonlistWrp .pick-up-text .text{
		font-size: 17px;
	}
#salonlistWrp .pick-up-text .table-cell {
    height: 80px;
}
#salonlistWrp .update {
    position: absolute;
    left: 2%;
    z-index: 1;
    line-height: 1;
    font-size: 8px;
    transform: none;
}
#navWrp .flexbox li .tit_box .didot {
    font-size: 20px;
}
#contentsWrp .flexbox {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}
#contentsWrp .flexbox li {
    margin-bottom: 10%;
}
#infoWrp .txt_box {
    margin-bottom: 10%;
}
#salonlistWrp .area_02 .f-24 {
    font-size: 20px;
    line-height: 150%;
}
#salonlistWrp .area_02 li dd {
    font-size: 13px;
}
#salonWrp .flexbox li {
    margin-bottom: 15%;
}
#salonWrp .flexbox li .sns {
    width: 60%;
}
#salonWrp .flexbox li .sns img {
    width: 16px;
    margin-right: 2px;
}
#salonWrp .flexbox li .btn {
    width: 40%;
}
#salonlistWrp .area_02 .flexbox .list-left,  #salonlistWrp .area_02 .flexbox .list-right {
    width: 100%;
}
.list-right dl dd {
    position: relative;
    width: 100%;
    min-height: 400px;
	height: 100%;
    overflow: hidden;
}
}