/* CSS INFORMATION -====================================================
File name : intro.css
Description :
===================================================================== */
.top_wrap {
    padding: 10rem 0;
}

.intro {
    position: relative;
    background: url(../images/common/bg_brown.jpg) repeat;
}
.intro .inner {
    padding-bottom: 5rem !important;
}
.intro .i02 {
    padding-top: 14rem;
    padding-bottom: 14rem !important;
}
.intro h2.ttl {
    background: #b5ac8b;
    margin-top: 3rem;
}
.intro h2.ttl span.en {
    color: #fdfcf7;
}
.intro h3 {
    font-size: 4rem;
    line-height: 1.8;
    text-align: center;
    padding: 20rem 0 0 5rem;
}
.intro h3 span {
    color: #ff8e8b;
    font-size: 5.2rem;
}
.intro p.intro_txt {
    font-size: 3.2rem;
    text-align: center;
}
.intro p.intro_txt span.box {
    display: inline-block;
    background: #fdfcf7;
    color: #16130c;
    line-height: 1.4;
}
.intro p.intro_txt span.fontL {
    font-size: 4.1rem;
}
.intro p.intro_txt span.fontH {
    font-size: 5.2rem;
}
.intro .mark {
    width: 17rem;
    height: 3.2rem;
    margin: 6rem auto;
    background: url(../images/common/ico_mark.svg) no-repeat center center/contain;
}
.intro::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    box-shadow: 0 0 80px 16px rgba(44, 33, 21, 0.4) inset, 0 0 80px 16px rgba(44, 33, 21, 0.4) inset;
}
.intro .cornerH {
    width: 5rem;
    height: calc(100% - 15rem);
    position: absolute;
    z-index: 2;
    background: url(../images/top/dec_line_tate.png) repeat-y top left;
    background-size: cover;
}
.intro .cornerH.cLeft {
    top: 7.5rem;
    left: 0;
}
.intro .cornerH.cRight {
    top: 7.5rem;
    right: 0;
    transform: scale(-1, 1);
}
.intro .cornerW {
    width: calc(100% - 15rem);
    height: 5rem;
    position: absolute;
    z-index: 2;
    background: url(../images/top/dec_line.png) repeat-x top left;
    background-size: cover;
}
.intro .cornerW.cTop {
    margin: 0 7.5rem;
    top: 0;
    right: 0;
}
.intro .cornerW.cBottom {
    margin: 0 7.5rem;
    bottom: 0;
    right: 0;
    transform: scale(1, -1);
}
.intro .cLeft::before,
.intro .cRight::before,
.intro .cTop::before,
.intro .cBottom::before {
    content: "";
    display: block;
    width: 7.5rem;
    height: 7.5rem;
    background: url(../images/top/dec_corner.png) no-repeat top left/contain;
    position: absolute;
}
.intro .cLeft::before {
    bottom: -7.5rem;
    transform: rotate(-90deg);
}
.intro .cRight::before {
    top: -7.5rem;
    right: calc((7.5rem - 5em) * -1);
}
.intro .cTop::before {
    left: -7.5rem;
}
.intro .cBottom::before {
    right: -7.5rem;
    transform: rotate(90deg);
}
.intro .bg_dark {
    background: url(../images/common/bg_darkbrown.jpg) repeat top center;
    position: relative;
}
.intro .bg_dark::after {
    content: "";
    display: block;
    width: 100%;
    height: 10rem;
    position: absolute;
    bottom: -10rem;
    left: 0;
    background: url(../images/common/bg_hashira.jpg) repeat-x top left/contain;
}

@media screen and (min-width: 768px) {
  .intro .inner {
        width: 90%;
        padding: 15rem 0 15rem 11.5rem;
  }
  .intro .i02 {
        padding-bottom: 14rem !important;
  }
  .intro h2.ttl {
        margin-top: 0;
  }
  .intro h3 {
        font-size: 3.2rem;
        line-height: 1.8;
        text-align: left;
        padding: 0;
  }
  .intro h3 span {
        font-size: 4.2rem;
  }
  .intro p.intro_txt {
        font-size: 2.2rem;
        text-align: left;
  }
  .intro p.intro_txt span.fontL {
        font-size: 3.2rem;
  }
  .intro p.intro_txt span.fontH {
        font-size: 3.2rem;
  }
  .intro .mark {
        width: 10rem;
        height: 4rem;
        margin: 3rem auto 3rem 20rem;
  }
  .intro .cornerH {
        background-size: auto;
  }
  .intro .cornerW {
        background-size: auto;
  }
}

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