/* ==================================================================
*   Ceevee Media Queries
*   url: styleshout.com
*   03-18-2014
/* ================================================================== */

/* screenwidth less than 1024px ------------------------------------ */
@media only screen and (max-width: 1024px) {
  header .banner-text h1 {
    font: 80px/1.1em 'opensans-bold', sans-serif;
    letter-spacing: -1px;
    margin: 0 auto 12px auto;
  }
}

/* screenwidth less than 900px ------------------------------------- */
@media only screen and (max-width: 900px) {
  header .banner { padding-bottom: 12px; }
  header .banner-text h1 { font: 78px/1.1em 'opensans-bold', sans-serif; letter-spacing: -1px; }
  header .banner-text h3 { font: 17px/1.9em 'librebaskerville-regular', serif; width: 80%; }
  header .banner-text hr { width: 65%; margin: 12px auto; }

  #nav-wrap { font: 11px 'opensans-bold', sans-serif; letter-spacing: 1.5px; }

  #about .profile-pic { width: 114px; height: 114px; margin-left: 12px; }
  #about .contact-details { width: 50%; }
  #about .download { width: 50%; }

  #resume h1 { font: 16px/24px 'opensans-bold', sans-serif; }
  #resume .main-col { padding-right: 5%; }

  #testimonials .header-col h1:before,
  #call-to-action .header-col h1:before { font-size: 66px; line-height: 66px; }

  #testimonials blockquote p { font-size: 22px; line-height: 46px; }

  #contact .section-head { margin-bottom: 30px; }
  #contact .header-col h1:before { font-size: 66px; line-height: 66px; }
  #contact .section-head p.lead { font: 17px/33px opensans-light, sans-serif; }
}

/* mobile wide / smaller tablets ----------------------------------- */
@media only screen and (max-width: 767px) {

  /* === Mobile Navigation (.open クラス方式) === */
  #nav-wrap {
    font: 12px 'opensans-bold', sans-serif;
    background: transparent !important;
    letter-spacing: 1.5px;
    width: auto;
    position: fixed;
    top: 0; right: 0;
    z-index: 9999;
  }

  /* トグルボタンは常に表示（テキスト"Menu"を見せる） */
  #nav-wrap > a.mobile-btn{
    display: block !important;
    width: 56px; height: 48px;
    margin: 0 16px 0 0;
    float: right;
    text-indent: 0;
    color: #fff;
    line-height: 48px;
    text-align: center;
    background: #CC5200;
    border: none;
  }

  /* メニュー本体はデフォルト非表示（JSで開閉） */
  #nav-wrap ul#nav{
    display: none;            /* ← JSで slideToggle */
    position: relative;
    top: 12px; right: 0;
    background: #1f2024;
    padding: 30px 20px 48px 20px;
    margin: 0 16px;
    float: right;
    width: auto;
    clear: both;
  }

  /* .open が付いたら表示（見た目補助。JSがdisplayを切替） */
  #nav-wrap.open ul#nav { display: block; }

  ul#nav li {
    display: block;
    height: auto;
    margin: 0 auto;
    padding: 0 4%;
    text-align: left;
    border-bottom: 1px dotted #2D2E34;
  }
  ul#nav li a {
    display: block;
    margin: 12px 0;
    line-height: 16px;
    border: none;
  }

  /* --- Header / Sections 縮小 --- */
  header .banner { padding: 6px 0 12px; }
  header .banner-text h1 { font: 68px/1.1em 'opensans-bold', sans-serif; }
  header .banner-text h3 { font: 16px/1.9em 'librebaskerville-regular', serif; width: 85%; }
  header .banner-text hr { width: 80%; margin: 18px auto; }
  header .social { margin: 18px 0 24px; font-size: 24px; line-height: 36px; }
  header .social li { margin: 0 10px; }
  header .scrolldown { display: none; }

  #about .profile-pic { display: none; }
  #about .download .button { width: 100%; text-align: center; padding: 15px 20px; }
  #about .main-col { padding-right: 30px; }

  #resume .header-col { padding-top: 0; margin-bottom: 48px; text-align: center; }
  #resume h1 { letter-spacing: 3px; }
  #resume .main-col { padding-right: 30px; }
  #resume h3, #resume .info { text-align: center; }

  .bars { width: 100%; }

  #call-to-action { text-align: center; }
  #call-to-action h1 { font: 16px/24px 'opensans-bold', sans-serif; text-align: center; margin-bottom: 30px; text-shadow: 0px 1px 3px rgba(0,0,0,1); }
  #call-to-action h1 span { display: block; }
  #call-to-action .header-col h1:before { content: none; }
  #call-to-action p { font-size: 15px; }

  #portfolio-wrapper .columns { margin-bottom: 40px; }
  .popup-modal { max-width: 85%; }

  #testimonials .text-container { text-align: center; }
  #testimonials h1 { font: 16px/24px 'opensans-bold', sans-serif; margin-bottom: 30px; text-align: center; text-shadow: 0px 1px 3px rgba(0,0,0,1); }
  #testimonials h1 span { display: block; }
  #testimonials .header-col h1:before { content: none; }
  #testimonials blockquote { padding-bottom: 24px; }
  #testimonials blockquote p { font-size: 20px; line-height: 42px; }
  .flex-control-nav { text-align: center; margin-left: -30px; }

  #contact { padding-bottom: 66px; }
  #contact .section-head { margin-bottom: 12px; }
  #contact .section-head h1 { font: 16px/24px 'opensans-bold', sans-serif; text-align: center; margin-bottom: 30px; text-shadow: 0px 1px 3px rgba(0,0,0,1); }
  #contact h1 span { display: block; }
  #contact .header-col { padding-top: 0; }
  #contact .header-col h1:before { content: none; }
  #contact .section-head p.lead { text-align: center; }
  #contact label { float: none; width: 100%; }
  #contact input, #contact textarea, #contact select { width: 100%; margin-bottom: 6px; }
  #contact button.submit { margin: 30px 0 24px; }
  #message-warning, #message-success { width: 100%; margin-left: 0; }

  footer .copyright li:before { content: none; }
  footer .copyright li { margin-right: 12px; }
  footer .social-links { font-size: 22px; }
  footer .social-links li { margin-left: 18px; }
  #go-top { margin-left: -22px; }
  #go-top a { width: 54px; height: 54px; font-size: 18px; line-height: 54px; }

  /* --- Portfolio レイアウト修正 (左右余白あり) --- */
  #portfolio .row { width: 100% !important; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
  #portfolio-wrapper .columns { width: 25% !important; float: left !important; padding: 0 10px; box-sizing: border-box; }
  #portfolio-wrapper { margin: 0 -10px; }
  #portfolio-wrapper .item-wrap img { display: block; width: 100%; height: auto; }
  #portfolio-wrapper .portfolio-item-meta h5,
  #portfolio-wrapper .portfolio-item-meta p { display: none; }
}

/* mobile narrow ---------------------------------------------------- */
@media only screen and (max-width: 480px) {
  #nav-wrap ul#nav { width: auto; float: none; }
  header .banner { padding-top: 24px; }
  header .banner-text h1 { font: 40px/1.1em 'opensans-bold', sans-serif; margin: 0 auto 24px auto; }
  header .banner-text h3 { font: 14px/1.9em 'librebaskerville-regular', sans-serif; width: 90%; }
  header .social { font-size: 20px; }
  header .social li { margin: 0 6px; }
  footer .social-links { font-size: 20px; }
  footer .social-links li { margin-left: 14px; }
}

/* デスクトップは常にメニュー表示（JS inline 対策） */
@media (min-width: 768px) {
  #nav-wrap ul#nav { display: inline-block !important; }
}

@media (max-width: 767px) {
  #testimonials .flex-viewport {
    height: 360px; /* SP用。文字が折り返す分少し大きめに */
  }
}