/**
 * 共通レイアウト
 */
html, body {
    background-color: #1a1a1a;
    color: #fff;
    font-weight: 300;
    font-family: 'Hiragino Kaku Gothic ProN', YuGothic, '游ゴシック', meiryo, 'メイリオ', 'ms pgothic', 'ms pゴシック', osaka, sans-serif;
    line-height: 1;
    margin: 0;
    width: 100%;
    height: auto;
}

.header {
    position    : sticky;
    position    : -webkit-sticky;
    top         : 0;
    box-sizing  : border-box;
    background  : #000000;
    height      : 44px;
    line-height : initial;
    font-size   : 10px; /** base size */
    z-index     : 99;
    padding     : 0;
}

.main {
    position    : relative;
    min-height  : calc(100vh - 44px - 103px);
    overflow    : hidden;
}
.main--without-breadcrumbs {
    min-height  : calc(100vh - 44px - 58px);
}
.footer--without-breadcrumbs .footer-breadcrumbs-section {
    display     : none;
}

.footer {
    font-size   : 10px; /** base size */
  /*height      : 103px;*/
    height      : 58px;
}
.footer--without-breadcrumbs {
    height      : 58px;
}
.footer--none {
    display     : none;
}

/**
 * 共通コンポーネント - 取り込み先CSS上書き用
 */
.header.is-backgroundFill {
    background: #000000;
}

.containers {
    min-height: calc(100vh - 44px - 50px - 100px - 56px);
}

.wrapper {
    padding-top: 0;
    z-index: 0;
}

.cornerDetailTitle {
    background: #1a1a1a !important;
}

/**
 * 共通コンポーネント - heading
 */
.heading {
    font-size: 16px;
    font-weight: 600;
    margin: 24px 0;
}

/**
 * 共通コンポーネント - hover 対象
 */
.common-hover-target--button {
    position         : relative;
    cursor           : pointer;
}
.common-hover-target--button::after {
    content          : '';
    position         : absolute;
    top              : 0;
    right            : 0;
    bottom           : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background       : #FFFFFF;
    opacity          : 0;
    transition       : opacity 250ms cubic-bezier(0.22, 0.61, 0.36, 1) 0ms;
}
.common-hover-target--button:hover::after {
    opacity          : 0.06;
}


/* ==================================
561px ~ 767px
================================== */
@media screen and (min-width: 561px) {
    .header {
        height     : 48px;
    }
    .main {
        position    : relative;
        min-height  : calc(100vh - 48px - 122px);
        overflow    : hidden;
    }
    .main--without-breadcrumbs {
        min-height  : calc(100vh - 48px - 71px);
    }
    .footer {
      /*height      : 122px;*/
        height      : 71px;
    }
    .footer--without-breadcrumbs {
        height      : 71px;
    }

    .heading {
        font-size: 18px;
    }

    .containers {
        min-height: calc(100vh - 48px - 50px - 100px - 71px);
    }

    .wrapper {
        padding-top: 0;
    }
}

/* ==================================
768px ~ 1193px
================================== */
@media screen and (min-width: 768px) {
    .header {
        height     : 56px;
    }
    .main {
        position    : relative;
        min-height  : calc(100vh - 56px - 133px);
        overflow    : hidden;
    }
    .main--without-breadcrumbs {
        min-height  : calc(100vh - 56px - 76px);
    }
    .footer {
      /*height      : 133px;*/
        height      : 76px;
    }
    .footer--without-breadcrumbs {
        height      : 76px;
    }
    .heading {
        font-size: 20px;
    }

    .containers {
        min-height: calc(100vh - 56px - 60px - 100px - 76px);
    }

    .wrapper {
        padding-top: 0;
    }
}

/* ==================================
1194px ~ 1349px
================================== */
@media screen and (min-width: 1194px) {
    .heading {
        font-size: 22px;
    }
    .main {
        position    : relative;
        min-height  : calc(100vh - 56px - 145px);
        overflow    : hidden;
    }
    .main--without-breadcrumbs {
        min-height  : calc(100vh - 56px - 84px);
    }
    .footer {
      /*height      : 145px;*/
        height      : 84px;
    }
    .footer--without-breadcrumbs {
        height      : 84px;
    }

    .containers {
        min-height: calc(100vh - 56px - 60px - 100px - 84px);
    }

    .wrapper {
        padding-top: 0;
    }
}

/* ==================================
1350px ~ 1899px
================================== */
@media screen and (min-width: 1350px) {
    .main {
        position    : relative;
        min-height  : calc(100vh - 56px - 176px);
        overflow    : hidden;
    }
    .main--without-breadcrumbs {
        min-height  : calc(100vh - 56px - 108px);
    }
    .footer {
      /*height      : 176px;*/
        height      : 108px;
    }
    .footer {
        height      : 108px;
    }

    .containers {
        min-height: calc(100vh - 56px - 60px - 100px - 108px);
    }

    .wrapper {
        padding-top: 0;
    }
}

/* ==================================
1900px ~
================================== */
@media screen and (min-width: 1900px) {}


/* ==================================
[polyfill] stickyfill
================================== */
.stickyfill:before,
.stickyfill:after {
    content: '';
    display: table;
}