@charset "utf-8";
/* 
00 404.html
00 index.html
------------------------
------------------------
01 about系（about.html / terms.html / privacy.html）
02 linkkit.html
03 inquiry/
04 symptom/
05 consult/
06 entry/
07 search/
08 list/

--------------------------------------------
--------------------------------------------
30 s/xxxx (基本掲載) -> s/temp/temp_basic.html

/* 横向きの場合のスタイル
-------------------------------------------------------------------------------- */
.forpc{display: none;}
/* @media screen and (orientation: landscape) {}
@media screen and (min-width: 560px) {}
*/

/* -- PCview用
-------------------------------------------------------------------------------- */
@media screen and (min-width: 960px) {
	*{word-break: break-word;}
	.forpc{display: block;}
	.forsp{display: none;}

/* 00 404.html
------------------------------------------------- */
/* 00 index.html
-------------------------------------------------------------*/
	#index{
		width: 1000px;
		padding: 15px 0;
		display: -webkit-flex;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		opacity: 0;
		transition: opacity 0.5s ease;
	}
	#index.visible{opacity: 1;} 
	#index .breadcrumb{flex: 0 0 100%;}
	#index #mClm{flex: 0 0 750px; width: 750px;}
	#index #lClm{flex: 0 0 220px; display: block;}

	#indMain{
		min-height: auto;
		padding: 0;
	}
	#indinner{
		width: 750px;
		height: 300px;
		padding: 50px 15px 25px;
		background-image: url(../img/ind/main_img_pc.jpg);
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	#wrapper section #indinner h2{
		padding: 0 0 0 30px;
		flex: 0 0 75px;
	}
	#indinner h2 img{
		width: 75px;
		height: auto;
	}
	#indinner form{flex: 0 0 340px;}

	/* banner ----------------------------------- */
	#ind_bb_func{
		height: 36px;
		margin: 0 150px;
	}
	.swp_func li{
		width: 2.4em;
		height: 2.4em;
	}
	.swp_prev::before,
	.swp_next::before{margin-top: -6px;}
	.swp_prev::before{
		border-width: 2px 0 0 2px;
		left: 24px;
	}
	.swp_next::before{
		border-width: 0 2px 2px 0;
		right: 24px;
	}
	#ind_pickup{margin: 20px 0 30px;}
	#ind_tb{display: none;}

	/* 気になる症状 ----------------------------------- */
	#symptoms{
		margin: 30px 0;
		border-radius: 8px;
		border: none;
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 50px;
	}

	#symptoms h2{
		flex: 0 0 200px;
		gap: 10px;
	}
	
	#symptoms h2::before{
		width: 50px;
		height: 50px;
	}
	#symptoms ul{
		padding: 15px 20px;
		gap: 10px;
	}

	/* 新着掲載店情報 ----------------------------------- */
	#nslwrap{
		padding: 0 8px;
		background: none;
	}
	#ind_newshoplist{
		padding: 3px 0;
		position: relative;
		overflow: hidden;
	}
	.swpFunc {
		padding: 0 5px;
		width: 100%;
		z-index: 100;
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		position: absolute;
		top: calc(50% - 10px);
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.swpFunc li {
		width: 24px;
		height: 24px;
		cursor: pointer;
		display: block;
		z-index: 999;
		background: rgba(148, 148, 148, .75);
		border-radius: 20px;
		text-indent: -9999px;
		position: relative;
	}
	.swpFunc li::before{
		content: '';
		width: 8px;
		height: 8px;
		margin-top: -5px;
		border-style: solid;
		border-color: #fff;
		display: block;
		position: absolute;
		top: 50%;
	}
	.swpFunc li.swpPrev::before{
		border-width: 1px 0 0 1px;
		transform: rotate(-45deg);
		left: 7px;
	}
	.swpFunc li.swpNext::before{
		border-width: 0 1px 1px 0;
		transform: rotate(-45deg);
		right: 7px;
	}
	.swpFunc li::after{
		content: '';
		width: 11px;
		height: 1px;
		margin-top: -1px;
		background: #fff;
		display: block;
		position: absolute;
		top: 50%;
	}
	.swpFunc li.swpPrev::after{left: 7px;}
	.swpFunc li.swpNext::after{right: 7px;}

	#ind_recommend{padding: 25px 8px;}
	#ind_recommend ul li{margin: 10px 0;}



	/* スタッフからのメッセージ ----------------------------------- */
	#ind_message{
		padding: 5px 20px 10px;
		border-radius: 8px;
	}
	#ind_message ul li a{padding: 20px 25px 20px 20px;}

	/* 口コミありのお店 ----------------------------------- */
	#revAvailable{
		margin: 15px 0;
		border: none;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 5px;
	}
	#revAvailable li{
		border: 1px solid #d1ccda !important;
		border-radius: 8px;
		padding: 12px 8px;
	}
	#revAvailable li dl dd{padding: 3px 0;}
	#revAvailable li dl dd div{
		padding: 0 0 5px;
		flex-flow: column;
		align-items: flex-start;
		border-bottom: 1px dashed #d1ccda;
	}
	#revAvailable li dl dd p{padding: 5px 0;}
	#revwrap .more{display: none;}

	/* 最新情報 ----------------------------------- */
	#newInfo{
		margin: 10px 0;
		padding: 15px 20px;
		border-radius: 8px;
	}

	/* NEWOPEN ----------------------------------- */
	/*#newOpen{padding: 25px 8px;}*/
	#newOpen ul{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 4fr;
		grid-column-gap: 5px;
	}
	#newOpen ul li{display: block;}
	#newOpen ul li::before{display: none;}
	#newOpen ul li dl{
		height: 100%;
		padding: 10px 25px 10px 0;
		display: -webkit-flex;
		display: flex;
		flex-flow: column;
		justify-content: space-around;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#newOpen ul li dl dt{
		min-height: 2.6em;
		line-height: 1.3em;
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		gap: 5px;
	}
	#newOpen ul li dl dt::before{
		width: 32px;
		height: 24px;
		content: '';
		background-image: url(../img/icon/icn_newopen.png);
		background-position: 0 0;
		background-size: contain;
		display: block;
		flex:0 0 32px;
	}
	#newOpen ul li dl dd{
		flex-flow: column;
		align-items: flex-start;
	}

	#ind_pickup h2.hd,
	#nslwrap h2.hd,
	#ind_recommend h2.hd,
	#revwrap h2.hd,
	#newOpen h2.hd{padding: 0 12px;}

	/* 最近見た店舗 ----------------------------------- */
	#histarget{
		width: 750px;
		padding: 15px 20px;
		margin: 0 auto 30px;
		border: none;
		border-radius: 8px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#history .shopname{margin-bottom: 3px;}
	#history .flx{
		flex-flow: column;
		align-items: flex-start;
	}

	/* おすすめコンテンツ ----------------------------------- */
	#useful h2.hd{text-align: center;}
	#useful ul li{border-bottom: none;}
	#useful ul li a{padding: 15px 0;}


	/* lClm (subカラム) ----------------------------------- */
	#tpblist > p{
		margin-top: 20px;
		font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
		display: block;
		color: #bda77a;
		font-weight: normal;
		font-size: .72rem;
	}
	#tpblist li{
		padding: 5px 0;
		border-bottom: 1px dashed #bbb;
	}
	#tpblist li a dl{padding: 5px 0;}
	#tpblist li a dl dt{
		margin-bottom: 5px;
		font-weight: bold;
		font-size: .86rem;
	}
	#tpblist li a dl dd{
		line-height: 1.2;
		font-size: .72rem;
	}

	#tpb_wanted{
		padding: 20px 0;
		margin: 15px 0;
		background: #f9ede9;
		border-radius: 8px;
		text-align: center;
		font-weight: bold;
		font-size: .86rem;
	}

/* 01 about系（about.html / terms.html / privacy.html）
-------------------------------------------------------------*/
	#aboutlist{width: 350px; margin: 0 auto;}
	#aboutlist li{margin: 10px 0;}

/* 02 linkkit.html
------------------------------------------------- */
	.cbox{
		width: 550px;
		padding: 15px 0;
		margin: 0 auto;
	}

/* 03 inquiry/
------------------------------------------------- */
	#setting{width: 520px; margin: 0 auto;}

/* 04 symptom/
------------------------------------------------- */
	#symptom_list{
		padding: 20px 50px;
		gap: 10px;
	}
	.example{width: 400px; margin: 0 auto;}
	.example dd{padding: 10px 30px;}

/* 05 consult/
------------------------------------------------- */
	#consulttab{
		padding: 10px;
		display: flex;
		flex-flow: row nowrap;
		gap: 6px 0;
	}
	#consulttab li{flex: 1 1 auto;}
	#consulttab li:nth-child(3n+1) a{border-left: none;}
	#histab,
	#cnsltab{
		padding: 0 160px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#cnsllist{
		padding: 20px 40px;
		margin: 20px 0;
	}
	.cnslcard,
	.cnslanswer{padding: 10px 35px;}

	#cnslhead{padding: 20px 40px;	}
	.cnslanswer .card_body dt{margin: 0;}
	.cnslanswer .card_body .btn{margin: 5px 0;}
	.cnslanswer .card_body .btn a{
		width: 160px;
		padding: 5px;
		border-radius: 5px;
		font-size: .86rem;
	}

	#cnslform .flx{gap: 0;}
	#cnslform .flx dl{flex: 0 0 auto;}

	#answer{padding: 20px 45px;}

/* 06 entry/
------------------------------------------------- */
	.entryinner{margin-bottom: 30px;}

/* entry/xxxx -------------------------------------- */
	#flow{
		width: 520px;
		padding: 25px 40px;
		margin: 0 auto;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#flow ol{
		width: 290px;
		margin: 15px auto;
	}

/* 07 search/
------------------------------------------------- */
	#results{
		width: 1000px;
		padding-top: 25px;
		display: -webkit-flex;
		display: flex;
		flex-flow: row-reverse wrap;
		justify-content: space-between;
	}
	#results .breadcrumb{flex: 0 0 100%;}
	#results #mClm{flex: 0 0 750px; width: 750px;}
	#results #lClm{flex: 0 0 220px; display: block;}
	#results #innerhis{
		width: 750px;
		padding: 15px 20px;
		margin: 20px 0;
		background: #eeece9;
		border-radius: 8px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	#searchhead{
		width: 600px;
		margin: 0 auto;
	}
	ul#condTB li dl dt{padding: 10px;}
	ul#condTB li dl dd{padding: 10px;}
	ul#condTB li dl dd div,
	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	ul#condTB li dl dd p a{padding: 2px 10px;}

	/* banner表示
	---------------------------------------*/
	#pickup_salon{
		padding: 15px 0;
		margin: 15px 0;
		border-width: 1px 0;
		border-style: dashed;
		border-color: #bbb;
	}
	#bbanner dl{
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		gap: 10px;
	}
	#bbanner dl dt{flex:0 0 345px;}
	#bbanner dd p{text-align: left;}

	#tbanner{display: none;}
	#shopList{border: none;}

/* 検索一覧 shopcard (有料)
---------------------------------------*/
	.card,
	.freecard{border: 1px solid #949494;}
	.recommendShop{
		padding: 10px 30px;
		border: none;
	}
	.pLayout {
		margin: 10px 0;
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		gap: 15px;
	}
	.pleft{flex: 0 0 300px;}
	.pright{flex: 1;}
	.cardinfo{padding: 15px 30px;}

	.recFunc ul{
		width: auto;
		justify-content: center;
		gap: 8px;
	}
	.recFunc ul li{flex:0 0 120px;}
	.recFunc ul li a{
		padding: 10px 5px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}
	.recFunc ul li.rfDet{flex:0 0 190px;}

	/* 有料登録が無い場合
	---------------------------------------*/
	#invitationInner{padding: 10px 30px;}
	#invitationInner dl{
		margin: 15px 0;
		gap: 10px;
	}
	#invitationInner dl dt{
		padding: 0 10px;
		font-size: 1rem;
	}
	#invitationInner dl dd{line-height: 1.6;}

	#neighbourInner{padding: 10px 30px;}
	#neighbourInner dl{
		margin: 15px 0;
		gap: 10px;
	}
	#neighbourInner dl dt{
		padding: 0 10px;
		font-size: 1rem;
	}
	#neighbourInner dl dd{line-height: 1.6;}
	#nhood_wrap{margin: 0;}

/* 08 list/
------------------------------------------------- */
	#favlist{
		padding: 25px 45px;
		margin: 0;
	}
	#fav_hd{font-weight: bold;}
	.fav_card{
		padding: 15px 20px;
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
	}
	.favfunc{
		flex-flow: column;
		gap: 4px;
	}
	.favinner{flex: 1;}
	.favinner {flex-flow: row nowrap;}
	.favinfo {
		display: flex;
		flex-flow: column nowrap;
	}
	.favinfo > .fav_catch {
		flex: 0 0 auto;
	}
	.favinner > p{flex: 0 0 200px;}
	.favinner dl dt{font-weight: bold;}
	.favinner dl dd{
		display: -webkit-flex;
		display: flex;
		flex-flow: row nowrap;
		gap: 5px;
	}
	.favfunc{
		padding: 8px 0;
		margin: 0;
		border-top: none;
		flex: 0 0 160px;
	}
	#trending{padding: 25px 45px;}
	#trending .favinner > p{flex: 0 0 150px;}
	#trending .fav_card {padding: 0;}
	#trending .fav_card a{padding: 15px 20px;}
	#trending h3{
		margin-bottom: 20px;
		font-size: 1.15rem;
		font-weight: normal;
		text-align: center;
	}
	#trending .more{margin: 20px 0 0;}
	#trending .more a{
		max-width: 320px;
		margin: 0 auto;
	}

/* 30 s/xxxx (基本掲載) -> s/temp/temp_basic.html
------------------------------------------------- */
	#shopdetail{padding-top: 25px;}
	#detinner{
		width: 750px;
		margin: 0 auto;
	}
	#hdinfo{padding: 15px 25px;}
	.c_set{margin-bottom: 15px;}

	#flm-wrapper {
		width: 70px;
		height: calc(100% - 25px);
		position: absolute;
		top: 25px;
		right: 50px;
		display: block;
	}
	#flm {
		position: sticky !important;
		top: 80px;
		right: 0;
		width: 70px;
		margin: 0;
		border-radius: 8px;
		background: #ef8e92;
	}
	#detfunc{flex-flow: row wrap;}
	.stash #flm{top:20px;}
	#flm-placeholder {display: none;}

	#detfunc{padding: 5px;}
	#detfunc li:not(:first-child){border: none;}
	#detfunc li a{
		padding: 5px 0;
		color: #424242;
		background: #fff;
	}
	#detfunc li#fltTEL a::before{background-image: url(../img/icon/flt_phone_pc.png);}
	#detfunc li#fltFORM a::before{background-image: url(../img/icon/flt_form_pc.png);}
	#detfunc li#fltMAIL a::before{background-image: url(../img/icon/flt_mail_pc.png);}


	/* 当店のイチオシポイント ---------------------------------------*/
	#thumbsbox{
		padding: 15px 0;
		margin: 20px 0;
	}
	#thumbs .swiper-wrapper{
		flex-flow: row nowrap;
		gap :5px;
	}
	.thumb.swiper-slide{flex:1 1 32%;}

	/* 切替tab ---------------------------------------*/
	#contTabs ul{padding: 0 30px;}

	/* 詳細コンテンツ共通 ---------------------------------------*/
	.c_set .c_cont{padding: 15px 45px;}

	/* 店舗紹介文 ---------------------*/
	/* 設備・対応内容 ---------------------*/
	/* 施術情報 ---------------------*/
	/* スタッフ ---------------------*/
	#stfWrap{gap: 10px;}
	#stfWrap #stfinfo{
		display: flex;
		flex-flow: column;
		flex: 1;
		gap: 10px;
	}
	#stfWrap #stfinfo ul{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
		column-gap: 30px;
	}
	.c_cont .linkbtn{
		max-width: 320px;
		margin: 20px auto;
	}
	/* お問合せ ---------------------*/
	/* 応募・相談フォーム ---------------------*/
	#inqformBox{padding: 20px 45px;}

	/* このページをシェア ---------------------*/
	/* フローティング要素（TEL/MAIL/検討中リスト）---------------------------------------*/
	.stash #flm{top:20px;}
	/* クチコミ ---------------------------------------*/
	#reviewlist{padding: 20px 45px;}
	#reviewlist ol li{padding: 10px 35px;}
	#reportlist{padding: 0 45px 25px;}
	#advicelist{padding: 20px 45px;}

}

@media screen and (min-width: 768px) {
	.gl_compare {
		display: flex;
	}
	.gl_compare_box + .gl_compare_box {
		margin-top: 0;
	}
}