@charset "utf-8";
/* CSS Document */



/* BACKGROUND */
.main_bg {
    width: 100%;
    min-height: 800px;
    /* margin-top: 60px; */
    background: linear-gradient(0.25turn, #7aa4ba 50%, #d7d2cb 50%);
    position: relative;
}
.main_bg_wrap {
    width: 100%;
    min-height: 800px;
    background: url(/sp/886/img/story_bk.jpg) no-repeat;
    background-size: contain;
    background-position: top center;
    position: relative;
}
.main_bg_wrap .main_logo {
    width: 350px;
    padding: 178px 0 0;
    filter: invert(1);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.main_bg_wrap .main_txt {
    width: 600px;
    padding: 360px 0 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* STORY CONTENT */
.story_content {
    width: 100%;
    margin: 0 auto;
}
.story_content_wrap {
    width: 1200px;
    margin: 160px auto 0;
}

.story_content h4 {
    font-weight: normal;
    font-size: 12px;
    color: #858585;
    margin-bottom: 30px;
} 
.story_content p {
    margin: 30px 0;
}
.story_content p i {
    font-weight: bold;
    font-style: normal;
    background-color: #fff7e0;
}
.story_content ul {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 200px;
}
.story_content ul li {
    position: relative;
}

/* royal */
.story_content ul.royal {
    width: 1020px;
    margin: 0 0 200px;
}
.story_content ul.royal li:first-child {
    width: 65%;
}
.story_content ul.royal li:last-child {
    width: 31%;
}
.story_content ul.royal li h1 {
    margin-top: 0;
}


/* director */
.story_content ul.director {
    width: 1100px;
}
.story_content ul.director li img {
    margin-top: 40px;
}
.story_content ul.director li:first-child {
    width: 40%;
}
.story_content ul.director li:last-child {
    width: 41%;
    margin: 220px 30px 0 0;
}
.story_content ul.director li:last-child img {
    width: 65%;
    margin-left: -100px;
}
.story_content ul.director li:last-child p:nth-child(2) {
    font-family: 'Noto Serif JP';
    font-size: 18px;
    font-weight: lighter;
}
.story_content ul.director li:first-child::before {
    content: '';
    width: 70px;
    height: 640px;
    background-color: #d7d2cb;
    position: absolute;
    bottom: 90px;
    right: -20px;
    z-index: -1;
}
.story_content ul.director li:first-child::after {
    content: '';
    width: 70px;
    height: 270px;
    background-color: #7aa4ba;
    position: absolute;
    bottom: -110px;
    right: 64px;
    z-index: -1;
}


/* trust */
.story_content ul.trust {
    width: 1000px;
}
.story_content ul.trust li:first-child {
    width: 30%;
    margin-left: 20px;
}
.story_content ul.trust li:last-child {
    width: 55%;
    margin-right: 40px;
}
.story_content ul.trust li:first-child::before {
    content: '';
    width: 70px;
    height: 414px;
    background-color: #d7d2cb;
    position: absolute;
    bottom: -200px;
    right: -16px;
    z-index: -1;
}
.story_content ul.trust li:first-child::after {
    content: '';
    width: 290px;
    height: 290px;
    background-color: #7aa4ba;
    position: absolute;
    top: -30px;
    right: 40px;
    z-index: -1;
}

/* design */
.story_content ul.design {
    width: 1000px;
    margin-left: 230px;
    align-items: center;
}
.story_content ul.design li:first-child {
    width: 30%;
    margin: 0 0 0 50px;
}
.story_content ul.design li:last-child {
    width: 55%;
    margin-right: 40px;
}
.story_content ul.design li:last-child::before {
    content: '';
    width: 40px;
    height: 100px;
    background-color: #d7d2cb;
    position: absolute;
    top: -150px;
    left: -590px;
    z-index: -1;
}
.story_content ul.design li:last-child::after {
    content: '';
    width: 40px;
    height: 150px;
    background-color: #7aa4ba;
    position: absolute;
    top: -100px;
    left: -540px;
    z-index: -1;
}
.story_content ul.design li:first-child::after {
    content: '';
    width: 82px;
    height: 250px;
    background-color: #7aa4ba;
    position: absolute;
    top: 130px;
    left: -30px;
    z-index: -1;
}

/* symbol */
.story_content ul.symbol {
    width: 1000px;
    margin: 200px auto 260px;
    align-items: flex-end;
}
.story_content ul.symbol li:first-child {
    width: 30%;
    margin-left: 20px;
}
.story_content ul.symbol li:last-child {
    width: 56%;
    margin-right: 60px;
}
.story_content ul.symbol li:first-child::before {
    content: '';
    width: 200px;
    height: 330px;
    background-color: #d7d2cb;
    position: absolute;
    bottom: -24px;
    right: -26px;
    z-index: -1;
}
.story_content ul.symbol li:first-child::after {
    content: '';
    width: 200px;
    height: 200px;
    background-color: #7aa4ba;
    position: absolute;
    bottom: -60px;
    left: -60px;
    z-index: -1;
}