@charset "UTF-8";
/* CSS Document */

body {
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  color: #333;
  margin: 0;
  padding: 20px;
}

img {
    max-width: 90%;
    height: auto;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}

/* 公式LINEに登録ボタンの設定　緑ボタン　*/
.botan {
    position: relative;
    max-width: 900px;
    text-align: center;
    margin: auto;
}

.botan img {
    width: 100%;
    height: auto;
    display: block;
}

.text-overlay {
    position: absolute;
    bottom: 10%;
    left: 5%;
    right: 5%;
    color: white;
    padding: 10px;
    max-width: 800px;
    font-size: 30px;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
    word-break: break-word;
    line-height: 1;
}

/*  在宅ワークを始めた人たちの実際の声の画像　  */
.meiban {
    max-width: 1000px;
    box-shadow: none;
    text-align: center;
    margin: 0 auto 20 auto;
    padding-bottom: 30px;
}


/* 在宅ワークを始めた人たち〜　3人分のブロック　*/
.container {
    max-width: 1000px;
    margin: 10px auto;
    background-color: #F6C3E4;
    padding-bottom: 20px;
    padding-top: 20px;
    border-radius: 12px;
    
}

.card {
    width: 800px;
    max-width: 80%;
    margin: 0px auto;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.image-section img, 
.profile-image img, 
.photo-gallery img { 
    width: 100%; height: auto; 
    border-radius: 8px; 
    object-fit: cover; 
}

.image-section {
    width: 300px;
    height: auto;
    object-fit: cover;
}

.image-section img {
    width: 300px;
    height: 250px;
    object-fit: cover;
}

/* テキスト　*/
.profele {
    width: 300px;
    height: auto;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 0px auto 30px auto;
}

.text-section {
    flex: 1;
    padding-top: 10px;
    max-width: 800px;
}

p {
    line-height: 1.8;
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.highlight {
  color: #5d3fd3;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  
}

.emphasis {
  color: #d1325c;
  font-weight: bold;
}

/*  豪華11大特典画像　　*/
.tokuten {
    max-width: 600px;
}

/*  書籍の紹介　*/
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1000px;
    margin: auto;
    background: rgba(255,255,227,1.00);
}

.card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-book {
    width: 400px;
    max-width: 80%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background-color: #fff;
    border-radius: 12px;
    margin: 0 auto;
 }

.card-book p {
    padding: 0px 10px;
}

.card-book img {
    max-width: 150px;
    border-radius: 0;
}

.book-line {
    width: 250px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    padding-top: 20px;
}

.card img {
  width: 60%;
  border-radius: 8px;
  margin-bottom: 12px;
}


.card p {
    font-size: 16px;
    line-height: 1.7;
    text-align: left;
    margin-bottom: 0px;

}

.text-a p {
    width: 280px;
    max-width: 90%;
    font-size: 18px;
    color: rgba(246,47,109,1.00);
    margin-bottom: 40px;
    padding-top: 20px;
    text-align: center;
}


/* 講師紹介ページ　*/
.backbace {
    max-width: 1000px;
    padding: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: rgba(255,255,227,1.00);
}

/* 講師プロフィール画像　*/
.kousi {
    max-width: 100%;
    box-shadow: none;
}


/*　ときあい表示指示　*/
.font {
    font-size: 30px;
    padding-left: 20px;
    font-weight: bold;
}

/*　実績紹介欄の指示　*/
.profile-container {
  max-width: 900px;
  margin: 0px auto;
  padding: 10px;
}


.profile-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.profile-image {
  flex: 1 1 300px;
  max-width: 100%;
}

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

/*　講師紹介文の指示　*/
.profile-text {
      width: 500px;
      flex: 2 1 300px;
      margin: 0 40px;
      padding-top: 30px;
}

.profile-text p {
    margin-bottom: 12px;
    text-align: center;
}

/*　コメント文赤の太文字　*/
.emphasis {
    color: #d6006e;
    font-weight: bold;
}

/*　体験者のコメント青の太文字　*/
.highlight {
  color: #5d3fd3;
  font-weight: bold;
}

/*　全体集合写真の枠指示　*/
.photo-gallery {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

/*　全体集合写真画像の指示　*/
.photo-gallery img {
  width: 100%;
  max-width: 900px;
  height: auto;
  border-radius: 8px;
  box-shadow: none;
}


/*　豪華11大特典書籍紹介画像　*/
.main-image {
  max-width: 1000px;
  background-color: #fff;
  margin: 20 auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto; /* 画面の高さに合わせる　*/
}


/* 公式ライン入力フォーム　*/
.form-box { 
    max-width: 400px; 
    margin: 0 auto; 
    background: #f9f9f9; 
    padding: 2em; 
    border-radius: 8px; 
    width: 100%; 
    margin-bottom: 1em; 
    border: 1px solid #ccc;
}

.sabmid {
    background-color: #28a745; 
    color: white; 
    padding: 1em; 
    width: 100%; 
    border: none; 
    border-radius: 4px;
    font-size: 1em;
}

.buttn  { 
    display: block; 
    margin-top: 1em; 
    color: #666; 
}

/*　リンク先に飛んで公式LINE登録ページの指示　*/
body {
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  margin: 0;
  padding: 20px;
  color: #333;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

.main_1 img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* フォームのレイアウト調整 */
.form-box {
  max-width: 400px;
  margin: 0 auto;
  background: #f9f9f9;
  padding: 2em;
  border-radius: 8px;
  border: 1px solid #ccc;
}

input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 1em;
  margin-bottom: 1em;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 1em;
}

button {
  background-color: #28a745;
  color: white;
  padding: 1em;
  width: 100%;
  border: none;
  border-radius: 4px;
  font-size: 1em;
}


/*   footer   */
footer {
    background-color: cornflowerblue;
    max-width: 100%;
    height: auto;
}


/*  レスポンシブ対応指示  */

/* ===== Enhanced Responsive Rules ===== */
@media screen and (max-width: 600px) {

/*　体験者3人の白背景　*/
  .card {
       max-width: 450px; 
       flex-direction: column;
       align-items: center;
  }
    
/*　特典書籍の紹介欄　*/  
  .card-book {
        max-width: 550px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
/*　豪華11大特典画像　*/
    .tokuten {
        max-width: 90%;
    }

/*　顔画像　*/      
  .image-section,
  .image-section1,
  .profile-image {
       width: 100%;
       text-align: center;
  }

/*　体験者の紹介文　講師紹介文　*/  
  .text-section,
  .profile-text {
       width: 100%;
       padding: 0px;
       margin: 0px;
  }
 
/* 講師紹介文の指示　*/    
   .profile-text p {
       text-align: center;
  }

/*　豪華11大特典画像の指示　*/ 
  .main-image {
     width: 100%;
     height: auto;
  }

/*　緑ボタン　*/ 
  .text-overlay {
      max-width: 100%;
      font-size: 20px;
      margin: 0 auto 10 auto;
      
    }    
    
}

/*　在宅ワークを始めた人たち〜　指示　*/
    .meiban {
       max-width: 100%;
       text-align: center;
       margin: 10 auto;
  } 

/* ===== Enhanced Tablet Responsive Rules ===== */
@media screen and (min-width: 601px) and (max-width: 960px) {
/*　体験者3人の白背景　*/  
　.card {
    flex-direction: column;
    align-items: center;
  }

/*　顔画像　*/    
  .image-section,
  .image-section1,
  .profile-image {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
  }

/*　体験者の紹介文　講師紹介文　*/    
  .text-section,
  .profile-text {
    width: 100%;
    padding: 0;
    margin: 0px auto;
    text-align: center;
  }

/*　トップ画像　*/
  .main-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0px auto;
  }

/*　背景の指示　*/
  .container,
  .backbace,
  .profile-container {
    padding: 20px;
  }

/*　体験者の名前指示　*/    
  .profele {
    width: 400px;
    font-size: 1.5rem;
  }
    
/*　緑ボタン内の文字　*/    
  .text-overlay {
        font-size: 2rem;
    }
    
  .meiban {
        max-width: 800px;
        text-align: center;
        margin: 10px auto;
    }
}


/* スマホ対応 */

@media (max-width: 360px) {
  body {
    padding: 1em;
  }

    .form-box {
    padding: 1.5em;
  }

/*　緑ボタン内の文字　*/   
    .text-overlay {
        width: 400px;
        max-width: 70%;
        font-size: 0.5rem;
        margin: 0px auto;
  }

/* 在宅ワークを始めた人たちの実際の声画像　*/
    .meiban {
        max-width: 100%;
        margin: 0 auto;
    }
    
/*　体験者3人の白背景　*/    
    .card {
        width: 350px;
        max-width: 80%;
        margin: 0px auto;
}
/*　体験者3人の顔画像　*/      
    .card img {
        width: 200px;
        max-width: 90%;
        margin: 0 auto;
        text-align: center;
    }
  /*  体験者3人の名前　*/  
    .profele {
        width: 200px;
        max-width: 100%;
        font-size: 18px;
    }
    
/*  体験者のコメント青文字　*/
    .highlight {
        font-size: 1rem;
    }
    
/*　書籍紹介欄の指示　*/ 
    .card-book {
        width: 200px;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .card-book img {
        max-width: 70%;
    }
    
    .book-line {
        width: 200px;
        max-width: 90%;
        margin: 0 auto;
        padding-bottom: 20px;
    }
    
/*  講師紹介欄　　*/    
    .kousi {
        width: 300px;
        max-width: 100%;
        height: auto;
        margin: 0px auto;
    }
       
    .font {
        width: 200px;
        max-width: 100%;
        font-size: 20px;
        font-weight: bold;
        margin: 0px auto;
 }
    
    .profile-text {
        width: 300px;
        max-width: 100%;
        margin: 0px auto;
    }
    
    .text-a p {
        width: 250px;
        max-width: 100%;
        height: auto;
        
    }
    
    .profile-text p {
        padding: 0px 10px;
        
    }

    .profile-content img {
        margin: 0px auto;
    }
    
    .photo-gallery {
        margin-top: 0px;
    }
 
/*　豪華11大特典画像　*/    
    .tokuten {
        width: 300px;
        max-width: 90%;
        margin: auto;
    }
        
}

 button {
    font-size: 1em;
    padding: 0.9em;
  }

/*　緑ボタンを押してLINEに登録するページ　*/
/* レスポンシブ対応 */
@media (max-width: 480px) {
  .form-box h1 {
    font-size: 1.2rem;
  }

  .form-box p,
  .form-box small {
    font-size: 0.9rem;
  }

  input[type="text"],
  input[type="email"],
  button {
    font-size: 1rem;
    padding: 0.7em;
  }

  .text-overlay {
    font-size: 0.9rem;
  }
    
  .card {
      width: 350px;
      max-width: 80%;
      margin: 0 auto;
    }
}