/* ============================================================
   tariratta — SHARED STYLE
   全ページ共通

   01. 基本設定 / TYPE
   02. HEADER + FULL SCREEN MENU
   03. 共通文字・ボタン
   04. 共通フッター
   05. CONTINUE SHOPPING
   06. 法務ページの本文書体
   07. スマホ共通
   08. HOME専用 PLAYFUL FOOTER
============================================================ */

/* 01. 基本設定 / TYPE */
:root{
  --paper:#fffacd;
  --ink:#1d1d1a;
  --line:#cfcac0;
  --accent:#4b0000;
  --menu:#f3c842;
  --red:#cf4e46;
  --blue:#386aa6;

  /* tarirattaの基本書体 = HEROのKNIT!と同じゴシック系 */
  --sans:"DM Sans","Helvetica Neue",Arial,"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;

  /* 特商法 / Privacy と footer最下部の法務表記用 */
  --serif:"EB Garamond",serif;
  --jp:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;

  --page-pad:4vw;
  --mobile-pad:5vw;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.8;
}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.micro{
  font-family:var(--sans);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* 02. HEADER + FULL SCREEN MENU */
.header{
  position:relative;
  z-index:100;
  width:100%;
  height:72px;
  padding:0 var(--page-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--paper);
  color:var(--ink);
  border-bottom:1px solid rgba(29,29,26,.14);
}
.header .brand,
.header .menu-toggle{
  position:relative;
  z-index:2;
}
.header .brand{
  font:700 31px/.9 var(--sans);
  letter-spacing:-.07em;
}
.header .menu-toggle{
  display:block;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:700 11px/1 var(--sans);
  letter-spacing:.12em;
  cursor:pointer;
}

/* nav自体が背景。リンク以外の空白をタップすると閉じる */
.header .site-nav{
  position:fixed;
  inset:0;
  z-index:1;
  padding:92px var(--page-pad) 36px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
  background:var(--menu);
  color:var(--ink);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility 0s linear .28s;
}
.header .site-nav::after{
  content:"HAND KNIT CLOTHING  /  ONE OF A KIND";
  position:absolute;
  left:var(--page-pad);
  bottom:28px;
  font:700 9px/1.3 var(--sans);
  letter-spacing:.14em;
  pointer-events:none;
}
.header .site-nav a{
  display:inline-block;
  font:700 clamp(43px,7.4vw,104px)/.83 var(--sans);
  letter-spacing:-.065em;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .24s ease,transform .30s ease,color .18s ease;
}
.header .site-nav a:hover{color:var(--red)}
.header .site-nav.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .28s ease,visibility 0s;
}
.header .site-nav.open a{opacity:1;transform:translateY(0)}
.header .site-nav.open a:nth-child(1){transition-delay:.03s}
.header .site-nav.open a:nth-child(2){transition-delay:.055s}
.header .site-nav.open a:nth-child(3){transition-delay:.08s}
.header .site-nav.open a:nth-child(4){transition-delay:.105s}
.header .site-nav.open a:nth-child(5){transition-delay:.13s}
.header .site-nav.open a:nth-child(6){transition-delay:.155s}

/* HOMEだけ通常時は透明 */
.home-page .header{
  position:absolute;
  top:0;
  left:0;
  background:transparent;
  color:#fff;
  border-bottom-color:rgba(255,255,255,.22);
}
.home-page .header.scrolled{
  position:fixed;
  background:var(--paper);
  color:var(--ink);
  border-bottom-color:rgba(29,29,26,.14);
}
/* MENUを開いている間は全ページ共通でoverlay上に固定 */
.header.menu-open,
.home-page .header.menu-open{
  position:fixed;
  top:0;
  left:0;
  background:transparent;
  color:var(--ink);
  border-bottom-color:transparent;
}

/* 03. 共通文字・ボタン */
.section{padding:64px var(--page-pad)}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}
.section-head h2{
  margin:0;
  font:700 clamp(28px,4vw,48px)/.95 var(--sans);
  letter-spacing:-.045em;
}
.btn{
  display:block;
  width:100%;
  margin-top:30px;
  padding:20px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  text-align:center;
  font:700 11px/1.4 var(--sans);
  letter-spacing:.12em;
}
.btn.ghost{
  margin-top:14px;
  background:transparent;
  color:var(--ink);
}
.empty{
  padding:120px var(--page-pad);
  text-align:center;
}

/* 04. 共通フッター */
.footer{
  padding:78px var(--page-pad) 42px;
  text-align:center;
  border-top:1px solid var(--line);
}
/* tarirattaロゴはHOME footer / header と同じゴシック */
.footer-brand{
  font:700 36px/.9 var(--sans);
  letter-spacing:-.07em;
}
.footer-sub{
  margin-top:10px;
  font:600 10px/1.5 var(--sans);
  letter-spacing:.12em;
}
.footer-main-links,.footer-legal{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px;
}
.footer-main-links{
  margin-top:30px;
  font:700 11px/1.4 var(--sans);
  letter-spacing:.12em;
}
/* ここからcopyrightまでは従来の書体を維持 */
.footer-legal{
  margin-top:24px;
  font-family:var(--jp);
  font-size:10px;
}
.copyright{
  margin-top:28px;
  font:9px/1.4 var(--sans);
  letter-spacing:.12em;
}

/* 05. CONTINUE SHOPPING */
.continue-shopping{
  padding:46px var(--page-pad) 52px;
  text-align:center;
  border-top:1px solid var(--line);
}
.continue-shopping-links{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:9px;
  font:700 11px/1.5 var(--sans);
  letter-spacing:.11em;
}
.continue-shopping-links a{border-bottom:1px solid transparent}
.continue-shopping-links a:hover{border-bottom-color:currentColor}

/* 06. 特商法 / Privacy の本文だけはゴシックにしない */
.legal-document .legal-page,
.legal-document .legal-page h1,
.legal-document .legal-page h2,
.legal-document .legal-page h3,
.legal-document .legal-page .micro{
  font-family:var(--jp);
}

/* 07. スマホ共通 */
@media(max-width:760px){
  .section{
    padding-left:var(--mobile-pad);
    padding-right:var(--mobile-pad);
  }
  .header{
    height:64px;
    padding:0 var(--mobile-pad);
  }
  .header .brand{font-size:28px}
  .header .site-nav{
    padding:82px var(--mobile-pad) 30px;
    justify-content:center;
    gap:7px;
  }
  .header .site-nav::after{
    left:var(--mobile-pad);
    bottom:22px;
    max-width:80vw;
    font-size:8px;
  }
  .header .site-nav a{
    font-size:clamp(43px,14vw,70px);
    line-height:.86;
  }
  .footer{
    padding-left:var(--mobile-pad);
    padding-right:var(--mobile-pad);
  }
  .continue-shopping{
    padding:36px var(--mobile-pad) 40px;
  }
  .continue-shopping-links{
    gap:6px;
    font-size:10px;
  }
}

/* 08. HOME専用 PLAYFUL FOOTER */
.playful-footer{
  position:relative;
  overflow:hidden;
  padding:34px var(--page-pad) 24px;
  background:var(--paper);
  color:#2e2a24;
  text-align:center;
}
.playful-footer .footer-big-logo{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0 auto 40px;
  font:700 clamp(92px,18vw,270px)/.76 var(--sans);
  letter-spacing:-.09em;
  color:var(--red);
  white-space:nowrap;
}
.playful-footer .footer-navigation{
  padding-bottom:38px;
  text-align:center;
}
.playful-footer .footer-shop-block{
  margin-bottom:28px;
}
.playful-footer .footer-label{
  margin-bottom:11px;
  font:700 11px/1 var(--sans);
  letter-spacing:.12em;
  text-align:center;
}
.playful-footer .footer-shop-links{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px clamp(10px,1.7vw,20px);
}
.playful-footer .footer-shop-links a,
.playful-footer .footer-main-links a{
  font:700 12px/1.2 var(--sans);
}
.playful-footer .footer-main-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
}
.playful-footer .footer-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding-top:16px;
  border-top:1px solid currentColor;
  text-align:center;
}
/* HOME footerでも法務リンク〜copyrightは従来書体 */
.playful-footer .footer-legal{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:0;
  font-family:var(--jp);
  font-size:9px;
}
.playful-footer .copyright{
  margin-top:0;
  font:9px/1.4 var(--sans);
  letter-spacing:.12em;
  text-align:center;
}

@media(max-width:760px){
  .playful-footer{padding:28px var(--mobile-pad) 20px}
  .playful-footer .footer-big-logo{
    margin:0 auto 34px;
    font-size:22vw;
    line-height:.78;
  }
  .playful-footer .footer-navigation{padding-bottom:32px}
  .playful-footer .footer-shop-block{margin-bottom:24px}
  .playful-footer .footer-label{font-size:9px;margin-bottom:10px}
  .playful-footer .footer-shop-links{
    gap:8px 12px;
  }
  .playful-footer .footer-shop-links a{font-size:9px}
  .playful-footer .footer-main-links{
    gap:16px;
  }
  .playful-footer .footer-main-links a{font-size:11px}
  .playful-footer .footer-legal{
    gap:8px 12px;
    font-size:8px;
  }
}

/* ============================================================
   INNER PAGE HEADER
   HOME以外は全ページ共通でスクロール追従
============================================================ */
body:not(.home-page) .header{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:100;
}
body:not(.home-page) .header.menu-open{
  position:fixed;
}


/* ============================================================
   INNER FOOTER
   ロゴはシンプル、それ以外はHOME footerと同じ構成
============================================================ */
.inner-footer{
  padding:64px var(--page-pad) 24px;
  text-align:center;
  background:var(--paper);
}
.inner-footer .footer-brand{
  display:block;
  width:max-content;
  margin:0 auto 38px;
}
.inner-footer .footer-navigation{
  padding-bottom:38px;
}
.inner-footer .footer-shop-block{
  margin-bottom:28px;
}
.inner-footer .footer-label{
  margin-bottom:11px;
  font:700 11px/1 var(--sans);
  letter-spacing:.12em;
}
.inner-footer .footer-shop-links{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px clamp(10px,1.7vw,20px);
}
.inner-footer .footer-shop-links a,
.inner-footer .footer-main-links a{
  font:700 12px/1.2 var(--sans);
}
.inner-footer .footer-main-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:0;
}
.inner-footer .footer-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding-top:16px;
  border-top:1px solid currentColor;
}
.inner-footer .footer-legal{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:0;
  font-family:var(--jp);
  font-size:9px;
}
.inner-footer .copyright{
  margin-top:0;
  font:9px/1.4 var(--sans);
  letter-spacing:.12em;
}

@media(max-width:760px){
  .inner-footer{
    padding:48px var(--mobile-pad) 20px;
  }
  .inner-footer .footer-brand{
    margin-bottom:32px;
  }
  .inner-footer .footer-navigation{
    padding-bottom:32px;
  }
  .inner-footer .footer-shop-block{
    margin-bottom:24px;
  }
  .inner-footer .footer-label{
    font-size:9px;
    margin-bottom:10px;
  }
  .inner-footer .footer-shop-links{
    gap:8px 12px;
  }
  .inner-footer .footer-shop-links a{
    font-size:9px;
  }
  .inner-footer .footer-main-links{
    gap:16px;
  }
  .inner-footer .footer-main-links a{
    font-size:11px;
  }
  .inner-footer .footer-legal{
    gap:8px 12px;
    font-size:8px;
  }
}