@charset "UTF-8";
/* main-visual */
.mv-heritage {
    background: url("/common/img/heritage/top.jpg") no-repeat center/cover;
}

/* ---------------------------------------------------------
コンテンツ
--------------------------------------------------------- */
.intro__text {
    text-align: center;
    margin-bottom: 40px;
}

.pc-bg {
    background: url("/common/img/all/bg-wave.png") no-repeat 100% 30%;
}

.h-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.h-item:not(:last-of-type) {
    margin-bottom: 150px;
}
.h-item__image {
    width: 57%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.h-item__image .h-item__title {
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    color: #8e7b59;
    padding: 80px 20px;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: .2em;
}
.h-item__image .h-item__title span {
    font-size: 160%;
    font-weight: 700;
}
.h-item__detail {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: rgba(255, 255, 255, 0.75);
    padding: 14px;
    width: 62%;
}
.h-item__detail figure {
    width: 55%;
}
.h-item__detail .h-item__text-wrap {
    width: 45%;
    padding: 0 10px 0 30px;
    line-height: 2;
    background: #fff;
    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-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.h-item.left .h-item__detail {
    margin: 600px 0 0 -520px;
}
.h-item.right {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}
.h-item.right.pc-bg {
    background: url("/common/img/all/bg-wave.png") no-repeat 0 30%;
}
.h-item.right .h-item__image {
    margin-left: auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    margin-left: -520px;
}
.h-item.right .h-item__detail {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    margin-top: 600px;
}
.h-item.right .h-item__detail .h-item__text-wrap {
    padding: 0 30px 0 10px;
}

@media screen and (max-width: 1200px) {
  .pc-bg {
        background: none !important;
  }

  .h-item {
        display: block;
  }
  .h-item__image {
        width: 100%;
        display: block;
        position: relative;
  }
  .h-item__image figure {
        width: 100%;
  }
  .h-item__image .h-item__title {
        position: absolute;
        top: 0;
        right: 30px;
        background: rgba(255, 255, 255, 0.8);
  }
  .h-item__detail {
        width: 100%;
  }
  .h-item.left .h-item__detail {
        margin: 10px auto 0;
  }
  .h-item.right .h-item__image {
        margin-left: auto;
  }
  .h-item.right .h-item__detail {
        margin: 10px 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .intro__text {
        text-align: left;
  }

  .h-item:not(:last-of-type) {
        margin-bottom: 60px;
  }
  .h-item__image .h-item__title {
        font-size: 18px;
        padding: 20px 15px;
        letter-spacing: .1em;
  }
  .h-item__detail {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 0;
  }
  .h-item__detail figure, .h-item__detail .h-item__text-wrap {
        width: 100%;
  }
  .h-item__detail figure img {
        height: 30vw;
        -o-object-fit: cover;
           object-fit: cover;
  }
  .h-item__detail .h-item__text-wrap {
        padding: 0;
  }
  .h-item__detail .h-item__text-wrap .h-item__text {
        padding: 0 20px;
        margin: 10px auto 20px;
  }
  .h-item.right .h-item__detail {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
  }
  .h-item.right .h-item__detail .h-item__text-wrap {
        padding: 0;
  }
}
/* ---------------------------------------------------------
ダークモード
--------------------------------------------------------- */
.dark-mode .pc-bg {
    background: none;
}
.dark-mode .h-item.right.pc-bg {
    background: none;
}
.dark-mode .h-item__detail {
    background: rgba(28, 26, 26, 0.8);
}
.dark-mode .h-item__text-wrap {
    background: #1c1a1a;
}

/*# sourceMappingURL=heritage.css.map */