@charset "utf-8";
/*---------------------------------------------------------------------
Tablet Style
tb.css
-----------------------------------------------------------------------
Copyright 2025 (c) linkpath Allrights Reserved.
Created: linkpath
Coding: Hinako Hayashi
Last Update: 2025.06.12
---------------------------------------------------------------------*/
/*@media screen and (max-width: 959px) and (min-width: 481px) {*/
@media screen and (max-width: 959px) {
/*===========================================================
    common
===========================================================*/

/*===========================================================
    font-size
===========================================================*/
.section-title {
    font-size: 300%;
}
.brand-item div h3 {
    font-size: 170%;
}
.info-content h2 {
    font-size: 160%;
}
.article-view__first p,
.product-price {
    font-size: 140%;
}
.product-name,
.news-title,
.column-slide h3 {
    font-size: 110%;
}
.brand-item div span {
    font-size: 100%;
}

/*===========================================================
    article-view
===========================================================*/
/* article-view__first */

/*===========================================================
    product-section
===========================================================*/
/* section-title */

/* product-slider */
.product-slider {
    width: 100vw;
    width: 100svw;
    margin-left: calc(((100vw - 100%) / 2) * -1);
    margin-left: calc(((100svw - 100%) / 2) * -1);
}

/*===========================================================
    news-section
===========================================================*/
.news-section {
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
}
/* news-section__title */
.news-section__title {
    position: static;
}
.news-section .section-title {
    margin: 0 auto;
}
.news-section__title p {
    white-space: wrap;
}


/* news-content */
.news-content {
    min-width: 100%;
    padding-right: 0;
}
.news-item {
    padding: 0 1em;
    padding-bottom: 2em;
}
.news-section .link-btn {
    position: static;
    margin: 0 auto;
    margin-top: 2em;
}

/* link-btn */

/*===========================================================
    brand-section
===========================================================*/
.brand-section {
    flex-direction: column;
    align-items: center;
}
/* section-title */
.brand-section__title {
    position: static;
}
.brand-section__title p {
    white-space: wrap;
}

/* brand-content */
.brand-content {
    max-width: 600px;
}

/* link-btn */
.brand-section .link-btn {
    margin: 0 auto;
    margin-top: 3em;
}

/*===========================================================
    flow-section
===========================================================*/
/* section-title */

/* flow-content */
.flow-content {
    max-width: 500px;
    gap: 2em;
}
.flow-item {
    width: 100%;
    flex-direction: row;
}
.flow-item {
    margin: 0;
    margin-right: -0.5em;
}
.flow-item dt {
    margin-bottom: 0;
    margin-top: -0.5em;
}
.flow-item dt::before {
    width: 350%;
    top: auto;
    bottom: -175%;
    right: 50%;
    transform: translateX(50%) rotate(90deg);

}
.flow-item dd {
    width: calc(100% - 6em);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}
.flow-item dd img {
    width: 100%;
    aspect-ratio: 4 / 3;
}
.flow-item dd span {
    margin: 0;
}

/* link-btn */


/*===========================================================
    column-section
===========================================================*/
.column-section {
    flex-direction: column;
    padding-bottom: 0;
}
/* column-section__title */
.column-section__title {
    padding-left: 0;
    margin: 0 auto;
}

/* section-title */

/* column-slider */
.column-slider {
    margin-left: 5%;
}

/* link-btn */
.column-section .link-btn {
    position: static;
    margin: 0 auto;
    margin-top: 2em;
}

/*===========================================================
    info-section
===========================================================*/

/* info-content */
.info-content {
    max-width: 600px;
    width: 100%;
}

/* link-btn */

/*===========================================================
    img-box
===========================================================*/

}