@charset "utf-8";

/*===================================
基本設定
===================================*/

/*html*/

html {
    font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 300;
    color: #373737;
}

#wrapper {
    min-width: 320px;
    overflow: hidden;
    padding-left: 80px;
}

dt,
dd {
    font-weight: normal;
}

input,
textarea,
select {
    font-size: 16px !important;
}

.sp-br {
    display: none;
}

.asterisk {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0.5em;
    padding-left: 1.2em;
    font-size: 10px;
    position: relative;
}

.asterisk::before {
    content: "＊";
    display: inline-block;
    line-height: inherit;
    position: absolute;
    top: 0;
    left: 0;
}

.underline-link a {
    text-decoration: underline;
}

[data-element-id] #wrapper {
    padding-top: 0 !important;
}

@media (max-width: 1024px) {
    #wrapper {
        padding-left: 60px;
    }
}

@media (max-width: 599px) {
    html {
        font-size: 14px;
    }

    #wrapper {
        padding-left: 50px;
    }

    .sp-br {
        display: block;
    }
}


/* base.css追記 */
.up-lst-disc {
    padding-left: 30px;
}

.list-inner {
    height: 100%;
}

/* 余白 */
.space-v0>.space+.space {
    margin-top: 0;
}

.space-v5>.space+.space {
    margin-top: 5px;
}

.space-v10>.space+.space {
    margin-top: 10px;
}

.space-v15>.space+.space {
    margin-top: 15px;
}

.space-v20>.space+.space {
    margin-top: 20px;
}

.space-v25>.space+.space {
    margin-top: 25px;
}

.space-v30>.space+.space {
    margin-top: 30px;
}

.space-v35>.space+.space {
    margin-top: 35px;
}

.space-v40>.space+.space {
    margin-top: 40px;
}

.space-v45>.space+.space {
    margin-top: 45px;
}

.space-v50>.space+.space {
    margin-top: 50px;
}

.space-v55>.space+.space {
    margin-top: 55px;
}

.space-v60>.space+.space {
    margin-top: 60px;
}

.space-v65>.space+.space {
    margin-top: 65px;
}

.space-v70>.space+.space {
    margin-top: 70px;
}

.space-v75>.space+.space {
    margin-top: 75px;
}

.space-v80>.space+.space {
    margin-top: 80px;
}

.space-v85>.space+.space {
    margin-top: 85px;
}

.space-v90>.space+.space {
    margin-top: 90px;
}

.space-v95>.space+.space {
    margin-top: 95px;
}

.space-v100>.space+.space {
    margin-top: 100px;
}

@media (max-width: 1024px) {
    .space-v0\@tb>.space+.space {
        margin-top: 0;
    }

    .space-v5\@tb>.space+.space {
        margin-top: 5px;
    }

    .space-v10\@tb>.space+.space {
        margin-top: 10px;
    }

    .space-v15\@tb>.space+.space {
        margin-top: 15px;
    }

    .space-v20\@tb>.space+.space {
        margin-top: 20px;
    }

    .space-v25\@tb>.space+.space {
        margin-top: 25px;
    }

    .space-v30\@tb>.space+.space {
        margin-top: 30px;
    }

    .space-v35\@tb>.space+.space {
        margin-top: 35px;
    }

    .space-v40\@tb>.space+.space {
        margin-top: 40px;
    }

    .space-v45\@tb>.space+.space {
        margin-top: 45px;
    }

    .space-v50\@tb>.space+.space {
        margin-top: 50px;
    }

    .space-v55\@tb>.space+.space {
        margin-top: 55px;
    }

    .space-v60\@tb>.space+.space {
        margin-top: 60px;
    }

    .space-v65\@tb>.space+.space {
        margin-top: 65px;
    }

    .space-v70\@tb>.space+.space {
        margin-top: 70px;
    }

    .space-v75\@tb>.space+.space {
        margin-top: 75px;
    }

    .space-v80\@tb>.space+.space {
        margin-top: 80px;
    }

    .space-v85\@tb>.space+.space {
        margin-top: 85px;
    }

    .space-v90\@tb>.space+.space {
        margin-top: 90px;
    }

    .space-v95\@tb>.space+.space {
        margin-top: 95px;
    }

    .space-v100\@tb>.space+.space {
        margin-top: 100px;
    }
}

@media (max-width: 599px) {
    .space-v0\@sp>.space+.space {
        margin-top: 0;
    }

    .space-v5\@sp>.space+.space {
        margin-top: 5px;
    }

    .space-v10\@sp>.space+.space {
        margin-top: 10px;
    }

    .space-v15\@sp>.space+.space {
        margin-top: 15px;
    }

    .space-v20\@sp>.space+.space {
        margin-top: 20px;
    }

    .space-v25\@sp>.space+.space {
        margin-top: 25px;
    }

    .space-v30\@sp>.space+.space {
        margin-top: 30px;
    }

    .space-v35\@sp>.space+.space {
        margin-top: 35px;
    }

    .space-v40\@sp>.space+.space {
        margin-top: 40px;
    }

    .space-v45\@sp>.space+.space {
        margin-top: 45px;
    }

    .space-v50\@sp>.space+.space {
        margin-top: 50px;
    }

    .space-v55\@sp>.space+.space {
        margin-top: 55px;
    }

    .space-v60\@sp>.space+.space {
        margin-top: 60px;
    }

    .space-v65\@sp>.space+.space {
        margin-top: 65px;
    }

    .space-v70\@sp>.space+.space {
        margin-top: 70px;
    }

    .space-v75\@sp>.space+.space {
        margin-top: 75px;
    }

    .space-v80\@sp>.space+.space {
        margin-top: 80px;
    }

    .space-v85\@sp>.space+.space {
        margin-top: 85px;
    }

    .space-v90\@sp>.space+.space {
        margin-top: 90px;
    }

    .space-v95\@sp>.space+.space {
        margin-top: 95px;
    }

    .space-v100\@sp>.space+.space {
        margin-top: 100px;
    }
}



/*inner*/

.inner {
    max-width: 1100px;
}

@media (max-width: 1024px) {
    .inner500,
    .inner600,
    .inner700,
    .inner800,
    .inner900,
    .inner,
    .inner1100,
    .inner1200,
    .inner1300,
    .inner1400,
    .inner1500 {
        width: 92%;
    }
}

@media (max-width: 599px) {
    .sp-100\% {
        width: 100%;
    }
}

/*フォント*/

.font-cmn-mont-exlight {
    font-family: "Montserrat";
    font-weight: 200;
}

.font-cmn-mont-light {
    font-family: "Montserrat";
    font-weight: 300;
}

.font-cmn-mont-regular {
    font-family: "Montserrat";
    font-weight: 400;
}

.font-cmn-mont-medium {
    font-family: "Montserrat";
    font-weight: 500;
}

.font-cmn-mont-semibold {
    font-family: "Montserrat";
    font-weight: 600;
}

.font-cmn-mont-bold {
    font-family: "Montserrat";
    font-weight: 700;
}



.font-cmn-nsjp-light {
    font-family: "Noto Sans JP";
    font-weight: 300;
}

.font-cmn-nsjp-regular {
    font-family: "Noto Sans JP";
    font-weight: 400;
}

.font-cmn-nsjp-medium {
    font-family: "Noto Sans JP";
    font-weight: 500;
}

.font-cmn-nsjp-bold {
    font-family: "Noto Sans JP";
    font-weight: 700;
}



/*表示・非表示*/

.show\@pc {
    display: block;
}

.hide\@pc {
    display: none;
}

[data-element-id] .show\@tb {
    display: block;
    border: solid 4px green;
    position: relative;
}

[data-element-id] .show\@tb:after {
    content: "モバイル用です。";
    display: block;
    padding: 5px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: green;
}

[data-element-id] .show\@sp {
    display: block;
    border: solid 4px green;
    position: relative;
}

[data-element-id] .show\@sp:after {
    content: "モバイル用です。";
    display: block;
    padding: 5px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: green;
}

@media (max-width: 1024px) {
    .show\@tb {
        display: block;
    }

    .hide\@tb {
        display: none;
    }
}

@media (max-width: 599px) {
    .show\@sp {
        display: block;
    }

    .hide\@sp {
        display: none;
    }
}



/*fead*/

[class*="fead-"].mv {
    -webkit-transition: 1s;
    transition: 1s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.fead-cover {
    position: relative;
}

.fead-cover:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: #020709;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 15;
}

.fead-cover.mv:before {
    width: 0;
    -webkit-transition: 1s;
    transition: 1s;
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
}

.fead-text {
    opacity: 0;
}

.fead-text.mv {
    opacity: 1;
    -webkit-transition: 0s;
    transition: 0s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.fead-text .str {
    opacity: 0;
}

.fead-text .str.textin {
    opacity: 1;
    -webkit-transition: 1s;
    transition: 1s;
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
}

.fead-lr {
    opacity: 0;
    -webkit-transform: translateX(-20%);
    transform: translateX(-20%);
}

.fead-lr:nth-of-type(2n+2) {
    -webkit-transform: translateX(20%);
    transform: translateX(20%);
}

.fead-lr.mv {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.fead-bg:before {
    content: "";
    width: 0;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
}

.fead-bg.mv:before {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}



/*画像*/

.pic {
    text-align: center;
}

.pic img {
    width: 100%;
}

.filter-cmn-01 {
    overflow: hidden;
    position: relative;
}

.filter-cmn-01:before,
.filter-cmn-01:after {
    content: "";
    height: 100%;
    display: block;
    background: #999;
    position: absolute;
    top: 0;
    z-index: 1;

    mix-blend-mode: multiply;
}

.ie11 .filter-cmn-01:before,
.ie11 .filter-cmn-01:after {
    background-color: rgba(153, 153, 153, 0.5);
}

.filter-cmn-01:before {
    width: 0;
    left: 0;
}

.filter-cmn-01:after {
    width: 100%;
    right: 0;
}

.filter-black {
    overflow: hidden;
    position: relative;
}

.filter-black::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.75)), color-stop(50%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf000000', endColorstr='#00000000', GradientType=1);
    position: absolute;
    top: 0;
    left: 0;
}

@-webkit-keyframes coverStart {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes coverStart {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@-webkit-keyframes coverEnd {
    from {
        width: 100%;
    }

    to {
        width: 0;
    }
}

@keyframes coverEnd {
    from {
        width: 100%;
    }

    to {
        width: 0;
    }
}



/*hover*/

.hover-cmn-01 {
    -webkit-transition: 0s;
    transition: 0s;
}

.hover-cmn-01:hover {
    opacity: 1;
}

/*
.hover-cmn-01:hover .filter-cmn-01:before {
    -webkit-animation: coverStart 1s 1s 1 both;
    animation: coverStart 1s 1s 1 both;
}
*/

.hover-cmn-01:hover .filter-cmn-01:after {
    -webkit-animation: coverEnd 1s 1 both;
    animation: coverEnd 1s 1 both;
}



/*カラー*/

.color-cmn-black {
    color: #000;
}

.color-cmn-white {
    color: #fff;
}

.color-cmn-contrast * {
    color: #fff;
}



/*背景カラー*/

.bgcolor-cmn-black {
    background-color: #000;
}

.bgcolor-cmn-white {
    background-color: #fff;
}



/* 共通コンテンツ間隔 */

.margin-cmn-all {
    margin-top: 100px;
    margin-bottom: 100px;
}

.margin-cmn-top {
    margin-top: 100px;
}

.margin-cmn-bottom {
    margin-bottom: 100px;
}

.margin-cmn-medium-all {
    margin-top: 80px;
    margin-bottom: 80px;
}

.margin-cmn-medium-top {
    margin-top: 80px;
}

.margin-cmn-medium-bottom {
    margin-bottom: 80px;
}

.margin-cmn-small-all {
    margin-top: 50px;
    margin-bottom: 50px;
}

.margin-cmn-small-top {
    margin-top: 50px;
}

.margin-cmn-small-bottom {
    margin-bottom: 50px;
}

@media (max-width: 1024px) {
    .margin-cmn-all {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .margin-cmn-top {
        margin-top: 60px;
    }

    .margin-cmn-bottom {
        margin-bottom: 60px;
    }

    .margin-cmn-medium-all {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .margin-cmn-medium-top {
        margin-top: 50px;
    }

    .margin-cmn-medium-bottom {
        margin-bottom: 50px;
    }

    .margin-cmn-small-all {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .margin-cmn-small-top {
        margin-top: 30px;
    }

    .margin-cmn-small-bottom {
        margin-bottom: 30px;
    }
}

@media (max-width: 599px) {
    .margin-cmn-all {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .margin-cmn-top {
        margin-top: 50px;
    }

    .margin-cmn-bottom {
        margin-bottom: 50px;
    }

    .margin-cmn-medium-all {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .margin-cmn-medium-top {
        margin-top: 40px;
    }

    .margin-cmn-medium-bottom {
        margin-bottom: 40px;
    }

    .margin-cmn-small-all {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .margin-cmn-small-top {
        margin-top: 20px;
    }

    .margin-cmn-small-bottom {
        margin-bottom: 20px;
    }
}

.padding-cmn-all {
    padding-top: 100px;
    padding-bottom: 100px;
}

.padding-cmn-top {
    padding-top: 100px;
}

.padding-cmn-bottom {
    padding-bottom: 100px;
}

.padding-cmn-medium-all {
    padding-top: 80px;
    padding-bottom: 80px;
}

.padding-cmn-medium-top {
    padding-top: 80px;
}

.padding-cmn-medium-bottom {
    padding-bottom: 80px;
}

.padding-cmn-small-all {
    padding-top: 50px;
    padding-bottom: 50px;
}

.padding-cmn-small-top {
    padding-top: 50px;
}

.padding-cmn-small-bottom {
    padding-bottom: 50px;
}

@media (max-width: 1024px) {
    .padding-cmn-all {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .padding-cmn-top {
        padding-top: 60px;
    }

    .padding-cmn-bottom {
        padding-bottom: 60px;
    }

    .padding-cmn-medium-all {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .padding-cmn-medium-top {
        padding-top: 50px;
    }

    .padding-cmn-medium-bottom {
        padding-bottom: 50px;
    }

    .padding-cmn-small-all {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .padding-cmn-small-top {
        padding-top: 30px;
    }

    .padding-cmn-small-bottom {
        padding-bottom: 30px;
    }
}

@media (max-width: 599px) {
    .padding-cmn-all {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .padding-cmn-top {
        padding-top: 50px;
    }

    .padding-cmn-bottom {
        padding-bottom: 50px;
    }

    .padding-cmn-medium-all {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .padding-cmn-medium-top {
        padding-top: 40px;
    }

    .padding-cmn-medium-bottom {
        padding-bottom: 40px;
    }

    .padding-cmn-small-all {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .padding-cmn-small-top {
        padding-top: 20px;
    }

    .padding-cmn-small-bottom {
        padding-bottom: 20px;
    }
}



/*===================================
共通ブロック
==================================*/

/* 共通クラス */
.left {
    margin-left: 40px;
    padding-left: calc(50% - 590px);
}

.box__black {
    padding: 40px 25px;
    background: rgba(30, 30, 30, 0.9);
}

.box__black__transparent {
    padding: 80px 50px;
    background-color: rgba(2, 7, 9, 0.7);
}

.bg-parent {
    position: relative;
}

.bg-cont {
    position: relative;
    z-index: 1;
}

.bg-parent .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.filter__left,
.filter__all {
    position: relative;
}

.filter__all::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: rgba(30, 30, 30, 0.5);
    position: absolute;
    top: 0;
    left: 0;
}

.filter__left::before {
    content: "";
    width: 75%;
    height: 100%;
    display: block;
    background: -webkit-gradient(linear, left top, right top, from(rgba(30, 30, 30, 1)), to(rgba(30, 30, 30, 0)));
    background: linear-gradient(to right, rgba(30, 30, 30, 1) 0%, rgba(30, 30, 30, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e1e1e', endColorstr='#001e1e1e', GradientType=1);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.black-bg {
    position: relative;
}

.black-bg::before {
    content: "";
    width: 95%;
    height: 100%;
    display: block;
    background-color: #262525;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.black-bg_02 {
    background: #020709;
}

.particle-parent {
    position: relative;
}

.particle-cont {
    position: relative;
    z-index: 2;
}

[id*="particle-gray"],
#particle-service {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 1;
}

.indent-1em {
    padding-left: 1em;
}

.border__gray {
    border: 1px solid #b8b8b8;
}

.red {
    color: #f00;
}

.big {
    font-weight: 600;
    font-size: 120%;
}

.small {
    font-size: 10px;
}

@media (max-width: 1024px) {
    .left {
        margin-left: 4%;
        padding-left: 0;
    }

    .box__black {
        padding: 30px 20px;
    }

    .black-bg::before {
        width: 98%;
    }

    .box__black__transparent {
        padding: 50px 30px;
    }
}

@media (max-width: 599px) {
    .box__black {
        padding: 30px 15px;
    }

    .box__black__transparent {
        padding: 50px 15px;
    }
}


/*===================================
共通タイトル
===================================*/

/*共通タイトル基本設定*/

.ttl-cmn-center {
    text-align: center;
}

.ttl-cmn-contrast {
    color: #fff;
}

.title-with-image {
    position: relative;
}

.title-with-image .ttl {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.title-with-image .with-image {
    width: 95%;
    margin-left: auto;
}

.title-with-number {
    position: relative;
}

.title-with-number .title {
    margin-bottom: 50px;
    font-weight: bold;
    font-size: 28px;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.title-with-number .num {
    font-family: "montserrat";
    font-weight: bold;
    font-size: 12vw;
    color: #7b8183;
    line-height: 1;
}

.title-with-number .num.-smaller {
    font-size: 10vw;
}

.title-with-number .small {
    display: block;
    font-weight: normal;
    font-size: 14px;
}



/* 共通タイトル1 */

.ttl-cmn-01 {
    margin-bottom: 70px;
    letter-spacing: 1px;
}

.ttl-cmn-01>span {
    display: block;
}

.ttl-cmn-01 .en {
    font-family: "montserrat";
    font-weight: 600;
    font-size: 65px;
    line-height: 1.2;
}

.ttl-cmn-01 .ja {
    display: block;
}

@media (max-width: 1024px) {
    .ttl-cmn-01,
    .index .top-voice .ttl {
        margin-bottom: 50px;
    }

    .ttl-cmn-01 .en {
        font-size: 40px;
    }

    .title-with-number .title {
        margin-bottom: 30px;
        font-size: 24px;
    }

    .title-with-number .num {
        font-size: 20vw;
    }

    .title-with-number .num.-smaller {
        font-size: 12vw;
    }

    .title-with-number .num.-smaller.-origin\@tb {
        font-size: 16vw;
    }
}

@media (max-width: 599px) {
    .ttl-cmn-01,
    .index .top-voice .ttl {
        margin-bottom: 30px;
    }

    .ttl-cmn-01 .en {
        font-size: 40px;
    }

    .title-with-number .title {
        margin-bottom: 15px;
        font-size: 20px;
    }
}



/* 共通タイトル2 */

.ttl-cmn-02 {
    margin-bottom: 25px;
    font-weight: 500;
    font-size: 24px;
    text-align: center;
}

.ttl-cmn-02:after {
    content: "";
    width: 70px;
    display: block;
    margin: 20px auto 0;
    border-bottom: solid 2px;
}

@media (max-width: 1024px) {
    .ttl-cmn-02 {
        font-size: 22px;
    }
}

@media (max-width: 599px) {
    .ttl-cmn-02 {
        font-size: 20px;
    }

    .ttl-cmn-02:after {
        margin: 10px auto 0;
    }
}



/* 共通タイトル3 */

.ttl-cmn-03>span {
    display: block;
    letter-spacing: 1px;
}

.ttl-cmn-03 .en {
    font-family: "montserrat";
    font-weight: 600;
    font-size: 40px;
}

.ttl-cmn-03.small .en {
    font-weight: 500;
    font-size: 22px;
}

.ttl-cmn-03 .ja {
    font-size: 14px;
}

@media (max-width: 1024px) {
    .ttl-cmn-03 .en {
        font-size: 36px;
    }

    .ttl-cmn-03.small .en {
        font-size: 20px;
    }
}

@media (max-width: 599px) {
    .ttl-cmn-03 .en {
        font-size: 32px;
    }

    .ttl-cmn-03.small .en {
        font-size: 18px;
    }
}



/* 共通タイトル4 */

.ttl-cmn-04>span {
    display: block;
    font-family: "montserrat";
    letter-spacing: 1px;
}

.ttl-cmn-04 .en {
    font-weight: 600;
    font-size: 26px;
}

.ttl-cmn-04 .ja {
    font-weight: 400;
}

@media (max-width: 1024px) {
    .ttl-cmn-04 .en {
        font-size: 24px;
    }
}

@media (max-width: 599px) {
    .ttl-cmn-04 .en {
        font-size: 22px;
    }

    .ttl-cmn-04 .ja {
        font-size: 14px;
    }
}



/* 共通タイトル５ */
.ttl-cmn-05 {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    margin-bottom: 50px;
    font-weight: bold;
    font-size: 22px;
}

.ttl-cmn-05::before {
    content: "";
    width: 50px;
    height: 2px;
    display: block;
    margin-right: 30px;
    background-color: #020709;
}

.ttl-cmn-05>.ja {
    -webkit-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0;
}


/* 共通タイトル６ */
.ttl-cmn-06 {
    width: 100%;
    margin-bottom: 50px;
    padding-left: 80px;
    font-weight: 400;
    font-size: 22px;
    position: relative;
}

.ttl-cmn-06::before {
    content: "";
    width: 50px;
    height: 2px;
    display: block;
    background-color: #020709;
    position: absolute;
    top: 20px;
    left: 0;
}

.ttl-cmn-06 span {
    display: block;
}

@media (max-width: 1024px) {
    .ttl-cmn-05,
    .ttl-cmn-06 {
        margin-bottom: 30px;
        font-size: 20px;
    }

    .ttl-cmn-05::before {
        width: 30px;
    }
}

@media (max-width: 599px) {
    .ttl-cmn-06 {
        padding-left: 0;
        font-size: 18px;
    }

    .ttl-cmn-06::before {
        margin: 15px 0;
        position: static;
    }
}

/* 共通タイトル６ */
.title__side {
    font-family: "montserrat";
    font-weight: 600;
    font-size: 32px;
}

.title__side .ja {
    font-weight: normal;
    font-size: 50%;
}

@media (max-width: 1024px) {
    .title__side {
        font-size: 30px;
    }
}

@media (max-width: 599px) {
    .title__side {
        font-size: 26px;
    }
}

/* 共通タイトル７ */
.ttl-cmn-07 {
    font-size: 24px;
}

.ttl-cmn-07::after {
    content: "";
    width: 50px;
    height: 2px;
    display: block;
    margin: 10px 0 30px;
    background-color: #000;
}

.color-cmn-contrast .ttl-cmn-07::after {
    background-color: #fff;
}

@media (max-width: 1024px) {
    .ttl-cmn-07 {
        font-size: 20px;
    }
}

@media (max-width: 599px) {
    .ttl-cmn-07 {
        font-size: 18px;
    }
}

/*===================================
共通リスト
==================================*/

/* 共通リスト1 */
.list__flat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    padding: 30px 10px;
    border-top: 1px solid #020709;
}

.list__flat:last-of-type {
    border-bottom: 1px solid #020709;
}

.list__flat dt {
    width: 20%;
    font-weight: bold;
    text-align: center;
}

.list__flat dd {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.list__num>li {
    padding-left: 30px;
    position: relative;
}

.list__num>li .list__num__number {
    position: absolute;
    top: 0;
    left: 0;
}

.list__num__brackets li {
    padding-left: 50px;
    position: relative;
}

.list__num__brackets li .list__num__brackets__number {
    position: absolute;
    top: 0;
    left: 0;
}

.list__asterisk li {
    padding-left: 30px;
    position: relative;
}

.list__asterisk li .asterisk {
    position: absolute;
    top: 0;
    left: 0;
}

.list__side {
    margin-top: 15px;
    padding: 15px 0 15px 30px;
    border-left: 3px solid #000;
}

.list__side li {
    font-weight: bold;
}

.list__side li+li {
    margin-top: 10px;
}

.list__count-0 {
    -webkit-column-count: auto;
    -moz-column-count: auto;
    column-count: auto;
}

.list__count-02 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

[class*="list__count"]>li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
}

@media (max-width: 1024px) {
    .list__flat dt {
        width: 30%;
    }

    .list__side {
        margin-top: 10px;
        padding: 10px 0 10px 20px;
        border-left: 2px solid #000;
    }

    .list__count-0\@tb {
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto;
    }

    .list__count-02\@tb {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (max-width: 599px) {
    .list__flat {
        padding: 15px 5px;
    }

    .list__flat dt {
        width: 100%;
        text-align: left;
    }

    .list__count-0\@sp {
        -webkit-column-count: auto;
        -moz-column-count: auto;
        column-count: auto;
    }

    .list__count-02\@sp {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}


/*===================================
共通ボタン
===================================*/

/* ボタン共通css */
.btn-margin-top {
    margin-top: 50px;
}

[class*=btn-cmn-].btn-left a {
    margin-left: 0;
}

[class*=btn-cmn-].btn-right a {
    margin-right: 0;
}

@media (max-width: 1024px) {
    .btn-margin-top {
        margin-top: 30px;
    }
}


/* 共通ボタン1 共通ボタン2 */

[class*=btn-cmn-] a,
[class*=btn-cmn-] button {
    width: 200px;
    max-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    margin: auto;
    padding: 15px 10px;
    font-family: "montserrat";
    font-weight: 500;
    color: #fff;
    letter-spacing: 3px;
    text-align: center;
    border: solid 1px;
    position: relative;
    z-index: 5;
}

[class*=btn-cmn-] a:hover,
[class*=btn-cmn-] button:hover {
    opacity: 1;
}

[class*=btn-cmn-] .btntxt {
    position: relative;
    z-index: 5;
}

[class*=btn-cmn-] .btnarrow {
    width: 20px;
    height: 8px;
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
    position: relative;
    z-index: 5;
}

[class*=btn-cmn-] .btnarrow:before {
    content: "";
    width: 20px;
    height: 0;
    display: block;
    border-bottom: solid 1px;
    position: absolute;
    bottom: 0;
    right: 0;
}

[class*=btn-cmn-] .btnarrow:after {
    content: "";
    width: 10px;
    height: 0;
    display: block;
    border-bottom: solid 1px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    position: absolute;
    bottom: 0;
    right: 0;
}

[class*=btn-cmn-] a:hover .btnarrow,
[class*=btn-cmn-] button:hover .btnarrow {
    -webkit-animation: btnArrow 0.5s 1 forwards;
    animation: btnArrow 0.5s 1 forwards;
}

@-webkit-keyframes btnArrow {
    0% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }

    50% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    100% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
}

@keyframes btnArrow {
    0% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }

    50% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    100% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
}

@-webkit-keyframes back_btnArrow {
    0% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    50% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    100% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }
}

@keyframes back_btnArrow {
    0% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    50% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    100% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }
}



/* 共通ボタン1 */

.btn-cmn-01 a:hover,
.btn-cmn-01 button:hover,
.btn-cmn-01 a:hover .btntxt,
.btn-cmn-01 button:hover .btntxt,
.btn-cmn-01 a:hover .btnarrow,
.btn-cmn-01 button:hover .btnarrow {
    color: #020709;
}

.btn-cmn-01 a:before,
.btn-cmn-01 button:before,
.btn-cmn-01 a:after,
.btn-cmn-01 button:after {
    content: "";
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.btn-cmn-01 a:before,
.btn-cmn-01 button:before {
    border-bottom: 80px solid #020709;
    border-right: 50px solid transparent;
    -webkit-transform: translateX(-49%);
    transform: translateX(-49%);
    right: -50px;
}

.btn-cmn-01 a:hover:before,
.btn-cmn-01 button:hover:before {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.btn-cmn-01 a:after,
.btn-cmn-01 button:after {
    border-top: 80px solid #020709;
    border-left: 50px solid transparent;
    -webkit-transform: translateX(49%);
    transform: translateX(49%);
    left: -50px;
}

.btn-cmn-01 a:hover:after,
.btn-cmn-01 button:hover:after {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}



/* 共通ボタン2 */

.btn-cmn-02 a:hover,
.btn-cmn-02 a:hover .btntxt,
.btn-cmn-02 a:hover .btnarrow {
    color: #020709;
}

.btn-cmn-02 a:before,
.btn-cmn-02 a:after {
    content: "";
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.btn-cmn-02 a:before {
    border-bottom: 80px solid #fff;
    border-right: 50px solid transparent;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    right: -50px;
}

.btn-cmn-02 a:hover:before {
    -webkit-transform: translateX(-49%);
    transform: translateX(-49%);
}

.btn-cmn-02 a:after {
    border-top: 80px solid #fff;
    border-left: 50px solid transparent;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    left: -50px;
}

.btn-cmn-02 a:hover:after {
    -webkit-transform: translateX(49%);
    transform: translateX(49%);
}

/* 共通ボタン３ */
.btn-cmn-03 a,
.btn-cmn-03 button {
    width: 400px;
}

@media (max-width: 599px) {
    .btn-cmn-03 a,
    .btn-cmn-03 button {
        width: 100%;
        font-size: 12px;
    }
}

/* 共通ボタン４ */
.btn-cmn-04 a {
    color: #020709;
}

.btn-cmn-04 a:hover,
.btn-cmn-04 a:hover .btntxt,
.btn-cmn-04 a:hover .btnarrow {
    color: #fff;
}

.btn-cmn-04 a:before,
.btn-cmn-04 a:after {
    content: "";
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.btn-cmn-04 a:before {
    border-bottom: 80px solid #020709;
    border-right: 50px solid transparent;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    right: -50px;
}

.btn-cmn-04 a:hover:before {
    -webkit-transform: translateX(-49%);
    transform: translateX(-49%);
}

.btn-cmn-04 a:after {
    border-top: 80px solid #020709;
    border-left: 50px solid transparent;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    left: -50px;
}

.btn-cmn-04 a:hover:after {
    -webkit-transform: translateX(49%);
    transform: translateX(49%);
}

/* 共通ボタン５ */
.btn-cmn-05 a,
.btn-cmn-05 button {
    width: 400px;
    height: 80px;
}

@media (max-width: 599px) {
    .btn-cmn-05 {
        width: calc(100% - 20px);
    }

    .btn-cmn-05 a,
    .btn-cmn-05 button {
        width: 100%;
        height: 60px;
        font-size: 14px;
    }
}

/* 共通ボタン６ */
.btn-back .btnarrow {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
}

.btn-back .btnarrow:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    left: 0;
    right: auto;
}

.btn-back a:hover .btnarrow,
.btn-back button:hover .btnarrow {
    -webkit-animation: back_btnArrow 0.5s 1 forwards;
    animation: back_btnArrow 0.5s 1 forwards;
}

button .button-inner {
    position: relative;
    z-index: 2;
}

/*===================================
共通要素
===================================*/

/*ヘッダー*/

#header {
    width: calc(100% - 80px);
    height: 65px;
    /*    background: #262525;*/
    background: #fff;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
}

#header.header-fixed {
    -webkit-box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 4px 2px -2px rgba(0, 0, 0, 0.2);
}

#header .flex {
    height: 100%;
}

#header .left {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: 0;
    padding: 10px 20px;
}

.header-banner-wrap {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
}

.list-header-banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
}

.list-header-banner .list-header-item {
    width: 170px;
    margin: 5px;
}

.logo-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

#header .left .logo {
    width: 190px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

#header .left .logo a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#header .left .logo a img {
    vertical-align: middle;
}

.anniversary {
    width: 130px;
    margin-left: 1em;
}

.anniversary img {
    width: 100%;
}

#header .right {
    width: 40%;
    max-width: 300px;
    padding: 10px 20px;
    background: #020709;
}

.headnav {
    width: 100%;
}

.headnav li {
    margin-left: 20px;
}

.headnav li a {
    font-family: "montserrat";
    font-weight: 400;
    color: #fff;
    letter-spacing: 2px;
}

@media (max-width: 1024px) {
    #header {
        width: calc(100% - 60px);
        height: 60px;
    }

    .header-banner-wrap {
        margin-right: 2%;
    }

    .list-header-banner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .list-header-banner .list-header-item {
        width: 90px;
        margin: 2px;
    }
}

@media (max-width: 599px) {
    #header {
        width: calc(100% - 50px);
        height: 60px;
    }

    #header .left {
        width: 100%;
        max-width: 310px;
        max-width: 100%;
        margin: auto;
        padding: 0;
    }

    /* 10周年ロゴ用に一時的に追加 */
    #header .left .logo {
        width: 170px;
        padding-left: 10px;
    }

    .anniversary {
        width: 100px;
    }

    #header .right {
        display: none;
    }

    .headnav li a {
        font-size: 14px;
    }
}



/*fixbar*/

.fixbar {
    width: 80px;
    height: 100vh;
    padding-top: 80px;
    background: #020709;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 250;
}

.fixnav {
    height: 100%;
}

.fixnav li {
    margin: 20px auto;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.fixnav li a {
    font-family: "montserrat";
    font-weight: 400;
    color: #fff;
    line-height: 1;
    letter-spacing: 2px;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: tb-rl;
    writing-mode: tb-rl;
}

@media (max-width: 1024px) {
    .fixbar {
        width: 60px;
    }
}

@media (max-width: 599px) {
    .fixbar {
        width: 50px;
        padding-top: 61px;
    }

    .fixnav li a {
        font-size: 14px;
    }
}



/*ハンバーガー*/

.toggle {
    width: 40px;
    height: 40px;
    overflow: hidden;
    opacity: 0.8;
    cursor: pointer;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 251;
}

.toggle .bar {
    width: 25px;
    height: 2px;
    display: block;
    margin-top: -1px;
    padding: 0;
    text-indent: 9999px;
    background: #fff;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: absolute;
    top: 50%;
    left: 0;
}

.toggle .bar:before,
.toggle .bar:after {
    content: "";
    height: 2px;
    display: block;
    background: #fff;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: absolute;
    left: 0;
}

.toggle .bar:before {
    width: 40px;
    top: -10px;
}

.toggle .bar:after {
    width: 15px;
    top: 10px;
}

.toggle.active .bar {
    width: 40px;
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.toggle.active .bar:before {
    width: 0;
}

.toggle.active .bar:after {
    width: 40px;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 0;
    left: 0;
}

/* .menu__item--bento {
    width: 36px;
    height: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: auto;
    cursor: pointer;
    position: absolute;
    top: 15px;
    left: 20px;
    z-index: 251;
}

.menu__item--bento .box {
    width: 8px;
    height: 8px;
    display: inline-block;
    margin: 2px 2px;
    background: #fff;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
}

.menu__item--bento .box:nth-child(1) {
    -webkit-animation: 3s ease-in 5s infinite alternate forwards running box;
    animation: 3s ease-in 5s infinite alternate forwards running box;
}

.menu__item--bento .box:nth-child(2) {
    -webkit-animation: 3s ease-in 5.1s infinite alternate forwards running box;
    animation: 3s ease-in 5.1s infinite alternate forwards running box;
}

.menu__item--bento .box:nth-child(3) {
    -webkit-animation: 3s ease-in 5.2s infinite alternate forwards running box;
    animation: 3s ease-in 5.2s infinite alternate forwards running box;
}

.menu__item--bento .box:nth-child(4) {
    -webkit-animation: 3s ease-in 5.3s infinite alternate forwards running box;
    animation: 3s ease-in 5.3s infinite alternate forwards running box;
}

.menu__item--bento .box:nth-child(5) {
    -webkit-animation: 3s ease-in 5.4s infinite alternate forwards running box;
    animation: 3s ease-in 5.4s infinite alternate forwards running box;
}

.menu__item--bento .box:nth-child(6) {
    -webkit-animation: 3s ease-in 5.5s infinite alternate forwards running box;
    animation: 3s ease-in 5.5s infinite alternate forwards running box;
}

.menu__item--bento .box:nth-child(7) {
    -webkit-animation: 3s ease-in 5.6s infinite alternate forwards running box;
    animation: 3s ease-in 5.6s infinite alternate forwards running box;
}

.menu__item--bento .box:nth-child(8) {
    -webkit-animation: 3s ease-in 5.7s infinite alternate forwards running box;
    animation: 3s ease-in 5.7s infinite alternate forwards running box;
}

.menu__item--bento .box:nth-child(9) {
    -webkit-animation: 3s ease-in 5.8s infinite alternate forwards running box;
    animation: 3s ease-in 5.8s infinite alternate forwards running box;
}

@-webkit-keyframes box {
    from {
        opacity: 1;
    }

    4% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

@keyframes box {
    from {
        opacity: 1;
    }

    4% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

.active.menu__item--bento .box {
    opacity: 1;
    -webkit-animation: none;
    animation: none;
}

.active.menu__item--bento .box:nth-child(2),
.active.menu__item--bento .box:nth-child(4),
.active.menu__item--bento .box:nth-child(6),
.active.menu__item--bento .box:nth-child(8),
.menu__item--bento:hover .box:nth-child(2),
.menu__item--bento:hover .box:nth-child(4),
.menu__item--bento:hover .box:nth-child(6),
.menu__item--bento:hover .box:nth-child(8) {
    opacity: 0;
} */

.barger-body {
    width: 100%;
    height: 100vh;
    pointer-events: none;
    /* background: rgb(2, 7, 9, 0.98); */
    position: fixed;
    top: 0;
    right: 0;
    z-index: 250;
}

.barger-body.active {
    pointer-events: auto;
}

.barger-video {
    width: 100%;
    height: 100vh;
    opacity: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: absolute;
    top: 0;
    left: 0;
}

.barger-body.active .barger-video {
    opacity: 1;
    -webkit-transition-delay: 0.7s;
    transition-delay: 0.7s;
}

.barger-video video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.barger-inner {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 5;
}

.barger-left {
    width: 280px;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #262525;
    opacity: 0;
    -webkit-transition: 0.5s opacity, 0.5s -webkit-transform;
    transition: 0.5s opacity, 0.5s -webkit-transform;
    transition: 0.5s opacity, 0.5s transform;
    transition: 0.5s opacity, 0.5s transform, 0.5s -webkit-transform;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
}

.barger-body.active .barger-left {
    opacity: 1;
    -webkit-transition: 0.5s 0.5s opacity, 0.5s 0.4s transform;
    transition: 0.5s 0.5s opacity, 0.5s 0.4s transform;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: right;
    transform-origin: right;
}

.barger-line {
    content: "";
    width: 1px;
    height: 100%;
    display: block;
    background: #ccc;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    position: absolute;
    top: 0;
    left: 279px;
    z-index: -2;
}

.barger-body.active .barger-line {
    -webkit-transition: 0.2s 0.2s;
    transition: 0.2s 0.2s;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.barger-navwrap {
    padding: 80px 20px 100px;
}

.barger-right {
    width: calc(100% - 280px);
    position: relative;
}

.barger-nav {
    opacity: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.barger-nav:not(:last-of-type) {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: solid 1px #555;
}

.barger-body.active .barger-nav {
    opacity: 1;
}

.barger-body.active .barger-nav:nth-of-type(1) {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.barger-body.active .barger-nav:nth-of-type(2) {
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

.barger-body.active .barger-nav:nth-of-type(3) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
}

.barger-body.active .barger-nav:nth-of-type(4) {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
}

.barger-body.active .barger-nav:nth-of-type(5) {
    -webkit-transition-delay: 1.3s;
    transition-delay: 1.3s;
}

.barger-body.active .barger-nav:nth-of-type(6) {
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
}

.barger-nav li {
    margin: 15px 0;
}

.barger-nav li a {
    font-family: "montserrat";
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    letter-spacing: 3px;
}

.barger-banner {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
}

.barger-banner li {
    width: 15%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    opacity: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.barger-body.active .barger-banner li {
    opacity: 1;
}

.barger-body.active .barger-banner li:nth-of-type(1) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
}

.barger-body.active .barger-banner li:nth-of-type(2) {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

.barger-body.active .barger-banner li:nth-of-type(3) {
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

.barger-body.active .barger-banner li:nth-of-type(4) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
}

.barger-body.active .barger-banner li:nth-of-type(5) {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
}

.barger-body.active .barger-banner li:nth-of-type(6) {
    -webkit-transition-delay: 1.3s;
    transition-delay: 1.3s;
}

.barger-banner li a {
    width: 100%;
    height: 100%;
    display: block;
    font-family: "montserrat";
    font-weight: 400;
    font-size: 20px;
    color: #fff;
    letter-spacing: 3px;
    text-align: center;
    background: #262525;
    position: relative;
}

.barger-banner li a:before {
    content: "";
    display: block;
    padding-top: 75%;
}

.barger-banner li a:hover {
    opacity: 1;
}

.barger-banner li:nth-of-type(1) a {
    background: rgba(35, 75, 107, 0.7);
}

.barger-banner li:nth-of-type(2) a {
    background: rgba(38, 37, 37, 0.7);
}

.barger-banner li:nth-of-type(3) a {
    background: rgba(101, 63, 63, 0.7);
}

.barger-banner li:nth-of-type(4) a {
    background: rgba(2, 7, 9, 0.7);
}

.barger-banner li a .txt {
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
}

.barger-banner li a .pic {
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    opacity: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    -webkit-transform: scaleX(0.9);
    transform: scaleX(0.9);
    position: absolute;
    top: 40px;
    left: 30px;
}

.barger-banner li a:hover .pic {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    top: 30px;
}

@media (max-width: 1024px) {
    .toggle {
        top: 10px;
        left: 10px;
    }

    .barger-left {
        width: 55%;
    }

    .barger-right {
        width: 45%;
    }

    .barger-line {
        left: calc(55% - 1px);
    }

    .barger-banner {
        height: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .barger-banner li {
        width: 100%;
    }

    .barger-banner li a .pic {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        top: 30px;
        left: 20px;
    }

    .barger-banner li a:hover .pic {
        top: 20px;
    }
}

@media (max-width: 599px) {
    .toggle {
        top: 7px;
        left: 5px;
    }

    .barger-nav:not(:last-of-type) {
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    .barger-nav li {
        margin: 10px 0;
    }

    .barger-nav li a {
        font-size: 12px;
    }

    .barger-banner li a {
        font-size: 18px;
    }

    .barger-banner li a .pic {
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        top: 20px;
        left: 10px;
    }

    .barger-banner li a:hover .pic {
        top: 10px;
    }
}

/* 固定youtubeボタン */
.icon-youtube::before {
    content: "\f167";
    display: inline-block;
    font-family: "Font Awesome 5 Brands";
    font-weight: 900;
    color: gray;
    line-height: 1;
}

.fixed-btn-wrap {
    position: fixed;
    bottom: 5%;
    right: 0;
    z-index: 10;
}

.fixed-btn {
    width: 275px;
    overflow: hidden;
    margin-right: -185px;
    border-radius: 10px 0 0 10px;
    -webkit-transition: margin 0.3s linear;
    transition: margin 0.3s linear;
}

.fixed-btn:hover {
    margin-right: 0;
}

.fixed-btn a {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px 25px 15px 20px;
    font-size: 12px;
    color: white;
    text-align: center;
    background-color: #1e1e1e;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.7);
    opacity: 0.8;
}

.fixed-btn a .icon-youtube {
    width: 50px;
    height: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 20px;
    font-size: 30px;
    color: #fe0100;
    border-radius: 100%;
    background-color: white;
}

.reflection {
    overflow: hidden;
    position: relative;
}

.reflection::before {
    content: "";
    width: 30px;
    height: 100%;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: reflection 3s ease-in-out infinite;
    animation: reflection 3s ease-in-out infinite;
    position: absolute;
    top: -180px;
    left: 0;
    z-index: 1;
}

@-webkit-keyframes reflection {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
    }

    80% {
        opacity: 0.5;
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
    }

    81% {
        opacity: 1;
        -webkit-transform: scale(4) rotate(45deg);
        transform: scale(4) rotate(45deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(50) rotate(45deg);
        transform: scale(50) rotate(45deg);
    }
}

@keyframes reflection {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
    }

    80% {
        opacity: 0.5;
        -webkit-transform: scale(0) rotate(45deg);
        transform: scale(0) rotate(45deg);
    }

    81% {
        opacity: 1;
        -webkit-transform: scale(4) rotate(45deg);
        transform: scale(4) rotate(45deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(50) rotate(45deg);
        transform: scale(50) rotate(45deg);
    }
}

@media (max-width: 1024px) {
    .fixed-btn {
        width: 220px;
        margin-right: -150px;
    }

    .fixed-btn a {
        padding: 10px 20px 10px 15px;
        font-size: 10px;
    }

    .fixed-btn a .icon-youtube {
        width: 40px;
        height: 40px;
        margin-right: 15px;
        font-size: 25px;
    }
}

/*フッター*/

#footer {
    background: #020709;
}

.footup {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: solid 1px #777676;
}

.footlogo a {
    width: 100%;
    display: block;
}

.footlogo img {
    width: 100%;
    max-width: 270px;
}

.footcache {
    margin-top: 15px;
    font-size: 14px;
}

.footnav li {
    margin-bottom: 10px;
    margin-left: 25px;
}

.footnav li a {
    font-family: "montserrat";
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 1px;
}

.footnav li img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.footaddress dl+dl {
    margin-top: 30px;
}

.footaddress dt {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 14px;
}

.footaddress dd {
    font-weight: inherit;
    font-size: 13px;
}

.footcopy-wrap {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    -ms-flex-align: end;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.footcopy-wrap .foot-banner {
    width: 220px;
    max-width: 220px;
    margin-right: 1em;
}

.footcopy-wrap .foot-banner a {
    width: 100%;
    display: block;
}

.footcopy-wrap .foot-banner a img {
    width: 100%;
}

.footcopy {
    margin-top: 30px;
    font-family: "montserrat";
    font-weight: 200;
    font-size: 12px;
    letter-spacing: 2px;
    text-align: right;
}

@media (max-width: 1024px) {
    .footup .left1 {
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }

    .footup .right1 {
        width: 100%;
    }

    .footdown .left2 {
        width: 100%;
        margin-bottom: 40px;
    }

    .footnav li {
        margin: 10px 15px;
    }

    .footdown .right2 {
        width: 100%;
    }
}

@media (max-width: 599px) {
    .footup .left1 {
        margin-bottom: 30px;
    }

    .footcache {
        margin-top: 30px;
        font-size: 3vw;
    }

    .footnav li {
        margin: 5px 10px;
    }

    .footdown .left2 {
        margin-bottom: 30px;
    }

    .footnav2 li a {
        font-size: 10px;
    }

    .footcopy-wrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
        -ms-flex-align: center;
        margin-top: 30px;
    }

    .footcopy-wrap .foot-banner {
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
    }

    .footcopy {
        width: 100%;
        font-size: 10px;
    }
}



/* A-BiSUスライダー用 */

.mainimg {
    overflow: hidden;
    position: relative;
}

.mainimg .uk-slidenav-position {
    height: 100% !important;
}

.mainimg .uk-slideshow {
    height: 100% !important;
}

.mainimg .uk-slideshow>li {
    height: 100% !important;
}

.mainimg .uk-slideshow>li>div {
    height: 100% !important;
}

.mainimg .uk-slideshow>li>div>img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    /*IE対策*/
    font-family: "object-fit: cover; object-position: 50% 50%;";
}



/*===================================
トップページ
===================================*/

/*ローディング*/

#loading {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #262525;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

#loading:before,
#loading:after {
    content: "";
    width: 0;
    height: 100%;
    display: block;
    background: #020709;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

#loading.loading-end {
    -webkit-animation: loading 1s 1s 1 forwards;
    animation: loading 1s 1s 1 forwards;
}

#loading.loading-start:before {
    width: 100%;
    -webkit-animation: loading 1s 1s 1 forwards;
    animation: loading 1s 1s 1 forwards;
}

#loading.loading-end:after {
    width: 100%;
}

@-webkit-keyframes loading {
    from {
        left: 0;
    }

    to {
        left: 100%;
    }
}

@keyframes loading {
    from {
        left: 0;
    }

    to {
        left: 100%;
    }
}

#loading-particle {
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: 2s;
    transition: 2s;
    position: absolute;
    top: 0;
    left: 0;
}

.loading-start #loading-particle {
    opacity: 1;
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
}

.loading-end #loading-particle {
    opacity: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

#loading-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: auto;
    opacity: 0;
    -webkit-filter: drop-shadow(0px 0px 5px #fff);
    filter: drop-shadow(0px 0px 5px #fff);
    -webkit-transition: 1.5s;
    transition: 1.5s;
    -webkit-transform: translate(0, -50%) scale(0.7);
    transform: translate(0, -50%) scale(0.7);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 5;
}

.loading-start #loading-logo {
    max-width: 45%;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
    -webkit-transition-delay: 2.5s;
    transition-delay: 2.5s;
    -webkit-transform: translate(0, -50%) scale(1);
    transform: translate(0, -50%) scale(1);
}

.loading-end #loading-logo {
    opacity: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

@media (max-width: 599px) {
    .loading-start #loading-logo {
        max-width: 60%;
    }
}


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

.mainimg {
    height: 100vh;
    overflow: hidden;
    padding-bottom: 65px;
    position: relative;
}

.mainimg:before {
    content: "";
    width: 40%;
    max-width: 300px;
    height: 100%;
    display: block;
    background: #020709;
    position: absolute;
    top: 0;
    right: 0;
}

/* .mainimg.mv:before {
    width: 40%;
    max-width: 400px;
} */

.mainimg .video {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.mainimg .video video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.mainimg .cache {
    width: 90%;
    color: #fff;
    text-align: right;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 10%;
    z-index: 5;
}

.mainimg .cache .big {
    font-family: "montserrat";
    font-weight: bold;
    font-size: 70px;
    line-height: 1.2;
}

.mainimg .cache .big>div {
    margin: 15px 5px;
    padding: 2px;
}

.mainimg .cache .sub {
    margin-top: 10px;
    font-size: 22px;
}

.scroll {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    position: absolute;
    bottom: 15%;
    left: 5%;
    z-index: 5;
}

.scroll a {
    display: block;
    font-weight: 500;
    color: #fff;
    letter-spacing: 3px;
    position: relative;
}

.scroll a:before {
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 100%;
    background: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-animation: scroll 3s infinite;
    animation: scroll 3s infinite;
    position: absolute;
    top: 54%;
    right: 110%;
}

@-webkit-keyframes scroll {
    25% {
        right: calc(110% + 70px);
    }

    50% {
        bottom: 110%;
    }
}

@keyframes scroll {
    25% {
        right: calc(110% + 70px);
    }

    50% {
        bottom: 110%;
    }
}

@media (max-width: 1024px) {
    .mainimg {
        padding-bottom: 50px;
    }

    .mainimg .video {
        width: 90%;
    }

    .mainimg .cache {
        right: 5%;
    }

    .mainimg .cache .big {
        font-size: 50px;
    }

    .mainimg .cache .sub {
        font-size: 20px;
    }
}

@media (max-width: 599px) {
    .mainimg {
        padding-bottom: 30px;
    }

    .mainimg:before {
        display: none;
    }

    .mainimg .video {
        width: 100%;
    }

    .mainimg .cache .big {
        font-size: 35px;
    }

    .mainimg .cache .sub {
        font-size: 18px;
    }

    .scroll {
        -webkit-transform: rotate(-90deg) translate(0, -100%);
        transform: rotate(-90deg) translate(0, -100%);
        bottom: 13%;
        left: auto;
        right: -10%;
    }

    .scroll a {
        font-size: 12px;
    }

    .scroll a:before {
        width: 8px;
        height: 8px;
        top: 50%;
    }
}



/*top-news*/

.top-news .item {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: solid 1px #373737;
}

.top-news .item .info {
    width: 250px;
}

.top-news .item .info span {
    display: inline-block;
}

.top-news .item .info .date {
    margin-right: 20px;
}

.top-news .item .info .cate {
    font-weight: 400;
}

.top-news .item .tit {
    width: calc(100% - 250px);
}

.top-news .btn a {
    margin-left: 0;
}

@media (max-width: 1024px) {
    .top-news .item .info {
        width: 100%;
        margin-bottom: 5px;
    }

    .top-news .item .tit {
        width: 100%;
    }

    .top-news .item {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
}

@media (max-width: 599px) {
    .top-news .btn {
        margin: 30px auto 0;
    }
}



/*top-service*/

.top-service {
    background: #020709;
    position: relative;
}

.top-service .inner1200 {
    position: relative;
    z-index: 5;
}

.top-service #particle-service {
    width: 100%;
    height: 100%;
    background: url(/import/tenant_2/unison-planet.jp/html/images/top/top-service-bg2.jpg) no-repeat;
    background-size: cover;
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 0;
}

.top-service .item+.item {
    margin-top: 80px;
}

.top-service .item .picbox {
    width: 65%;
    position: relative;
}

.top-service .item .ttl2 {
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
}

.top-service .item .ttl-logo img {
    max-width: 260px;
    -webkit-filter: brightness(1000) drop-shadow(0px 0px 10px #ddd);
    filter: brightness(1000) drop-shadow(0px 0px 10px #ddd);
}

.logo-cx {
    -webkit-filter: drop-shadow(0px 0px 8px #ddd) !important;
    filter: drop-shadow(0px 0px 8px #ddd) !important;
}


.top-service .item .tbox {
    width: 50%;
    margin-top: 7.5%;
    padding: 40px;
    background: rgba(30, 30, 30, 0.9);
    position: relative;
    z-index: 20;
}

.top-service .item .txt {
    line-height: 2;
    letter-spacing: 1px;
}

.top-service .item:nth-of-type(2n+1) .tbox {
    margin-left: -15%;
}

.top-service .item:nth-of-type(2n+2) .flex {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.top-service .item:nth-of-type(2n+2) .tbox {
    margin-right: -15%;
}

@media (max-width: 1024px) {
    .top-service .item+.item {
        margin-top: 60px;
    }

    .top-service .item .picbox {
        width: 55%;
    }

    .top-service .item .tbox {
        width: 45%;
        padding: 20px;
    }
}

@media (max-width: 599px) {
    .top-service .item+.item {
        margin-top: 40px;
    }

    .top-service .item .picbox {
        width: 100%;
    }

    .top-service .item .tbox {
        width: 100%;
        margin: 0 !important;
        padding: 15px;
        background: rgba(30, 30, 30, 0.8);
    }
}



/*top-voice*/

.top-voice .ttl {
    margin-bottom: 0;
}

.index .top-voice .ttl {
    margin-bottom: 70px;
}

.top-voice .item {
    padding: 0 20px;
}

.top-voice .item:hover {
    opacity: 0.6;
}

.top-voice .item .pic {
    width: 95%;
    margin: auto;
}

.top-voice .item:not(.slick-current) .pic {
    background: #020709;
}

.top-voice .item:not(.slick-current) .pic img {
    opacity: 0.4;
}

.top-voice .item .label {
    display: inline-block;
    padding: 5px 10px;
    font-size: 14px;
    color: #fff;
    background: #020709;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.slash::before {
    content: "/";
    display: inline-block;
    margin: 0 5px;
}

.top-voice .item .name {
    margin-bottom: 10px;
    color: #8e8f8f;
}

.top-voice .item .tit {
    font-weight: 500;
    font-size: 18px;
    color: #282828;
}

.top-voice .slick-arrow {
    width: 45px;
    height: 45px;
    text-align: center;
    border: solid 1px;
    cursor: pointer;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    position: absolute;
    bottom: 100%;
    z-index: 20;
}

.top-voice .prev {
    right: calc(5% + 60px);
}

.top-voice .next {
    right: 5%;
}

.top-voice .slick-arrow img {
    vertical-align: bottom;
}

@media (max-width: 1024px) {
    .top-voice .item {
        padding: 0 15px;
    }

    .top-voice .slick-arrow {
        top: 50%;
    }

    .top-voice .prev {
        left: 10px;
        right: auto;
    }

    .top-voice .next {
        left: auto;
        right: 10px;
    }

    .top-voice .item .tit {
        font-size: 16px;
    }
}

@media (max-width: 599px) {
    .top-voice .item {
        padding: 0 5px;
    }

    .top-voice .item .tit {
        font-size: 14px;
    }
}



/*top-about*/

.top-about {
    overflow: hidden;
    position: relative;
}

.top-about:before {
    background: #262525;
    left: 0;
}

.top-about.mv:before {
    width: calc(50% + 400px);
}

.top-about .inner {
    position: relative;
    z-index: 5;
}

.top-about .item {
    display: block;
    position: relative;
}

.top-about .list1 .ttl {
    width: 95%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
}



/*top-recruit*/

.top-recruit {
    background: #020709;
    position: relative;
}

.top-recruit .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.top-recruit .inner {
    position: relative;
    z-index: 5;
}

.top-recruit .tit {
    margin-bottom: 30px;
    font-size: 22px;
    letter-spacing: 5px;
}

@media (max-width: 1024px) {
    .top-recruit .bg img {
        -o-object-position: center right;
        object-position: center right;
        font-family: "object-fit: cover; object-position: center right;";
    }
}



/*top-banner*/

.top-banner .item {
    display: block;
    position: relative;
}

.top-banner .item:hover * {
    color: #373737;
    -webkit-transition: 1s;
    transition: 1s;
}

.top-banner .item .tbox {
    width: 95%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
}

.top-banner .item .ttl {
    margin-bottom: 20px;
}

@media (max-width: 599px) {
    .top-banner .item .sub {
        font-size: 14px;
    }
}


/*===================================
下層ページ
===================================*/

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

.topvisual {
    position: relative;
}



/* 下層ページメインビジュアル */
.lowerimg {
    padding-top: 80px;
    position: relative;
}

.lowerimg::before {
    content: "";
    width: 100%;
    height: 80%;
    display: block;
    background-color: #020709;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.lowerimg.no-image::before {
    height: 100%;
}

.lowerimg-inner {
    width: 100%;
    margin: auto;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: calc(50% + 40px);
    left: 0;
    z-index: 1;
}

.lower-visual {
    width: 70%;
    margin-left: auto;
}

.no-image .lower-visual::before {
    content: "";
    display: block;
    padding-top: 35%;
}

.no-image-box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.lower-visual-image::before {
    content: "";
    display: block;
    padding-top: 45%;
}

.lower-visual-image img {
    width: 100%;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    font-family: "object-fit: cover; object-position: center center;";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.lowerimg .scroll {
    -webkit-transform: rotate(-90deg) translate(0%, 150%);
    transform: rotate(-90deg) translate(0%, 150%);
    bottom: 20%;
    left: auto;
    right: 0;
}

@media (max-width: 1024px) {
    .lowerimg {
        padding-top: 70px;
    }

    .lowerimg-inner {
        top: calc(50% + 35px);
    }

    .lower-visual-image::before {
        padding-top: 50%;
    }

    .no-image .lower-visual::before {
        padding-top: 45%;
    }
}

@media (max-width: 599px) {
    .lowerimg-inner {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        position: relative;
    }

    .lower-visual {
        width: 90%;
    }

    .lower-visual-image::before {
        padding-top: 60%;
    }

    .no-image .lower-visual::before {
        padding-top: 50%;
    }
}

/* company */
.company-history-image {
    margin-bottom: 3%;
    padding: 5% 5% 0 5%;
    position: relative;
}

.company-history-image::before {
    content: "";
    width: 40%;
    height: 95%;
    display: block;
    background-color: #020709;
    position: absolute;
    top: 0;
    left: 0;
}

#elevator {
    width: calc(100% - 80px);
    margin: auto;
    opacity: 0;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
    position: fixed;
    top: 0;
    left: 80px;
    z-index: 5;
}

#elevator.scrolled {
    opacity: 1;
}

#elevator ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    align-items: flex-start;
    -ms-flex-align: start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#elevator li {
    width: calc((100% - 24px) / 6);
    margin: 2px;
}

#elevator li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 15px;
    /*  font-weight: bold; */
    font-size: 16px;
    color: white;
    line-height: 1.2;
    border: 1px solid #1e1e1e;
    background-color: #1e1e1e;
    opacity: 0.8;
}

#elevator li a.current {
    color: #1e1e1e;
    background-color: white;
}

@media (max-width: 1400px) {
    #elevator {
        width: calc(100% - 85px);
    }
}

@media (max-width: 1024px) {
    #elevator {
        width: calc(100% - 60px);
        left: 60px;
    }

    #elevator li {
        width: calc((100% - 12px) / 3);
    }

    #elevator li a {
        padding: 10px 15px;
    }
}

@media (max-width: 599px) {
    #elevator {
        width: calc(100% - 50px);
        left: 50px;
    }

    #elevator li {
        width: calc((100% - 12px) / 3);
    }

    #elevator li a {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* 棒グラフ */
/* 
###グラフの変更について###
グラフの高さはjs（graph.js）で動的に入れてます。
.graph-scale-horizontal の data-graph="" 内の値が「件数　＝　高さ」となります。
棒グラフの上の数字も自動でいきます。
.graph-scale-horizontal の要素に.graph-focus のクラス名を追加すると
A-BiSUカラー（青色）になります。

2020年度を追加する時は
１．.graph-scale-horizontal を2019年の次に追加
　　（年と年の間は自動で縮まります。あまり増えすぎたら崩れますが…）
２．.graph-yearの数字を2020に変更
３．data-graphの値を任意の数字にする
４．.graph-focus のクラス名を2019年から移動させる
の手順でお願いします。


###縦軸（件数）について###
.graph-scale-vertical を1200の上に追加してください。
 */

.graph-wrap {
    width: 880px;
    max-width: 90%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
    align-items: flex-end;
    -ms-flex-align: end;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden;
    margin: 30px auto 0;
    padding-top: 50px;
}

.graph-wrap_02 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.graph-wrap-wide {
    width: 1200px;
}

.graph {
    width: 100%;
    padding-bottom: 30px;
}

.graph-vertical {
    width: 10%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

[class*="graph-scale"] {
    color: #fff;
}

.graph-scale-vertical {
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    position: relative;
}

.graph-scale-vertical .scale-num {
    width: 100%;
    display: inline-block;
    padding-right: 10px;
    letter-spacing: 1px;
    text-align: right;
}

.graph-scale-vertical::after {
    content: "";
    width: 10%;
    height: 1px;
    display: block;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-right: -999rem;
    padding-right: 999rem;
    background-color: #fff;
}

.graph-scale-vertical+.graph-scale-vertical {
    margin-top: 25px;
}

.graph-wrap_02 .graph-scale-vertical+.graph-scale-vertical {
    margin-top: 25px;
}

.graph-note {
    font-size: 12px;
    color: white;
}

.graph-horizontal {
    width: 90%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    padding: 0 30px;
}

.graph-scale-horizontal {
    min-width: 15px;
    display: inline-block;
    padding: 0 5px;
    line-height: 1;
    letter-spacing: 1px;
    text-align: center;
    position: relative;
}

.graph-scale-horizontal .expect::after {
    content: "連結";
    font-size: 10px;
    white-space: pre;
    position: absolute;
    bottom: -20px;
    left: 15px;
}

.graph-scale-horizontal+.graph-scale-horizontal {
    margin-left: auto;
}

.graph-scale-horizontal .rod {
    width: 100%;
    height: 0;
    display: block;
    background-color: rgba(237, 237, 237, 0.8);
    -webkit-transition: 1s linear;
    transition: 1s linear;
    position: absolute;
    bottom: 30px;
    left: 0;
}

.graph-scale-horizontal .rod::before {
    content: attr(data-graph);
    display: block;
    margin: auto;
    font-family: "montserrat";
    font-size: 13px;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    position: absolute;
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    z-index: 1;
}

.graph-focus .rod {
    background-color: rgba(62, 190, 228, 0.8);
}

.graph-focus .rod::before {
    width: 200%;
    font-weight: bold;
    font-size: 30px;
    color: #3ebee4;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    left: 50%;
    right: 50%;
}

.graph-wrap_02 .graph-focus .rod {
    background-color: rgba(255, 99, 71, 0.8);
}

.graph-wrap_02 .graph-focus .rod::before {
    width: 200%;
    font-weight: bold;
    font-size: 30px;
    color: #ff6347;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    left: 50%;
    right: 50%;
}

@media (max-width: 1024px) {
    .graph-wrap {
        width: 100%;
    }

    .graph-wrap-wide {
        max-width: 100%;
    }

    .graph-wrap_02 .graph,
    .graph-note {
        width: 100%;
    }

    .graph-vertical {
        font-size: 12px;
    }

    .graph-scale-vertical .scale-num {
        padding-right: 10px;
    }

    .graph-horizontal {
        padding: 0 10px;
    }

    .graph-scale-horizontal {
        padding: 0 3px;
        font-size: 12px;
    }

    .graph-scale-horizontal .rod {
        bottom: 28px;
    }

    .graph-wrap_02 .graph-focus .rod::before,
    .graph-focus .rod::before {
        font-size: 24px;
    }
}

@media (max-width: 599px) {
    .graph-wrap {
        padding-top: 15px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .graph {
        padding-bottom: 80px;
    }

    .graph-vertical {
        width: 15%;
        font-size: 10px;
    }

    .graph-scale-vertical {
        height: 20px;
    }

    .graph-scale-vertical+.graph-scale-vertical {
        margin-top: 15px;
    }

    .graph-wrap_02 .graph-scale-vertical+.graph-scale-vertical {
        margin-top: 15px;
    }

    .graph-scale-vertical .scale-num {
        padding-right: 5px;
    }

    .graph-horizontal {
        width: 85%;
    }

    .graph-scale-horizontal {
        padding: 0 2px;
        font-size: 10px;
    }

    .graph-scale-horizontal .expect::after {
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        bottom: -70px;
        left: 2px;
    }

    .graph-year {
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }

    .graph-scale-horizontal .rod {
        bottom: 36px;
    }

    .graph-scale-horizontal .rod::before {
        font-size: 10px;
        top: 0;
    }

    .graph-wrap_02 .graph-focus .rod::before,
    .graph-focus .rod::before {
        font-size: 14px;
    }
}

/* 円グラフ */
.circle-graph-wrap {
    margin-left: -20%;
}

.circle-graph {
    width: 480px;
    margin: auto;
    position: relative;
}

.circle-graph::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.circle-graph-label * {
    color: #fff;
}

.circle-graph-heading li {
    font-size: 22px;
    letter-spacing: 1px;
    opacity: 0;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    position: absolute !important;
    z-index: 1;
}

.scrolled.circle-graph-heading li {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.circle-graph-heading li:nth-of-type(1) {
    font-family: "montserrat";
    font-weight: bold;
    font-size: 50px;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    top: 50px;
    right: -30px;
}

.circle-graph-heading li:nth-of-type(1) .small {
    font-weight: normal;
    font-size: 50%;
}

.circle-graph-heading li:nth-of-type(2) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
    top: 190px;
    right: 50px;
}

.circle-graph-heading li:nth-of-type(3) {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
    top: 290px;
    right: 50px;
}

.circle-graph-heading li:nth-of-type(4) {
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
    top: 360px;
    right: 90px;
}

.circle-graph-heading li:nth-of-type(5) {
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
    top: 240px;
    right: 380px;
}

.ie-only-graph-image {
    display: none;
}

.ie11 .ie-only-graph-image {
    display: block;
}

@media (max-width: 1024px) {
    .circle-graph {
        width: 390px;
    }

    .circle-graph-heading li {
        font-size: 20px;
    }

    .circle-graph-heading li:nth-of-type(1) {
        top: 30px;
        right: -40px;
    }

    .circle-graph-heading li:nth-of-type(2) {
        top: 150px;
        right: 40px;
    }

    .circle-graph-heading li:nth-of-type(3) {
        top: 230px;
        right: 40px;
    }

    .circle-graph-heading li:nth-of-type(4) {
        top: 290px;
        right: 80px;
    }

    .circle-graph-heading li:nth-of-type(5) {
        right: 295px;
    }
}

@media (max-width: 599px) {
    .circle-graph {
        width: 200px;
    }

    .circle-graph-heading li {
        font-size: 14px;
    }

    .circle-graph-heading li:nth-of-type(1) {
        font-size: 22px;
        top: 20px;
        right: -20px;
    }

    .circle-graph-heading li:nth-of-type(2) {
        top: 80px;
        right: 20px;
    }

    .circle-graph-heading li:nth-of-type(3) {
        top: 120px;
        right: 20px;
    }

    .circle-graph-heading li:nth-of-type(4) {
        top: 150px;
        right: 35px;
    }

    .circle-graph-heading li:nth-of-type(5) {
        top: 100px;
        right: 150px;
    }
}

/* 全国6000社以上 */
.include-map-content {
    margin-right: -10%;
    position: relative;
    z-index: 1;
}

@media (max-width: 1024px) {
    .include-map-content {
        margin-bottom: -30%;
        margin-right: 0;
    }
}


@media (max-width: 599px) {
    .include-map-content {
        margin-bottom: -5%;
    }
}

/* works */
@media (max-width: 1300px) {
    .graph-content,
    .circle-graph-wrap {
        width: 100%;
    }
}

/* form */
.form {
    margin-top: 50px;
    padding: 50px 30px;
    border-top: 1px solid #373737;
}

.form.-ver2 {
    border-top: none;
}

.must {
    display: inline-block;
    margin-left: 10px;
    color: #f00;
}

.contact-item {
    padding: 20px 0;
}

.contact-item dd input,
.contact-item dd textarea {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #f5f5f5;
}

.contact-item dd input {
    width: 90%;
}

.contact-item dd textarea {
    height: 150px;
}

.contact-item.-ver2 dt {
    margin-bottom: 0.5em;
}

.contact-item.-ver2 dt .must {
    font-size: 80%;
}

.contact-item.-ver2 dd input,
.contact-item.-ver2 dd textarea {
    width: 100%;
    padding: 1.5em 1em;
}

.contact-item.-ver2 dd input::-webkit-input-placeholder {
    font-size: 14px;
}

.contact-item.-ver2 dd input::-moz-placeholder {
    font-size: 14px;
}

.contact-item.-ver2 dd input::-ms-input-placeholder {
    font-size: 14px;
}

.contact-item.-ver2 dd input::placeholder {
    font-size: 14px;
}

.contact-item.-ver2 dd textarea {
    height: 250px;
}

.progress-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 50px 0;
}

.progress-item {
    width: 70px;
}

.progress-item+.progress-item {
    margin-left: 10em;
}

.progress-item+.progress-item .progress-element::before {
    content: "";
    width: calc(10em + 20px);
    height: 1px;
    display: block;
    background-color: darkgray;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    left: calc(-10em - 20px);
}

.progress-num {
    margin-bottom: 0.5em;
    font-weight: bold;
    font-size: 22px;
    color: darkgray;
    line-height: 1;
    text-align: center;
}

.progress-element {
    width: 50px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 3px;
    background-color: darkgray;
    position: relative;
}

.progress-text {
    margin-top: 1em;
    font-weight: bold;
    font-size: 20px;
    color: darkgray;
    text-align: center;
}

.progress-item.current .progress-element {
    background-color: black;
}

.progress-item.current .progress-num,
.progress-item.current .progress-text {
    color: black;
}

@media (max-width: 1024px) {
    .form {
        margin-top: 30px;
        padding: 30px 15px;
    }

    .contact-item {
        padding: 10px 0;
    }

    .progress-item+.progress-item {
        margin-left: 5em;
    }

    .progress-num {
        font-size: 20px;
    }

    .progress-element {
        width: 45px;
        height: 45px;
    }

    .progress-text {
        margin-top: 0.5em;
        font-size: 18px;
    }

    .progress-item+.progress-item .progress-element::before {
        width: calc(5em + 25px);
        left: calc(-5em - 25px);
    }
}

@media (max-width: 599px) {
    .form {
        margin-top: 30px;
        padding: 30px 0;
    }

    .contact-item dd input {
        width: 100%;
    }

    .progress-item+.progress-item {
        margin-left: 3em;
    }

    .progress-num {
        font-size: 18px;
    }

    .progress-element {
        width: 40px;
        height: 40px;
    }

    .progress-text {
        font-size: 16px;
    }

    .progress-item+.progress-item .progress-element::before {
        width: calc(3em + 30px);
        left: calc(-3em - 30px);
    }
}

/* pager */
.pager ul li {
    width: 50px;
    height: 50px;
    margin: 0 5px;
}

.pager ul li a,
.pager ul li .now {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: "montserrat";
    font-weight: 600;
    font-size: 18px;
    color: #fff;
    border: 1px solid #000;
    background-color: #000;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
}

.pager ul li a:hover,
.pager ul li .now {
    color: #000;
    background-color: #fff;
    opacity: 1;
}

.pager .prev a,
.pager .next a {
    position: relative;
}

.pager .prev a::before,
.pager .next a::before {
    content: "";
    width: 20px;
    height: 7px;
    display: block;
    margin: auto;
    border-bottom: 1px solid #fff;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 1;
}

.pager .prev a::before {
    border-left: 1px solid #fff;
    -webkit-transform: skew(-45deg) translate(0, -50%);
    transform: skew(-45deg) translate(0, -50%);
}

.pager .next a::before {
    border-right: 1px solid #fff;
    -webkit-transform: skew(45deg) translate(0, -50%);
    transform: skew(45deg) translate(0, -50%);
}

.pager .prev a:hover::before,
.pager .next a:hover::before {
    border-bottom: 1px solid #000;
}

.pager .prev a:hover::before {
    border-left: 1px solid #000;
}

.pager .next a:hover::before {
    border-right: 1px solid #000;
}

@media (max-width: 1024px) {
    .pager ul li {
        width: 40px;
        height: 40px;
    }

    .pager ul li a {
        font-size: 16px;
    }
}

@media (max-width: 599px) {
    .pager ul li {
        margin: 0 3px;
    }
}

/* カスタムコンテンツ */
.detail-item {
    margin-bottom: 50px;
    padding: 30px 10px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.detail-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.detail-info>div+div {
    margin-left: 10px;
}

.detail-title {
    font-weight: 600;
    font-size: 20px;
}

@media (max-width: 1024px) {
    .detail-item {
        margin-bottom: 30px;
        padding: 20px 5px;
    }

    .detail-title {
        font-size: 18px;
    }
}

@media (max-width: 599px) {
    .detail-item {
        padding: 15px 5px;
    }
}

/* about */
@media (max-width: 599px) {
    .works .slick-slider .prev,
    .works .slick-slider .next {
        display: none !important;
    }
}

/* service */
.service-box {
    position: relative;
}

.service-box::before {
    content: "";
    width: 85%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
}

.service-box:nth-of-type(odd)::before {
    background-color: #262525;
    right: 0;
}

.service-box:nth-of-type(even)::before {
    background-color: #020709;
    left: 0;
}

.service-image {
    width: 80%;
    position: relative;
    z-index: 2;
}

.service-logo {
    max-width: 80%;
}

.service-logo img {
    width: 100%;
    max-width: 380px;
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.service-box .service-item {
    width: 75%;
    position: relative;
    z-index: 2;
}

.service-box:nth-of-type(odd) .service-item {
    margin-left: auto;
    padding: 50px 10% 50px 50px;
}

.service-box:nth-of-type(even) .service-item {
    width: 85%;
    margin-right: auto;
    padding: 50px 50px 50px 10%;
}

.service-box:nth-of-type(even) [id*="particle"] {
    left: auto;
    right: 0;
}

@media (max-width: 1024px) {
    .service-image {
        width: 90%;
    }

    .service-box::before {
        width: 95%;
    }

    .service-box .service-item {
        width: 85%;
        padding: 30px 5% 30px 30px !important;
    }
}

@media (max-width: 599px) {
    .service-box .service-item {
        width: 95%;
        padding: 30px 10px !important;
    }
}

/* office */
.office-wrap .tab-inner {
    position: relative;
}

.map-information {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.list__office {
    padding: 30px 0 30px 0;
    border-left: 3px solid #000;
}

.list__office li {
    margin-left: 50px;
    padding-left: 30px;
    -webkit-transition: 0.1s linear;
    transition: 0.1s linear;
}

.list__office li:hover {
    font-weight: 600;
    cursor: pointer;
}

.list__office li+li {
    margin-top: 10px;
}

.list__office .head-office+.branch {
    margin-top: 30px;
}

.list__office li.on {
    padding-left: 0;
    font-weight: 600;
    position: relative;
}

.list__office li.on::before {
    content: "";
    width: 40px;
    height: 100%;
    display: block;
    margin: auto;
    background-image: url(/import/tenant_2/unison-planet.jp/html/images/office/tab-parts_002.png), url(/import/tenant_2/unison-planet.jp/html/images/office/tab-parts_001.png);
    background-size: 5px 6px, 100% auto;
    background-repeat: no-repeat, repeat-x;
    background-position: center right, center center;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    left: -50px;
    z-index: 1;
}

.tablist-wrap .bg {
    height: 80%;
    overflow: hidden;
    top: auto;
    bottom: 0;
}

.tablist-wrap .video {
    width: 100%;
    height: 100%;
}

.tablist-wrap .video video {
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    margin: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    font-family: "object-fit: cover; object-position: center center;";
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    position: absolute;
    top: 0;
    left: 50%;
}

.japanmap-wrap {
    margin-bottom: 50px;
    position: relative;
}

.japanmap {
    padding: 30px;
}

.japanmap img {
    width: 100%;
}

.map-list li {
    position: absolute;
    z-index: 1;
}

.branch-name::before {
    content: "";
    height: 2px;
    display: block;
    border-bottom: 1px solid #000;
    position: absolute;
    z-index: -1;
}

.branch-name {
    display: inline-block;
    padding: 5px 20px;
    font-size: 1.1vw;
    color: #fff;
    line-height: 1.2;
    letter-spacing: 1px;
    background-color: #000;
    -webkit-transition: 0.3s linear;
    transition: 0.3s linear;
    position: relative;
}

.branch-name:hover {
    background-color: #00a0c6;
    cursor: pointer;
}

.on .branch-name {
    background-color: #00a0c6;
}

.point {
    position: absolute;
}

.point-inner {
    width: 15px;
    height: 15px;
    display: block;
    background-color: #262525;
}

.point-inner::before {
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    display: inline-block;
    margin: auto;
    background-color: rgba(38, 37, 37, 0.5);
    -webkit-transform: translate(-25%, -50%);
    transform: translate(-25%, -50%);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: -1;
}

.on .point-inner::before {
    width: 45px;
    height: 45px;
    background-color: rgba(0, 160, 198, 0.3);
    -webkit-animation: flash 1.5s ease-in-out infinite;
    animation: flash 1.5s ease-in-out infinite;
}

@-webkit-keyframes flash {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes flash {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.on .point-inner {
    width: 22px;
    height: 22px;
    background-color: #00a0c6;
}

.tablist-cont {
    padding-bottom: 50px;
}

.office-tablist {
    width: 650px;
    max-width: 80%;
    margin-left: 50px;
    padding: 50px 30px;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 15px -1px rgba(128, 128, 128, 0.8);
    box-shadow: 0px 0px 15px -1px rgba(128, 128, 128, 0.8);
}

.tablist-cont--col2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 50px;
}

.tablist-cont--col2 .office-tablist {
    width: calc((100% - 50px) / 2);
    margin: 0;
}

.office-tablist .map iframe {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

@media (max-width: 1310px) {
    .office-wrap .inner1200 {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 1024px) {
    .office-wrap .inner1200 {
        width: 100%;
        max-width: 100%;
    }

    .japanmap-wrap {
        margin-bottom: 30px;
    }

    .map-information {
        padding: 10px;
        position: static;
    }

    .list__office {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        min-height: 200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 0 30px 10px 30px;
        border-top: 3px solid #000;
        border-left: none;
    }

    .list__office li {
        margin-top: 30px;
        margin-left: 15px;
        padding-top: 30px;
        padding-left: 0;
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }

    .list__office li+li {
        margin-top: 30px;
    }

    .list__office li.on {
        padding-top: 0;
    }

    .list__office li.on::before {
        width: 100%;
        height: 30px;
        background-image: url(/import/tenant_2/unison-planet.jp/html/images/office/tab-parts_002.png), url(/import/tenant_2/unison-planet.jp/html/images/office/tab-parts_001.png);
        background-size: 5px 6px, 100% auto;
        background-repeat: no-repeat, repeat-x;
        background-position: center right, center center;
        -webkit-transform: translate(0, 0) rotate(90deg);
        transform: translate(0, 0) rotate(90deg);
        position: absolute;
        top: -34px;
        left: 0;
    }

    .point-inner {
        width: 10px;
        height: 10px;
    }

    .point-inner::before {
        width: 20px;
        height: 20px;
    }

    .on .point-inner {
        width: 15px;
        height: 15px;
    }

    .on .point-inner::before {
        width: 35px;
        height: 35px;
    }

    .branch-name {
        padding: 5px 15px;
    }
    
    .office-wrap--v2 .tab-inner {
        max-width: 70%;
        margin: 0 auto;
    }

    .office-tablist {
        width: 580px;
        max-width: 70%;
        padding: 30px 20px;
    }
    
    .tablist-cont--col2 .office-tablist {
        width: 100%;
    }

    .office-address {
        font-size: 14px;
    }

    .office-tablist .map:after {
        padding-top: 65%;
    }
}

@media (max-width: 599px) {
    .list__office {
        padding: 0 5px 10px 5px;
    }

    .japanmap {
        padding: 30px 10px;
    }

    .branch-name {
        padding: 3px 4px;
        font-size: 10px;
    }

    .point-inner {
        width: 5px;
        height: 5px;
    }

    .point-inner::before {
        width: 10px;
        height: 10px;
    }

    .on .point-inner {
        width: 10px;
        height: 10px;
    }

    .on .point-inner::before {
        width: 20px;
        height: 20px;
    }
    
    .office-wrap--v2 .tab-inner {
        max-width: 90%;
    }

    .office-tablist {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        padding: 30px 15px;
    }
    
    .tablist-cont--col2 .office-tablist {
        width: 100%;
    }

    .office-tablist .map:after {
        padding-top: 80%;
    }
}

/* ##### 本社・各支店の位置 ##### */
/* 本社 */
.osaka {
    top: 820px;
    left: 520px;
}

.osaka .point {
    top: -45px;
    left: -70px;
}

.osaka .branch-name::before {
    width: 76px;
    -webkit-transform: rotate(29deg) translate(-100%, -100%);
    transform: rotate(29deg) translate(-100%, -100%);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    top: 2px;
    left: 2px;
}

/* 東京支店 */
.tokyo {
    top: 760px;
    left: 760px;
}

.tokyo .point {
    top: -55px;
    left: -65px;
}

.tokyo .branch-name::before {
    width: 76px;
    -webkit-transform: rotate(39deg) translate(-100%, -100%);
    transform: rotate(39deg) translate(-100%, -100%);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    top: 2px;
    left: 2px;
}

/* 名古屋出張所 */
.nagoya {
    bottom: 415px;
    right: 700px;
}

.nagoya .point {
    bottom: -68px;
    right: -57px;
}

.nagoya .branch-name::before {
    width: 80px;
    -webkit-transform: rotate(231deg);
    transform: rotate(231deg);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    bottom: 1px;
    right: 1px;
}

/* 静岡出張所 */
.shizuoka {
    bottom: 495px;
    right: 700px;
}

.shizuoka .point {
    bottom: -170px;
    right: -115px;
}

.shizuoka .branch-name::before {
    width: 200px;
    -webkit-transform: rotate(238deg);
    transform: rotate(238deg);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    bottom: 4px;
    right: 0;
}

/* 香川出張所 */
.kagawa {
    top: 920px;
    left: 510px;
}

.kagawa .point {
    top: -120px;
    left: -140px;
}

.kagawa .branch-name::before {
    width: 175px;
    -webkit-transform: rotate(40deg) translate(-100%, -100%);
    transform: rotate(40deg) translate(-100%, -100%);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    top: 2px;
    left: 2px;
}

/* 広島出張所 */
.hiroshima {
    bottom: 395px;
    right: 990px;
}

.hiroshima .point {
    bottom: -80px;
    right: -80px;
}

.hiroshima .branch-name::before {
    width: 105px;
    -webkit-transform: rotate(227deg);
    transform: rotate(227deg);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    bottom: 4px;
    right: 0;
}

/* 福岡出張所 */
.fukuoka {
    top: 900px;
    left: 210px;
}

.fukuoka .point {
    top: -65px;
    left: -60px;
}

.fukuoka .branch-name::before {
    width: 80px;
    -webkit-transform: rotate(46deg) translate(-100%, -100%);
    transform: rotate(46deg) translate(-100%, -100%);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    top: 2px;
    left: 2px;
}

/* アクセルジャパンバナー */
.banner-section {
    padding: 0 0 5vw;
}

.banner-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.banner-area .banner-img {
    width: calc(50% - 20px);
    margin: 10px;
}

.banner-area .banner-img img {
    width: 100%;
}

@media (max-width: 1024px) {
    .banner-section .inner700 {
        max-width: 550px;
    }
}

@media (max-width: 599px) {
    .banner-area .banner-img {
        width: calc(70% - 10px);
        margin: 5px;
    }
}

@media (max-width: 1310px) {
    /* 本社 */
    .osaka {
        top: calc(930 / 1310 * (100vw - 140px));
        left: calc(590 / 1310 * (100vw - 140px));
    }

    .osaka .point {
        top: calc(-45 / 1310 * (100vw - 140px));
        left: calc(-70 / 1310 * (100vw - 140px));
    }

    .osaka .branch-name::before {
        width: calc(76 / 1310 * (100vw - 140px));
    }

    /* 東京支店 */
    .tokyo {
        top: calc(870 / 1310 * (100vw - 140px));
        left: calc(870 / 1310 * (100vw - 140px));
    }

    .tokyo .point {
        top: calc(-55 / 1310 * (100vw - 140px));
        left: calc(-65 / 1310 * (100vw - 140px));
    }

    .tokyo .branch-name::before {
        width: calc(76 / 1310 * (100vw - 140px));
    }

    /* 名古屋出張所 */
    .nagoya {
        bottom: calc(460 / 1310 * (100vw - 140px));
        right: calc(800 / 1310 * (100vw - 140px));
    }

    .nagoya .point {
        bottom: calc(-68 / 1310 * (100vw - 140px));
        right: calc(-57 / 1310 * (100vw - 140px));
    }

    .nagoya .branch-name::before {
        width: calc(80 / 1310 * (100vw - 140px));
        -webkit-transform: rotate(232deg);
        transform: rotate(232deg);
    }

    /* 静岡出張所 */
    .shizuoka {
        bottom: calc(540 / 1310 * (100vw - 140px));
        right: calc(780 / 1310 * (100vw - 140px));
    }

    .shizuoka .point {
        bottom: calc(-170 / 1310 * (100vw - 140px));
        right: calc(-115 / 1310 * (100vw - 140px));
    }

    .shizuoka .branch-name::before {
        width: calc(200 / 1310 * (100vw - 140px));
        -webkit-transform: rotate(237deg);
        transform: rotate(237deg);
    }

    /* 香川出張所 */
    .kagawa {
        top: calc(1040 / 1310 * (100vw - 140px));
        left: calc(560 / 1310 * (100vw - 140px));
    }

    .kagawa .point {
        top: calc(-120 / 1310 * (100vw - 140px));
        left: calc(-140 / 1310 * (100vw - 140px));
    }

    .kagawa .branch-name::before {
        width: calc(175 / 1310 * (100vw - 140px));
    }

    /* 広島出張所 */
    .hiroshima {
        bottom: calc(440 / 1310 * (100vw - 140px));
        right: calc(1120 / 1310 * (100vw - 140px));
    }

    .hiroshima .point {
        bottom: calc(-80 / 1310 * (100vw - 140px));
        right: calc(-80 / 1310 * (100vw - 140px));
    }

    .hiroshima .branch-name::before {
        width: calc(105 / 1310 * (100vw - 140px));
    }

    /* 福岡出張所 */
    .fukuoka {
        top: calc(1030 / 1310 * (100vw - 140px));
        left: calc(230 / 1310 * (100vw - 140px));
    }

    .fukuoka .point {
        top: calc(-65 / 1310 * (100vw - 140px));
        left: calc(-60 / 1310 * (100vw - 140px));
    }

    .fukuoka .branch-name::before {
        width: calc(80 / 1310 * (100vw - 140px));
    }
}

@media (max-width: 1024px) {
    /* 本社 */
    .osaka {
        top: calc(750 / 1024 * (100vw - 120px));
        left: calc(480 / 1024 * (100vw - 120px));
    }

    .osaka .point {
        top: calc(-45 / 1024 * (100vw - 120px));
        left: calc(-70 / 1024 * (100vw - 120px));
    }

    .osaka .branch-name::before {
        width: calc(76 / 1024 * (100vw - 120px));
        -webkit-transform: rotate(32deg) translate(-100%, -100%);
        transform: rotate(32deg) translate(-100%, -100%);
    }

    /* 東京支店 */
    .tokyo {
        top: calc(695 / 1024 * (100vw - 120px));
        left: calc(700 / 1024 * (100vw - 120px));
    }

    .tokyo .point {
        top: calc(-55 / 1024 * (100vw - 120px));
        left: calc(-65 / 1024 * (100vw - 120px));
    }

    .tokyo .branch-name::before {
        width: calc(76 / 1024 * (100vw - 120px));
        -webkit-transform: rotate(41deg) translate(-100%, -100%);
        transform: rotate(41deg) translate(-100%, -100%);
    }

    /* 名古屋出張所 */
    .nagoya {
        bottom: calc(385 / 1024 * (100vw - 120px));
        right: calc(640 / 1024 * (100vw - 120px));
    }

    .nagoya .point {
        bottom: calc(-68 / 1024 * (100vw - 120px));
        right: calc(-57 / 1024 * (100vw - 120px));
    }

    .nagoya .branch-name::before {
        width: calc(80 / 1024 * (100vw - 120px));
        -webkit-transform: rotate(230deg);
        transform: rotate(230deg);
    }

    /* 静岡出張所 */
    .shizuoka {
        bottom: calc(470 / 1024 * (100vw - 120px));
        right: calc(645 / 1024 * (100vw - 120px));
    }

    .shizuoka .point {
        bottom: calc(-170 / 1024 * (100vw - 120px));
        right: calc(-115 / 1024 * (100vw - 120px));
    }

    .shizuoka .branch-name::before {
        width: calc(200 / 1024 * (100vw - 120px));
    }

    /* 香川出張所 */
    .kagawa {
        top: calc(845 / 1024 * (100vw - 120px));
        left: calc(475 / 1024 * (100vw - 120px));
    }

    .kagawa .point {
        top: calc(-120 / 1024 * (100vw - 120px));
        left: calc(-140 / 1024 * (100vw - 120px));
    }

    .kagawa .branch-name::before {
        width: calc(175 / 1024 * (100vw - 120px));
        -webkit-transform: rotate(41deg) translate(-100%, -100%);
        transform: rotate(41deg) translate(-100%, -100%);
    }

    /* 広島出張所 */
    .hiroshima {
        bottom: calc(370 / 1024 * (100vw - 120px));
        right: calc(900 / 1024 * (100vw - 120px));
    }

    .hiroshima .point {
        bottom: calc(-80 / 1024 * (100vw - 120px));
        right: calc(-80 / 1024 * (100vw - 120px));
    }

    .hiroshima .branch-name::before {
        width: calc(105 / 1024 * (100vw - 120px));
    }

    /* 福岡出張所 */
    .fukuoka {
        top: calc(825 / 1024 * (100vw - 120px));
        left: calc(205 / 1024 * (100vw - 120px));
    }

    .fukuoka .point {
        top: calc(-65 / 1024 * (100vw - 120px));
        left: calc(-60 / 1024 * (100vw - 120px));
    }

    .fukuoka .branch-name::before {
        width: calc(90 / 1024 * (100vw - 120px));
        -webkit-transform: rotate(48deg) translate(-100%, -100%);
        transform: rotate(48deg) translate(-100%, -100%);
    }
}

@media (max-width: 768px) {
    /* 本社 */
    .osaka {
        top: calc(570 / 768 * (100vw - 120px));
        left: calc(375 / 768 * (100vw - 120px));
    }

    /* 東京支店 */
    .tokyo {
        top: calc(535 / 768 * (100vw - 120px));
        left: calc(540 / 768 * (100vw - 120px));
    }

    /* 名古屋出張所 */
    .nagoya {
        bottom: calc(295 / 768 * (100vw - 120px));
        right: calc(485 / 768 * (100vw - 120px));
    }

    /* 静岡出張所 */
    .shizuoka {
        bottom: calc(360 / 768 * (100vw - 120px));
        right: calc(495 / 768 * (100vw - 120px));
    }

    /* 香川出張所 */
    .kagawa {
        top: calc(645 / 768 * (100vw - 120px));
        left: calc(365 / 768 * (100vw - 120px));
    }

    /* 広島出張所 */
    .hiroshima {
        bottom: calc(290 / 768 * (100vw - 120px));
        right: calc(680 / 768 * (100vw - 120px));
    }

    /* 福岡出張所 */
    .fukuoka {
        top: calc(630 / 768 * (100vw - 120px));
        left: calc(165 / 768 * (100vw - 120px));
    }
}

@media (max-width: 599px) {
    /* 本社 */
    .osaka {
        top: calc(445 / 599 * (100vw - 70px));
        left: calc(270 / 599 * (100vw - 70px));
    }

    .osaka .branch-name::before {
        width: calc(49 / 599 * (100vw - 70px));
        -webkit-transform: rotate(40deg) translate(-100%, -100%);
        transform: rotate(40deg) translate(-100%, -100%);
    }

    /* 東京支店 */
    .tokyo {
        top: calc(420 / 599 * (100vw - 70px));
        left: calc(400 / 599 * (100vw - 70px));
    }

    .tokyo .branch-name::before {
        width: calc(46 / 599 * (100vw -70px));
        -webkit-transform: rotate(47deg) translate(-100%, -100%);
        transform: rotate(47deg) translate(-100%, -100%);
    }

    /* 名古屋出張所 */
    .nagoya {
        bottom: calc(235 / 599 * (100vw - 70px));
        right: calc(360 / 599 * (100vw - 70px));
    }

    /* 静岡出張所 */
    .shizuoka {
        bottom: calc(280 / 599 * (100vw - 70px));
        right: calc(360 / 599 * (100vw - 70px));
    }

    .shizuoka .branch-name::before {
        width: calc(107 / 599 * (100vw - 70px));
        -webkit-transform: rotate(238deg);
        transform: rotate(238deg);
    }

    /* 香川出張所 */
    .kagawa {
        top: calc(500 / 599 * (100vw - 70px));
        left: calc(260 / 599 * (100vw - 70px));
    }

    .kagawa .branch-name::before {
        width: calc(104 / 599 * (100vw - 70px));
        -webkit-transform: rotate(43deg) translate(-100%, -100%);
        transform: rotate(43deg) translate(-100%, -100%);
    }

    /* 広島出張所 */
    .hiroshima {
        bottom: calc(230 / 599 * (100vw - 70px));
        right: calc(515 / 599 * (100vw - 70px));
    }

    /* 福岡出張所 */
    .fukuoka {
        top: calc(490 / 599 * (100vw - 70px));
        left: calc(105 / 599 * (100vw - 70px));
    }

    .fukuoka .branch-name::before {
        width: calc(54 / 599 * (100vw - 70px));
        -webkit-transform: rotate(52deg) translate(-100%, -100%);
        transform: rotate(52deg) translate(-100%, -100%);
    }
}

@media (max-width: 428px) {
    /* 本社 */
    .osaka {
        top: calc(335 / 428 * (100vw - 70px));
        left: calc(200 / 428 * (100vw - 70px));
    }

    /* 東京支店 */
    .tokyo {
        top: calc(310 / 428 * (100vw - 70px));
        left: calc(290 / 428 * (100vw - 70px));
    }

    .tokyo .branch-name::before {
        width: calc(30 / 428 * (100vw -70px));
    }

    /* 名古屋出張所 */
    .nagoya {
        bottom: calc(175 / 428 * (100vw - 70px));
        right: calc(260 / 428 * (100vw - 70px));
    }

    /* 静岡出張所 */
    .shizuoka {
        bottom: calc(210 / 428 * (100vw - 70px));
        right: calc(260 / 428 * (100vw - 70px));
    }

    /* 香川出張所 */
    .kagawa {
        top: calc(370 / 428 * (100vw - 70px));
        left: calc(190 / 428 * (100vw - 70px));
    }

    .kagawa .branch-name::before {
        width: calc(70 / 428 * (100vw - 70px));
        -webkit-transform: rotate(46deg) translate(-100%, -100%);
        transform: rotate(46deg) translate(-100%, -100%);
    }

    /* 広島出張所 */
    .hiroshima {
        bottom: calc(175 / 428 * (100vw - 70px));
        right: calc(365 / 428 * (100vw - 70px));
    }

    /* 福岡出張所 */
    .fukuoka {
        top: calc(360 / 428 * (100vw - 70px));
        left: calc(80 / 428 * (100vw - 70px));
    }
}

.no-effect a {
    color: inherit;
    text-decoration: none;
}

.no-effect a:hover {
    text-decoration: none;
    opacity: 1;
    cursor: inherit;
}

.ienakama-block .img {
    width: 250px;
    display: inline-block;
}

.ienakama-block .img img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.ienakama-block .text {
    width: calc(100% - 300px);
}

.ienakama-title>span {
    font-size: 0.5em;
}

@media(max-width:599px) {
    .ienakama-block {
        display: block;
    }

    .ienakama-block .img {
        width: 250px;
        display: block;
        margin: 0 auto;
    }

    .ienakama-block .text {
        width: 100%;
    }

    .ttl-cmn-01 .en.ienakama-title {
        font-size: 30px;
    }

    .ienakama-title>span {
        display: block;
    }
}

/* ##### 見たまま編集 ##### */
[data-element-id] .voice-slider>div[data-collection-list-content] {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

[data-element-id] .voice-slider a.item {
    width: calc(94% / 3);
    margin: 1%;
}

[data-element-id] .banner-slider {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

[data-element-id] .banner-slider a {
    width: calc(100% / 3);
}

[data-element-id] .tablist-cont {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

[data-element-id] .tablist-cont .tablist {
    width: calc(100% / 3);
    margin-left: 0;
}

[data-element-id] .graph-scale-horizontal .rod {
    height: 200px;
}

[data-element-id] .ie-only-graph-image {
    display: block;
    border: 1px solid white;
}

[data-element-id] .ie-only-graph-image::before {
    content: "IE11用（canvasではなく画像です）";
    display: block;
    padding: 2px 5px;
    font-size: 12px;
    color: black;
    line-height: 1.2;
    background-color: white;
}

[data-element-id] #elevator {
    opacity: 1;
    position: absolute;
    top: 70px;
}

[data-element-id] .fixed-btn {
    margin-right: 0;
}

[data-element-id] .fixed-btn-wrap {
    position: absolute;
    bottom: 100%;
}