@media screen and (min-width: 771px) {
/*
 * TOPページイメージ
 */

 .top-flame{
    height:700px;
    position: relative;
    overflow-y: hidden;
 }
 
 .top-img {
    width:100vw;
    height:100%;
    z-index: -10;
    object-fit: cover;
    max-width: 100%;
    vertical-align: top;
 }

 .top-title {
    width:100%;
    position: absolute;
    top: 350px;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    padding: 10px;
    font-size: 50px;
    text-align: center;
    font-weight: 900;
 }

 .top-sub-title {
    width:100%;
    position: absolute;
    top: 400px;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    padding: 10px;
    font-size: 20px;
    text-align: center;
    font-weight: 900;
 }

/*
 * body
 */

  .flex-container {
    display: flex;
    flex-wrap: wrap; /* 必要に応じて折り返し */
    gap: 10px; /* 列間の余白 */
  }

  .flex-item {
    flex: 1; /* 各列を均等に分ける */
    min-width: 200px; /* 最小幅を設定 */
    text-align: center;
    padding: 20px;
  }

  body {
    background-color: #ebeddf; 
  }

  .body-flame {
    width:1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .normal-font {
    font-size: 20px;
    font-weight: 600;
  }

  .large-font {
    font-size: 30px;
    font-weight: 600;
  }

  .annotation-font {
    font-size: 12px;
  }

/*
 * こんなお悩みありませんか？
 */

  .onayami-main-flame {
    width:100%;
    height:800px;
    display: flex;
    margin-top:50px;
    justify-content: center;
  }

  .onayami-left-flame {
    width:60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-items: flex-start;
  }

  .onayami-title {
    font-size:30px;
    font-weight: 600;
  }

  .onayami-list-flame {
    margin-top: 30px;
    background-color: white;
    width:100%;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    align-items: flex-start;
  }

  .onayami-list {
    font-size: 20px;
    font-weight: 600;
    text-align: left;
  }

  .onyami-right-flame {
    width:40%;
    height:100%;
    position: relative;
  }

  .onayami-img {
    object-fit:cover;
    width:100%
  }

  .onayami-absolute-flame {
    background-color: white;
    width:90%; 
    position: absolute; 
    top: 350px; 
    left: 50%; 
    transform: translate(-50%, 200%);
    color: black;
    padding: 10px;
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }

  .onayami-bottom-flame {
    height:250px;
    width:100%;
    justify-content: center;
    display: flex;
  }


  .onayami-shadow-flame {
    background-color: white;
    width:100%;
    height:150px;
    display: flex;
    margin-top:50px;
    justify-content: center;
    box-shadow:
        0px 5px 5px -2px rgba(0, 0, 0, 0.5),
        0px 15px 5px -5px rgba(0, 0, 0, 0.3),
        0px 25px 5px -8px rgba(0, 0, 0, 0.2),
        0px 35px 5px -15px rgba(0, 0, 0, 0.1),
        0px 45px 5px -20px rgba(0, 0, 0, 0.05)
  }

  .onayami-font {
    font-size: 25px;
    font-weight: 600;
    margin: auto;
  }

  .onayami-red-font {
    font-size: 30px;
    color: red;
  }

  .onayami-gray-flame {
    background-color: #a6a6a6;
    width:100%;
    height:420px;
    display: flex;
    margin-top:50px;
    justify-content: center;
    padding: 10px;
  }

  .onayami-gray-sub-flame {
    width:25%;
    padding:5px;
    position: relative;
  }

  .onayami-gray-img {
    object-fit: cover;
    width:100%
  }

  .onayami-yellow-font {
    width:100%;
    padding-top: 10px;
    font-weight: 900;
    color:#f9cb26
  }

/*
 * 偏った食事方法
 */

 .diet-flame {
    width:100%;
    height:650px;
    display: flex;
    margin-top:50px;
 }

 .diet-title {
    font-size:30px;
    font-weight: 600;
    text-align: start;
    width:100%;
    height:45px
 }

 .diet-sub-title {
  width:100%;
  text-align: start;
 }

 .diet-img-flame {
  width:100%;
  height:500px;
  position: relative;
 }

 .diet-img {
  height:100%;
  position: relative;
  z-index: 10;
 }

 .diet-small-gray-flame {
  background-color: #d9d9d9;
  width:280px; 
  height:100px;
  position: absolute; 
  transform: translate(0%, 20%);
  color: black;
  padding: 10px;
  font-size: 30px;
  text-align: center;
  font-weight: 600;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  text-align: center;
  display: flex;
 }

/*
 * 根本原因にアプローチ
 */

  .causal-main-flame {
    width:100%;
    height:950px;
    display: flex;
    margin-top:50px;
    background-color: white;
    padding:30px;
  }
 
  .causal-title {
    font-size:30px;
    font-weight: 600;
    text-align: start;
    width:100%;
    height:45px
  }

  .causal-sub-flame {
    width:50%;
    height:350px;
    position: relative;
  }
 
  .cause-bottom-flame {
    width:100%;
    height:580px;
    display: flex;
    padding:30px;
    align-items: center;
    display: flex; 
  }

  .cause-bottom-left-flame {
    width:50%;
    height:500px;
    position: relative;
    align-items: center;
    display: flex;
  }

  .cause-bottom-right-flame {
    width:50%;
    height:500px;
    position: relative;
    align-items: center;
    display: flex;
  }

/*
 * 理解すべき知識
 */

  .knowledge-main-flame {
    width:100%;
    height:1100px;
    margin-top:50px;
    background-color: white;
    padding:30px
  }

  .knowledge-title {
    font-size:30px;
    font-weight: 600;
    text-align: start;
    width:100%;
    height:45px
  }

  .knowladge-row-flame {
    width:100%;
    height:300px;
    display: flex;
  }

  .knowladge-left-flame {
    width:70%;
    height:300px;
    position: relative;
  }

  .knowladge-left-square {
    width:100%;
    height:180px;
    display: flex;
    border: 2px solid;
    align-items: center;
  }

  .knowladge-left-list {
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    align-items: center;
  }

  .knowladge-green-font {
    font-size: 30px;
    font-weight: 600;
    color:#00bf63;
    margin-left: 50px;
    margin-top:20px;
    display: flex;
  }

  .knowladge-right-flame {
    position: relative;
    width:30%;
    height:300px;
    display: flex;
  }

  .knowladge-right-img {
    height:100%;
    object-fit: cover;
  }

  .knowladge-font {
    font-size: 24px;
    font-weight: 600;
  }

  .knowladge-bottom-left-flame {
    width:40%;
    height:250px;
    position: relative;
    display: flex; 
    align-items: center;
  }

  .knowladge-bottom-left-square {
    width:100%;
    height:220px;
    display: flex;
    border: 2px solid;
    align-items: center;
  }

  .knowladge-green-triangle-flame {
    width:18%;
    height:250px;
    padding-right: 30px;
    align-items: center;
    display: flex;
    justify-content: right;
  }

  .knowladge-green-triangle {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-bottom: 70px solid transparent;
    border-left: 100px solid #00bf63;
  }

  
  .knowladge-bottom-right-square {
    width:40%;
    height:250px;
    position: relative;
    display: flex;
    align-items: center;
  }

  .knowladge-big-font {
    font-size: 30px;
    font-weight: 600;
  }

  .knowladge-matome-flame {
    width:100%; 
    height:150px;
    position: relative;
    display: flex;
    align-items: center;
  }

  .knowladge-matome-font {
    font-weight: 600;
    font-size:24px
  }

  .knowladge-matome-big-font {
    font-size:35px
  }

/*
 * 耐糖能とは
 */

  .glucose-main-flame {
    width:100%;
    margin-top:50px;
    background-color: white;
    padding:30px;
  }

  .glucose-title {
    font-size:30px;
    font-weight: 600;
    text-align: start;
    width:100%;
    height:45px
  }
  
  .glucose-sub-title-flame {
    margin: auto;
    justify-content: center;
    display: flex;
    justify-items: center;
  }

  .glucose-sub-title-green-flame {
    width:900px; 
    height:120px;
    color: black;
    padding: 10px;
    font-size: 30px;
    text-align: center;
    font-weight: 600;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    text-align: center;
    display: flex;
    border: 5px solid #00bf63;
  }

  .glucose-main-img {
    width:80%;
    margin:auto;
    margin-top:40px; 
  }

  .glucose-left-flame {
    width:45%;
    justify-items: center;
  }

  .glucose-flow-square {
    width:320px; 
    height:80px;
    color: black;
    padding: 0px;
    text-align: center;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    text-align: center;
    display: flex;
    border: 5px solid #7ed957;
  }

  .glucose-flow-triangle {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 30px solid #7ed957;
  }

  .glucose-flow-font {
    font-size: 25px;
    font-weight: 600;
  }

  .glucose-flow-small-font {
    font-size: 16px;
  }
  
  .glucose-right-flame {
    width:55%;
    align-content: center;
  }

  .glucose-right-square {
    width:90%;
    height:220px;
    position: relative;
    display: flex;
    border: 2px solid;
    align-items: center;
    justify-content: center;
  }

  .glucose-bottom-flame {
    width:100%;
    height:500px;
    margin-top:50px;
    padding:30px;
    justify-content: center;
  }

  .glucose-bottom-left-flame {
    width:50%
  }

  .glucose-bottom-right-flame {
    width:40%
  }

/*
 * 健康思考の誤解
 */
  .health-flame {
    width:100%;
    margin-top:50px;
    background-color: white;
    padding:30px;
    position:relative;
    height:800px;
  }

  .health-title {
    font-size:30px;
    font-weight: 600;
    text-align: start;
    width:100%;
    height:45px
  }

  .health-img-flame {
    position: relative;
    width:100%;
    height:400px;
    padding:10px
  }

  .health-img {
    position: absolute;
    width:65%
  }

  .health-img-font {
    transform: translate(180%, 600%);
  }

/*
 * 裏付けとなる科学的根拠
 */

 .evidence-main-flame {
  width:100%;
  margin-top:50px;
  background-color: white;
  padding:30px;
  position:relative
  }

  .evidence-title {
    font-size:30px;
    font-weight: 600;
    text-align: start;
    width:100%;
    height:45px
  }

  .evidence-left-flame {
    justify-content: center;
    display: flex;
    height:300px;
    width:50%;
  }

  .evidence-left-square {
    width:90%;
    height:300px;
    position: relative;
    display: flex;
    border: 2px solid;
    align-items: center;
    justify-content: center;
  }

  .evidence-right-flame {
    justify-content: center;
    display: block;
    height:320px;
    width:50%;
    align-items: center;
  }

  .evidence-right-square {
    width:100%;
    height:180px;
    position: relative;
    display: flex;
    border: 2px solid;
    align-items: center;
    justify-content: center;
  }

/*
 * 糖質制限で痩せた人
 */

 .glucide-main-flame {
    width:100%;
    margin-top:50px;
    background-color: white;
    padding:30px;
    position:relative
 }

 .glucide-title {
    font-size:30px;
    font-weight: 600;
    text-align: start;
    width:100%;
    height:45px
 }
  
 .glucide-sub-flame {
    display:flex;
    justify-content: center;
    width:100%
  }

  .glucide-img-flame {
    justify-content: center;
    display: flex;
    position: relative;
    height:150px;
    width:25%;
  }

  .glucide-big-font {
    text-align: center;
    font-size: 35px;
    width:100%;
    font-weight: 600;
  }

/*
 * 炭水化物（糖質）の摂り方
 */

  .carbs-main-flame {
    width:100%;
    margin-top:50px;
    background-color: white;
    padding:30px;
    position:relative
  }

  .carbs-title {
    font-size:30px;
    font-weight: 600;
    text-align: start;
    width:100%;
    height:45px
  }

  .carbs-sub-flame {
    display:flex;
    justify-content: center;
    width:100%
  }

  .carbs-img-flame {
    justify-content: center;
    display: block;
    position: relative;
    height:260px;
    width:30%; 
  }

  .carbs-img-font {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
  }

/*
 * BTKの訴求まとめ
 */

 .matome-font {
    font-size: 35px;
    width:95%;
    font-weight: 600;
    margin-top:30px;
    text-align: center;
 }

 .matome-flame {
    display:flex;
    justify-content: center;
 }

 .matome-sub-flame {
  width:25%;
  display: block;
  justify-content: center;
 }

 .matome-img-flame {
  position: relative;
  display:flex;
  align-items: center;
 }

 .matome-green-triangle-flame {
  width:5%;
  align-items: center;
  display: flex;
}

.matome-green-triangle {
  width: 0;
  height: 0;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
  border-left: 50px solid #00bf63;
  margin-top:-20px;
}

/*
 * プレミアムインナービューティーコース内容(1ヵ月コース)
 */

  .premium1-main-flame {
    display:block;
    justify-content: center;
    height:1000px;
    position: relative;
    width:100%;
    margin-top:50px;
  }

  .premium1-title-flame {
    display: flex;
    position: relative;
    height:180px;
    justify-content: center;
  }

  .premium1-title-img {
    object-fit: cover;
    height:100%
  }

  .premium-title {
    position: absolute;
    top:20px;
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    color:white
  }

  .premium1-white-flame {
    background-color: white;
    height:900px;
    margin-top:-30px;
    justify-content: center;
    display: flex;
  }

  .premium1-white-sub-flame {
    margin-top:120px;
    width:90%;
  }

  .premium1-sub-title {
    font-size:30px;
    font-weight: 600;
    text-align: start;
    width:100%;
  }

  .premium1-menu-flame {
    width:100%;
    height:130px;
    display: flex;
    margin-top: 20px;
  }

  .premium1-menu-left-flame {
    background-color: rgba(205,248,209);
    width:45%;
    height:100%;
    padding:8px;
    display: flex;
  }

  .premium-img {
    height:100%;
  }

  .premium1-menu-title {
    font-size: 24px;
    font-weight: 600;
  }

  .premium1-menu-sub-title {
    display: block;
    font-size: 16px;
    text-align: center;
  }

  .premium1-menu-center-flame {
    position: relative;
    width:3%;
    display: flex;
    align-items: center;
  }

  .premium1-menu-right-flame {
    width:50%;
    height:100%;
    border: 2px solid ;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }

  .premium-menu-font {
    font-size: 18px;
    font-weight: 600;
  }

  .premium1-price {
    height:150px;
    margin-top: 80px;
    background-image: url(../img/premium_inner_beauty/受講料背景.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    display: flex;
    justify-content: center;
  }

  .premium3-price {
    height:150px;
    background-image: url(../img/premium_inner_beauty/受講料背景.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    display: flex;
    justify-content: center;
  }

  .premium1-price-white-font {
    margin-top:60px;
    font-size:35px;
    color:white;
    font-weight: 600;
  }

  .premium1-price-yellow-font {
    margin-top:45px;
    margin-left:120px;
    font-size:50px;
    color:#f9cb26;
    font-weight: 600;
  }

  .premium-price-line-font {
    font-size:26px;
    color:white;
    text-decoration: line-through;
    margin-left: 50px;
  }

  .premium3-price-yellow-font {
    margin-top:30px;
    margin-left:120px;
    font-size:50px;
    color:#f9cb26;
    font-weight: 600;
  }

/*
 * Line友達登録
 */
  
  .line-main-flame {
    display: flex;
    height:320px;
    width:70%;
    justify-content: center;
    margin-top:50px;
    position: relative;
  }

  .line-left-flame {
    display: flex;
    position: relative;
    width:150px;
    height:120px;
  }

  .line-triangle-flame {
    display: flex;
    margin-left: -50px;
    width:80%
  }

  .line-triangle {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #06c654;
    margin-top: 50px;
  }

  .line-right-flame {
    background-color: #06c654;
    width:900px; 
    height:280px;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
    justify-content: center;
  }

  .line-white-big-font {
    color:white;
    font-weight: 600;
    font-size:30px;
    text-align: center;
    margin-top:30px
  }

  .line-flame-through-line {
    width:100%;
    height:3px;
    background-color: white;
    border-radius: 0%;
  }

  .line-btn {
    width:450px
  } 

  .line-white-font {
    color:white;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
  }

  .line-present-img {
    position: absolute;
    right:0px;
    bottom:70px;
  }


}