@charset 'UTF-8';

:root
{
    --color-black: #333;
    --color-green: #068a7d;
}

/* ==========================================================================
  アニメーション
========================================================================== */

@keyframes menuFadeIn
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

@keyframes menuFadeOut
{
    0%
    {
        opacity: 1;
    }
    99%
    {
        opacity: 0;
    }
    100%
    {
        display: none;

        opacity: 0;
    }
}

@keyframes fadeIn
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

@keyframes fadeOut
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

@keyframes moveLeftRight
{
    0%
    {
        transform: translateX(-10px);
    }
    90%
    {
        transform: translateX(10px);
    }
    100%
    {
        transform: translateX(10px);
    }
}

@keyframes moveLeftRightSP
{
    0%
    {
        transform: translateX(calc(-1 * calc(calc(4/393) * 100vw)));
    }
    85%
    {
        transform: translateX(calc(calc(4/393) * 100vw));
    }
    100%
    {
        transform: translateX(calc(calc(4/393) * 100vw));
    }
}

@keyframes poyoyon
{
    0%
    {
        transform: translateX(140px);

        opacity: 0;
    }
    50%
    {
        transform: translateX(0);
    }
    65%
    {
        transform: translateX(30px);
    }
    100%
    {
        transform: translateX(0);
    }
    50%,
    100%
    {
        opacity: 1;
    }
}

@keyframes poyoyonRevarse
{
    0%
    {
        transform: translateX(-140px);

        opacity: 0;
    }
    50%
    {
        transform: translateX(0);
    }
    65%
    {
        transform: translateX(-30px);
    }
    100%
    {
        transform: translateX(0);
    }
    50%,
    100%
    {
        opacity: 1;
    }
}

@keyframes poyoyonSP
{
    0%
    {
        transform: translateX(calc(calc(70/393) * 100vw));

        opacity: 0;
    }
    50%
    {
        transform: translateX(0);
    }
    65%
    {
        transform: translateX(calc(calc(15/393) * 100vw));
    }
    100%
    {
        transform: translateX(0);
    }
    50%,
    100%
    {
        opacity: 1;
    }
}

@keyframes poyoyonRevarseSP
{
    0%
    {
        transform: translateX(calc(-1 * calc(calc(70/393) * 100vw)));

        opacity: 0;
    }
    50%
    {
        transform: translateX(0);
    }
    65%
    {
        transform: translateX(calc(-1 * calc(calc(15/393) * 100vw)));
    }
    100%
    {
        transform: translateX(0);
    }
    50%,
    100%
    {
        opacity: 1;
    }
}

/* FVアニメーション */

.phoneBox.animeAction .phone
{
    animation: fadeIn 1s 1 0s ease-in-out forwards;
}

.phoneBox.animeAction .menu1
{
    animation: poyoyonRevarse .5s 1 1.8s cubic-bezier(.12, 0, .39, 0) forwards;
}

@media (max-width: 767px)
{
    .phoneBox.animeAction .menu1
    {
        animation-name: poyoyonRevarseSP;
    }
}

.phoneBox.animeAction .menu2
{
    animation: poyoyon .5s 1 2.6s cubic-bezier(.12, 0, .39, 0) forwards;
}

@media (max-width: 767px)
{
    .phoneBox.animeAction .menu2
    {
        animation-name: poyoyonSP;
    }
}

.phoneBox.animeAction .menu3
{
    animation: poyoyonRevarse .5s 1 3.4s cubic-bezier(.12, 0, .39, 0) forwards;
}

@media (max-width: 767px)
{
    .phoneBox.animeAction .menu3
    {
        animation-name: poyoyonRevarseSP;
    }
}

.phoneBox.animeAction .menu4
{
    animation: poyoyon .5s 1 4.2s cubic-bezier(.12, 0, .39, 0) forwards;
}

@media (max-width: 767px)
{
    .phoneBox.animeAction .menu4
    {
        animation-name: poyoyonSP;
    }
}

.phoneBox.animeAction .menu4 .arrow
{
    animation: moveLeftRight 1s linear infinite alternate;
}

@media (max-width:767px)
{
    .phoneBox.animeAction .menu4 .arrow
    {
        animation: moveLeftRightSP .9s linear infinite alternate;
    }
}

.phoneBoxInner.animeActionEnd
{
    animation: fadeOut 1s 1 0s ease-in-out forwards;
}

/* ==========================================================================
  共通
========================================================================== */

.productsPage .kameron
{
    font-family: 'Kameron', serif;
    font-style: normal;

    font-optical-sizing: auto;
}

.productsPage *
{
    /* font-family: 'noto sans',"Noto Sans JP", sans-serif; */
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;

    color: #333;

    font-optical-sizing: auto;
}

.productsPage a
{
    display: inline-block;

    transition: opacity .2s;
}

.productsPage a:hover
{
    opacity: .8;
}

.productsPage img
{
    max-width: 100%;
    height: auto;

    vertical-align: bottom;
}

.productsPage .mainWrapper
{
    display: grid;

    width: min(calc(100% - 40px),1310px);
    margin: 67px auto 0;

    grid-template-columns: 211px 1fr;
    grid-template-rows: auto;
    gap: 0 50px;
}

@media (max-width: 1100px)
{
    .productsPage .mainWrapper
    {
        grid-template-columns: 100%;
    }
}

.productsPage .productsPageMain
{
    container-type: inline-size;
}

.productsPage .productsPageSidebar
{
    grid-column: 1;
    grid-row: 1;
}

@media (max-width: 1100px)
{
    .productsPage .productsPageSidebar
    {
        display: none;
    }
}

.productsPage .productsPageMain
{
    grid-column: 2;
    grid-row: 1;
}

@media (max-width: 1100px)
{
    .productsPage .productsPageMain
    {
        grid-column: 1;
    }
}

/* ==========================================================================
  サイドバー
========================================================================== */

.productsPageSidebar
{
    padding: 17px 0 0 9px;
}

.productsPageSidebar .secTitle
{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;

    max-width: 174px;
    margin-bottom: 22px;
    padding-bottom: 4px;

    color: #333;
    border-bottom: 2px solid;
    -o-border-image: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%) 1;
       border-image: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%) 1;
}

.productsPageSidebar .secTitleMiddle
{
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;

    margin-bottom: 22px;
}

.productsPageSidebar .secTitleMiddle::after
{
    display: block;

    width: 30px;
    height: 2px;
    margin-top: 5px;

    content: '';

    background: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%);
}

.productsPageSidebar .linkList
{
    max-width: 177px;
}

.productsPageSidebar .linkList li
{
    font-size: 12px;
    line-height: 1;
}

.productsPageSidebar .linkList a
{
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.productsPageSidebar .linkList a:has(.opiton)
{
    display: flex;

    align-items: center;
}

.productsPageSidebar .linkList a:has(.opiton) .opiton
{
    font-size: 6px;

    display: flex;

    width: 52px;
    height: 12px;
    margin: 0 0 0 auto;

    color: #259a8d;
    border: 1px solid #d3d3d3;
    border-radius: 6px;

    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.productsPageSidebar .linkList li + li
{
    margin-top: 3px;
}

.productsPageSidebar .linkList li:has(.childList) > a
{
    color: #259a8d;
}

.productsPageSidebar .linkList .childList
{
    margin: 6px 0 16px;
    padding-left: 10px;
}

.productsPageSidebar .linkList .childList a::before
{
    content: '└';
}

.productsPageSidebar .linkList .childList .maxcontents
{
    width: -moz-max-content;
    width:      max-content;
}

.productsPageSidebar .dotsList > li > a
{
    display: inline-flex;

    align-items: center;
}

.productsPageSidebar .dotsList > li > a::before
{
    width: 6px;
    height: 6px;
    margin-right: 4px;

    content: '';

    border-radius: 50%;
    background: #259a8d;
}

.productsPageSidebar .btnLinkList
{
    display: grid;

    max-width: 170px;

    grid-template-columns: 1fr 1fr;
    gap: 5px 10px;
}

.productsPageSidebar .btnLinkList a
{
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;

    display: grid;

    min-height: 20px;
    padding: 3px 0;

    color: #333;
    border: 1px solid #dadada;
    border-radius: 10px;

    place-content: center;
}

.productsPageSidebar .btnLinkList .small8
{
    font-size: 8px;
}

.productsPageSidebar .btnLinkList .small9
{
    font-size: 9px;
}

.productsPageSidebar .btnLinkList + .btnLinkList
{
    position: relative;

    margin-top: 19px;
}

.productsPageSidebar .btnLinkList + .btnLinkList::before
{
    position: absolute;
    top: -9px;
    left: 50%;

    width: 80px;
    height: 1px;

    content: '';

    background: #ccc;

    translate: -50% 0;
}

.productsPageSidebar .sidebarSection .innerSec .linkList li
{
    font-size: 10px;
}

.productsPageSidebar .sidebarSection .innerSec .linkList a
{
    font-size: 10px;
}

.productsPageSidebar .sidebarSection .innerSec .linkList li + li
{
    margin-top: 6px;
}

.productsPageSidebar .sidebarSection .innerSec + .innerSec
{
    margin-top: 38px;
}

.productsPageSidebar .sidebarSection + .sidebarSection
{
    margin-top: 57px;
}

.productsPageSidebar .functionSec .secTitle
{
    margin-bottom: 42px;
}

.productsPageSidebar .functionSec .linkListShort
{
    max-width: 165px;
}

.productsPageSidebar .sidebarBanner
{
    display: flex;

    margin-top: 50px;

    flex-flow: column;
    gap: 10px;
}

/* ==========================================================================
  グラデーションボタン
========================================================================== */

.productsPage .gradBtn
{
    position: relative;

    display: grid;

    width: 402px;
    height: 64px;

    text-decoration: none;

    border-radius: 50px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);

    grid-template-columns: 100%;
    grid-template-rows: auto;
    align-items: stretch;
}

.productsPage .gradBtn span
{
    font-size: 32px;
    font-weight: 500;

    z-index: 3;

    display: grid;

    color: #fff;

    grid-column: 1;
    grid-row: 1;
    place-content: center;
}

.productsPage .gradBtn::before
{
    z-index: 2;

    content: '';
    transition: opacity .2s linear;

    border-radius: 50px;
    background: linear-gradient(90deg, #079 0%, #259a8d 60.2%);

    grid-column: 1;
    grid-row: 1;
}

.productsPage .gradBtn::after
{
    z-index: 1;

    content: '';

    border: 2px solid #0d787e;
    border-radius: 50px;
    background: #fff;

    grid-column: 1;
    grid-row: 1;
}

@media (hover: hover)
{
    .productsPage .gradBtn:hover span
    {
        color: #0d787e;
    }
    .productsPage .gradBtn:hover::before
    {
        opacity: 0;
    }
}

/* ==========================================================================
  topSection
========================================================================== */

.productsTopPage .topSection
{
    width: 100%;
    max-width: 995px;
    margin: 0 0 0 auto;
}
.productsTopPage .topSection img{width: 50%; float: right;}

.productsTopPage .topSection h2
{
    font-size: 28px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    margin-bottom: 14px;
}

.productsTopPage .topSection h2 .line
{
    display: flex;

    align-items: baseline;
    gap: 0 .3em;
}

.productsTopPage .topSection p
{
    font-size: 16px;
    font-weight: 350;
    line-height: 1.5;
}

@media (max-width: 1000px)
{
    .productsTopPage .topSection .pcShow
    {
        display: none;
    }
}
@media (max-width: 767px)
{
    .productsTopPage .topSection img{width: 100%; float: none;}
}




.productsTopPage .topSection .gradBtn
{
    margin-top: 39px;
}

.productsTopPage .topSection .gradBtn + p
{
    margin-top: 34px;
}

/* ==========================================================================
  pageNav
========================================================================== */

.productsTopPage .pageNav
{
    width: 100%;
    max-width: 995px;
    margin: 35px 0 0 auto;
}

.productsTopPage .pageNavPC
{
    display: grid;

    max-width: 888px;

    grid-template-columns: repeat(3,1fr);
    gap: 15px 40px;
}

@media (max-width: 1180px)
{
    .productsTopPage .pageNavPC
    {
        gap: 15px 20px;
    }
}

.productsTopPage .pageNavPC a
{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;

    display: grid;

    height: 100%;
    padding: 0 24px 15px;

    background-image: linear-gradient(to right, #ccc 3px, transparent 3px);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 5px 2px;

    grid-template-columns: 1fr 19px;
    align-items: center;
    gap: 0 1em;
}

.productsTopPage .pageNavPC a span
{
    grid-column: 1;
    grid-row: 1;
}

.productsTopPage .pageNavPC a::before
{
    z-index: 1;

    box-sizing: border-box;
    width: 19px;
    height: 19px;

    content: '';
    transition: background-color .2s;

    border: 1px solid #259a8d;
    border-radius: 50%;
    background-color: #fff;

    grid-column: 2;
    grid-row: 1;
}

.productsTopPage .pageNavPC a::after
{
    z-index: 2;

    box-sizing: border-box;
    width: 19px;
    height: 19px;

    content: '';

    border: 1px solid #259a8d;
    border-radius: 50%;
    background-color: #259a8d;

    grid-column: 2;
    grid-row: 1;
    -webkit-mask-image: url('../images/products/pagenavi_arrow.svg');
            mask-image: url('../images/products/pagenavi_arrow.svg');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 9px auto;
            mask-size: 9px auto;
}

.productsTopPage .pageNavPC a:hover::before
{
    background-color: #259a8d;
}

.productsTopPage .pageNavPC a:hover::after
{
    background-color: #fff;
}

.productsTopPage .pageNavPC li:nth-child(1) a,
.productsTopPage .pageNavPC li:nth-child(4) a
{
    padding-right: 5px;
    padding-left: 7px;
}

.productsTopPage .pageNavSP
{
    display: none;
}

/* ==========================================================================
  borderWrapper
========================================================================== */

.productsTopPage .borderWrapper
{
    position: relative;

    margin-top: 84px;
    padding-left: 10px;
}

.productsTopPage .borderWrapper::before
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 8px;
    height: 100%;

    content: '';

    border: 1px solid #d4e3f2;
    background: #f5f7f9;
}

/* ==========================================================================
  headingH2
========================================================================== */

.productsTopPage .headingH2
{
    position: relative;
}

.productsTopPage .headingH2::before
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    width: 300px;
    height: 10px;

    content: '';
    transform: rotate(90deg);
    transform-origin: left top;

    background: linear-gradient(90deg, #1c9f91 0%, #0d787e 100%);
}

.productsTopPage .headingH2 h2
{
    font-size: 28px;
    font-weight: 500;
    line-height: 1.5;

    position: relative;

    display: flex;

    min-height: 116px;
    padding-left: 44px;

    color: #0d787e;

    align-items: center;
}

.productsTopPage .headingH2 h2::before,
.productsTopPage .headingH2 h2::after
{
    position: absolute;
    left: 0;

    width: 100vw;
    height: 1px;

    content: '';

    background: #d4e3f2;
}

.productsTopPage .headingH2 h2::before
{
    top: 0;
}

.productsTopPage .headingH2 h2::after
{
    bottom: 0;
}

.productsTopPage .headingH2 .for
{
    font-size: 24px;

    position: relative;

    margin-left: 50px;

    color: #0d787e;
}

.productsTopPage .headingH2 .for::before
{
    position: absolute;
    bottom: -17px;
    left: 0;

    width: 200px;
    height: 2px;

    content: '';

    background: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%);
}

.productsTopPage .headingH2 .for::after
{
    position: absolute;
    top: 50%;
    left: 200px;

    content: '';

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    translate: 0 -50%;
}

/* ==========================================================================
  背景水色セクション
========================================================================== */

.productsTopPage .backBlueSection
{
    position: relative;
    z-index: 1;

    background: #f5f7f9;
}

.productsTopPage .backBlueSection::before
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100%;

    content: '';

    background: #f5f7f9;
}

/* ==========================================================================
  医療現場のご要望から生まれたソリューション群
========================================================================== */

.productsTopPage .solutionsSection .headingH2
{
    margin-bottom: 86px;
}

.productsTopPage .solutionsSection .headingH2 h2 br
{
    display: none;
}

.productsTopPage .solutionsSection .headingH2 p
{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;

    max-width: 929px;
    margin-top: 53px;
    margin-left: 44px;
}

.productsTopPage .solutionsSection .row
{
    position: relative;
    z-index: 1;

    padding-bottom: 73px;
    padding-left: 44px;
}

.productsTopPage .solutionsSection .solutionsInnerSec1
{
    position: relative;
}

.productsTopPage .solutionsSection .solutionsInnerSec1::before
{
    position: absolute;
    z-index: 1;
    top: -33px;
    left: -24px;

    width: calc(100% + 52px);
    max-width: 912px;
    height: 952px;

    content: '';

    background: url('../images/products/solutions_waku.svg') no-repeat center center / 100% 100%;
}

@media (max-width: 1280px)
{
    .productsTopPage .solutionsSection .solutionsInnerSec1::before
    {
        width: calc(100% + 43px);
    }
}

.productsTopPage .solutionsSection .solutionsInnerSec
{
    display: grid;

    max-width: 925px;
    min-height: 276px;
    margin-left: auto;
    padding: 18px 22px 0;

    border-radius: 10px 0 0 10px;
    background: #e5eef4;

    grid-template-columns: 185px 1fr;
    grid-template-rows: auto 1fr;
    gap: 28px 22px;
}

@media (max-width: 920px)
{
    .productsTopPage .solutionsSection .solutionsInnerSec
    {
        grid-template-columns: calc(calc(150/925) * 100vw) 1fr;
    }
}

.productsTopPage .solutionsSection .solutionsInnerSec > h3
{
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;

    text-align: center;

    color: #259a8d;

    grid-column: 1;
    grid-row: 1 / 3;
}

.productsTopPage .solutionsSection .solutionsInnerSec > h3::after
{
    display: block;

    content: '';

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    margin-inline: auto;
}

.productsTopPage .solutionsSection .solutionsInnerSec > p
{
    font-size: 16px;
    line-height: 1.5;

    position: relative;
    z-index: 3;

    max-width: 494px;
    margin-left: 50px;

    grid-column: 2;
    grid-row: 1;
}

.productsTopPage .solutionsSection .solutionsInnerSec .innerBox
{
    position: relative;
    z-index: 3;

    display: flex;

    max-width: 629px;
    padding: 41px 23px 17px 23px;

    border-radius: 10px 10px 0 0;
    background: #fff;

    grid-column: 2;
    grid-row: 2;
    align-self: end;
    gap: 0 15px;
}

.productsTopPage .solutionsSection .solutionsInnerSec .kihon
{
    position: relative;

    align-self: center;
}

.productsTopPage .solutionsSection .solutionsInnerSec .kihon::after
{
    position: absolute;
    top: 50%;
    left: 30px;

    width: 36px;
    height: 31px;

    content: '';

    background: url('../images/products/plus.svg') no-repeat center center / contain;

    translate: 0 -50%;
}

.productsTopPage .solutionsSection .solutionsInnerSec .kihon a
{
    font-size: 12px;
    font-weight: 700;

    display: flex;

    width: 24px;
    height: 90px;
    margin-right: 68px;
    padding-top: .5em;

    transition: background-color .2s;
    text-decoration: none;
    letter-spacing: .5em;

    color: #fff;
    border: 1px solid #259a8d;
    border-radius: 4px;
    background: #259a8d;

    writing-mode: vertical-rl;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1220px)
{
    .productsTopPage .solutionsSection .solutionsInnerSec .kihon a
    {
        margin-right: 30px;
    }
}

.productsTopPage .solutionsSection .solutionsInnerSec .kihon a:hover
{
    color: #259a8d;
    background: #fff;
}

.productsTopPage .solutionsSection .solutionsInnerSec .listBox
{
    position: relative;
}

.productsTopPage .solutionsSection .solutionsInnerSec .listBox figcaption
{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.12;

    position: absolute;
    top: -66px;
    left: -25px;

    display: flex;

    width: -moz-max-content;
    width:      max-content;

    align-items: center;
}

.productsTopPage .solutionsSection .solutionsInnerSec .listBox figcaption::before
{
    content: '';

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    flex-shrink: 0;
}

.productsTopPage .solutionsSection .solutionsInnerSec .listBox .line2
{
    align-items: flex-end;
}

.productsTopPage .solutionsSection .solutionsInnerSec .listBox li
{
    line-height: 1;
}

.productsTopPage .solutionsSection .solutionsInnerSec .listBox li > a
{
    font-size: 12px;
    font-weight: 500;
    line-height: 1.91;

    display: inline-flex;

    align-items: center;
}

.productsTopPage .solutionsSection .solutionsInnerSec .listBox li > a::before
{
    width: 8px;
    height: 8px;
    margin-right: 6px;

    content: '';

    border-radius: 50%;
    background: #259a8d;
}

.productsTopPage .solutionsSection .solutionsInnerSec + .solutionsInnerSec
{
    margin-top: 29px;
}

.productsTopPage .solutionsSection .solutionsInnerSec1 h3::after
{
    max-width: 140px;
    height: 157px;
    margin-top: 8px;

    background: url('../images/products/solutions_illu1.svg') no-repeat center center / contain;
}

.productsTopPage .solutionsSection .solutionsInnerSec1 .listBox1
{
    flex: 0 1 168px;
}

.productsTopPage .solutionsSection .solutionsInnerSec1 .listBox1 figcaption::before
{
    width: 48px;
    height: 54px;
    margin-right: 10px;

    background-image: -webkit-image-set(
    url('../images/products/solutions_mark1@0.5x.png') 1x,
    url('../images/products/solutions_mark1.png') 2x
    );
    background-image:         image-set(
    url('../images/products/solutions_mark1@0.5x.png') 1x,
    url('../images/products/solutions_mark1.png') 2x
    );
}

.productsTopPage .solutionsSection .solutionsInnerSec1 .listBox2
{
    flex: 0 1 187px;
}

.productsTopPage .solutionsSection .solutionsInnerSec1 .listBox2 figcaption::before
{
    width: 60px;
    height: 54px;
    margin-right: 5px;

    background-image: -webkit-image-set(
    url('../images/products/solutions_mark2@0.5x.png') 1x,
    url('../images/products/solutions_mark2.png') 2x
    );
    background-image:         image-set(
    url('../images/products/solutions_mark2@0.5x.png') 1x,
    url('../images/products/solutions_mark2.png') 2x
    );
}

.productsTopPage .solutionsSection .solutionsInnerSec1 .listBox3
{
    flex: 0 1 133px;
}

.productsTopPage .solutionsSection .solutionsInnerSec1 .listBox3 figcaption::before
{
    width: 48px;
    height: 54px;
    margin-right: 9px;

    background-image: -webkit-image-set(
    url('../images/products/solutions_mark3@0.5x.png') 1x,
    url('../images/products/solutions_mark3.png') 2x
    );
    background-image:         image-set(
    url('../images/products/solutions_mark3@0.5x.png') 1x,
    url('../images/products/solutions_mark3.png') 2x
    );
}

.productsTopPage .solutionsSection .solutionsInnerSec2 h3::after
{
    max-width: 140px;
    height: 146px;
    margin-top: 18px;

    background-image: -webkit-image-set(
    url('../images/products/solutions_illu2.png') 1x,
    url('../images/products/solutions_illu2@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/solutions_illu2.png') 1x,
    url('../images/products/solutions_illu2@2x.png') 2x
    );
}

.productsTopPage .solutionsSection .solutionsInnerSec2 .listBox1
{
    flex: 0 1 216px;
}

.productsTopPage .solutionsSection .solutionsInnerSec2 .listBox1 figcaption::before
{
    width: 48px;
    height: 54px;
    margin-right: 9px;

    background-image: -webkit-image-set(
    url('../images/products/solutions_mark4@0.5x.png') 1x,
    url('../images/products/solutions_mark4.png') 2x
    );
    background-image:         image-set(
    url('../images/products/solutions_mark4@0.5x.png') 1x,
    url('../images/products/solutions_mark4.png') 2x
    );
}

.productsTopPage .solutionsSection .solutionsInnerSec2 .listBox1 figcaption .small
{
    font-size: 12px;
}

.productsTopPage .solutionsSection .solutionsInnerSec2 .listBox2
{
    flex: 0 1 265px;
}

.productsTopPage .solutionsSection .solutionsInnerSec2 .listBox2 figcaption::before
{
    width: 54px;
    height: 54px;
    margin-right: 7px;

    background-image: -webkit-image-set(
    url('../images/products/solutions_mark5@0.5x.png') 1x,
    url('../images/products/solutions_mark5.png') 2x
    );
    background-image:         image-set(
    url('../images/products/solutions_mark5@0.5x.png') 1x,
    url('../images/products/solutions_mark5.png') 2x
    );
}

.productsTopPage .solutionsSection .solutionsInnerSec3 h3::after
{
    max-width: 147px;
    height: 140px;
    margin-top: 25px;

    background: url('../images/products/solutions_illu3.svg') no-repeat center center / contain;
}

.productsTopPage .solutionsSection .solutionsInnerSec3 .listBox1
{
    flex: 0 1 216px;
}

.productsTopPage .solutionsSection .solutionsInnerSec3 .listBox1 figcaption::before
{
    width: 50px;
    height: 54px;
    margin-right: 9px;

    background-image: -webkit-image-set(
    url('../images/products/solutions_mark6@0.5x.png') 1x,
    url('../images/products/solutions_mark6.png') 2x
    );
    background-image:         image-set(
    url('../images/products/solutions_mark6@0.5x.png') 1x,
    url('../images/products/solutions_mark6.png') 2x
    );
}

.productsTopPage .solutionsSection .solutionsInnerSec3 .listBox2
{
    flex: 0 1 265px;
}

.productsTopPage .solutionsSection .solutionsInnerSec3 .listBox2 figcaption::before
{
    width: 48px;
    height: 54px;
    margin-right: 7px;

    background-image: -webkit-image-set(
    url('../images/products/solutions_mark7@0.5x.png') 1x,
    url('../images/products/solutions_mark7.png') 2x
    );
    background-image:         image-set(
    url('../images/products/solutions_mark7@0.5x.png') 1x,
    url('../images/products/solutions_mark7.png') 2x
    );
}

/* ==========================================================================
  機能一覧
========================================================================== */

.productsTopPage .functionIconBoxList
{
    display: grid;

    grid-template-columns: repeat(auto-fill,80px);
    gap: 14px 10px;
}

.productsTopPage .functionIconBoxList a
{
    display: block;
}

.productsTopPage .functionIconBoxList .box
{
    display: grid;

    width: 100%;
    height: 80px;
    padding: 0 0 3px;

    transition: background-color .2s;

    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;

    grid-template-columns: 100%;
    grid-template-rows: 52px 1fr;
}

.productsTopPage .functionIconBoxList .box::before
{
    width: 52px;
    height: 52px;

    content: '';

    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;

    grid-column: 1;
    grid-row: 1;
    justify-self: center;
}

.productsTopPage .functionIconBoxList .box p
{
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;

    text-align: center;

    grid-column: 1;
    grid-row: 2;
    align-self: center;
}

.productsTopPage .functionIconBoxList .opt
{
    font-size: 6px;
    line-height: 1;

    display: flex;

    width: 52px;
    height: 12px;
    margin: 5px auto 0;

    color: #259a8d;
    border: 1px solid #d3d3d3;
    border-radius: 6px;

    align-items: center;
    justify-content: center;
}

.productsTopPage .functionIconBoxList a:hover
{
    opacity: 1;
}

.productsTopPage .functionIconBoxList a:hover .box
{
    background-color: #e9eeeb;
}

.productsTopPage .functionIconBoxList .first .box
{
    border: 1px solid #259a8d;

    grid-template-rows: auto 38px 1fr;
}

.productsTopPage .functionIconBoxList .first .box::before
{
    width: 38px;
    height: 38px;

    grid-row: 2;
}

.productsTopPage .functionIconBoxList .first .box p
{
    color: #259a8d;
}

.productsTopPage .functionIconBoxList .first .box p:first-child
{
    line-height: 1;

    margin-top: 5px;

    grid-row: 1;
}

.productsTopPage .functionIconBoxList .first .box p:last-child
{
    grid-row: 3;
}

/* ==========================================================================
  予約管理機能
========================================================================== */

.productsTopPage .reservationFunction .headingH2 .for::after
{
    width: 206px;
    height: 96px;

    background-image: -webkit-image-set(
    url('../images/products/reservation_clinics_title.png') 1x,
    url('../images/products/reservation_clinics_title@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/reservation_clinics_title.png') 1x,
    url('../images/products/reservation_clinics_title@2x.png') 2x
    );
}

.productsTopPage .reservationFunction .displayList
{
    max-width: 814px;

    margin-inline: auto;
}

.productsTopPage .reservationFunctionList
{
    margin-top: 15px;
    padding: 60px 0 33px;
}

.productsTopPage .reservationFunctionList > header
{
    position: relative;

    max-width: 930px;
    margin-bottom: 31px;
    margin-left: 44px;
}

.productsTopPage .reservationFunctionList > header::after
{
    display: block;

    width: 289px;
    height: 3px;
    margin-top: 25px;

    content: '';

    background: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%);
}

.productsTopPage .reservationFunctionList > header h3
{
    font-size: 24px;
    font-weight: 500;
    line-height: 1.83;

    margin-bottom: 25px;

    color: #0d787e;
}

.productsTopPage .reservationFunctionList > header p
{
    font-size: 16px;
    line-height: 1.5;
}

.productsTopPage .reservationAmazing
{
    display: grid;

    max-width: 938px;
    padding: 0 0 77px 44px;

    grid-template-columns: 1fr 1fr;
    gap: 0 42px;
}

.productsTopPage .reservationAmazing .amazingSec
{
    border-radius: 10px;
    background: #e5eef4;
}

.productsTopPage .reservationAmazing .amazingSec a
{
    position: relative;

    display: block;

    padding: 15px 11px 10px;

    text-decoration: none;
}

.productsTopPage .reservationAmazing .amazingSec h3
{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;

    display: flex;

    margin-bottom: 10px;

    text-align: center;

    justify-content: center;
    align-items: center;
}

.productsTopPage .reservationAmazing .amazingSec h3::after
{
    width: 14px;
    height: 19px;
    margin-left: 10px;

    content: '';

    background: url('../images/products/amazing_arrow.svg') no-repeat center center / contain;

    flex-shrink: 0;
}

.productsTopPage .reservationAmazing .amazingSec .img
{
    padding: 7px 0 18px;

    border-radius: 10px;
    background: #fff;
}

.productsTopPage .reservationAmazing .amazingSec .img figcaption
{
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;

    margin-bottom: 8px;
    padding: 0 29px;
}

.productsTopPage .reservationAmazing .amazingSec .more
{
    font-size: 12px;
    font-weight: 500;

    position: absolute;
    right: 24px;
    bottom: 18px;

    display: inline-flex;

    align-items: center;
}

.productsTopPage .reservationAmazing .amazingSec .more::before
{
    width: 19px;
    height: 19px;
    margin-right: 5px;

    content: '';

    background: url('../images/products/circle_green_arrow.svg') no-repeat center center / contain;

    flex-shrink: 0;
}

/* forクリニック */

.productsTopPage .reservationClinics
{
    margin-top: 60px;
}

.productsTopPage .reservationClinics .headingH2
{
    margin-bottom: 76px;
}

.productsTopPage .reservationClinics .headingH2 .for::after
{
    width: 206px;
    height: 96px;

    background-image: -webkit-image-set(
    url('../images/products/reservation_clinics_title.png') 1x,
    url('../images/products/reservation_clinics_title@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/reservation_clinics_title.png') 1x,
    url('../images/products/reservation_clinics_title@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .displayList
{
    display: flex;

    padding: 0 30px;

    justify-content: space-between;
    gap: 0 20px;
}

.productsTopPage .reservationClinics .displayList li .img
{
    text-align: center;
}

.productsTopPage .reservationClinics .displayList li p
{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42;

    margin-top: 6px;

    text-align: center;
}

.productsTopPage .reservationClinics .reservationIconBoxList
{
    max-width: 930px;
    margin-left: 44px;
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(1) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_1.png') 1x,
    url('../images/products/function_icon1_1@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_1.png') 1x,
    url('../images/products/function_icon1_1@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(2) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_2.png') 1x,
    url('../images/products/function_icon1_2@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_2.png') 1x,
    url('../images/products/function_icon1_2@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(3) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_3.png') 1x,
    url('../images/products/function_icon1_3@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_3.png') 1x,
    url('../images/products/function_icon1_3@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(4) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_4.png') 1x,
    url('../images/products/function_icon1_4@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_4.png') 1x,
    url('../images/products/function_icon1_4@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(5) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_5.png') 1x,
    url('../images/products/function_icon1_5@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_5.png') 1x,
    url('../images/products/function_icon1_5@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(6) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_6.png') 1x,
    url('../images/products/function_icon1_6@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_6.png') 1x,
    url('../images/products/function_icon1_6@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(7) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_7.png') 1x,
    url('../images/products/function_icon1_7@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_7.png') 1x,
    url('../images/products/function_icon1_7@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(8) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_8.png') 1x,
    url('../images/products/function_icon1_8@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_8.png') 1x,
    url('../images/products/function_icon1_8@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(9) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_9.png') 1x,
    url('../images/products/function_icon1_9@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_9.png') 1x,
    url('../images/products/function_icon1_9@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(10) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_10.png') 1x,
    url('../images/products/function_icon1_10@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_10.png') 1x,
    url('../images/products/function_icon1_10@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(11) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_11.png') 1x,
    url('../images/products/function_icon1_11@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_11.png') 1x,
    url('../images/products/function_icon1_11@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(12) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_12.png') 1x,
    url('../images/products/function_icon1_12@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_12.png') 1x,
    url('../images/products/function_icon1_12@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(13) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_13.png') 1x,
    url('../images/products/function_icon1_13@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_13.png') 1x,
    url('../images/products/function_icon1_13@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(14) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_14.png') 1x,
    url('../images/products/function_icon1_14@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_14.png') 1x,
    url('../images/products/function_icon1_14@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(15) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_15.png') 1x,
    url('../images/products/function_icon1_15@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_15.png') 1x,
    url('../images/products/function_icon1_15@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(16) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_16.png') 1x,
    url('../images/products/function_icon1_16@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_16.png') 1x,
    url('../images/products/function_icon1_16@2x.png') 2x
    );
}

.productsTopPage .reservationClinics .reservationIconBoxList li:nth-child(17) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon1_17.png') 1x,
    url('../images/products/function_icon1_17@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon1_17.png') 1x,
    url('../images/products/function_icon1_17@2x.png') 2x
    );
}

/* for患者さん */

.productsTopPage .reservationPatient
{
    margin-top: 53px;
}

.productsTopPage .reservationPatient .headingH2
{
    margin-bottom: 50px;
}

.productsTopPage .reservationPatient .headingH2 .for::after
{
    width: 96px;
    height: 96px;

    background-image: url('../images/products/reservation_patient_title.svg');
}

.productsTopPage .reservationPatient .displayList
{
    display: flex;

    max-width: 853px;
    padding: 0 30px;

    justify-content: space-between;
    gap: 0 20px;
}

.productsTopPage .reservationPatient .displayList li
{
    flex: 0 1 180px;
}

.productsTopPage .reservationPatient .displayList li .img
{
    text-align: center;
}

.productsTopPage .reservationPatient .displayList li p
{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.28;

    padding-top: 7px;

    text-align: center;

    border-top: 1px solid #b1b1b1;
}

.productsTopPage .reservationPatient .displayList li p small
{
    font-size: 11px;
    font-weight: 400;
    line-height: 1.1;

    display: inline-block;
}

.productsTopPage .reservationPatient .reservationIconBoxList2
{
    max-width: 930px;
    margin-left: 44px;
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(1) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_1.png') 1x,
    url('../images/products/function_icon2_1@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_1.png') 1x,
    url('../images/products/function_icon2_1@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(2) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_2.png') 1x,
    url('../images/products/function_icon2_2@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_2.png') 1x,
    url('../images/products/function_icon2_2@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(3) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_3.png') 1x,
    url('../images/products/function_icon2_3@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_3.png') 1x,
    url('../images/products/function_icon2_3@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(4) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_4.png') 1x,
    url('../images/products/function_icon2_4@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_4.png') 1x,
    url('../images/products/function_icon2_4@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(5) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_5.png') 1x,
    url('../images/products/function_icon2_5@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_5.png') 1x,
    url('../images/products/function_icon2_5@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(6) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_6.png') 1x,
    url('../images/products/function_icon2_6@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_6.png') 1x,
    url('../images/products/function_icon2_6@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(7) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_7.png') 1x,
    url('../images/products/function_icon2_7@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_7.png') 1x,
    url('../images/products/function_icon2_7@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(8) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_8.png') 1x,
    url('../images/products/function_icon2_8@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_8.png') 1x,
    url('../images/products/function_icon2_8@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(9) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_9.png') 1x,
    url('../images/products/function_icon2_9@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_9.png') 1x,
    url('../images/products/function_icon2_9@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(10) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_10.png') 1x,
    url('../images/products/function_icon2_10@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_10.png') 1x,
    url('../images/products/function_icon2_10@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(11) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_11.png') 1x,
    url('../images/products/function_icon2_11@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_11.png') 1x,
    url('../images/products/function_icon2_11@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(12) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_12.png') 1x,
    url('../images/products/function_icon2_12@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_12.png') 1x,
    url('../images/products/function_icon2_12@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(12) .box p
{
    font-feature-settings: 'palt';
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(13) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_13.png') 1x,
    url('../images/products/function_icon2_13@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_13.png') 1x,
    url('../images/products/function_icon2_13@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(14) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_14.png') 1x,
    url('../images/products/function_icon2_14@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_14.png') 1x,
    url('../images/products/function_icon2_14@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(15) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_15.png') 1x,
    url('../images/products/function_icon2_15@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_15.png') 1x,
    url('../images/products/function_icon2_15@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(16) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_16.png') 1x,
    url('../images/products/function_icon2_16@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_16.png') 1x,
    url('../images/products/function_icon2_16@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(17) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_17.png') 1x,
    url('../images/products/function_icon2_17@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_17.png') 1x,
    url('../images/products/function_icon2_17@2x.png') 2x
    );
}

.productsTopPage .reservationPatient .reservationIconBoxList2 li:nth-child(18) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/function_icon2_18.png') 1x,
    url('../images/products/function_icon2_18@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/function_icon2_18.png') 1x,
    url('../images/products/function_icon2_18@2x.png') 2x
    );
}

/* ==========================================================================
  流用 お問い合わせ
========================================================================== */

.productsTopPage .meet_family_section *
{
    text-align: center;
}

.productsTopPage .meet_family_section a
{
    display: flex;

    transition: .5s all;
}

.productsTopPage .meet_family_section a:hover
{
    opacity: 1;
}

/* ==========================================================================
  診療科目別 機能紹介
========================================================================== */

.productsTopPage .medicalDepartment
{
    margin-top: 50px;
}

.productsTopPage .medicalDepartment .headingH2
{
    margin-bottom: 85px;
}

.productsTopPage .medicalDepartment .headingH2 p
{
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;

    max-width: 951px;
    margin-top: 45px;
    margin-left: 44px;
}

@media (max-width: 1210px)
{
    .productsTopPage .medicalDepartment .headingH2 .pcShow
    {
        display: none;
    }
}

.productsTopPage .medicalDepartment .departmentList
{
    display: grid;

    max-width: 952px;
    margin-left: 44px;

    grid-template-columns: repeat(auto-fill,116px);
    gap: 21px 23px;
}

.productsTopPage .medicalDepartment .departmentList li
{
    height: 116px;
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn
{
    display: grid;

    width: 100%;
    height: 100%;
    padding: 0;

    cursor: pointer;
    transition: background-color .2s;

    border: 1px solid #f2f5f7;
    border: none;
    border-radius: 10px;
    background: #f2f5f7;
    box-shadow: 0 2px 2px 0 rgba(51, 51, 51, .25);

    grid-template-columns: 100%;
    grid-template-rows: 82px 1fr;
}

@media (hover:hover)
{
    .productsTopPage .medicalDepartment .departmentList .departmentBtn:hover
    {
        border: 1px solid #66c5bb;
        background-color: #fff;
    }
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn::before
{
    width: 64px;
    height: 64px;

    content: '';

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn span
{
    font-size: 12px;
    font-weight: 500;
    line-height: 1.08;

    padding-bottom: 8px;

    text-align: center;

    align-self: center;
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn1::before
{
    background-image: url('../images/products/department_icon1.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn2::before
{
    background-image: url('../images/products/department_icon2.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn3::before
{
    background-image: url('../images/products/department_icon3.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn4::before
{
    background-image: url('../images/products/department_icon4.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn5::before
{
    background-image: url('../images/products/department_icon5.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn6::before
{
    background-image: url('../images/products/department_icon6.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn7::before
{
    background-image: url('../images/products/department_icon7.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn8::before
{
    background-image: url('../images/products/department_icon8.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn9::before
{
    background-image: url('../images/products/department_icon9.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn10::before
{
    background-image: url('../images/products/department_icon10.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn11::before
{
    background-image: url('../images/products/department_icon11.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn12::before
{
    width: 66px;
    height: 67px;

    background-image: url('../images/products/department_icon12.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn13::before
{
    width: 44px;
    height: 51px;

    background-image: url('../images/products/department_icon13.svg');
}

.productsTopPage .medicalDepartment .departmentList .departmentBtn14::before
{
    width: 41px;
    height: 45px;

    background-image: url('../images/products/department_icon14.svg');
}

.productsTopPage .medicalDepartment .departmentDialog
{
    width: 714px;
    margin: auto;
    padding: 0;

    transition: opacity .6s ease;
    /* アニメーションの初期状態 */

    opacity: 0;
    border: none;
    outline: none;
    background: none;
}

/* バックドロップのスタイル */

.productsTopPage .medicalDepartment .departmentDialog::backdrop
{
    transition: opacity .6s ease;

    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
}

.productsTopPage .medicalDepartment .departmentDialogShow
{
    opacity: 1;
}

.productsTopPage .medicalDepartment .departmentDialogShow::backdrop
{
    opacity: 1;
}

.productsTopPage .medicalDepartment .departmentDialogHide
{
    opacity: 0;
}

.productsTopPage .medicalDepartment .departmentDialogHide::backdrop
{
    opacity: 0;
}

.productsTopPage .medicalDepartment .dialogInner
{
    position: relative;

    overflow: hidden;

    width: 100%;
    min-height: 367px;
    padding: 32px 50px;

    border: 6px solid #259a8d;
    border-radius: 10px;
    background: #fff;
}

.productsTopPage .medicalDepartment .dialogInner header
{
    display: flex;

    margin-bottom: 13px;

    align-items: center;
}

.productsTopPage .medicalDepartment .dialogInner .departmentName
{
    margin-right: 23px;

    flex-shrink: 0;
}

.productsTopPage .medicalDepartment .dialogInner .departmentName span
{
    font-size: 18px;
    font-weight: 500;

    position: relative;

    display: flex;

    min-height: 50px;
    padding: 5px 24px 5px 19px;

    border-radius: 25px;
    background: #fff;

    align-items: center;
}

.productsTopPage .medicalDepartment .dialogInner .departmentName span::before
{
    width: 34px;
    height: 34px;
    margin-right: 8px;

    content: '';

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    flex-shrink: 0;
}

.productsTopPage .medicalDepartment .dialogInner .departmentName span::after
{
    position: absolute;

    padding: 2px; /* ボーダーの太さ */

    content: '';

    border-radius: inherit;
    background: linear-gradient(90deg, #1c9f91 0%, #0d787e 84.62%, #00546c 100%);

    inset: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: xor;
}

.productsTopPage .medicalDepartment .dialogInner h2
{
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
}

.productsTopPage .medicalDepartment .dialogInner .description
{
    font-size: 16px;
    line-height: 1.5;
}

.productsTopPage .medicalDepartment .dialogInner ul
{
    display: flex;

    margin-top: 40px;

    gap: 0 89px;
}

.productsTopPage .medicalDepartment .dialogInner ul li + li
{
    position: relative;
}

.productsTopPage .medicalDepartment .dialogInner ul li + li::before
{
    position: absolute;
    top: 39px;
    left: -71px;

    width: 52px;
    height: 44px;

    content: '';

    background: url('../images/products/dialog_plus.png') no-repeat center center / contain;
}

.productsTopPage .medicalDepartment .dialogInner ul .img
{
    overflow: hidden;

    margin-bottom: 2px;

    border-radius: 10px;
}

.productsTopPage .medicalDepartment .dialogInner ul p
{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;

    text-align: center;
}

.productsTopPage .medicalDepartment .departmentDialogClose
{
    line-height: 1;

    position: absolute;
    top: 2px;
    right: 0;

    display: block;

    width: 52px;
    height: 44px;
    padding: 0;

    cursor: pointer;
    transition: opcity .2s;

    border: none;
    outline: none;
    background: none;

    rotate: -44deg;
}

@media (hover:hover)
{
    .productsTopPage .medicalDepartment .departmentDialogClose:hover
    {
        opacity: .8;
    }
}

.productsTopPage .medicalDepartment .departmentDialog1 .departmentName span::before
{
    background-image: url('../images/products/department_icon1.svg');
}

.productsTopPage .medicalDepartment .departmentDialog2 .departmentName span::before
{
    background-image: url('../images/products/department_icon2.svg');
}

.productsTopPage .medicalDepartment .departmentDialog3 .departmentName span::before
{
    background-image: url('../images/products/department_icon3.svg');
}

.productsTopPage .medicalDepartment .departmentDialog4 .departmentName span::before
{
    background-image: url('../images/products/department_icon4.svg');
}

.productsTopPage .medicalDepartment .departmentDialog5 .departmentName span::before
{
    background-image: url('../images/products/department_icon5.svg');
}

.productsTopPage .medicalDepartment .departmentDialog6 .departmentName span::before
{
    background-image: url('../images/products/department_icon6.svg');
}

.productsTopPage .medicalDepartment .departmentDialog7 .departmentName span::before
{
    background-image: url('../images/products/department_icon7.svg');
}

.productsTopPage .medicalDepartment .departmentDialog8 .departmentName span::before
{
    background-image: url('../images/products/department_icon8.svg');
}

.productsTopPage .medicalDepartment .departmentDialog9 .departmentName span::before
{
    background-image: url('../images/products/department_icon9.svg');
}

.productsTopPage .medicalDepartment .departmentDialog10 .departmentName span::before
{
    background-image: url('../images/products/department_icon10.svg');
}

.productsTopPage .medicalDepartment .departmentDialog11 .departmentName span::before
{
    background-image: url('../images/products/department_icon11.svg');
}

.productsTopPage .medicalDepartment .departmentDialog12 .departmentName span::before
{
    background-image: url('../images/products/department_icon12.svg');
}

.productsTopPage .medicalDepartment .departmentDialog13 .departmentName span
{
    font-size: 14px;
    line-height: 1.14;
}

.productsTopPage .medicalDepartment .departmentDialog13 .departmentName span::before
{
    width: 24px;
    height: 27px;
    margin-right: 13px;

    background-image: url('../images/products/department_icon13.svg');
}

.productsTopPage .medicalDepartment .departmentDialog14 .departmentName span
{
    font-size: 14px;
    line-height: 1.14;
}

.productsTopPage .medicalDepartment .departmentDialog14 .departmentName span::before
{
    width: 20px;
    height: 22px;
    margin-right: 13px;

    background-image: url('../images/products/department_icon14.svg');
}

/* ==========================================================================
  クリニックの課題別 機能紹介
========================================================================== */

.productsTopPage .byIssue
{
    margin-top: 121px;
}

.productsTopPage .byIssue .headingH2
{
    margin-bottom: 37px;
}

.productsTopPage .byIssue .headingH2 p
{
    font-size: 20px;
    line-height: 1.5;

    max-width: 968px;
    margin-top: 43px;
    margin-left: 44px;
}

.productsTopPage .byIssue .wrapper
{
    margin-left: 44px;
}

.productsTopPage .byIssue .row
{
    display: grid;

    max-width: 892px;

    margin-inline: auto;
    grid-template-columns: repeat(5,1fr);
    /* grid-template-columns: repeat(auto-fit,170px); */
    gap: 10px;
}

.productsTopPage .byIssue .byIssueSec
{
    position: relative;

    display: grid;

    padding: 20px 10px 10px;

    border-radius: 10px;
    background: #e5eef4;

    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
}

.productsTopPage .byIssue .byIssueSec::before
{
    display: block;

    width: 67px;
    height: 61px;
    margin-bottom: 24px;

    content: '';

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    grid-column: 1;
    grid-row: 1;
    justify-self: center;
}

.productsTopPage .byIssue .byIssueSec h2
{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.12;

    position: absolute;
    top: 84px;
    left: 50%;

    width: 100%;

    text-align: center;

    color: #259a8d;

    translate: -50% 0;
}

.productsTopPage .byIssue .byIssueSec .listBox
{
    padding: 39px 5px 17px 12px;

    border-radius: 10px;
    background: #fff;

    grid-column: 1;
    grid-row: 2;
}

.productsTopPage .byIssue .byIssueSec .listBox .kihon
{
    position: relative;

    width: 100%;
    padding-bottom: 33px;

    align-self: center;
}

.productsTopPage .byIssue .byIssueSec .listBox .kihon::after
{
    position: absolute;
    bottom: 2px;
    left: 50%;

    width: 36px;
    height: 31px;

    content: '';

    background: url('../images/products/plus.svg') no-repeat center center / contain;

    translate: -50% 0;
}

.productsTopPage .byIssue .byIssueSec .listBox .kihon a
{
    font-size: 12px;
    font-weight: 700;

    display: flex;

    max-width: 110px;
    height: 24px;
    padding-bottom: .2em;

    transition: background-color .2s;
    text-decoration: none;

    color: #fff;
    border: 1px solid #259a8d;
    border-radius: 4px;
    background: #259a8d;

    margin-inline: auto;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}

.productsTopPage .byIssue .byIssueSec .listBox .kihon a:hover
{
    color: #259a8d;
    background: #fff;
}

.productsTopPage .byIssue .byIssueSec .listBox li
{
    line-height: 1;
}

.productsTopPage .byIssue .byIssueSec .listBox li > a
{
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;

    display: inline-flex;
}

.productsTopPage .byIssue .byIssueSec .listBox li > a::before
{
    width: 4px;
    height: 1.5em;
    margin-right: 9px;

    content: '';

    border-radius: 50%;
    background: url('../images/products/grenn_dots.svg') no-repeat center center /  4px auto;
}

.productsTopPage .byIssue .byIssueSec .listBox li + li
{
    margin-top: 1px;
}

.productsTopPage .byIssue .byIssueSec1::before
{
    background-image: -webkit-image-set(
    url('../images/products/by_issue_icon1@0.5x.png') 1x,
    url('../images/products/by_issue_icon1.png') 2x
    );
    background-image:         image-set(
    url('../images/products/by_issue_icon1@0.5x.png') 1x,
    url('../images/products/by_issue_icon1.png') 2x
    );
}

.productsTopPage .byIssue .byIssueSec2::before
{
    background-image: -webkit-image-set(
    url('../images/products/by_issue_icon2@0.5x.png') 1x,
    url('../images/products/by_issue_icon2.png') 2x
    );
    background-image:         image-set(
    url('../images/products/by_issue_icon2@0.5x.png') 1x,
    url('../images/products/by_issue_icon2.png') 2x
    );
}

.productsTopPage .byIssue .byIssueSec3::before
{
    background-image: -webkit-image-set(
    url('../images/products/by_issue_icon3@0.5x.png') 1x,
    url('../images/products/by_issue_icon3.png') 2x
    );
    background-image:         image-set(
    url('../images/products/by_issue_icon3@0.5x.png') 1x,
    url('../images/products/by_issue_icon3.png') 2x
    );
}

.productsTopPage .byIssue .byIssueSec4::before
{
    background-image: -webkit-image-set(
    url('../images/products/by_issue_icon4@0.5x.png') 1x,
    url('../images/products/by_issue_icon4.png') 2x
    );
    background-image:         image-set(
    url('../images/products/by_issue_icon4@0.5x.png') 1x,
    url('../images/products/by_issue_icon4.png') 2x
    );
}

.productsTopPage .byIssue .byIssueSec5::before
{
    background-image: -webkit-image-set(
    url('../images/products/by_issue_icon5@0.5x.png') 1x,
    url('../images/products/by_issue_icon5.png') 2x
    );
    background-image:         image-set(
    url('../images/products/by_issue_icon5@0.5x.png') 1x,
    url('../images/products/by_issue_icon5.png') 2x
    );
}

/* ==========================================================================
  シーン別 機能紹介
========================================================================== */

.productsTopPage .byScene
{
    margin-top: 90px;
}

.productsTopPage .byScene .headingH2
{
    margin-bottom: 61px;
}

.productsTopPage .byScene .headingH2 p
{
    font-size: 20px;
    line-height: 1.5;

    max-width: 935px;
    margin-top: 48px;
    margin-left: 44px;
}

.productsTopPage .byScene .wrapper
{
    margin-left: 44px;
}

.productsTopPage .byScene .row
{
    display: grid;

    max-width: 892px;

    margin-inline: auto;
    grid-template-columns: repeat(5,1fr);
    gap: 0 10px;
}

.productsTopPage .byScene .row::after
{
    display: block;

    width: 100%;
    height: 24px;
    margin-top: 23px;

    content: '';

    background: url('../images/products/by_scene_arrow.svg') no-repeat center center / contain;

    grid-column: 1 / 6;
}

.productsTopPage .byScene .bySceneSec
{
    position: relative;

    display: grid;

    padding: 18px 10px 10px;

    border-radius: 10px;
    background: #e5eef4;

    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
}

.productsTopPage .byScene .bySceneSec::before
{
    display: block;

    width: 67px;
    height: 59px;
    margin-bottom: 5px;

    content: '';

    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    grid-column: 1;
    grid-row: 1;
    justify-self: center;
}

.productsTopPage .byScene .bySceneSec h2
{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.12;

    margin-bottom: 17px;

    text-align: center;

    color: #259a8d;

    grid-column: 1;
    grid-row: 2;
}

.productsTopPage .byScene .bySceneSec .listBox
{
    padding: 16px 0 14px;

    border-radius: 10px;
    background: #fff;

    grid-column: 1;
    grid-row: 3;
}

.productsTopPage .byScene .bySceneSec .listBox .read
{
    line-height: 1;

    max-width: 118px;
    min-height: 2.5em;
    margin-bottom: 17px;
    padding: 0 2px;

    margin-inline: auto;
}

.productsTopPage .byScene .bySceneSec .listBox .read a
{
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;

    text-decoration: none;
}

.productsTopPage .byScene .bySceneSec .listBox .kihon
{
    position: relative;

    width: 100%;
    padding: 0 2px;
    padding-bottom: 33px;

    align-self: center;
}

.productsTopPage .byScene .bySceneSec .listBox .kihon::after
{
    position: absolute;
    bottom: 2px;
    left: 50%;

    width: 36px;
    height: 31px;

    content: '';

    background: url('../images/products/plus.svg') no-repeat center center / contain;

    translate: -50% 0;
}

.productsTopPage .byScene .bySceneSec .listBox .kihon a
{
    font-size: 12px;
    font-weight: 700;

    display: flex;

    max-width: 110px;
    height: 24px;
    padding-bottom: .2em;

    transition: background-color .2s;
    text-decoration: none;

    color: #fff;
    border: 1px solid #259a8d;
    border-radius: 4px;
    background: #259a8d;

    margin-inline: auto;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}

.productsTopPage .byScene .bySceneSec .listBox .kihon a:hover
{
    color: #259a8d;
    background: #fff;
}

.productsTopPage .byScene .bySceneSec .listBox ul
{
    padding: 0 2px 0 12px;
}

.productsTopPage .byScene .bySceneSec .listBox li
{
    line-height: 1;
}

.productsTopPage .byScene .bySceneSec .listBox li > a
{
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;

    display: inline-flex;
}

.productsTopPage .byScene .bySceneSec .listBox li > a::before
{
    width: 4px;
    height: 1.5em;
    margin-right: 9px;

    content: '';

    border-radius: 50%;
    background: url('../images/products/grenn_dots.svg') no-repeat center center /  4px auto;
}

.productsTopPage .byScene .bySceneSec1::before
{
    background-image: -webkit-image-set(
    url('../images/products/by_scene_icon1@0.5x.png') 1x,
    url('../images/products/by_scene_icon1.png') 2x
    );
    background-image:         image-set(
    url('../images/products/by_scene_icon1@0.5x.png') 1x,
    url('../images/products/by_scene_icon1.png') 2x
    );
}

.productsTopPage .byScene .bySceneSec2::before
{
    background-image: -webkit-image-set(
    url('../images/products/by_scene_icon2@0.5x.png') 1x,
    url('../images/products/by_scene_icon2.png') 2x
    );
    background-image:         image-set(
    url('../images/products/by_scene_icon2@0.5x.png') 1x,
    url('../images/products/by_scene_icon2.png') 2x
    );
}

.productsTopPage .byScene .bySceneSec3::before
{
    background-image: -webkit-image-set(
    url('../images/products/by_scene_icon3@0.5x.png') 1x,
    url('../images/products/by_scene_icon3.png') 2x
    );
    background-image:         image-set(
    url('../images/products/by_scene_icon3@0.5x.png') 1x,
    url('../images/products/by_scene_icon3.png') 2x
    );
}

.productsTopPage .byScene .bySceneSec4::before
{
    background-image: -webkit-image-set(
    url('../images/products/by_scene_icon4@0.5x.png') 1x,
    url('../images/products/by_scene_icon4.png') 2x
    );
    background-image:         image-set(
    url('../images/products/by_scene_icon4@0.5x.png') 1x,
    url('../images/products/by_scene_icon4.png') 2x
    );
}

.productsTopPage .byScene .bySceneSec5::before
{
    background-image: -webkit-image-set(
    url('../images/products/by_scene_icon5@0.5x.png') 1x,
    url('../images/products/by_scene_icon5.png') 2x
    );
    background-image:         image-set(
    url('../images/products/by_scene_icon5@0.5x.png') 1x,
    url('../images/products/by_scene_icon5.png') 2x
    );
}

/* ==========================================================================
  予約方式別 機能紹介
========================================================================== */

.productsTopPage .reservationSystem
{
    margin-top: 112px;
}

.productsTopPage .reservationSystem .headingH2
{
    margin-bottom: 79px;
}

.productsTopPage .reservationSystem .headingH2 p
{
    font-size: 20px;
    line-height: 1.5;

    max-width: 937px;
    margin-top: 50px;
    margin-left: 44px;
}

.productsTopPage .reservationSystem .row
{
    display: grid;

    max-width: 940px;
    margin-left: 44px;

    grid-template-columns: repeat(3,1fr);
    gap: 0 20px;
}

.productsTopPage .reservationSystem .reservationSystemSec
{
    display: grid;

    padding: 16px 10px 10px;

    border-radius: 10px;
    background: #e5eef4;

    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
}

.productsTopPage .reservationSystem .reservationSystemSec h2
{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.11;

    display: flex;

    margin-bottom: 13px;

    text-align: center;

    align-self: center;
    justify-content: center;
    align-items: center;
    gap: 0 31px;
}

.productsTopPage .reservationSystem .reservationSystemSec h2::before
{
    width: 14px;

    content: '';

    flex-shrink: 0;
}

.productsTopPage .reservationSystem .reservationSystemSec h2::after
{
    width: 14px;
    height: 19px;

    content: '';

    background: url('../images/products/amazing_arrow.svg') no-repeat center center / contain;

    flex-shrink: 0;
}

.productsTopPage .reservationSystem .reservationSystemSec .innerBox
{
    padding: 32px 20px 25px;

    border-radius: 10px;
    background: #fff;
}

.productsTopPage .reservationSystem .reservationSystemSec .innerBox .illu
{
    display: flex;

    height: 90px;
    margin-bottom: 44px;

    justify-content: center;
    align-items: flex-end;
}

.productsTopPage .reservationSystem .reservationSystemSec .innerBox p
{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.productsTopPage .reservationSystem .reservationSystemSec .innerBox p + p
{
    margin-top: 1.5em;
}

.productsTopPage .reservationSystem .reservationSystemSec2 .innerBox .illu,
.productsTopPage .reservationSystem .reservationSystemSec3 .innerBox .illu
{
    padding-bottom: 11px;
}

/* ==========================================================================
  全機能一覧
========================================================================== */

.productsTopPage .allFunction
{
    margin-top: 68px;
}

.productsTopPage .allFunction .headingH2
{
    margin-bottom: 78px;
}

.productsTopPage .allFunction .headingH2 h2
{
    padding-left: 10px;
}

.productsTopPage .allFunction .headingH2 .line
{
    display: flex;

    align-items: flex-end;
}

.productsTopPage .allFunction .allFunctionSec
{
    display: grid;

    padding: 25px 26px 44px 26px;

    border: 1px solid #f2f5f7;

    grid-template-columns: 213px 1fr;
}

.productsTopPage .allFunction .allFunctionSec header
{
    padding-right: 10px;
}

.productsTopPage .allFunction .allFunctionSec header h3
{
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;

    margin-top: -.2em;

    color: #0d787e;
}

.productsTopPage .allFunction .allFunctionSec header p
{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;

    margin-top: 6px;

    color: #0d787e;
}

.productsTopPage .allFunction .allFunctionSec + .allFunctionSec
{
    margin-top: 20px;
}

.productsTopPage .allFunction .functionIconBoxList
{
    gap: 16px 17px;
}

.productsTopPage .allFunction .allFunctionIconBoxList1 li:nth-child(1) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon1_1.png') 1x,
    url('../images/products/all_func_icon1_1@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon1_1.png') 1x,
    url('../images/products/all_func_icon1_1@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList1 li:nth-child(2) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon1_2.png') 1x,
    url('../images/products/all_func_icon1_2@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon1_2.png') 1x,
    url('../images/products/all_func_icon1_2@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList1 li:nth-child(3) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon1_3.png') 1x,
    url('../images/products/all_func_icon1_3@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon1_3.png') 1x,
    url('../images/products/all_func_icon1_3@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(1) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_1.png') 1x,
    url('../images/products/all_func_icon2_1@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_1.png') 1x,
    url('../images/products/all_func_icon2_1@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(2) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_2.png') 1x,
    url('../images/products/all_func_icon2_2@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_2.png') 1x,
    url('../images/products/all_func_icon2_2@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(3) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_3.png') 1x,
    url('../images/products/all_func_icon2_3@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_3.png') 1x,
    url('../images/products/all_func_icon2_3@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(4) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_4.png') 1x,
    url('../images/products/all_func_icon2_4@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_4.png') 1x,
    url('../images/products/all_func_icon2_4@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(5) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_5.png') 1x,
    url('../images/products/all_func_icon2_5@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_5.png') 1x,
    url('../images/products/all_func_icon2_5@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(6) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_6.png') 1x,
    url('../images/products/all_func_icon2_6@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_6.png') 1x,
    url('../images/products/all_func_icon2_6@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(7) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_7.png') 1x,
    url('../images/products/all_func_icon2_7@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_7.png') 1x,
    url('../images/products/all_func_icon2_7@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(8) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_8.png') 1x,
    url('../images/products/all_func_icon2_8@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_8.png') 1x,
    url('../images/products/all_func_icon2_8@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(9) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_9.png') 1x,
    url('../images/products/all_func_icon2_9@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_9.png') 1x,
    url('../images/products/all_func_icon2_9@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(10) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_10.png') 1x,
    url('../images/products/all_func_icon2_10@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_10.png') 1x,
    url('../images/products/all_func_icon2_10@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(11) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_11.png') 1x,
    url('../images/products/all_func_icon2_11@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_11.png') 1x,
    url('../images/products/all_func_icon2_11@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(12) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_12.png') 1x,
    url('../images/products/all_func_icon2_12@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_12.png') 1x,
    url('../images/products/all_func_icon2_12@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(13) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_13.png') 1x,
    url('../images/products/all_func_icon2_13@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_13.png') 1x,
    url('../images/products/all_func_icon2_13@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(14) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_14.png') 1x,
    url('../images/products/all_func_icon2_14@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_14.png') 1x,
    url('../images/products/all_func_icon2_14@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(15) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_15.png') 1x,
    url('../images/products/all_func_icon2_15@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_15.png') 1x,
    url('../images/products/all_func_icon2_15@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList2 li:nth-child(16) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon2_16.png') 1x,
    url('../images/products/all_func_icon2_16@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon2_16.png') 1x,
    url('../images/products/all_func_icon2_16@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(1) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_1.png') 1x,
    url('../images/products/all_func_icon3_1@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_1.png') 1x,
    url('../images/products/all_func_icon3_1@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(2) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_2.png') 1x,
    url('../images/products/all_func_icon3_2@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_2.png') 1x,
    url('../images/products/all_func_icon3_2@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(3) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_3.png') 1x,
    url('../images/products/all_func_icon3_3@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_3.png') 1x,
    url('../images/products/all_func_icon3_3@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(4) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_4.png') 1x,
    url('../images/products/all_func_icon3_4@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_4.png') 1x,
    url('../images/products/all_func_icon3_4@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(5) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_5.png') 1x,
    url('../images/products/all_func_icon3_5@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_5.png') 1x,
    url('../images/products/all_func_icon3_5@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(6) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_6.png') 1x,
    url('../images/products/all_func_icon3_6@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_6.png') 1x,
    url('../images/products/all_func_icon3_6@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(7) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_7.png') 1x,
    url('../images/products/all_func_icon3_7@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_7.png') 1x,
    url('../images/products/all_func_icon3_7@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(8) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_8.png') 1x,
    url('../images/products/all_func_icon3_8@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_8.png') 1x,
    url('../images/products/all_func_icon3_8@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(9) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_9.png') 1x,
    url('../images/products/all_func_icon3_9@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_9.png') 1x,
    url('../images/products/all_func_icon3_9@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(10) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_10.png') 1x,
    url('../images/products/all_func_icon3_10@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_10.png') 1x,
    url('../images/products/all_func_icon3_10@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(11) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_11.png') 1x,
    url('../images/products/all_func_icon3_11@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_11.png') 1x,
    url('../images/products/all_func_icon3_11@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(12) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_12.png') 1x,
    url('../images/products/all_func_icon3_12@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_12.png') 1x,
    url('../images/products/all_func_icon3_12@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(13) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_13.png') 1x,
    url('../images/products/all_func_icon3_13@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_13.png') 1x,
    url('../images/products/all_func_icon3_13@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(14) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_14.png') 1x,
    url('../images/products/all_func_icon3_14@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_14.png') 1x,
    url('../images/products/all_func_icon3_14@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(15) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_15.png') 1x,
    url('../images/products/all_func_icon3_15@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_15.png') 1x,
    url('../images/products/all_func_icon3_15@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(16) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_16.png') 1x,
    url('../images/products/all_func_icon3_16@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_16.png') 1x,
    url('../images/products/all_func_icon3_16@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(17) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_17.png') 1x,
    url('../images/products/all_func_icon3_17@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_17.png') 1x,
    url('../images/products/all_func_icon3_17@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(18) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_18.png') 1x,
    url('../images/products/all_func_icon3_18@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_18.png') 1x,
    url('../images/products/all_func_icon3_18@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(19) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_19.png') 1x,
    url('../images/products/all_func_icon3_19@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_19.png') 1x,
    url('../images/products/all_func_icon3_19@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(20) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_20.png') 1x,
    url('../images/products/all_func_icon3_20@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_20.png') 1x,
    url('../images/products/all_func_icon3_20@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(21) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_21.png') 1x,
    url('../images/products/all_func_icon3_21@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_21.png') 1x,
    url('../images/products/all_func_icon3_21@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(22) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_22.png') 1x,
    url('../images/products/all_func_icon3_22@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_22.png') 1x,
    url('../images/products/all_func_icon3_22@2x.png') 2x
    );
}

.productsTopPage .allFunction .allFunctionIconBoxList3 li:nth-child(23) .box::before
{
    background-image: -webkit-image-set(
    url('../images/products/all_func_icon3_23.png') 1x,
    url('../images/products/all_func_icon3_23@2x.png') 2x
    );
    background-image:         image-set(
    url('../images/products/all_func_icon3_23.png') 1x,
    url('../images/products/all_func_icon3_23@2x.png') 2x
    );
}

/* ==========================================================================
  end
========================================================================== */

/* @import "breakpoints/_1050max.css"; */

@media only screen and (max-width: 767px)
{
    .productsPage img
    {
        width: 100%;
        max-width: none;
    }
    .productsPage .mainWrapper
    {
        width: 100%;
        margin: calc(calc(28/393) *100vw) auto 0;

        gap: 0;
    }
    /* ==========================================================================
  グラデーションボタン
========================================================================== */
    .productsPage .gradBtn
    {
        font-size: calc(calc(24/393) *100vw);

        width: calc(calc(359/393) *100vw);
        height: calc(calc(60/393) *100vw);

        border-radius: calc(calc(50/393) *100vw);
        box-shadow: 0 calc(calc(4/393) *100vw) calc(calc(4/393) *100vw) 0 rgba(0, 0, 0, .25);
    }
    .productsPage .gradBtn span
    {
        font-size: calc(calc(24/393) *100vw);
    }
    .productsPage .gradBtn::before
    {
        border-radius: calc(calc(50/393) *100vw);
    }
    .productsPage .gradBtn::after
    {
        border: calc(calc(2/393) *100vw) solid #0d787e;
        border-radius: calc(calc(50/393) *100vw);
    }
    /* ==========================================================================
  topSection
========================================================================== */
    .productsTopPage .topSection
    {
        max-width: calc(calc(359/393) *100vw);

        margin-inline: auto;
    }
    .productsTopPage .topSection h2
    {
        font-size: calc(calc(16/393) *100vw);

        margin-bottom: calc(calc(14/393) *100vw);
    }
    .productsTopPage .topSection h2 img
    {
        width: calc(calc(211/393) *100vw);
    }
    .productsTopPage .topSection h2 .line
    {
        gap: 0;
    }
    .productsTopPage .topSection p
    {
        font-size: calc(calc(14/393) *100vw);
    }
    .productsTopPage .topSection .gradBtn
    {
        margin-top: calc(calc(14/393) *100vw);
    }
    .productsTopPage .topSection .gradBtn + p
    {
        margin-top: calc(calc(62/393) *100vw);
    }
    /* ==========================================================================
  pageNav
========================================================================== */
    .productsTopPage .pageNav
    {
        max-width: none;
        margin: calc(calc(19/393) *100vw) 0 0 0;

        background: #f3f6f8;
    }
    .productsTopPage .pageNavPC
    {
        display: none;
    }
    .productsTopPage .pageNavSP
    {
        position: relative;

        display: block;

        padding: calc(calc(18/393) *100vw) 0;
    }
    .productsTopPage .pageNavSP .selectText
    {
        font-size: calc(calc(12/393) *100vw);
        font-weight: 500;

        display: flex;

        width: calc(calc(320/393) *100vw);
        height: calc(calc(50/393) *100vw);
        padding-left: calc(calc(39/393) *100vw);

        border: calc(calc(6/393) *100vw) solid #e8f0f2;
        border-radius: calc(calc(25/393) *100vw);
        background-color: #fff;
        box-shadow: 0 calc(calc(1/393) *100vw) calc(calc(4/393) *100vw) 0 rgba(0, 0, 0, .25);

        margin-inline: auto;
        align-items: center;
    }
    .productsTopPage .pageNavSP .selectText::after
    {
        width: calc(calc(19/393) *100vw);
        height: calc(calc(19/393) *100vw);
        margin-left: calc(calc(20/393) *100vw);

        content: '';
        transition: rotate .2s linear;

        background: url('../images/products/pagenavi_arrow_sp.svg') no-repeat center center / contain;

        flex-shrink: 0;
    }
    .productsTopPage .pageNavSP .rotated::after
    {
        rotate: 180deg;
    }
    .productsTopPage .pageNavSP .slideDownBox
    {
        position: absolute;
        z-index: 10;
        top: calc(calc(68/393) *100vw);
        left: 50%;

        display: none;

        width: calc(calc(265/393) *100vw);
        padding: calc(calc(21/393) *100vw) 0 calc(calc(31/393) *100vw);

        border: calc(calc(6/393) *100vw) solid #e8f0f2;
        border-radius: calc(calc(10/393) *100vw);
        background-color: #fff;

        translate: -50% 0;
    }
    .productsTopPage .pageNavSP .slideDownBox li + li
    {
        margin-top: calc(calc(22/393) *100vw);
    }
    .productsTopPage .pageNavSP .slideDownBox li
    {
        font-size: calc(calc(12/393) *100vw);
        line-height: 1.5;

        text-align: center;
    }
    .productsTopPage .pageNavSP .slideDownBox a
    {
        font-size: calc(calc(12/393) *100vw);
        font-weight: 500;
        line-height: 1.5;

        display: inline-flex;

        text-align: center;

        align-items: center;
    }
    .productsTopPage .pageNavSP .slideDownBox a::after
    {
        width: calc(calc(11/393) *100vw);
        height: calc(calc(7/393) *100vw);
        margin-left: calc(calc(10/393) *100vw);

        content: '';

        background: url('../images/products/pagenavi_arrow_sp2.svg') no-repeat center center / contain;

        flex-shrink: 0;
    }
    /* ==========================================================================
  borderWrapper
========================================================================== */
    .productsTopPage .borderWrapper
    {
        overflow: hidden;

        margin-top: calc(calc(44/393) *100vw);
        padding-left: calc(calc(10/393) *100vw);
    }
    .productsTopPage .borderWrapper::before
    {
        width: calc(calc(8/393) *100vw);

        border: calc(calc(1/393) *100vw) solid #d4e3f2;
    }
    /* ==========================================================================
  headingH2
========================================================================== */
    .productsTopPage .headingH2::before
    {
        width: calc(calc(180/393) *100vw);
        height: calc(calc(10/393) *100vw);
    }
    .productsTopPage .headingH2 h2
    {
        font-size: calc(calc(20/393) *100vw);

        min-height: calc(calc(100/393) *100vw);
        padding-left: calc(calc(12/393) *100vw);
    }
    .productsTopPage .headingH2 h2::before,
    .productsTopPage .headingH2 h2::after
    {
        height: calc(calc(1/393) *100vw);
    }
    .productsTopPage .headingH2 .for
    {
        font-size: calc(calc(15/393) *100vw);

        margin-left: calc(calc(12/393) *100vw);
    }
    .productsTopPage .headingH2 .for::before
    {
        bottom: calc(-1 * calc(calc(8/393) *100vw));

        width: calc(calc(120/393) *100vw);
        height: calc(calc(2/393) *100vw);
    }
    .productsTopPage .headingH2 .for::after
    {
        left: calc(calc(120/393) *100vw);
    }
    /* ==========================================================================
  背景水色セクション
========================================================================== */
    .productsTopPage .backBlueSection::before
    {
        display: none;
    }
    /* ==========================================================================
  医療現場のご要望から生まれたソリューション群
========================================================================== */
    .productsTopPage .solutionsSection .headingH2
    {
        margin-bottom: calc(calc(32/393) *100vw);
    }
    .productsTopPage .solutionsSection .headingH2 h2 br
    {
        display: block;
    }
    .productsTopPage .solutionsSection .headingH2 p
    {
        font-size: calc(calc(14/393) *100vw);

        max-width: calc(calc(363/393) *100vw);
        margin-top: calc(calc(32/393) *100vw);
        margin-left: calc(calc(12/393) *100vw);
    }
    .productsTopPage .solutionsSection .row
    {
        padding-bottom: 0;
        padding-left: 0;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec1::before
    {
        display: none;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec
    {
        display: grid;

        max-width: none;
        min-height: 0;
        margin-left: 0;
        padding: calc(calc(21/393) *100vw) 0 0 calc(calc(11/393) *100vw);

        border-radius: 0;

        grid-template-columns: 100%;
        grid-template-rows: minmax(calc(calc(116/393) *100vw),auto) 1fr;
        gap: calc(calc(8/393) *100vw) 0;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec > h3
    {
        font-size: calc(calc(20/393) *100vw);

        width: -moz-max-content;
        width:      max-content;

        grid-column: 1;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec > h3::after
    {
        margin-inline: 0;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec > p
    {
        font-size: calc(calc(12/393) *100vw);

        width: calc(calc(251/393) *100vw);
        max-width: none;
        margin-left: 0;
        padding-right: calc(calc(10/393) *100vw);

        grid-column: 1;
        align-self: end;
        justify-self: end;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec .innerBox
    {
        width: calc(calc(319/393) *100vw);
        max-width: none;
        padding: calc(calc(16/393) *100vw) 0 calc(calc(13/393) *100vw);

        border-radius: calc(calc(10/393) *100vw) 0 0 0;

        grid-column: 1;
        justify-self: end;
        align-self: end;
        flex-flow: column;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec .kihon
    {
        margin-bottom: calc(calc(10/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec .kihon::after
    {
        position: static;

        display: block;

        width: calc(calc(36/393) *100vw);
        height: calc(calc(31/393) *100vw);
        margin: 0 auto;

        translate: 0;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec .kihon a
    {
        font-size: calc(calc(12/393) *100vw);

        width: calc(calc(108/393) *100vw);
        height: calc(calc(21/393) *100vw);
        margin-right: 0;
        padding-top: 0;

        letter-spacing: 0;

        border: calc(calc(1/393) *100vw) solid #259a8d;
        border-radius: calc(calc(4/393) *100vw);
        background: #259a8d;

        writing-mode: horizontal-tb;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec .listBox
    {
        width: calc(calc(173/393) *100vw);

        align-self: flex-end;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec .listBox figcaption
    {
        font-size: calc(calc(14/393) *100vw);

        top: 0;
        left: calc(-1 * calc(calc(160/393) *100vw));
    }
    .productsTopPage .solutionsSection .solutionsInnerSec .listBox .line2
    {
        align-items: center;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec .listBox li > a
    {
        font-size: calc(calc(12/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec .listBox li > a::before
    {
        width: calc(calc(8/393) *100vw);
        height: calc(calc(8/393) *100vw);
        margin-right: calc(calc(6/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec .listBox + .listBox
    {
        margin-top: calc(calc(19/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec + .solutionsInnerSec
    {
        margin-top: 0;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec1
    {
        border-radius: calc(calc(10/393) *100vw) 0 0 0;

        grid-template-rows: minmax(calc(calc(86/393) *100vw),auto) 1fr;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec1 h3
    {
        z-index: 4;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec1 h3::after
    {
        max-width: calc(calc(75/393) *100vw);
        height: calc(calc(77/393) *100vw);
        margin-top: calc(calc(4/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec1 > p
    {
        align-self: center;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox1
    {
        flex: 0 1 auto;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox1 figcaption::before
    {
        width: calc(calc(48/393) *100vw);
        height: calc(calc(54/393) *100vw);
        margin-right: calc(calc(10/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox2
    {
        flex: 0 1 auto;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox2 figcaption
    {
        left: calc(-1 * calc(calc(168/393) *100vw));
    }
    .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox2 figcaption::before
    {
        width: calc(calc(60/393) *100vw);
        height: calc(calc(54/393) *100vw);
        margin-right: calc(calc(5/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox3
    {
        flex: 0 1 auto;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec1 .listBox3 figcaption::before
    {
        width: calc(calc(48/393) *100vw);
        height: calc(calc(54/393) *100vw);
        margin-right: calc(calc(9/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec2 h3::after
    {
        max-width: calc(calc(75/393) *100vw);
        height: calc(calc(82/393) *100vw);
        margin-top: calc(calc(4/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox1
    {
        flex: 0 1 auto;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox1 figcaption::before
    {
        width: calc(calc(48/393) *100vw);
        height: calc(calc(54/393) *100vw);
        margin-right: calc(calc(9/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox1 figcaption .small
    {
        font-size: calc(calc(12/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox2
    {
        flex: 0 1 auto;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec2 .listBox2 figcaption::before
    {
        width: calc(calc(54/393) *100vw);
        height: calc(calc(54/393) *100vw);
        margin-right: calc(calc(7/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec3
    {
        padding-bottom: calc(calc(31/393) *100vw);

        border-radius: 0 0 0 calc(calc(10/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec3 h3::after
    {
        max-width: calc(calc(77/393) *100vw);
        height: calc(calc(75/393) *100vw);
        margin-top: calc(calc(4/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec3 .listBox1
    {
        flex: 0 1 auto;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec3 .listBox1 figcaption::before
    {
        width: calc(calc(50/393) *100vw);
        height: calc(calc(54/393) *100vw);
        margin-right: calc(calc(9/393) *100vw);
    }
    .productsTopPage .solutionsSection .solutionsInnerSec3 .listBox2
    {
        flex: 0 1 auto;
    }
    .productsTopPage .solutionsSection .solutionsInnerSec3 .listBox2 figcaption::before
    {
        width: calc(calc(48/393) *100vw);
        height: calc(calc(54/393) *100vw);
        margin-right: calc(calc(7/393) *100vw);
    }
    /* ==========================================================================
  機能一覧
========================================================================== */
    .productsTopPage .functionIconBoxList
    {
        display: grid;

        grid-template-columns: repeat(auto-fill,calc(calc(80/393) *100vw));
        gap: calc(calc(14/393) *100vw) calc(calc(10/393) *100vw);
    }
    .productsTopPage .functionIconBoxList .box
    {
        height: calc(calc(80/393) *100vw);
        padding: 0 0 calc(calc(3/393) *100vw);

        border: calc(calc(1/393) *100vw) solid #ddd;
        border-radius: calc(calc(6/393) *100vw);
        background: #fff;

        grid-template-rows: calc(calc(52/393) *100vw) 1fr;
    }
    .productsTopPage .functionIconBoxList .box::before
    {
        width: calc(calc(52/393) *100vw);
        height: calc(calc(52/393) *100vw);
    }
    .productsTopPage .functionIconBoxList .box p
    {
        font-size: calc(calc(10/393) *100vw);
    }
    .productsTopPage .functionIconBoxList .opt
    {
        font-size: calc(calc(6/393) *100vw);

        width: calc(calc(52/393) *100vw);
        height: calc(calc(12/393) *100vw);
        margin: calc(calc(5/393) *100vw) auto 0;

        border: calc(calc(1/393) *100vw) solid #d3d3d3;
        border-radius: calc(calc(6/393) *100vw);
    }
    .productsTopPage .functionIconBoxList .first .box
    {
        border: calc(calc(1/393) *100vw) solid #259a8d;

        grid-template-rows: auto calc(calc(38/393) *100vw) 1fr;
    }
    .productsTopPage .functionIconBoxList .first .box::before
    {
        width: calc(calc(38/393) *100vw);
        height: calc(calc(38/393) *100vw);
    }
    .productsTopPage .functionIconBoxList .first .box p:first-child
    {
        margin-top: calc(calc(5/393) *100vw);
    }
    /* ==========================================================================
  予約管理機能
========================================================================== */
    .productsTopPage .reservationFunction .displayList
    {
        max-width: calc(calc(281/393) *100vw);

        margin-inline: auto;
    }
    .productsTopPage .reservationFunctionList
    {
        margin-top: calc(calc(42/393) *100vw);
        padding: calc(calc(24/393) *100vw) calc(calc(12/393) *100vw) calc(calc(32/393) *100vw);
    }
    .productsTopPage .reservationFunctionList > header
    {
        max-width: none;
        margin-bottom: calc(calc(37/393) *100vw);
        margin-left: 0;
    }
    .productsTopPage .reservationFunctionList > header::after
    {
        width: calc(calc(289/393) *100vw);
        height: calc(calc(3/393) *100vw);
        margin-top: calc(calc(14/393) *100vw);
    }
    .productsTopPage .reservationFunctionList > header h3
    {
        font-size: calc(calc(20/393) *100vw);
        line-height: 2.2;

        margin-bottom: calc(calc(12/393) *100vw);
    }
    .productsTopPage .reservationFunctionList > header p
    {
        font-size: calc(calc(12/393) *100vw);
    }
    .productsTopPage .reservationAmazing
    {
        max-width: none;
        padding: 0 0 calc(calc(25/393) *100vw) 0;

        grid-template-columns: 100%;
        gap: calc(calc(18/393) *100vw) 0;
    }
    .productsTopPage .reservationAmazing .amazingSec
    {
        border-radius: calc(calc(10/393) *100vw);
    }
    .productsTopPage .reservationAmazing .amazingSec a
    {
        padding: calc(calc(18/393) *100vw) calc(calc(10/393) *100vw) calc(calc(20/393) *100vw);
    }
    .productsTopPage .reservationAmazing .amazingSec h3
    {
        font-size: calc(calc(14/393) *100vw);

        margin-bottom: calc(calc(13/393) *100vw);
    }
    .productsTopPage .reservationAmazing .amazingSec h3::after
    {
        width: calc(calc(12/393) *100vw);
        height: calc(calc(16/393) *100vw);
        margin-left: calc(calc(25/393) *100vw);
    }
    .productsTopPage .reservationAmazing .amazingSec .img
    {
        padding: calc(calc(14/393) *100vw) 0 calc(calc(15/393) *100vw);

        border-radius: calc(calc(10/393) *100vw);
    }
    .productsTopPage .reservationAmazing .amazingSec .img figcaption
    {
        font-size: calc(calc(12/393) *100vw);

        margin-bottom: calc(calc(8/393) *100vw);
        padding: 0 calc(calc(28/393) *100vw);
    }
    .productsTopPage .reservationAmazing .amazingSec .more
    {
        font-size: calc(calc(10/393) *100vw);

        right: calc(calc(24/393) *100vw);
        bottom: calc(calc(28/393) *100vw);
    }
    .productsTopPage .reservationAmazing .amazingSec .more::before
    {
        width: calc(calc(13/393) *100vw);
        height: calc(calc(13/393) *100vw);
        margin-right: calc(calc(5/393) *100vw);
    }
    /* forクリニック */
    .productsTopPage .reservationClinics
    {
        margin-top: calc(calc(36/393) *100vw);
    }
    .productsTopPage .reservationClinics .headingH2
    {
        margin-bottom: calc(calc(24/393) *100vw);
    }
    .productsTopPage .reservationClinics .headingH2 .for::after
    {
        width: calc(calc(106/393) *100vw);
        height: calc(calc(52/393) *100vw);

        background-image: url('../images/products/sp_reservation_clinics_title.png');
    }
    .productsTopPage .reservationClinics .displayList
    {
        display: flex;

        padding: 0;

        flex-flow: column;
        justify-content: flex-start;
        gap: calc(calc(25/393) *100vw) 0;
    }
    .productsTopPage .reservationClinics .displayList li .img
    {
        width: calc(calc(220/393) *100vw);

        margin-inline: auto;
    }
    .productsTopPage .reservationClinics .displayList li p
    {
        font-size: calc(calc(12/393) *100vw);
        line-height: 1.66;

        margin-top: calc(calc(5/393) *100vw);
    }
    .productsTopPage .reservationClinics .reservationIconBoxList
    {
        max-width: calc(calc(350/393) *100vw);
        margin-left: 0;
    }
    /* for患者さん */
    .productsTopPage .reservationPatient
    {
        margin-top: calc(calc(40/393) *100vw);
    }
    .productsTopPage .reservationPatient .headingH2
    {
        margin-bottom: calc(calc(28/393) *100vw);
    }
    .productsTopPage .reservationPatient .headingH2 .for::after
    {
        width: calc(calc(51/393) *100vw);
        height: calc(calc(51/393) *100vw);
    }
    .productsTopPage .reservationPatient .displayList
    {
        max-width: calc(calc(265/393) *100vw);
        padding: 0;

        gap: calc(calc(22/393) *100vw) calc(calc(35/393) *100vw);
        flex-flow: row wrap;
    }
    .productsTopPage .reservationPatient .displayList li
    {
        flex: 0 1 calc(calc(115/393) *100vw);
    }
    .productsTopPage .reservationPatient .displayList li .img img
    {
        width: calc(calc(97/393) *100vw);

        margin-inline: auto;
    }
    .productsTopPage .reservationPatient .displayList li p
    {
        font-size: calc(calc(12/393) *100vw);

        padding-top: calc(calc(11/393) *100vw);

        border-top: calc(calc(1/393) *100vw) solid #b1b1b1;

        font-feature-settings: 'palt';
    }
    .productsTopPage .reservationPatient .displayList li p small
    {
        font-size: calc(calc(12/393) *100vw);
    }
    .productsTopPage .reservationPatient .reservationIconBoxList2
    {
        max-width: calc(calc(350/393) *100vw);
        margin-left: 0;
    }
    .productsTopPage .reservationPatient .reservationAmazing .amazingSec4 .img img
    {
        display: block;

        width: calc(calc(340/393) *100vw);

        margin-inline: auto;
    }
    /* ==========================================================================
  流用 お問い合わせ
========================================================================== */
    .productsTopPage .meet_family_section img
    {
        width: auto;
    }
    /* ==========================================================================
  診療科目別 機能紹介
========================================================================== */
    .productsTopPage .medicalDepartment
    {
        margin-top: calc(calc(38/393) *100vw);
    }
    .productsTopPage .medicalDepartment .headingH2
    {
        margin-bottom: calc(calc(24/393) *100vw);
    }
    .productsTopPage .medicalDepartment .headingH2 h2
    {
        padding-left: calc(calc(17/393) *100vw);
    }
    .productsTopPage .medicalDepartment .headingH2 p
    {
        font-size: calc(calc(14/393) *100vw);

        max-width: calc(calc(348/393) *100vw);
        margin-top: calc(calc(34/393) *100vw);
        margin-left: calc(calc(17/393) *100vw);
    }
    .productsTopPage .medicalDepartment .departmentList
    {
        display: grid;

        max-width: calc(calc(350/393) *100vw);
        margin-left: calc(calc(17/393) *100vw);

        grid-template-columns: repeat(4,1fr);
        gap: calc(calc(16/393) *100vw);
    }
    .productsTopPage .medicalDepartment .departmentList li
    {
        height: calc(calc(76/393) *100vw);
    }
    .productsTopPage .medicalDepartment .departmentList .departmentBtn
    {
        border: calc(calc(1/393) *100vw) solid #f2f5f7;
        border-radius: calc(calc(10/393) *100vw);
        background: #f2f5f7;
        box-shadow: 0 calc(calc(2/393) *100vw) calc(calc(2/393) *100vw) 0 rgba(51, 51, 51, .25);

        grid-template-rows: calc(calc(50/393) *100vw) 1fr;
    }
    .productsTopPage .medicalDepartment .departmentList .departmentBtn::before
    {
        width: calc(calc(42/393) *100vw);
        height: calc(calc(42/393) *100vw);
    }
    .productsTopPage .medicalDepartment .departmentList .departmentBtn span
    {
        font-size: calc(calc(10/393) *100vw);
        line-height: 1;

        padding-bottom: calc(calc(2/393) *100vw);
    }
    .productsTopPage .medicalDepartment .departmentList .departmentBtn12::before
    {
        width: calc(calc(43/393) *100vw);
        height: calc(calc(44/393) *100vw);
    }
    .productsTopPage .medicalDepartment .departmentList .departmentBtn13::before
    {
        width: calc(calc(28/393) *100vw);
        height: calc(calc(33/393) *100vw);
        margin-top: calc(calc(13/393) *100vw);

        align-self: start;
    }
    .productsTopPage .medicalDepartment .departmentList .departmentBtn13 span
    {
        font-size: calc(calc(9/393) *100vw);
    }
    .productsTopPage .medicalDepartment .departmentList .departmentBtn14::before
    {
        width: calc(calc(27/393) *100vw);
        height: calc(calc(29/393) *100vw);
        margin-top: calc(calc(18/393) *100vw);

        align-self: start;
    }
    .productsTopPage .medicalDepartment .departmentList .departmentBtn14 span
    {
        font-size: calc(calc(9/393) *100vw);
    }
    .productsTopPage .medicalDepartment .departmentDialog
    {
        width: calc(calc(372/393) *100vw);
    }
    .productsTopPage .medicalDepartment .dialogInner
    {
        width: 100%;
        min-height: calc(calc(308/393) *100vw);
        padding: calc(calc(20/393) *100vw) calc(calc(24/393) *100vw) calc(calc(22/393) *100vw);

        border: calc(calc(4/393) *100vw) solid #259a8d;
        border-radius: calc(calc(10/393) *100vw);
    }
    .productsTopPage .medicalDepartment .dialogInner header
    {
        display: flex;

        margin-bottom: calc(calc(5/393) *100vw);

        flex-flow: column;
        align-items: center;
        gap: calc(calc(12/393) *100vw) 0;
    }
    .productsTopPage .medicalDepartment .dialogInner .departmentName
    {
        margin-right: 0;

        flex-shrink: 1;
    }
    .productsTopPage .medicalDepartment .dialogInner .departmentName span
    {
        font-size: calc(calc(16/393) *100vw);

        min-height: calc(calc(40/393) *100vw);
        padding: calc(calc(5/393) *100vw) calc(calc(30/393) *100vw) calc(calc(5/393) *100vw) calc(calc(19/393) *100vw);

        border-radius: calc(calc(25/393) *100vw);
    }
    .productsTopPage .medicalDepartment .dialogInner .departmentName span::before
    {
        width: calc(calc(26/393) *100vw);
        height: calc(calc(26/393) *100vw);
        margin-right: calc(calc(9/393) *100vw);
    }
    .productsTopPage .medicalDepartment .dialogInner .departmentName span::after
    {
        padding: calc(calc(2/393) *100vw);
    }
    .productsTopPage .medicalDepartment .dialogInner h2
    {
        font-size: calc(calc(18/393) *100vw);
    }
    .productsTopPage .medicalDepartment .dialogInner .description
    {
        font-size: calc(calc(12/393) *100vw);
    }
    .productsTopPage .medicalDepartment .dialogInner ul
    {
        display: flex;

        width: calc(calc(297/393) *100vw);
        margin: calc(calc(10/393) *100vw) auto 0;

        gap: 0 calc(calc(33/393) *100vw);
    }
    .productsTopPage .medicalDepartment .dialogInner ul li + li::before
    {
        top: calc(calc(25/393) *100vw);
        left: calc(-1 * calc(calc(32/393) *100vw));

        width: calc(calc(30/393) *100vw);
        height: calc(calc(26/393) *100vw);
    }
    .productsTopPage .medicalDepartment .dialogInner ul .img
    {
        margin-bottom: calc(calc(10/393) *100vw);

        border-radius: calc(calc(10/393) *100vw);
    }
    .productsTopPage .medicalDepartment .dialogInner ul p
    {
        font-size: calc(calc(12/393) *100vw);
        line-height: 1.2;
    }
    .productsTopPage .medicalDepartment .departmentDialogClose
    {
        line-height: 1;

        top: calc(calc(7/393) *100vw);
        right: calc(calc(7/393) *100vw);

        display: block;

        width: calc(calc(52/393) *100vw);
        height: calc(calc(44/393) *100vw);
        padding: 0;

        border: none;
        outline: none;
        background: none;
    }
    .productsTopPage .medicalDepartment .departmentDialog13 .departmentName span
    {
        font-size: calc(calc(12/393) *100vw);
    }
    .productsTopPage .medicalDepartment .departmentDialog13 .departmentName span::before
    {
        width: calc(calc(24/393) *100vw);
        height: calc(calc(27/393) *100vw);
        margin-right: calc(calc(12/393) *100vw);
    }
    .productsTopPage .medicalDepartment .departmentDialog14 .departmentName span
    {
        font-size: calc(calc(12/393) *100vw);
        line-height: 1.14;
    }
    .productsTopPage .medicalDepartment .departmentDialog14 .departmentName span::before
    {
        width: calc(calc(20/393) *100vw);
        height: calc(calc(22/393) *100vw);
        margin-right: calc(calc(12/393) *100vw);
    }
    /* ==========================================================================
  クリニックの課題別 機能紹介
========================================================================== */
    .productsTopPage .byIssue
    {
        margin-top: calc(calc(54/393) *100vw);
    }
    .productsTopPage .byIssue .headingH2
    {
        margin-bottom: calc(calc(17/393) *100vw);
    }
    .productsTopPage .byIssue .headingH2 h2
    {
        padding-left: calc(calc(17/393) *100vw);
    }
    .productsTopPage .byIssue .headingH2 p
    {
        font-size: calc(calc(14/393) *100vw);

        max-width: calc(calc(346/393) *100vw);
        margin-top: calc(calc(34/393) *100vw);
        margin-left: calc(calc(17/393) *100vw);
    }
    .productsTopPage .byIssue .wrapper
    {
        margin-left: 0;
    }
    .productsTopPage .byIssue .row
    {
        max-width: calc(calc(332/393) *100vw);
        margin-left: calc(calc(17/393) *100vw);

        grid-template-columns: 100%;
        gap: calc(calc(10/393) *100vw);
    }
    .productsTopPage .byIssue .byIssueSec
    {
        position: relative;

        padding: calc(calc(13/393) *100vw) calc(calc(14/393) *100vw) calc(calc(14/393) *100vw);

        border-radius: calc(calc(10/393) *100vw);

        grid-template-columns: 100%;
        grid-template-rows: auto 1fr;
    }
    .productsTopPage .byIssue .byIssueSec::before
    {
        position: absolute;
        top: calc(-1 * calc(calc(5/393) *100vw));
        left: calc(calc(32/393) *100vw);

        width: calc(calc(66/393) *100vw);
        height: calc(calc(61/393) *100vw);
        margin-bottom: 0;
    }
    .productsTopPage .byIssue .byIssueSec h2
    {
        font-size: calc(calc(16/393) *100vw);

        position: static;

        width: auto;
        margin: 0 0 calc(calc(10/393) *100vw) calc(calc(108/393) *100vw);

        text-align: left;

        grid-column: 1;
        grid-row: 1;
        translate: 0;
    }
    .productsTopPage .byIssue .byIssueSec .listBox
    {
        padding: calc(calc(11/393) *100vw) calc(calc(14/393) *100vw) calc(calc(14/393) *100vw);

        border-radius: calc(calc(10/393) *100vw);

        grid-column: 1;
        grid-row: 2;
    }
    .productsTopPage .byIssue .byIssueSec .listBox .kihon
    {
        padding-bottom: calc(calc(28/393) *100vw);
    }
    .productsTopPage .byIssue .byIssueSec .listBox .kihon::after
    {
        bottom: calc(-1 * calc(calc(2/393) *100vw));

        width: calc(calc(36/393) *100vw);
        height: calc(calc(31/393) *100vw);
    }
    .productsTopPage .byIssue .byIssueSec .listBox .kihon a
    {
        font-size: calc(calc(12/393) *100vw);

        max-width: calc(calc(110/393) *100vw);
        height: calc(calc(24/393) *100vw);

        border: calc(calc(1/393) *100vw) solid #259a8d;
        border-radius: calc(calc(4/393) *100vw);
    }
    .productsTopPage .byIssue .byIssueSec .listBox ul
    {
        -moz-columns: 2;
             columns: 2;
        -moz-column-gap: calc(calc(9/393) *100vw);
             column-gap: calc(calc(9/393) *100vw);
    }
    .productsTopPage .byIssue .byIssueSec .listBox li
    {
        line-height: 1;
    }
    .productsTopPage .byIssue .byIssueSec .listBox li > a
    {
        font-size: calc(calc(12/393) *100vw);
    }
    .productsTopPage .byIssue .byIssueSec .listBox li > a::before
    {
        width: calc(calc(4/393) *100vw);
        margin-right: calc(calc(9/393) *100vw);

        background: url('../images/products/grenn_dots.svg') no-repeat center center / calc(calc(4/393) *100vw) auto;
    }
    .productsTopPage .byIssue .byIssueSec .listBox li + li
    {
        margin-top: calc(calc(10/393) *100vw);
    }
    .productsTopPage .byIssue .byIssueSec1::before
    {
        background-image: -webkit-image-set(
        url('../images/products/by_issue_icon1@0.5x.png') 1x,
        url('../images/products/by_issue_icon1.png') 2x
        );
        background-image:         image-set(
        url('../images/products/by_issue_icon1@0.5x.png') 1x,
        url('../images/products/by_issue_icon1.png') 2x
        );
    }
    .productsTopPage .byIssue .byIssueSec2::before
    {
        background-image: -webkit-image-set(
        url('../images/products/by_issue_icon2@0.5x.png') 1x,
        url('../images/products/by_issue_icon2.png') 2x
        );
        background-image:         image-set(
        url('../images/products/by_issue_icon2@0.5x.png') 1x,
        url('../images/products/by_issue_icon2.png') 2x
        );
    }
    .productsTopPage .byIssue .byIssueSec3::before
    {
        background-image: -webkit-image-set(
        url('../images/products/by_issue_icon3@0.5x.png') 1x,
        url('../images/products/by_issue_icon3.png') 2x
        );
        background-image:         image-set(
        url('../images/products/by_issue_icon3@0.5x.png') 1x,
        url('../images/products/by_issue_icon3.png') 2x
        );
    }
    .productsTopPage .byIssue .byIssueSec4::before
    {
        background-image: -webkit-image-set(
        url('../images/products/by_issue_icon4@0.5x.png') 1x,
        url('../images/products/by_issue_icon4.png') 2x
        );
        background-image:         image-set(
        url('../images/products/by_issue_icon4@0.5x.png') 1x,
        url('../images/products/by_issue_icon4.png') 2x
        );
    }
    .productsTopPage .byIssue .byIssueSec5::before
    {
        background-image: -webkit-image-set(
        url('../images/products/by_issue_icon5@0.5x.png') 1x,
        url('../images/products/by_issue_icon5.png') 2x
        );
        background-image:         image-set(
        url('../images/products/by_issue_icon5@0.5x.png') 1x,
        url('../images/products/by_issue_icon5.png') 2x
        );
    }
    /* ==========================================================================
  シーン別 機能紹介
========================================================================== */
    .productsTopPage .byScene
    {
        margin-top: calc(calc(41/393) *100vw);
    }
    .productsTopPage .byScene .headingH2
    {
        margin-bottom: calc(calc(20/393) *100vw);
    }
    .productsTopPage .byScene .headingH2 h2
    {
        padding-left: calc(calc(17/393) *100vw);
    }
    .productsTopPage .byScene .headingH2 p
    {
        font-size: calc(calc(14/393) *100vw);

        max-width: calc(calc(346/393) *100vw);
        margin-top: calc(calc(34/393) *100vw);
        margin-left: calc(calc(17/393) *100vw);
    }
    .productsTopPage .byScene .wrapper
    {
        max-width: calc(calc(328/393) *100vw);
        margin-left: calc(calc(24/393) *100vw);
        padding-left: calc(calc(30/393) *100vw);

        background: url('../images/products/sp_by_scene_arrow.svg') no-repeat left top / calc(calc(24/393) *100vw) 100%;
    }
    .productsTopPage .byScene .row
    {
        grid-template-columns: 100%;
        gap: calc(calc(10/393) *100vw) calc(calc(6/393) *100vw);
    }
    .productsTopPage .byScene .row::after
    {
        display: none;
    }
    .productsTopPage .byScene .bySceneSec
    {
        position: relative;

        padding: calc(calc(31/393) *100vw) calc(calc(14/393) *100vw) calc(calc(14/393) *100vw);

        border-radius: calc(calc(10/393) *100vw);

        grid-template-columns: 100%;
        grid-template-rows: auto 1fr;
    }
    .productsTopPage .byScene .bySceneSec::before
    {
        position: absolute;
        top: calc(-1 * calc(calc(20/393) *100vw));
        left: calc(calc(32/393) *100vw);

        width: calc(calc(66/393) *100vw);
        height: calc(calc(61/393) *100vw);
        margin-bottom: 0;
    }
    .productsTopPage .byScene .bySceneSec h2
    {
        font-size: calc(calc(16/393) *100vw);

        position: static;

        width: auto;
        margin: 0 0 calc(calc(10/393) *100vw) calc(calc(125/393) *100vw);

        text-align: left;

        grid-column: 1;
        grid-row: 1;
        translate: 0;
    }
    .productsTopPage .byScene .bySceneSec .listBox
    {
        padding: calc(calc(16/393) *100vw) calc(calc(14/393) *100vw) calc(calc(14/393) *100vw);

        border-radius: calc(calc(10/393) *100vw);

        grid-column: 1;
        grid-row: 2;
    }
    .productsTopPage .byScene .bySceneSec .listBox .read
    {
        line-height: 1;

        max-width: none;
        min-height: 0;
        margin-bottom: 17px;
        padding: 0 calc(calc(18/393) *100vw);
    }
    .productsTopPage .byScene .bySceneSec .listBox .read a
    {
        font-size: calc(calc(12/393) *100vw);
    }
    .productsTopPage .byScene .bySceneSec .listBox .kihon
    {
        padding-bottom: calc(calc(28/393) *100vw);
    }
    .productsTopPage .byScene .bySceneSec .listBox .kihon::after
    {
        bottom: calc(-1 * calc(calc(2/393) *100vw));

        width: calc(calc(36/393) *100vw);
        height: calc(calc(31/393) *100vw);
    }
    .productsTopPage .byScene .bySceneSec .listBox .kihon a
    {
        font-size: calc(calc(12/393) *100vw);

        max-width: calc(calc(110/393) *100vw);
        height: calc(calc(24/393) *100vw);

        border: calc(calc(1/393) *100vw) solid #259a8d;
        border-radius: calc(calc(4/393) *100vw);
    }
    .productsTopPage .byScene .bySceneSec .listBox ul
    {
        padding: 0;

        -moz-columns: 2;
             columns: 2;
        -moz-column-gap: calc(calc(34/393) *100vw);
             column-gap: calc(calc(34/393) *100vw);
    }
    .productsTopPage .byScene .bySceneSec .listBox li
    {
        line-height: 1;

        width: -moz-max-content;
        width:      max-content;
    }
    .productsTopPage .byScene .bySceneSec .listBox li > a
    {
        font-size: calc(calc(12/393) *100vw);
    }
    .productsTopPage .byScene .bySceneSec .listBox li > a::before
    {
        width: calc(calc(4/393) *100vw);
        margin-right: calc(calc(9/393) *100vw);

        background: url('../images/products/grenn_dots.svg') no-repeat center center / calc(calc(4/393) *100vw) auto;
    }
    .productsTopPage .byScene .bySceneSec .listBox li + li
    {
        margin-top: calc(calc(4/393) *100vw);
    }
    .productsTopPage .byScene .bySceneSec1::before
    {
        background-image: -webkit-image-set(
        url('../images/products/by_scene_icon1@0.5x.png') 1x,
        url('../images/products/by_scene_icon1.png') 2x
        );
        background-image:         image-set(
        url('../images/products/by_scene_icon1@0.5x.png') 1x,
        url('../images/products/by_scene_icon1.png') 2x
        );
    }
    .productsTopPage .byScene .bySceneSec2::before
    {
        background-image: -webkit-image-set(
        url('../images/products/by_scene_icon2@0.5x.png') 1x,
        url('../images/products/by_scene_icon2.png') 2x
        );
        background-image:         image-set(
        url('../images/products/by_scene_icon2@0.5x.png') 1x,
        url('../images/products/by_scene_icon2.png') 2x
        );
    }
    .productsTopPage .byScene .bySceneSec3::before
    {
        background-image: -webkit-image-set(
        url('../images/products/by_scene_icon3@0.5x.png') 1x,
        url('../images/products/by_scene_icon3.png') 2x
        );
        background-image:         image-set(
        url('../images/products/by_scene_icon3@0.5x.png') 1x,
        url('../images/products/by_scene_icon3.png') 2x
        );
    }
    .productsTopPage .byScene .bySceneSec4::before
    {
        background-image: -webkit-image-set(
        url('../images/products/by_scene_icon4@0.5x.png') 1x,
        url('../images/products/by_scene_icon4.png') 2x
        );
        background-image:         image-set(
        url('../images/products/by_scene_icon4@0.5x.png') 1x,
        url('../images/products/by_scene_icon4.png') 2x
        );
    }
    .productsTopPage .byScene .bySceneSec5::before
    {
        background-image: -webkit-image-set(
        url('../images/products/by_scene_icon5@0.5x.png') 1x,
        url('../images/products/by_scene_icon5.png') 2x
        );
        background-image:         image-set(
        url('../images/products/by_scene_icon5@0.5x.png') 1x,
        url('../images/products/by_scene_icon5.png') 2x
        );
    }
    /* ==========================================================================
  予約方式別 機能紹介
========================================================================== */
    .productsTopPage .reservationSystem
    {
        margin-top: calc(calc(55/393) *100vw);
    }
    .productsTopPage .reservationSystem .headingH2
    {
        margin-bottom: calc(calc(18/393) *100vw);
    }
    .productsTopPage .reservationSystem .headingH2 h2
    {
        padding-left: calc(calc(17/393) *100vw);
    }
    .productsTopPage .reservationSystem .headingH2 p
    {
        font-size: calc(calc(14/393) *100vw);

        max-width: calc(calc(346/393) *100vw);
        margin-top: calc(calc(34/393) *100vw);
        margin-left: calc(calc(17/393) *100vw);
    }
    .productsTopPage .reservationSystem .row
    {
        max-width: calc(calc(342/393) *100vw);
        margin-left: calc(calc(17/393) *100vw);

        grid-template-columns: 100%;
        gap: calc(calc(10/393) *100vw) 0;
    }
    .productsTopPage .reservationSystem .reservationSystemSec
    {
        padding: calc(calc(9/393) *100vw) calc(calc(10/393) *100vw) calc(calc(14/393) *100vw);

        border-radius: calc(calc(10/393) *100vw);
    }
    .productsTopPage .reservationSystem .reservationSystemSec h2
    {
        font-size: calc(calc(18/393) *100vw);

        width: calc(calc(256/393) *100vw);
        min-height: 2.2em;
        margin-bottom: calc(calc(10/393) *100vw);

        gap: 0 calc(calc(31/393) *100vw);
    }
    .productsTopPage .reservationSystem .reservationSystemSec h2::before
    {
        width: calc(calc(14/393) *100vw);
    }
    .productsTopPage .reservationSystem .reservationSystemSec h2::after
    {
        width: calc(calc(14/393) *100vw);
        height: calc(calc(19/393) *100vw);
    }
    .productsTopPage .reservationSystem .reservationSystemSec .innerBox
    {
        padding: calc(calc(19/393) *100vw);

        border-radius: calc(calc(10/393) *100vw);
    }
    .productsTopPage .reservationSystem .reservationSystemSec .innerBox .illu
    {
        display: flex;

        height: auto;
        margin-bottom: calc(calc(18/393) *100vw);

        justify-content: center;
        align-items: flex-end;
    }
    .productsTopPage .reservationSystem .reservationSystemSec .innerBox p
    {
        font-size: calc(calc(14/393) *100vw);
    }
    .productsTopPage .reservationSystem .reservationSystemSec2 .innerBox .illu,
    .productsTopPage .reservationSystem .reservationSystemSec3 .innerBox .illu
    {
        padding-bottom: 0;
    }
    .productsTopPage .reservationSystem .reservationSystemSec1 .illu img
    {
        width: calc(calc(220/393) *100vw);
    }
    .productsTopPage .reservationSystem .reservationSystemSec2 .illu img
    {
        width: calc(calc(241/393) *100vw);
    }
    .productsTopPage .reservationSystem .reservationSystemSec3 .illu img
    {
        width: calc(calc(225/393) *100vw);
    }
    /* ==========================================================================
  全機能一覧
========================================================================== */
    .productsTopPage .allFunction
    {
        margin-top: calc(calc(53/393) *100vw);
    }
    .productsTopPage .allFunction .headingH2
    {
        margin-bottom: calc(calc(21/393) *100vw);
    }
    .productsTopPage .allFunction .headingH2 h2
    {
        padding-left: calc(calc(10/393) *100vw);
    }
    .productsTopPage .allFunction .headingH2 .line img
    {
        width: calc(calc(199/393) *100vw);
    }
    .productsTopPage .allFunction .allFunctionSec
    {
        display: grid;

        width: calc(calc(350/393) *100vw);
        margin-left: calc(calc(17/393) *100vw);
        padding: 0;

        border: none;

        grid-template-columns: 100%;
    }
    .productsTopPage .allFunction .allFunctionSec header
    {
        margin-bottom: calc(calc(18/393) *100vw);
        padding-right: 0;
    }
    .productsTopPage .allFunction .allFunctionSec header h3
    {
        font-size: calc(calc(20/393) *100vw);

        margin-top: 0;
    }
    .productsTopPage .allFunction .allFunctionSec header p
    {
        font-size: calc(calc(14/393) *100vw);

        margin-top: calc(calc(5/393) *100vw);
    }
    .productsTopPage .allFunction .allFunctionSec + .allFunctionSec
    {
        margin-top: calc(calc(50/393) *100vw);
    }
    .productsTopPage .allFunction .functionIconBoxList
    {
        gap: calc(calc(12/393) *100vw) calc(calc(10/393) *100vw);
    }
    /* ==========================================================================
  footer
========================================================================== */
    .page-template-page-products .footer
    {
        margin-top: calc(calc(50/393) *100vw);
    }
    /*end*/
}