スタイルシート (style.css)

/* タブコンテンツ */
.tab_con_section { max-width: 1150px; margin: 0 auto; }
.tab_con_top { width:100%; height:600px; position:relative; overflow:hidden; }
.tab_con_top .bg_image { width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:1; }
.tab_con_top .bg_image.mobile { display:none; }
.tab_con_top .overlay { width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:2; }
.tab_con_top_inner {
	color:#333; width:850px; margin:0 auto; z-index:3; position:relative; text-align:center;
  top:50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}
.tab_con_top .catch { font-size: 36px; line-height:1.5; font-weight:600; clear: both; margin: 0 0 15px 0; padding: 0; }
.tab_con_top .desc { line-height:2.4; margin:16px 0 0; }
.tab_con_top .design_button { margin-top:30px; }
.tab_con_top .bg_image[data-parallax-image] {
  transition: none;
}
.tab_con_top .bg_image.parallax-ready[data-parallax-image] {
  transition-property: background-position;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0, 0.33, 0.07, 1.03);
}
.tab_con_top .tab {
	width:1150px; height:70px; position:absolute; bottom:0px; z-index:3;
  left:50%; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);
  display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex;
  -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
  -ms-justify-content:center; -webkit-justify-content:center; justify-content:center;
}
.tab_con_top .tab .item {
	cursor:pointer; font-size:16px; height:70px; line-height:70px; min-width:200px; color:#333; background:rgba(255,255,255,0.3); text-align:center; margin:0 7px; padding:0 20px; border-radius:10px 10px 0 0;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
  -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
.tab_con_top .tab .item.active, .tab_content_top .tab .item:hover { color:#000; background:#fff; }
.tab_con_bottom {
  width:100%; margin:0 auto; padding:100px 70px; border-left:1px solid #ddd; border-right:1px solid #ddd; position:relative;
  -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}
.tab_con_bottom .item {
  opacity:0; pointer-events:none; position:absolute; overflow:hidden; top:100px; left:70px; right:70px;
  -webkit-box-sizing:border-box; box-sizing:border-box;
  -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease;
}
.tab_con_bottom .item.active { opacity:1; pointer-events:initial; position:relative; top:0; left:0; }
.tab_con_bottom .item_inner {
  display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex;
  -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
.tab_con_bottom .image_area { width:50%; margin-right:50px; overflow:hidden; position:relative; }
.tab_con_bottom .image_area_inner { }
.tab_con_bottom .image { max-width:100%; height:auto; }
.tab_con_bottom .content { width:calc(50% - 50px); }
.tab_con_bottom .title { font-size:26px; color:#0071a2; margin-bottom:42px; font-weight: bold; }
.tab_con_bottom .catch { font-size:24px; line-height:1.5; font-weight:600; margin-bottom:32px; }
.tab_con_bottom .desc { line-height:2.4; }
.tab_con_bottom .design_button { margin-top:70px; }
.tab_con_bottom .slick-dots { position:absolute; bottom:30px; left:0px; width:100%; z-index:10; text-align:center; }
.tab_con_bottom .slick-dots li { display:inline-block; width:10px; height:10px; margin:0 4px; font-size:12px; }
.tab_con_bottom .slick-dots button { cursor:pointer; border:none; color:transparent; width:10px; height:10px; display:block; font-size:0; background:none; position:relative; }
.tab_con_bottom .slick-dots button::before { content:''; display:block; width:10px; height:10px; line-height:10px; background:#ddd; border-radius:20px; position: absolute; top:0; left:0; }
.tab_con_bottom .slick-dots button:hover::before, .tab_content_bottom .slick-dots .slick-active button::before { background:#000; }
.tab_con_section .inview {
  opacity:0; position:relative; top:40px;
  -webkit-transition: all 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s, opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
  transition:all 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s, opacity 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s;
}
.tab_con_section .inview.animate { opacity:1; top:0; }
.tab_con_bottom .design_button {
    margin-top: 70px;
    text-align: center;
    z-index: 10;
    position: relative;
    height: 70px;
}
.tab_con_bottom .design_button a {
    display: inline-block;
    min-width: 260px;
    max-width: 100%;
    height: 70px;
    line-height: 70px;
    font-size: 16px;
    padding: 0 20px;
    position: relative;
    overflow: hidden;
    z-index: 3;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    color: #ffffff !important;
    background: #00729f;
	text-decoration: none;
}
.tab_con_bottom .design_button a:hover {
    color: #ffffff !important;
    background: #00466d;
}
/* タブコンテンツ END */

responsive.css (css/responsive.css)

/* タブコンテンツ */
@media screen and (max-width:1050px) {
.tab_con_top .catch { font-size: 28px; }
.tab_con_top .tab { width:100%; }
.tab_con_bottom { width:auto; border:none; padding:100px 60px; }
.tab_con_bottom .item { left:60px; right:60px; }
.tab_con_bottom .image_area { width:50%; }
.tab_con_bottom .content { width:calc(50% - 60px); }
}
@media screen and (max-width:950px) {
  .tab_con_top { height:500px; }
  .tab_con_top_inner { width:100%; padding:0 40px; }
  .tab_con_bottom { padding:100px 40px; }
  .tab_con_bottom .image_area { margin-right:40px; }
  .tab_con_bottom .content { width:calc(50% - 40px); }
  .tab_con_top .tab { height:50px; }
  .tab_con_top .tab .item { font-size:14px; height:50px; line-height:50px; min-width:150px; margin:0 4px; padding:0 15px; border-radius:5px 5px 0 0; }
  .tab_con_section {
    margin: 0 -20px;
}
}
@media screen and (max-width:750px) {
  .tab_con_top { height:360px; }
  .tab_con_top_inner { padding:0 20px; }
  .tab_con_top .desc { line-height:2; margin:6px 0 0; }
  .tab_con_top .design_button { margin-top:20px; }
  .tab_con_top .tab { height:40px; }
  .tab_con_top .tab .item { font-size:12px; height:40px; line-height:40px; min-width:90px; }
  .tab_con_bottom { padding:40px 20px; }
  .tab_con_bottom .item { left:20px; right:20px; top:40px; }
  .tab_con_bottom .item_inner { display:block; }
  .tab_con_bottom .image_area { width:100%; margin:0 auto; max-width:500px; }
  .tab_con_bottom .content { width:100%; margin:37px 0 0 0; }
  .tab_con_bottom .title { margin-bottom:11px; }
  .tab_con_bottom .catch { margin-bottom:6px; }
  .tab_con_bottom .desc { line-height:2; }
  .tab_con_bottom .design_button { margin-top:33px; }
  .tab_con_bottom .slick-dots { bottom:20px; }
  .tab_con_section .tab_con_bottom .title, .tab_con_section .tab_con_bottom .catch {
    font-size: 20px;
}
  .tab_con_bottom .design_button { height:50px; }
  .tab_con_bottom .design_button a { min-width:240px; height:50px; line-height:50px; font-size:14px; padding:0 15px; }
  .tab_con_top .bg_image.pc { display: none; }
  .tab_con_top .bg_image.mobile { display: block; }
}
/* タブコンテンツ END */

javascript(JS)

<script>
jQuery(function ($) {
// タブコンテンツ
if( $('.tab_con_section').length ){
    $('.tab_con_top .tab .item').on('click', function() {
      $(this).siblings().removeClass('active');
      $(this).addClass('active');
      tab_id = $(this).data('tab-num');
      $(this).closest('.tab_con_section').find('.tab_con_bottom .item').removeClass('active');
      $('#' + tab_id).addClass('active');
      return false;
    });
  };
  // タブコンテンツのパララックス
  var target1 = $(".parallax_effect");
  var targetPosOT = target1.offset().top;
  var targetFactor = 0.33;
  var windowHeight = $(window).height();
  var scrollYStart = targetPosOT - windowHeight;
  $(window).on("scroll load", function() {
    var scrollY = $(this).scrollTop();
    if(scrollY > scrollYStart){
      target1.css('background-position-y', (scrollY - targetPosOT) * targetFactor + 'px');
    }else{
      target1.css('background-position','center top');
    }
  });
// END タブコンテンツ
});
</script>