/* reset */
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align:baseline;
  box-sizing: border-box;
}
article, header, footer, aside, figure, figcaption, nav, section ,main{ 
  display:block;
	box-sizing: border-box;
}
html{
	overflow-y: auto;
  font-size: 100%;
}
body {
  line-height: 1.5;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
	color:#231815;
  font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	overflow: hidden;
	font-size:16px;
}
ol, ul {
  list-style: none;
  list-style-type: none;
}
h1,h2,h3,h4,h5,h6{
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 500;
  font-size:100%;
	line-height:1.3;
	text-transform: uppercase;
}
p{
	line-height:1.7;
}
a{
	color:#231815;
  text-decoration:none;
  transition:0.25s ease;
}
a:hover{
	text-decoration: underline;
}

img{
  vertical-align:middle;
  border:0;
  max-width:100%;
  height: auto;
}
a:hover img{
  opacity:0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha( opacity=80 )";
}
address{
	font-style: normal;
}

/* ====================================================

  PC大画面　1281px以上

==================================================== */

/* ----------------------------------------------------
  ヘッダー　1281px以上
----------------------------------------------------- */
header{
  width:100%;
  left:0;
  top:0;
  height:150px;
  z-index:500;
  background:#fff;
  position:fixed;
	text-align: center;
}
header h1 {
	font-size:11px;
	line-height:25px;
	font-weight:400;
}
header h1 img{
	display: block;
	margin:auto;
}
header h1 a{
  display: inline-block;
}
header h1 a:hover{
  text-decoration: none;
}
header nav{
	width:100%;
	max-width: 1100px;
	margin:0.8em auto 0;
}
header nav a:hover{
	text-decoration: none;
}
header nav li{
	font-size:15px;
	float:left;
	border-left:1px solid #555;
	padding:0.2em 0;
	width:calc(100% / 6);
	margin:0.25em 0;
	font-family: 'M PLUS 1p', sans-serif;
}
header nav li:last-child{
	border-right:1px solid #555;
}

header nav li a{
	display: block;
}
header nav li:hover{
	background:#F2E9E3;
}

/* ----------------------------------------------------
  MAIN　1281px以上
---------------------------------------------------- */
main{
	padding:150px 0 0;
}
main > section{
	margin-top:-150px;
	padding-top:150px;
	padding-bottom:215px;
}




/*
 セールのお知らせ（HOME）
----------------------------------------------------------- */
#sale{
  margin-bottom:10px;
}
#sale h2{
  font-weight: bold;
  text-align: center;
  background: none;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: .05em;
  border-bottom: none;

}
/* usami */
#main #sale h2{
  color:#424242;
  font-family: Verdana, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 1.35em;
}
/* chercher */
main #sale h2{
  font-size: clamp(15px,1.7vw,22px);
  min-height:0vw;/*safari*/
}

#sale h2 .name{
  color: #ea101f;
}
#sale h2 .period{
  font-size:.7em;
  font-weight: normal;
  letter-spacing: .1em;
}
#sale .flyer{
  margin:5px auto;
  max-width: 28em;
}
#sale .flyer a{
  display: block;
  position: relative;
}
#sale .flyer a::after {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f002";
  right: 0;
  bottom: 0;
  font-weight: 900;
  display: inline-block;
  background: rgba(255,255,255,.8);
  padding: .5em;
  line-height: 1;
}
#sale .flyer a:hover::after{
  background: rgba(255,255,255,.95);
}
#sale .flyer img{
  max-width: 100%;
  height: auto;
}

/* chercher通信 */

#news .flyer{
  width: min(90%,30rem);
  margin:0 auto 10px; 
}

/* ----------------------------------------------------
  メインビジュアル・ABOUT・お問い合せ　1281px以上
---------------------------------------------------- */
img#visual{
	width:100%;
	max-width: 1920px;
	display: block;
}
#about p{
	text-align: center;
	font-size:17px;
	margin-top:1em;
}


/* お問い合せ */
.contact{
	font-family: 'M PLUS 1p', sans-serif;
	border-top:2px solid #604C3F;
	border-bottom:2px solid #604C3F;
	width:90%;
	max-width:32em;
	margin:1.5em auto 0.5em;
	padding:0.75em 0;
	text-align: center
}
.contact dt{
	font-weight: 700;
	font-size:26px;
	font-size:1.625rem;
	margin-bottom:15px;
}
.contact dd a{
	font-weight: 800;
	font-size:2.25em;
  line-height: 1.3;
  white-space: nowrap;
}
.contact i{
	margin-right:0.5em;
	font-size:0.8em
}

/* ----------------------------------------------------
  リンクエリア　1281px以上
---------------------------------------------------- */
#info{
	background: #f2e9e3;
	text-align: center;
	padding: 1.5rem 5%;
}
#info .info-text{
	color: #EA5550;
	font-weight: 500;
	font-size: 1.2em;
}
#info .info-btn{
	background:#5F4C3F;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	padding:.1em 2em .1em .75em;
	border-radius: .5rem;
	margin:.5em auto;
	position: relative;
	display: flex;
	align-items: center;
	max-width: 15em;
}

#info .info-btn::after{
	font-family: "Font Awesome 5 Free";
	content: "\f054"; 
	font-weight: 900;
	position: absolute;
	right: .5em;
	font-size: .9em;
}

/* ----------------------------------------------------
  カフェ・レンタルサロン・アクセス共通　1281px以上
---------------------------------------------------- */
#cafe-day h2,
#rental-salon h2,
#guide h2,
#access h2{
	position: relative;
	display: inline-block;
	margin:0 auto 1em ;
	font-size:32px;
	font-size:2rem;
}
#cafe-day h2:after,
#rental-salon h2:after,
#guide h2:after,
#access h2:after{
	content: '';
	position: absolute;
	bottom: -15px;
	display: inline-block;
	width: 60px;
	height: 5px;
	left: 50%;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #604C3F;
	border-radius: 2px;
}

.mainText p{
	margin-top:1em;
  font-size:17px;
}



/* ----------------------------------------------------
  カフェ　1281px以上
---------------------------------------------------- */
#cafe-day{
	background: #f2e9e3;
}

/* 雑貨 */
#cafe-day #zakka{
	padding:2em;
}


/* ----------------------------------------------------
  レンタルサロン　1281px以上
----------------------------------------------------- */

/* ドリンクメニュー */
#rental-salon #drink{
	padding:2em;
	background: #f2e9e3;
	margin:20px auto 30px;
}

/* 料金 */
#rental-salon #price{
	margin:50px auto;
}
#rental-salon #price dl{
	width:100%;
	max-width: 1000px;
	margin:10px auto;
}
#rental-salon #price dt{
	font-weight:500;
}
#rental-salon #price dt:before{
	content:"■ "
}
#rental-salon #price dd{
	margin-left:1.25em;
}
#rental-salon #price dd li:before{
	content:"・ "；
}

/* ご利用例 */
#rental-salon #case{
	margin:60px auto;
}
#rental-salon #case .case-container{
	display: grid;
	grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
	gap:3.5rem min(5%,3rem);
	padding-top: 1.5rem;
}
#rental-salon #case section p{
	text-align: justify;
}
#rental-salon #case section h4{
	color:#604C3F;
	font-size:17px;
	text-align: center;
  border-bottom:1px solid #604C3F;
	padding:0.25em 0 0.5em;
  margin:0.5em auto;
}
#rental-salon #case section img{
  display: block;
	width:100%;
	max-width:350px;
  border-radius: 5px;
	margin:auto;
}


/* ----------------------------------------------------
  ご利用ガイド　1281px以上
----------------------------------------------------- */
#guide{
	background:#fce7ea;
	text-align: center;
}
#guide > div{
	width:100%;
	max-width: 1400px;
	margin:auto;
}
#guide li{
	width:23%;
	margin:1em 1%;
	float:left;
}

/* ----------------------------------------------------
  リフォームアトリエ（家具の再生工房）　1281px以上
---------------------------------------------------- */
#reform-atelier{
	background: #eee url(../img/reform-atelier/bg_marble.jpg);
	text-align: center;
}
#reform-atelier h2{
	margin:0 auto 2em;
	width:96%;
	max-width: 450px;
	padding-top:5px;
}
#reform-atelier p.text01,
#reform-atelier p.text02{
	width:100%;
	margin:35px auto;
	max-width: 500px;
}
#reform-atelier p.text01{
	max-width: 500px;
}
#reform-atelier p.text02{
	max-width: 600px;
}
#reform-atelier #reform-ba{
	margin:30px auto;
	width:100%;
	max-width: 600px;
}
#reform-atelier #reform-price{
	width:100%;
	max-width: 650px;
	margin:30px auto;
}

/* ----------------------------------------------------
  アクセス　1281px以上
----------------------------------------------------- */
#access{
	background: #dcc198;
	text-align: center;
	padding-bottom:50px;
}
#access #map{
	width:94%;
	margin:auto;
	max-width: 1100px;
	padding:20px 0 0;
	margin-bottom:0
}
#access #map iframe{
	width:100%;
	border: none;
	height:450px;
}
/* ----------------------------------------------------
  フッター　1281px以上
----------------------------------------------------- */
footer{
	background: #604c3f;
	color:#fff;
	text-align: center;
	padding:40px 0 0;
}
footer a{
	color:#fff;
}
footer a:hover{
	text-decoration: none;
	opacity: 0.8;
}
footer dt img{
	padding:0 0.2em;
}
footer dl{
	text-align:center;
	margin:0 auto 2em;
	width:96%;
}
footer address dt{
	font-size:20px;
	display: block;
	margin-bottom:0.75em;
}
footer address dd ul{
	text-align: center;
	margin:auto;
}
footer address dd li{
	display: inline-block;
	margin:0 0.5em;
	font-size: 20px;
  padding:0.2em 0;
}
footer address li.tel{
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 500;
	font-size:24px;
}
footer address dd i{
	margin-right:0.25em;
}
footer address li.holiday{
  display: block;
  font-size:16px;
}
footer dl#usami {
	max-width: 24.5em;
	font-weight: 300;
}

footer dl#usami dd.link{
	float:none;
	display:inline-block;
	padding-top:0.75em;
}
footer dl#usami dd.link a{
	border:1px solid #fff;
	padding:0.1em 0.75em;
	border-radius: 3px;
}
footer dl#usami dd.link a:hover{
	text-decoration: none;
	background: #fff;
	color:#604c3f;
}
footer #pagetop a{
	background: #f2e9e3;
	display: block;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 700;
	color:#604c3f;
	font-size:15px;
	padding:0.5em 0;
}
footer #pagetop a i{
	display: block;
}
footer #copylight{
	background: #fff;
	color:#604c3f;
	font-size:15px;
	line-height:2;
	font-weight: 300;
}

/* ----------------------------------------------------
  他　1281px以上
---------------------------------------------------- */
/* フォント */
.mplus{font-family: 'M PLUS 1p', sans-serif}
.noto{ font-family: "Noto Sans JP", sans-serif;}
.f14{font-size:14px}
.f15{font-size:15px!important}
.f16{font-size:16px!important}
.f17{font-size:17px}
.f18{font-size:18px}
.f20{font-size:20px}
.f22{font-size:22px}
.fw500{font-weight: 500}

/* 前景 */
.red{color: #EA5550}

/* 背景 */
.bgWhite{background:#fff}


/* 配置 */
.center{text-align: center!important}
.fLeft{float:left}
.fRight{float:right}


/* ボックス */
.inner600,
.inner800{
	width:92%;
	margin:auto;
}
.inner600{
	max-width: 600px;
}
.inner800{
	max-width: 800px;
}
.inner1100{
  width:100%;
	max-width: 1100px;
  margin:auto;
}
.w45per{width:45%}
.max350{max-width: 300px;}


/* img */
.imgL01,
.imgR01,
.imgR02{
  display: block;
  width:45%;
  float:left;
  border-radius: 5px;
}
.imgL01{
  float:left;
  margin:auto 5% auto auto;
}
.imgR01,
.imgR02{
  float:right;
  margin:auto auto auto 5%;
}

/* round */
.round5{
	border-radius:5px;
}

/* 余白 */
.mt1em{margin-top:1em}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mb1em{margin-bottom:1em}
.mb40{margin-bottom:40px}
.mb60{margin-bottom:60px}
.mtb50{margin-top:50px;margin-bottom:50px}
.mtb60{margin-top:60px;margin-bottom:60px}
.mr5per{margin-right:5%}
.ml5per{margin-left:5%}

/* 回り込み */
.cf:after{
	content:"";
	display: block;
	clear: both}

/* table */
.table01{
  width:100%;
	max-width: 1000px;
	margin:1em auto 0.5em;
	border-collapse: collapse;
}
.table01 th,
.table01 td{
  padding:0.75em;
  line-height:1.7;
	border:1px solid #604c3f;
	vertical-align: middle;
}
.table01 th{
  background:#f2e9e3;
	font-weight:400;
	min-width: 370px;
}
.table01 td{
  margin:auto;
}

/* TELリンク */
a[href^="tel:"] {
  pointer-events: none;
}

/* 表示/非表示 */
br.sp-only{	display: none}
br.pc-only{	display: inline}

/* 文字種 */
.upper{text-transform:uppercase}


/* ====================================================

  PC小画面　1280px以下

==================================================== */

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

/* ----------------------------------------------------
  メインビジュアル　1280px以下
---------------------------------------------------- */
img#visual {
  height: 400px;
  object-fit: cover;
}



/* ----------------------------------------------------
  ご利用ガイド　1280px以下
----------------------------------------------------- */
#guide li{
	width:31.33333%;
}
#guide li:nth-child(4),
#guide li:nth-child(7){
	clear: both
}
  
/* ----------------------------------------------------
  他　1280px以下
----------------------------------------------------- */
.inner1100{
  width:92%;
}
  


}

/* ====================================================

  タブレット 960px以下

==================================================== */

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

/* ----------------------------------------------------
  ヘッダー　960以下　※ここからハンバーガーメニュー
---------------------------------------------------- */
header{
	height:90px;
	border-bottom: 1px solid #604C3F
}
header h1{
	font-size:10px;
	line-height:25px;
}
header h1 img{
	height:55px;
	width:auto;
}
header nav{
	margin:0;
}
header nav li,
header nav li:last-child{
	width:100%;
	float:none;
	border-left:none;
	border-top:1px solid #604C3F;
	margin:0;
	padding:0;
}
header nav li:last-child{
	border-right:none;
	border-bottom:1px solid #604C3F;
}
header nav li a{
	background:#F2E9E3;
	padding:1em 0 1em 1.25em;
}
header#topnav .navDrawr {
  position: fixed;
  width: 10em;
  top: 89px;
  bottom: 0;
  right: -10em;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.navDrawrBtn span{
	position: absolute;
	top: 0;
	right: 0;
	margin: auto;
	cursor: pointer;
	display: inline-block;
	width:90px;
	height:89px;
	font-size:34px;
	text-align: center;
	padding-top:0.2em;
}
.navDrawrBtn span::before,
.menuOpen .navDrawrBtn span::before{
	font-family: 'Font Awesome\ 5 Free';
	font-weight: bold;
}
.navDrawrBtn span::before {
	content: "\f0c9";/* 三ボタン */
}
.menuOpen .navDrawrBtn span::before {
	content: "\f00d";/*　×ボタン */
} 
.menuOpen .navDrawrBtn span {
	background: #F2E9E3;
} 
.navDrawrBtn span::after,
.menuOpen .navDrawrBtn span::after{
	display: block;
	font-size:13px;
} 
.navDrawrBtn span::after{
	content: "MENU";
}
.menuOpen .navDrawrBtn span::after {
 content:"CLOSE";
}
.navDrawr a {
	position: relative;
}
.navDrawr ul li a:hover{
	background:#fff;
}

/* ----------------------------------------------------
  MAIN　960以下
---------------------------------------------------- */	
main{
	padding:90px 0 0;
}	

main > section{
	margin-top:-95px;
	padding-top:95px;
	padding-bottom:140px;
}

  
/* ----------------------------------------------------
  レンタルサロン　960px以下
---------------------------------------------------- */

	
/* ----------------------------------------------------
  アクセス　960px以下
----------------------------------------------------- */
#access #map iframe{
	height:400px;
}


/* ----------------------------------------------------
  他　600px以下
----------------------------------------------------- */	
br.pc-only{	display: none}

}


/* ====================================================

  スマホ 横　600px以下

==================================================== */

@media screen and (max-width: 600px) {
a[href^="tel:"] {
  pointer-events:auto;
}
	
html{font-size:95%}

/* ----------------------------------------------------
  メインビジュアル　600以下
---------------------------------------------------- */		
img#visual {
  height: 250px;
}

/* ----------------------------------------------------
  ご利用ガイド　600以下
---------------------------------------------------- */		

#guide li{
	width:48%;
}
#guide li:nth-child(4),
#guide li:nth-child(7){
	clear: none;
}

/* ----------------------------------------------------
  アクセス　600px以下
----------------------------------------------------- */
#access #map iframe{
	height:350px;
}



}

/* ====================================================

  スマホ 縦　480px以下

==================================================== */

@media screen and (max-width: 480px) {
html{font-size:90%}
	
/* ----------------------------------------------------
  メインビジュアル　480px以下
----------------------------------------------------- */
img#visual {
  height: 200px;
}	
	
/* ----------------------------------------------------
  カフェ　480px以下
----------------------------------------------------- */
/* 雑貨 */
#cafe-day #zakka{
	padding:1.5em;
}
	
/* ----------------------------------------------------
  レンタルサロン　480px以下
----------------------------------------------------- */
/* ドリンクメニュー */
#rental-salon #drink{
	padding:1.5em;
}
	
/* ご利用例 */
#rental-salon #case section{
	width:94%;
}
#rental-salon #case section p {
	font-size:15px;
}


/* ----------------------------------------------------
  ご利用ガイド　480px以下
----------------------------------------------------- */
#guide li{
	width:96%;
	float: none;
	max-width: 320px;
	margin:2em auto;
}
  
/* ----------------------------------------------------
  お問い合せ　480px以下
---------------------------------------------------- */  
/* お問い合せ */

.contact dd a{
	font-size:1.9em;
}

	
/* ----------------------------------------------------
  フッター　480px以下
---------------------------------------------------- */
footer dt img{
	display: block;
	margin:0 auto 0.5em;
}
/* footer address dd{
	margin:1.5em auto 3em;
} */
footer address dd li{
	display: block;
	margin:0.5em auto;
}
footer dl#usami dt,
footer dl#usami dd.add{
	float:none;
	margin:0.35em auto;
}

/* ----------------------------------------------------
  他　480px以下
---------------------------------------------------- */	
/* table */	
.table01 th,
.table01 td{
	display: block;
	border-bottom:none;
	min-width:inherit;
}
.table01 td{
	border-top:none;
}
.table01 tr:last-child td{
	border-bottom:1px solid #604c3f;
}
  
/* img */
.imgL01,
.imgR01,
.imgR02{
  float:none;
  margin:1em auto;
}
.imgL01,
.imgR01{
  width: 90%;
  max-width: 290px;
}
.imgR02{
  width:100%;
  max-width: 350px;
}

/* 表示／非表示 */
br.sp-only{
	display: inline
}

}
	
/* ====================================================

  スマホ 320px以下

==================================================== */	
@media screen and (max-width: 320px) {

html{font-size:85%}
img#visual {
  height: 200px;
}
/* ----------------------------------------------------
  ヘッダー　320px以下
---------------------------------------------------- */	
header h1 img{
	width:130px;
	height:auto;
	margin-top:5px;
}
  



}