@charset "utf-8";

/* RYUSEN CSS
------------------------------------ */
.sec-title .pttl {
    letter-spacing: 0.25em;
}

.section-ryusen-about {
    overflow: hidden;
}

.section-ryusen-about .ryusen-since .head {
    width: 550px;
    margin: 0 auto 57px;
    color: #000;
    text-align: center;
}

.section-ryusen-about .ryusen-since .head .year {
    position: relative;
    margin: 0 0 90px;
}

.section-ryusen-about .ryusen-since .head .year > span {
    display: block;
    line-height: 1;
}

.section-ryusen-about .ryusen-since .head .year .fs {
    margin-bottom: 5px;
}

.section-ryusen-about .ryusen-since .head .ttl {
    position: relative;
    width: 45px;
    margin: 0 auto 84px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.section-ryusen-about .ryusen-since .head .year::before,
.section-ryusen-about .ryusen-since .head .year::after {
    position: absolute;
    left: 50%;
    width: 1px;
    content: "";
    background: #000;
}

.section-ryusen-about .ryusen-since .head .year::before {
    top: -60px;
    height: 35px;
}

.section-ryusen-about .ryusen-since .head .year::after {
    top: 100%;
    height: 55px;
    margin-top: 15px;
}

.section-ryusen-about .ryusen-since .head .caption {
    font-weight: normal;
    letter-spacing: 0.015em;
}

.section-ryusen-about .ryusen-since .head .caption > span {
    float: left;
    width: 33.33333%;
}

.section-ryusen-about .ryusen-since .thumb {
    position: relative;
    z-index: 2;
    max-width: 610px;
    margin: 0 auto 21px;
}

.section-ryusen-about .ryusen-since .thumb img {
    display: block;
    width: 100%;
}

.section-ryusen-about .ryusen-since .ryusen-content {
    position: relative;
    max-width: 1050px;
    margin: 0 auto;
    line-height: 2.3;
    color: #000;
}

.section-ryusen-about .ryusen-since .ryusen-content .sec-title1 {
    position: absolute;
    top: -96px;
    right: -21.9047619047619%;
    text-align: right;
}

.section-ryusen-about .ryusen-since .ryusen-content .w-col {
    margin: 24px 0 0;
}

.section-ryusen-about .ryusen-since .ryusen-content .w-col > li {
    float: left;
    width: 43.80952380952381%;
}

.section-ryusen-about .ryusen-since .ryusen-content .w-col > li.f-right {
    float: right;
}

.section-ryusen-about .ryusen-since .ryusen-content .ryusen-char {
    text-align: right;
}

.section-ryusen-about .ryusen-since .ryusen-content .ryusen-char > span {
    display: block;
}

.section-ryusen-about .ryusen-since .ryusen-content .ryusen-char .f-sz15 {
    margin: 0 0 -2px;
}

.section-ryusen-about .ryusen-since .ryusen-content .w-col-4 {
    margin-top: 65px;
}

.section-ryusen-about .ryusen-since .ryusen-content .w-col-4 > li {
    width: 25%;
    padding: 0 25px;
}

.section-ryusen-about .ryusen-since .ryusen-content .w-col-4 img {
    display: block;
    width: 100%;
}

.section-ryusen-about .ryusen-since .ryusen-content .w-col-4 .info {
    margin-top: 14px;
    line-height: 1.5;
    letter-spacing: 0.025em;
}

.section-ryusen-about .ryusen-since .ryusen-content .w-col-4 .info .txt {
    padding: 2px 0;
}

.section-ryusen-about .ryusen-since .ryusen-content .w-col-4 .info .pttl {
    margin-bottom: 13px;
}

.section-ryusen-about
    .ryusen-since
    .ryusen-content
    .w-col-4
    .info
    .pttl
    > span {
    display: inline-block;
    line-height: 1;
    letter-spacing: 0.025em;
}

.ryusen-content .greeting-block .mess-ttl {
    position: relative;
    padding-top: calc(45px + 1em);
    text-align: center;
}

.ryusen-content .greeting-block .mess-ttl::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 45px;
    content: "";
    background: #000;
}

.section-ryusen-about .ryusen-since .ryusen-content .w-col-4 .info .caption {
    line-height: 1.6;
    letter-spacing: 0.025em;
}

.ryusen-content .greeting-block .image {
    float: right;
    display: flex;
    align-items: center;
    width: 350px;
    aspect-ratio: 350/263;
    margin: 0 0 2em 2em;
    overflow: hidden;
}

.ryusen-content .greeting-block .image img {
    object-fit: cover;
}

@media (width <= 1450px) {
    .section-ryusen-about .ryusen-since .ryusen-content .sec-title1 {
        right: -160px;
    }
}

@media (width <= 1300px) {
    .section-ryusen-about .ryusen-since .ryusen-content .sec-title1 {
        right: -100px;
    }
}

@media (width <= 1200px) {
    .ryusen-content .greeting-block .image {
        width: max(33.333%, 268px);
    }
}

@media (width <= 1130px) {
    .section-ryusen-about .ryusen-since .ryusen-content .sec-title1 {
        right: -50px;
    }
}

@media (width <= 1023px) {
    .section-ryusen-about .ryusen-since .ryusen-content .w-col > li {
        width: 48%;
    }

    .section-ryusen-about .ryusen-since .ryusen-content .w-col-4 > li {
        padding: 0 10px;
    }
}

@media (width <= 991px) {
    .sec-title .title {
        font-size: 11.5vw;
    }

    .section-ryusen-about .ryusen-since .head .ttl {
        width: 38px;
    }
}

@media (width <= 768px) {
    .sec-title .title .block {
        font-size: 8vw;
    }

    .section-ryusen-about .ryusen-since .head .year {
        margin: 15px 0 70px;
    }

    .section-ryusen-about .ryusen-since .head .year.f-sz28 {
        font-size: 2.8rem;
    }

    .section-ryusen-about .ryusen-since .head .year::before {
        top: -35px;
        height: 20px;
    }

    .section-ryusen-about .ryusen-since .head .year::after {
        height: 40px;
    }

    .section-ryusen-about .ryusen-since .ryusen-content .sec-title1 {
        top: 0;
        right: 0;
        margin-top: -13%;
    }

    .section-ryusen-about .ryusen-since .head {
        width: 100%;
    }

    .section-ryusen-about .ryusen-since .head {
        margin-bottom: 25px;
    }

    .section-ryusen-about .ryusen-since .ryusen-content .w-col > li {
        float: none !important;
        width: auto;
    }
}

@media (width <= 767px) {
    .section-ryusen-about .ryusen-since .ryusen-content .w-col-4 {
        margin: 25px -10px 0;
    }

    .section-ryusen-about .ryusen-since .ryusen-content .w-col-4 > li {
        width: 50%;
        padding: 0 10px;
        margin-top: 30px;
    }
}

@media (width <= 576px) {
    .ryusen-content .greeting-block .image {
        float: initial;
        width: 100%;
        margin-left: 0;
    }
}

@media (width <= 480px) {
    .sec-title .title .block {
        font-size: 9vw;
    }

    .section-ryusen-about .container {
        padding-right: 5px;
        padding-left: 5px;
    }

    .section-ryusen-about .ryusen-since .ryusen-content {
        line-height: 1.75;
    }
}

@media (width <= 375px) {
    .section-ryusen-about .ryusen-since .head .ttl {
        width: 35px;
    }
}

.section-ryusen-history {
    position: relative;
    padding: 100px 0 90px;
    margin: 0 0 100px;
}

.section-ryusen-history .s-title {
    position: absolute;
    bottom: 0;
    left: 0;
}

.section-ryusen-history .scroll {
    position: absolute;
    right: 55px;
    bottom: 63px;
    padding: 0 123px 0 0;
    background: url("../img/ryusen/history/arr01.png") no-repeat right 3px;
}

.section-ryusen-history .w-col-2 {
    /* padding: 1px 80px 0 110px;
  border-top: 1px solid #d2d2d2;
  margin-top: 223px; */
    position: relative;
}

.section-ryusen-history .w-col-2 .start {
    position: absolute;
    top: -33px;
    left: 19px;
    padding-bottom: 10px;
    line-height: 1;
}

.section-ryusen-history .w-col-2 .f-col {
    /*  width: 50%;
  margin-top: -60px; */
}

.section-ryusen-history .w-col-2 .w-col-3 > li {
    position: relative;
    width: 33.33333333333333%;
}

.section-ryusen-history .w-col-2 .caption {
    line-height: 1.5;
    letter-spacing: 0.025em;

    /* -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 45px;
  margin-left: 15px; */
}

.section-ryusen-history .w-col-2 .year {
    position: relative;
    display: table;
    width: 70px;
    height: 70px;

    /* margin: 0 auto; */
    text-align: center;
    background: #fff;
    border: 4px solid #d2d2d2;
    border-radius: 100%;
}

.section-ryusen-history .w-col-2 .year > span {
    display: table-cell;
    vertical-align: middle;
}

.section-ryusen-history .w-col-2 .year::after {
    position: absolute;
    top: -36px;
    left: 50%;
    width: 1px;
    height: 36px;
    content: "";
    background: #d2d2d2;
}

.section-ryusen-history .w-col-2 .even .year::after {
    top: auto;
    bottom: -28px;
    height: 28px;
}

.section-ryusen-history .w-col-2 .even .caption {
    /* top: 100%;
  bottom: auto;
  margin: 34px 0 0; */
}

.section-ryusen-history .w-col-2 .year > span {
    letter-spacing: 0;
}

@media (width <= 979px) {
    .section-ryusen-history .w-col-2 .f-col1 .w-col-3 > li:first-child {
        padding-left: 0;
    }

    .section-ryusen-history .w-col-2 .f-col2 .w-col-3 > li:last-child {
        padding-right: 0;
    }

    .section-ryusen-history .w-col-2 .f-col {
        float: none;
        width: 100%;
    }

    .section-ryusen-history .w-col-2 .f-col2 {
        position: relative;
        margin-top: 250px;
    }

    .section-ryusen-history .w-col-2 .f-col2::before {
        position: absolute;
        top: 36px;
        right: -30px;
        left: -60px;
        content: "";
        border-top: 1px solid #d2d2d2;
    }

    .section-ryusen-history .w-col-2 .f-col2 .w-col-3 {
        position: relative;
        z-index: 3;
    }

    .section-ryusen-history .scroll {
        right: 20px;
        bottom: 30px;
    }
}

@media (width >= 769px) {
    .section-ryusen-history .s-title {
        bottom: -80px;
    }

    .section-ryusen-history .w-col-2 .start {
        position: absolute;
        top: 54px;
        left: 50%;
        padding-left: 15px;
        line-height: 1;
    }

    .section-ryusen-history .w-col-2 {
        position: relative;
        padding-top: 110px;
        overflow: hidden;
    }

    .section-ryusen-history .w-col-2::before,
    .section-ryusen-history .w-col-2::after {
        position: absolute;
        top: 20px;
        width: 1px;
        content: "";
    }

    .section-ryusen-history .w-col-2::before {
        left: 50%;
        height: 100%;
        background: #d2d2d2;
    }

    .section-ryusen-history .w-col-2::after {
        top: 50px;
        left: 50%;
        width: 1px;
        height: 30px;
        background: #000;
    }

    .section-ryusen-history .w-col-2 {
        width: 65%;
        max-width: 1140px;
        margin: 0 auto;
    }

    .scroll-nav .scroll-wpp ul {
        width: 100%;
        margin: 0 auto;
        line-height: 40px;
    }

    .scroll-nav .scroll-wpp ul li {
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;

        /* vertical-align: middle;
		height: auto; */
        width: 50%;
        min-height: 70px;
        padding: 0;
        margin-top: 15px;
        margin-bottom: 15px;
        text-align: left;
    }

    .scroll-nav .scroll-wpp ul li:nth-child(even) {
        /* vertical-align: middle; */
        float: right;
        clear: both;
        margin-top: 0;
        margin-bottom: 0;
    }

    .scroll-nav .scroll-wpp ul li:nth-child(odd) {
        float: left;
        clear: both;
    }

    .scroll-nav .scroll-wpp ul li .year {
        top: 0;
    }

    .scroll-nav .scroll-wpp ul li:nth-child(odd) .year {
        position: absolute;
        right: -35px;
    }

    .scroll-nav .scroll-wpp ul li:nth-child(even) .year {
        position: absolute;
        left: -35px;
    }

    .scroll-nav .scroll-wpp ul li .year::after {
        position: absolute;
        top: 50%;
        left: -36px;
        z-index: -1;
        visibility: hidden;
        width: 0;
        height: 1px;
        content: "";
        background: #d2d2d2;
        opacity: 0;
        transform: translateX(-100%);
        transition: all 0.25s linear;
    }

    .scroll-nav .scroll-wpp ul li:nth-child(even) .year::after {
        left: 100%;
    }

    .scroll-nav .scroll-wpp ul li.scrollin .year::after {
        visibility: visible;
        width: 36px;
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.2s;
    }

    .scroll-nav .scroll-wpp ul li .caption {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        min-height: 70px;
    }

    .scroll-nav .scroll-wpp ul li:nth-child(odd) .caption {
        padding-right: 80px;
    }

    .scroll-nav .scroll-wpp ul li:nth-child(even) .caption {
        padding-left: 80px;
    }
}

/* for IE11 */
@media all and (-ms-high-contrast: none) {
    *::-ms-backdrop,
    .scroll-nav .scroll-wpp ul li .caption {
        display: table-cell;
        vertical-align: middle;
    }
}

@media (width <= 1250px) {
    .section-ryusen-history .w-col-2 {
        width: 80%;
    }
}

@media (width <= 1199px) {
    .section-ryusen-history .w-col-2 {
        width: 90%;
    }
}

@media (width <= 768px) {
    .section-ryusen-history {
        padding: 50px 15px 100px;
    }

    .scroll-nav .scroll-wpp ul li {
        display: table;
        width: 100%;
        table-layout: auto;
    }

    .section-ryusen-history .w-col-2 .year {
        display: table-cell;
    }

    .section-ryusen-history .w-col-2 .year > span {
        width: 70px;
        line-height: 66px;
    }

    .section-ryusen-history .w-col-2 {
        display: block;
        padding: 70px 0;
        margin: 50px 0 0 35px;
        border-top: none;
        border-left: 1px solid #d2d2d2;
    }

    .section-ryusen-history .w-col-2::before {
        display: none;
    }

    .section-ryusen-history .w-col-2 .start {
        position: relative;
        top: auto;
        left: auto;
        padding: 10px 0 10px 15px;
        margin: 0 0 25px -1px;
        line-height: 1;
        border-left: 1px solid #000;
    }

    .section-ryusen-history .w-col-2 .w-col-3 {
        display: block;
    }

    .section-ryusen-history .w-col-2 .f-col {
        margin-top: 0;
    }

    .section-ryusen-history .w-col-2 .f-col2 {
        margin-top: 0;
    }

    .section-ryusen-history .w-col-2 .f-col2::before {
        display: none;
    }

    .section-ryusen-history .w-col-2 .f-col2 .w-col-3 > li:last-child {
        margin-bottom: 0;
    }

    .section-ryusen-history .w-col-2 .f-col1 .w-col-3 > li:first-child::before {
        display: none;
    }

    .section-ryusen-history .w-col-2 .w-col-3 > li {
        position: relative;
        display: table;
        width: 100%;
        height: 70px;
        padding-left: 75px !important;
        margin-bottom: 20px;
    }

    .section-ryusen-history .w-col-2 .year {
        position: absolute;
        top: 50%;
        left: -35px;
        margin: 0;
        margin-top: -37px;
    }

    .section-ryusen-history .w-col-2 .year::after {
        top: 50% !important;
        left: 100%;
        width: 30px !important;
        height: 1px !important;
        margin: 0;
    }

    .section-ryusen-history .w-col-2 .caption {
        position: relative;
        top: auto !important;
        bottom: auto !important;
        display: table-cell;
        width: auto !important;
        padding: 0 0 0 70px;
        margin: 0;
        vertical-align: middle;
    }

    .scroll-nav .scroll-wpp ul {
        width: 100%;
        white-space: normal;
    }

    .scroll-nav .scroll-wpp ul li {
        padding-top: 30px;
        padding-bottom: 30px;
        vertical-align: middle;
        text-align: left;
    }

    .section-ryusen-history .w-col-2 .even .caption {
    }

    .section-ryusen-history .scroll {
        display: none;
    }

    .section-ryusen-history .scroll::after {
        position: absolute;
        top: 5px;
        right: 0;
        width: 40px;
        height: 13px;
        content: "";
        background: url("../img/ryusen/history/arr01.png") no-repeat right 0;
        background-size: auto 10px;
    }
}

@media (width <= 480px) {
    .section-ryusen-history {
        padding-bottom: 50px;
        margin-bottom: 40px;
    }

    .section-ryusen-history .w-col-2 {
        padding: 40px 0;
    }

    .section-ryusen-history .w-col-2 .start {
        margin-bottom: 0;
    }

    .section-ryusen-history .w-col-2 .year {
        top: 0;
        width: 64px;
        height: 64px;
        margin-top: 0;
    }

    .section-ryusen-history .w-col-2 .year::after {
        content: none;
    }

    .scroll-nav .scroll-wpp ul {
        width: 96%;
    }

    .scroll-nav .scroll-wpp ul li {
        min-height: 65px;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0 0 20px;
    }

    .section-ryusen-history .w-col-2 .caption {
        padding: 0 0 0 40px;
    }

    .section-ryusen-history .w-col-2 .year > span {
        line-height: 56px;
    }
}

@media (width <= 375px) {
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .section-ryusen-about .ryusen-since .head .ttl {
        height: 119px;
        margin-left: -5px;
    }

    .section-ryusen-about .ryusen-since .head .ttl::after {
        margin-left: 7px;
    }

    .section-ryusen-about .ryusen-since .head .caption {
        height: 200px;
    }
}