@charset "UTF-8";
/* reset styles */
html,body,h1,h2,h3,p,ul,li,dl,dt,dd,table,th,td,header,nav,main,aside,section,footer,div {margin:0;padding:0;}
ul,ol{list-style:none;}
table {border-collapse: collapse;border-spacing: 0;}
a{text-decoration:none;}


/* font setting */
.tabotenzu-jp {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
}
.tabotenzu-jp-w500 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1px;
}
.tabotenzu-jp-w600 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 1px;
}
.tabotenzu-jp-w700 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 1px;
}
.tabotenzu-jp-bold {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 1px;
}
.tabotenzu-menu {
  font-family: "Marcellus", serif;
  font-weight: 400;
  font-style: normal;
}
.tabotenzu-en {
  font-family: "Staatliches", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* color setting */

:root{
    --tb-red:#D24916;
    --tb-green:#00663D;
    --tb-orange:#D89514;
    --tb-blue:#156694;
    --tb-grey:#D9D9D9;
}

.color-grn {
    color: var(--tb-green);
}
.color-orange {
    color: var(--tb-orange);
}
.color-red {
    color: var(--tb-red);
}
.color-blue {
    color: var(--tb-blue);
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
    color: #000;
}
footer{position: relative;z-index: 1;}
img {
    width: 100%;
    max-width: 100%
}
p,ol {
    margin: 0;
}
span.fs-small {
    font-size: smaller;
}
a {
    text-decoration: none;
    color: inherit;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
.dis-pc, #contents .dis-pc {
    display: block;
}
.dis-sp, #contents .dis-sp {
    display: none;
}
@media screen and (max-width: 768px) {
    .dis-pc, #contents .dis-pc {
        display: none;
    }
    .dis-sp, #contents .dis-sp {
        display: block;
    }
}
br.sp {
    display: none;
}
br.pc {
    display: inline;
}
@media screen and (max-width: 768px) {
	br.sp {
	    display: inline;
	}
	br.pc {
	    display: none;
	}
}
a.btn {
    max-width: 300px;
    width: 60%;
    display: block;
    margin: 20px auto;
    transition: all .3s;
}
a.btn:hover {
    transform: scale(0.97);
    opacity: 0.6;
}
.bk-blue {
    background-color: #156694;
}
.bk-orange {
    background-color: #D24916;
}

#contents {
    letter-spacing: 1px;
    line-height: 2.2;
}

/* detail page styles */

#contents a {
    color:var(--tb-red);
    text-underline-offset: 8px;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
#contents.color-red a {
    color:var(--tb-green);
}
#contents p{
    margin-bottom: 20px;
}
#contents .text-note {
    font-size: 0.8em;
}

/* header and nav  */


#headerNav {
  display: none;
  opacity: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 999;
}
#headerNav .container {
    height: 100%;
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-around;
    overflow-y: scroll;
}

#headerNav .menu-mainsec,#headerNav .menu-subsec {
    width: 100%;
    padding: 10px 80px 0 100px;
}

#headerNav .menu-mainsec {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    padding-top: 40px;
    width: 100%;
    justify-content: space-between;
}


#headerNav .menu-flbox {
    display: flex;
    padding-top: 10px;
    position: relative;
    justify-content: space-between;
    align-items: center;
}

.tabotenzu-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 20px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    margin: 0;
}

.tabotenzu-headermenu-nav {
    background-color: #D9D9D9;
    padding: 120px 0 50px;
    width: 100%;
    overflow-y: scroll;
}
.tabotenzu-headermenu-nav .menu-flbox .menu-item-wrap {
    display: flex;
    height: fit-content;
    align-items:center;
}
.tabotenzu-headermenu-nav .menu-flbox .menu-item-wrap.menu-item-wrapB {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 650px;
    width: 100%;
}
.tabotenzu-headermenu-nav .menu-flbox .menu-item-wrap.menu-item-wrapB li {
    margin-left: 2em;
    line-height: 2.4;
    letter-spacing: 2.2px;
}
/*
.menu-item.menu-item-insta {
    border: 1px solid #000;
    padding: 12px 30px;
    width: fit-content;
    border-radius: 20px;
    color: #000;
    margin:0 0 0 10px;
}
.menu-item.menu-item-insta a {
    display: inline-flex;
    animation: center;
    gap: 6px;
    align-items: center;
    line-height: 1;
}
*/
.menu-item.menu-item-insta a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../img/common/icon_instagram.svg);
    margin-right: 6px;
}

.tabotenzu-headermenu-nav .menu-saboillust {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}
.tabotenzu-headermenu-nav .menu-saboillust img {
    width: 96%;
    max-width: 720px;
}
#headerNav .menu-item-wrap.menu-item-wrapA {
    font-size: 52px;
    margin-bottom: 40px;
}
#headerNav .menu-item-wrapA .menu-item {
    line-height: 2;
}
footer .menu-item-wrapB .menu-item {
    line-height: 2;
    letter-spacing: 2.2px;
}
footer .menu-flbox {
    margin-top: 40px;
    overflow: hidden;
}
footer .menu-item-wrap {
    padding: 0 60px 0 0;
    margin: 0;
}
footer .menu-item.menu-item-contact a {
    margin: 1em 0 1.5em;
    width: 100%;
}

footer .menu-item-wrap.menu-item-wrapA {
    font-size: 30px;
}
footer .menu-item-wrapA .menu-item {
    line-height: 2;
}
footer .menu-btnlink .menu-item-insta a {
    width: 220px;
    margin: 0 auto 0 10px;
}

footer .menu-item-insta.menu-btnlink {
    margin-bottom: 20px;
    letter-spacing: 2.2px;
    width: 100%;
}

@media screen and (max-width: 768px) {

    .tabotenzu-header {
        padding: 20px 12px 0;
    }

    #headerNav .menu-mainsec,#headerNav .menu-subsec {padding:0 10px;flex-wrap: wrap;justify-content: center;}

    #headerNav .menu-item-wrap.menu-item-wrapA {
        font-size: 44px;
        width: 100%;
        padding: 0;
    }
    #headerNav .menu-item-wrap.menu-item-wrapA li {
        font-size: 44px;
    }
    .tabotenzu-headermenu-nav .menu-item-wrap.menu-item-wrapA {
        text-align: center;
    }
    .tabotenzu-headermenu-nav .menu-flbox .menu-item-wrap.menu-item-wrapB {
        flex-direction: column;
        text-align: center;
        width: 100%;
        padding: 20px 0;
    }

    .tabotenzu-headermenu-nav .menu-item.menu-item-insta {
        margin: 0 auto;
    }

    .tabotenzu-headermenu-nav .menu-item.menu-item-contact {
        width: 100%;
    }

    .tabotenzu-headermenu-nav .menu-item.menu-item-contact a {
        width: 94%;
    }

    .tabotenzu-headermenu-nav  .menu-item-wrap.menu-item-wrapC {
        display: flex;
        align-content: space-between;
        justify-content: center;
        padding: 0;
    }
    .tabotenzu-headermenu-nav .menu-saboillust {
        width: 100%;
        margin: 0 auto;
        flex: auto;
    }

    .tabotenzu-headermenu-nav .menu-flbox .menu-item-wrap.menu-item-wrapB li {
        margin-left: 0;
        line-height: 3;
    }
    #headerNav .menu-flbox {
        padding-top: 30px;
    }
    footer .menu-item-insta.menu-btnlink {
        padding: 0;
        height: 40px;
    }
    footer .menu-btnlink .menu-item.menu-item-title {
        font-size: .8em;
        margin-right: 10px;
    }
    footer .menu-item.menu-item-insta {
        width: 200px;
        flex: none;
    }
    footer .menu-btnlink .menu-item-insta a {
        margin: 0;
    }
    footer .menu-item-wrap.menu-item-wrapA {
        margin-bottom: 40px;
    }
    footer .menu-item-wrap.menu-item-wrapB {
/*        margin-bottom: 140px;*/
        margin-bottom: 200px;
    }
    .ft-logo {
        position: absolute;
        right: 0;
        bottom: 0;
        transform: rotate(270deg) translate(600px, 0);
        transform-origin: bottom right;
        width: 600px;
        display: flex;
    }
}


/* wrapC buttons */

#headerNav .menu-item-wrapC {
    max-width: 460px;
    width: 92%;
}

#headerNav .menu-item-wrapC .menu-item {
    width: 50%;
    margin: 0;
    padding: 0;
}

.menu-btnlink .menu-item a {
    width: 90%;
    display: flex;
    margin: 0 auto;
    padding: 8px 0;
    color: #000;
    border-radius: 20px;
    line-height: 1.5;
    text-align: center;
    align-items: center;
    justify-content: center;
    letter-spacing: 2.2px;
}

.menu-btnlink .menu-item-insta a {
    background-color: transparent;
    border: 1px solid #000;
}

.menu-btnlink .menu-item-contact a {
    color: #d9d9d9;
    background-color: #000;
}



.menu-wrap {
    background-color: #D9D9D9;
    padding: 40px 50px 4px;
}
.menu-item-insta {
    display: flex;
    width: 90%;
    align-items: center;
    flex: 1;
}
.menu-item-insta img {
    max-width: 40%;
    width: 180px;
    padding-left: 1em;
}
.menu-line {
    border-top: 1px solid #000;
}
.menu-flbox {
    display: flex;
    padding-top: 10px;
    position: relative;
}
.menu-item {
    list-style: none;
}

/*
.menu-item.menu-item-contact a {
    border: 1px solid #000;
    padding: 8px 30px;
    width: 100%;
    border-radius: 20px;
    background-color: #000;
    color: #D9D9D9;
    margin: 0 0 0 10px;
    text-align: center;
    display: inline-block;
    line-height: 1.5;
}
*/

@media screen and (max-width: 768px) {

    #headerNav .menu-item-wrapC {
        max-width: 100%;
        width: 100%;
    }

    .menu-wrap {
        padding: 20px 0 20px 30px;
    }
    .menu-flbox {
        flex-direction: column;
    }
    .menu-item-wrapA .menu-item {
        line-height: 1.9;
    }
    .menu-item-wrapB .menu-item {
        line-height: 3;
        letter-spacing: 0.2em;
    }
    .menu-item.menu-item-contact {
        width: 200px;
        text-align: center;
        letter-spacing: 0.25em;
        line-height: 2;
    }
    footer .menu-item-wrapB .menu-item {
        line-height: 3;
    }

}

footer .pagetop {
/*    position: fixed;
    bottom: 120px;*/
    right: 50px;
    display: block;
    width: 240px;
    height: 240px;
    z-index: 990;
    transition: none;
}
footer .pagetop-wrap {
    position: absolute;
    top: 0;
    right:0;
    transition: none;
}
footer .pagetop-wrap .pagetop {
  position: static;
  top: auto;
  bottom: auto;
}

.circle-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes etator {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.circle-wrap .circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: rotate 10s linear infinite;
}
.circle-wrap .saboillust {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,  -50%);
    width: 70%;
    height: 70%;
}

@media screen and (max-width: 768px) {
    footer .pagetop {
        width: 100px;
        height: 100px;
        right: 20px;
    }
    footer .pagetop-wrap {
        right:20px;
    }
}


.tabo-logo {
    padding-top: 4px;
}
.tabo-logo img {
    height: 15px;
}
.tabo-logo a span {
    content: '';
    display: block;
    width: 156px;
    height: 19px;
    position: relative;
    mask-image: url(../img/common/header_logo.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: #000;
    font-size:0;
}

.tabo-hammenu-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.tabo-hammenu-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 42px;
/*    border: 2px solid #fff;*/
    border-radius: 20px;
    padding: 10px 0;
    box-sizing: border-box;
    background-color: #000;
}
.tabo-hammenu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 14px;
}
.tabo-hammenu span {
    display: block;
    height: 1px;
    background-color: #fff;
    border-radius: 2px;
    transition: all .5s;
    transform: none;
}
.tabo-hammenu span#menulineMid {
  transition: all 1s;
}
.hammenu-txt {
    margin-top: 5px;
    font-size: 16px;
    color: #000;
    font-weight: 600;
}
.-open #hamBtn #menulineTop {
    transform: rotate(210deg) translate(-2px,-6px);
}
.-open #hamBtn #menulineBtm {
    transform: rotate(330deg) translate(2.8px,-5px);
}
.-open #hamBtn #menulineMid {
    opacity:0;
}

@media screen and (max-width: 768px) {
    .tabo-logo a span {
        width: 128px;
    }
    .tabo-hammenu-wrap {
        width: 70px;
        height: 28px;
        padding: 8px 0;
    }
    .-open #hamBtn #menulineTop {
        transform: rotate(210deg) translate(-2px,-5px);
    }
    .-open #hamBtn #menulineBtm {
        transform: rotate(330deg) translate(2.8px,-5px);
    }
    .hammenu-txt {
        font-size: 13px;
    }
}

.ex-link::after {
    content: '';
    display: inline-block;
    background: url(../img/common/icon_exlink.svg) no-repeat;
    background-size: 10px 10px;
    width: 10px;
    height: 10px;
    margin-left: 4px;
}
.newlogo {
    position: relative;
    display: inline-block;
}
.newlogo::after {
    content: "";
    position: absolute;
    top: -25px;
    right: -30px;
    width: 50px;
    height: 50px;
    background: url(../img/common/new_icon01.png) no-repeat center / contain;
}
.copyright {
    font-size: 12px;
    margin: 20px 0 50px;
}


.tabo-breadcrumbs ol {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 0.5rem;
}
.tabo-breadcrumbs li::after {
    content: ">";
    margin-left: 0.5rem;
}
.tabo-breadcrumbs li:last-child::after {
    content: "";
}
.tabo-breadcrumbs {
    background: #00663D;
    padding: 10px 30px;
    color: #000;
}

#contents .tabo-breadcrumbs a {
    color: #000;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    .tabo-breadcrumbs ol {
        justify-content: center;
        display: block;
        text-align: center;
    }
    .tabo-breadcrumbs ol li {
        display: inline;
    }
    .copyright {
        margin-bottom: 20px;
    }
}



/* page common parts */

#contents .content-header {
    padding: 10px 0;
}

#contents .content-header .pgttl-wrap {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
    padding: 200px 0 50px 20px;
    justify-content: space-between;
}

#contents .content-header .pgttl-item {
    font-size: 5rem;
}

#contents .content-header .title.title-img img {
    height: 100px;
    width: auto;
}
#contents .content-header .title {
    font-size: 8rem;
    line-height: 100%;
    letter-spacing: 4.49px;
}

#contents .tabo-breadcrumbs a {
    text-decoration: none;
    color: #000;
}


@media screen and (max-width: 768px) {
    #contents .content-header .pgttl-wrap {
        padding: 130px 0 50px;
        justify-content: center;
    }
    #contents .content-header .title.title-img img {
        height: 48px;
        width: auto;
        margin: 0 auto;
        display: block;
    }
    #contents .content-header .title {
        font-size: 5rem;
    }
}


/*---PRODUCTS---*/
.products-wrap {
    margin: 0;
}
.products-wrap .title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    width: 90%;
    margin: 10px auto 50px;
    justify-content: space-between;
}
.products-wrap .products-logo {
    width: 450px;
    max-width: 50%;
    margin: 0.5em 0 0;
    letter-spacing: 4px;
    display: block;
}
.products-wrap .title.title-com {
    margin: 0;
    width: 40%;
    max-width: 500px;
    flex:1;
}
.products-wrap .title-com-A {
    font-size: 21px;
    margin: 0 auto 20px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0;
    line-height: 150%;
}
.products-wrap .title-com-B {
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
}
.products-item-wrap {
    display: flex;
    width: 100%;
    height: 100svh;
    overflow: hidden;
    position: relative;
    align-items: stretch;
}
.products-item.item-content {
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 50px;
    box-sizing: border-box;
    position: sticky;
    top:0;
    height: 100%;
    justify-content: flex-start;
}
.products-item.item-image {
    flex: 7;
    height: inherit;
    overflow: hidden;
}

#products-item99 .products-item.item-image {
    height: 100%;
}

.products-item.productslide {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}
.products-item-wrap .productslide-item {
    height: inherit;
    overflow: hidden;
    position: absolute;
    top:0;
    left: 0;
    pointer-events: none;
    display: block;
    width: 100%;
}

.products-item-wrap .productslide-item.-buffer{height: 50svh;background-color: transparent; pointer-events:none; visibility: hidden;}

.dis-sp .products-item-wrap .productslide-item:first-child {
    position: relative;
}

.products-item-wrap .productslide-item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.products-item-wrap .products-comment p {
    line-height: 1.7;
    font-weight: 600;
    font-size: 14px;
}
#products-item99 .products-item-wrap .products-comment p {
    font-size: 16px;
}
.products-item-wrap .name-typeA {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.products-item-wrap .name-tybeB {
    font-size: 48px;
    line-height: 1.0;
    letter-spacing: 0.06em;
}
#products-item99 .products-item-wrap .name-tybeB {
    font-size: 80px;
    letter-spacing: 1.33px;
}
.products-item-wrap .newlogo::after {
    width: 82px;
    height: 82px;
    top: -80px;
}
.products-item-wrap img.products-illust {
    max-width: 300px;
    width: 80%;
    margin: 0 auto;
}
#products-item99 .products-item.item-image span {
    width: 100%;
    display: block;
    height: 100%;
    background: url(../img/products_image99.svg) center / cover no-repeat;
}
#products .section-footer {
    background-color: #000;
    padding: 16px 0;
    margin: 0;
}

#products-item99 .products-item.item-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    position: relative;
    box-sizing: border-box;
    top: 0;
    height: 100%;
    flex-wrap: nowrap;
}

.products-item.item-content .item-content-text {
    padding-top: 94px;
}

#products-item99 .products-item-wrap .name-tybeB {
    margin: 14px 0;
}

.item-content-img {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex: 1;
    padding-top: 10px;
}

@media screen and (min-width: 769px) {

    .title-com-A span.fs-small {
        font-size: inherit;
    }

    #products-item99 .products-item-wrap {
        min-height: 500px;
    }

    #products-item99 .products-name {
        flex: 2;
    }

    #products-item99 .products-item-wrap .products-comment {
        flex: 2;
    }
    #products-item99 .products-item-wrap img.products-illust {
        flex: 0;
    }
}

@media screen and (max-width: 768px) {

    .products-wrap .products-logo {
      width: 66%;
      max-width: 450px;
      text-align: center;
      margin: 50px auto 0;
    }
    .products-wrap .title-wrap {
      flex-direction: column;
      margin-bottom: 60px;
    }
    .products-wrap .title.title-com {
        width: 90%;
        text-align: center;
        margin: 0 auto;
    }
    .products-item-wrap {
        flex-direction: column;
        height: auto;
    }
    .item-image-anim img {
        transform: unset;position: relative;left: 0;width: 100%;
    }
    .products-item.item-content {
        padding: 50px 0 0;
        line-height: 1.8;
    }
    .products-name {
        text-align: center;
        padding-bottom: 30px;
    }
    .products-item-wrap .name-tybeB {
        font-size: 36px;
        padding: 0 10%;
    }

    .products-about {
        font-size: 40px;
        margin: 0 auto;
    }
    #products-item99 .products-item-wrap {
        display: block;
    }
    #products-item99 .products-item.item-image span {
        height: 100vw;
        transform: translateY(0) scale(1.01);
    }
    #products-item99 .dis-sp .products-item-wrap .name-typeA {
        margin-bottom: 10px;
    }
    #products-item99 .products-item-wrap .name-tybeB {
        letter-spacing: -0.02em;
        font-size: 3em;
        padding: 0;
    }
    #products-item99 .products-item-wrap img.products-illust {
        width: 50%;
        margin-top: 40px;
    }

    .products-comment {
        margin: 0 auto;
        width: 80%;
        font-size: 1em;
    }
    .pgttl-item {
    font-size: 4rem;
    margin: 0 auto;
    width: fit-content;
    }
    .pgttl-wrap {
        padding: 5em 0 3em;
    }
    #products-item99 .products-item.item-content {
        position: relative;
        margin-top: -1px;

    }
    .products-item-wrap .newlogo::after{
        right: 0;
    }
    #products .section-footer {
        padding: 3px 0;
    }
}


@media screen and (max-height: 840px) and (min-width: 769px){
/*
.products-item-wrap .name-tybeB {
    font-size:4rem;
    font-size: calc(5rem * 100svh / 840px);
}
*/
.products-item-wrap img.products-illust {
    max-width:calc(300px * 100svh / 840px)
}

/*
.products-item-wrap .products-comment {
    font-size: .9rem;
    line-height: 1.8;
}
*/
#products-item99 .products-item.item-image span {
     width: calc(100% + 100vh / 8);
}   
}

/*--animation--*/
.saboanimation {
    margin: 50px 0;
}
.saboanimation-wrap {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.saboanimation-track {
    display: inline-flex;
    gap: 0;
    align-items: center;
    will-change: transform;
}
.saboanimation-track > img {
    height: 100%;
    width: auto;
    flex: 0 0 auto;
    display: block;
}
.saboanimation-left .saboanimation-track {
    animation: scroll-left  30s linear infinite;
}
.saboanimation-right .saboanimation-track {
    animation: scroll-right 30s linear infinite;
}
.saboanimation-wrap:hover .saboanimation-track {
  /*  animation-play-state: paused; */
}
@keyframes scroll-left  { 
    from {transform: translateX(0);}
    to { transform: translateX(-100%); } 
}
@keyframes scroll-right { 
    from { transform: translateX(-100%); } 
    to { transform: translateX(0); } 
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}
.weare .saboanimation-track > img {
    margin-right: 2em;
}
.saboanimation.weare {
    margin-bottom: 0px;
}
@media screen and (max-width: 768px) {
  .saboanimation-track {
    width: 200%;
  }
  .saboanimation.weare {
      margin-top: 0;
  }
}

/* toggle animation */
.tb-toggle-item {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease-out;
}
.tb-toggle.-open .tb-toggle-item {
  max-height: 200svh;
  transition-duration: 1s;
  transition-delay: .3s;

}


/*カテゴリーフィルタ*/
.category-filter {
    padding-left: 80px;
}
.category-filter-btn {
    border: 1px solid #000;
    width: 160px;
    height: 34.5px;
    color: #000;
    border-radius: 75px;
    gap: 15px;
    padding-top: 4.5px;
    padding-right: 31.5px;
    padding-bottom: 4.5px;
    padding-left: 31.5px;
    background-color: #fff;
    font-size: 22.5px;
    letter-spacing: 2px;
}
.filter-btn--active {
    color: #fff;
    background-color: #000;
}
@media screen and (max-width: 768px) {
    .category-filter {
        padding: 0 20px;
        text-align: center;
    }
    .category-filter-btn {
        width: 30%;
        height: 30px;
        padding: 0 20px;
        font-size: 18px;
        margin-right: 3px;
    }
}

/*ページネーション*/
.pagination-wrap {
    margin: 100px 0 200px;
}
.pagination-cont {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 8px;
    padding: 0;
}
.pagination-item {
    display: block;
    padding: 8px 30px;
    color: #000;
    font-size: 2rem;
    letter-spacing: 2.5px;
}
#contents .pagination-item a {
    color: #000;
    text-decoration: none;
}
#contents .pagination-item.pagination-active a {
    border-bottom: 3px solid;
}
@media screen and (max-width: 768px) {
    .pagination-wrap {
        margin: 40px 0 60px;
    }
    .pagination-item {
        padding: 8px 10px;
        font-size: 1.5rem;
    }
    .pagination-item img {
        width: 80%;
    }
}