/* ファイル名: styles.css for SAKE*/
:root{
  --bg:#fffaf0;
  --text:#4e3b2a;
  --brand:#4169e1;
  --accent:#0000cd;
  --hover:#6e4e37;
  --radius:12px;
  --shadow:0 6px 16px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
  margin:0;
  color:var(--text);
  background:var(--bg);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
p {
  line-height: 1.2;
}

header{
  background:var(--brand);
  color:#fff;
  text-align:center;
  padding:clamp(16px,4vw,32px) 16px;
}
header h1{
  margin:0 0 .25em;
  font-size:clamp(1.4rem, 2.8vw, 2.2rem);
}
header h2{
  margin:0;
  font-weight:600;
  opacity:.95;
  font-size:clamp(1rem, 2.2vw, 1.4rem);
}

.container{
  width:min(100%, 980px);
  margin:clamp(12px,2.5vw,24px) auto;
  padding:clamp(12px,2.5vw,24px);
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.container img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}


.menu{list-style:none; padding:0; margin:0}
.menu li{margin:.5rem 0}
.menu a{
  text-decoration:none;
  color:var(--accent);
  font-weight:700;
  font-size:clamp(1rem,2.2vw,1.2rem);
  border-bottom:2px solid transparent;
  transition:color .25s ease, border-bottom .25s ease;
}
.menu a:hover{color:var(--hover); border-bottom:2px solid var(--hover)}

.video{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  width:100%;
  height:auto;
  display:block;
}

/* レスポンシブ強化 */
@media (max-width: 720px){
  .container{padding:16px}
}

footer{
  text-align:center;
  padding:16px 0;
  background:var(--brand);
  color:#fff;
  margin-top:32px;
  font-size:clamp(.9rem,1.8vw,1rem);
}


/* ===== 初期から強い立体感／ホバーは“形だけ”変化（差し替え用） ===== */

/* カード */
.kg-ad-block{
  margin:28px 0;
  padding:18px 20px;
  border:1px solid #e8e8e8;
  border-radius:14px;
  background:#fafafa;
}

/* タイトル */
.kg-ad-title{
  font-weight:700;
  font-size:16px;
  color:#222;
  margin:0 0 14px;
  letter-spacing:.02em;
}

/* ボタン行 */
.kg-ad-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* 初期状態から“強い立体感” */
.kg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45em;
  padding:12px 18px;
  border-radius:9999px;
  border:1px solid #d2d2d2;

  /* 面の膨らみ（強めのグラデ） */
  background:linear-gradient(180deg,#ffffff 0%,#f7f7f7 45%,#eeeeee 100%);

  /* エッジ＆厚み（内外シャドウ） */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),  /* 上縁ハイライト */
    inset 0 -1px 0 rgba(0,0,0,.08),       /* 下縁シェード */
    0 3px 0 rgba(0,0,0,.08),              /* エッジ段差 */
    0 12px 22px rgba(0,0,0,.18);          /* 外側影（強） */

  color:#222;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  line-height:1;

  /* 形だけ変える */
  transition:border-radius .12s ease, transform .12s ease;
}

/* ホバー：形のみ（色・影は変えない） */
.kg-btn:hover{
  transform:translateY(-1px) scale(1.01);
  border-radius:16px;
}

/* 押下：押し込み表現（色は固定） */
.kg-btn:active{
  transform:translateY(0) scale(0.995);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.12),
    0 1px 0 rgba(0,0,0,.05);
}

/* フォーカス（形は維持） */
.kg-btn:focus{
  outline:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 3px 0 rgba(0,0,0,.08),
    0 0 0 3px rgba(24,119,242,.18),
    0 12px 22px rgba(0,0,0,.18);
}

/* ブランド別（初期から淡い色味） */
.kg-amazon{
  border-color:#f3b068;
  background-image:linear-gradient(180deg,#fff9f2 0%,#fff4e7 45%,#f6eee4 100%);
}
.kg-rakuten{
  border-color:#de4a4a;
  background-image:linear-gradient(180deg,#fff7f7 0%,#ffeef0 45%,#f6e7e9 100%);
}
.kg-yahoo{
  border-color:#b07bf8;
  background-image:linear-gradient(180deg,#fbf7ff 0%,#f6eeff 45%,#efe6fb 100%);
}

/* ブランド別の :hover は“何も書かない”（形だけ変えるため） */

/* 狭幅対応 */
@media (max-width:640px){
  .kg-btn{ width:100%; justify-content:center; }
}

/* ダークモード（初期から強い立体感／ホバーは形のみ） */
@media (prefers-color-scheme: dark){
  .kg-ad-block{
    background:#161616;
    border-color:#2a2a2a;
  }
  .kg-ad-title{ color:#f3f3f3; }

  .kg-btn{
    background:linear-gradient(180deg,#232323 0%,#1c1c1c 45%,#171717 100%);
    color:#f5f5f5;
    border-color:#383838;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.45),
      0 3px 0 rgba(0,0,0,.45),
      0 12px 22px rgba(0,0,0,.60);
  }

  .kg-btn:hover{
    transform:translateY(-1px) scale(1.01);
    border-radius:16px; /* 形のみ変更 */
  }

  .kg-amazon{ border-color:#eeab63; }
  .kg-rakuten{ border-color:#e25656; }
  .kg-yahoo{ border-color:#b88af9; }
}