@charset "utf-8";

/* common */
:root {
    --header-height: 60px;
}
html {scroll-behavior: smooth;}
p {line-height: 1.5;}
.section-padding {
    padding: 10vmax 7vw;
}
.child-section {
    padding: 5vmax 0;
    max-width: 100%;
}
.background-main-20 {
    background: rgb(var(--tantore-main-rgb), .2);
}
.background-deep-100 {
    background: rgb(var(--tantore-deep-rgb));
    color: #fff;
}
.background-gray {
    background: #f5f5f5;
}
.color-white {color: #fff !important;}
.max-width-1440px {
    max-width: calc(1440px + 14vw);
    margin: auto;
}
.max-width-950px {
    max-width: 950px;
    margin: auto;
}
.max-width-100per {
    max-width: 100%;
}
.h2-center, .h2-left, .h3-center, .lead-left {
    font-weight: 700;
    letter-spacing: 0.15em;
}
.h2-center, .h3-center {
    display: block;
    width: fit-content;
    margin: auto;
    line-height: 1.5;
}
.margin-auto {margin: 0 auto;}
.text-align-center {text-align: center;}
.h2-center, .h2-left {
    font-size: 1.5em;
}
.h2-sub {
    font-size: .75em;
    color: rgb(var(--tantore-deep-rgb));
}
.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;
}
.ul-rounded-line {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.5;
    gap: .25em .5em;
    font-size: 14px;
}
.ul-rounded-line li {
    padding: 0 1em;
    color: rgb(var(--tantore-deep-rgb));
    border: 1px solid;
    border-radius: 99px;
}
.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;}
.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: block;
    width: fit-content;
    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));
}
.object-fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.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: block;
    width: fit-content;
    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: block;
    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;}
.align-items-center {align-items: center;}
.align-items-baseline {align-items: baseline;}
.scrollable-container {
    position: relative;
    overflow-x: auto;
    overflow-y: clip;
    max-width: 100%;
    padding-bottom: .5em;
}
.simple-table {
    white-space: nowrap;
    line-height: 1.6;
    border-collapse: collapse;
    margin: auto;
    width: max-content;
    table-layout: auto;
    border: 2px solid #e5e5e5;
    --main-product-color: #333;
}
.toggle-trigger:first-of-type ~ table th:nth-of-type(2),
.toggle-trigger:first-of-type ~ table td:first-of-type,
.toggle-trigger:nth-of-type(2) ~ table th:nth-of-type(3),
.toggle-trigger:nth-of-type(2) ~ table td:nth-of-type(2),
.toggle-trigger:nth-of-type(3) ~ table th:nth-of-type(4),
.toggle-trigger:nth-of-type(3) ~ table td:nth-of-type(3),
.toggle-trigger:nth-of-type(4) ~ table th:nth-of-type(5),
.toggle-trigger:nth-of-type(4) ~ table td:nth-of-type(4) {
    display: none;
}
.toggle-trigger:first-of-type:checked ~ table th:nth-of-type(2),
.toggle-trigger:first-of-type:checked ~ table td:first-of-type,
.toggle-trigger:nth-of-type(2):checked ~ table th:nth-of-type(3),
.toggle-trigger:nth-of-type(2):checked ~ table td:nth-of-type(2),
.toggle-trigger:nth-of-type(3):checked ~ table th:nth-of-type(4),
.toggle-trigger:nth-of-type(3):checked ~ table td:nth-of-type(3),
.toggle-trigger:nth-of-type(4):checked ~ table th:nth-of-type(5),
.toggle-trigger:nth-of-type(4):checked ~ table td:nth-of-type(4) {
    display: table-cell;
}
.simple-table thead th {
    background: rgb(var(--tantore-deep-rgb));
    color: #fff;
    text-align: center;
}
.simple-table th,
.simple-table td {
    position: relative;
    padding: .75em 1.5em;
    vertical-align: middle;
    border-left: 2px solid #e5e5e5;
    border-right: 2px solid #e5e5e5;
}
.simple-table td {
    background: #fff;
}
.simple-table tr th:first-of-type {
    position: sticky;
    left: 0;
    z-index: 9;
}
.simple-table tbody th:before,
.simple-table td:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 0;
    border-bottom: 2px dotted #eee;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.simple-table tr:last-of-type tbody th:before,
.simple-table tr:last-of-type td:before {
    display: none;
}
.simple-table thead th.th-main-product {
    background: var(--main-product-color);
    color: #fff;
    padding-bottom: 1.5em;
}
.simple-table thead th.th-main-product:after {
    content: "";
    position: absolute;
    width: 100%;
    height: .75em;
    bottom: 100%;
    left: 0;
    background: var(--main-product-color);
    border-radius: 5px 5px 0 0;
}
.simple-table td.td-main-product {z-index: 1;}
.simple-table td.td-main-product:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-right: 2px solid var(--main-product-color);
    border-left: 2px solid var(--main-product-color);
    z-index: -1;
}
.simple-table tr:last-of-type td.td-main-product:after {
    border-bottom: 2px solid var(--main-product-color);
}
.simple-table dl {
    display: grid;
    gap: .25em;
}
.simple-table dl > div {
    display: flex;
    flex-wrap: wrap;
    gap: .25em;
}
.simple-table tbody th {
    background: #f5f5f5;
}
.simple-table caption {
    width: fit-content;
    margin-left: auto;
    margin-top: 1em;
    font-size: 12px;
    color: #888;
    caption-side: bottom;
}
td.vertical-align-top {
    vertical-align: top;
}
.table-switcher {
    margin: auto;
    gap: .5em 1em;
    align-items: center;
}
.table-switcher-headline {
    font-size: 14px;
}
.table-switcher label {
    position: relative;
    display: block;
    min-width: 8em;
    padding: .5em .5em .5em 2.25em;
    background: #fff;
    box-shadow: 0 0 5px #ddd;
}
.table-switcher label:before {
    content: "";
    position: absolute;
    width: 1.25em;
    height: 1.25em;
    top: 50%;
    left: .5em;
    transform: translateY(-50%);
    border: 2px solid #ddd;
}
.table-switcher label:after {
    content: "";
    position: absolute;
    display: none;
    width: .5em;
    height: 1em;
    top: 50%;
    left: .9em;
    border-bottom: 3px solid;
    border-right: 3px solid;
    border-color: rgb(var(--tantore-deep-rgb));
    transform: translateY(-55%) rotate(45deg);
}
.table-switcher label.toggled:after {display: block;}
.table-rating-icon.double-circle {
    --color: #009E73;
}
.table-rating-icon.circle {
    --color: #0072B2;
}
.table-rating-icon.triangle {
    --color: #E69F00;
}
.table-rating-icon.cross {
    --color: #D55E00;
}
.table-rating-icon {
    display: block;
    width: fit-content;
    margin: auto;
    font-weight: 700;
    font-size: 1.5em;
    color: var(--color);
    text-shadow: 0 0 var(--color);
    line-height: 2;
}
.table-details {
    text-align: center;
    font-size: 12px;
}
.order-first {order: -1;}
.margin-left-auto {margin-left: auto;}
.headline-with-en {
    position: relative;
    font-size: 1.2em;
    font-weight: 700;
    padding: 2em 0;
    line-height: 1.6;
    z-index: 1;
}
.headline-with-en:before {
    content: attr(data-en);
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 4.5em;
    color: #f3f3f3;
    transform: translate(-50%, -30%);
    line-height: 1;
    z-index: -1;
}
.background-gray .headline-with-en:before {
    color: #efefef;
}
.movie-container {
    position: relative;
    padding-top: 56.25%;
    width: 560px;
    max-width: 100%;
}
.movie-container iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* 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;
}

/* newspapers */
.newspapers {
    gap: 2vmax;
}
.newspaper-logo-list {
    gap: 1.5vw 3vw;
}
.newspaper-logo-item {
    position: relative;
    --max-of-line: 5;
    --total-gap: calc(3vw * (var(--max-of-line) - 1));
    --width: calc((100% - 14vw - var(--total-gap)) / var(--max-of-line));
    width: var(--width);
    min-width: 96px;
    aspect-ratio: 3 / 1;
    overflow: clip;
}
.newspaper-logo-img {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    object-fit: contain;
    --scale: 1;
    transform: translate(-50%, -50%) scale(var(--scale));
}
.newspapers-text {
    position: relative;
    padding: 1em;
    font-weight: 700;
    font-size: 4vw;
    color: #fff;
    z-index: 1;
    letter-spacing: .15em;
    line-height: 1.8;
}
.newspapers-text:before {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, transparent, #333, transparent);
    width: 100vw;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

/* cases */
.cases:before {
    width: 50%;
    height: 3.5vmax;
    bottom: 0;
    right: 0;
    background: #fff;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.cases-list {
    grid-template-columns: 1fr 1fr;
}
.cases-list li {
    display: grid;
    box-shadow: 0 0 15px #ccc;
    overflow: clip;
    border-radius: 5px;
}
.cases-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-label {
    font-weight: 700;
    padding: .5em;
    line-height: 1.6;
    order: 1;
    width: fit-content;
    margin: auto;
}
.case-child-subtitle {
    font-size: 4.75vw;
}
.flooded-list {
    padding-top: 1em;
}
.flooded-list img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* features */
.features {padding-top: 15vmax;}
.features:before, .features:after {
    width: 50%;
    height: 3.5vmax;
    top: 0;
    left: 0;
    background: #f5f5f5;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.features:after {
    top: 100%;
    left: 50%;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    transform: translateY(-100%);
}
.features-movie-headline {
    background: #333;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    padding: .5em;
    margin-bottom: .5em;
}

/* reasons */
.reasons {padding-top: 15vmax;}
.reasons:before {
    width: 50%;
    height: 3.5vmax;
    left: 0;
    top: 0;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.reasons .simple-table {
    margin-top: 1em;
    background: #eee;
}
.simple-table thead th {
    background: #eee;
    color: #555;
}

/* specs */
.specs {
    counter-reset: specs-count;
}
.specs-children-container {
    gap: 3em;
}
.spec-item {
    position: relative;
    counter-increment: specs-count;
    display: grid;
    gap: 1em;
}
.specs-h3 {
    font-weight: 700;
    position: relative;
    z-index: 1;
    padding: 3em 0 0;
    font-size: 1.2em;
    line-height: 2;
    align-items: baseline;
}
.specs-h3:before {
    content: "0" counter(specs-count);
    position: absolute;
    font-size: 1.75em;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: .1;
    transform: skewX(-15deg);
    line-height: 1.6;
}
.specs-h3:after {
    content: "";
    position: absolute;
    width: calc(100% - 2.5em);
    height: 2px;
    background: #555;
    opacity: .1;
    top: 1.5em;
    right: 0;
}
.specs-large {
    font-size: 1.75em;
    line-height: 1;
}

/* size */
.size {
    background: #333;
    color: #fff;
}
.size-h2 {
    font-size: 1.2em;
    line-height: 1.6;
    letter-spacing: .15em;
}
.size-h2:before {opacity: .1;}
.size-underbar:before {
    content: "";
    display: inline-block;
    width: 1em;
    margin: 0 .25em;
    border-bottom: 1px solid #fff;
}
.size .card {
    box-shadow: none;
}

/* reviews */
.review-card {
    filter: drop-shadow(0 0 9px #ddd);
}
.review-card-inner {
    display: grid;
    gap: 1.5em 2em;
    clip-path: polygon(
        0 0,
        calc(100% - 1.5em) 0,
        100% 1.5em,
        100% 100%,
        0 100%
    );
    padding: 1.5em;
    background: #fff;
}
.review-icon {
    order: -1;
    width: 25%;
    margin: 0 auto;
}
.review-icon dd {
    padding: 1em;
    border-radius: 50%;
    background: rgb(var(--tantore-main-rgb), .2);
}

/* faq */
.faq:before, 
.faq:after {
    height: 100%;
    width: 150%;
    background: rgb(var(--tantore-deep-rgb));
    border-radius: 50%;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-47.5%, -62.5%) skewX(15deg);
}
.faq:after {
    transform: translate(-70%, -75%) scale(.8) skewX(25deg);
    background: #EBF7F9;
}
.faq .h2-center {
    text-shadow: 1px 1px #fff;
}
.faq-container {
    max-width: 600px;
}

/* 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-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:before, .faq:after {
        height: 135%;
        width: 125%;
        transform: translate(-65%, -60%) skewX(30deg);
    }
    .faq:after{
        transform: translate(-67.5%, -62.5%) scale(.8) skewX(25deg);
    }
    .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;
    }
    .table-switcher {
        grid-template-columns: 6.5em 1fr;
    }
    /* header */
    .company-name {
        font-size: 2em;
    }
    .header-cv-list {
        gap: 1em;
        font-size: 15px;
        font-weight: 700;
    }
    /* newspapers */
    .newspapers-text {font-size: 1.5em;}
    /* cases */
    .cases-list, .flooded-list {
        grid-template-columns: repeat(3, 1fr);
    }
    .case-child-subtitle {
        font-size: 1.2em;
    }
    /* specs */
    .spec-item {
        --img-container-width: 45%;
        padding-left: var(--img-container-width);
        padding-bottom: 1.5em;
    }
    .spec-img-container {
        position: absolute;
        width: calc(var(--img-container-width) - 1.5em);
        height: 100%;
        top: 0;
        left: 0;
    }
    /* size */
    .size-example-list {
        grid-template-columns: repeat(3, 1fr);
    }
    /* reviews */
    .review-card {
        width: 80%;
        margin-right: auto;
    }
    .review-card:nth-of-type(even) {
        margin-right: 0;
        margin-left: auto;
    }
    .review-icon {width: 100%;}
    .review-card-inner {
        grid-template-columns: 5em 1fr;
    }
}

@media (min-width: 992px) {
    /* cases */
    .cases-list {
        grid-template-columns: repeat(6, 1fr);
    }
}

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

@media (min-width: 1335px) {
    .reasons-table-announce {display: none;}
}

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

@media (max-width: 355px) {
    .company-name {font-size: 1.5em;}
    .header-cv-link.cv-link-sub-color {display: none;}
}

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

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