@charset "UTF-8";
/* CSS Document */


h4,
h4 span {
    font-size: clamp(1.125rem, 0.904rem + 0.46vw, 1.25rem);
    font-weight: bold;
}

h5,
h5 span {
    font-size: clamp(1rem, 0.779rem + 0.46vw, 1.125rem);
    font-weight: bold;
}

.sauna_lead {
    margin-top: 70px;
    text-align: center;
}

.sauna_lead h3,
.sauna_lead h3 span,
.sauna_lead h4,
.sauna_lead h4 span,
.sauna_lead p {
    color: #334E5D;
}

.sauna_lead h3::before {
    display: none;
}

.sauna_lead p {
    padding-top: 2rem;
    line-height: 2;
}

.sauna_lead>div {
    padding-top: 70px;
    font-weight: bold;
}

/* ====================================
    tinyサウナ、3つのポイント
==================================== */
.sauna_lead-point {
    padding-bottom: 70px;
}

.point_list {
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
}

.point_list-item {
    width: 29%;
    color: #fff;
    background-color: #334E5D;
    padding: 1rem;
}

.point_list-item:first-of-type h5 {
    letter-spacing: -0.5px;
}


.point_list-item h5 {
    font-weight: bold;
    color: #fff;
    padding: 1rem 0;
    border-bottom: 1px solid #fff;
}

.point_list-item h5 span {
    color: #fff;
}

.point_list-item p {
    padding-top: 1rem;
}

.point_list-item p span {
    color: #fff;
}

/* ====================================
    tinyサウナ、特徴 class="feature"
==================================== */
.feature {
    background-color: #334E5D;
    text-align: center;
}

.feature h3 {
    color: #fff;
    padding-top: 50px;
}

.feature_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 50px;
}

.feature_item h4,
.feature_item h4 span,
.feature_item p {
    color: #fff;
}

.feature_item {
    width: 50%;
}

.feature_item h4 {
    font-size: 18px;
}

.feature_item p {
    line-height: 2;
}

.feature_item p:first-of-type,
.feature_img {
    padding-top: 50px;
}

.feature_item p:not(:first-of-type) {
    padding-top: 1rem;
}

.feature_img {
    display: flex;
    justify-content: space-around;
}

.feature_img img {
    width: 30%;
}


/* ====================================
    tiny sauna 文字ループ
==================================== */

.loop-wrap {
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 100px;
    padding-top: 30px;
}

.loop-area {
    display: flex;
    animation: loop-slide 30s infinite linear 1s both;
    list-style: none;
    margin: 0;
    padding: 0;
}

.loop-area .content {
    width: 500px;
    padding-right: 2rem;
}

@keyframes loop-slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}


/* ====================================
    商品詳細
==================================== */
.details {
    padding-top: 70px;
}

.details h3 {
    color: #334E5D;
    text-align: center;
}

.details_sauna,
.details_stove {
    display: flex;
    justify-content: space-between;
}

.details_item {
    width: 48%;
}

.details_item h4 {
    border-bottom: 2px solid #333;
}

.details_item h4 small {
    color: #333;
    padding: 0 0.5rem;
}

.details_item table {
    width: 100%;
    border-collapse: collapse;
    line-height: 2;
}

.details_item table tr {
    border-bottom: 0.5px solid #333;
}

.details_item table tr th {
    width: 25%;
    padding: 0.5rem 0 0.5rem 1rem;
}

.details_item table tr td {
    width: 70%;
}

.details_sauna img,
.details_stove img {
    width: 50%;
    height: auto;
    object-fit: contain;
}

.details_stove {
    padding-top: 70px;
}

.details_sauna {
    padding-top: 50px;
}

.details_sauna .details_item table ul {
    list-style-type: disc;
}


/* ====================================
    tiny sauna 画像ループ
==================================== */

.loop-wrap2 {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 30px;
}

.loop-area2 {
    display: flex;
    animation: loop-slide2 25s infinite linear 1s both;
    list-style: none;
    margin: 0;
    padding: 0;
}


.loop-area2 .content {
    width: calc(100vw / 5);
    padding-right: 10px;
}

.loop-area2 .conten img {
    width: 100%;
}


@keyframes loop-slide2 {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}


/* ====================================
    価格について
==================================== */
.price {
    padding: 100px 0;
}

.price_ttl {
    text-align: center;
}

.price_ttl h3 {
    color: #334E5D;
    padding-bottom: 30px;
}

.price_bgc {
    background-color: #334E5D;
    text-align: center;
    margin-top: 30px;
    padding-bottom: 100px;
}

.price_item p,
.price_item table caption,
.price_item table tr th,
.price_item table tr td {
    color: #fff;
}

.price_item p {
    font-size: clamp(2rem, 0.007rem + 4.16vw, 3.125rem);
    font-weight: 900;
    padding: 50px 0 30px;
}

.price_item table {
    border-collapse: collapse;
    width: 50%;
    margin: 0 auto;
    font-size: 18px;
}

.price_item table caption,
.price_item table tr {
    border-bottom: 1px solid #fff;
}

.price_item table tr th {
    padding: 1rem 0 0.5rem 1rem;
}

.price_item table tr td {
    text-align: right;
    padding-right: 1rem;
}

.price_img {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: -50px;
}

.price_img-small {
    width: 50%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.price_img-small img {
    object-fit: cover;
}

.price_main-img {
    position: absolute;
    right: 0;
}

/* ====================================
    お問合せボタン
==================================== */
.contact_btn {
    text-align: center;
    padding-bottom: 70px;
}

.contact_btn a {
    text-decoration: none;
}

.contact_btn img {
    height: 80px;
    background-color: #334E5D;
    padding: 10px 40px;
    border-radius: 100px 100px 0 0;
    margin-bottom: -45px;
}

.contact_btn p {
    font-weight: 900;
    font-size: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem);
    background-color: #334E5D;
    padding: 2.5rem 0 1.2rem;
    letter-spacing: 2px;
}

.contact_btn p span {
    color: #fff;
}

/* ====================================
    footer上画像
==================================== */

.sauna_bottom {
    width: 100%;
    display: flex;
}

.sauna_bottom img {
    width: calc(100vw / 3);
}



/*===============================================
●tablet.css 画面の横幅が991pxまで
===============================================*/
@media screen and (max-width: 991px) {

    .point_list {
        flex-direction: column;
        padding-top: 1rem;
    }

    .point_list-item {
        width: 90%;
        margin: 0 auto;
        padding: 1rem 2rem 2rem;
    }

    .point_list-item:not(:first-of-type) {
        margin-top: 15px;
    }


    .feature_box {
        flex-direction: column;
        align-items: center;
        padding-top: 30px;
    }

    .feature_item {
        width: 100%;
        padding-top: 30px;
    }

    .feature_item p:first-of-type {
        padding-top: 15px;
    }

    /* ====================================
    詳細
==================================== */

    .details_sauna,
    .details_stove {
        flex-direction: column;
    }

    .details_item {
        width: 100%;
    }

    .details_stove>img {
        order: 2;
    }

    .details_stove .details_item {
        order: 1;
    }

    .details_item table tr:last-of-type {
        border-bottom: none;
    }

    .details_sauna img,
    .details_stove img {
        width: 90%;
        margin: 0 auto;
    }

    /* 流れる画像サイズ */
    .loop-area2 .content {
        width: calc(100vw / 3);
    }

    /* 価格 */
    .price_item table {
        width: 80%;
    }

    .price_bgc {
        padding-bottom: 220px;
    }

    .price_img {
        flex-direction: column;
        align-items: center;
        margin-top: -200px;
    }

    .price_img-small {
        width: 80%;
        padding-top: 10px;
        order: 2;
    }

    .price_main-img {
        position: static;
        order: 1;
    }

    /* お問合せボタン */
    .contact_btn p {
        letter-spacing: 0;
    }
}

/*===============================================
●smart.css  画面の横幅が576pxまで
===============================================*/
@media screen and (max-width: 576px) {
    .point_list-item {
        padding: 1rem;
    }

    .details_item table tr th {
        width: 30%;
        padding-left: 0;
    }

    .details_sauna img,
    .details_stove img {
        width: 100%;
    }

    /* 流れる画像サイズ */
    .loop-area2 .content {
        width: calc(100vw / 2);
    }


    /* 価格 */

    .price {
        padding: 70px 0;
    }

    .price_item table {
        width: 90%;
    }

    .price_item table tr th,
    .price_item table tr td {
        display: block;
        text-align: center;
    }

    .price_item table tr th {
        padding: 1rem 0 0;
    }

    .price_item table tr td {
        padding: 0.5rem 0;
        font-weight: bold;
    }

    .price_img-small {
        width: 100%;
    }

    .sauna_bottom {
        flex-direction: column;
        display: none;
    }

}