/* =========================================================
   JETORA MOBILE FINAL
   Desktop is untouched
   ========================================================= */

@media (max-width:760px){

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    -webkit-text-size-adjust:100% !important;
  }

  main,
  section,
  header,
  footer{
    max-width:100% !important;
  }

  /* ---------- HEADER ---------- */

  .site-header{
    width:100% !important;
    height:66px !important;
    padding:0 16px !important;
  }

  .brand{
    font-size:15px !important;
  }

  .brand-mark{
    width:28px !important;
  }

  .header-actions{
    gap:10px !important;
  }

  .site-header .lang,
  .site-header .lang span{
    font-size:11px !important;
  }


  /* ---------- HERO ---------- */

  .hero{
    width:100% !important;
    min-height:620px !important;
    height:100svh !important;
  }

  .hero-content{
    left:18px !important;
    right:18px !important;
    width:auto !important;
    max-width:none !important;
    top:47% !important;
  }

  .hero h1{
    max-width:100% !important;
    font-size:clamp(44px,13vw,58px) !important;
    line-height:1.02 !important;
    letter-spacing:-.035em !important;
  }

  .hero-content > p{
    width:100% !important;
    max-width:100% !important;
    font-size:13px !important;
    line-height:1.75 !important;
  }

  .hero-buttons{
    width:100% !important;
    gap:12px !important;
  }

  .hero-buttons .button{
    max-width:100% !important;
  }


  /* ---------- TOP REQUEST FORM ---------- */

  .request-wrap{
    width:100% !important;
    padding:0 12px 44px !important;
  }

  .flight-panel{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 16px 18px !important;
    transform:translateY(-28px) !important;
  }

  .flight-tabs{
    width:100% !important;
  }

  .tab{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .flight-fields{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    padding-top:8px !important;
  }

  .flight-field,
  .flight-field:nth-of-type(n){
    grid-column:1 !important;
    width:100% !important;
    padding:16px 4px !important;
    border-right:0 !important;
    border-top:1px solid #e3e0da !important;
  }

  .flight-field:first-of-type{
    border-top:0 !important;
  }

  .flight-field input,
  .flight-field select{
    width:100% !important;
    max-width:100% !important;
    font-size:16px !important;
    line-height:1.4 !important;
  }

  .swap{
    display:none !important;
  }

  .flight-submit{
    grid-column:1 !important;
    width:100% !important;
    height:58px !important;
    margin-top:10px !important;
  }

  .flight-note{
    padding-left:4px !important;
    line-height:1.6 !important;
  }


  /* ---------- SECTIONS ---------- */

  .section{
    width:100% !important;
    padding-left:18px !important;
    padding-right:18px !important;
    padding-top:72px !important;
    padding-bottom:72px !important;
  }

  .intro-grid{
    width:100% !important;
    margin:42px auto 58px !important;
    gap:34px !important;
  }

  .intro-copy,
  .section-head,
  .manifesto-copy,
  .contact-copy,
  .route-card{
    width:100% !important;
    max-width:100% !important;
  }

  /*
   * 日本語をスマホで縦長に見せない。
   * 英語のセリフデザインは維持。
   */
  html[lang="ja"] .hero h1,
  html[lang="ja"] .display-small,
  html[lang="ja"] .manifesto h2,
  html[lang="ja"] .section-head h2,
  html[lang="ja"] .route-card h2,
  html[lang="ja"] .contact-copy h2{
    font-family:
      -apple-system,
      BlinkMacSystemFont,
      "Hiragino Sans",
      "Hiragino Kaku Gothic ProN",
      "Yu Gothic",
      "Meiryo",
      sans-serif !important;

    font-weight:600 !important;
    font-style:normal !important;
    font-stretch:normal !important;
    letter-spacing:0 !important;
    line-height:1.28 !important;
  }

  .display-small,
  .manifesto h2,
  .section-head h2,
  .route-card h2,
  .contact-copy h2{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(30px,8.8vw,38px) !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  /*
   * PC用の強制改行をスマホでは解除。
   * 画面幅に応じて自然に折り返す。
   */
  .display-small br,
  .manifesto h2 br,
  .section-head h2 br,
  .route-card h2 br,
  .contact-copy h2 br{
    display:none !important;
  }

  .body-copy,
  .section-head > p,
  .manifesto p,
  .route-card p,
  .contact-copy p{
    width:100% !important;
    max-width:100% !important;
    font-size:13px !important;
    line-height:1.85 !important;
  }


  /* ---------- IMAGES ---------- */

  .image-frame{
    width:100% !important;
    min-height:390px !important;
  }

  .manifesto{
    width:100% !important;
    height:auto !important;
    min-height:560px !important;
  }

  .manifesto-copy{
    left:18px !important;
    right:18px !important;
    width:auto !important;
  }


  /* ---------- AIRCRAFT ---------- */

  .aircraft-row{
    width:100% !important;
    grid-template-columns:28px 1fr !important;
    gap:12px !important;
    padding:24px 0 !important;
  }

  .aircraft-name h3{
    font-size:30px !important;
    line-height:1.15 !important;
  }

  .aircraft-spec{
    grid-column:2 !important;
  }

  .jet-silhouette{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
  }


  /* ---------- ROUTE ---------- */

  .route-story{
    width:100% !important;
    display:block !important;
  }

  .route-image{
    width:100% !important;
    min-height:350px !important;
  }

  .route-card{
    padding:56px 18px !important;
  }

  .route-card h2{
    margin-bottom:34px !important;
  }


  /* ---------- JOURNEY ---------- */

  .journey-grid{
    width:100% !important;
    grid-template-columns:1fr !important;
  }

  .journey-step,
  .journey-step:nth-child(n){
    width:100% !important;
    min-height:0 !important;
    padding:26px 0 !important;
    border-right:0 !important;
  }


  /* ---------- CONTACT ---------- */

  .contact{
    padding-top:72px !important;
  }

  .contact-grid{
    width:100% !important;
    display:block !important;
  }

  .contact-copy{
    margin-bottom:44px !important;
  }

  .contact-form{
    width:100% !important;
    max-width:100% !important;
  }

  .form-row.two{
    width:100% !important;
    grid-template-columns:1fr !important;
  }

  .form-row.two label,
  .contact-form label{
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    border-right:0 !important;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea{
    width:100% !important;
    max-width:100% !important;
  }

  .form-bottom{
    width:100% !important;
    flex-direction:column !important;
    gap:18px !important;
  }

  .form-bottom button{
    width:100% !important;
  }


  /* ---------- FOOTER ---------- */

  footer{
    width:100% !important;
    padding:52px 18px 28px !important;
  }

  .footer-top,
  .footer-bottom{
    width:100% !important;
  }

}


/* Small iPhones */
@media (max-width:390px){

  .hero-content{
    left:16px !important;
    right:16px !important;
  }

  .hero h1{
    font-size:42px !important;
  }

  .display-small,
  .manifesto h2,
  .section-head h2,
  .route-card h2,
  .contact-copy h2{
    font-size:31px !important;
  }

  .section{
    padding-left:16px !important;
    padding-right:16px !important;
  }

}

/* ===== MOBILE PRINCIPLES FINAL ===== */
@media (max-width:760px){

  .principles{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    border-top:1px solid #cbc6bd !important;
  }

  .principle,
  .principle:not(:first-child){
    display:block !important;
    width:100% !important;
    max-width:100% !important;

    padding:30px 0 !important;

    border-right:0 !important;
    border-bottom:1px solid #cbc6bd !important;
  }

  .principle:last-child{
    border-bottom:0 !important;
  }

  .principle > span{
    display:block !important;
    margin-bottom:16px !important;
    font-size:10px !important;
  }

  .principle h3{
    width:100% !important;
    max-width:100% !important;

    margin:0 0 14px !important;

    font-size:30px !important;
    line-height:1.35 !important;

    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;

    word-break:normal !important;
    overflow-wrap:normal !important;
    white-space:normal !important;
  }

  html[lang="ja"] .principle h3{
    font-family:
      -apple-system,
      BlinkMacSystemFont,
      "Hiragino Sans",
      "Hiragino Kaku Gothic ProN",
      "Yu Gothic",
      Meiryo,
      sans-serif !important;

    font-weight:600 !important;
    letter-spacing:0 !important;
  }

  .principle p{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    font-size:13px !important;
    line-height:1.85 !important;

    writing-mode:horizontal-tb !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }
}
/* ===== END MOBILE PRINCIPLES FINAL ===== */