@charset "utf-8";

/*=====================================
*
*header
*
=======================================*/
header {
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    background-color: var(--main-color);
}

header .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1490px;
    margin: auto;
}

header .wrapper .logo {
    width: 180px;
}

@media screen and (max-width:1500px) {
    header .wrapper {
        padding: 0 3%;
    }
}

header .wrapper .menu-area {
    width: calc((880 / 1490) * 100%);
    margin-left: calc((50 / 1490) * 100%);
    margin-right: calc((34 / 1490) * 100%);
}

header .wrapper .menu-area ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 clamp(14px, 1.21vw, 29px);
}

header .wrapper .menu-area ul li {
    position: relative;
    white-space: nowrap;
}

header .wrapper .menu-area ul li::after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%) scale(0, 1);
    left: 50%;
    bottom: -9px;
    max-width: 61.5px;
    min-width: 20px;
    width: 50%;
    height: 2px;
    border-radius: 5px;
    background-color: #fff;
    transition: 0.25s ease-in-out;
}

@media (any-hover:hover) {
    header .wrapper .menu-area ul li:hover::after {
        transform: translate(-50%, -50%) scale(1, 1);
    }
}

header .wrapper .menu-area ul li a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #fff;
}

@media screen and (max-width:1300px) {
    header .wrapper .menu-area ul li a {
        font-size: 12px;
    }
}

header .wrapper .btn-area {
    width: calc((320 / 1490) * 100%);
}

header .wrapper .btn-wrapper {
    display: flex;
    justify-content: space-between;
}

header .wrapper .btn-area .header-btn {
    width: calc((155 / 320) * 100%);
    height: 45px;
    border-radius: 50px;
}

@media screen and (max-width:1100px) {
    header .wrapper .btn-area {
        width: calc((370 / 1490) * 100%);
    }
}

header .wrapper .btn-area .header-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: clamp(13px, 0.94vw, 18px);
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 0 10px;
    border-radius: 50px;
    transition: 0.3s ease-in-out;
}

header .wrapper .btn-area .header-btn1 {
    background-color: var(--deco-color);
}

header .wrapper .btn-area .header-btn1 a {
    border: 1px solid var(--deco-color);
    color: #fff;
}

@media (any-hover:hover) {
    header .wrapper .btn-area .header-btn1 a:hover {
        color: var(--deco-color);
        background: #fff;
    }
}

header .wrapper .btn-area .header-btn2 {
    background-color: #fff;

}

header .wrapper .btn-area .header-btn2 a {
    border: 1px solid #fff;
    color: var(--main-color);
}

@media (any-hover:hover) {
    header .wrapper .btn-area .header-btn2 a:hover {
        color: #fff;
        background-color: var(--main-color);
    }
}

/*tb*/
@media screen and (max-width:1024px) {

    header .wrapper .logo {
        max-width: 220px;
    }

    header .wrapper .menu-area {
        width: calc((723 / 1460) * 100%);
    }

    header .wrapper .btn-area {
        width: calc((425 / 1460) * 100%);
    }

}

/*sp*/
@media screen and (max-width:899px) {
    header {
        display: flex;
        align-items: center;
        width: 100%;
        height: 65px;
        padding: 0;
    }

    header .wrapper {
        width: 100%;
    }

    header .wrapper .logo {
        width: 35%;
    }

    header .wrapper .btn-area .header-btn2 a {
        border: 1px solid var(--main-color);
    }

    header .wrapper .sp_btn-area .inner {
        display: flex;
        align-items: center;
        gap: 25px;
    }

    header .wrapper .sp-cta {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    header .wrapper .sp-cta .cont {
        text-align: center;
    }

    header .wrapper .sp-cta .cont:first-of-type i {
        color: var(--deco-color);
    }

    header .wrapper .sp-cta .cont:last-of-type i {
        color: #fff;
    }

    header .wrapper .sp-cta .cont i {
        display: block;
    }

    header .wrapper .sp-cta .cont p {
        font-size: 12px;
        color: #fff;
    }
}

/*=====================================
*
ハンバーガーメニュー
*
=======================================*/
@media screen and (max-width:899px) {
    header .sp-bg {
        position: fixed;
        z-index: 9997;
        top: 65px;
        left: 0;
        width: 100%;
        height: calc(100vh - 65px);
        background-color: #333;
        transition: 0.3s ease-in-out;
        opacity: 0;
        pointer-events: none;
    }

    header .sp-bg.open {
        pointer-events: auto;
        opacity: 0.55;
    }

    header .wrapper .menu-area {
        position: fixed;
        z-index: 9998;
        top: 65px;
        right: calc(-55vw - 22px);
        width: 55vw;
        height: calc(100vh - 65px);
        margin-right: 0;
        padding: 50px;
        background-color: #fff;
        transition: 0.45s ease-in-out;
    }

    header .wrapper .menu-area.open {
        right: 0;
    }

    header .wrapper .menu-area ul {
        display: block;
    }

    header .wrapper .menu-area ul li+li {
        margin-top: 20px;
    }

    header .wrapper .menu-area ul li a {
        font-size: 17px;
        color: var(--main-color);
    }

    header .wrapper .btn-wrapper {
        display: block;
    }

    header .wrapper .btn-area {
        width: 100%;
        margin-top: 30px;
    }

    header .wrapper .btn-area .header-btn {
        width: 200px;
        height: 45px;
    }

    header .wrapper .btn-area .header-btn2 {
        margin-top: 20px;
    }

    header .wrapper .btn-area .header-btn a {
        font-size: 16px;
    }

    header .wrapper .ham-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 18px;
    }

    header .wrapper .ham-btn span {
        position: relative;
        display: inline-block;
        width: 23px;
        height: 2px;
        background-color: #fff;
        transition: 0.3s ease-in-out;
    }

    header .wrapper .ham-btn.open span:nth-of-type(1) {
        transform: rotate(45deg);
        top: 9px;
    }

    header .wrapper .ham-btn.open span:nth-of-type(2) {
        opacity: 0;
    }

    header .wrapper .ham-btn.open span:nth-of-type(3) {
        transform: rotate(-45deg);
        top: -7px;
    }

    header .wrapper .ham-btn span::after {
        top: 0;
    }

    header .wrapper .ham-btn span::before {
        bottom: 0;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    header .wrapper .menu-area {
        width: 80vw;
        padding-right: 0;
    }

    header .wrapper .menu-area {
        right: calc(-80vw - 22px);
    }

    header .wrapper .menu-area ul li a {
        font-size: 15px;
    }
}


/*=====================================
*
*mv
*
=======================================*/
.mv-area {
    display: flex;
    justify-content: space-between;
    width: calc((1715 / 1920)* 100%);
    margin-top: 88px;
    margin-left: auto;
}

@media screen and (min-width:2000px) {
    .mv-area {
        max-width: 1920px;
        margin: 88px auto 0;
    }
}

@media screen and (max-width:1300px) {
    .mv-area {
        width: calc((1810 / 1920)* 100%);
    }
}

.mv-area .text-area {
    width: calc((520 / 1715) * 100%);
    padding-top: 70px;
}

@media screen and (max-width:1300px) {
    .mv-area .text-area {
        padding-top: 35px;
    }
}

.mv-area .text-area .mv-logo {
    width: calc((279 / 474) * 100%);
}

.mv-area .text-area h1 {
    font-size: clamp(25px, 2.08vw, 40px);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-top: calc((22.5 / 40) * 1.0em);
}

@media screen and (max-width:1300px) {
    .mv-area .text-area h1 {
        font-size: 22px;
    }
}

.mv-area .text-area h1 span {
    position: relative;
    z-index: 1;
}

.mv-area .text-area h1 span::after {
    content: "";
    position: absolute;
    z-index: -1;
    transform: translate(-50%) skewX(-30deg);
    left: 58%;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, transparent 0% 80%, var(--deco-color) 80% 92%, transparent 92% 100%);
}


.mv-area .text-area h1 span:nth-of-type(1):after {
    left: 54%;
    padding: 0 8px 0 0px;
}

.mv-area .text-area h1 span:nth-of-type(2):after {
    left: 51%;
    width: 95%;
    padding: 0 8px 0 0px;
}

.mv-area .text-area p.sub-text {
    font-size: clamp(14px, 1.04vw, 20px);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-top: calc((28 / 20) * 1.0em);
    margin-bottom: calc((40 / 20) * 1.0em);
}

.mv-area .text-area .mvBtn-area {
    width: fit-content;
}

.mv-area .text-area .mvBtn-area a.mv-btn {
    display: flex;
    font-size: clamp(16px, 1.15vw, 22px);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--main-color);
    width: fit-content;
    padding: calc((9.5 / 22) * 1.0em) calc((28 / 22) * 1.0em);
    background-color: #fff;
    border: 1px solid var(--main-color);
    border-radius: 50px;
    transition: 0.3s ease-in-out;
}

@media (any-hover:hover) {
    .mv-area .text-area .mvBtn-area a.mv-btn:hover {
        color: #fff;
        background-color: var(--main-color);
    }
}

.mv-area .text-area .mvBtn-area a.text-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    font-size: clamp(14px, 0.94vw, 18px);
    font-weight: 500;
    color: #333;
    letter-spacing: 0.05em;
    margin: calc((5.5 / 18) * 1.0em) auto 0;
}

.mv-area .text-area .mvBtn-area a.text-btn::after {
    content: "";
    position: absolute;
    left: -3px;
    bottom: 0;
    transform-origin: right;
    transform: scale(1, 1);
    width: calc(100% + 6px);
    height: 1px;
    background-color: #333;
    transition: 0.45s ease-in-out;
}

@media (any-hover:hover) {
    .mv-area .text-area .mvBtn-area a.text-btn:hover::after {
        transform: scale(0, 1);
    }
}

.mv-area .img-area {
    width: calc((1209 / 1691) * 100%);
    clip-path: polygon(calc((170 / 1691) * 100%) 0, 100% 0, 100% 100%, 0 100%);
}

/*tb*/
@media screen and (max-width:1024px) {
    .mv-area {
        margin-top: 85px;
    }

    .mv-area .text-area h1 {
        font-size: 20px;
    }

    .mv-area .text-area p.sub-text {
        font-size: 11px;
        margin-top: calc((20 / 20) * 1.0em);
        margin-bottom: calc((25 / 20) * 1.0em);
    }

    .mv-area .text-area .mvBtn-area a.mv-btn {
        font-size: clamp(15px, 1.15vw, 22px);
    }

    .mv-area .text-area .mvBtn-area a.text-btn {
        font-size: 12px;
    }
}

/*tb*/
@media screen and (max-width:899px) {
    .mv-area {
        margin-top: 65px;
        width: 98%;
    }

    .mv-area .text-area {
        width: 34%;
        padding-top: 20px;
    }

    .mv-area .img-area {
        width: 67%;
    }
}

/*sp*/
@media screen and (max-width:767px) {
    .mv-area {
        display: block;
        width: 96%;
        margin: 65px auto 0;
    }

    .mv-area .text-area h1 {
        font-size: min(8.0vw, 30px);
    }

    .mv-area .text-area {
        width: 100%;
    }

    .mv-area .text-area p.sub-text {
        font-size: 16px;
    }

    .mv-area .img-area {
        width: 100%;
        margin-top: 25px;
        clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
    }
}

/*=====================================
*
*about
*
=======================================*/
article.about-sec {
    padding-top: 120px;
}

article.about-sec .cont-area .img-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

article.about-sec .img-area {
    width: calc((497 / 1260) * 100%);
}

article.about-sec .text-area {
    width: calc((730 / 1260) * 100%);
}

article.about-sec .text-area p {
    font-size: clamp(16px, 0.94vw, 18px);
    font-weight: 500;
    letter-spacing: 0.05em;
}

/*tb*/
@media screen and (max-width:899px) {
    article.about-sec .cont-area .img-text {
        display: block;
    }

    article.about-sec .img-area {
        width: 100%;
        text-align: center;
    }

    article.about-sec .text-area {
        width: 100%;
        margin-top: 20px;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    article.about-sec {
        padding-top: 90px;
    }
}

/*ポイント*/
.point-area .wrapper {
    display: grid;
    column-gap: calc((52 / 1260) * 100%);
    grid-template-columns: calc((364/ 1260) * 100%) calc((428/ 1260) * 100%) calc((364/ 1260) * 100%);
    grid-template-rows: calc((27 / 428) * 100%) calc((83 / 428) * 100%) calc((99 / 428) * 100%) calc((113 / 428) * 100%) calc((106 / 428) * 100%);
    margin-top: 80px;
    aspect-ratio: 1260 / 428;
}

.point-area .point-text {
    position: relative;
    z-index: 2;
    height: fit-content;
    background-color: #fff;
    border: 1px solid #36807f;
    border-radius: 3px;
    margin-top: 10px;
}

.point-area .point-text .text {
    position: relative;
    z-index: 2;
    font-size: clamp(16px, 0.94vw, 18px);
    background-color: #fff;
    padding: calc((6.5 / 18) * 1.0em) 10px calc((6.5 / 18) * 1.0em);
    border-radius: 0 0 3px 3px;
}

.point-area .point-text h3 {
    font-size: 1.0em;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--main-color);
    margin-bottom: calc((6 / 18) * 1.0em);
}

.point-area .point-text p {
    font-size: calc((14 / 18) * 1.0em);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.point-area .point-text:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

.point-area .point-text:nth-of-type(2) {
    grid-column: 3;
    grid-row: 1;
}

.point-area .point-text:nth-of-type(3) {
    grid-column: 1;
    grid-row: 4;
}

.point-area .point-text:nth-of-type(4) {
    grid-column: 3;
    grid-row: 4;
}

.point-area .point-text .num {
    width: fit-content;
    font-size: clamp(12px, 14px, 0.73vw);
    font-family: var(--font-family-deco);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    margin-top: calc((0.5em + ((5 / 14) * 1.0em)) * -1.0);
    margin-left: 10px;
    padding: calc((2.5 / 14) * 1.0em) calc((25 / 14) * 1.0em);
    background-color: #36807f;
    border-radius: 50px;
}

.point-area .point-text .point-line {
    position: absolute;
    z-index: 1;
    width: calc((155 / 364) * 100%);
    height: auto;
    aspect-ratio: 155 / 75;
}

.point-area .point-text:nth-of-type(odd) .point-line {
    right: calc((((155 / 364) * 100%) * -1.0) + 5px);
}

.point-area .point-text:nth-of-type(even) .point-line {
    left: calc((((155 / 364) * 100%) * -1.0) + 5px);
}

.point-area .point-text:nth-of-type(1) .point-line {
    top: 55%;
}


.point-area .point-text:nth-of-type(2) .point-line {
    top: 45%;
}

.point-area .point-text:nth-of-type(3) .point-line {
    top: 40%;
}

.point-area .point-text:last-of-type .point-line {
    top: initial;
    bottom: 48%;
}

.point-area img {
    grid-column: 2 / 3;
    grid-row: 2;
}

/*tb*/
@media screen and (max-width:1024px) {
    .point-area .point-text:nth-of-type(3) .point-line {
        top: 10px;
    }

    .point-area .point-text:last-of-type .point-line {
        top: -20px;
        bottom: initial;
    }

}

@media screen and (max-width:899px) {
    .point-area .point-text:nth-of-type(1) .point-line {
        top: 20px;
    }

    .point-area .point-text:nth-of-type(2) .point-line {
        top: 20px;
    }
}

/*sp*/
@media screen and (max-width:767px) {
    .point-area {
        overflow-x: scroll;
    }

    .point-area .wrapper {
        width: 200%;
    }

}

@media screen and (min-width:599px) and (max-width:767px) {
    .point-area .wrapper {
        width: 150%;
    }

    .point-area .point-text:nth-of-type(1) .point-line {
        top: 25px;
    }

    .point-area .point-text:nth-of-type(2) .point-line {
        top: 25px;
    }
}

/*=====================================
*
*カテゴリー
*
=======================================*/
.category-sec {
    margin-top: 120px;
}

.category-sec .cont-area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc((28 / 1260) * 100%);
}

.category-sec .cont-area a {
    position: relative;
    display: block;
    transition: 0.3s ease-in-out;
    overflow: hidden;
}

.category-sec .cont-area a img {
    transition: 0.45s ease-in-out;
}

@media (any-hover:hover) {
    .category-sec .cont-area a:hover {
        opacity: 0.75;
    }

    .category-sec .cont-area a:hover img {
        transform: scale(1.1);
    }
}

.category-sec .cont-area a p.cate-text {
    position: absolute;
    left: 0;
    bottom: 0;
    min-width: 162px;
    font-size: clamp(16px, 1.04vw, 20px);
    font-family: var(--font-family-deco);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    text-align: center;
    padding: calc((5 / 20) * 1.0em) calc((25 / 20) * 1.0em);
    border-top-right-radius: 6px;
}

.category-sec .cont-area a p.cate-text span {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 6px;
    height: 12px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: #fff;
}


.category-sec .cont-area a p.cate-text.green {
    background-color: var(--main-color);
}

.category-sec .cont-area a p.cate-text.yellow {
    background-color: var(--deco-color);
}

.category-sec .cont-area a p.cate-text.blue {
    background-color: #3a56b7;
}

/*sp*/
@media screen and (max-width:599px) {
    .category-sec {
        margin-top: 90px;
    }

    .category-sec .cont-area {
        grid-template-columns: repeat(1, 1fr);
        gap: 25px;
    }

    .category-sec .cont-area .cate-cont {
        width: fit-content;
        margin: auto;
    }

    .category-sec .cont-area .cate-cont a {
        aspect-ratio: 2 / 1;
    }
}

/*=====================================
*
*商品紹介
*
=======================================*/
.product-sec {
    margin-top: 120px;
    margin-bottom: 100px;
}

.product-sec .img-area {
    margin-bottom: 95px;
}

/*tb*/
@media screen and (max-width:767px) {
    .product-sec .img-area {
        overflow-x: scroll;
    }

    .product-sec .img-area img {
        width: 200%;
        max-width: initial;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    .product-sec {
        margin-top: 90px;
        margin-bottom: 90px;
    }
}

/*=====================================
*
*価格
*
=======================================*/
.price-sec{

}
.price-sec p{
    text-align: center;
    line-height: 1.8;
}
.price-sec .price_text{
    text-align: center;
    margin: 10px auto;
    font-size: 20px;
    font-weight: 600;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: underline;
}

/*=====================================
*
*お客様の声
*
=======================================*/
.voice-sec {
    margin-top: 120px;
}

.voice-sec .voice-list {
    margin-bottom: 50px;
}

.voice-sec .voice-list li {
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 0px 9px 0px rgba(85, 85, 85, 0.18);
}

.voice-sec .voice-list li+li {
    margin-top: 18px;
}

.voice-sec .voice-list li .img-area {
    width: calc((365 / 1260) * 100%);
}

.voice-sec .voice-list li .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.voice-sec .voice-list li .text-area {
    width: calc((862 / 1260) * 100%);
    padding: 20px 20px 20px 0;
}

.voice-sec .voice-list li .text-area h3 {
    font-size: clamp(15px, 1.04vw, 20px);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--main-color);
}

.voice-sec .voice-list li .text-area p.age {
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: clamp(16px, 0.94vw, 18px);
    color: #00c9aa;
    margin: calc((10.5 / 18) * 1.0em) auto calc((7.5 / 18) * 1.0em);
}

.voice-sec .voice-list li .text-area p:not(.age) {
    font-size: clamp(14px, 0.83vw, 16px);
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.8;
}

/*tb*/
@media screen and (max-width:767px) {
    .voice-sec .voice-list li {
        display: block;
    }

    .voice-sec .voice-list li .img-area {
        width: 100%;
    }

    .voice-sec .voice-list li .text-area {
        width: 100%;
        padding: 20px;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    .voice-sec {
        margin-top: 80px;
    }
}

/*=====================================
*
*お知らせ
*
=======================================*/
.news-sec {
    margin-top: 120px;
}

.news-sec ul.news-list {
    margin-bottom: 50px;
    padding: 35px 35px;
    box-shadow: 0px 0px 9px 0px rgba(85, 85, 85, 0.18);
    border: 1px solid #45b1b0;
    border-radius: 8px;
    background-color: #fff;
}

.news-sec ul.news-list li a {
    display: flex;
    gap: 30px;
    font-size: clamp(14px, 0.83vw, 16px);
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 11px 35px 11px 5px;
    transition: 0.3s ease-in-out;
}

@media (any-hover:hover) {
    .news-sec ul.news-list li a:hover {
        opacity: 0.75;
    }
}

.news-sec ul.news-list li:not(:nth-of-type(2)) {
    padding-top: 0;
    padding-bottom: 0;
}

.news-sec ul.news-list li:nth-of-type(2) {
    border-top: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
}

.news-sec ul.news-list li a span {
    display: inline-block;
    color: var(--main-color);
}

.news-sec ul.news-list li a p {
    position: relative;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.news-sec ul.news-list li a .text {
    position: relative;
}

.news-sec ul.news-list li a .text img {
    position: absolute;
    top: 50%;
    right: -16px;
    transform: translateY(-50%);
}

/*sp*/
@media screen and (max-width:599px) {
    .news-sec {
        margin-top: 80px;
    }

    .news-sec ul.news-list {
        padding: 16px 20px;
        border-radius: 5px;
    }

    .news-sec ul.news-list li a {
        flex-wrap: wrap;
        gap: 0;
    }

    .news-sec ul.news-list li a .text {
        width: 100%;
    }

}

/*=====================================
*
*バナー作成
*
=======================================*/
.banner-sec {
    margin-top: 100px;
}

.banner-sec .img-area {
    display: grid;
    gap: calc((30 / 1260) * 100%);
    grid-template-columns: repeat(3, 1fr);
}

.banner-sec .img-area a {
    transition: 0.3s ease-in-out;
}

@media (any-hover: hover) {
    .banner-sec .img-area a:hover {
        opacity: 0.75;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    .banner-sec {
        margin-top: 65px;
    }

    .banner-sec .img-area {
        gap: 20px;
        grid-template-columns: repeat(1, 1fr);
    }

    .banner-sec .img-area a {
        text-align: center;
    }
}

/*=====================================
*
*CTA
*
=======================================*/
article.cta-sec {
    position: relative;
    padding: 60px 0 70px;
    background-image: url(img/cta/cta-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 120px;
}

article.cta-sec .cta-cont {
    width: 100%;
    text-align: center;
}

article.cta-sec .cta-cont .btn-cont {
    display: flex;
    justify-content: center;
    gap: calc((75 / 1920) * 100%);
    margin-top: clamp(15px, 1.56vw, 30px);
}

article.cta-sec .cta-cont .btn-cont .btn {
    text-align: center;
}

article.cta-sec .cta-cont .btn-cont .btn span {
    font-size: clamp(16px, 1.04vw, 20px);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #fff;
}

article.cta-sec .cta-cont .btn-cont .btn span.en {
    display: block;
    font-size: clamp(14px, 0.83vw, 16px);
}

article.cta-sec .cta-cont .btn-cont .btn p {
    display: block;
    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.05em;
    margin-top: calc((11.5 / 14) * 1.0em);
    margin-bottom: calc((6.5 / 14) * 1.0em);
}

article.cta-sec .cta-cont .btn-cont .btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 250px;
    height: 50px;
    font-size: clamp(15px, 1.04vw, 20px);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin: auto;
    padding: 0 1.0em;
    border-radius: 50px;
    transition: 0.3s ease-in-out;
}

article.cta-sec .cta-cont .btn-cont .btn1 a {
    color: #fff;
    border: solid 1px var(--main-color);
    background-color: var(--main-color);
}

@media (any-hover:hover) {
    article.cta-sec .cta-cont .btn-cont .btn1 a:hover {
        color: var(--main-color);
        background-color: #fff;
    }
}

article.cta-sec .cta-cont .btn-cont .btn2 a {
    color: var(--main-color);
    border: 1px solid var(--main-color);
    background-color: #fff;
}

@media (any-hover:hover) {
    article.cta-sec .cta-cont .btn-cont .btn2 a:hover {
        color: #fff;
        background-color: var(--main-color);
    }
}

article.cta-sec .cta-cont .btn-cont .btn3 a {
    color: #fff;
    border: 1px solid var(--deco-color);
    background-color: var(--deco-color);
}

@media (any-hover:hover) {
    article.cta-sec .cta-cont .btn-cont .btn3 a:hover {
        color: var(--deco-color);
        background-color: #fff;
    }
}

/*tb*/
@media screen and (max-width:899px) {
    article.cta-sec .cta-cont .btn-cont {
        display: block;
        text-align: center;
    }

    article.cta-sec .cta-cont .btn-cont .btn2 {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    article.cta-sec {
        margin-top: 80px;
        background-image: url(img/cta/sp_cta-bg.jpg);
    }

    article.cta-sec .cta-cont .btn-cont .btn a {
        width: 250px;
    }

    article.cta-sec .cta-cont .btn-cont .btn a {
        margin: auto;
    }
}


/*=====================================
*
*モーダル
*
=======================================*/
.popup {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 9999;
    background: #fff;
    min-width: 500px;
    min-height: 300px;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out;
}

.popup.open {
    pointer-events: auto;
    opacity: 1.0;
}

.popup .inner h2 {
    position: relative;
    font-size: clamp(18px, 1.15vw, 22px);
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
}

.popup .inner h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 3px;
    border-radius: 5px;
    background-color: var(--main-color);
}


.popup .inner .btn-area {
    display: flex;
    gap: 10px;
}

.popup-bg {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 9998;
    width: 100vw;
    height: 100vh;
    background-color: #333;
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
    transition: 0.3s ease-in-out;
}

.popup-bg.open {
    pointer-events: auto;
    opacity: 0.6;
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    cursor: pointer;
}

.popup-close span {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 23px;
    height: 3px;
    background-color: #555;
    border-radius: 5px;
}

.popup-close span:first-of-type {
    top: 50%;
    left: 50%;
}

.popup-close span:last-of-type {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}

/*sp*/
@media screen and (max-width:599px) {
    .popup {
        width: 95%;
        min-width: initial;
    }

    .popup .inner .btn-area {
        display: block;
    }

    .popup .inner .btn-area .btn+.btn {
        margin-top: 25px;
    }
}

/*=====================================
*
*footer
*
=======================================*/
footer {
    position: relative;
}

footer .wrapper {
    display: flex;
    justify-content: space-between;
    padding-top: 25px;
    padding-bottom: 60px;
}
footer .wrapper .left {
    text-align: center;
}

footer .wrapper .left .logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer .wrapper .left .logo a:first-child{
    margin-right: 20px;
}

footer .wrapper .left .logo img {
    max-width: 200px;
}

footer .wrapper .left .logo img:last-of-type {
    max-width: 150px;
    margin-top: 8px;
    margin-bottom: 20px;
}

footer .wrapper .left p {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.05em;
}

footer .wrapper .right ul {
    display: grid;
    column-gap: 50px;
    row-gap: 5px;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    font-size: 14px;
}

footer ul.menu-area li a {
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #333;
}

footer .copyright {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 7px 0;
    background-color: var(--main-color);
}

/*sp*/
@media screen and (max-width:599px) {
    footer .wrapper {
        flex-wrap: wrap;
    }

    footer .wrapper :is(.left, .right) {
        width: 100%;
    }

    footer .wrapper .right {
        margin-top: 15px;
    }

    footer .wrapper .right ul {
        font-size: 12px;
    }

    footer .wrapper .left p {
        font-size: 12px;
    }

    footer .wrapper p {
        font-size: 12px;
    }
}

.pagetop {
    cursor: pointer;
}

.pagetop-link {
    position: fixed;
    z-index: 9990;
    right: 20px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 75px;
    height: 75px;
    font-size: 1.4rem;
    font-weight: 600;
    color: #ffbe6a;
    border: solid 1px #ffbe6a;
    border-radius: 50%;
}

.pagetop-link span {
    display: block;
    width: 25px;
    height: 15px;
    clip-path: polygon(50% 0, 100% 100%, 0% 100%);
    background: #ffbe6a;
}

/*sp*/
@media screen and (max-width:599px) {
    .pagetop-link {
        right: 10px;
        bottom: 10px;
        transform-origin: right bottom;
        transform: scale(0.75);
    }
}

/*=====================================
*
*under
*
=======================================*/
/*=====================================
*下層header
=======================================*/
.under-header {
    position: relative;
    padding: 45px 0;
    margin-top: 88px;
    background-color: #d5f6e0;
    overflow: hidden;
}

@media screen and (min-width:2000px) {
    .under-header {
        max-width: 1920px;
        margin: 88px auto 0;
    }
}

.under-header .header-hd {
    position: relative;
    z-index: 2;
    font-size: 22px;
}

.under-header .header-hd span {
    position: relative;
    display: inline-block;
    font-family: var(--font-family-deco);
    font-size: calc((32 / 22) * 1.0em);
    font-weight: bold;
    color: var(--main-color);
    letter-spacing: 0.05em;
    padding-bottom: calc((9 / 32) * 1.0em);
    margin-bottom: calc((14.5 / 32) * 1.0em);
}

.under-header .header-hd span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 55px;
    height: 3px;
    background-color: var(--deco-color);
}

.under-header .header-hd h1 {
    font-size: 1.0em;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.05em;
}

.under-header img.deco {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 31px;
}

/*ボタンあり*/
.under-header.has-btn .mvBtn-area {
    position: relative;
    z-index: 2;
    text-align: center;
    width: fit-content;
    margin-top: 30px;
}

.under-header.has-btn img.logo {
    display: block;
    max-width: 176px;
    margin: 0 auto 10px;
}

.under-header.has-btn .mvBtn-area a.mv-btn {
    display: flex;
    justify-content: center;
    font-size: clamp(16px, 1.15vw, 22px);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--main-color);
    width: fit-content;
    min-width: 270px;
    padding: calc((9.5 / 22) * 1.0em) calc((28 / 22) * 1.0em);
    background-color: #fff;
    border: 1px solid var(--main-color);
    border-radius: 50px;
    transition: 0.3s ease-in-out;
}

@media (any-hover:hover) {
    .under-header.has-btn .mvBtn-area a.mv-btn:hover {
        color: #fff;
        background-color: var(--main-color);
    }
}


.under-header.has-btn .mvBtn-area a.text-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    font-size: clamp(14px, 0.94vw, 18px);
    font-weight: 500;
    color: #333;
    letter-spacing: 0.05em;
    margin: calc((5.5 / 18) * 1.0em) auto 0;
}

.under-header.has-btn .mvBtn-area a.text-btn::after {
    content: "";
    position: absolute;
    left: -3px;
    bottom: 0;
    transform-origin: right;
    transform: scale(1, 1);
    width: calc(100% + 6px);
    height: 1px;
    background-color: #333;
    transition: 0.45s ease-in-out;
}

@media (any-hover:hover) {
    .under-header.has-btn .mvBtn-area a.text-btn:hover::after {
        transform: scale(0, 1);
    }
}


/*tb*/
@media screen and (max-width:899px) {
    .under-header {
        margin-top: 65px;
    }

    .under-header img.deco {
        position: absolute;
        right: 0;
        top: 31px;
        scale: 0.65;
        transform-origin: right top;
    }

    .under-header.has-btn img.deco {
        top: initial;
        bottom: -30px;
        transform-origin: right bottom;
    }

    .under-header.has-btn .mvBtn-area a.mv-btn {
        font-size: clamp(15px, 1.15vw, 22px);
    }

    .under-header.has-btn .mvBtn-area a.text-btn {
        font-size: 12px;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    .under-header .header-hd {
        font-size: 20px;
    }

    .under-header .header-hd span {
        font-size: 20px;
    }

    .under-header .header-hd span::after {
        width: 50px;
    }

    .under-header.has-btn .mvBtn-area a.mv-btn {
        min-width: 230px;
    }
}

/*=====================================
*流れ
=======================================*/
.flow-sec {
    margin-top: 100px;
}

.flow-sec .flow-hd {
    text-align: center;
}

.flow-sec .flow-hd h2 {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--main-color);
}

.flow-sec .flow-hd h2 span.annotaiton {
    font-size: calc((17.5 / 30) * 1.0em);
}

.flow-sec .flow-hd h2 span.underline {
    background-image: linear-gradient(to bottom, transparent 80%, var(--deco-color) 80% 95%, transparent 95%);
}

.flow-sec .flow-hd .sub-text {
    font-size: 17.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--main-color);
    margin-top: calc((15 / 17.5) * 1.0em);
}

.flow-sec .flow-hd .btn {
    margin-top: 40px;
}

.flow-sec .cont-area {
    margin-top: 100px;
}
.flow-sec .cont-area iframe{
    margin: 60px auto 20px;
    display: block;
}

.flow-sec .cont-area ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flow-sec .cont-area ul li+li {
    margin-top: 60px;
}

.flow-sec .cont-area ul li .img-area {
    position: relative;
    width: calc((300 / 1260) * 100%);
}

.flow-sec .cont-area ul li .img-area span.arrow {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -25px;
    width: 57px;
    transform: translateX(-50%);
    height: 25px;
    background-color: #64efd9;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.flow-sec .cont-area ul li:nth-of-type(2) .img-area span.arrow {
    background-color: #3ed1ba;
}

.flow-sec .cont-area ul li:nth-of-type(3) .img-area span.arrow {
    background-color: #209695;
}

.flow-sec .cont-area ul li:nth-of-type(4) .img-area span.arrow {
    background-color: #005e5d;
}


.flow-sec .cont-area ul li .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid #64efd9;
    border-radius: 8px;
}

.flow-sec .cont-area ul li:nth-of-type(2) .img-area img {
    border: 3px solid #3ed1ba;
}

.flow-sec .cont-area ul li:nth-of-type(3) .img-area img {
    border: 3px solid #209695;
}

.flow-sec .cont-area ul li:nth-of-type(4) .img-area img {
    border: 3px solid #005e5d;
}

.flow-sec .cont-area ul li .img-area .sub {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    width: fit-content;
    height: 35px;
    margin: 0 auto -17.5px;
    padding: 0 calc((35 / 18) * 1.0em);
    border-radius: 50px;
    background-color: #64efd9;
}

.flow-sec .cont-area ul li:nth-of-type(2) .img-area .sub {
    background-color: #3ed1ba;
}

.flow-sec .cont-area ul li:nth-of-type(3) .img-area .sub {
    background-color: #209695;
}

.flow-sec .cont-area ul li:nth-of-type(4) .img-area .sub {
    background-color: #005e5d;
}

.flow-sec .cont-area ul li .img-area .sub.num {
    font-family: var(--font-family-deco);
}

.flow-sec .cont-area ul li .text-area {
    width: calc((930 / 1260) * 100%);
}

.flow-sec .cont-area ul li .text-area h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--main-color);
    margin-bottom: calc((14.5 / 22) * 1.0em);
}

.flow-sec .cont-area ul li .text-area h3::after {
    content: "";
    display: block;
    width: 80px;
    height: 1px;
    background-color: var(--deco-color);
}

.flow-sec .cont-area ul li .text-area p {
    font-size: 20px;
    font-weight: 500;
    color: #555;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 1024px) {
    .flow-sec .cont-area iframe {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 3 / 2;
        margin: 12px auto;
    }
}
/*tb*/
@media screen and (max-width:768px) {
    .flow-sec .cont-area ul li {
        flex-wrap: wrap;
    }

    .flow-sec .cont-area ul li .img-area {
        width: 100%;
    }

    .flow-sec .cont-area ul li .img-area span.arrow {
        display: none;
    }

    .flow-sec .cont-area ul li .text-area {
        width: 100%;
        margin-top: 20px;
    }

    .flow-sec .cont-area ul li+li {
        margin-top: 30px;
    }

}

/*sp*/
@media screen and (max-width:599px) {
    .flow-sec {
        margin-top: 80px;
    }

    .flow-sec .flow-hd h2 {
        font-size: 20px;
    }

    .flow-sec .flow-hd h2 span.annotaiton {
        font-size: 10px;
    }

    .flow-sec .flow-hd .sub-text {
        font-size: 10px;
        margin-top: 8px;
    }

    .flow-sec .flow-hd .btn {
        margin-top: 30px;
    }

    .flow-sec .cont-area {
        margin-top: 60px;
    }

    .flow-sec .cont-area ul li .text-area h3 {
        font-size: 18px;
    }

    .flow-sec .cont-area ul li .text-area p {
        font-size: 14px;
    }
}

/*=====================================
*フットバランスインソールについて
=======================================*/
.underAbout-sec {
    margin-top: 100px;
}

.underAbout-sec .img-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.underAbout-sec iframe{
    display: block;
    margin: 60px auto;
}

.underAbout-sec .img-text .text-area {
    width: calc((845 / 1260) * 100%);
}

.underAbout-sec .img-text .text-area .hd-area {
    font-weight: 600;
    font-size: clamp(16px, 0.94vw, 18px);
}

.underAbout-sec .img-text .text-area .hd-area span {
    font-size: calc((25 / 18) * 1.0em);
    font-family: var(--font-family-deco);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #00c9aa;
    opacity: 0.72;
}

.underAbout-sec .img-text .text-area .hd-area h2 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #333;
}

.underAbout-sec .img-text .text-area .hd-area h2::after {
    content: "";
    display: block;
    width: 130px;
    height: 1px;
    background-color: #00c9aa;
    opacity: 0.72;
}

.underAbout-sec .img-text .text-area p {
    font-size: clamp(16px, 0.94vw, 18px);
    font-weight: 500;
    line-height: 2.0;
    margin-top: calc((36.5 / 18) * 1.0em);
}

.underAbout-sec .img-text .img-area {
    width: calc((358 / 1260) * 100%);
}

.underAbout-sec .timeline {
    margin-top: 100px
}

.underAbout-sec .timeline h3 {
    font-size: clamp(18px, 1.15vw, 22px);
    font-weight: 600;
    color: var(--main-color);
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.underAbout-sec .timeline .cont {
    display: flex;
    align-items: center;
    column-gap: calc((112 / 1260) * 100%);
}

.underAbout-sec .timeline .cont ul {
    width: calc((814 / 1260) * 100%);
}

.underAbout-sec .timeline .cont ul li {
    position: relative;
    font-weight: 500;
    font-size: clamp(16px, 0.94vw, 18px);
    line-height: 2.0;
    letter-spacing: 0.05em;
    padding: calc((14.5 / 18) * 1.0em) 20px calc((14.5/ 18) * 1.0em) 36px;
    border-radius: 8px;
    background-color: #e3f9ea;
}

.underAbout-sec .timeline .cont ul li span {
    font-size: 12px;
}

.underAbout-sec .timeline .cont ul li span.annotation {
    display: block;
}

.underAbout-sec .timeline .cont ul li::before {
    position: absolute;
    left: calc(0.5em + 7px);
    content: "・";
}

.underAbout-sec .timeline .cont ul li a {
    display: block;
    font-weight: 500;
    color: var(--main-color);
    line-height: 1.0;
    letter-spacing: 0.05em;
    text-decoration: underline;
    margin-top: calc((42 / 18) * 1.0em);
}

.underAbout-sec .timeline .cont ul li+li {
    margin-top: 16px;
}

.underAbout-sec .timeline .cont img {
    width: calc((178 / 1260) * 100%);
}

@media screen and (max-width:1300px) {
    .underAbout-sec .timeline .cont img {
        min-width: fit-content;
    }
}

@media screen and (max-width: 1024px) {
    .underAbout-sec iframe {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 3 / 2;
        margin: 12px auto;
    }
}

@media screen and (max-width:767px) {
    .underAbout-sec .img-text {
        flex-wrap: wrap;
    }

    .underAbout-sec .img-text .text-area {
        width: 100%;
    }

    .underAbout-sec .img-text .img-area {
        width: 100%;
        margin-top: 25px;
        text-align: center;
    }

    .underAbout-sec .timeline {
        margin-top: 65px
    }

    .underAbout-sec .timeline .cont {
        flex-wrap: wrap;
    }

    .underAbout-sec .timeline .cont ul {
        width: 100%;
    }

    .underAbout-sec .timeline .cont ul li {
        font-size: 14px;
    }

    .underAbout-sec .timeline .cont img {
        margin: 25px auto 0;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    .underAbout-sec {
        margin-top: 90px;
    }

    .underAbout-sec .img-text .text-area .hd-area {
        font-size: 14px;
    }

    .underAbout-sec .img-text .text-area .hd-area h2::after {
        width: 100px;
        height: 1px;
    }

    .underAbout-sec .img-text .text-area p {
        font-size: 14px;
    }

    .underAbout-sec .timeline .cont ul li {
        font-size: 14px;
    }
}

/*=====================================
*仕組み
=======================================*/
article.structure-sec {
    padding-top: 120px;
}

article.structure-sec .read-cont p {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 35px;
}

article.structure-sec .read-cont p span {
    position: relative;
    color: #136664;
}

article.structure-sec .read-cont p span.line::after {
    content: "";
    position: absolute;
    z-index: -1;
    transform: translate(-50%) skewX(-30deg);
    left: 55%;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, transparent 0% 75%, var(--deco-color) 75% 92%, transparent 92% 100%);
}

article.structure-sec .read-cont .img-area {
    text-align: center;
}

/*sp*/
@media screen and (max-width:599px) {
    article.structure-sec {
        padding-top: 90px;
    }

    article.structure-sec .read-cont p {
        font-size: 14px;
    }

    article.structure-sec .read-cont p {
        font-size: 14px;
    }

    article.structure-sec .read-cont .img-area {
        overflow: scroll;
    }

    article.structure-sec .read-cont img {
        width: 500px;
        min-width: 100%;
        max-width: initial;
    }

}

/*=====================================
*メリット
=======================================*/
article.merit-sec {
    padding-top: 120px;
}

article.merit-sec .merit-cont {
    display: grid;
    gap: 60px;
    grid-template-columns: repeat(2, 1fr);
    padding-top: 22.5px;
}

article.merit-sec .read-cont {
    font-size: 18px;
    font-weight: 500;
    text-align: center;

}

article.merit-sec .read-cont img {
    width: 100%;
    max-width: 450px;
    margin: 0 auto 30px;
}

article.merit-sec .merit-cont .cont {
    position: relative;
    padding: 47px 30px 25px;
    border-radius: 12px;
    background-color: #f1fffd;
}

article.merit-sec .merit-cont .cont h3 {
    position: absolute;
    left: 50%;
    top: -22.5px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: fit-content;
    min-width: 132px;
    font-size: clamp(16px, 1.04vw, 20px);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fff;
    white-space: nowrap;
    padding: 0 30px;
    border-radius: 50px;
    background-color: #318180;
}

article.merit-sec .merit-cont .cont .img-area{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 250px;
    margin-bottom: 20px;
    border-radius: 3px;
    background-color: #fff;
}

article.merit-sec .merit-cont .cont .img-area img{
    max-height: 200px;
}

article.merit-sec .merit-cont .cont h4 {
    font-size: clamp(16px, 1.04vw, 20px);
    font-weight: 600;
    color: var(--main-color);
    letter-spacing: 0.05em;
    text-align: center;
    margin: calc((25 / 20) * 1.0em) auto calc((15 / 20) * 1.0em);
}

article.merit-sec .merit-cont .cont p {
    font-size: clamp(14px, 0.83vw, 16px);
    font-weight: 500;
    letter-spacing: 0.05em;
}

article.merit-sec .merit-cont .cont p span.annotation {
    display: flex;
    font-size: calc((14 / 16) * 1.0em);
    margin-top: calc((7.5 / 14) * 1.0em)
}

article.merit-sec .merit-cont .cont p span.annotation span {
    min-width: fit-content;
}

/*tb*/
@media screen and (max-width:1024px) {
    article.merit-sec .merit-cont {
        gap: 60px 35px;
    }

    article.merit-sec .merit-cont .cont {
        margin: auto;
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        gap: 0;
    }
}

@media screen and (max-width:767px) {
    article.merit-sec .merit-cont {
        grid-template-columns: 1fr;
    }

    article.merit-sec .merit-cont .cont img {
        display: flex;
        margin: auto;
    }

    article.merit-sec .merit-cont {
        gap: 40px;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    article.merit-sec {
        padding-top: 80px;
    }

    article.merit-sec .read-cont {
        font-size: 16px;
    }
}

/*=====================================
*エリア
=======================================*/
article.clinicBtn-area {
    padding-top: 100px;
}

article.clinicBtn-area .cont ul {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    column-gap: calc((20 / 1260) * 100%);
}

article.clinicBtn-area .cont ul li {
    position: relative;
}

article.clinicBtn-area .cont ul li img {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

article.clinicBtn-area .cont ul li img:last-of-type {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    opacity: 0;
    transition: clip-path 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

article.clinicBtn-area .cont ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: clamp(14px, 0.94vw, 18px);
    color: var(--main-color);
    padding: calc((4.5 / 18) * 1.0em) 0;
    border: solid var(--main-color) 1px;
    border-radius: 50px;
    background-color: #fff;
    transition: 0.3s ease-in-out
}

@media (any-hover:hover) {
    article.clinicBtn-area .cont ul li:hover a {
        color: #fff;
        background-color: var(--main-color);
    }

    article.clinicBtn-area .cont ul li:hover img:last-of-type {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1;
    }
}


@media screen and (max-width:1200px) {
    article.clinicBtn-area .cont ul li img {
        right: 10px;
    }
}

/*tb*/
@media screen and (max-width:1024px) {
    article.clinicBtn-area .cont ul {
        gap: 10px 20px;
        grid-template-columns: repeat(4, 1fr);
    }

    article.clinicBtn-area .cont ul li a {
        font-size: 16px;
    }

    article.clinicBtn-area .cont ul li img {
        right: 15px;
    }
}

/*sp*/
@media screen and (max-width:599px) {
    article.clinicBtn-area {
        padding-top: 80px;
    }

    article.clinicBtn-area .cont ul {
        gap: 10px 20px;
        grid-template-columns: repeat(2, 1fr);
    }

    article.clinicBtn-area .cont ul li a {
        padding: 8px 0;
    }

}

/*=====================================
*お取扱い院
=======================================*/
article.clinicList-sec {
    padding-top: 100px;
}

article.clinicList-sec .clinic-list+.clinic-list {
    margin-top: 65px;
}

article.clinicList-sec .clinic-list h3 {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: calc((16 / 16) * 1.0em);
}

article.clinicList-sec .clinic-list h3 span {
    display: block;
    width: 12px;
    height: 2px;
    background-color: var(--main-color);
    border-radius: 3px;
}

article.clinicList-sec .clinic-list > h4 {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top:40px;
    margin-bottom: calc((16 / 16) * 1.0em);
}

article.clinicList-sec .clinic-list > h4 span {
    display: block;
    width: 5px;
    height: 5px;
    background-color: var(--main-color);
    border-radius: 50%;
}

article.clinicList-sec .clinic-list .cont-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:0 calc((20 / 1260) * 100%);
}

article.clinicList-sec .clinic-list .list-cont {
    display: flex;
    justify-content: space-between
}

article.clinicList-sec .clinic-list .list-cont :is(h4,h5) {
    display: flex;
    align-items: center;
    width: calc((250 / 620) * 100%);
    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--main-color);
    padding: 15px 10px;
    border-top: solid 1px #c9c9c9;
}


article.clinicList-sec .clinic-list .list-cont .info {
    width: calc((365 / 620) * 100%);
    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 600;
    padding: 15px 10px;
    border-top: solid 1px #c9c9c9;
}

article.clinicList-sec .clinic-list .list-cont .info .btn-area {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

article.clinicList-sec .clinic-list .list-cont .info .btn-area .info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: clamp(12px, 0.73vw, 14px);
    letter-spacing: 0.05em;
    color: #fff;
    padding: calc((3.5 / 14) * 1.0em) 22px calc((3.5 / 14) * 1.0em) 12px;
    border-radius: 30px;
    border: solid var(--main-color) 1px;
    background-color: var(--main-color);
    transition: 0.3s ease-in-out;
}

article.clinicList-sec .clinic-list .list-cont .info .btn-area .info-btn i {
    position: relative;
    top: 1px;
    font-size: calc((10 / 14) * 1.0em);
    margin-right: 2px;
}

article.clinicList-sec .clinic-list .list-cont .info .btn-area .info-btn i.fa-location-dot {
    top: 2px;
    font-size: calc((12 / 14) * 1.0em);
}

article.clinicList-sec .clinic-list .list-cont .info .btn-area .info-btn img {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 6px;
}

article.clinicList-sec .clinic-list .list-cont .info .btn-area .info-btn img:last-of-type {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    opacity: 0;
    transition: clip-path 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

@media (any-hover:hover) {
    article.clinicList-sec .clinic-list .list-cont .info .btn-area .info-btn:hover img:last-of-type {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 1.0;
    }

    article.clinicList-sec .clinic-list .list-cont .info .btn-area .info-btn:hover {
        color: var(--main-color);
        background-color: #fff;
    }
}

article.clinicList-sec .clinic-list .list-cont:nth-last-child(-n+2) :is(h4, h5,.info) {
    border-bottom: solid 1px #c9c9c9;
}

@media screen and (max-width:1100px) {
    article.clinicList-sec .clinic-list .list-cont :is(h4,h5) {
        width: calc((230 / 620) * 100%);
    }

    article.clinicList-sec .clinic-list .list-cont .info {
        width: calc((385 / 620) * 100%);
    }
}

/*tb*/
@media screen and (max-width:1024px) {
    article.clinicList-sec .clinic-list .list-cont .info .btn-area {
        display: block;
    }

    article.clinicList-sec .clinic-list .list-cont .info .btn-area .info-btn {
        width: fit-content;
    }

    article.clinicList-sec .clinic-list .list-cont .info .btn-area .info-btn+.info-btn {
        margin-top: 7px;
    }
}

/*sp*/
@media screen and (max-width:767px) {
    article.clinicList-sec .clinic-list .cont-area {
        grid-template-columns: repeat(1, 1fr);
        gap: 0;
    }

    article.clinicList-sec .clinic-list .list-cont:nth-last-child(2) :is(h4, h5,.info) {
        border-bottom: 0;
    }
}

@media screen and (max-width:599px) {
    article.clinicList-sec {
        padding-top: 80px;
    }
}

/*=====================================
*カテゴリー詳細
=======================================*/
.cate-header {
    margin-top: 88px;
    /* background-color: #d5f6e0; */
}

@media screen and (min-width:2000px) {
    .cate-header {
        max-width: 1920px;
        margin: 88px auto 0;
    }
}

.cate-header .inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cate-header .inner .hd-area {
    width: calc((610 / 1920) * 100%);
    font-size: 35px;
}

.cate-header .inner .hd-area span {
    position: relative;
    display: inline-block;
    font-family: var(--font-family-deco);
    font-size: 1.0em;
    font-weight: bold;
    color: var(--main-color);
    letter-spacing: 0.05em;
}

.cate-header .inner .hd-area h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: calc((25 / 35) * 1.0em);
    font-weight: bold;
    letter-spacing: 0.05em;
}

.cate-header .inner .hd-area h1::after {
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    background-color: var(--deco-color);
}

.cate-header .inner .img-area {
    position: relative;
    width: calc((980 / 1920) * 100%);
}

.cate-header .inner .img-area::after {
    content: "";
    left: -15px;
    bottom: -15px;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: var(--deco-color2);
    clip-path: polygon(8% 0, 95% 0, 95% 100%, 0 100%);
    opacity: 0.25;
}

.cate-header .inner .img-area img {
    position: relative;
    z-index: 2;
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

@media screen and (max-width:1300px) {
    .cate-header .inner .hd-area {
        width: 35%;
    }

    .cate-header .inner .img-area {
        width: 62%;
    }

    .cate-header .inner .hd-area {
        font-size: clamp(25px, 2.73vw, 28px)
    }
}

@media screen and (max-width:899px) {
    .cate-header {
        margin-top: 65px;
    }
}

/*sp*/
@media screen and (max-width:767px) {
    .cate-header .inner {
        flex-wrap: wrap;
    }

    .cate-header .inner .hd-area {
        width: 100%;
        margin: 20px auto 20px;
        padding-left: 5%;
    }

    .cate-header .inner .img-area {
        width: 95%;
    }
}

.category-cont {
    margin-top: 100px;
}

.category-cont+.category-cont {
    margin-top: 55px;
}

.category-cont .cont-area h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--main-color);
    letter-spacing: 0.05em;
    margin-bottom: 25px;
    padding-left: 10px;
    border-left: 5px solid var(--main-color);
}

.category-cont .cont-area .cont {
    margin-top: 35px;
}
/* .category-cont .cont-area .cont+.cont {
    margin-top: 35px;
} */

.category-cont .cont-area .cont :is(p, li) {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.8;
}

.category-cont .cont-area .cont h3 {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: calc((16 / 16) * 1.0em);
}

.category-cont .cont-area .cont h3 span:not(.question) {
    display: block;
    width: 12px;
    height: 2px;
    background-color: var(--main-color);
    border-radius: 3px;
}

.category-cont .cont-area .cont :is(ul, ol) li+li {
    margin-top: 10px;
}

.category-cont .cont-area .cont ul li {
    position: relative;
    padding-left: 1.0em;
}

.category-cont .cont-area .cont ul li::before {
    content: "・";
    position: absolute;
    left: 0;
}

.category-cont .cont-area .cont ol {
    padding-left: 1.0em;
}

.category-cont .cont-area .cont ol li {
    list-style: decimal;
}

.category-cont .cont-area .cont .text-box {
    border-radius: 5px;
    padding: 10px 15px;
    border: solid 1px var(--main-color);
    background-color: #eafffc;
}

/*=====================================
*利用者の声
=======================================*/
.voice-sec .voice-list.under {
    margin-top: -20px;
}

.voice-sec .voice-list.under li {
    box-shadow: none;
    margin: 0;
    padding-bottom: 40px;
}

.voice-sec .voice-list.under li+li {
    padding-top: 40px;
    border-top: 1px solid #c9c9c9;
}

/*sp*/
@media screen and (max-width:767px) {
    .voice-sec .voice-list.under li {
        padding-bottom: 25px;
    }

    .voice-sec .voice-list.under li+li {
        padding-top: 25px;
    }

    .voice-sec .voice-list li .text-area {
        padding: 15px 0 0;
    }
}

@media screen and (max-width:599px) {
    .voice-sec .voice-list.under {
        margin-top: 0;
    }
}


/*=====================================
*記事一覧
=======================================*/
.article-sec {
    margin-top: 100px;
}

.article-sec ul.article-list {
    display: none;
}

.article-sec ul.article-list.active {
    display: block;
}

.article-sec ul.article-list li a {
    position: relative;
    display: block;
    padding: 20px 15px;
    padding-right: 35px;
    border-top: 1px solid #c9c9c9;
    transition: 0.3s ease-in-out;
}

@media (any-hover:hover) {
    .article-sec ul.article-list li a:hover {
        opacity: 0.75;
    }
}

.article-sec ul.article-list li:last-of-type {
    border-bottom: 1px solid #c9c9c9;
}

.article-sec ul.article-list li a h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--main-color);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.article-sec ul.article-list li a p {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.article-sec ul.article-list li a img {
    position: absolute;
    right: 5px;
    top: 50%;
    max-width: 13px;
}

.article-sec ul.article-list li .data {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.article-sec ul.article-list li .data .day {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #333;
    margin-right: 10px;
}

.article-sec ul.article-list li .data .cate {
    font-weight: 600;
    color: #fff;
    padding: 3px 10px;
    border-radius: 3px;
    background-color: var(--main-color);
}

.article-sec ul.article-list li .data .cate.blog {
    background-color: var(--deco-color);
}

@media screen and (max-width:599px) {
    .article-sec {
        margin-top: 80px;
    }

    .article-sec ul.article-list li .data .day {
        font-size: 16px;
    }

    .article-sec ul.article-list li .data .cate {
        font-size: 14px;
    }

    .article-sec ul.article-list li a h3 {
        font-size: 16px;
    }

    .article-sec ul.article-list li a img {
        max-width: 10px;
    }
}

/*ページネーション*/
.pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.pagination ul li.current {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-weight: 600;
    color: #fff;
    border-radius: 50%;
    background-color: var(--main-color);
}

.pagination ul li {
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
}

/*=====================================
*ブログ詳細
=======================================*/
.blog-cont {
    max-width: 1100px;
    margin: auto;
    margin-top: 135px;
    padding-bottom: 30px;
    border-bottom: solid 1px #c9c9c9;
}

@media screen and (max-width:1200px) {
    .blog-cont {
        padding: 0 3%;
    }
}

.blog-cont .article-header h1 {
    position: relative;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.8;
    color: #333;
    padding: 0 5px 5px;
    border-bottom: solid 1px #c9c9c9;
}

.blog-cont .article-header h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 125px;
    height: 1px;
    background-color: var(--main-color);
}

.blog-cont .article-header .data {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.blog-cont .article-header .data .day {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #333;
    margin-right: 10px;
}

.blog-cont .article-header .data .cate {
    font-weight: 600;
    color: #fff;
    padding: 3px 10px;
    border-radius: 3px;
    background-color: var(--main-color);
}

.blog-cont .article-header .data .cate.blog {
    background-color: var(--deco-color);
}

.blog-cont .article-header img {
    margin-top: 25px;
}

.blog-cont .article-header p.read-text {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.8;
    margin-top: 20px;
}

.blog-cont .cont {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.8;
    margin-top: 45px;
}

.blog-cont .cont h2 {
    position: relative;
    font-size: 1.7em;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding-left: 30px;
    margin-bottom: 20px;
}

.blog-cont .cont h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 20px;
    height: 20px;
    margin-bottom: 20px;
    border-radius: 2px;
    background-color: var(--main-color);
}

.blog-cont .cont h3 {
    font-size: 1.4em;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--main-color);
    margin-bottom: 20px;
}

.blog-cont .cont h4 {
    font-size: 1.4em;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.blog-cont .cont p {
    margin-bottom: 40px;
}

.blog-cont .cont a {
    color: var(--main-color);
    text-decoration: underline;
    transition: 0.3s ease-in-out;
}

@media (any-hover) {
    .blog-cont .cont a:hover {
        opacity: 0.75;
    }
}

.blog-cont .cont .text-box {
    margin-bottom: 40px;
}

.blog-cont .cont .text-box>* {
    margin-bottom: 0;
}

.blog-cont .cont img {
    margin-bottom: 20px;
}

.blog-cont .cont :is(ul, ol) {
    margin-bottom: 40px;
}

.blog-cont .cont :is(ul, ol) li+li {
    margin-top: 10px;
}

.blog-cont .cont ul li {
    position: relative;
    padding-left: 1.0em;
}

.blog-cont .cont ul li::before {
    content: "・";
    position: absolute;
    left: 0;
}

.blog-cont .cont ol {
    padding-left: 1.0em;
}

.blog-cont .cont ol li {
    list-style: decimal;
}

.blog-cont .cont .text-box {
    border-radius: 5px;
    padding: 10px 15px;
    border: solid 1px var(--main-color);
    background-color: #eafffc;
}

.blog-cont+.blog-btn {
    margin-top: 45px;
}

@media screen and (max-width:599px) {
    .blog-cont {
        margin-top: 85px;
    }

    .blog-cont .article-header .data .day {
        font-size: 16px;
    }

    .blog-cont .article-header .data .cate {
        font-size: 14px;
    }
}