@charset "utf-8";

/*--ヘッダー--*/

.header {
	padding: 20px 15px;
	transition: all .3s;
}

.hIn {
	max-width: 1786px !important;
    padding: 0 6px;
}

.hLogo01 {
	display: block;
}

.hLogo02 {
	display: none;
}

.hR {
	display: none;
}

.hNavLink {
  	font-size: 12px;
	color: #fff;
}

.hNavLink:hover {
	color: #fff;
    text-decoration: underline;
}

.hTelNumBox {
    font-size: 18px;
    letter-spacing: 0.03em;
}

.hTelNumBox p , .hTelNumBox a {
	color: #fff;
}

/*--追従ヘッダー--*/

.header.is-active {
  	top: 0;
	padding: 15px;
    background: #fff;
	box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.08);
    z-index: 999;
    transition: all .3s;
}

.is-active .hIn {
	max-width: 1817px !important;
    padding: 0;
	align-items: center;
}

.is-active .hLogo01 {
	display: none;
}

.is-active .hLogo02 {
	display: block;
}

.is-active .hNavLink {
	color: #514E43;
}

.is-active .hNavLink:hover {
	color: #514E43;
    text-decoration: underline;
}

.is-active .hTelNumBox p , .is-active .hTelNumBox a  {
	color: #514E43;
}

/*--ECボタン--*/

.hEcLink {
    writing-mode: vertical-rl;
}

/*--フッター--*/

.footer:after {
	content: "";
    position: absolute;
    width: 100%;
    height: 320px;
    top: auto;
    left: 0;
    bottom: 0;
    margin: auto;
	background: rgb(253,247,226);
	background: linear-gradient(180deg, rgba(253,247,226,0) 0%, rgba(194,173,117,1) 100%);
}

.fBtnBlock {
	display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

.instagramBtn .iconImgHvr {
    height: auto;
}

.fNavLink:hover p {
    text-decoration: underline;
}

.fNavLink {
	font-size: 14px;  
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 768px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
.header {
	padding: 30px 15px 5px;
}
  
.hR {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    justify-content: flex-end;
} 
  
.hNav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
	margin: 20px 0 0;
}
  
.hNavLink {
    font-size: 11px;
    margin: 0 10px 0 0;
    color: #fff;
}
  
.hNavLink:last-child {
    margin: 0;
}
  
.hOther {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
  
.hTelBox {
    display: flex;
    max-width: 295px;
    align-items: center;
    position: relative;
    justify-content: flex-end;
    margin: 0 20px 0 0;
}
  
.hSnsBlock {
	margin: 0;  
}
/*-- フッター --*/

.fBtnBlock {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}  
  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 768px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 1024px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
.hR {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

 
.fBtnBlock {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}    

.fNavLink {
	font-size: 16px; 
    margin: 0 16px 0 0;
}
  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1024px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 1200px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
.hR {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: row;
}
  
.hNav {
	margin: 10px 0 0;  
}
  
.hNavLink {
    font-size: 13px;
    margin: 0 12px 0 0;
}
  
.hNavLink:last-child {
	margin: 0 12px 0 0;
}
  
.hOther {
	max-width: 265px;
  	width: 100%;
    flex-direction: column;
	align-items: flex-end;
}
  
.hTelBox {
	max-width: 247px !important;
	width: 100%;
	margin: 0 0 0 auto;  
}
  
.hTelBox:before {
	content: "";
    position: absolute;
    width: 1px;
    height: 45px;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
	background: #fff;
}
  
.hTelNumBox {
    font-size: 24px;
    letter-spacing: 0.03em;
}
  
.hSnsBlock {
	margin: 17px 0 0;  
}
  
.is-active .hTelBox:before {
	background: #7A7666;
}
 
.fBtnBlock {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}    

.fNavLink {
	font-size: 16px; 
    margin: 0 16px 0 0;
}
  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1200px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 1440px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
.header {
	padding: 40px 15px 5px;
}
  
.hNavLink {
  	font-size: 16px;
	margin: 0 20px 0 0;
}
  
.hNavLink:last-child {
	margin: 0 20px 0 0;
}
  
.hTelNumBox {
    font-size: 28px;
    letter-spacing: 0.03em;
}
  
.is-active .hNavLink  {
    font-size: 16px;
}
  
/*-- フッター --*/
  
.fNavLink {
	font-size: 18px;  
}
  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1440px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 1580px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
.header {
	padding: 60px 15px 5px;
}
  
.hLogo {
	margin: 0 0 0 10px;  
}
  
.hOther {
	max-width: 295px;
  	width: 100%;
}  
  
.hTelBox {
    max-width: 282px !important;
    margin: 0 0 0 auto;
}
  
.hTelNumBox {
    font-size: 30px;
}
  
.hNavLink {
  	font-size: 17px;
	margin: 0 24px 0 0;
}
  
.hSnsBlock {
	margin: 17px 0 0;  
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1580px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 1760px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
.hNavLink {
  	font-size: 18px;
	margin: 0 40px 0 0;
}
  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1760px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */