@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;
}
.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: auto;}
.h2-center, .h2-left {
    font-size: 1.5em;
}
.h3-center, .lead-left {
    color: rgb(var(--tantore-deep-rgb));
    line-height: 1.8;
}
.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 {
    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;
}
.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;}

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

/* 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));}
.points-company {
    position: absolute;
    top: 5vmax;
    right: 0;
    line-height: 1;
    z-index: -1;
}
.points-tantore, .points-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);
}
.points-company:before {
    content: "tantore";
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-gramond);
    animation-delay: -10s;
}
.points.intersecting .points-tantore,
.points.intersecting .points-company:before {
    animation: pointsTantore 20s linear 0s infinite forwards;
}
.points.intersecting .points-company:before {
    animation-delay: -10s;
}
@keyframes pointsTantore {
    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;
}
.points-icon {
    order: -1;
    width: 50%;
    max-width: 100px;
    max-height: 100px;
}
.points-icon.scale-80 {transform: scale(.8);}

/* shipping */
.shipping:before {
    width: 50%;
    height: 5vmax;
    bottom: 0;
    right: 0;
    background: #fff;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.shipping-inner-container {
    align-items: start;
    justify-content: center;
    gap: 3em;
}
.shipping-times > div {
    grid-template-columns: 11.5em 1fr;
}
.shipping-area {
    width: 100%;
}
.shipping-pref-list {
    font-size: 14px;
    gap: 1em;
}
.shipping-area > div > dt.shipping-2days-later {
    background: rgb(var(--tantore-main-rgb), .25);
    color: rgb(var(--tantore-deep-rgb));
}
.shipping-area > div > dt.shipping-over-3days {background: #777;}

/* cut */
.cut:before {
    width: 50%;
    height: 5vmax;
    top: 0;
    left: 0;
    background: rgb(var(--tantore-main-rgb), .2);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cut:after {
    width: 50%;
    height: 5vmax;
    bottom: 0;
    right: 0;
    background: rgb(var(--tantore-main-rgb), .2);
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.cut-inner-container {
    gap: 2em 3em;
    justify-content: center;
}
.cut-details-list {
    margin: auto;
    padding: 2em 1em;
    border: 2px solid rgb(var(--tantore-deep-rgb));
    border-radius: 5px;
}
.cut-cv {
    align-items: start;
    align-self: start;
}

/* custom */
.custom:before {
    width: 50%;
    height: 5vmax;
    top: 0;
    left: 0;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
.custom-inner-container {
    justify-content: center;
    gap: 2em 3em;
    align-items: start;
    align-self: start;
}
.custom-details-list {
    max-width: 400px;
    margin: auto;
}
.custom-method-list {
    gap: .25em 1em;
}
.custom-gallery {
    width: 86vw;
    max-width: 400px;
}

/* faq */
.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) {
    .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;
    }
    /* points */
    .points-h2-main {
        font-size: 2em;
    }
    .points-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 600px) and (max-width: 1019.9px) {
    /* points */
    .points-h3 {height: 3em;}
}

@media (min-width: 992px) {
    /* lineup */
    .lineup-table-container {
        grid-template-columns: 1fr 1fr;
    }
    .lineup .accordion-content {max-height: none;}
    .lineup .accordion-content:before,
    .lineup .accordion-toggle-button {display: none;}
    /* guide / cases */
    .guide-container, .cases-container {
        grid-template-columns: repeat(3, 1fr);
    }
    /* cases */
    .cases-card a {min-height: 5em;}
}

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

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

@media (max-width: 370px) {
    /* shipping */
    .shipping-times > div {
        grid-template-columns: 1fr;
    }
    .shipping-times > div > dt:before {
        clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
        top: 100%;
        left: 0;
        width: 100%;
        height: 1em;
    }
    /* 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;
    }
}