@charset "UTF-8";
/* フォントサイズ基本：15px 強調:18px 注釈：13px固定 */

/* ==========================================================================
   ■ ZONE 1: タブレット環境（max-width: 1150px）
   ========================================================================== */
@media screen and (max-width: 1150px) {
  .br-1150 {
    display: block;
  }
  .spec_lead {
    width: 45%;
    right: -100px;
  }
  .detail_text {
    left: 100px;
    top: 90px;
  }
  section#top .parseBlock .title {
    left: 340px;    
  }
  section#parse4 .inner .title p {
    top: 150px;
    left: 190px;
  }
  section#sec1 .inner .detail_text {
    line-height: 1.3rem;
  }
  #info .img1 {
    top: 180px;
  }
}


/* ==========================================================================
   ■ ZONE 2: スマートフォン環境（max-width: 800px）
   ========================================================================== */
@media screen and (max-width: 800px) {
  /* ------------------------------------------------------------------------
     2-1. 基本・共通・汎用設定
     ------------------------------------------------------------------------ */
  .sp { display: block; }
  .pc { display: none; }
  img { width: 100%; }

  body {
    background: #000;
    min-width: 100%;
    font-size: 3vw;
    line-height: 1.3em;
  }
  #contents {
    width: auto !important;
    padding-bottom: 7vw;
  }
  
  /* 共通テキスト・パーツ */
  p.size20 { font-size: 3.5vw; }
  p.size30 { font-size: 4vw; margin-bottom: 1em; }
  p.title span { font-size: 4.5vw; line-height: 1.2; }
  strong { font-size: 5vw; line-height: 1.2em; font-weight: normal; color: #d5a400; }
  
  .title {
    left: 120px;
    top: 120px;
    width: 90%;
    font-size: 20px;
    line-height: 1.5;
  }
  .left180 { margin-left: 0px; }
  .centerPict { text-align: center; }
  .centerPict img { display: inline-block; }
  .img_box { flex-direction: column; }
  .img_box img { width: 100%; }

  /* 共通補助クラス */
  .w-60_sp { width: 60%; }
  .w-85_sp { width: 85%; }
  .w-100_sp { width: 100%; }

  /* ページローダー */
  #loader {
    display: none;
    position: fixed;
    top: 47%;
    left: 44%;
    width: 33vw;
    height: 33vw;
  }
  #loader img { width: 100%; }

  /* 共通リストレイアウト (スペックリスト) */
  .inner .specList {
    width: 100%;
    margin: 270px 0 0;
  }
  .inner .specList li {
    width: 46%;
    margin: 5px;
  }
  .inner .specList.sl2 {
    width: 100%;
  }

  /* ------------------------------------------------------------------------
     2-2. 各セクション設定 - #top (メインビジュアル〜block5)
     ------------------------------------------------------------------------ */
  /* block1 */
  section#top .block1 { width: 100%; height: 620px; margin: 0 auto; padding-top: 40vw; text-align: center; }
  section#top .block1 p#ad { font-size: 7vw; color: #b70000; margin-bottom: 30px; }
  section#top .block1 .logoW { width: 50%; margin: 30px auto; }
  section#top .block1 .scroll { width: 4%; margin: 30px auto; }

  /* block2 */
  section#top .block2 { width: 100%; height: auto; margin: 150px auto 0; position: relative; }
  section#top .block2 .title { width: 48%; position: absolute; top: -50vw; left: 0; right: 0; margin: 0 auto; z-index: 2; }
  section#top .block2 .img { width: 30%; position: absolute; top: 10vw; left: 0; right: 0; margin: 0 auto; z-index: 2; }
  section#top .block2 .bgFix { width: 100% !important; height: auto; padding-top: 105%; background: url(_image/top_bg.png) center bottom no-repeat; background-position-y: 30px; background-size: 100% auto; position: relative; z-index: 0; }

  /* block3 */
  section#top .block3 { background-image: url(_image/top_bar_sp.png); background-size: cover; background-position: top center; width: 100%; margin: -16% auto; z-index: 1; position: relative; }
  section#top .block3 dl { padding: 40px 50px 20px; display: block; }
  section#top .block3 dl dt { width: 75%; margin: 20px auto; }
  section#top .block3 dl dd { font-size: 3vw; width: 100%; line-height: 1.6em; }
  section#top .block3 dl dd p.p1 { font-size: 3vw; margin-top: 20px; text-align: center; }
  section#top .block3 dl dd p.p2 { font-size: 2.5vw; line-height: 1.4; }
  section#top .block3:before, section#top .block3:after { content: none; }

  /* MOVIE (block4) */
  section#top .block4 { padding: 50px 0 30px; margin-top: 10%; }
  section#top .mov { width: 100%; margin: 30px auto; }
  section#top .block4 .flex { height: 200px; }
      
  /* PARSE (block5) */
  section#top .block5 { padding: 50px 0 0; background: url(_image/1x/top_bg_sp.png) top no-repeat; background-size: 100%; }
  section#top .parseBlock { width: 100%; height: auto; margin: 0 auto; position: relative; padding-top: 0; }
  section#top .parseBlock .title { position: absolute; left: 100px; width: 85%; top: 0; }
  section#top .parseBlock .img { position: relative; width: 160%; right: 20%; }
  section#top .parseBlock .pic { display: block; width: 80%; margin-top: -40%; }
  section#top .parseBlock .pic img { margin: 30px auto 5px; }
  section#top .parseBlock .pic p { margin-left: 17px;}

  /* ------------------------------------------------------------------------
     2-3. 各セクション設定 - #sec1
     ------------------------------------------------------------------------ */
  section#sec1 { padding-top: 50px; }
  section#sec1 .inner { width: 100%; margin-top: 10px; padding-top: 0px; }
  section#sec1 .inner .sec1_bg1 { width: 130%; right: -15%; top: 0; }
  section#sec1 .inner .title { width: 55%; left: 0px; top: 0px; margin-bottom: 20px; }
  section#sec1 .inner .imgBox { width: 100%; margin: 100px 0 0 0; height: 480px; }
  section#sec1 .inner .sec1_flex div:last-of-type { width: 100%; margin: 20px 0 0; }
  section#sec1 .inner .textarea { width: 100%; left: 5px; right: 0px; top: 10px; }
  
  .sec1-img { width: 75%; top: 60px; right: 10px; }
  .sec1-img p { line-height: 1.3rem; }
  .sec1_pict2 { margin: 0; }
  .parse-item div { width: 80%; margin-top: 50px !important; }

  /* 各コンテンツ内部可変 */
  section#sec1 .inner .content { padding-top: 105%; }
  section#sec1 .inner .content .img_box { width: 95%; margin-left: -7%; }
  section#sec1 .inner .content.content2 { padding-top: 130%; }
  section#sec1 .inner .content.content4 { padding-top: 235%; }
  section#sec1 .inner .content.content3 .img_box,
  section#sec1 .inner .content.content4 .img_box { display: block; margin: 20px auto 0; width: 85%; }
  section#sec1 .inner .content .title { margin: 1% 0 3% 0;}
  section#sec1 .inner .content.content2 .textarea p.title span { font-size: 4vw;}
  section#sec1 .inner .content.content3 .img_box img.pic1,
  section#sec1 .inner .content.content3 .img_box img.pic2,
  section#sec1 .inner .content.content4 .img_box img.pic1,
  section#sec1 .inner .content.content4 .img_box img.pic2 { width: 100%; }
  
  section#sec1 .bg2 { top: -800px; }
  section#sec1 .bg3 { top: -100px; }

  /* ------------------------------------------------------------------------
     2-4. 各セクション設定 - #sec2
     ------------------------------------------------------------------------ */
  section#sec2 { margin-top: 130%; background: url(_image/1x/sec2_bg_sp.png) top center repeat; background-size: 100%; }
  section#sec2 .inner .title { width: 55%; }
  section#sec2 .sec2-img { width: 66%; top: 10%; }
  
  #sec2 .inner .specList { width: 110%; margin-left: -5%; padding-bottom: 20px; display: block; }
  #sec2 .inner .specList li { width: 95%; margin: 0 0 20px 0; }
  #sec2 .inner .specList li p { line-height: 1.3rem; margin-left: 0; }
  #sec2 .inner .specList.sl1 { padding-top: 500px; }
  #sec2 .inner .specList.sl2 { padding-bottom: 40px; }

  /* ------------------------------------------------------------------------
     2-5. 各セクション設定 - #sec3
     ------------------------------------------------------------------------ */
  section#sec3 .inner { padding: 0 5.5%; }
  section#sec3 .inner .bg { top: 40px; width: 70%; }
  section#sec3 .inner .title { top: 1%; }
  section#sec3 .sec3_img { width: 80%; top: 170px; }
  section#sec3 .sec3_img img { width: 70%; }
  section#sec3 .sec3_img p { width: 80%; }
  section#sec3 .sec3_front_img { top: 40px; }
  section#sec3 .sec3_img2 { top: 6%; }
  section#sec3 .inner .positon_relative.pic1 { top: 370px; }
  
  #sec3 .inner .specList { display: block; margin: 20px auto; width: 90%; padding-bottom: 0; }
  #sec3 .inner .specList li { margin: 0; width: 100%; }
  #sec3 .inner .specList li p { margin: 10px 0 20px 20px; }
  #sec3 .inner .specList.sl1 { padding-top: 210%; }
  #sec3 .inner .specList.sl2 { padding-bottom: 40px; }

  /* 水中潜航・各モードサブレイアウト */
  section#sec3 .inner .sec3_content { width: 95%; margin: 0 auto 40px; }
  section#sec3 .inner .sec3_content .textarea { margin: -43% auto 0; }
  section#sec3 .inner .sec3_content .title { left: -20px; }
  section#sec3 .inner .sec3_content .detail_text { line-height: 1.3rem; margin-top: 10px; }
  section#sec3 .inner .sec3_content .sec3_img2 { top: 40%; }
  section#sec3 .inner .sec3_content .sec3_img2.sp1 { top: 3%; }
  section#sec3 .inner .sec3_content .sec3_img2.sp2 { top: -8%; }
  section#sec3 .inner .sec3_content .textarea .flex { display: block; margin: 20px auto; width: 90%; padding-bottom: 0; }
  section#sec3 .inner .sec3_content .textarea .flex .content { width: 100%; }
  section#sec3 .inner .sec3_content .textarea .img_box.flex { display: block; margin: 20px auto; width: 90%; padding-bottom: 0; }
  section#sec3 .inner .sec3_content .textarea .img_box.flex img { width: 100%; }
  section#sec3 .inner .sec3_content .textarea p.pic_detail { width: 100%;}

  /* ------------------------------------------------------------------------
     2-6. 各セクション設定 - #spec (機体スペック)
     ------------------------------------------------------------------------ */
  section#spec .inner1 { height: auto; padding: 0; padding-top: 40px; }
  section#spec .inner1 .title { position: static; width: 90%; }
  section#spec .inner1 .spec_img { width: 98%; }
  section#spec .inner1 .spec_title { font-size: 20px; left: 90px; top: 230px; width: 70%; }
  section#spec .inner1 .spec_bg2 { width: 70%; margin: 0 auto 30px; position: static; }
  section#spec .inner1 .spec_lead { width: 80%; margin: 0 auto; position: static; padding: 20px 50px; font-size: 3.5vw; }
  section#spec .inner1.inner2 { width: 100%; margin-bottom: 100px; padding-top: 0; }
  section#spec .inner1.inner2 p { margin: 15px auto 20px; font-size: 15px; }

  /* ------------------------------------------------------------------------
     2-7. 各セクション設定 - #gallery (Slickスライダー連動)
     ------------------------------------------------------------------------ */
  #gallery { width: 90%; margin: 0 auto; }
  #gallery h2 { width: 100% !important; margin: 18px auto; }
  #gallery1 { flex-direction: column; }
  #gallery1 dt { width: 100%; }
  #gallery1 dd { width: 100%; }
  .slider { width: 100%; }
  .thumbnail-img img { padding: 5px; }
  dd .slick-list div.slick-track:last-of-type { width: 100% !important; }

  /* ------------------------------------------------------------------------
     2-8. 商品情報・タカラトミーモール・外部通販ボタン
     ------------------------------------------------------------------------ */
  /* 基本EC枠共通 */
  #info, section#takaratomymall .info {
    width: 100%;
    margin: 0px auto;
    padding-top: 10vw;
    height: auto;
  }
  #info .img1 {
    width: 80%;
    position: static;
    margin: 0 auto;
  }
  #spec #info .inner {
    width: 80%;
    margin: 0 auto;
    position: static;
  }
  
  /* テキスト・インフォメーション */
  #info .inner p.days {
    font-size: 5vw !important;
    text-align: left;
    line-height: 1.5em !important;
    margin-top: 20px;
  }
  #info .inner p.price {
    font-size: 2.6vw !important;
    text-align: left;
  }
  #info .inner p.attention {
    font-size: 1.8vw;
    line-height: 1.2em;
    margin-top: 20px;
  }

  /* 通販ボタン */
  section#spec .btn {
    width: 70%;
    margin: 20px auto 40px;
  }
}


/* ==========================================================================
   ■ ZONE 3: 超小型スマートフォン環境（max-width: 500px）
   ========================================================================== */
@media screen and (max-width: 500px) {
  section#top .block3 dl dd p.p1 {
    font-size: 4vw;
  }
  section#top .block3 dl dd p.p2 {
    font-size: 3vw;
  }
  .title {
    left: 80px;
    top: 70px;
  }
}
@media screen and (max-width: 400px) {
  section#sec3 .sec3_img {
    top: 2.2%;
  }
  section#sec3 .inner .positon_relative.pic1 {
    top: 3.8%;
  }
}