@charset "UTF-8";
/*
Theme Name: メンズクリア 店舗一覧・店舗詳細
*/


strong{
    font-weight: bold;
}

/*=======================================================
店舗一覧
=======================================================*/
main{
    padding-bottom: 40px;
}
/***大見出し***/
main h1::after{
	content:"Salon List";
}
/*****各店舗*****/
#list{
    padding: 0 0 60px;
}
#list > .box{
    width: 1020px;
    margin: 0 auto 25px;
    display: flex;
	flex-wrap: wrap;
}
/***店舗ボタン***/
#list .salonLink{
    margin: 0 auto 30px;
    padding: 4px;
    border: 1px solid #0367a7;
}
#list .salonLink > ol{
	width: 1020px;
    padding: 15px 15px 0;
    border: 1px solid #0367a7;
    position: relative;
    order: 1;
}
#list .salonLink > ol > li{
	width:100%;
}
#list .salonLink h3::before{
    content: "■ ";
}
#list .salonLink h3{
    color: #175082;
    font-size: 15px;
    font-weight: bold;
}
#list .salonLink .salonList{
	margin-bottom: 15px;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
}
#list .salonLink .salonList li{
	margin-right: 10px;
}
#list .salonLink .salonList a{
    color: #0367a7;
    font-size: 14px;
    text-decoration: underline;
}
/***引越し***/
#list .bl_change{
    width: 1020px;
    height: 166px;
    margin-bottom: 55px;
    padding: 40px;
    background: url("../images/salons/change_bg.png") center / 1020px 166px no-repeat;
    display: flex;
    justify-content: space-between;
	align-items: center;
}
#list .bl_change_ttl{
    width: 401px;
    height: 90px;
}
#list .bl_change_txt{
    color: #fff;
    font-size: 18px;
    text-align: center;
}
/***店舗詳細***/
#list .info{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    order: 3;
}
#list .info > li{
    width: 322px;
    margin: 0 27px 30px 0;
    padding: 15px 25px 72px;
    background: #fff;
    border: 1px solid #0367a7;
    position: relative;
}
#list .info > li:nth-of-type(3n){
    margin: 0 0 30px;
}
/**店名**/
#list .info h2{
    width: auto;
    height: auto;
    margin: 0 0 5px;
    background: none;
    color: #0367a7;
    font-size: 22px;
    display: block;
}
/**店内写真**/
#list .info .photo{
    height: 171px;
    margin-bottom: 15px;
    box-shadow: 0 0 0 1px #d5d5d5;
}
#list .info .photo img{
    width: 100%;
}
/**店舗情報**/
#list .info dl{
    font-size: 14px;
    letter-spacing: 0;
    display: flex;
    flex-wrap: wrap;
}
#list .info dt{
    width: 69px;
    margin: 0 0 10px;
    font-weight: bold;
}
#list .info dd{
    width: 201px;
    margin: 0 0 10px;
}
/*住所*/
#list .info .add + dd .other{
	display: block;
    color: #ff0000;
    font-weight: bold;
    margin-top: 5px;
}
#list .info .add + dd .other a{
	color: #ff0000;
	text-decoration: underline;
}
/*電話番号*/
#list .info .tel + dd a{
    display:inline-block;
	pointer-events:none;
}
/*開店前告知など*/
#list .info .other_att{
	font-size: 14px;
	margin-bottom: 1rem;
}
/**ボタン**/
#list .info .btn{
    width: 272px;
    position: absolute;
    bottom: 30px;
    left: 25px;
}
#list .info .btn li a{
    height: 42px;
    padding: 2px 0 0 10px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    position: relative;
    display: flex;
	justify-content: center;
	align-items: center;
}
/*お店に電話する*/
#list .info .btn .tel{
    display: none;
}
/*店舗詳細はこちら*/
#list .info .btn .more a{
    background: #a4903e;
}
#list .info .btn .more a::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: 0 0 0 15px;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent #fff;
}
@media screen and (max-width : 750px){
/*****各店舗*****/
  #list{
      padding: 0 0 90px;
  }
  #list > .box{
      width: 690px;
  }
/***店舗ボタン***/
  #list .salonLink{
      width: 690px;
      margin: 0 auto 50px;
      padding: 10px;
  }
  #list .salonLink > ol{
	  width: 100%;
      padding: 45px 20px 20px;
  }
  #list .salonLink h3{
      font-size: 30px;
  }
  #list .salonLink .salonList{
      margin-bottom: 20px;
      line-height: 1.8;
  }
  #list .salonLink .salonList li{
      margin-right: 28px;
  }
  #list .salonLink .salonList a{
      font-size: 28px;
  }
/***引越し***/
  #list .bl_change{
      width: 690px;
      height: 400px;
      margin-bottom: 50px;
      padding: 35px 0 0 25px;
      background: url("../images/salons/change_bg_sp.png") center / 690px 400px no-repeat;
      display: block;
  }
#list .bl_change_ttl{
    width: 544px;
    height: 122px;
    margin-bottom: 30px;
}
#list .bl_change_txt{
    padding: 0 0 0 10px;
    font-size: 26px;
    text-align: left;
    line-height: 1.8;
    letter-spacing: 0;
}
/***店舗詳細***/
  #list .info{
      width: 100%;
      display: block;
  }
  #list .info > li{
      width: 100%;
	  margin: 0 0 30px!important;
      padding: 30px 35px 180px;
  }
/**店名**/
  #list .info h2{
      font-size: 38px;
  }
/**店内写真**/
  #list .info .photo{
	  height: 392px;
      margin-bottom: 25px;
  }
/**店舗情報**/
  #list .info dl{
      font-size: 24px;
  }
  #list .info dt{
      width: 170px;
      margin: 0 0 15px;
  }
  #list .info dd{
      width: 446px;
      margin: 0 0 15px;
  }
/*電話番号*/
	#list .info .tel + dd a{
		pointer-events:auto;
	}
/*開店前告知など*/
	#list .info .other_att{
		font-size: 24px;
		margin-bottom: 0;
	}
/**ボタン**/
  #list .info .btn{
      width: 620px;
      display: flex;
      justify-content: space-between;
      bottom: 50px;
      left: 35px;
  }
  #list .info .btn li a{
      height: 93px;
      padding: 0;
      font-size: 34px;
  }
/*お店に電話する*/
  #list .info .btn .tel{
      display: block;
  }
  #list .info .btn .tel a{
      width: 332px;
      padding: 0 0 0 50px;
      background: url("../images/common/icon_tel.svg") left 28px center / 26px 49px no-repeat,#005993;
  }
/*店舗詳細はこちら*/
  #list .info .btn .more a{
      width: 265px;
	  padding:0 0 0 15px;
  }
  #list .info .btn .more a::after{
      border-width: 10px 0 10px 15px;
  }
}
/*=======================================================
店舗詳細
=======================================================*/
#salons_info {
    padding-bottom: 90px;
}
/***大見出し***/
#salons_info h1{
    padding: 0;
    line-height: 142px;
}
#salons_info h1::after{
	content:none;
}
/*****詳細*****/
#salons_info #info{
    width: 1020px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
/***店内写真***/
#salons_info #info .box02{
    order: 1;
    width: 100%;
    margin: 0 0 30px;
    display: flex;
    justify-content: space-between;
}
/*メイン写真*/
#salons_info #info .box02 .photo li img{
    width: 813px;
    padding: 4px;
    background: #fff;
    border: 1px solid #37adf0;
}
#salons_info #info .box02 .photo input,
#salons_info #info .box02 .photo img{
    display: none;
}
#salons_info #info .box02 .photo input:checked ~ img{
    display: block;
}
/*ボタン*/
#salons_info #info .box02 .btn li{
    margin: 0 0 5px;
}
#salons_info #info .box02 .btn li img{
    width: 188px;
    height: 93px;
    padding: 2px;
    border: 1px solid #37adf0;
}
/***テキスト***/
#salons_info #info .txt{
    order: 2;
    width: 100%;
    margin: 0 0 70px;
    text-align: center;
    font-size: 18px;
}
#salons_info #info .txt .other{
	display: block;
    margin-top: 15px;
    color: #ff0000;
    font-weight: bold;
}
/***店舗情報***/
#salons_info #info .box{
    order: 3;
    width: 100%;
    min-height: 530px;
    margin: 0 0 70px;
    padding: 0 0 76px;
    position: relative;
}
/*見出し*/
#salons_info #info .box h2{
    width: auto;
    height: auto;
    background: none;
}
#salons_info #info .box h2 span{
    padding: 0 0 10px;
    border-bottom: 6px solid #1295e0;
    font-size: 32px;
    line-height: 1;
    color: #222;
    display: inline-block;
}
/*グーグルマップ埋め込み*/
#salons_info #info .box .map{
    width: 511px;
    height: 365px;
    padding: 3px;
    background: #fff;
    border: 1px solid #a4903e;
    position: absolute;
    top: 100px;
    left: 0;
}
#salons_info #info .box .map iframe{
    width: 100%;
    height: 100%;
}
/*情報*/
#salons_info #info .box .access{
    padding: 0 0 0 580px;
    display: flex;
	flex-wrap: wrap;
}
#salons_info #info .box .access dt{
    width: 120px;
    margin: 0 0 15px;
    font-weight: bold;
}
#salons_info #info .box .access dd{
    width: 320px;
    margin: 0 0 15px;
    letter-spacing: 0;
}
#salons_info #info .box .access .tel + dd a{
    display:inline-block;
	pointer-events:none;
}
#salons_info #info .box .other_att{
	padding: 0 0 0 580px;
}
/*グーグルマップで見るボタン*/
#salons_info #info .box .btn{
    width: 300px;
    height: 47px;
    position: absolute;
    top: 485px;
    left: 105px;
}
#salons_info #info .box .btn a{
    width: 100%;
    height: 100%;
    padding: 2px 0 0;
    background: #a4903e;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    display: flex;
	justify-content: center;
	align-items: center;
    position: relative;
}
#salons_info #info .box .btn a::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: auto 0;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
}
/*LINE*/
#salons_info #info .line{
    height: 54px;
    position: absolute;
    right: 30px;
    bottom: 0;
}
#salons_info #info .line a{
    min-width: 286px;
    height: 100%;
    padding: 3px 15px 0 60px;
    background: url("../images/salons/btn_line.svg") center left 10px / 39px 39px no-repeat,#00b900;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    display: flex;
	align-items: center;
}
/*Mac,タブレット*/
@media only screen and (min-device-width:768px) {
  _::-webkit-full-page-media, _:future, :root #salons_info #info .line a{
      padding-top: 0;
  }
}
/*****道順*****/
#salons_info #info .route{
    order: 4;
    width: 100%;
}
#salons_info #info .route-details,
#salons_info #info .route-outline{
    margin: 0 0 50px;
}
/*テキスト*/
#salons_info #info .route-details p + p,
#salons_info #info .route-outline p + p{
	margin-top: 1em;
}
/***画像付き道順***/
/**プルダウンボタン**/
#salons_info #info .route-details h3{
    height: 72px;
    margin: 0 0 30px;
    padding: 0 0 0 35px;
    background: linear-gradient(#fff,#e7e5e0);
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3);
    border: 1px solid #1295e0;
    border-radius: 5px;
    font-size: 25px;
    line-height: 72px;
    position: relative;
}
#salons_info #info .route-details h3:hover{
    cursor: pointer;
}
#salons_info #info .route-details h3.active{
    margin: 0;
}
/*▼▲*/
#salons_info #info .route-details h3::before,
#salons_info #info .route-details h3::after{
    content: "";
    display: block;
    margin: auto 0;
    position: absolute;
    top: 0;
    bottom: 0;
}
#salons_info #info .route-details h3::before{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 6px 0 6px;
    border-color: #fff transparent transparent transparent;
    right: 42px;
    z-index: 10;
}
#salons_info #info .route-details h3.active::before{
    border-width: 0 6px 12px 6px;
    border-color: transparent transparent #fff transparent;
}
#salons_info #info .route-details h3::after{
    width: 36px;
    height: 36px;
    background: #0367a7;
    border-radius: 5px;
    right: 30px;
    z-index: 5;
}
/**プルダウン中身**/
#salons_info #info .route-details .info{
    width: 1018px;
    margin: -5px auto 30px;
    padding: 30px 50px 60px;
    background: #fff;
    border: 1px solid #1295e0;
    display: none;
    flex-wrap: wrap;
}
#salons_info #info .route-details h3.active + .info{
    display: flex;
}
/*道の写真*/
#salons_info #info .route-details .info p{
    width: 398px;
    height: 243px;
    margin: 0 40px 0 0;
}
#salons_info #info .route-details .info img{
    width: 398px;
}
/*テキスト*/
#salons_info #info .route-details .info p:nth-of-type(2n){
    width: 470px;
    min-height: 243px;
    margin: 0 0 130px;
    padding: 30px 0 0;
    font-size: 18px;
    position: relative;
}
#salons_info #info .route-details .info p:last-of-type{
    margin: 0;
}
/*▽*/
#salons_info #info .route-details .info p:nth-of-type(2n)::after{
    content: "";
    display: block;
    width: 916px;
    height: 67px;
    background: url("../images/salons/salons_info_arrow.png") bottom  center / 192px 67px no-repeat;
    position: absolute;
    bottom: -95px;
    right: 0;
}
#salons_info #info .route-details .info p:last-of-type::after{
    background: none;
}
/***テキストのみ***/
/**見出し**/
#salons_info #info .route-outline h3{
    margin: 0 0 5px;
    font-size: 20px;
    font-weight: bold;
}
#salons_info #info .route-outline h3::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 15px 2px 10px;
    background: #a5903f;
    vertical-align: middle;
}
#salons_info #info .route-outline p + h3{
    margin-top: 25px;
}
/*****スタッフ紹介*****/
#salons_info #staff .info{
    width: 1020px;
    margin: 0 auto 35px;
}
#salons_info #staff .info + .info{
    margin-top: -20px;
}
#salons_info #staff .info li{
    min-height: 362px;
    padding: 35px 40px 35px 300px;
    background: #fff;
    border: 1px solid #1295e0;
    position: relative;
}
#salons_info #staff .info li + li{
    margin: 15px 0 0;
}
/**名前**/
#salons_info #staff .info li h3{
    margin: 0 0 20px;
    font-size: 24px;
}
#salons_info #staff .info .manager h3 span:first-of-type,
#salons_info #staff .info .staff h3 span:last-of-type{
    font-size:14px;
	vertical-align: middle;
}
/**テキスト**/
#salons_info #staff .info {
    font-size: 18px;
}
/**写真**/
#salons_info #staff .photo{
	width: 236px;
    height: 288px;
    position: absolute;
    top: 35px;
    left: 25px;
}
/**店長**/
#salons_info #staff .info .manager{
    background: #cae9fb;
    border: 0;
}
#salons_info #staff .info .manager h3{
    min-height: 50px;
    padding: 3px 25px 0;
    background: #fff;
    border-radius: 5px;
    line-height: 50px;
    display: inline-block;
}
/**スタッフ**/
#salons_info #staff .info .staff h3 span:first-of-type{
    margin: 0 30px 0 0;
    padding: 3px 20px 0;
    background: #007fd0;
    color: #fff;
    font-size: 22px;
    text-align: center;
    display: inline-block;
}
/**プルダウン**/
.bl_staff_pull_box{
    display: none;
}
.bl_staff_pull_box.active{
    display: block;
}
.el_staff_pull_btn{
    width: 400px;
    height: 60px;
    margin: 0 auto 70px;
    padding-top: 3px;
    background: #003e66;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.el_staff_pull_btn:hover{
    cursor: pointer;
}
.el_staff_pull_btn::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin: auto 0;
    border-style: solid;
    border-width: 8px 6px 0 6px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
}
.el_staff_pull_btn.active::after{
    border-width: 0 6px 8px 6px;
    border-color: transparent transparent #fff transparent;
}
@media screen and (max-width : 750px){
/***大見出し***/
	#salons_info h1{
	    line-height: 167px;
	}
	#salons_info.osaka-tennoji h1{
	    font-size:36px;
	}
/*****詳細*****/
	#salons_info #info {
		width: initial;
		padding: 0 30px 30px;
	}
/***店内写真***/
	#salons_info #info .box02 {
		display: block;
	}
/*ボタン*/
	#salons_info #info .box02 .btn {
		display: flex;
    	justify-content: center;
    	margin: 20px -5px 0;
	}
	#salons_info #info .box02 .btn li {
		margin: 0 5px;
	}
	#salons_info #info .box02 .btn li:nth-of-type(4){
		display: none;
	}
	#salons_info #info .box02 .btn li img {
    	width: 223px;
    	height: 131px;
		object-fit: cover;
	}
/***テキスト***/
	#salons_info #info .txt {
        margin: 0 0 50px;
		font-size: 28px;
		text-align:left;
	}
/***店舗情報***/
    #salons_info #info .box{
        order: 4;
        margin: 30px 0 50px;
        padding: 0;
    }
	#salons_info #info .box .access {
        margin: 0 0 40px;
		padding: 0;
		display: block;
	}
/*グーグルマップ埋め込み*/
	#salons_info #info .box .map {
    	width: initial;
    	position: static;
    	top: 0;
		margin: 0 0 30px;
	}
/*情報*/
	#salons_info #info .box .access dt {
    	width: initial;
	}
	#salons_info #info .box .access dd {
    	width: initial;
	}
	#salons_info #info .box .access .tel + dd a{
		pointer-events:auto;
	}
	#salons_info #info .box .other_att{
		margin-bottom: 40px;
		padding: 0;
	}
/*グーグルマップで見るボタン*/
	#salons_info #info .box .btn {
        width: 480px;
        height: 80px;
    	margin: 0 auto;
        position: relative;
        top: auto;
        left: auto;
	}
	#salons_info #info .box .btn a {
    	font-size: 28px;
	}
	#salons_info #info .box .btn a::after {
    	border-width: 8px 0 8px 12px;
	}
/*LINE*/
    #salons_info #info .line{
        order: 3;
        width: 100%;
        height: 100px;
        margin: 0 0 45px;
        text-align: center;
        position: static;
    }
    #salons_info #info .line a{
        min-width: auto;
        padding: 0 35px 0 100px;
        background: url("../images/salons/btn_line.svg") center left 15px / 70px 70px no-repeat,#00b900;
        font-size: 28px;
        text-align: left;
        line-height: 100px;
        display: inline-block;
    }
/*****道順*****/
    #salons_info #info .route{
        order: 5;
    }
/**プルダウンボタン**/
    #salons_info #info .route-details h3{
        height: auto;
        min-height: 80px;
        padding: 10px 75px 10px 20px;
        font-size: 28px;
        line-height: 1.6;
        display: flex;
        align-items: center;
    }
/**プルダウン中身**/
	#salons_info #info .route-details .info {
    	width: initial;
        padding: 30px 25px 60px;
	}
	#salons_info #info .route-details .active + .info {
        display: block;
    }
/*道の写真*/
	#salons_info #info .route-details .info p {
    	width: 100%;
    	height: auto;
    	margin: 0;
		text-align: center;
	}
/*テキスト*/
	#salons_info #info .route-details .info p:nth-of-type(2n) {
    	width: 100%;
		padding:0;
    	font-size: 25px;
		text-align: left;
		min-height: initial;
	}
/*▽*/
  #salons_info #info .route-details .info p:nth-of-type(2n)::after{
      width: 100%;
      height: 67px;
	  bottom:-85px;
  }
/***テキストのみ***/
/**見出し**/
  #salons_info #info .route-outline h3{
      font-size: 28px;
  }
/*****スタッフ紹介*****/
	#salons_info #staff .info {
		width: initial;
		padding: 0 30px;
	}
	#salons_info #staff .info li {
    	padding: 35px 40px 35px;
		display: flex;
    	flex-wrap: wrap;
	}
/**名前**/
	#salons_info #staff .info li h3 {
		order: 2;
		margin: 0 auto 20px;
		font-size: 28px;
	}
	#salons_info #staff .info .manager h3 span:first-of-type,
	#salons_info #staff .info .staff h3 span:last-of-type{
	    font-size:20px;
	}
	#salons_info #staff .info .staff h3 span:first-of-type{
		padding: 5px 15px;
		vertical-align: middle;
	}
/**テキスト**/
	#salons_info #staff .info li h3 + p {
		order: 3;
		margin: 0 0 20px;
		font-size: 26px;
	}
/**写真**/
	#salons_info #staff .photo {
		width: 360px;
		height: 439px;
		position: initial;
		order: 1;
		margin: 0 auto 25px;
	}
/**プルダウン**/
    .el_staff_pull_btn{
        width: 690px;
        height: 100px;
        padding-top: 0;
        font-size: 32px;
    }
    .el_staff_pull_btn::after{
        border-width: 12px 10px 0 10px;
		right: 30px;
    }
    .el_staff_pull_btn.active::after{
        border-width: 0 10px 12px 10px;
    }
}


/**Mac,iPad Safari**/
@media only screen and (min-device-width:768px){
    _::-webkit-full-page-media, _:future, :root #salons_info #staff .info .staff h3 span:first-of-type{
		padding-top: 0;
	}
}