/* ===== リセット ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== 基本設定 ===== */
body {
  font-family:  'Noto Sans JP','Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #000000;
  background-color: #ffffff;
}

.oswald {
  font-family: 'Oswald', sans-serif;
}

/* ===== カラー ===== */
.color-red   { color: #e60000; }
.color-yellow  { color: #ffce00; }
.color-black { color: #000000; }
.color-white { color: #ffffff; }
.bold { font-weight: 700; }

/* ===== レイアウト ===== */
.section {
  width: 100%;
}

.inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ===== セクション背景色 ===== */
.whitebase { background-color: #ffffff; color: #000000; }
.sec4 { background-color: #000000; color: #000000; }


.redbase {
  position: relative;
  background: #fff; /* ベースは白 */
}

/* 赤い背景を疑似要素で斜めカット */
.redbase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: #e8221b;
  clip-path: polygon(
    0 0,        /* 左上 */
    100% 0,     /* 右上 */
    100% 35%,   /* 右下（ここを変えると角度が変わる） */
    0 70%      /* 左下 */
  );
  z-index: 0;
}



/* コンテンツは前面に */
.redbase .inner {
  position: relative;
	padding-top: 20px;
  z-index: 1;
}

.sec2-layout {
  position: relative;
}

/* 上段：書影並び */


.book-images {
  display: flex;
  align-items: flex-end;
  gap: 0px;
  margin-bottom: 0;
  width: 100%;
}

/* 左画像（book-title.svg）の比率 */
.book-images img:first-child {
  width: 65%;  /* 全体の70% */
  height: auto;
  flex-shrink: 1; /* ← 縮小を許可 */
  min-width: 0;   /* ← はみ出し防止 */
}

/* 右画像（book-cover.png）の比率 */
.book-images img:last-child {
  width: 35%;  /* 全体の30% */
  height: auto;
  flex-shrink: 1; /* ← 縮小を許可 */
  min-width: 0;   /* ← はみ出し防止 */
}


/* 下段：左右レイアウト */
.sec2-bottom {
  display: grid;
  grid-template-columns: 500px 1fr; /* 左固定・右は残り全部 */
  align-items: flex-end;
  position: relative;
  gap: 0; /* ← 追加 */
  margin-top: -200px;
	
}

.sec2-person {
  position: relative;
  z-index: 2;        /* 右側より前面に */
  display: flex;
  align-items: flex-end;
  justify-content: center;
	left: -110px;
  margin: 0;  /* ← 追加 */
  padding: 0; /* ← 追加 */	
}

.sec2-person img {
  max-width: 500px;
  display: block;
}

.person-wrap {
  width: 500px;       /* 横幅 */
  height: 680px;      /* ← この高さでトリミング（小さくすると下がカットされる） */
  overflow: hidden;   /* はみ出した部分を隠す */
}
.person-wrap img {
  width: 100%;
  display: block;
  /* 上を基準に表示（下がカットされる） */
  object-fit: cover;
  object-position: top;
}

/* 右：画像＋テキスト */
.sec2-right {
  position: relative;
  z-index: 1;
	padding-top: 10px;
  padding-left: 0px; /* 人物との隙間 */
	padding-bottom: 20px;
    margin-left: -100px; /* ← 左にずらす（マイナスで左に広がる） */	
}

.sec2-right-img {
  width: 100%;
  display: block;
  margin-bottom: 16px;
}
.sec2-text {
  font-size: 21px;
  color: #333;
  line-height: 2;
}

/* ===== レスポンシブ ===== */
@media (max-width: 960px) {
  .sec2-bottom {
    grid-template-columns: 380px 1fr; /* 左を小さく */
  }
  .person-wrap {
    width: 380px;
    height: 520px;
	 } 
  .sec2-right {
    margin-left: -160px; /* ← 左にずらす（マイナスで左に広がる） */
    position: relative;
    z-index: 2; /* 人物より前面に */
	  margin-top: 200px;
  }
.sec2-person {
	left: -120px;
}
}

@media (max-width: 768px) {
	
	.book .inner {
		padding: 0;
	}
	
	/* 左画像（book-title.svg）の比率 */
	.book-images img:first-child {
	  width: 62%;  /* 全体の70% */
	}

	/* 右画像（book-cover.png）の比率 */
	.book-images img:last-child {
	  width: 38%;  /* 全体の30% */
	}

	.photo-word {
	  display: flex;
	  align-items: flex-end;
	  gap: 0px;
	  margin-bottom: 0;
	  width: 100%;
	}	
	.photo-word img:first-child {
	  width: 30%;  /* 全体の70% */
		height: auto;
		flex-shrink: 1; /* ← 縮小を許可 */
		min-width: 0;   /* ← はみ出し防止 */
	}
	
	
/* 赤い背景を疑似要素で斜めカット */
.redbase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: #e8221b;
  clip-path: polygon(
    0 0,        /* 左上 */
    100% 0,     /* 右上 */
    100% 25%,   /* 右下（ここを変えると角度が変わる） */
    0 35%      /* 左下 */
  );
  z-index: 0;
}	

	/* 右画像（book-cover.png）の比率 */
	.photo-word img:last-child {
	  width: 70%;  /* 全体の30% */
		height: auto;
		flex-shrink: 1; /* ← 縮小を許可 */
		min-width: 0;   /* ← はみ出し防止 */
		margin-bottom: 20px;
}

	
	/* 縦積み */
  .sec2-bottom {
	  margin-top: -90px;
    grid-template-columns: 1fr;
  }

  /* 人物写真エリア */
  .sec2-person {
    left: 0;
    margin-bottom: 0;
  }
  .person-wrap {
    width: 100%; 
  margin-right: auto;
    overflow: hidden;
	 height: auto; 
  }
 .person-wrap sp img{
    width: 100%;
 }
	
  /* 右エリア全体 */
  .sec2-right { 
    padding: 30px 10px 50px;
	  background-color:#fff;
    margin: 0px 10px;
  }

  /* SVGテキスト */
  .sec2-right-img {
    width: 100%;
    margin-bottom: 16px;
  }

  /* 本文 */
  .sec2-text {
    font-size: 18px;
    line-height: 1.9;
  }
}



.graybase { 
	background-color: #eeeeee; color: #000000; 
	padding: 80px 0;
}

/* クレーベース2カラムグリッド */
.contents-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0; /* 行間はborder-bottomで表現 */
	padding: 50px 0 80px;
}

/* 各行 */
.cont-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0px 0px;
	margin:10px;

  background: linear-gradient(
    to right,
    #eee 56px,   /* 左の40px部分をグレー */
    #fff 56px        /* 56pxから右は白 */
  );
	
}
/* 左右の境界線 */
.cont-item:nth-child(odd) {
}

/* 赤い丸バッジ */
.cont-badge {
  width: 80px;
  height: 80px;
  background: #e8221b;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 1px;
  line-height: 1.3;
  text-align: center;
}

/* テキスト */
.cont-text {
  font-size: 21px;
  font-weight: 500;
  color: #111;
  line-height: 1.4;
  padding-left: 16px;
}

/* 最後の行はborder-bottomなし */
.cont-item:last-child {
  border-bottom: none;
}

/* 第8章が左側にある場合、右側の空白セルも境界線を消す */
.cont-item:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

/* ===== レスポンシブ（スマホ：1カラム縦並び） ===== */
@media (max-width: 768px) {
		
	.graybase { 
		padding: 50px 0;
	}
.cont-item {
	margin:5px 0px;	
	}	
	
  .contents-grid {
    grid-template-columns: 1fr; /* 1カラムに */
	 	padding: 30px 0 50px; 
  }
  .cont-item:nth-child(odd) {
    border-right: none; /* 境界線を消す */
  }
  .cont-item:last-child {
  }
	
	/* 赤い丸バッジ */
	.cont-badge {
	  width: 80px;
	  height: 80px;
	  font-size: 18px;
		letter-spacing: 0px;
	}

	/* テキスト */
	.cont-text {
	  font-size: 18px;
		line-height: 1.5;
	  padding-left: 6px;
		font-weight: bold;
	}
}



/* プロフィール */
.profile-sec {
  background: #fff;
  padding: 80px 0 0;
}
.profile-wrap {
  display: grid;
  grid-template-columns: 1fr 380px; /* 左：テキスト / 右：人物 */
  gap: 40px;
  align-items: center;
}

/* ヘッダー：PROFILE + 名前 */
.profile-header {
}
.profile-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  border-left: 7px solid #e8221b; /* 左の赤いライン */
  padding-left: 16px;
}
.profile-label {
  font-family: 'Oswald', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #111;
  line-height: 1.9;
  flex-shrink: 0;
}
.profile-name-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile-name {
  font-size: 38px;
  font-weight: 700;
  color: #e8221b; /* 赤 */
  line-height: 1.2;
  margin-bottom: 0px;
}
.profile-role {
  font-size: 21px;
  color: #333;
  font-weight: 700;
}

/* 本文 */
.profile-body {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 段落間の隙間 */
	padding: 50px 0;
}
.profile-body p {
  font-size: 19px;
  color: #333;
  line-height: 1.9;
}

/* 右：人物写真 */
.profile-right {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.profile-right img {
  width: 100%;
  max-width: 380px;
  display: block;
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
	.profile-sec {
	  padding: 0px 0 0;
	}	
	
  .profile-wrap {
    grid-template-columns: 1fr 280px;
    gap: 24px;
  }
  .profile-label {
    font-size: 36px;
  }
  .profile-name {
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  .profile-wrap {
    grid-template-columns: 1fr; /* 縦積み */
  }
  .profile-right {
    order: -1; /* 写真を上に */
    max-width: 240px;
    margin: 0 auto;
  }
  .profile-label {
    font-size: 30px;
  }
  .profile-name {
    font-size: 20px;
  }
	
/* 本文 */
.profile-body {
  gap: 0px; /* 段落間の隙間 */
	padding: 0px 0 0px 16px;/* ← ラインと文字の間隔 */
    border-left: 6px solid #e8221b; /* ← 右に赤ライン */
	margin-bottom: 50px;	
}
.profile-body p {
  font-size: 18px;
  line-height: 1.9;
	padding-bottom: 20px;
}	
}



/* ===== 赤斜めカットとプレゼント ===== */
/* ヘッダー */
.present-head {
  text-align: center;
  margin: 50px 0 20px;
}

/* タイトル（1文字ずつ黒背景） */
.present-title {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.present-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: #111;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  border-radius: 4px;
}

.present-catch {
  font-size: 45px;
  font-weight: 700;
  color: #fff;
  margin: 10px 0;
}
.present-sub {
  font-size: 24px;
  color: #fff;
}

/* カード2枚並び */
.present-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
}

/* カード */
.present-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px; 
}

/* プレゼントアイコン（カードの上にかぶる） */
.present-gift {
  width: 100px;
  margin-bottom: -60px; /* カードにかぶせる */
  position: relative;
  z-index: 1;
}
.present-gift img {
  width: 100%;
  display: block;
}

/* カード内側（白い丸角） */
.present-card-inner {
  background: #fff;
  border-radius: 20px;
  padding: 50px 28px 28px;
  width: 100%;
  position: relative;
  z-index: 0;
  border: 8px solid #e8221b; /* ← これを追加 */
}

/* PRESENT.1 / PRESENT.2 */
.present-no {
  font-size: 42px;
font-family: 'Oswald', sans-serif;
  font-weight: 700;
  color: #e8221b;
  margin-bottom: 0px;
	text-align: center;
}


/* カードタイトル */
.present-card-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
	text-align: center;
	letter-spacing: 1px;	
}
.present-small{
	font-size: 15px;
}
.present-big{
	font-size: 30px;
}

/* カード画像 */
.present-card-img {
  width: 80%;
  border-radius: 8px;
  margin:0 auto 16px;
  display: block;
}

/* カード説明文 */
.present-card-desc {
  font-size: 19px;
  color: #333;
  line-height: 1.9;
}
.present-bottom{
  margin:0 auto 80px;
}
/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
	
.present-head {
  text-align: center;
  margin: 50px 0 10px;
}	
  .present-cards {
    grid-template-columns: 1fr; /* 1列に */
  }
  .present-card {
	   margin-bottom: 0px; 
  }	
	

	/* カード内側（白い丸角） */
	.present-card-inner {
	  padding: 50px 15px 15px;
	  width: 100%;
	  border: 6px solid #e8221b; /* ← これを追加 */
	}
	/* カード説明文 */
	.present-card-desc {
	  font-size: 18px;
	  line-height: 1.8;
	}	
	
	/* カード画像 */
	.present-card-img {
	  width: 100%;
	}	
  .present-title span {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }
  .present-catch {
    font-size: 22px;
  }
	.present-sub {
	  font-size: 21px;
	}
	
  .present-card-title {
    font-size: 24px;
  }
	
	.present-no {
	  font-size: 22px;
		letter-spacing: 5px;
	}	
 
}

/* ===== まとめ買い特典 ===== */

/* 帯（\と/） */
.bulk-obi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 32px;
}
.bulk-obi-slash {
  font-size: 70px;
  font-weight: 900;
  color: #e8221b;
  line-height: 1;
}
.bulk-obi-text {
  font-size: 24px;
  font-weight: 700;
  color: #e8221b;
}

/* カード：PCは2列 */
.bulk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 50px;
}

/* 各カード */
.bulk-card {
  display: flex;
  align-items: stretch;
  border-radius: 0px;
  overflow: visible;
}

/* 左：色付きエリア（三角あり） */
.bulk-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 10px 0px;
  min-width:120px;
  position: relative;
  flex-shrink: 0;
}

/* 三角（右向き矢印） */
.bulk-arrow {
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 75px solid transparent;
  border-bottom: 75px solid transparent;
  z-index: 1;
}

/* 各色 + 三角の色 */
.bulk-entry { background: #888; }
.bulk-entry .bulk-arrow { border-left: 30px solid #888; }

.bulk-gold { background: #c8a800; }
.bulk-gold .bulk-arrow { border-left: 30px solid #c8a800; }

.bulk-vip { background: #4a9fd4; }
.bulk-vip .bulk-arrow { border-left: 30px solid #4a9fd4; }

.bulk-legend { background: #e8221b; }
.bulk-legend .bulk-arrow { border-left: 30px solid #e8221b; }

/* バッジ（ENTRY/GOLD/VIP/LEGEND） */
.bulk-badge {
  font-size: 16px;
	font-family: 'Oswald', sans-serif;
  color: #fff;
  padding: 0px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
  letter-spacing: 1px;
  border: 1px solid #fff; /* ← これを追加 */		
}

/* 冊数 */
.bulk-num {
  font-family: 'Oswald', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 0.4;
	text-align: center;
	padding-top: 12px;
}
.bulk-unit {
  font-size: 16px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* 右：テキストエリア */
.bulk-right {
  flex: 1;
  padding: 15px 20px 5px 50px; /* 左に三角分の余白 */
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.bulk-note-top {
  font-size: 14px;
  color: #888;
}
.bulk-benefit {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  line-height: 1.4;
}
.bulk-limit {
  font-size: 16px;
  color: #af8233;
  font-weight: 700;
  text-align: right;
}
.bulk-limit-no{
  font-size: 24px;
  font-family: 'Oswald', sans-serif;
	letter-spacing: 2px;
	line-height: 0;
	padding: 0px 2px;
}


/* ボタン */
.bulk-btns {
  display: flex;
  gap: 50px;
  justify-content: center;
  flex-wrap: wrap;	
}
.btn-bulk {
  display: inline-flex;	
  text-decoration: none;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  padding: 1rem 2.8rem;
  border-radius: 50px;
  transition: all .2s;
  cursor: pointer;
	letter-spacing: 2px;
}
.btn-bulk:hover { transform: translateY(-2px); }
.btn-bulk-dark {
  background: #222;
  color: #fff;
}
.btn-bulk-dark:hover { background: #000; }
.btn-bulk-gold {
  background: #e8a000;
  color: #fff;
}
.btn-bulk-gold:hover { background: #c98800; }

/* ===== レスポンシブ ===== */
/* 帯：スマホは2列 */
@media (max-width: 768px) {
	/* 帯（\と/） */
	.bulk-obi-text {
	  font-size: 20px;
	text-align: center;
	}
	.bulk-obi {
	  gap: 0px;
	}

/* 左：色付きエリア（三角あり） */
.bulk-left {
  padding: 20px 0px 0px;
  min-width:100px;
}
  /* カード：スマホは1列 */
  .bulk-grid {
    grid-template-columns: 1fr;
  }
	
.bulk-obi-slash {
  font-size: 50px;
  font-weight: bold;
}
.bulk-note-top {
  font-size: 12px;
}	
  .bulk-title { font-size: 26px; }
  .bulk-num { font-size: 45px;  line-height: 0.5; }
  .bulk-benefit { font-size: 22px; }

  /* ボタン：縦並び */
  .bulk-btns {
    flex-direction: column;
    align-items: center;
	  margin-bottom: 0px;
  }
  .btn-bulk {
    width: 85%;
    justify-content: center;
    font-size: 22px;
  }
	
.bulk-right {
  flex: 1;
  padding: 20px 10px 10px 40px; /* 左に三角分の余白 */
}
	
}


/* ===== 神谷組黒ベース ===== */

.blackbase {
  background: #000;
  padding: 0px 0;
  position: relative; /* sectionにrelativeを移す */
	
}

/* innerをrelativeに */
.blackbase .inner {
  position: relative;
}

/* 背面の人物写真 */
.ks-bg-person {
  position: absolute;
  left: -50px;
  width: 500px;
  z-index: 0;
	top:0;
  pointer-events: none;
}


/* innerがz-indexを持っているとその中に閉じ込められる */
.ks-sec .inner {
  position: relative;
  z-index: 1; /* ← これがあると.ks-bg-personが隠れる */
}

.ks-bg-person img {
  width: 100%;
  display: block;
}

/* 前面コンテンツ */
.ks-content {
  position: relative;
  z-index: 1;
  padding-left: 400px; /* 人物写真の幅分右にずらす */
	padding-top: 50px;
	padding-bottom: 30px;
}

/* ロゴ行 */
.ks-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.ks-logo {
  height: 100px;
  width: auto;
}
.ks-towa {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

/* テキスト */
.ks-desc {
  font-size: 19px;
	color: #fff;
  line-height: 2;
}

/* ===== レスポンシブ ===== */
@media (max-width: 960px) {
  .ks-bg-person {
    width: 300px;
  }
  .ks-content {
    padding-left: 280px;
	 padding-top: 30px;
  }

.ks-desc p{
	margin-bottom: 15px;
}
/* ロゴ行 */
.ks-logo-row {
  gap: 0px;
  margin-bottom: 20px;
}
.ks-logo {
  height: auto;
  width: 80%;
}
.ks-towa {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
	
}

@media (max-width: 768px) {
  .ks-bg-person {
    position: relative;
    left: -10%;  
    bottom: 0;
    width: 90%;
    margin: 0 auto 0px;
  }
  .ks-content {
    padding-left: 0;
  }
}

/* 己の人生を創りだせ！ */
.ks-catchcopy {
  font-size: 42px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  letter-spacing: .1em;
  margin-bottom: 28px;
}

/* ボタン（白） */
.ks-btn-wrap {
  text-align: center;
  margin: 60px 0;
}
.btn-ks-white {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: #111;
  font-size: 24px;
  font-weight: 700;
  padding: 1rem 3rem;
  border-radius: 50px;
  transition: all .2s;
	text-decoration: none;
  animation: btn1-updown 1s ease-in-out infinite;	
}
.btn-ks-white i { color: #e60000; font-size: 22px; }
.btn-ks-white:hover {
  background: #eee;
  transform: translateY(-2px);
}

/* 成長するコンテンツ */
.ks-contents-wrap {
  text-align: center;
  margin-bottom: 40px;
}
.ks-contents-title {
  font-size: 45px;
  font-weight: 700;
  color: #ffce00;
  margin-bottom: 14px;
}
.ks-contents-line {
  height: 2px;
  background: #ffffff;
  margin: 30px auto; /* autoで中央揃え */
  width: 70%;        /* ← この数値で長さを調整 */
}
.ks-contents-desc {
  font-size: 22px;
  color: #fff;
  line-height: 1.8;
}

/* 特典リスト（2列） */
.ks-tokuten-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 40px;	
  margin-bottom: 40px;
}
.ks-tokuten-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid #fff;
  border-radius: 50px;
  padding: 14px 20px;
}
.ks-tokuten-num {
  width: 60px;
  height: 60px;
  background: #e60000;
  color: #fff;
  font-size: 32px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Oswald', sans-serif;
}
.ks-tokuten-num.bonus {
  background: transparent;
  border: 2px solid #fff;
  font-size: 18px;
  width: 36px;
  height: 36px;
}
.ks-tokuten-txt {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}

/* ボーナス2つ並び（6・7） */
.ks-tokuten-bonus {
  flex-direction: column;
  align-items: flex-start;
  border-radius: 20px;
  gap: 5px;
	border: none;
}
.ks-bonus-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ks-limited {
  font-size: 11px;
  background: #e8221b;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}


/* 料金 */
.ks-price-wrap {
  text-align: center;
  margin-bottom: 28px;
}
.ks-price {
  font-size: 14px;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
}
.ks-price-note {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  line-height: 1.7;
}

/* フッターリンク */
.ks-footer-wrap {
  text-align: center;
  padding-top: 24px;
}
.ks-copyright {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin-bottom: 0px;
}
.ks-footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ks-footer-links a {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  transition: color .15s;
}
.ks-footer-links a:hover { color: #fff; }
.ks-footer-links span {
  color: rgba(255,255,255,.3);
}

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  .ks-catchcopy { font-size: 28px; }
  .btn-ks-white { font-size: 22px; padding: .9rem 1rem; }
  .ks-nyukai-title span { width: 52px; height: 52px; font-size: 22px; }
  .ks-free-title span { width: 58px; height: 58px; font-size: 26px; }
  .ks-free-label { font-size: 22px; }

	.ks-contents-title {
	  font-size: 32px;
		line-height: 1.5;
	}
	
	.ks-contents-line {
	  margin: 20px auto; /* autoで中央揃え */
	  width: 100%;        /* ← この数値で長さを調整 */
	}
	.ks-contents-desc {
	  font-size: 18px;
	}
	
  /* 特典リスト：スマホも2列キープ */
  .ks-tokuten-grid {
    grid-template-columns: 1fr; /* 1列に */
    gap: 8px;	  
  }
  .ks-tokuten-item {
    padding: 12px 14px;
    border-radius: 50px;
	  gap: 20px;
  }

.ks-limited {
  font-size: 14px;
}

  .ks-tokuten-num {
    width: 60px;
    height: 60px;
    font-size:35px;
  }
  .ks-tokuten-txt { font-size: 22px; }
  .ks-obi-text p:last-child { font-size: 22px; }
  .ks-obi-text em { font-size: 34px; }
}


/* ===== 見出しサイズ（PC） ===== */
.h-xl  { font-size: 71pt; line-height: 1.2; }
.h-m   { font-size: 36pt; line-height: 1.4; }
.h-s   { font-size: 24pt; line-height: 41pt; }
.h-s-br{ font-size: 24pt; line-height: 57pt; }

.h-l {
	font-size: 45pt;
	line-height: 1.3; 
	letter-spacing: 0.2em;
  text-align: center; /* ← これを追加 */
  display: block;     /* ← これも確認 */
}

.chuui{
	padding-top: 50px;
	  text-align: center; /* ← これを追加 */
  display: block;     /* ← これも確認 */
}
/* ===== 本文サイズ（PC） ===== */
.t-xl  { font-size: 32pt; line-height: 1.6; }
.t-l   { font-size: 26pt; line-height: 1.6; }
.t-m   { font-size: 18pt; line-height: 1.6; }
.t-s   { font-size: 16pt; line-height: 28pt; }
.t-s-br{ font-size: 16pt; line-height: 36pt; }

.oswald-en { font-family: 'Oswald', sans-serif; font-size: 73pt; }


/* スマホのみ有効（PCでは非表示） */
.sp {
  display: none;
}

/* パソコンのみ有効（スマホでは非表示） */
.pc {
  display: block;
}

/* スマホ */
@media (max-width: 768px) {
.sp {
    display: block; /* スマホで表示 */
  }
.pc {
    display: none;  /* PCで非表示 */
  }
}


.center img {
  display: block;
  margin: 0 auto;
}

/* ===== カラム ===== */
.col2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* ===== 画像 ===== */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-s    { max-width: 300px; }
.img-m    { max-width: 500px; }
.img-l    { max-width: 800px; }
.img-full { max-width: 100%; }

/* ===== ボタン Amazon ===== */

.btn1 {
  display: inline-block;
  padding: 15px 50px;
  background-color: #ffce00;
  color: #000000;
  text-decoration: none;
  font-size: 25pt;
  border-bottom: solid 15px #ff9b00;
  border-radius: 3px;	
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  animation: btn1-updown 1.5s ease-in-out infinite;
}
.btn1:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

/* ===== ボタンLINE ===== */

.btn-line {
  display: inline-block;
  padding: 15px 50px;
  background-color: #00ce00;
  color: #fff;
  text-decoration: none;
  font-size: 25pt;
  border-bottom: solid 15px #008500;
  border-radius: 3px;	
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  animation: btn1-updown 1s ease-in-out infinite;
}
.btn-line:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

@media (max-width: 768px) {

.btn-line {
  padding: 15px 25px;
  font-size: 18pt;
}
}


.btn2 {
  display: inline-block;
  padding: 20px 60px;
  background-color: #000000;
  color: #ffffff;
  text-decoration: none;
  font-size: 20pt;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: none;
  animation: btn2-scale 1.5s ease-in-out infinite;
}

/* ===== アニメーション ===== */

/* 1）下から上に移動（スクロール連動） */
.anim-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.anim-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 2）右から左に移動（スクロール連動） */
.anim-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.anim-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 3）ボタン1：上下に動く */
@keyframes btn1-updown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* 4）ボタン2：大きくなったり小さくなる */
@keyframes btn2-scale {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* ===== 追尾ボタン（スマホ） ===== */
.sticky-btn {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding: 12px 20px;
  background-color: #e60000;
  text-align: center;
}

.sticky-btn a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  font-size: 16pt;
  font-weight: bold;
}

/* ===== SNSシェアボタン ===== */
.sns-share {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.sns-share a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

.share-x        { background-color: #000000; }
.share-line     { background-color: #06c755; }
.share-facebook { background-color: #1877f2; }

/* ===== スマホ（768px以下） ===== */
@media (max-width: 768px) {

  .inner {
    padding: 0 20px;
  }

  /* 見出しサイズ（スマホ） */
  .h-xl  { font-size: 32pt; }
  .h-l   { font-size: 28pt; }
  .h-m   { font-size: 18pt; }
  .h-s   { font-size: 16pt; line-height: 28pt; }
  .h-s-br{ font-size: 16pt; line-height: 36pt; }

  /* 本文サイズ（スマホ） */
  .t-xl  { font-size: 32pt; }
  .t-l   { font-size: 26pt; }
  .t-m   { font-size: 18pt; }
  .t-s   { font-size: 16pt; line-height: 28pt; }
  .t-s-br{ font-size: 16pt; line-height: 36pt; }

  .oswald-en { font-size: 48pt; }

  /* 2列→1列 */
  .col2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* ボタン */
  .btn1, .btn2 {
    padding: 10px 20px;
  font-size: 20pt;		  
	  
  }
  .btn1 {
	  margin: 10px 0px 30px;
  }
	

  /* 追尾ボタン表示 */
  .sticky-btn {
    display: block;
  }

}


/* タイマーバッジ */

/* セクションにrelativeが必要 */
/* timer-sectionにrelativeを確保 */
.timer-section {
  position: relative;
  overflow: visible; /* はみ出しOK */
}

/* 人物写真：右側に大きく配置 */
.timer-person {
  position: absolute;
  right: -25px;      /* 右端（マイナスにするとセクション外にはみ出す） */
  bottom: 0;
  width: 280px;      /* ボタンと同じくらいの幅に調整 */
  z-index: 0;
  pointer-events: none;
}
.timer-person img {
  width: 100%;
  height: auto;
  display: block;
}

.timer-btm{
	text-align: center;
  position: relative;
  z-index: 1;
	font-size:20px;
	padding-bottom: 20px;
	line-height: 1.5;
}


/* レスポンシブ（スマホ） */
@media (max-width: 768px) {
.timer-person {
  position: absolute;
  right: 0;
  width: 150px; 
}
.timer .inner{
	padding:10px 0px 0px 10px;
}

.timer-btm{
	text-align: left;
	padding-left: 10px;
	font-size:18px;	
	font-weight: bold;
}
}
/* タイマーコンテンツは前面に */
.timer-content {
  position: relative;
  z-index: 1;        /* 人物より前面 */
  text-align: center;
  padding-left: 0;
  padding-right: 160px; /* 右の余白を増やすと相対的に左に寄る */
  padding-bottom: 15px;
  padding-top: 15px;	
}

.timer-time-badge {
  display: inline-block;
  color: #000000;
  font-size: 20px;
  font-weight: 700;
}

/* カウントダウン行 */
.cd-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 数字ボックス */
.cd-box {
  background: #e60000;
  border-radius: 5px;
  padding: 8px 16px;
  min-width: 68px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cd-num {
  font-family: 'Oswald', sans-serif;
  font-size: 72px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  display: block;
}
.cd-lbl {
  font-size: 18px;
  color: #ffffff;
  margin-top: 1px;
  display: block;
	font-weight: bold;
	letter-spacing: 5px;
}

/* コロン区切り */
.cd-sep {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  color: #e8221b;
  font-weight: 700;
  padding-bottom: 10px;
}

/* サブテキスト */
.timer-sub {
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
}

/* レスポンシブ（スマホ） */
@media (max-width: 768px) {
.timer-content {
  text-align: left;
	padding: 0 10px;
}
  .cd-row {
    padding: 8px 0px;
    gap: 5px;
  }
  .cd-box {
    min-width: 60px;
    padding: 10px 0px;
  }
  .cd-num {
    font-size: 40px;
  }
	
.cd-lbl {
  font-size: 14px;
  }	
  .cd-sep {
    font-size: 22px;
  }
  .timer-time-badge {
    font-size:22px;
    padding: 0rem 0rem;
  }
}



/* 紙吹雪のラッパー */
.confetti-wrap {
  position: absolute;
  inset: 0; /* top:0 left:0 right:0 bottom:0 と同じ */
  pointer-events: none; /* クリックを邪魔しない */
  overflow: hidden;
  z-index: 0;
}

/* タイマー内のコンテンツは紙吹雪より前面に */
.timer > *:not(.confetti-wrap) {
  position: relative;
  z-index: 1;
}



/* 紙吹雪の1ピース */
.confetti-piece {
  position: absolute;
  border-radius: 2px;
  pointer-events: none;
}

/* 紙吹雪のアニメーション */
@keyframes confetti-fly {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
    opacity: 0;
  }
}

/* レスポンシブ：スマホでは少し少なめに（JSで制御） */
@media (max-width: 768px) {
  .timer-section {
    padding: 0px 0px;
  }
}