/* ===== 共通設定 ===== */

body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  background: #fff;
  line-height: 1.6;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 20px;
  box-sizing: border-box;
}

h1, h2, h3 {
  font-weight: bold;
  margin-bottom: 1em;
}

p {
  margin-bottom: 1em;
}

a {
  text-decoration: none;
  color: inherit;
}

.btn-primary {
  display: inline-block;
  background-color: #fff;
  color: #06C755;
  padding: .5em 1em;
  border-radius: 10px;
  font-weight: bold;
  transition: background 0.3s;
  width: 100%;
  box-sizing: border-box;
}

.btn-primary:hover {
  background-color: yellow;
  color: #06C755;
}
/* ===== Hero Section ===== */


/* Heroセクションの2カラム化 */

.hero {
  background-image: url("../img/firstview-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.hero-grid {
  display: flex;
  gap: 20px;
}

.hero .theme10, .hero .theme20 {
  flex: 1 1 48%;
  box-sizing: border-box;
}



/* theme20はLINEカラー背景 */

.hero .theme20 ,.theme20{
  background-color: #06C755;
  padding: 20px;
  text-align: left;
/* LINEのプライマリカラー */

color: #fff;
  border-radius: 20px;
  padding: 20px;
}

.hero .theme20 img {
  display: block;
}

.hero .theme20 ul {
  padding-left: 1.2em;
  margin-bottom: 1em;
}

.hero .theme20 .btn {
  font-weight: bold;
  margin-top: 1.5em;
}

.theme20 h1{
  margin: 0;
  line-height: 1.2;
}
/* === theme20 の左右分割レイアウト === */

.theme20-inner-container {
  display: flex;
  margin-top: 20px;
  flex-wrap: wrap;
}

.theme20-inner-left,
.theme20-inner-right {
  flex: 1 1 50%;
  box-sizing: border-box;
}
/* QR画像の調整 */

.theme20-inner-right img {
  width: 100%;
  max-width: 150px;
  margin-bottom: 1em;
  display: block;
}

.theme20-inner-left ul {
  padding-left: 1.2em;
  margin-bottom: 1em;
}

.theme20-inner-left .btn-primary {
  margin: 1em 0;
}
/* === SP: 1カラム切り替え === */

@media (max-width: 768px) {
  .theme20-inner-container {
    flex-direction: column;
  }

  .theme20-inner-left,
  .theme20-inner-right {
    flex: 1 1 100%;
  }
}
/* レスポンシブ対応 */
.t-center-left{text-align: center;}

@media (max-width: 900px) {
  .hero-grid {
    flex-direction: column;
  }
  .hero .theme10, .hero .theme20 {
    flex: 1 1 100%;
  }
  .t-center-left{
    text-align: left;
  }
}
/* ===== Reason Section ===== */

.reason {
  background: #fff;
  border: 4px solid red;
  border-radius: 20px;
  padding: 5%;
}

.reasons {
  list-style: disc inside;
  padding-left: 1em;
}
/* ===== Steps Section ===== */


/* resolute セクション（steps）PC2カラム / SP1カラム対応 */

.steps {
  color: #fff
}

.steps-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.steps-text,
.steps-line {
  flex: 1 1 50%;
  box-sizing: border-box;
}

.steps-line{
  border-radius: 8px;
  padding: 20px;
}

/* SP表示切り替え */

@media (max-width: 768px) {
  .steps-flex {
    flex-direction: column;
  }

  .steps-text,
  .steps-line {
    flex: 1 1 100%;
  }
}
/* ===== Products Section ===== */


.product-grid {
  display: flex;
  gap: 20px;
}

.product {
  flex: 1 1 48%;
  background: #fff;
  border-radius: 20px;
}


/* ===== Regal Section ===== */

.products-price-wrap{
  display: flex; 
  gap: 20px;
  justify-content: space-around;
}

/* ===== Regal Section ===== */

.regal{
  text-align: left;
}
.regal h5{
  background-color:#dedede; 
  padding: 2px 10px;
  margin-bottom: 10px;
}
/* ===== CTA Section ===== */
#entry{
  max-width: 500px;
}

/* ===== Footer ===== */

.footer {
  background: #eeeeee;
  text-align: center;
  font-size: 0.9em;
  padding: 20px;
}

/* ===== Responsive (SP) ===== */
@media (max-width: 1000px) {
  #entry{
    width: 100%;
  }
}


@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }

  .hero .large {
    font-size: 3rem;
  }

  .step-grid {
    flex-direction: column;
  }

  .step {
    flex: 1 1 100%;
    margin-bottom: 20px;
  }

  .product-grid {
    flex-direction: column;
  }

  .product {
    flex: 1 1 100%;
  }

  .products-price .products-price-wrap{
    flex-direction: column;
  }
}