@charset "utf-8";

/**********************************************
** Site Name: キャロットレードアジア
** Site URI: 
** Description: トップページ
**********************************************/

/*-------------------------------------------*/
/*  CONTENTS:
/*--------------------------------------------
1.0 - 汎用スタイル
    1.2 - 見出し
2.0 - メインビジュアル
    2.1 - キャッチコピー
    2.2 - コンセプトイメージ

---------------------------------------------*/

/*-------------------------------------------*/
/*  1.0 - 汎用スタイル
/*-------------------------------------------*/

.top .txt { color: #fff;}

/*  1.1 - 見出し
/*-------------------------------------------*/

.top h2.heading {
  margin-bottom: 0;
  font-weight: 700;
  font-size: 4.0rem;
}
.top .heading_sub {
  margin-bottom: 40px;
  font-weight: 500;
  font-size: 1.78rem;
}
.top h2.heading, .top .heading_sub {
  letter-spacing: 2px;
  font-family: 'Noto Sans JP', sans-serif;
  color: #fff;
}
.top h2.heading::before { content: none;}

/*タブレット・スマホ*/
/* 959px以下 */
@media screen and (max-width:959px) {
  .top h2.heading { font-size: 4.5vw;}
  .top .heading_sub { font-size: 1.6rem;}  
}
@media screen and (max-width:480px) {
  .top .heading_sub { font-size: 1.4rem;}  
}

/*-------------------------------------------*/
/*  2.0 - メインビジュアル
/*-------------------------------------------*/

.top .mainvisual {
  width: 100%;
  height: calc(100vh - 120px);
  overflow: hidden;
  position: relative;
  z-index: 0;
  background: url("../img/top/bg_mainvisual.jpg") no-repeat top center;
  background-size: cover;
}

/*タブレット・スマホ*/
/* 959px以下 */
@media screen and (max-width:959px) {
  .top .mainvisual { height: calc(100vh - 80px);}
  .top .mainvisual .catch {
    width: 100%;
    margin: 0 auto;
  }
}

/*  2.1 - キャッチコピー
/*-------------------------------------------*/

.top .mainvisual h1.catch {
  box-sizing: border-box;
}
.top .mainvisual h1.catch img {
  vertical-align: bottom;
}

/*タブレット・スマホ*/
/* 959px以下 */
@media screen and (max-width:959px) {
  .top .mainvisual .mainvisual_sp {
    height: 100vh;
    position: relative;
  }
  .top .mainvisual .mainvisual_sp .mainvisual_sp_catch {
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    padding-left: 7.5%;
    padding-right: 7.5%;
  }
  .top .mainvisual .mainvisual_sp .mainvisual_sp_catch img {
    width: 100%;
  }
  .top .mainvisual .mainvisual_sp .mainvisual_sp_bg {
    height: 100vh;
  }
  .top .mainvisual .mainvisual_sp .mainvisual_sp_bg img {
    width: 100%;
    height: 100vh;
  }
}

/*PC*/
/* 960px以上 */
@media screen and (min-width:960px) {
  .top .mainvisual h1.catch img {
    height: 100vh;
  }
}