@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');
svg{ 
	width:405px;
	 height:20px; 
} 
svg line{ 
    stroke: var(--service-base); 
    stroke-width: 3px; 
    stroke-linecap: round; 
    stroke-dasharray: 0, 6;
}
.grecaptcha-badge {
    z-index: 1;
}

html {
    scroll-behavior: smooth;
}
.modal-dialog {
    margin: 1rem;
}
@media (min-width: 576px) {
    .modal-dialog {
        margin-right: auto;
        margin-left: auto;
    }
}
.service {
    font-size: var(--font-size-body)!important;
    color: var(--service-body);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    --font-size-body: 16px;
    --service-body: #333333;
    --service-bg: #EEF5F6;
    --service-base: #03DACC;
    --service-dark: #006C5C;
    --service-cta: #FF661D;
    --service-highlight: #E8FA78;
}
.service.zenlink {
    --service-hero1: #EFFFFE;
    --service-hero2: #D4F8F6;
    --service-base: #03DACC;
    --service-dark: #006C5C;
    --service-cta: #FF661D;
    --service-highlight: #E8FA78;
}
.service.zenpromo {
    --service-hero1: #FFF8FA;
    --service-hero2: #FFD9E6;
    --service-base: #F46192;
    --service-dark: #D52862;
    --service-cta: #1AB6D1;
    --service-cta2: #FFCE00;
    --service-highlight: #E8FA78;
}
.service.zenstudio {
    --service-hero1: #ffd3ee;
    --service-hero2: #b5f1ff;
    --service-base: #FF1EA5;
    --service-dark: #FF1EA5;
    --service-cta: #9E7BFF;
    --service-cta2: #1CD6FF;
    --service-highlight: #E8FA78;
}
.service.zenpop {
    --service-hero1: #fff8e3;
    --service-hero2: #fff1be;
    --service-base: #EACD66;
    --service-dark: #D9B252;
    --service-cta: #A668A3;
    --service-cta2: #FFCE00;
    --service-highlight: #FFD3FC;
}
.service.zenplus {
    --service-hero1: #f6f3ff;
    --service-hero2: #D2C2FF;
    --service-base: #B89FFF;
    --service-dark: #7461AA;
    --service-cta: #EE5381;
    --service-cta2: #FFCE00;
    --service-highlight: #FFCADA;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--service-body);
    font-weight: 500;
    font-feature-settings: "palt";
}
h2, .h2 {
    position: relative;
}
h2::after {
    background-color: var(--service-base);
    bottom: -25px;
    content: "";
    height: 5px;
    left: 50%;
    -webkit-mask-image: url(https://zen.one/img/landings/zenlink/v2/zenlink-dotted-line.svg);
    mask-image: url(https://zen.one/img/landings/zenlink/v2/zenlink-dotted-line.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    transform: translateX(-50%);
    width: 90px;
}
@media (min-width: 768px) {
    h2.text-md-start::after  {
        left: 5px;
        transform: none;
    }
}
@media (min-width: 768px) {
    .writing-vertical {
        writing-mode: vertical-rl;
    }
}
.service .highlighter {
    background:linear-gradient(transparent 70%, var(--service-highlight) 70%);
}
.service .emphasis {
    position: relative;
    padding-top: 0.2em;
}
.service .emphasis::before {
    position: absolute;
    content: "";
    width: 0.35em;
    height: 0.35em;
    border-radius: 50%;
    background-color: var(--service-highlight);
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}
.service .spark {
    position: relative;
    display: inline-block;
}
.service .spark::before, 
.service .spark::after {
    position: absolute;
    content: "";
    width: 1.5em;
    height: 1.5em;
    background: url(../images/zenlink-price-icon-left.svg) no-repeat center/contain;
    bottom: -.1em;
    left: 1em;
} 
.service .spark::after {
    left: auto;
    right: 1em;
    transform: scale(-1,1);
}
@media (min-width: 768px) {
    .spark::before,
    .spark::after {
        bottom: 0;
        width: 1.8em;
        height: 1.8em;
    }
    .spark::before {
        left: -2em;
    }
    .spark::after {
        bottom: 0;
        right: -2em;
    }
}
.service .triangle {
    height: 50px;
    width: 200px;
    margin: 30px auto;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.service .bg-white-90 {
    background-color: rgba(255, 255, 255, 0.9);
}
.service .font-en {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    letter-spacing: -0.03em;
}
.service .text-base {
    color: var(--service-base)!important;
}
.service .text-dark {
    color: var(--service-dark)!important;
}
.service .bg-base {
    background-color: var(--service-base)!important;
}
.service .bg-cta {
    background-color: var(--service-cta)!important;
}
.service .bg-service {
    background-color: var(--service-bg)!important;
}
.service .bg-dark {
    background-color: var(--service-dark)!important;
}
.service .border.border-dark {
    border-color: var(--service-dark)!important;
}
.service .text-cta {
    color: var(--service-cta)!important;
}
.service .text-body {
    color: var(--service-body)!important;
}
.service .w-fit {
    width: fit-content;
}
.service .btn:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
    border: 1px solid var(--service-cta);
}
.service .btn {
    background-color: var(--service-cta);
    transition: .4s;
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    gap: 5px;
}
.service .btn::before {
    content: "";
    width: 120%;
    height: 200%;
    position: absolute;
    top: -50%;
    right: 0;
    z-index: -1;
    background: #fff;
    border-radius: 0 100% 100% 0;
    transform: translateX(-100%);
    transition: transform ease .4s;
}
.service .btn:hover::before {
    transform: translateX(10%);
}
.service .btn *,
.service .btn:hover * {
    transition: .4s;
}
.service .btn:hover {
    background-color: #fff!important;
    border: 1px solid var(--service-cta);
    transition: .4s;
}
.service .btn:hover .text-white {
    color: var(--service-cta)!important;
}
.service .btn-cta:hover .bg-white {
    background-color: var(--service-cta)!important;
}
.service .btn.bg-white {
    border: 1px solid var(--service-cta)!important;
}
.service .btn-cta-line .bg-cta {
    border: 1px solid var(--service-cta);
}
.service .btn-cta-line:hover .bg-cta {
    background-color: #fff!important;
}
.service .btn-cta:hover .text-cta,
.service .btn-cta-line:hover .text-cta {
    color: #fff!important;
}
.service .btn-cta-line::before {
    background: var(--service-cta);
}

.service .btn-service-dark {
    background-color: var(--service-dark)!important;
    border: 1px solid var(--service-dark)!important;
}
.service .btn-service-dark:hover {
    background-color: #fff!important;
    border: 1px solid var(--service-dark)!important;
    transition: .4s;
    color: var(--service-dark)!important;
}
.service .btn-service-dark:hover .text-white {
    color: var(--service-dark)!important;
}
.service .bg-header .cta .position-absolute {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -10px;
    z-index: 1;
}

.service .bg-header {
    background: linear-gradient(to right bottom, var(--service-hero1), var(--service-hero2));
}
.service .bg-header .bg-wrapper {
    background-image: url('../images/bg-header_zenlink.svg');
    background-size: 150%;
    background-position: -20% 120%;
    background-repeat: no-repeat;
}
@media (min-width: 992px) {
    .service .bg-header .bg-wrapper {
        background-size: 60%;
        background-position: 130% -10%;
    }
}

.service .scroll-infinity .wrap {
    display: flex;
    overflow: hidden;
}
.service .scroll-infinity .list.scroll-left {
    animation: infinity-scroll-left 30s infinite 
    linear 0.5s both;
}

.service .scroll-infinity .list {
    display: flex;
    list-style: none;
    padding: 0;
    align-items: center;
}
.service .scroll-infinity .item {
    width: calc(100vw / 8);
    padding: 0 1.5%;
}
.service .scroll-infinity .item>img {
    width: 100%;
}
@media screen and (max-width:992px) {
    .service .scroll-infinity .item {
        width: calc(100vw / 6);
    }
}
@media screen and (max-width:576px) {
    .service .scroll-infinity .item {
        width: calc(100vw / 3);
    }
}

@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
}
@keyframes infinity-scroll-right {
    from {
        transform: translateX(-100%);
    }
        to {
        transform: translateX(0%);
    }
}

.service #steps .step:not(:last-child) {
    position: relative;
}
.service #steps .step:not(:last-child)::after {
    position: absolute;
    content: '';
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    height: 20px;
    width: 50px;
    margin: 30px auto;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    background: var(--service-dark);
}
@media (min-width: 992px) {
    .service #steps .step:not(:last-child)::after {
        position: absolute;
        content: '';
        top: 40px;
        bottom: auto;
        right: -15px;
        left: auto;
        height: 40px;
        width: 15px;
        margin: 30px auto;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        background: var(--service-dark);
    }
}
@media (min-width: 1200px) {
    .service #steps .step:not(:last-child)::after {
        top: 70px;
    }
}
.service #steps .form-control.form-control-solid:focus {
    border: 1px solid var(--service-cta);
}
.service #steps .btn-cta:hover {
    color: var(--service-cta)!important;
}
.service #steps .btn-cta::before {
    height: 300%;
    top: -100%;
}


.service .accordion-button:hover {
    z-index: 1;
}
.service .accordion .accordion-item {
    border-color: #cde0e3 !important;
}
.service .accordion .accordion-button::after,
.service .accordion .accordion-button:not(.collapsed)::after {
    width: 20px;
    height: 20px;
    background-size: contain;
}

.service .fixed-btn {
    background: var(--service-dark);
    position: fixed;
    right: 10px;
    bottom: 7rem;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    color: #fff;
    padding: 1rem 1.2rem 1.2rem;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 500;
    border: 1px solid #00000000;
    box-shadow: 0 0.1rem .5rem 0.25rem rgba(0, 0, 0, 0.1);
    z-index: 1;
}
.service .fixed-btn span {
    background: #fff;
    position: relative;
    display: inline-block;
    border-radius: 50px;
    padding: .15rem .5rem;
    margin-bottom: .5rem;
    color: var(--service-dark);
    font-size: 1rem;
}
.service .fixed-btn span::after {
    content: '';
    position: absolute;
    background: #fff;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    height: 7px;
    width: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: .4s;
}
.service .fixed-btn p {
    margin-bottom: 0;
}
.service .fixed-btn:hover {
    background: #fff;
    border: 1px solid var(--service-cta);
    transition: .4s;
}
.service .fixed-btn *,
.service .fixed-btn:hover * {
    transition: .4s;
}
.service .fixed-btn:hover span {
    background: var(--service-cta);
    color: #fff;
}
.service .fixed-btn:hover span::after {
    background: var(--service-cta);
    transition: .4s;
}
.service .fixed-btn:hover p {
    color: var(--service-cta);
}
.service .border-cta {
    border-color: var(--service-cta)!important;
}
.service .border-base {
    border-color: var(--service-base)!important;
}

.service .review li {
    list-style-type: none;
    display: inline-block;
    min-width: clamp(300px, 30%, 500px);
    background: 2% 5%/6rem url(../images/zenpop-review-quote.svg) no-repeat;
}


/* 1枚ずつのカルーセル */
.service .carousel {
    max-width: 700px;
    margin: 0 auto;
}
.service .carousel .carousel-indicators {
    margin-bottom: 0;
    bottom: -30px;
}
.service .carousel .carousel-indicators .active {
    background-color: var(--service-base)!important;
}
.service .carousel .carousel-indicators [data-bs-target] {
    background-color: #ccc;
    width: 8px;
    height: 8px;
    border-radius: 100%;
}
.service .carousel .carousel-control-next, .carousel-control-prev {
    color: var(--service-base);
}
.service .carousel-control-next-icon,
.service .carousel-control-prev-icon {
    filter: invert(15%) sepia(125%) saturate(1000%) hue-rotate(90deg) brightness(90%) contrast(90%);
    width: 3rem;
    height: 3rem;
}
.service .carousel-control-next, .carousel-control-prev {
    width: 10%;
}

.service .cta .bg-image {
    background: var(--service-dark) url(../images/cta-bg-1.png) no-repeat center/180%;
}
.service .cta .bg-image:last-child {
    background: var(--service-dark) url(../images/cta-bg-2.png) no-repeat center/180%;
}
@media (min-width: 992px) {
    .service .cta .bg-image {
        background: var(--service-dark) url(../images/cta-bg-1.png) no-repeat center/cover;
    }
    .service .cta .bg-image:last-child {
        background: var(--service-dark) url(../images/cta-bg-2.png) no-repeat center/cover;
    }
}



/*********** ZenLink ***********/
@keyframes fade {
    0% { 
        opacity: 0; 
    }
    100% { 
        opacity: 1; 
    }
}
@keyframes float {
    0% {
        transform: translateY(-2%);
      }
      100% {
        transform: translateY(5%);
      }
}
.zenlink .bg-header .fadein-1,
.zenlink .bg-header .fadein-2,
.zenlink .bg-header .fadein-3, 
.zenlink .bg-header .fadein-4, 
.zenlink .bg-header .fadein-5 {
    opacity: 0;
}
.zenlink .bg-header .fadein-1 {
    animation: fade .6s ease-in-out .2s 1 normal forwards;
}
.zenlink .bg-header .fadein-2 {
    animation: fade .6s ease-in-out .8s 1 normal forwards;
}
.zenlink .bg-header .fadein-3 {
    animation: fade .6s ease-in-out .6s 1 normal forwards;
}
.zenlink .bg-header .fadein-4 {
    animation: fade .6s ease-in-out .4s 1 normal forwards;
}
.zenlink .bg-header .fadein-5 {
    animation: fade .6s ease-in-out .8s 1 normal forwards,
    float 1.5s ease-in-out infinite alternate-reverse;
}
.zenlink .bg-header .window {
    position: absolute;
    top: -8%;
    right: 2%;
    width: 40%;
}
@media (min-width: 768px) {
    .zenlink .bg-header .bg-wrapper {
        background-size: 95%;
        background-position: 400% 70%;
    }
    .zenlink .bg-header .fadein-1 {
        animation: fade .6s ease-in-out .2s 1 normal forwards;
    }
    .zenlink .bg-header .fadein-2 {
        animation: fade .6s ease-in-out .2s 1 normal forwards;
    }
    .zenlink .bg-header .fadein-3 {
        animation: fade .6s ease-in-out .4s 1 normal forwards;
    }
    .zenlink .bg-header .fadein-4 {
        animation: fade .6s ease-in-out .6s 1 normal forwards;
    }
    .zenlink .bg-header .fadein-5 {
        animation: fade .6s ease-in-out .8s 1 normal forwards,
        float 1.5s ease-in-out infinite alternate-reverse;
    }
}


.zenlink .table {
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.zenlink .table td,
.zenlink .table th {
    color: var(--service-body);
}
.zenlink .table td,
.zenlink .table:not(.table-bordered) tbody tr:last-child td {
    border: 1px solid var(--service-body)!important;
}
.zenlink .table thead tr td:first-child {
    border-top: 1px solid #fff!important;
    border-left: 1px solid #fff!important;
}
.zenlink .table .bg-base {
    border-top: 1px solid var(--service-base)!important;
    position: relative;
}
.zenlink .table tbody .bg-service {
    width: 0;
}
.zenlink .table .bg-base::before {
    position: absolute;
    content: "";
    width: calc(100% + 2px);
    height: 2rem;
    top: -2rem;
    left: -1px;
    right: -1px;
    background: var(--service-base);
    border-radius: 15px 15px 0 0;
    border-top: 1px solid var(--service-body);
    border-left: 1px solid var(--service-body);
    border-right: 1px solid var(--service-body);
}
.zenlink th,
.table:not(.table-bordered) tbody tr:last-child th {
    position: sticky;
    top: 0;
    left: 0;
    background: none;
    border-top: 1px solid var(--service-body)!important;
    border-bottom: 1px solid var(--service-body)!important;
}
.zenlink th::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 1px);
    height: 100%;
    background: var(--service-bg);
    z-index: -1;
    border-left: 1px solid var(--service-body)!important;
    border-right: 1px solid var(--service-body)!important;
}
.zenlink .table .bg-white {
    position: sticky;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 1;
    border-left: 1px solid #fff!important;
}
.zenlink .table .bg-white::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    width: calc(100% + 1px);
    height: 100%;
    background: #fff;
    z-index: -1;
    border-left: 1px solid #fff!important;
    /* border-right: 1px solid #fff!important; */
}
.zenlink .table .bg-white::after {
    position: absolute;
    content: "";
    width: calc(100% + 1px);
    height: calc(2rem + 1px);
    top: calc(-2rem - 1px);
    left: -1px;
    right: -1px;
    background: #fff;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    /* border-right: 1px solid #fff; */
}
.zenlink .accordion .accordion-button::after,
.zenlink .accordion .accordion-button:not(.collapsed)::after {
    filter: invert(15%) sepia(125%) saturate(1000%) hue-rotate(130deg) brightness(90%) contrast(90%);
}


/*********** ZenPromo ***********/
.zenpromo .bg-header .window {
    position: absolute;
    top: 7%;
    right: auto;
    left: 5%;
    width: 40%;
}
.zenpromo .bg-header .fadein-1,
.zenpromo .bg-header .fadein-2,
.zenpromo .bg-header .fadein-3, 
.zenpromo .bg-header .fadein-4, 
.zenpromo .bg-header .fadein-5 {
    opacity: 0;
}
.zenpromo .bg-header .fadein-1 {
    animation: fade .6s ease-in-out .2s 1 normal forwards;
}
.zenpromo .bg-header .fadein-2 {
    animation: fade .6s ease-in-out .8s 1 normal forwards;
}
.zenpromo .bg-header .fadein-3 {
    animation: fade .6s ease-in-out .6s 1 normal forwards;
}
.zenpromo .bg-header .fadein-4 {
    animation: fade .6s ease-in-out .4s 1 normal forwards;
}
.zenpromo .bg-header .fadein-5 {
    animation: fade .6s ease-in-out .8s 1 normal forwards,
    float 1.5s ease-in-out infinite alternate-reverse;
}

.zenpromo #about .d-contents {
    display: contents;
}
.zenpromo #about h2 {
    order: 1;
}
.zenpromo #about .img {
    order: 2;
}
.zenpromo #about p,
.zenpromo #about a {
    order: 3;
}

@media (min-width: 768px) {
    .zenpromo #about .d-contents {
        display: block;
    }
    .zenpromo #about h2 {
        order: 2;
    }
    .zenpromo #about .img {
        order: 1;
    }
    .zenpromo #about p,
    .zenpromo #about a {
        order: 3;
    }
}
.zenpromo .accordion .accordion-button::after,
.zenpromo .accordion .accordion-button:not(.collapsed)::after {
    filter: invert(15%) sepia(125%) saturate(1000%) hue-rotate(-60deg) brightness(100%) contrast(90%);
}

.zenpromo .cta .bg-image {
    background: var(--service-dark) url(../images/cta-bg-2.png) no-repeat center/180%;
}
.zenpromo .cta .bg-image:last-child {
    background: var(--service-dark) url(../images/cta-bg-1.png) no-repeat center/180%;
}
@media (min-width: 992px) {
    .zenpromo .cta .bg-image {
        background: var(--service-dark) url(../images/cta-bg-2.png) no-repeat center/cover;
    }
    .zenpromo .cta .bg-image:last-child {
        background: var(--service-dark) url(../images/cta-bg-1.png) no-repeat center/cover;
    }
}
/*********** ZenStudio ***********/
.zenstudio .bg-header .window {
    position: absolute;
    top: 7%;
    right: auto;
    left: 5%;
    width: 40%;
}
.zenstudio .bg-header .fadein-1,
.zenstudio .bg-header .fadein-2,
.zenstudio .bg-header .fadein-3, 
.zenstudio .bg-header .fadein-4, 
.zenstudio .bg-header .fadein-5 {
    opacity: 0;
}
.zenstudio .bg-header .fadein-1 {
    animation: fade .6s ease-in-out .2s 1 normal forwards;
}
.zenstudio .bg-header .fadein-2 {
    animation: fade .6s ease-in-out .8s 1 normal forwards;
}
.zenstudio .bg-header .fadein-3 {
    animation: fade .6s ease-in-out .6s 1 normal forwards;
}
.zenstudio .bg-header .fadein-4 {
    animation: fade .6s ease-in-out .4s 1 normal forwards;
}
.zenstudio .bg-header .fadein-5 {
    animation: fade .6s ease-in-out .8s 1 normal forwards,
    float 1.5s ease-in-out infinite alternate-reverse;
}

.zenstudio #about .d-contents {
    display: contents;
}
.zenstudio #about h2 {
    order: 1;
}
.zenstudio #about .img {
    order: 2;
}
.zenstudio #about p,
.zenstudio #about a {
    order: 3;
}

@media (min-width: 768px) {
    .zenstudio #about .d-contents {
        display: block;
    }
    .zenstudio #about h2 {
        order: 2;
    }
    .zenstudio #about .img {
        order: 1;
    }
    .zenstudio #about p,
    .zenstudio #about a {
        order: 3;
    }
}
.zenstudio .accordion .accordion-button::after,
.zenstudio .accordion .accordion-button:not(.collapsed)::after {
    filter: invert(15%) sepia(125%) saturate(1000%) hue-rotate(-60deg) brightness(100%) contrast(90%);
}

.zenstudio .cta .bg-image {
    background: var(--service-dark) url(../images/cta-bg-2.png) no-repeat center/180%;
}
.zenstudio .cta .bg-image:last-child {
    background: var(--service-dark) url(../images/cta-bg-1.png) no-repeat center/180%;
}
@media (min-width: 992px) {
    .zenstudio .cta .bg-image {
        background: var(--service-dark) url(../images/cta-bg-2.png) no-repeat center/cover;
    }
    .zenstudio .cta .bg-image:last-child {
        background: var(--service-dark) url(../images/cta-bg-1.png) no-repeat center/cover;
    }
}


/*********** ZenPop ***********/
.zenpop .bg-header .bg-wrapper {
    background-image: url('../images/bg-header_zenpop.svg');
}


/*********** ZenPlus ***********/
.zenplus .bg-header .bg-wrapper {
    background-image: url('../images/bg-header_zenplus.svg');
}
.zenplus .carousel-control-next-icon,
.zenplus .carousel-control-prev-icon {
    filter: invert(65%) sepia(125%) saturate(1000%) hue-rotate(230deg) brightness(90%) contrast(90%);
    width: 3rem;
    height: 3rem;
}