@import url('//fonts.googleapis.com/css?family=Lateef|Noto+Serif+JP:400,500,600,700,900|Roboto:400,500,700&subset=japanese');

p,iframe {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 12px;
    vertical-align: baseline;
    background: transparent;
    font-weight: normal;
}
.sp_block {
    display: none !important;
}
@media screen and (max-width: 768px) {
    .pc_block {
        display: none !important;
    }
    .sp_block {
        display: block !important;
    }    
}
.l-container {
    min-width: 1054px;
    position: relative;
    font-family: 'Noto Serif JP', serif;
    letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
    .l-container {
        min-width: 100%;
    }
}
.visual {
    position: relative;
    background: #000;
    width: 100%;
    height: 700px;
    display: flex;
    align-items: center;
}
.visual .catch {
    width: 480px;
    margin: auto;
}
.visual .catch__txt {
    width: 480px;
    margin: 0 auto;
}
.visual .catch__txt img {
    width: 100%;
    height: auto;
}
.visual .catch__ttl {
    text-align: center;
    margin-top: 48px;
}
.visual .catch__ttl img {
    vertical-align: text-bottom;
    line-height: 1;
    height: auto;
}
.visual .scroll {
    width: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    margin: auto;
}
.visual .scroll:before {
    content: '';
    width: 1px;
    height: 110px;
    display: block;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,#C9AC6E 20%,#C9AC6E 80%,rgba(255,255,255,0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    animation: scroll_icon_animation 1800ms cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.visual .scroll a {
    position: relative;
    font-family: 'Roboto', sans-serif;
    color: #C9AC6E;
    transform: rotate(45deg);
    margin-left: 6px;
}
@keyframes scroll_icon_animation {
    0% {
      transform: translateY(-100%);
      opacity: 0
    }
    30% {
      transform: translateY(-20%);
      opacity: 1
    }
    70% {
      transform: translateY(-20%);
      opacity: 1
    }
    100% {
      transform: translateY(100%);
      opacity: 0
    }
  }
@media screen and (max-width: 768px) {
    .visual {
        width: 100%;
        height: calc(100vh - 96px);
        box-sizing: border-box;
        padding: 40px;
    }
    .visual .catch {
        width: 100%;
        margin: auto;
    }
    .visual .catch__txt {
        width: 100%;
        margin: 0 auto;
    }
    .visual .catch__txt img,
    .visual .catch__ttl img {
        width: 100%;
        height: auto;
    }
    .visual .catch__ttl {
        text-align: center;
        margin-top: 48px;
    }
    .visual .scroll {
        width: 0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 24px;
        margin: auto;
    }
    .visual .scroll:before {
        content: '';
        width: 1px;
        height: 110px;
        display: block;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,#C9AC6E 20%,#C9AC6E 80%,rgba(255,255,255,0) 100%);
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
    }
    .visual .scroll a {
        position: relative;
        font-family: 'Roboto', sans-serif;
        color: #C9AC6E;
        transform: rotate(45deg);
        margin-left: 6px;
    }
}
.section {
    position: relative;
    text-align: center;
    padding: 80px 0 0;
}
.section--lose {
    margin-top: -30%;
}
.section--advertisement {
    background: linear-gradient(135deg, #383838 0%, #222 100%);
}
.section--last {
    background: #222;
    padding: 80px 0;
    margin: 80px 0;
}
.section__ttl {
    font-family: 'Noto Serif JP', serif;
    position: relative;
    font-weight: 500;
    color: #c9ac6e;
    font-size: 28px;
    line-height: 1.7;
    margin-bottom: 40px;
}
.section__ttl--first {
    font-weight: 500;
    font-size: 34px;
}
.section__ttl--line {
    padding-bottom: 24px;
}
.section__ttl--line:before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    width: 40px;
    height: 3px;
    background: #c9ac6e;
    margin: auto;
}
.section__lead {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}
.section__lead--first {
    font-size: 16px;
    width: 1054px;
    margin: 0 auto;
    text-align: center;
}
.section__advice {
    box-sizing: border-box;
    width: 1054px;
    text-align: center;
    color: #c9ac6e;
    font-size: 20px;
    line-height: 1.7;
    background: #f7f3ea;
    margin: 0 auto 80px;
    padding: 40px 0;
}
.section__map {
    width: 1054px;
    margin: 0 auto;
    box-sizing: border-box;
}
.section__map iframe {
    width: 100%;
}
@media screen and (max-width: 768px) {
    .section {
        padding: 60px 0 0;
    }
    .section--last {
        padding: 40px 0;
        margin: 60px 0;
    }
    .section__ttl {
        text-align: left;
        font-size: 21px;
        line-height: 1.5;
        letter-spacing: 0;
        margin-bottom: 16px;
    }
    .section__lead {
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        font-size: 14px;
    }
    .section__ttl,
    .section__lead {
        padding: 0 24px;
    }
    .section__ttl br {
        display: none;
    }
    .section__ttl--line {
        text-align: center;
        padding: 0 24px 16px;
        margin-bottom: 24px;
    }
    .section__advice {
        text-align: left;
        width: 88%;
        font-size: 14px;
        line-height: 1.5;
        margin: 0 auto 60px;
        padding: 24px;
    }
    .section__map {
        width: 100%;
        padding: 0 24px;
    }    
}
.firstBg {
    background: #212121;
}
.firstBg .section__lead {
    color: #fff;
    font-size: 28px;
    padding: 64px 0 140px;
    margin-bottom: -2.8%;
}
.skewedBg {
    position: relative;
    background: linear-gradient(135deg, #222 0%, #87919D 100%);
}
.skewedBg--point01 {
    transform: skew(0deg, -3deg);
    z-index: 1;
}
.skewedBg--point02 {
    background: #212121;
    transform: skew(0deg, 0);
    margin: -2.8% 0;
    z-index: -1;
}
.skewedBg--point03 {
    transform: skew(0deg, 3deg);
}
.point {
    text-align: left;
    width: 1054px;
    margin: auto;
    padding: 110px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: skew(0deg, 3deg);
}
.skewedBg--point02 .point {
    padding: 200px 0;
    transform: skew(0deg, 0);
}
.skewedBg--point03 .point {
    transform: skew(0deg, -3deg);
}
.point .point__info {
    width: 535px;
}
.point .point__img {
    width: 458px;
}
.point.second .point__info {
    float: right;
    width: 535px;
}
.point.second .point__img {
    float: left;
    width: 458px;
    height: 284px;
    background: #212121;
}
.point .point__img img {
    width: 100%;
    height: auto;
}
.point .point__ttl {
    color: #c9ac6e;
    margin-bottom: 58px;
}
.point .point__ttl span {
    font-size: 15px;
    font-weight: normal;
}
.point .point__ttl span.txt {
    font-weight: 500;
    font-size: 30px;
}
.point .point__ttl em {
    font-family: 'Lateef', cursive;
    font-size: 130px;
    font-style: normal;
    line-height: 0;
    padding: 0 8px;
}
.point__catch {
    color: #fff;
    font-size: 24px;
    line-height: 1.7;
    margin-bottom: 48px;
    margin-left: 24px;
}
.point__lead {
    color: #fff;
    font-size: 15px;
    line-height: 1.7;
    margin-left: 24px;
}
@media screen and (max-width: 768px) {
    .skewedBg--point02 {
        margin: -3.5% 0;
    }    
    .firstBg .section__lead {
        color: #fff;
        font-size: 21px;
        line-height: 1.5;
        padding: 60px 24px 70px;
    }    
    .firstBg .section__lead {
        margin-bottom: -3.5%;
    }
    .skewedBg--point01 {
        transform: skew(0deg, -4deg);
    }
    .skewedBg--point03 {
        transform: skew(0deg, -4deg);
    }
    .point {
        width: 100%;
        padding: 80px 24px;
        display: block;
        box-sizing: border-box;
    }
    .skewedBg--point02 .point {
        padding: 80px 24px;
        height: 80%;
    }
    .skewedBg--point03 .point {
        transform: skew(0deg, 3deg);
    }
    .point .point__info {
        width: 100%;
        float: none;
    }
    .point .point__img {
        width: 100%;
        height: auto;
    }
    .point.second .point__info {
        width: 100%;
    }
    .point.second .point__img {
        float: none;
        width:  100%;
        height: auto;
    }
    .point .point__ttl {
        color: #c9ac6e;
        margin-bottom: 24px;
    }
    .point .point__ttl span {
        font-size: 14px;
    }
    .point .point__ttl span.txt {
        font-size: 21px;
        display: block;
        padding-top: 16px;
    }
    .point .point__ttl em {
        font-size: 80px;
    }
    .point__catch {
        font-size: 18px;
        margin-bottom: 16px;
        margin-left: 0;
    }
    .point__lead {
        font-size: 14px;
        margin-bottom: 24px;
        margin-left: 0;
    }    
}
.skill {
    width: 1054px;
    margin: 0 auto 80px;
}
.skill__img {
    margin: 64px auto 32px;
}
.skill__img img {
    width: 100%;
    height: auto;
}
.skillList {
    list-style: none;
    display: flex;
    justify-content: space-between;
}
.skillList .skillList__item {
    width: 351px;
}
.skillList .skillList__item .skill__ttl {
    color: #c9ac6e;
    font-size: 28px;
    line-height: 1.7;
    margin-bottom: 12px;
}
.skillList .skillList__item .skill__lead {
    color: #666666;
    font-size: 15px;
    line-height: 1.7;
}
@media screen and (max-width: 768px) {
    .skill {
        width: 100%;
        margin: 0 auto 24px;
    }
    .skill__img {
        margin: 16px 24px;
    }
    .skill__img img {
        width: 100%;
        height: auto;
    }
    .skillList {
        display: block;
        padding: 0 24px;
    }
    .skillList .skillList__item {
        width: 100%;
        margin-bottom: 16px;
    }
    .skillList .skillList__item .skill__ttl {
        font-size: 21px;
        margin: 0;
    }
    .skillList .skillList__item .skill__lead {
        font-size: 14px;
        line-height: 1.5;
    }
}
.series {
    text-align: left;
    display: flex;
    justify-content: space-between;
    width: 1054px;
    margin: 0 auto;
    padding-bottom: 80px;
}
.series__info {
    width: 540px;
}
.series__lead {
    color: #fff;
    font-size: 16px;
    line-height: 1.8;
}
.series__img {
    width: 450px;
}
.series__img img {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 768px) {
    .series {
        display: block;
        width: 100%;
        padding-bottom: 60px;
    }
    .series__info {
        width: 100%;
    }
    .series__lead {
        width: 100%;
        font-size: 14px;
        line-height: 1.5;
        padding: 0 24px 24px;
        box-sizing: border-box;
    }
    .series__img {
        width: 100%;
        padding: 0 24px;
        box-sizing: border-box;
    }
}
.product {
    width: 1054px;
    margin: 64px auto 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
.product--single {
    margin: 0 auto;
    flex-direction: column;
}
.product--small {
    text-align: center;
}
.product .product__btn {
    list-style: none;
}
.product .product__btn a {
    text-decoration: none;
    transition: all .5s;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    position: relative;
    display: block;
    width: 486px;
    height: 70px;
    line-height: 70px;
    margin: 0 auto;
    background-image: linear-gradient(to right, #886e4d 0%, #AC905F 30%, #c9ac6e 100%);
    border: #fff 1px solid;
    background-size: 200% auto;
}
.product .product__btn a:hover {
    background-position: right center;
}
.product .product__btn a:before,
.product .product__btn a:after {
    content: "";
    position: absolute;
}
.product .product__btn a:before {
    width: 70px;
    height: 1px;
    background: #e3c6a0;
    right: -35px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.product .product__btn a:after {
    transform: rotate(45deg);
    width: 16px;
    height: 1px;
    background: #e3c6a0;
    top: 29px;
    right: -37px;
}
@media screen and (max-width: 768px) {
    .product {
        width: 100%;
        margin: 24px auto 0;
        padding: 0 24px;
        flex-direction: column;
    }
    .product--single {
        margin: 0 auto;
    }
    .product .product__btn:nth-child(2) {
        margin-top: 8px;
    }
    .product .product__btn a {
        color: #fff;
        font-size: 16px;
        position: relative;
        display: block;
        width: 100%;
        height: 64px;
        line-height: 64px;
    }
    .product .product__btn a:before,
    .product .product__btn a:after {
        content: "";
        position: absolute;
    }
    .product .product__btn a:before {
        width: 16px;
        right: 8px;
    }
    .product .product__btn a:after {
        width: 8px;
        top: 29px;
        right: 7px;
    }
}