/* ============ Web Fonts ============ */
@font-face {
  font-family: 'NekoCatCats';
  src: url('fonts/NekoCatCats-Cat.woff2') format('woff2'),
       url('fonts/NekoCatCats-Cat.woff') format('woff'),
       url('fonts/NekoCatCats-Cat.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ▼ 新しく追加：Bold版 */
@font-face {
  font-family: 'NekoCatCats-Bold';
  src: url('fonts/NekoCatCats-Bold.woff2') format('woff2'),
       url('fonts/NekoCatCats-Bold.woff') format('woff'),
       url('fonts/NekoCatCats-Bold.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ============ CSS Vars ============ */
:root{
  --pink: #f3a7c9;          /* 背景のピンク */
  --ink: #111;              /* 本文色 */
  --ink-light: #333;        /* サブテキスト */
  --maxw: 900px;            /* 本文幅 */
  --gap: 28px;              /* ベース間隔 */
}

/* ============ Base ============ */
*{ box-sizing: border-box; }
html,body{
  height:100%;
}
body{
  margin:0;
  color:var(--ink);
  background:var(--pink);
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  line-height:1.7;
}

/* ============ Hero (cat image) ============ */
.hero{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
}
.hero img{
  width:min(1120px, 90vw);
  height:auto;
  display:block;
  mix-blend-mode:multiply;
}

/* ============ Container ============ */
.container{
  width: min(var(--maxw), 92vw);
  margin: 0 auto;
  text-align: center;
}

/* ============ Logo Title ============ */
.logo-title{
  font-family: 'NekoCatCats', ui-rounded, "Futura", system-ui, sans-serif;
  font-weight:900;
  font-size: clamp(60px, 14vw, 120px);
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0 0 0;
}

@media (max-width: 500px){
  .logo-title{
    margin: 30px 0 0;
  }
}

/* ▼ 「Font」部分をBoldフォントに変更 */
.logo-sub{
  font-family: 'NekoCatCats-Bold', ui-rounded, "Futura", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 12vw, 100px);
  line-height: 1;
  margin: -12px 0 60px;
}

/* ============ Credits ============ */
.credits {
  margin-block: 0 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  font-weight: bold;
  color: var(--ink-light);
}
.maker{
  display:inline-flex;
  flex-direction:column;
  line-height:1.05;
  font-weight:800;
  letter-spacing:.06em;
}
/* makerテキストを非表示にしたので、画像用のスタイル追加 */
.maker-img {
  display: inline-block;
  vertical-align: middle;
}


/* ============ Descriptions ============ */
.desc-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 15px;
  text-align: left;
  margin: 0 auto 42px;
}
.desc-block{
  background: rgba(255,255,255,0.0);
  padding: 0;
  font-size: 13.5px;
  color: var(--ink-light);
}
.desc-block p{ margin: 0 0 12px; }

@media (min-width: 880px){
  .desc-grid{
    grid-template-columns: 1fr 1fr;
    gap: 13px;
  }
}

/* ============ Download Button ============ */
.download{
  display:flex;
  justify-content:center;
  margin: 60px 0 0;
}

@media (max-width: 500px){
  .download{
    margin: 40px 0 0;
  }
}

.download-btn{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width: clamp(280px, 53vw, 450px);
  padding: 13px 28px 15px;
  text-decoration:none;
  background: #000;
  color: #fff;
  border: 8px solid #000;

}
.download-btn:hover{
  color: var(--ink);
  background: #f7f7f7;
}
.btn-label{
  line-height: 1;
  font-weight: bold;
  font-size: clamp(35px, 8vw, 48px);
}
.btn-sub{
  margin-top: 3px;
  font-size: 12px;
  font-weight: bold;
  text-align:center;
  line-height:1.3;
}

        .footer{
            margin:0 20px 20px;
            text-align: center;
        }
        .footer-insta{
            margin: 0 0 0 0;
            font-size: 2em;
            line-height: 1;
        }
        .footer-insta a{
            text-decoration: underline; /* 下線を消す */
            color: #000; /* 黒色に設定 */
        }
        .footer-copy{
            font-size: 0.6em;
            margin: 80px 0 0 0;
            padding: 10px 0 10px 0;
            border-top: 1px solid #000;
        }
/* ============ Sample Image ============ */
.sample {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.sample-img {
  border: 1px solid #000;       /* 1px黒ボーダー */
  padding: 9% 10% 10%;                 /* 画像との余白（任意） */
  width: min(85%, 900px);       /* 最大幅を480pxに制限 */
  height: auto;
}



/* 少し余白を残して下を広めに（元画像の雰囲気用） */
main{ padding-bottom: 6vh; }

/* ============ Share Buttons ============ */
.share {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.share-btn {
  width: 44px;
  height: 44px;
  border: 2px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  text-decoration: none;
  transition: background 0.2s, transform 0.1s;
}

.share-btn:hover {
  background: #000;
  color: #fff;
  transform: translateY(-2px);
}

/* シンプルなアイコン風デザイン（Font Awesome不要・純CSSで） */
.icon-x::before {
  content: "𝕏";
  font-size: 20px;
  font-weight: 700;
}
.icon-instagram::before {
  content: "◉";
  font-size: 22px;
  position: relative;
  top: -1px;
}
.icon-facebook::before {
  content: "f";
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 22px;
}