/* ============================================================
   common.css
   全ページ共通のパーツ（リセット/変数/ヘッダー/フッター/
   固定ナビ・TOPへ戻るボタン/CTAカード）
   ※ PCメイン設計：無指定（デフォルト）がPC表示、
     メディアクエリ（max-width）でSP表示に上書きします。
   ============================================================ */

:root{
  --max:480px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background-color:#f7f1e6;
  font-family: ten-mincho, 'Shippori Mincho', serif;
  font-weight:400;
  font-style:normal;
  font-size:15px;
  line-height:1.75;
  letter-spacing:0;
  color:#452b16;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
/* iOSのSafariはbackground-attachment:fixedの挙動が不安定なため、
   ::beforeで固定背景を敷く方式にしています（bodyの背景色は上のfallback用） */
body::before {
  content:"";
  display:block;
  width:100%;
  height:100%;
  background: url('../imgs/bg.jpg') repeat;
  background-size:640px auto;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
}

.accent {
  font-family: "cormorant-garamond", serif;
  font-weight: 600;
  font-style: normal;
}

.fair {
  font-family: fairwater-script, sans-serif;
}
.mincho{ font-family: ten-mincho, 'Shippori Mincho', serif; }

.fgo{
  font-family: source-han-sans-cjk-ja, 'Noto Sans JP', sans-serif;
  font-style:normal;
  font-weight:300;
}


a {
  color: #000;
  zoom: 1;
  text-decoration: none;
  transition: opacity 0.7s;
  display: block;
}
img{ max-width:100%; display:block; }

/* ---------- ユーティリティー（かなこさん元のcommon.cssより復元） ---------- */
.txt_c{ text-align:center; }
.txt_c span{ display:inline-block; }
.nolink{ pointer-events:none; cursor:default; }
img[src*="_sp"]{ display:none; }
.p_rltv{ position:relative; }
.flex{ display:flex; flex-wrap:wrap; }
.ilbk{ display:inline-block; }
.img_cnt{ width:100%; height:100%; object-fit:contain; -o-object-fit:contain; object-position:center; -o-object-position:center; }
.img_cvr{ width:100%; height:100%; object-fit:cover; -o-object-fit:cover; object-position:center; -o-object-position:center; }

/* ---------- inview（jquery.inview.js + common.jsの.inv_movと連動） ---------- */
.inv_mov{ opacity:0; transition:opacity 1s, transform 1s; }
.tl_yb{ transform:translate(0,60px); }
.tl_yt{ transform:translate(0,-60px); }
.tl_xl{ transform:translate(-60px,0); }
.tl_xr{ transform:translate(60px,0); }
.tl_rol{ transform:rotate(-10deg); }
.tl_ror{ transform:rotate(10deg); }
.tl_xt{ transform:rotateX(180deg); }
.mov{ opacity:1; transform:translate(0,0) rotate(0deg); transition:opacity 1s, transform 1s; }
.mov.delay100{ transition-delay:100ms; }
.mov.delay200{ transition-delay:200ms; }
.mov.delay300{ transition-delay:300ms; }
.mov.delay400{ transition-delay:400ms; }
.mov.delay500{ transition-delay:500ms; }
.mov.delay600{ transition-delay:600ms; }
.mov.delay700{ transition-delay:700ms; }

/* ---------- 404（今後404ページを作る場合用） ---------- */
.notfound{ text-align:center; padding:250px 0; }
.notfound .page{ padding-left:0; }
.notfound .ttl{ text-align:center; font-size:clamp(27px,3.52vw,32px); margin-bottom:30px; }
.notfound p{ margin-bottom:15px; }
.notfound p strong{ font-size:125%; font-weight:bold; display:block; margin-bottom:10px; }
.notfound a{ text-decoration:underline; display:inline-block; }
.notfound #toppage{ display:none; }


.site_wrap {
  overflow: clip;
}

.site{
  max-width:var(--max);
  margin:0 auto;
  background:#f7f1e6;
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,0.4);
}

/* ---------- QUICK NAV / 左右の装飾ブロック ----------
   PC（デフォルト）では画面両端の余白部分に固定表示します。
   SP（max-width:900px）では.rgt_blk自体を非表示にします。 */
.rgt_blk{
  display:block;
  width:calc((100% - 480px)/2);
  height: 100svh;
  position:fixed;
  top:0;
  right:0;
  z-index:5;
}

.rgt_icon {
  width:47%;
  max-width:220px;
  position:absolute;
  top: 35px;
  left: 39%;
  transform: translatex(-50%);
}

.quick-nav_blk {
  width: 90%;
  max-width: 298px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:block;
  z-index:5;
}
.quick-nav{
  display:flex;
  flex-direction:row-reverse;
  gap:15px;
}
.quick-nav >* {
  width:calc((100% - 5.6vw)/3);
  max-width:73px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.25));
  transition: all 0.3s;
}
.quick-nav >*:hover {
  opacity:0.8;
}
.quick-nav li:nth-child(2) {
  position:relative;
  top:100px;
}
.quick-nav li:nth-child(3) {
  position:relative;
  top:48px;
}


.to-top-btn{
  position:fixed;
  right:46px;
  bottom:24px;
  width:80px;
  z-index:50;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.3));
}

/* ---------- HEADER ----------
   PC（デフォルト）では左側の余白に固定表示し、
   「あなたが探している栗きんとんはどちら？」の装飾（ttl_txt）も表示します。
   SP（max-width:980px）では通常のページ上部ヘッダー（ロゴのみ）にします。 */
.site-header {
  width:calc((100% - 480px)/2);
  height: 100svh;
  padding:0 20px;
  position:fixed;
  top:0;
  left:0;
  z-index:5;
}
.site-header .ttl_logo {
  position:relative;
  top:0;
  left:3.8vw;
  max-width:150px;
}
.site-header .ttl_txt{
  display:block;
  width:100%;
  max-width:300px;
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---------- CTA CARDS (診断/もっと知る等、下層ページでも使い回す想定のカード部品) ---------- */
.cta-section{
  background:#8f2a2b url('../imgs/bg_rd.png') repeat-y top center;
  background-size:100% auto;
  padding:40px 20px;
}
.cta-card{
  max-width:352px;
  margin: 0 auto;
  padding:0;
}
.cta_top {
  width:100%;
  height:39px;
  background:url(../imgs/flame_top.png) 0 0 no-repeat;
  background-size:100% 100%;
}
.cta_btm {
  width:100%;
  height:39px;
  background:url(../imgs/flame_btm.png) 0 0 no-repeat;
  background-size:100% 100%;
}
.cta_bd {
  width:100%;
  height:auto;
  background:url(../imgs/flame_bd.png) 0 0 repeat-y;
  background-size:100% auto;
}
.cta-card_inner {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:275px;
  margin: 0 auto;
  padding:20px 0;
}

.cta-card + .cta-card{ margin-top:34px; }

/* ---------- FOOTER ---------- */
.site-footer{ background:#f7f2e7; padding:40px 24px 60px; text-align:center; }
.footer-title{ font-size:18px; margin-bottom:26px; }
.footer-title .small{ font-size:12px; margin-right:8px; }
.footer-title .divider{ margin:0 12px; }
.footer-links {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-links a {
  color:#452b16;
  font-size:13px;
}
.footer-note{ color:#452b16; margin-top:28px; font-size:13px; line-height:1.8; }


/* ============================================================
   メディアクエリ（SP表示への上書き）
   common_ts.css の書式（@media screen and (max-width: ...)）に統一し、
   幅の大きいブレークポイントから順に記載しています。
   ============================================================ */

@media screen and (max-width: 980px) {

  /* ---------- HEADER（SP） ---------- */
  .site-header .ttl_logo {
    position:absolute;
    width:80%;
    top:0;
    left:50%;
    transform:translatex(-50%);
  }
  /*.site-header .ttl_txt{ display:none; }*/

}

@media screen and (max-width: 900px) {

  /* ---------- QUICK NAV / 左右の装飾ブロック（SP） ---------- */
  .rgt_blk{
    display:none;
    width:100%;
    height: 100svh;
    z-index: 10;
    background: url(../imgs/bg.jpg) repeat;
    background-size: cover;
  }
  /*.quick-nav_blk {
    display:none;
  }*/
  
  .quick-nav{
    gap:2.8vw;
  }

}


@media screen and (max-width: 768px) {
.site-header .ttl_logo {
  min-width:100px;
  left:10px;
  transform:none;
}
.site-header .ttl_txt {
        display:none;
}

}