@charset "UTF-8";

@media screen and (max-width: 1080px) {

  .spW90per { width: 90%; }

  /*------------------------------
    ヘッダー
  -------------------------------*/
  #headerWrap #headerSection { margin:0; padding:15px 0; position:relative; }
  #headerWrap #headerSection h1 { margin-left:10px; width:100%; max-width:500px; }
  
  /* ハンバーガーメニュー */
  #headerWrap #headerSection nav { display:none; position:absolute; top:16.6vw; left:0; padding:20px 0 0; width:100%; background:#ffffff; border-bottom:1px solid #dddddd; }
  #headerWrap #headerSection ul.cv_btns { justify-content:center; }
  #headerWrap #headerSection ul.cv_btns li { margin:0 1%; width:30%; }
  #headerWrap #headerSection ul.cv_btns li a { padding:5px 0; min-width:100%; }
  #headerWrap #headerSection ul + ul { display:flex; flex-wrap:wrap; margin-top:20px; }
  #headerWrap #headerSection ul + ul li { width:100%; margin-left:0; padding:10px 0 10px 45px; border-top:1px solid #dddddd; box-sizing:border-box; }
  #headerWrap #headerSection ul + ul li:nth-child(even) { border-left:1px solid #dddddd; }
  #headerWrap #headerSection ul + ul li a { display:block; }
  #headerWrap #headerSection ul + ul li a::before { left:-26px; }

  #inPage #headerWrap #headerSection ul + ul li a::before { left:-26px; }


  #headerWrap #headerSection p.spMenuBtn { position:relative; width:40px; height:30px; cursor:pointer; margin-right:10px; }
  #headerWrap #headerSection p.spMenuBtn span { position:absolute; left:0; width:100%; height:4px; background-color:#999999; border-radius:4px; }
  #headerWrap #headerSection p.spMenuBtn, p.spMenuBtn span { display:inline-block; transition:all .5s; box-sizing:border-box; }
  #headerWrap #headerSection p.spMenuBtn span:nth-of-type(1) { top:0; }
  #headerWrap #headerSection p.spMenuBtn span:nth-of-type(2) { top:13px; }
  #headerWrap #headerSection p.spMenuBtn span:nth-of-type(3) { bottom:0; }
  
  #headerWrap #headerSection p.spMenuBtn.active span:nth-of-type(1) { -webkit-transform:translateY(13px) rotate(-45deg); transform:translateY(13px) rotate(-45deg); }
  #headerWrap #headerSection p.spMenuBtn.active span:nth-of-type(2) { opacity:0; }
  #headerWrap #headerSection p.spMenuBtn.active span:nth-of-type(3) { -webkit-transform:translateY(-13px) rotate(45deg); transform:translateY(-13px) rotate(45deg); }

  /*------------------------------
  フッター
  -------------------------------*/
  #footerWrap { margin:0 20px; }
  #footerWrap #footerSection { display:block; margin-bottom:10px; text-align:center; }
  #footerWrap #footerSection #inqArea { display:block; }
  #footerWrap #footerSection #inqArea > p { text-align:center; }
  #footerWrap #footerSection #inqArea > p img { width:60px; }
  #footerWrap #footerSection #inqArea #inqBox { margin:0 0 10px; font-size:90%; display:inline-block; text-align:left; }
  #footerWrap #footerSection #inqArea #inqBox h3 { margin:10px 0 5px; }
  #footerWrap #footerSection ul { justify-content:center; }  
  #footerWrap #footerSection ul li { margin:10px 0 10px 20px; font-size:86%; }
  #footerWrap #footerSection ul li:first-child { margin:10px 15px 10px 20px; }
  #footerWrap #copyrightSection { font-size:80%; }
  #footerWrap  #pageTopBtn { right:8px; }
  
}

@media screen and (max-width: 750px) {

  /*------------------------------
    h
  -------------------------------*/
  h1 img { width:80%; max-width:none; }
  .lineBlue { font-size:7vw; border-bottom:4px solid #0372bd; margin:0 auto 8vw; }

  /*------------------------------
  a
  -------------------------------*/
  /* 青いボタン */
  p.btn a { padding:10px 35px; font-size:120%; margin-top:6vw; }

  /*------------------------------
  display
  -------------------------------*/
  .spDisplayBlock { display:block !important; }
  .spDisplayInline { display:inline !important; }
  .spDisplayNone { display:none !important; }

  /*------------------------------
    cvリンク
  -------------------------------*/
  ul.cv_btns { margin-top:10vw; }
  ul.cv_btns li { margin:0 1%; max-width:none; width:30%; }
  ul.cv_btns li a { padding:6px 0; line-height:1.2; font-size:80%; }
  ul.cv_btns li:nth-child(1) a { background:url("../images/icon_win1.png") no-repeat #ffcc00 center right 5px / 8px; }
  ul.cv_btns li:nth-child(2) a { background:url("../images/icon_win2.png") no-repeat #555555 center right 5px / 8px; }
  ul.cv_btns li:nth-child(3) a { background:url("../images/icon_win2.png") no-repeat #02c482 center right 5px / 8px; }

  /*------------------------------
  パンナビ
  -------------------------------*/
  #panNaviWrap ul { margin:0 10px; padding:8px 0; }
  
  /*------------------------------
  事例リスト
  -------------------------------*/
  ul#caseList { display:block; max-width:none; }
  ul#caseList li { width:100%; margin:10vw 0 0; padding:0 3vw; box-sizing:border-box; }
  ul#caseList li:first-child { margin:8vw 0 0; }
  ul#caseList li h5 { margin-top:8px; }
  ul#caseList li h5 + p { margin-top:5px; }
  
  /*------------------------------
    共通枠
  -------------------------------*/
  .contentsOuter { padding:10vw 4vw 12vw; }
  
  /*------------------------------
    トップページ
  -------------------------------*/
  /* MV下ボタン */
	#mvBnArea { margin: 0 20px; }
	#mvBnArea p { margin: 0 5px 20px; width: 300px; }

  /* 導入企業 */
  #campanySection { margin-bottom:10vw; }
  #campanySection h3 { padding:2vw; }
  #campanySection ul { max-width:none; margin:5vw; }
  #campanySection ul li { max-width:none; width:46%; margin:2%; }

  /* 画像サイズ調整 */
  #campanySection ul li { position:relative; overflow:hidden; padding-top:20%; }
  #campanySection ul li img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:contain; font-family:'object-fit:contain;'/*IE対策*/ }

  /* 導入事例 */
  #caseSection { padding-bottom:5px; }
  #caseSection ul#needsList { display:block; max-width:none; }
  #caseSection ul#needsList li { width:100%; padding:4vw 6vw 6vw; margin-top:5vw; }
  #caseSection ul#needsList li:first-child { margin-top:0; }
  #caseSection ul#needsList li img { max-width:none; }

  #caseSection2 { padding-top:1px; }
  #caseSection2 #picupArea { max-width:none; margin:calc(6vw - 5px) auto 0; padding:6vw; }
  #caseSection2 #picupArea h4 { font-size:130%; }
  #caseSection2 #picupArea h4::before { content:""; display:inline-block; width:20px; height:30px; vertical-align:middle; background:url("../images/top_pickup_line1.png") no-repeat; background-size:20px 30px; top:1vw; left:-8vw; position:absolute; }
  #caseSection2 #picupArea h4::after { content:""; display:inline-block; width:20px; height:30px; vertical-align:middle; background:url("../images/top_pickup_line2.png") no-repeat; background-size:20px 30px; top:1vw; right:-7vw; position:absolute; }

  /* 論理的文章力育成 コンテンツ */
  #contentsSection ul#contentsList { max-width:none; }
  #contentsSection ul#contentsList > li { padding:5vw; }
  #contentsSection ul#contentsList > li > p:first-child { padding:4px 10px; font-size:110%; }
  #contentsSection ul#contentsList > li > h4 { font-size:130%; padding:10px 0; }

  #contentsSection ul#contentsList > li .flexBox { display:block; margin-top:15px; }
  #contentsSection ul#contentsList > li .flexBox > p { width:100%; margin-bottom:10px; }
  #contentsSection ul#contentsList > li .flexBox .infoUnit { width:100%; }
  #contentsSection ul#contentsList > li .flexBox .infoUnit dl { margin-top:10px; }
  
  #contentsSection ul#contentsList > li .flexBox .infoUnit dl dt { float:none; width:100%; box-sizing:border-box; }
  #contentsSection ul#contentsList > li .flexBox .infoUnit dl dd { float:none; margin-top:4px; }

  #contentsSection ul#contentsList > li .flexBox .flexBox { width:100%; display:flex; margin-top:15px; }
  #contentsSection ul#contentsList > li .flexBox .flexBox > p { width:36%; }
  #contentsSection ul#contentsList > li .flexBox .flexBox .infoUnit { width:60%; box-sizing:border-box; }
  #contentsSection ul#contentsList > li .flexBox .flexBox .infoUnit h5 { font-size:110%; }
  #contentsSection ul#contentsList > li .flexBox .flexBox .infoUnit p { margin-top:5px; }

  /* 監修者コメント */
  #commentSection #commentArea { width:100%; max-width:none; display:block; }
  #commentSection #commentArea #textUnit { width:100%; line-height:1.8; }
  #commentSection #commentArea #textUnit .atComment { margin-top:20px; }

  #commentSection #commentArea #infoUnit { width:80%; margin:30px auto; }
  #commentSection #commentArea #infoUnit p:first-child { width:40%; margin:20px auto 0; }
  #commentSection #commentArea #infoUnit img { width:100%; }
  #commentSection #commentArea #infoUnit h4 { font-size:160%; }

  
  /*------------------------------
    事例一覧
  -------------------------------*/
  #caseListSection { max-width:none; box-sizing:border-box; }
  #caseListSection h2 + p { font-size:110%; line-height:1.8; margin-bottom:5px; }
  #caseListSection h2 + p + p { font-size:80%; }

  /*------------------------------
    事例詳細
  -------------------------------*/
  /* MV */
  #detailMvSection > p::before { height:140vw; background:url("../case/images/case_mv_bg_sp.png") no-repeat center bottom / cover; }
  #detailMvSection #titleArea { max-width:none; bottom:20px;  }
  #detailMvSection #titleArea h2 { font-size:5vw; }
  #detailMvSection #titleArea h2 + p { font-size:120%; }

  /* 画像サイズ調整 */
  #detailMvSection > p { padding-top:100%; }

  /* 会社プロフィール */
  #profileSection { max-width:auto; margin:10px auto; }
  #profileSection h3 { font-size:110%; }
  #profileSection ul li { padding:10px 0; display:block; }

  /* 詳細 */
  #infoSection { padding:4vw; max-width:none; }
  #infoSection > ul > li { border-top:2px solid #c2d0da; border-left:2px solid #c2d0da; padding:20px 0 20px 20px; margin-top:5vw; }
  #infoSection ul li h3 { padding:4px 10px; font-size:100%; }
  #infoSection ul li h3 + p { margin-top:10px; }
  #infoSection ul.listBlue { margin-top:10px; }
  #infoSection ul.listBlue li { margin-top:15px; }
  #infoSection ul li p.imgBox { margin-top:10px; }
  
}