/* =========================================================
   base.css — リセット + 公用トップ/フッター + rem スケーリング
   (参考サイト fufusamoyedcafe.com の共通ヘッダー/フッターを踏襲)
   ========================================================= */

/* ---------- reset ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Yu Gothic","メイリオ",Meiryo,"Noto Sans JP",sans-serif;
  color:#3e3e3e;
  line-height:1.6;
  font-weight:400;
  background:#faf5f0;
  -webkit-font-smoothing:antialiased;
}
ul,ol,dl,dd { list-style:none; }
img { border:0; max-width:100%; vertical-align:top; display:block; }
a { text-decoration:none; color:inherit; transition:opacity .25s; }
a:hover { opacity:.85; }
button { font-family:inherit; cursor:pointer; border:0; background:none; }
h1,h2,h3,h4,h5,h6 { font-weight:700; line-height:1.4; }

/* ---------- rem base (1920 design -> 1rem = 19.2px) ---------- */
html { font-size:19.2px; }
@media only screen and (max-width:1720px){ html { font-size:17.2px; } }
@media only screen and (max-width:1380px){ html { font-size:13.8px; } }

/* ---------- layout ---------- */
.layout { overflow:hidden; background:#faf5f0; padding-top:5.208333333333334rem; }
.wrap { width:77.08333333333334rem; margin:0 auto; }

/* =========================================================
   HEADER (公用)
   ========================================================= */
.header {
  background:#ffffff;
  position:fixed; left:0; right:0; top:0; z-index:99;
  box-shadow:0 0 0.5208333333333334rem 0 rgba(0,0,0,0.08);
}
.header .wrap { display:flex; justify-content:space-between; align-items:center; height:5.208333333333334rem; }
.header .logo img { height:3.90625rem; display:block; }
.naver > ul { display:flex; align-items:center; }
.naver > ul > li { position:relative; margin-left:2.4rem; }
.naver > ul > li h3 a {
  font-size:0.8333333333333334rem; color:#3e3e3e;
  line-height:5.208333333333334rem; display:block; position:relative;
}
.naver > ul > li.active h3 a { color:#DF7A83; }
.naver > ul > li.active h3 a::after {
  content:""; display:inline-block; width:0; height:0; margin-left:0.3125rem;
  vertical-align:middle;
  border-left:0.20833333333333334rem solid transparent;
  border-right:0.20833333333333334rem solid transparent;
  border-top:0.2604166666666667rem solid #DF7A83;
  transition:transform .25s;
}
.naver > ul > li.active:hover h3 a::after { transform:rotate(180deg); }
.dropdown-menu {
  position:absolute; top:90%; left:50%; transform:translateX(-50%);
  min-width:10.416666666666668rem; background:#fff;
  border-radius:0.5208333333333334rem;
  box-shadow:0 0.4166666666666667rem 1.5625rem rgba(0,0,0,.12);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s,visibility .3s,transform .3s;
  padding:0.625rem 0; z-index:999;
}
.naver > ul > li.active:hover .dropdown-menu {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0.20833333333333334rem);
}
.dropdown-menu li a {
  display:block; padding:0.5208333333333334rem 1.25rem; font-size:0.78125rem;
  color:#666; white-space:nowrap; text-align:center; transition:background .2s,color .2s;
}
.dropdown-menu li a:hover { background:#FAF6F1; color:#DF7A83; }
.dropdown-menu li a.current { color:#DF7A83; font-weight:700; }

/* hamburger */
.gh {
  height:24px; width:24px; position:absolute; right:0; top:50%;
  transform:translateY(-50%); cursor:pointer; z-index:9999; display:none;
  transition:all .5s cubic-bezier(0.7,0,0.3,1);
}
.gh a, .gh a:before, .gh a:after {
  background-color:#3e3e3e; display:block; height:2px; width:100%;
  border-radius:2px; position:relative; transition:all .3s cubic-bezier(0.7,0,0.3,1);
}
.gh a { top:50%; margin-top:-1px; }
.gh a:before { content:''; position:absolute; top:-7px; left:0; }
.gh a:after  { content:''; position:absolute; top:7px;  left:0; }
.selected .gh { transform:translateY(-50%) rotate(90deg); }
.selected .gh a { background:transparent; }
.selected .gh a:before { transform:translateY(7px) rotate(-45deg); }
.selected .gh a:after  { transform:translateY(-7px) rotate(45deg); }
.hmask { display:none; }

/* =========================================================
   FOOTER (公用)
   ========================================================= */
.footer { background:#c6b299; padding:2.0833333333333335rem 0; position:relative; margin-top:3.385416666666667rem; }
.footer .ftico { position:absolute; left:5.416666666666667rem; top:-4.791666666666667rem; z-index:11; width:14.21875rem; }
.footer .wrap { display:flex; align-items:center; justify-content:space-between; }
.footer .whlogo img { height:7.291666666666667rem; display:block; }
.footer .ul { margin-right:8.333333333333334rem; display:flex; }
.footer .li dd a {
  font-size:0.8333333333333334rem; color:#f7f7f7; line-height:1.6; font-weight:bold;
  display:inline-block; margin-top:0.4166666666666667rem;
}
.footer .li dl { padding-left:2.8645833333333335rem; margin-left:2.8645833333333335rem; }
.footer .li h4 { text-align:right; margin-top:3.90625rem; }
.footer .li h4 a { display:inline-block; font-size:0.8333333333333334rem; color:#f7f7f7; font-weight:bold; line-height:1.6; }
.footer .li h6 { text-align:right; }
.footer .li h6 { font-size:0.625rem; color:#fff; line-height:1.6; margin-top:0.4166666666666667rem; }
.footer a:hover { opacity:.8; }

/* floating SNS */
.fxbtn { position:fixed; right:8.229166666666668rem; top:10.416666666666668rem; width:0.9375rem; text-align:center; z-index:88; }
.fxbtn .txt p { font-size:0.625rem; color:#3e3e3e; writing-mode:vertical-rl; margin:0 auto 0.4166666666666667rem; }
.fxbtn img { display:block; margin:0.4166666666666667rem auto; width:0.9375rem; }
.fxbtn .tline { border-top:0.10416666666666667rem dotted #3e3e3e; height:0.15625rem; width:100%; }

/* floating reserve */
.fybtn { position:fixed; right:1.1458333333333335rem; z-index:66; bottom:20%; opacity:0; transform:scale(.4); transition:all .5s cubic-bezier(0.34,1.56,0.64,1); }
.fybtn.on { opacity:1; transform:scale(1); }
.fybtn a {
  width:6.770833333333334rem; height:6.770833333333334rem; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; background:#DF7A83; border-radius:50%;
  box-shadow:0 0.4166666666666667rem 1.25rem rgba(223,122,131,.4);
}
.fybtn a img { width:1.5625rem; margin-bottom:0.20833333333333334rem; }
.fybtn a i { font-style:normal; font-size:0.625rem; color:#fff; line-height:1.4; }
.fybtn a strong { font-size:0.8333333333333334rem; color:#fff; font-weight:bold; line-height:1.3; }

/* =========================================================
   RESPONSIVE — header/footer (<=992px)
   ========================================================= */
@media only screen and (max-width:1180px){
  .wrap { margin:0 40px !important; width:auto !important; }
  .naver > ul > li { margin-left:1.4rem; }
}
@media only screen and (max-width:992px){
  html { font-size:16px; }
  .layout { padding-top:60px; }
  .header .wrap { height:60px; }
  .header .logo img { height:40px; }
  .wrap { width:100% !important; margin:0 !important; padding:0 15px; }
  .fxbtn { display:none; }
  .gh { display:block; right:15px; }
  .naver {
    position:fixed; right:0; top:60px; width:80%; height:calc(100vh - 60px);
    transform:translateX(100%); transition:all .3s; overflow-y:auto; background:#fff;
    box-shadow:-4px 0 20px rgba(0,0,0,.1); padding-top:10px;
  }
  .selected .naver { transform:translateX(0); }
  .naver > ul { display:block; }
  .naver > ul > li { margin:0; border-bottom:1px solid rgba(0,0,0,.08); }
  .naver > ul > li h3 a { font-size:16px; padding:0 20px; line-height:48px; text-align:left; }
  .naver > ul > li.active h3 a::after { float:right; margin-top:22px; margin-right:20px; }
  .dropdown-menu {
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border-radius:0; background:#faf5f0; padding:0; display:none; min-width:0;
  }
  .naver > ul > li.open .dropdown-menu { display:block; }
  .dropdown-menu li a { text-align:left; padding:12px 34px; border-top:1px solid rgba(0,0,0,.05); }
  .hmask {
    position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,.5); z-index:11;
    opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
  }
  .hmask.open { display:block; opacity:1; visibility:visible; }
  .footer { margin-top:40px; padding:32px 0; }
  .footer .ftico { width:90px; left:15px; top:-46px; }
  .footer .wrap { flex-direction:column; align-items:flex-start; gap:24px; }
  .footer .whlogo img { height:56px; }
  .footer .ul { margin-right:0; flex-wrap:wrap; }
  .footer .li dl { padding-left:0; margin-left:24px; }
  .footer .li dd a { font-size:13px; }
  .footer .li h4 { margin-top:20px; }
  .footer .li h4 a { font-size:13px; }
  .fybtn { bottom:16px; right:12px; }
  .fybtn a { width:60px; height:60px; }
  .fybtn a img { width:16px; }
  .fybtn a i { font-size:9px; }
  .fybtn a strong { font-size:12px; }
}