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

/*PC:body-------------------------------------*/
@media screen and (min-width:961px){
	.pc {display: block !important;}
	.tb {display: none !important;}
	.sp {display: none !important;}
	
	header {width: 96%; height: 120px; margin: 0 2% 18px; padding: 0; background: #FFFFFF; position: fixed; top: 8px; z-index: 120; border-radius: 8px; box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2); border: solid 1px #D4C9C0;
	font-family: 'Noto Serif JP', serif; color: #544a40; }
	#h1 {width: 100%; height: 24px; line-height: 24px; text-align: center; margin: 0; padding: 0; float: left; background: #352405; color: #FFFFFF; border-radius: 8px 8px 0 0;}
	#h1 h1 {width: 96%; margin: 0 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 12px; text-align: center;}
	#headerName {width: 30%; margin: 0; position: absolute; top: 30px; bottom: 0; left: 0; box-sizing: border-box; z-index: 99;}
	#headerName img {width: 225px; height: 60px; position: absolute; top: 0; bottom: 0; left: 30px; margin: auto 0;}
	
	/* nav */
	.menu-content {position: absolute; top: 26px; bottom: 0; right: 0; width: 70%; height: 90px; margin: auto 0;}
	.menu-info span {font-size: 14px; margin: 0 16px 0 0; letter-spacing: 0;}
	.menu-content ul {position: absolute; top: 0; right: 0; display: flex; width: 100%; max-width: 660px; height: 60px; line-height: 60px; padding: 0; font-size: 14px; font-weight: bold; box-sizing: border-box;}
	.menu-content ul li {flex: 1;}
	.menu-content ul li a {color: #544a40;}
	.menu-content ul li a:hover {color: #544a40; text-decoration: none;}
	
	/* bav-btn */
	.menu-btn {display: none;}
	.menu-btn-text {display: none;}
	#menu-btn-check {display: none;}
	
	/* Tel & Mail */
	.menu-info-container { display: flex; align-items: center; justify-content: flex-end; padding: 5px 20px; background: 0 0; gap: 20px; position: absolute; top: 50px; right: 34px; margin: 0; }
    .working-hours { margin: 0; font-size: 13px; border-right: 1px solid #ddd; padding-right: 20px; }
    .contact-actions { gap: 15px; width: auto; padding: 0; }
    .btn-action { flex: none; height: auto; padding: 0; background: 0 0!important; border: 0!important; color: #444!important; cursor: pointer; z-index: 99; }
    .btn-action .icon { color: #6b5ea3; }
    .btn-action:hover { color: #6b5ea3!important; opacity: .7; text-decoration: underline; }
	/* 電話番号だけクリック無効にする */
    .btn-filled { pointer-events: none; cursor: default; }
    /* お問い合わせはクリック有効にする */
    .btn-outline { pointer-events: auto; cursor: pointer; }
    .text-mobile { display: none; }
    .text-pc { display: inline; letter-spacing: 0.1em; margin: 0 0 0 16px; }

}

/*TB:body-------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 960px){
	.pc {display: none !important;}
	.tb {display: block !important;}
	.sp {display: none !important;}
	
	header {width: 96%; height: 120px; margin: 0 2%; padding: 0; overflow: hidden; box-sizing: border-box;  box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.4); position: fixed; top: 8px; z-index: 120;  background: #FFFFFF; border-radius: 8px;}
	#h1 {width: 100%; height: 30px; line-height: 30px; text-align: center; margin:0; padding: 0; float: left; background: #F8F4E8; color: #000000;}
	#h1 h1 {width: 90%; margin: 0 5%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-family: 'Noto Serif JP', serif; font-size: 12px; text-align: center;}
	#headerName {position: absolute; top: 72px; left: 0; width: 100%; max-width: 200px; height: auto; margin: 0; box-sizing: border-box; z-index: 99;}
	#headerName img {width: 225px; height: 60px; position: absolute; top: 0; bottom: 0; left: 30px; margin: auto 0;}
	
	/* nav-btn */
	.menu-btn {position: fixed; top: 46px; right: 28px; display: flex; height: 40px; width: 48px; justify-content: center; align-items: center; z-index: 120; box-sizing: border-box;}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {content: ''; display: block; height: 3px; width: 25px; border-radius: 3px; background-color: #544a40; position: absolute;}
	.menu-btn span:before {bottom: 8px;}
	.menu-btn span:after {top: 8px;}
	.menu-btn-text {position: fixed; top: 78px; right: 28px; width: 48px; height: 18px; font-size: 12px; color: #544a40; text-align: center; z-index: 110; font-weight: bold;}
	
	#menu-btn-check:checked ~ .menu-btn span {background-color: rgba(255, 255, 255, 0);}
	#menu-btn-check:checked ~ .menu-btn span::before {bottom: 0; transform: rotate(45deg);}
	#menu-btn-check:checked ~ .menu-btn span::after {top: 0; transform: rotate(-45deg);}
	
	#menu-btn-check {display: none;}
	
	/* nav */
	.menu-content {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 100; background-color: rgba(225,225,225,0.85);}
	.menu-content ul {padding: 80px 10px 0; margin: 90px 0 0;}
	.menu-content ul li {border-bottom: solid 1px #544a40; list-style: none;}
	.menu-content ul li a {display: block; width: 100%; font-size: 15px; font-weight: bold; box-sizing: border-box; color: #544a40; text-decoration: none; padding: 18px 15px 18px 0; position: relative;}
	.menu-content ul li a::before {content: ""; width: 7px; height: 7px; border-top: solid 2px #544a40; border-right: solid 2px #544a40; transform: rotate(45deg); position: absolute; right: 11px; top: 16px;}
	/* nav-close*/
	.menu-content {width: 100%; height: 100%; position: fixed; top: 0; left: 100%; z-index: 100; background-color: rgba(225,225,225,0.85); transition: all 0.3s;}
	/* nav-open */
	#menu-btn-check:checked ~ .menu-content {left: 0;}
	
	/* Tel & Mail */
	.menu-info-container { display: flex; align-items: center; justify-content: flex-end; padding: 5px 20px; background: 0 0; gap: 20px; position: absolute; top: 120px; right: 34px; margin: 0; }
    .working-hours { margin: 0; font-size: 13px; border-right: 1px solid #ddd; padding-right: 20px; }
    .contact-actions { gap: 15px; width: auto; padding: 0; }
    .btn-action { flex: none; height: auto; padding: 0; background: 0 0!important; border: 0!important; color: #444!important; cursor: default; }
    .btn-action .icon { color: #6b5ea3; }
    .btn-action:hover { color: #6b5ea3!important; opacity: .7; text-decoration: underline; }
	/* 電話番号だけクリック無効にする */
    .btn-filled { pointer-events: none; cursor: default; }
    /* お問い合わせはクリック有効にする */
    .btn-outline { pointer-events: auto; cursor: pointer; }
    .text-mobile { display: none; }
    .text-pc { display: inline; letter-spacing: 0.1em; margin: 0 0 0 16px; }
	
}

/*SP:body-------------------------------------*/
@media screen and (max-width: 767px){
	.pc {display: none !important;}
	.tb {display: none !important;}
	.sp {display: block !important;}
	
	header {width: 96%; height: 90px; margin: 0 2%; padding: 0; overflow: hidden; box-sizing: border-box; box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.2); position: fixed; top: 8px; z-index: 120;  background: #FFFFFF; border-radius: 8px;}
	#h1 {width: 100%; height: 30px; line-height: 30px; text-align: center; margin:0; padding: 0; float: left; background: #F8F4E8; color: #000000;}
	#h1 h1 {width: 90%; margin: 0 5%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-family: 'Noto Serif JP', serif; font-size: 12px; text-align: center;}
	#headerName {position: absolute; top: 34px; left: 10px; width: 100%; max-width: 200px; margin: 0; box-sizing: border-box; z-index: 99;}
	#headerName img {width: 100%; height: auto; margin: 0 auto;}
	
	/* nav-btn */
	.menu-btn {position: fixed; top: 42px; right: 14px; display: flex; height: 40px; width: 48px; justify-content: center; align-items: center; z-index: 120; box-sizing: border-box;}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {content: ''; display: block; height: 3px; width: 25px; border-radius: 3px; background-color: #544a40; position: absolute; z-index: 100;}
	.menu-btn span:before {bottom: 8px;}
	.menu-btn span:after {top: 8px}
	.menu-btn-text {position: fixed; top: 72px; right: 14px; width: 48px; height: 18px; font-size: 12px; color: #544a40; text-align: center; z-index: 110; font-weight: bold;}
	
	#menu-btn-check:checked ~ .menu-btn span {background-color: rgba(255, 255, 255, 0);}
	#menu-btn-check:checked ~ .menu-btn span::before {bottom: 0; transform: rotate(45deg);}
	#menu-btn-check:checked ~ .menu-btn span::after {top: 0; transform: rotate(-45deg);}
	
	#menu-btn-check {display: none;}
	
	/* nav */
	.menu-content {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 100; background-color: rgba(225,225,225,0.85);}
	.menu-content ul {padding: 20px 10px 0; margin: 0;}
	.menu-content ul li {border-bottom: solid 1px #544a40; list-style: none;}
	.menu-content ul li a {display: block; width: 100%; font-size: 15px; font-weight: bold; box-sizing: border-box; color: #544a40; text-decoration: none; padding: 18px 15px 18px 0; position: relative;}
	.menu-content ul li a::before {content: ""; width: 7px; height: 7px; border-top: solid 2px #544a40; border-right: solid 2px #544a40; transform: rotate(45deg); position: absolute; right: 11px; top: 16px;}
	/* nav-close*/
	.menu-content {width: 100%; height: 100%; position: fixed; top: 0; left: 100%; z-index: 100; background-color: rgba(225,225,225,0.85); transition: all 0.3s;}
	/* nav-open */
	#menu-btn-check:checked ~ .menu-content {left: 0;}
	
	/* Tel & Mail */
	.menu-info-container { padding: 15px; background: #fff; text-align: center; margin: 90px 0 0; }
	.working-hours { font-size: 14px; color: #888; margin-bottom: 12px; letter-spacing: .05em; }
	.working-hours small { font-size: 12px; }
	.contact-actions { display: flex; gap: 10px; padding: 0 10px; }
	.btn-action { flex: 1; height: 48px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 6px; transition: .3s; }
	.btn-outline { border: 1px solid #6b5ea3; color: #6b5ea3; }
	.btn-filled { background: #6b5ea3; color: #fff; }
	.icon { margin-right: 6px; font-size: 1.1em; }
	.text-pc { display: none; }
	
}