/*1000以下
タブレット845ー431
モバイル430以下
*/

/* PC向けレイアウト1200px以上 */
@media all and (min-width: 1200px) {
  .timeline {
    width: 1200px;
}

}


/* PC向けレイアウト846px以上 */
@media all and (min-width: 846px) {

  .hamburger-menu {
    display: none;
  }
}

  /*タブレット向けレイアウト 845px以下*/
@media all and (max-width: 845px) {

  .logo {
    margin-left: 0px;
  }

  .point {
    max-width: 80%;
  }

  .container {
    text-align: center;
  }

  .header {
    text-align: center;
    width: 100%;
  }


  .hamburger-menu {
    display: flex;
  }

  .header-right {
    display: none;
  }


  .menu-btn {
    position: fixed;
    top: 0px;
    right: 0px;
    display: flex;
    height: 65px;
    width: 65px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    /*background-color: rgba(76, 79, 80, 0.7);*/
  }
  .menu-btn:hover {
    cursor: pointer;
  }
    /* 三本線の実装 */
  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
    content: "";
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
  }
  .menu-btn span:before {
    bottom: 8px;
  }
  .menu-btn span:after {
    top: 8px;
  }
  /* チェックボックスを非表示にする */
  #menu-btn-check {
    display: none;
  }
  
  #menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255,255,255,0); /*メニューオープン時は真ん中の線を透明にする*/
  }
  
  /* メニューを開いている時はハンバーガーボタンが×になる */
  #menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
  }
  #menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
  }


  /* =================
  メニュー部分の実装
  ================= */
  
  .menu-content {
    width: 80%;
    height: 100%;
    position: fixed;
    top: 0;
    /* メニューを外に出しておく */
    left: 100%;
  
    z-index: 80;
    background-color: rgba(76, 79, 80, 0.7);
    transition: all 0.5s; /*アニメーションを滑らかにする*/
  }
  .menu-content ul {
    padding: 70px 10px 0;
  }
  .menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
  }
  .menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color: #ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
  }
  
  #menu-btn-check:checked ~ .menu-content {
    left: 30%; /*メニューを画面内へ動かす*/
  }
}

/*モバイル向けレイアウトiPhone ProMax14*/
@media (max-width: 660px) {
  h1 {
    font-size: 1.6rem;
  }

  .hero {
    height: 700px;
  }

}


/*モバイル向けレイアウトiPhone ProMax14*/
@media (max-width: 430px) {
  h1 {
    font-size: 1.4rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  h3 {
    font-size: 1.2rem;
  }

  p {
    font-size: 1rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .overview p {
    font-size: 1.1rem;
  }

  .point p {
    font-size: 1rem;
  }

  .step p {
    font-size: 1.1rem;
  }

  .entry ul {
    padding: 20px;
  }

  .entry ul li {
    font-size: 1rem;
  }

}


/*モバイル向けレイアウト iPhone 12Pro*/
@media (max-width: 390px) {
  /* 幅845px以下で適用されるスタイル */

  h1 {
    font-size: 1.3rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  h3 {
    font-size: 1.2rem;
  }

  p {
    font-size: 1rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .overview p {
    font-size: 1.1rem;
  }

  .point p {
    font-size: 1rem;
  }

  .entry ul {
    padding: 20px;
  }

  .entry ul li {
    font-size: 1rem;
  }


}

@media (max-width: 357px) {
  h1 {
    font-size: 1.2rem;
  }

  .hero {
    height: 400px;
  }

}