/*
Theme Name:     ConsultingPress Child Theme
Theme URI:      http://pixel-industry.com/
Description:    Child theme for the WordPress theme 
Author:         Pixel Industry
Author URI:     http://pixel-industry.com/
Template:       consultingpress
Version:        1.0
*/













/*
 * トップのヒーロー（旧 Master Slider #27 の置き換え）。
 * 1920px 幅を基準に、横幅に比例して全体が縮む（Master Slider の挙動に合わせた）。
 * 寸法は旧スライダーの実測値。
 */
.dp-hero {
    --u: calc(100cqw / 1920);
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 1000;
    overflow: hidden;
    background: #0f2a44 center / cover no-repeat;
    color: #fff;
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    line-height: normal;
}
.dp-hero__title {
    position: absolute;
    left: calc(89 * var(--u));
    top: calc(304 * var(--u));
    padding: calc(15 * var(--u)) calc(30 * var(--u));
    background: #09202d;
    font-size: calc(43 * var(--u));
    font-weight: 400;
    white-space: nowrap;
}
.dp-hero__video {
    /* 旧スライダーの配置: 中央基準(mc)・オフセット(-535, +185)。高さは中身で決まる */
    position: absolute;
    left: calc(50% - 535 * var(--u));
    top: calc(50% + 185 * var(--u));
    transform: translate(-50%, -50%);
    box-sizing: content-box;
    width: calc(610 * var(--u));
    padding: calc(15 * var(--u)) calc(30 * var(--u));
    background: rgba(0, 0, 0, .75);
    font-size: calc(25 * var(--u));
    font-weight: 300;
    text-align: center;
}
/* 旧スライダーでは iframe の高さと注記の文字サイズは縮小されなかったので、固定値にして合わせる */
.dp-hero__video iframe {
    width: 100%;
    height: 300px;
    border: 0;
}
.dp-hero__video span {
    font-size: 14px;
}

/*
 * スマホ表示の調整（767px 以下）。PC 表示には影響しない。
 */
@media (max-width: 767px) {
    /* WPBakery の行は左右に -15px の余白を持つが、このページ構成ではそれを受ける余白がなく、
       ページ幅が画面幅を超える（390px の画面で 415px 幅になり、全体が縮小表示される）。 */
    html,
    body {
        overflow-x: hidden;
        overflow-x: clip; /* clip 対応ブラウザでは、スクロール領域を作らない clip を優先する */
    }

    /* トップのカード（.flex_test-item）: 左右の余白が大きく、1行に5〜6文字しか入らないため縮める。
       ページごとのカスタム CSS（padding: 40px; margin: 10px）より優先させるためセレクタを限定している。 */
    .flex_test-box .flex_test-item {
        padding: 24px 20px;
        margin: 10px 0;
    }
}

/*
 * 全幅の行（WPBakery の「行を拡張」＋「コンテンツを拡張」。トップの KV など）のレイアウトシフト対策。
 * この行は、JS（js_composer_front）が全幅化するまでコンテナ幅（1170px など）で描画され、
 * JS 実行後に全幅（1280px など）へ広がるため、KV の幅と高さが表示直後に変わり、下の内容も動いてしまう。
 * JS 実行前（data-vc-full-width-init="false"）から同じ全幅で描画する。実行後は JS が付ける
 * インラインの left/width が効くので、このルールは外れる（data-vc-full-width-init="true"）。
 * left の 50% は親（中央寄せのコンテナ）の幅なので、calc(50% - 50vw) で左端が画面の左端に揃う。+15px は
 * WPBakery の行が持つ margin-left: -15px の分。margin-left は触らない（JS が読んで位置を計算するため）。
 */
.vc_row[data-vc-full-width="true"][data-vc-full-width-init="false"][data-vc-stretch-content="true"] {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    left: calc(50% - 50vw + 15px);
}

/* 上の 100vw はスクロールバーの幅を含み、画面より数 px 広くなるため、横スクロールが出ないようにする */
@supports (overflow-x: clip) {
    html,
    body {
        overflow-x: clip;
    }
}