@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700&family=Noto+Serif+JP:wght@400;600;700&family=Oswald&family=Questrial&familyEB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
/******************************************************

base

******************************************************/
html { font-size: 10px; }
@media screen and (max-width: 768px) { html { font-size: 9px; } }
@media screen and (max-width: 480px) { html { font-size: 8px; } }

body { font-family: 'Noto Serif JP', serif; background: #fff; color: #222; margin: 0; }
body *, body *:before, body *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }

a[href*="tel:"] { pointer-events: none; }
@media screen and (max-width: 768px) { a[href*="tel:"] { pointer-events: initial; } }

#page-head { height: 153px; }
@media screen and (max-width: 768px) { #page-head { height: 70px; } }

.aw { display: inline-block; }

.note { font-size: 1.1rem; line-height: 1.6; }

.pc { display: block !important; }
@media screen and (max-width: 768px) { .pc { display: none !important; } }

.tab { display: none !important; }
@media screen and (max-width: 768px) { .tab { display: block !important; } }

.sp { display: none !important; }
@media screen and (max-width: 480px) { .sp { display: block !important; } }

a { display: block; }

img { display: block; width: 100%; height: auto; }

.img { display: block; position: relative; }
.img img { position: relative; }
.img .cap { font-size: 1.1rem; line-height: 1.2; position: absolute; bottom: 10px; right: 10px; text-align: right; }
.img .cap.w { color: #fff; text-shadow: 0 0 10px #000, 0 0 5px #000, 0 0 3px #000; }
.img .cap.l { right: auto; left: 10px; text-align: left; }
.img .cap.out { position: static; margin-top: .5rem; text-align: right; }
.img + .note { margin-top: .5rem; }

.ent a { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; padding: .5rem .1rem; background: #5C320F; transition: .4s; }
.ent a * { min-height: 0%; }
.ent a:hover { filter: brightness(150%); }
.ent a .txt { display: block; width: 100%; text-align: center; color: #fff; }

.arrow { position: relative; padding-left: 15px; }
.arrow:hover::before { left: 7px; }
.arrow::before { content: ""; display: block; width: 10px; height: 10px; border-top: solid 1px #fff; border-right: solid 1px #fff; position: absolute; top: 50%; left: 5px; transform: translateY(-50%) rotate(45deg); transition: .3s; }

/******************************************************

header

******************************************************/
#header { width: 100%; background: white; position: fixed; top: 0; left: 0; z-index: 9999; }
#header .header-inner { padding: 1rem 100px 1rem 30px; position: relative; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: stretch; align-items: stretch; }
#header .header-inner * { min-height: 0%; }
#header .sekisui-logo a { height: 100%; display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-align: center; align-items: center; }
#header .sekisui-logo a * { min-height: 0%; }
#header .sekisui-logo .img { width: 100px; }
#header .sekisui-logo .txt { display: inline-block; margin-left: 1rem; font-size: 1.8rem; line-height: 1.2; }
#header .hnav-container { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; }
#header .hnav-container * { min-height: 0%; }
#header .hnav-container ul.hnav { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; grid-template-rows: max-content max-content; align-items: center; gap: .25rem 1rem; }
#header .hnav-container ul.hnav li .txt { font-size: 1.4rem; line-height: 1; }
#header .hnav-container ul.hnav li.map, #header .hnav-container ul.hnav li.outline { display: flex; align-items: center; }
#header .hnav-container ul.hnav li.map a, #header .hnav-container ul.hnav li.outline a { padding-left: 1.6rem; position: relative; }
#header .hnav-container ul.hnav li.map a::before, #header .hnav-container ul.hnav li.outline a::before { content: ""; display: block; width: .8rem; height: .8rem; border-right: solid 1px #333; border-bottom: solid 1px #333; position: absolute; top: 50%; left: 0; transform: translateY(-50%) rotate(-45deg); }
#header .hnav-container ul.hnav li.map a:hover, #header .hnav-container ul.hnav li.outline a:hover { opacity: 0.64; }
#header .hnav-container ul.hnav li.ent { grid-row: span 2; height: 56px; }
#header .hnav-container ul.hnav li.ent a { max-width: 168px; height: 100%; padding: 0.5rem 2rem; border-radius: 5px; }
#header .hnav-container ul.hnav li.ent .txt { font-size: 1.4rem; }
#header .gnav { position: fixed; top: 0; right: 0; width: 50%; height: 100dvh; z-index: 999; background: #fff; transform: translateX(200%); transition: .5s ease-out; }
#header .gnav.show { transform: translateX(0); }
#header .gnav ul { margin-top: 90px; display: grid; grid-template-columns: repeat(2, 1fr); }
#header .gnav ul li { border-top: solid 1px #999; }
#header .gnav ul li:first-of-type { border-top: none; }
#header .gnav ul li.current a .txt { color: #CB9364; }
#header .gnav ul li a { display: block; padding: 2rem .5rem; text-align: center; }
#header .gnav ul li a .txt { font-size: 2rem; letter-spacing: .1em; line-height: 1.2; }
#header .gnav ul li.top { grid-column: span 2; }
#header .gnav ul li.map, #header .gnav ul li.outline { border-top: none; padding-top: 3rem; }
#header .gnav ul li.map a, #header .gnav ul li.outline a { padding: .5rem; }
#header .gnav ul li.map a .txt, #header .gnav ul li.outline a .txt { font-size: 1.4rem; padding-left: 1.6rem; position: relative; }
#header .gnav ul li.map a .txt::before, #header .gnav ul li.outline a .txt::before { content: ""; display: block; width: .8rem; height: .8rem; border-right: solid 1px #333; border-bottom: solid 1px #333; position: absolute; top: 50%; left: 0; transform: translateY(-50%) rotate(-45deg); }
#header .gnav ul li.ent { grid-column: span 2; border-top: none; padding: 2rem 1rem; }
#header .gnav ul li.ent a .txt { font-size: 1.6rem; }
@media screen and (max-width: 840px) { #header .header-inner { padding: 1rem 0 1rem 15px; height: 70px; }
  #header .hnav-container { display: none; } }
@media screen and (max-width: 768px) { #header .gnav { width: 100%; }
  #header .sekisui-logo .txt { width: 200px; font-size: 1.6rem; } }
@media screen and (max-width: 480px) { #header { /*.sekisui-logo{
	.txt{
		width: 200px;
		font-size: 1.6rem;
	}
}*/ }
  #header .header-inner { padding: 1rem 0 1rem 10px; } }
@media screen and (max-width: 400px) { #header .sekisui-logo .img { width: 80px; } }

#sp_btn { position: fixed; top: 0; right: 15px; z-index: 99999; cursor: pointer; width: 70px; height: 70px; background: #fff; padding: 15px 15px 30px 15px; }
#sp_btn .line-box { width: 100%; height: 100%; margin: 0 auto; position: relative; }
#sp_btn span { display: inline-block; }
#sp_btn span.line { transition: all .4s; position: absolute; left: 50%; transform: translateX(-50%); height: 2px; border-radius: 5px; background: #333; width: 100%; }
#sp_btn span:nth-of-type(1) { top: 0; }
#sp_btn span:nth-of-type(2) { top: calc(50% - 1px); }
#sp_btn span:nth-of-type(3) { bottom: 0; }
#sp_btn .spmenutxt { position: relative; margin-top: 5px; height: 16px; }
#sp_btn .spmenutxt::after { content: "Menu"; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: #333; font-size: 14px; text-align: center; text-transform: uppercase; }
#sp_btn.active span:nth-of-type(1) { top: 40%; transform: translate(-50%, -40%) rotate(-45deg); width: 60%; }
#sp_btn.active span:nth-of-type(2) { opacity: 0; }
#sp_btn.active span:nth-of-type(3) { top: 40%; transform: translate(-50%, -40%) rotate(45deg); width: 60%; }
#sp_btn.active .spmenutxt::after { content: "Close"; }
@media screen and (max-width: 840px) { #sp_btn { right: 0; } }
@media screen and (max-width: 480px) { #sp_btn { width: 55px; height: 55px; padding: 10px 10px 20px 10px; } }

/******************************************************

footer

******************************************************/
footer h1 { width: 100%; display: block; text-align: center; font-size: 1rem; font-weight: normal; line-height: 1; padding: 1rem 0; }
footer .gnav { padding: 1rem; }
footer .gnav ul { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; }
footer .gnav ul * { min-height: 0%; }
footer .gnav ul li { border-right: solid 1px #ccc; }
footer .gnav ul li:first-of-type { border-left: solid 1px #ccc; }
footer .gnav ul li.current a .txt { color: #CB9364; }
footer .gnav ul li a { padding: 0 .8rem; }
footer .gnav ul li a .txt { font-size: 1.4rem; letter-spacing: .1em; }
footer .gnav ul li.ent a { background: none; }
footer .gnav ul li.ent a .txt { color: #222; }
footer #contact { padding: 4rem 0; text-align: center; }
footer #contact .contact-inner { padding: 0 3%; margin: 0 auto; display: inline-block; }
footer #contact .c-name { display: block; text-align: center; font-size: 2rem; line-height: 1.4; padding-bottom: 1rem; }
footer #contact .tel { display: inline-block; margin-right: 2rem; font-size: 6rem; letter-spacing: .02em; }
footer #contact .tel img { display: inline-block; width: 60px; margin-right: .5rem; margin-bottom: .2em; }
footer #contact .eigyo { display: inline-block; margin-top: 2rem; font-size: 1.2rem; line-height: 1.6; text-align: left; }
footer #contact .eigyo .aw { display: block; }
footer .company ul { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; }
footer .company ul * { min-height: 0%; }
footer .company ul li { display: inline-block; margin: 4rem 0 0 4rem; }
footer .company ul li .company-item { display: block; font-size: 1.2rem; line-height: 1; }
footer .company ul li a { margin-top: 1rem; }
footer .company ul li a img { height: 5rem; width: auto; margin: 0 auto; }
footer .cp { text-align: center; padding: 3rem 0; font-size: 1.2rem; line-height: 1.6; }
@media screen and (max-width: 768px) { footer .gnav { padding: 0; }
  footer .gnav ul { display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); border-top: solid 1px #ccc; }
  footer .gnav ul li { border-bottom: solid 1px #ccc; }
  footer .gnav ul li:nth-of-type(even) { border-right: none; }
  footer .gnav ul li:first-of-type { border-left: none; }
  footer .gnav ul li a { display: block; padding: 1.5rem .5rem; }
  footer .gnav ul li a .txt { display: block; text-align: center; }
  footer #contact .c-name { font-size: 1.7rem; text-align: center; }
  footer #contact .tel { display: block; margin-right: 0; font-size: 4rem; }
  footer #contact .tel img { width: 50px; }
  footer #contact .eigyo { display: block; text-align: center; }
  footer #contact .eigyo .aw { display: inline-block; margin-right: 1rem; }
  footer .company ul { display: block; text-align: center; }
  footer .company ul li { display: block; margin: 2rem 0 0 0; }
  footer .company ul li a img { height: 4rem; } }
@media screen and (max-width: 480px) { footer { padding-bottom: 10rem; }
  footer h1 { display: none; } }

/* bnr_sekisuiheim */
.bnr_sekisuiheim { padding: 4rem 0; background: #EFEFEF; }
.bnr_sekisuiheim .bnr_sekisuiheim_inner { width: 90%; max-width: 1000px; margin: 0 auto; }
.bnr_sekisuiheim .ttl { font-size: 1.35rem; font-feature-settings: "palt"; letter-spacing: 0.05em; }
.bnr_sekisuiheim ul { display: flex; justify-content: space-between; margin-top: 1rem; }
.bnr_sekisuiheim ul li { width: 23%; }
.bnr_sekisuiheim ul li a { transition: 0.3s; }
.bnr_sekisuiheim ul li a:hover { filter: opacity(0.5); }
@media screen and (max-width: 600px) { .bnr_sekisuiheim .ttl { font-size: 1.8rem; }
  .bnr_sekisuiheim ul { flex-direction: column; margin-top: 2rem; }
  .bnr_sekisuiheim ul li { width: 100%; margin-bottom: 3rem; }
  .bnr_sekisuiheim ul li:last-child { margin-bottom: 0; } }

.spnav-container { display: none; width: 100%; position: fixed; bottom: 0; left: 0; z-index: 99; background: #fff; }
.spnav-container .spnav { width: 100%; border-top: solid 1px #E4E3E3; display: grid; gap: 0; grid-template-columns: repeat(4, 1fr); }
.spnav-container .spnav li { border-right: solid 1px #E4E3E3; }
.spnav-container .spnav li:last-of-type { border-right: none; }
.spnav-container .spnav li.ent { background: #5C320F; }
.spnav-container .spnav li a { display: block; padding: .2rem; text-align: center; }
.spnav-container .spnav li a img { max-width: 70px; margin: auto; }
@media screen and (max-width: 768px) { .spnav-container { display: block; } }

/******************************************************

contents

******************************************************/
#contents { width: 100%; margin: 0; overflow-x: hidden; }

.inner { width: 94%; max-width: 1000px; margin-right: auto; margin-left: auto; }

.page-note .note { width: 94%; max-width: 1000px; margin-right: auto; margin-left: auto; padding: 5rem 0; line-height: 1.8; }

#return-top { display: none; position: fixed; z-index: 100; right: 3rem; bottom: 30px; }
#return-top a { display: inline-block; position: relative; width: 45px; height: 45px; }
#return-top a img { width: 100%; height: auto; }
@media screen and (max-width: 768px) { #return-top { right: 2rem; bottom: 70px; }
  #return-top a { width: 30px; height: 30px; } }
