@charset "UTF-8";

/*================================================================
# section-kinoza
================================================================ */
.section-kinoza {
    margin-top: 24px;
}

.section-kinoza .wrap {
    position: relative;
}

.section-kinoza .wrap::before {
    filter: var(--img-invert);
    mix-blend-mode: var(--blend-mode);
    width: calc(50vw + 50% - 40px);
    height: 100%;
    background: #fff url(../../common/img/section03_bg.png) no-repeat right -12px top -172px;
    position: absolute;
    content: "";
    top: 0;
    left: calc(-50vw + 50%);
    display: block;
    z-index: -1;
}

.section-kinoza .img-wrap {
    position: relative;
}

.section-kinoza .section-kinoza_img01 {
    width: 240px;
    position: absolute;
    top: 52px;
    left: -127px;
    z-index: -1;
}

.section-kinoza .container {
    display: flex;
    flex-direction: column-reverse;
}

.section-kinoza .left {
    padding: 24px 0 0 0;
}

.section-kinoza .right {
    margin-top: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.section-kinoza .sub-title {
    font-family: var(--mincho);
    font-size: 16px;
    line-height: 1.618;
    letter-spacing: .2em;
}

.section-kinoza .title {
    font-family: var(--mincho);
    font-size: 24px;
    line-height: 1.618;
    letter-spacing: .2em;
}

.section-kinoza_img04 {
    margin-top: 24px;
}

.section-kinoza .en-title {
    font-family: var(--text-en);
    font-size: 12px;
    line-height: 1.618;
    color: var(--gold);
}

.section-kinoza .en-title span {
    position: relative;
}

.section-kinoza .en-title span::after {
    width: 100px;
    height: 1px;
    margin: auto 0;
    background-color: var(--border-color);
    ;
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    transform: translate(124px, 0);
}

.section-kinoza .text {
    margin-top: 24px;
    text-align: justify;
}

.section-kinoza .btn {
    width: 100%;
    margin-top: 24px;
}

.section-kinoza .btn a {
    padding: 16px;
    background-color: var(--gold);
    display: block;
    font-family: var(--mincho);
    font-size: 16px;
    color: #fff;
    text-align: center;
    transition: .3s;
}

.section-kinoza .btn a span {
    padding-right: 46px;
    position: relative;
}

.section-kinoza .btn a span:after {
    width: 30px;
    height: 5px;
    margin: auto;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2230%22%20height%3D%225%22%20viewBox%3D%220%200%2030%205%22%20id%3D%22arrow_w.svg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%3Cdefs%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%20%20.cls-1%2C%20.cls-2%20%7B%20%20%20%20%20%20%20%20fill%3A%20%23fff%3B%20%20%20%20%20%20%7D%20%20%20%20%20%20.cls-1%20%7B%20%20%20%20%20%20%20%20fill-rule%3A%20evenodd%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%20%20%3C%2Fdefs%3E%20%20%3Cpath%20id%3D%22%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97_817%22%20data-name%3D%22%E3%82%B7%E3%82%A7%E3%82%A4%E3%83%97%20817%22%20class%3D%22cls-1%22%20d%3D%22M708%2C3407.5l-6%2C2.49V3405Z%22%20transform%3D%22translate(-678%20-3405)%22%2F%3E%20%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_663%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%20663%22%20class%3D%22cls-2%22%20y%3D%222%22%20width%3D%2224%22%20height%3D%221%22%2F%3E%0A%3C%2Fsvg%3E');
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    transition: .3s;
}

.section-kinoza .btn a:hover {
    background-color: #770242;
}

.section-kinoza .btn a:hover span:after {
    transform: translate(16px, 0);
}

.section-kinoza .gold-btn {
    width: 100%;
    margin-top: 16px;
}

.section-kinoza .container02 {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.section-kinoza_img03 {
    margin-top: 24px;
}

.section-kinoza_img03 img {
    width: 100%;
    box-shadow: var(--img-shadow);
}

.section-kinoza_img05 {
    margin-top: 16px;
}

.section-kinoza_img06 {
    margin-top: 16px;
}

/*================================================================
# slider
================================================================ */

.slider {
    margin-top: 24px;
    opacity: 0;
    transition: opacity .3s linear;
}

.slider.slick-initialized {
    opacity: 1;
}

.slider .slick-list {
    box-shadow: var(--img-shadow);
}

.slick-dots {
    margin: 24px 0 0 -4px;
    display: flex;
    justify-content: center;
}

.slick-dots li {
    width: 140px;
    margin-left: 4px;
    border: 2px solid var(--blue);

    transition: opacity .3s linear;
}

.slick-dots li img {
    display: block;
    vertical-align: bottom;
}

.slick-dots .slick-active {
    opacity: 1;
    border: 2px solid var(--gold);
}

.slick-arrow {
    width: 40px !important;
    height: 40px !important;
    z-index: 2 !important;
}

.slick-arrow:before {
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    position: absolute;
    content: "" !important;
    top: 0;
    left: 0;
}

.slick-prev,
.slick-next {
    width: 20px;
    height: 20px;
    margin: auto;
    padding: 0;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    position: absolute;
    top: -35px;
    bottom: 0;
    display: block;
    font-size: 0;
    line-height: 0;
    color: transparent;
}

.slick-next {
    right: -32px !important;
}

.slick-prev {
    left: -32px !important;
}

.slick-next:before {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%20icon-tabler%20icon-tabler-chevron-right%22%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%220.5%22%20stroke%3D%22%238f8f8f%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%20%3Cpolyline%20points%3D%229%206%2015%2012%209%2018%22%20%2F%3E%3C%2Fsvg%3E') !important;
    background-size: contain !important;
}

.slick-prev:before {
    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%20icon-tabler%20icon-tabler-chevron-right%22%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%220.5%22%20stroke%3D%22%238f8f8f%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%20%3Cpolyline%20points%3D%229%206%2015%2012%209%2018%22%20%2F%3E%3C%2Fsvg%3E') !important;
    background-size: contain !important;
    transform: scale(-1, 1);
}

.slider .slick-img {
    width: 100%;
    height: 240px;
    position: relative;
    overflow: hidden;
}

.slider .slick-img img,
.slider .slick-img iframe {
    width: 100%;
    height: 240px;
    position: absolute;
    top: 50%;
    left: 50%;
    object-fit: cover;
    text-align: center;
    transform: translateY(-50%) translateX(-50%);
    object-position: center center;
}