/* ===== 全体 ===== */
body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.8;
  color: #5a4a42;
  background-color: #FAF2F2;
}

/* ===== ヘッダー ===== */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background: #fa8072;
  display: flex;
  align-items: center;
  padding: 0 15px;
  z-index: 9999;
  box-sizing: border-box;
}

.header-left {
  font-weight: bold;
  font-size: 15px;
  color: #fff;
}

.header-nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
}

.header-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.header-cta {
  margin-left: 20px;
}

.header-cta img {
  height: 36px;
}

.hamburger {
  margin-left: auto;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}

/* SPメニュー */
.sp-menu {
  display: none;
  position: fixed;
  top: 45px;
  left: 0;
  width: 100%;
  background: #fa8072;
  text-align: center;
  z-index: 9998;
}

.sp-menu a {
  display: block;
  padding: 15px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}

/* 表示切替 */
.pc-only { display: none; }
.sp-only { display: block; }

@media (min-width: 768px) {
  .pc-only { display: flex; }
  .sp-only { display: none; }
}

/* ===== 画像切り替え ===== */

/* 画像切り替え（安定版） */
.img-sp,
.img-pc {
  width: 100%;
}

.img-sp img,
.img-pc img {
  width: 100%;
  height: auto;
  display: block;
}

/* 初期：SP */
.img-pc { display: none; }

/* PC */
@media (min-width: 768px) {
  .img-sp { display: none; }
  .img-pc { display: block; }
}


/* ===== ボタン ===== */
/* ===== ボタン ===== */
.btn-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
}

.img-btn {
  display: inline-block;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}

.img-btn img {
  width: 490px;
  max-width: 100%;
  height: auto;
  display: block;
  transition: transform 0.08s ease;
}

/* 押した瞬間（PC・スマホ共通） */
.img-btn:active img {
  transform: scale(0.9);
}

/* スマホサイズ */
@media (max-width: 768px) {
  .img-btn img {
    width: 360px;
  }
}


/* ===== 便箋 ===== */
.letter-bg {
  background: #FEF8FA;
  padding: 60px 20px;
}

.letter-paper {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 60px 160px;
  background: #F7F7F7;
  box-sizing: border-box;
}

.letter-body p {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  font-size: 16.5px;
  line-height: 34px;
  color: #222;
  background-image: repeating-linear-gradient(
    to ボタンtom,
    transparent 0px,
    transparent 33px,
    #dddddd 34px
  );
}

.letter-space {
  height: 10px;
}

.mana-sign {
  position: absolute;
  right: 40px;
  bottom: 40px;
  width: 240px;
  height: auto;
  z-index: 10;
}


html, body {
  width: 100%;
  overflow-x: hidden;
}



/* =========================
   スマホ：便箋の横余白を詰める
========================= */
@media screen and (max-width: 768px) {

  /* 便箋の外側（ピンク背景） */
  .letter-bg {
    padding: 25px 13px;   /* ← 横をかなり細く */
  }

  /* 便箋本体（紙） */
  .letter-paper {
    width: 100%;
    max-width: 100%;
    padding: 30px 18px 100px; /* ← 左右をさらに縮小 */
    margin: 0;
  }

  /* 文章 */
  .letter-body p {
    font-size: 16px;
    line-height: 1.85;
    background-position: left top;
  }

  /* サイン位置も調整（はみ出し防止） */
  .mana-sign {
    right: 12px;
    bottom: 20px;
    width: 180px;
  }


 /* 特商法表記の表 */