@charset "utf-8";

/* common */
:root {
    --header-height: 60px;
}
html {scroll-behavior: smooth;}
p {line-height: 1.5;}
.section-padding {
    padding: 10vmax 7vw;
}
.background-main-20 {
    background: rgb(var(--tantore-main-rgb), .2);
}
.background-deep-100 {
    background: rgb(var(--tantore-deep-rgb));
    color: #fff;
}
.color-white {color: #fff !important;}
.max-width-1440px {
    max-width: calc(1440px + 14vw);
    margin: auto;
}
.h2-center, .h2-left, .h3-center, .lead-left {
    font-weight: 700;
    letter-spacing: 0.15em;
}
.h2-center, .h3-center {
    display: table;
    margin: auto;
    line-height: 1.5;
}
.margin-auto {margin: 0 auto;}
.h2-center, .h2-left {
    font-size: 1.5em;
}
.h3-center, .lead-left {
    color: rgb(var(--tantore-deep-rgb));
    line-height: 1.8;
}
.reset-numbered-headline {
    counter-reset: headline-number;
}
.numbered-headline {
    position: relative;
    counter-increment: headline-number;
    font-weight: 700;
    padding: 1em 0 1em 2em;
    z-index: 1;
    line-height: 1.5;
}
.numbered-headline:before {
    content: "0" counter(headline-number);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 3em;
    opacity: .2;
    color: rgb(var(--tantore-deep-rgb));
    transform: translateY(-5%) skewX(-15deg);
    line-height: 1;
    z-index: -1;
}
.numbered-headline:nth-last-of-type(n + 10):before {
    content: counter(headline-number);
}
.background-deep-100 .lead-left {color: #fff;}
.gap-2em {
    gap: 2em;
}
.gap-1-5em {gap: 1.5em;} 
.gap-1em {
    gap: 1em;
}
.gap-05em {gap: .5em;}
.gap-025em {gap: .25em;}
.table-cell {
    display: table-cell;
}
.simple-box {
    padding: 1em;
    background: rgb(var(--tantore-main-rgb),.1);
    border: 1px solid rgb(var(--tantore-main-rgb));
}
.dl-arrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    line-height: 1.5;
}
.dl-arrow > div {
    display: grid;
    gap: 1em 0;
    background: #fff;
    border-radius: 5px;
    border: 2px solid rgb(var(--tantore-deep-rgb));
    place-content: center;
    overflow: clip;
}
.dl-arrow > div > dt,
.dl-arrow > div > dd {
    display: grid;
    place-content: center;
}
.dl-arrow > div > dt {
    position: relative;
    padding: 1em .5em 1em 1.5em;
    background: rgb(var(--tantore-deep-rgb));
    color: #fff;
}
.dl-arrow > div > dt:before {
    content: "";
    position: absolute;
    width: 1em;
    height: 100%;
    background: rgb(var(--tantore-deep-rgb));
    clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
    left: 100%;
    top: 0;
}
.dl-arrow > div > dd {
    padding: 1em 1.5em 1em 2em;
    color: rgb(var(--tantore-deep-rgb));
}
.dl-table {
    display: grid;
    gap: 1em .5em;
}
.dl-table > div,
.section-table {
    border: 2px solid rgb(var(--tantore-deep-rgb));
    background: #fff;
    line-height: 1.5;
    border-radius: 5px;
    overflow: clip;
}
.dl-table > div > dt,
.section-table-headline {
    display: grid;
    place-content: center;
    font-weight: 700;
    padding: 1em;
    background: rgb(var(--tantore-deep-rgb));
    color: #fff;
}
.dl-table > div > dd,
.section-table-content {
    padding: 1em;
}
.ul-check li,
.ul-dot li,
.ul-check-link a,
.simple-ol li {
    display: block;
    position: relative;
    padding-left: 1.5em;
    line-height: 1.5;
}
.ul-check-link a {
    padding: .5em .5em .5em 2em;
    border: 1px solid #ddd;
    transition: background .5s;
}
.ul-check-link a:hover {
    background: rgb(var(--tantore-main-rgb),.25);
}
.ul-check li:before,
.ul-check-link a:before {
    content: "";
    position: absolute;
    width: .4em;
    height: .6em;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-color: rgb(var(--tantore-deep-rgb));
    top: .4em;
    left: .5em;
    transform: rotate(45deg);
}
.ul-dot li:before {
    content: "";
    position: absolute;
    width: .4em;
    height: .4em;
    background: rgb(var(--tantore-deep-rgb));
    top: .6em;
    left: .5em;
}
.ul-check-link a:before {
    top: .9em;
    left: .9em;
}
.simple-ol {
    counter-reset: ol-counter;
}
.simple-ol li {
    counter-increment: ol-counter;
    padding-left: 2em;
}
.simple-ol li:before {
    content: "0" counter(ol-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    transform: skewX(-15deg);
    color: rgb(var(--tantore-deep-rgb));
}
.simple-ol li:nth-of-type(n + 10):before {
    content: counter(ol-counter) ".";
}
.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}
.headline-icon-top {
    order: -9;
    width: 80px;
    margin: auto;
}
.font-size-12px {font-size: 12px;}
.font-size-14px {font-size: 14px;}
.place-content-center {place-content: center;}
.dl-rounded, .dl-rounded-back {
    display: grid;
    gap: 1.5em;
    line-height: 1.5;
}
.dl-rounded > div,
.dl-rounded-back > div {
    position: relative;
    display: grid;
}
.dl-rounded > div {
    gap: .5em;
}
.dl-rounded dt,
.dl-rounded-back dt {
    display: table;
    margin-right: auto;
    padding: .25em 1em;
    background: rgb(var(--tantore-deep-rgb));
    color: #fff;
    border-radius: 99px;
    font-size: 14px;
}
.dl-rounded-back dt {
    position: absolute;
    top: 0;
    left: .5em;
}
.dl-rounded-back dd {
    background: #fff;
    padding: 1.5em 1em 1em;
    margin-top: .8em;
    border-radius: 5px;
    border: 2px solid rgb(var(--tantore-deep-rgb));
}
.link-underline, .tel-link {
    color: rgb(var(--tantore-deep-rgb));
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.link-underline:hover {text-decoration: none;}
.attention-mark:before {
    content: "※";
    color: rgb(var(--tantore-deep-rgb));
}
.img-gallery {
    position: relative;
    overflow: clip;
}
.img-gallery > div {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 80%;
    gap: .5em;
}
.img-gallery > div:first-of-type {position: relative;}
.intersecting .img-gallery > div {
    animation: imageGallery var(--duration) linear 0s infinite forwards;
    animation-delay: var(--delay);
}
.img-gallery dt {
    font-size: 14px;
    display: table;
    margin: auto;
    order: 1;
    min-height: 3em;
    line-height: 1.5;
}
.img-gallery dd,
.link-card-img {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
    overflow: clip;
}
.img-gallery img,
.link-card img,
.conversion-background img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
}
@keyframes imageGallery {
    0%{transform: translate3d(calc(100% * (var(--item-count) - 1)), 0, 0);}
    100%{transform: translate3d(-100%, 0, 0);}
}
.link-card {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: clip;
    display: grid;
    background: #fff;
    color: #555;
}
.link-card-img {
    order: -1;
    padding-top: 56.25%;
    border-bottom: 1px solid #ddd;
}
.link-card-img img {transition: transform .5s;}
.link-card:hover img {transform: scale(1.1);}
.link-card a {
    padding: 1em;
    font-weight: 700;
    line-height: 1.5;
}
.link-card a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9;
}
.nowrap {white-space: nowrap;}
.accordion-content {
    position: relative;
    overflow: clip;
}
.accordion-viewmore .accordion-toggle-button {
    position: absolute;
    display: table;
    width: 9em;
    padding: .25em 1em .25em 0;
    text-align: center;
    background: rgb(var(--tantore-deep-rgb));
    color: #fff;
    font-weight: 700;
    border-radius: 99px;
    font-size: 12px;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 19;
}
.accordion-toggle-checkbox:checked ~ .accordion-content {
    max-height: 9999px;
}
.accordion-toggle-checkbox:checked ~ .accordion-viewmore .accordion-toggle-button {
    position: relative;
    margin-top: 1em;
}
.accordion-viewmore .accordion-toggle-button:before {
    content: "";
    position: absolute;
    width: .5em;
    height: .5em;
    top: 50%;
    right: 1em;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-color: #fff;
    transform: translateY(-60%) rotate(45deg);
}
.accordion-viewmore {
    max-height: 15em;
}
.accordion-viewmore:before {
    width: 100%;
    height: 3.5em;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, #fff, transparent);
    z-index: 1;
}
.accordion-toggle-checkbox:checked ~ .accordion-viewmore:before {
    display: none;
}
.accordion-toggle-checkbox:checked ~ .accordion-viewmore .accordion-toggle-button span {
    display: none;
}
.accordion-toggle-checkbox:checked ~ .accordion-viewmore .accordion-toggle-button:before {
    transform: translateY(-25%) rotate(-135deg);
}
.accordion-toggle-checkbox:checked ~ .accordion-viewmore .accordion-toggle-button:after {
    content: "閉じる";
}
.accordion-foldable {
    background: #fff;
    color: #555;
    box-shadow: 0 0 15px #ddd;
    border-radius: 5px;
    overflow: clip;
}
.accordion-toggle-button.accordion-foldable-button {
    position: relative;
    display: block;
    padding: 1.5em 2.5em 1.5em 1em;
    font-weight: 700;
    line-height: 1.5;
    transition: background .5s, color .5s;
}
.accordion-toggle-button.accordion-foldable-button:hover,
.accordion-toggle-checkbox:checked ~ .accordion-toggle-button.accordion-toggle-button.accordion-foldable-button,
.accordion-toggle-checkbox:checked ~ * .accordion-toggle-button.accordion-toggle-button.accordion-foldable-button {
    background: rgb(var(--tantore-deep-rgb));
    color: #fff;
}
.accordion-toggle-button.accordion-foldable-button:before,
.accordion-toggle-button.accordion-foldable-button:after {
    content: "";
    position: absolute;
    width: 1em;
    height: 2px;
    background: rgb(var(--tantore-deep-rgb));
    top: 50%;
    right: .75em;
    transform: translateY(-50%);
}
.accordion-toggle-button.accordion-foldable-button:after {
    transform: translateY(-50%) rotate(-90deg);
    transition: transform .5s;
}
.accordion-toggle-button.accordion-foldable-button:hover:before,
.accordion-toggle-checkbox:checked ~ .accordion-toggle-button.accordion-toggle-button.accordion-foldable-button:before,
.accordion-toggle-checkbox:checked ~ * .accordion-toggle-button.accordion-toggle-button.accordion-foldable-button:before,
.accordion-toggle-button.accordion-foldable-button:hover:after,
.accordion-toggle-checkbox:checked ~ .accordion-toggle-button.accordion-toggle-button.accordion-foldable-button:after,
.accordion-toggle-checkbox:checked ~ * .accordion-toggle-button.accordion-toggle-button.accordion-foldable-button:after {
    background: #fff;
}
.accordion-toggle-checkbox:checked ~ .accordion-toggle-button.accordion-toggle-button.accordion-foldable-button:after,
.accordion-toggle-checkbox:checked ~ * .accordion-toggle-button.accordion-toggle-button.accordion-foldable-button:after {
    transform: translateY(-50%) rotate(0);
}
.accordion-foldable .accordion-content {
    padding: 0 1em;
    max-height: 0;
    transition: max-height .25s, padding .5s;
}
.accordion-foldable .accordion-toggle-checkbox:checked ~ .accordion-content {
    max-height: 9999px;
    padding: 1em;
    transition: max-height .5s, padding .5s;
}
.card {
    position: relative;
    padding: 1em;
    border-radius: 5px;
    background: #fff;
    color: #555;
    box-shadow: 0 0 15px #ddd;
}
.background-deep-100 .card{
    box-shadow: none;
}
.long-text, .long-text p {line-height: 1.8;}
.justify-content-center {justify-content: center;}

/* header */
.header {
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.company-name {
    font-size: 1.8em;
    line-height: 2;
}
.header-cv-list {
    gap: .5em;
    font-size: 12px;
}
.cv-link.header-cv-link {
    width: 9.5em;
    padding-right: .5em;
}

/* introduction */
.introduction-h2 {
    font-size: 5.25vw;
}

/* points */
.points-inner {
    gap: 2em;
    align-items: center;
    justify-content: center;
}
.points-h2 {
    line-height: 1.5;
    gap: 1em;
}
.points-h2-main {
    font-size: 7vw;
    letter-spacing: 0.15em;
}
.points-h2-sub {color: rgb(var(--tantore-deep-rgb));}
.introduction-company {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 1;
    z-index: -1;
}
.introduction-tantore, .introduction-company:before {
    font-size: 20vmax;
    display: block;
    background: linear-gradient(
        45deg,
        rgb(var(--tantore-main-rgb), .2),
        rgb(var(--tantore-main-rgb), .1),
        rgb(var(--tantore-main-rgb), .2),
        rgb(var(--tantore-main-rgb), .1)
    );
    color: transparent;
    background-clip: text;
    transform: translate3d(0, 0, 0);
}
.introduction-company:before {
    content: "tantore";
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-gramond);
    animation-delay: -10s;
}
.introduction.intersecting .introduction-tantore,
.introduction.intersecting .introduction-company:before {
    animation: introductionTantore 20s linear 0s infinite forwards;
}
.introduction.intersecting .introduction-company:before {
    animation-delay: -10s;
}
@keyframes introductionTantore {
    0%{transform: translate3d(100%, 0, 0);}
    100% {transform: translate3d(-200%, 0, 0);}
}
.points-list {
    gap: 1em;
    max-width: 900px;
}
.points-item {
    box-shadow: 0 0 5px #ddd, 0 0 15px #ddd;
    background: #fff;
}
.points-item-container {
    padding: 1em;
    gap: 1em;
    line-height: 1.5;
}
.introduction-points {max-width: 1000px;}
.introduction-points-icon {
    height: auto;
    order: -1;
    width: 50%;
    max-width: 50px;
    max-height: 50px;
    transform: translate3d(0,0,0);
}
.introduction-points-icon.scale-80 {transform: scale(.8);}

/* merits */
.merits:before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(var(--tantore-main-rgb), .2);
    z-index: -1; 
}
.merits-h2-sub {
    font-size: 5vw;
    color: rgb(var(--tantore-deep-rgb));
}

/* demerits */
.demerits-container dt {
    width: 8em;
    text-align: center;
}
.demerits-container .dl-rounded {gap: 2em;}
.demerits-container .dl-rounded > div {
    gap: 1em;
}

/* technology */
.technology:before {
    content: "tantore";
    position: absolute;
    font-family: var(--font-gramond);
    font-weight: 700;
    color: rgb(var(--tantore-main-rgb));
    opacity: .2;
    width: 100%;
    text-align: center;
    font-size: 32.5vw;
    bottom: 0;
    left: 0;
    line-height: .7;
    z-index: -1;
}
.technology .h2-center {
    font-size: 6vw;
}
.technology .tantore {
    font-size: 1.45em;
    padding: 0 .25em;
    line-height: 1.5rem;
}
.technology-list {
    display: grid;
    max-width: 30.5em;
}
.technology-list li {
    padding: .5em 1em;
    width: 15em;
    border: 1px solid rgb(var(--tantore-main-rgb));
    text-align: center;
    line-height: 1.5;
    background: #F5FBFC;
}
.technology-img-container {
    position: relative;
}
.technology-img-container:before {
    width: 75%;
    height: 75%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(var(--tantore-main-rgb), .3);
}
.technology-img {
    width: 55%;
}
.technology-img:first-of-type {
    position: relative;
    padding-top: 75%;
    margin-right: auto;
    width: 60%;
}
.technology-img .object-fit-cover {
    border-radius: 1em;
}
.technology-img:first-of-type .object-fit-cover {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.technology-img:nth-of-type(2) {
    position: relative;
    margin-top: -5em;
    z-index: 1;
    margin-left: auto;
}

/* faq */
.faq-container {
    max-width: 600px;
}
.faq-background {
    --width: 2em;
    --x-start: 5%;
    --x-end: 25%;
    --adjuster: (var(--width) / 2);
    clip-path: polygon(
        var(--x-start) 0,
        calc(var(--x-start) + var(--width)) 0,
        calc(var(--x-start) + var(--width)) 25%,
        calc(var(--x-end) + var(--width)) 35%,
        calc(var(--x-end) + var(--width)) 65%,
        calc(var(--x-start) + var(--width)) 75%,
        calc(var(--x-start) + var(--width)) 100%,
        var(--x-start) 100%,
        var(--x-start) calc(75% - var(--adjuster)),
        var(--x-end) calc(65% - var(--adjuster)),
        var(--x-end) calc(35% + var(--adjuster)),
        var(--x-start) calc(25% + var(--adjuster)),
        var(--x-start) 0
    );
    background: rgb(var(--tantore-deep-rgb));
    opacity: .25;
}
.faq-background:before {
    width: 100%;
    height: 25%;
    background: linear-gradient(
        0deg,
        transparent,
        #fff,
        transparent
    );
    bottom: 100%;
    left: 0;
    opacity: .7;
}
.intersecting .faq-background:before {
    animation: faqBackground 4s linear 0s infinite forwards;
}
@keyframes faqBackground {
    0%{transform: translate3d(0, 0, 0);}
    25% {transform: translate3d(0, 600%, 0);}
    100% {transform: translate3d(0, 600%, 0);}
}

/* conversion */
.conversion {
    min-height: 50svh;
    place-content: center;
}
.conversion::before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(
        90deg,
        rgb(var(--tantore-deep-rgb), .25),
        rgb(var(--tantore-deep-rgb), .75),
        rgb(var(--tantore-deep-rgb), .25)
    );
    z-index: -1;
}
.conversion-h2 {
    color: #fff;
    transform: translate3d(0,0,0);
}
.conversion-p {transform: translate3d(0,0,0);}
.conversion-list {
    justify-content: center;
}
.conversion-background {
    gap: 3.5vmax;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    background: linear-gradient(
        45deg,
        rgb(var(--tantore-deep-rgb)),
        rgb(var(--tantore-deep-rgb), .25),
        rgb(var(--tantore-main-rgb), .5)
    )
}
.conversion-img-group {
    position: relative;
    width: 100%;
    height: 100%;
}
.conversion-img-group:nth-last-of-type(even) {
    display: none;
}
.conversion-img {
    position: absolute;
    width: 100%;
    height: 0;
    padding-top: 30svh;
    top: 0;
    left: 0;
}
.conversion-img:first-of-type {
    position: relative;
}
@keyframes cvBack {
    0% {transform: translate3d(0, 300%, 0);}
    100% {transform: translate3d(0, -100%, 0);}
}
.intersecting .conversion-img {
    animation: cvBack 15s linear 0s infinite forwards;
}
.intersecting .conversion-img-group:nth-last-of-type(3) .conversion-img {
    animation-direction: reverse;
}
.intersecting .conversion-img:first-of-type {animation-delay: -10s;}
.intersecting .conversion-img:nth-of-type(2) {animation-delay: -5s;}
.conversion-img img {
    border-radius: 15px;
}
.conversion-tel-fax {
    background: rgb(var(--tantore-deep-rgb), .5);
    color: #fff;
    padding: 1em;
    min-width: 15em;
    place-content: center;
    border: 1px solid rgb(255,255,255,.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.conversion-tel-fax-item {align-items: baseline;}
.conversion-tel-fax dd {
    font-size: 18px;
}
.conversion .tel-link {color: #fff;}

/* footer */
.footer {
    background: #555;
    color: #fff;
    padding: 1.5em 1em;
}
.footer-nav-list {
    justify-content: center;
    gap: .5em 0;
}
.footer-nav-list a {
    display: block;
    padding: .25em 1em;
}
.footer-nav-list li {
    border-right: 1px solid #ddd;
}
.footer-nav-list li:first-of-type {
    border-left: 1px solid #ddd;
}
.copyright {letter-spacing: 0;}

@media (orientation: landscape) {
    /* faq */
    .faq-background {
        --x-end: 15%;
    }

    /* conversion */
    .conversion {
        min-height: 100svh;
    }
    .conversion::before{
        background: linear-gradient(
            90deg,
            transparent 10%,
            rgb(var(--tantore-deep-rgb), .75),
            transparent 90%
        );
    }
    .conversion-background {
        grid-template-columns: repeat(5, 1fr);
    }
    .conversion-img-group:nth-last-of-type(even) {
        display: block;
    }
    .conversion-img {
        padding-top: 50svh;
    }
    .intersecting .conversion-img-group:nth-last-of-type(odd) .conversion-img {
        animation-direction: normal;
    }
    .intersecting .conversion-img-group:nth-last-of-type(even) .conversion-img {
        animation-direction: reverse;
    }
}

@media (min-width: 600px) {
    :root {
        --header-height: 80px;
    }
    .h2-center, .h2-left {font-size: 2em;}
    .tel-link {
        pointer-events: none;
        text-decoration: none;
    }
    /* header */
    .company-name {
        font-size: 2em;
    }
    .header-cv-list {
        gap: 1em;
        font-size: 15px;
        font-weight: 700;
    }
    /* introduction */
    .introduction-h2 {font-size: 2em;}
    .introduction-points .font-size-14px {font-size: 16px;}
    .introduction-points {
        grid-template-columns: repeat(3, 1fr);
    }
    /* merits */
    .merits-h2-sub {
        font-size: .75em;
    }
    .merits-container, .demerits-container, .usecases-container, .technology-list {
        grid-template-columns: 1fr 1fr;
    }
    /* technology */
    .technology .h2-center {font-size: 2em;}
    .technology-list {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (min-width: 992px) {
    /* usecases */
    .usecases-container {grid-template-columns: repeat(3, 1fr);}
    /* technology */
    .technology-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1045px) {
    /* introduction */
    @keyframes introductionTantore {
        0%{transform: translate3d(0, 100%, 0);}
        100%{transform: translate3d(0, -200%, 0);}
    }
    .introduction-company {
        top: 0;
        bottom: unset;
        width: auto;
        writing-mode: vertical-lr;
    }
}

@media (min-width: 1150px) {
    /* merits */
    .merits-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 992px) and (max-width: 1172px) {
    .technology-list {justify-content: center;}
}

@media (min-width: 1173px) {
    .technology:before {
        text-align: left;
        font-size: 15vw;
        bottom: calc(10vmax + 4.5vw);
    }
}

@media (min-width: 1280px) {
    .conversion .cv-link {font-size: 1.25vw;}
}

@media (max-width: 370px) {
    /* conversion */
    .conversion .h2-center {
        font-size: 6vw;
    }
}

@media (max-width: 365px) {
    /* introduction */
    .introduction .lead-left {font-size: 14px;}
}

@media (max-width: 355px) {
    /* header */
    .company-name {font-size: 1.5em;}
}

@media (max-width: 345px) {
    .lead-left {font-size: 13px;}
}

@media (max-width: 320px) {
    /* introduction */
    .introduction .lead-left {font-size: 12px;}
}

@media (max-width: 290px) {
    .h2-left {
        font-size: 1.25em;
    }
}