/* スマホファーストベースのCSS */

  html {
    scroll-behavior: smooth;
  }

body {
  font-family: sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background: white;
  font-size: 16px;
}

header img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
}

main {
  padding: 0;
}

h1, h2, h3 {
  color: #333;
  margin-top: 0;
  text-align: center;
  font-family: "新ゴ B";
}

h2 {
  font-size: 1.3em;
  padding: 1em;
}

h3 {
  text-align: initial;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
}
.grey{
  color:#666;
}
.blue{
  color:#0378A6;
background-color: aliceblue;
}
.blue2{
  color:#fff;
background-color: #00A0E9;
}
.black{
	background-color: #EEE;
}
.card-heading .blue{
	background-color: #FFFBAD;
}
.pink{
  color:#DC4278;
}

/* ユーティリティ画像サイズクラス */
.img-quarter {
  width: 25%;
  height: auto;
  display: block;
  margin: 1em auto;
}

.img-half {
  width: 50%;
  height: auto;
  display: block;
  margin: 1em auto;
}

.img-three-quarter {
  width: 75%;
  height: auto;
  display: block;
  margin: 1em auto;
}

.img-full {
  width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
}

/* 汎用内側余白クラス */
.inner-padding {
  padding: 0 1em;
}

/* 共通セクションスタイル */
.section {
  padding: 1em;
  margin-bottom: 0;
}

.section.light {
  background-color: #f0f0f0;
}

.section.yellow {
  background-color: #FEFFBF;
  background-image: url(img/stripe01.png);
}

.section.blue {
  background-color: #0378A6;
  background-image: url(img/stripe02.png);
  color: #FFFFFF;
}
.section.blue h2,
.section.blue h3 {
  color: #FFFFFF;
}

/* プレゼント特典セクション専用：余白なし */
.section.bonus {
  padding: 0;
  margin: 0;
}

/* プレゼント特典の中で内側に余白を持たせる部分 */
.bonus-inner {
  padding: 0 1em;
}

/* 共通見出しスタイル */


.book-info h3 {
  background-color: #FCDFE1;
  color: #DC4278;
  /*color: #00A0E9;*/
    text-align: left;
  padding: 1em;
}

/* Amazonボタン */
.button-wrap {
  text-align: center;
  margin: 0 0 1em;
}

.button-wrap img {
  width: 80%;
  max-width: 640px;
  height: auto;
  margin: auto;
  transition: transform 0.3s ease;
}

.button-wrap img:hover {
  transform: scale(1.1);
}

/* ご挨拶セクション */
/* プロフィールと書籍紹介（モバイル基準） */
.profile-container,
.book-container,
.greeting-container {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.profile-photo,
.book-image,
.greeting-photo {
  max-width: 100%;
}

.profile-photo img,
.book-image img,
.greeting-photo img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.profile-text,
.book-info {
  flex: 2 1 400px;
}

.profile-text ul,
.book-info ul {
  padding-left: 0;
}

.profile-text ul li,
.book-info ul li {
  margin-bottom: 0.5em;
  list-style-type: disc;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

.profile-text ul li i.material-symbols-outlined {
  color: #FFFF00;
  font-size: 1.2rem;
  line-height: 1.5;
}
.book-info ul li i.material-symbols-outlined {
  color: #D90467;
  font-size: 1.2rem;
  line-height: 1.5;
}

/* 注文スクショ画像 */
.order-sample {
  text-align: center;
  margin: 1.5em 0;
}

.order-sample img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 手順 */
.step {
  margin-bottom: 1.5em;
  max-width: 960px;
  margin: auto;
}
.step-label {
  display: inline-block;
  background: #8AD9FF;
  color: #00A0E9;
    font-family: "G2サンセリフ-B";
  border-radius: 5px 5px 0 0;
  padding: 7px 20px;
  font-size: 1.2em;
  line-height: 1;
  margin: 0; /* h3との余白調整 */
}
.step h3 {
background-color: #00A0E9;
color: #FFF;
padding: 1em;
text-align: center;
}

.book-icon {
  color: #F170A3;
  font-size: 1.7em; /* 通常の2倍相当 */
  vertical-align: middle;
  margin: 0 0.3em;
}
footer {
  text-align: center;
  font-size: 0.9em;
  color: #666;
  padding: 1em 0;
}
/* --- フォーム全体のスタイル --- */
form {
  background: #fff;
  padding: 2em;
  border-radius: 8px;
  max-width: 800px;
  margin: 2em auto;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
	margin: 2em;
}

/* --- ラベル・バッジ --- */
label.font-weight-bold {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5em;
  color: #333;
}

.badge-danger {
  background-color: #DC3545;
  color: #fff;
  padding: 0.2em 0.5em;
  font-size: 0.75em;
  border-radius: 3px;
  margin-left: 0.5em;
}

/* --- 入力フィールド --- */
.form-control {
  width: 100%;
  padding: 0.75em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

/* --- ラジオボタン --- */
.custom-control {
  margin-bottom: 0.5em;
}

.custom-control-input {
  margin-right: 0.5em;
}

.custom-control-label {
  font-size: 1em;
  color: #333;
}

/* --- 送信ボタン --- */
button[type="submit"] {
  background-color: #00A0E9;
  color: white;
  padding: 0.8em 1.5em;
  font-size: 1.1em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  width: 100%;
}

button[type="submit"]:hover {
  background-color: #007bb5;
}

.note-small {
  font-size: 0.75em;
  color: #999;
  text-align: right;
  margin: 0.5em auto;
width: 100%;
	max-width: 1200px;
	
}

/* --- PC用調整 --- */
@media (min-width: 768px) {
  form {
    padding: 2em;
  }
}
/* --- フォーム全体のスタイルここまで --- */
/* PCレイアウト用 */
@media (min-width: 768px) {
h2{
  font-size: 2em;
}
  .center-pc {
    text-align: center;
  }

  .center-pc img {
    display: inline-block;
  }

  main {
    max-width: 1200px;
    margin: auto;
  }

  .greeting-container img {
    margin-bottom: 0;
  }

  .greeting-container p {
    max-width: 400px;
  }

  .profile-container,
  .book-container,
    .greeting-container  {
    flex-direction: row;
    align-items: flex-start;
    max-width: 960px;
    margin: auto;
  }

  .profile-text,
  .book-info {
    max-width: 100%;
  }
    .profile-photo,
      .book-image,
      .greeting-photo img {
      max-width: 100%;
  max-width: 250px;
  }
  body {
    font-size: 17px;
  }
  .steps img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
	
  .button-wrap.pc_pb2em {
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 1em; /* ボタンの間隔 */
    flex-wrap: wrap; /* 万一画面が狭くても折り返し対応 */
  }

  .button-wrap.pc_pb2em a {
    width: 480px; /* 固定幅 */
    display: block;
  }

  .button-wrap.pc_pb2em img {
    width: 100%;
    height: auto;
    display: block;
  }
	
  /* PCのみ：header背景指定（画像に高さを合わせる） */
  .header-bg {
    background-image: url("img/header_bg01.png");
    background-repeat: repeat-x;
    background-position: top;
    background-size: auto 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
.pc-img-40 {
  width: 40%;
  height: auto;
  display: block;
  margin: 0 1em 1em;
}
}