/* -------------------------------base(mobile)↓-------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
:root{
    --site-font-family-Roboto-Flex:"Roboto Flex", sans-serif;
}

h2.bk{
    position: relative;
    z-index: 0;
    height: calc(82 * var(--site-horizontal-ratio));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(18 * var(--site-horizontal-ratio));
    line-height: calc(26.64 * var(--site-horizontal-ratio));
}
h2.bk::before{
    font-family: var(--site-font-family-Roboto-Flex);
    font-weight: 800;
    font-size: calc(70 * var(--site-horizontal-ratio));
    line-height: calc(82.03 * var(--site-horizontal-ratio));
    text-align: center;
    width: fit-content;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #F1F1F1;
    /* color: red; */
    z-index: -1;
}

/* main start */
main{
    position: relative;
    overflow: hidden;
}
/* main end */

/* top start */
.top{
    padding-top: calc(187.63 * var(--site-horizontal-ratio));
    position: relative;
}
.top::before{
    content: "";
    display: block;
    width: calc(780 * var(--site-horizontal-ratio));
    height: calc(780 * var(--site-horizontal-ratio));
    border-radius: 50%;
    /* background:
        linear-gradient(to right,#e7e7e7 0% 25.5%,transparent 25.5% 100%),
        radial-gradient(circle at center,#00B900 0 calc(304 / 2 * var(--site-horizontal-ratio)),aqua calc(305 / 2 * var(--site-horizontal-ratio)) calc(562 / 2 * var(--site-horizontal-ratio)),yellow calc(563 / 2 * var(--site-horizontal-ratio)) calc(780 / 2 * var(--site-horizontal-ratio))); */
    background:
        linear-gradient(to right,#e7e7e7 0% 25.5%,transparent 25.5% 100%),
        radial-gradient(circle at center,#ffffff 0 calc(304 / 2 * var(--site-horizontal-ratio)),#FBFBFB calc(305 / 2 * var(--site-horizontal-ratio)) calc(562 / 2 * var(--site-horizontal-ratio)),#F5F4F4 calc(563 / 2 * var(--site-horizontal-ratio)) calc(780 / 2 * var(--site-horizontal-ratio)));
    position: absolute;
    top: calc(-128 * var(--site-horizontal-ratio));
    left: 50%;
    transform: translate(-50%);
    z-index: -1;
}
.top::after{
    content: "";
    display: block;
    width: calc(100.86 * var(--site-horizontal-ratio));
    height: calc(204.16 * var(--site-horizontal-ratio));
    background-image: url(../images/index/top-p-before.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: calc(405 * var(--site-horizontal-ratio));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.top>p{
    padding-bottom: calc(calc(580 + 154 - 187.63 - 150) * var(--site-horizontal-ratio));
    position: relative;
}
.top>.scrollCampaign{
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: calc(18 * var(--site-horizontal-ratio));
    line-height: calc(32 * var(--site-horizontal-ratio));
    position: absolute;
    bottom: calc(120 * var(--site-horizontal-ratio));
}
.top>.scrollCampaign>a{
    color: var(--site-color-base-brand);
    text-decoration: underline;
    text-underline-offset:calc(3 * var(--site-horizontal-ratio));
}
.top>p::before{
    content: "";
    display: block;
    width: 100vw;
    height: calc(154 * var(--site-horizontal-ratio));
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #e7e7e7;
    z-index: -4;
}
.top>p::after{
    content: "";
    display: block;
    width: 100vw;
    height: calc(154 * var(--site-horizontal-ratio));
    background-image: url(../images/index/top-p-after.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.top>p>span{
    display: block;
    color: var(--site-color-base-gray);
    transform: rotate(-6deg) translateX(calc(15 * var(--site-horizontal-ratio)));
}
.top>p>span:nth-of-type(1){
    font-weight: 700;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(20.72 * var(--site-horizontal-ratio));
    position: relative;
    padding: 0 calc(8 * var(--site-horizontal-ratio));
    margin-left: calc(10 * var(--site-horizontal-ratio));
    width: fit-content;
    transform: rotate(-5.89deg) translateX(calc(10 * var(--site-horizontal-ratio)));
}
.top>p>span:nth-of-type(1)::before,
.top>p>span:nth-of-type(1)::after{
    display: inline-block;
    content: "";
    width: calc(2 * var(--site-horizontal-ratio));
    height: calc(20.43 * var(--site-horizontal-ratio));
    background-color: var(--site-color-base-gray);
    position: absolute;
    bottom: 0;
}
.top>p>span:nth-of-type(1)::before{
    transform: rotate(140.89deg);
    left: 0;
}
.top>p>span:nth-of-type(1)::after{
    transform: rotate(-140.89deg);
    right: 0;
}
.top>p>span:nth-of-type(2){
    font-weight: 700;
    font-size: calc(40 * var(--site-horizontal-ratio));
    line-height: calc(38.72 * var(--site-horizontal-ratio));
}
.top>p>span:nth-of-type(3){
    font-weight: 900;
    font-size: calc(90 * var(--site-horizontal-ratio));
    line-height: calc(90 * var(--site-horizontal-ratio));
    color: var(--site-color-base-brand);
}
.top>.btn{
    margin: calc(calc(754 - 580 - 154) * var(--site-horizontal-ratio)) auto calc(calc(110 - 60) * var(--site-horizontal-ratio) / 2);
    width: calc(350 * var(--site-horizontal-ratio));
    height: calc(60 * var(--site-horizontal-ratio));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.top>.btn::before{
    content: "サイト制作のフリーランスマッチングサービス「びるどる」";
    display: block;
    width: 100vw;
    color: var(--site-color-base-gray);
    font-weight: 400;
    font-size: calc(12 * var(--site-horizontal-ratio));
    line-height: calc(17.76 * var(--site-horizontal-ratio));
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,calc(calc(-2 * calc(754 - 724 - 18)) * var(--site-horizontal-ratio)));
    letter-spacing: 0;
}
.top_splide{
    background: linear-gradient(to bottom,transparent 50%,#CA102E 50% 100%);
}
.top_splide .splide__slide>img{
    width: 100%;
}
/* top end */

/* stroke start */
.stroke{
    background-color: #CA102E;
    padding-top: calc(calc(1052 - 854 - 157.69) * var(--site-horizontal-ratio));
    color: #ffffff;
}
.stroke>h2{
    /* padding-top: calc(calc(1325 - 1052 - 350) * var(--site-horizontal-ratio)); */
    padding-top: calc(50 * var(--site-horizontal-ratio));
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.stroke>h2::before{
    font-family: var(--site-font-family-Roboto-Flex);
    font-weight: 800;
    font-size: calc(80 * var(--site-horizontal-ratio));
    line-height: calc(93.75 * var(--site-horizontal-ratio));
    color: #CA102E;
    text-shadow:
        calc(1 * var(--site-horizontal-ratio)) 0 0 var(--site-color-base-brand),
        calc(1 * var(--site-horizontal-ratio)) calc(1 * var(--site-horizontal-ratio)) 0 var(--site-color-base-brand),
        0 calc(1 * var(--site-horizontal-ratio)) 0 var(--site-color-base-brand),
        calc(-1 * var(--site-horizontal-ratio)) calc(1 * var(--site-horizontal-ratio)) 0 var(--site-color-base-brand),
        calc(-1 * var(--site-horizontal-ratio)) 0 0 var(--site-color-base-brand),
        calc(-1 * var(--site-horizontal-ratio)) calc(-1 * var(--site-horizontal-ratio)) 0 var(--site-color-base-brand),
        0 calc(-1 * var(--site-horizontal-ratio)) 0 var(--site-color-base-brand),
        calc(1 * var(--site-horizontal-ratio)) calc(-1 * var(--site-horizontal-ratio)) 0 var(--site-color-base-brand);
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(-9.68deg) translate(0%,-10%);
    z-index: -1;
}
.stroke>*{
    padding: 0 calc(18 * var(--site-horizontal-ratio));
}
.stroke>img{
    display: block;
    width: calc(100% - calc(40 * var(--site-horizontal-ratio)));
    margin: auto;
    padding: 0;
    border-radius: calc(12 * var(--site-horizontal-ratio));
    box-shadow: 0 calc(10 * var(--site-horizontal-ratio)) calc(20 * var(--site-horizontal-ratio)) 0 #BC0623;
}
.stroke>h2~p{
    margin-top: calc(calc(1405 - 1325 - 60) * var(--site-horizontal-ratio));
}
.quality>h2::before{
    content: "QUALITY";
}
.speedy>h2::before{
    content: "SPEEDY";
}
.speedy{
    padding-bottom: calc(calc(2504 - 2155 - 288) * var(--site-horizontal-ratio));
    position: relative;
    overflow: hidden;
}
.speedy::after{
    content: "";
    display: block;
    width: 100vw;
    height: calc(44.9 * var(--site-horizontal-ratio));
    background-image: url(../images/index/speedy-after.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -1px;
}
/* stroke end */

/* works start */
.works{
    margin-top: calc(calc(2608 - 2504 - 44.9) * var(--site-horizontal-ratio));
}
.works>h2{
    text-align: center;
    position: relative;
}
.works>h2>span{
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(20.72 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,50%);
    display: block;
    width: 100vw;
    word-break: keep-all;
}
.works>h2::before{
    content: "WORKS";
}
.works_splide{
    margin-top: calc(calc(2744 - 2683 - 21) * var(--site-horizontal-ratio));
}
.works_splide section.splide__slide{
    border: calc(1 * var(--site-horizontal-ratio)) solid #EBEBEB;
    /* border: calc(1 * var(--site-horizontal-ratio)) solid red; */
    border-radius: calc(12 * var(--site-horizontal-ratio));
    padding: calc(32 * var(--site-horizontal-ratio)) calc(16 * var(--site-horizontal-ratio));
}
.works_splide section.splide__slide>h3{
    text-align: center;
    font-size: calc(18 * var(--site-horizontal-ratio));
    line-height: calc(26.64 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    margin-bottom: calc(calc(88 - 32 - 27) * var(--site-horizontal-ratio));
}
.works_splide section.splide__slide>div{
    position: relative;
    height: calc(157 * var(--site-horizontal-ratio));
    overflow: hidden;
}
.works_splide section.splide__slide>div>img{
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;
}
.works_splide section.splide__slide>p{
    font-weight: 400;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(20.72 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    margin-top: calc(calc(263 - 88 - 157) * var(--site-horizontal-ratio));
}
.works_splide section.splide__slide>span{
    font-weight: 700;
    font-size: calc(20 * var(--site-horizontal-ratio));
    line-height: calc(29.6 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    margin-top: calc(12 * var(--site-horizontal-ratio));
    display: block;
    width: 100%;
    text-align: center;
    color: var(--site-color-base-brand);
}
.works_splide section.splide__slide>a{
    font-weight: 400;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(20.72 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    margin-top: calc(12 * var(--site-horizontal-ratio));
    display: block;
    width: 100%;
    text-align: center;
    color: var(--site-color-base-brand);
    text-decoration: none;
}
.works>dl{
    width: calc(350 * var(--site-horizontal-ratio));
    margin: auto;
    margin-top: calc(calc(3247 - 2744 - 454) * var(--site-horizontal-ratio));
}
.works>dl>dt{
    font-weight: 700;
    font-size: calc(18 * var(--site-horizontal-ratio));
    line-height: calc(26.64 * var(--site-horizontal-ratio));
    text-align: center;
}
.works>dl>dd{
    margin-top: calc(calc(3294 - 3247 - 27) * var(--site-horizontal-ratio));
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(8 * var(--site-horizontal-ratio));
}
.works>dl>dd>span{
    font-weight: 700;
    font-size: calc(12 * var(--site-horizontal-ratio));
    line-height: calc(17.76 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--site-color-base-brand);
    padding: calc(10 * var(--site-horizontal-ratio));
    border: calc(1 * var(--site-horizontal-ratio)) solid #EBEBEB;
    border-radius: calc(8 * var(--site-horizontal-ratio));
}
.works>.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(350 * var(--site-horizontal-ratio));
    height: calc(56 * var(--site-horizontal-ratio));
    margin: auto;
    margin-top: calc(calc(3464 - 3294 - 130) * var(--site-horizontal-ratio));
}
/* works end */

/* flow start */
.flow{
    margin-top: calc(calc(3580 - 56 - 3464) * var(--site-horizontal-ratio));
    padding-top: calc(calc(3640 - 3580) * var(--site-horizontal-ratio));
}
.flow>*{
    width: calc(350 * var(--site-horizontal-ratio));
    margin: auto;
}
.flow>h2{
    margin-bottom: calc(calc(3762 - 3640 - 82) * var(--site-horizontal-ratio));
}
.flow>h2::before{
    content: "FLOW";
}
.flow>section{
    background-color: var(--site-color-base-brand);
    padding: calc(20 * var(--site-horizontal-ratio));
    border-radius: calc(12 * var(--site-horizontal-ratio));
    display: flex;
    flex-wrap: wrap;
    gap: calc(20 * var(--site-horizontal-ratio));
}
.flow>section::before{
    content: "";
    display: block;
    width: calc(40 * var(--site-horizontal-ratio));
    height: calc(40 * var(--site-horizontal-ratio));
    background-repeat: no-repeat;
    background-size: contain;
    margin: auto;
}
.flow>section:nth-of-type(1):before{
    background-image: url(../images/index/flow-send.svg);
}
.flow>section:nth-of-type(2):before{
    background-image: url(../images/index/flow-chat-typing.svg);
}
.flow>section:nth-of-type(3):before{
    background-image: url(../images/index/flow-contact.svg);
}
.flow>section:first-of-type~section{
    margin-top: calc(20 * var(--site-horizontal-ratio));
}
.flow>section>*{
    width: 100%;
}
.flow>section>h3{
    font-weight: 700;
    font-size: calc(16 * var(--site-horizontal-ratio));
    line-height: calc(23.68 * var(--site-horizontal-ratio));    
    letter-spacing: 0.1em;
    text-align: center;
    color: #ffffff;
}
.flow>section>p{
    font-weight: 400;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(20.72 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    color: #ffffff;
}
.flow>.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(350 * var(--site-horizontal-ratio));
    height: calc(56 * var(--site-horizontal-ratio));
    margin: auto;
    margin-top: calc(calc(4436 - 3762 - 634) * var(--site-horizontal-ratio));
    /* in order to cover the before of reception */
    position: relative;
    z-index: 2;
    /* in order to cover the before of reception */
}
/* flow end */

/* campaign start */
.campaign{
    display: block;
    margin-top: calc(30 * var(--site-horizontal-ratio));
    position: relative;
    z-index: 4;
}
.campaign img{
    width: 100%;
}
/* campaign end */

/* reception start */
.reception{
    --offset:calc(4551 - 4436 - 56);
    padding: calc(calc(4611 - 4551 + var(--offset)) * var(--site-horizontal-ratio)) calc(19 * var(--site-horizontal-ratio)) calc(calc(4551 + 499 - 4611 - 379) * var(--site-horizontal-ratio));
    background: linear-gradient(to bottom,#ffffff 0 calc(var(--offset) * var(--site-horizontal-ratio)),var(--site-color-base-brand) calc(var(--offset) * var(--site-horizontal-ratio)) 100%);
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.reception>h2{
    color: #ffffff;
    font-weight: 700;
    font-size: calc(24 * var(--site-horizontal-ratio));
    line-height: calc(35.52 * var(--site-horizontal-ratio));
}
.reception>h2::before{
    content: "";
    display: block;
    width: calc(67.51 * var(--site-horizontal-ratio));
    height: calc(127.03 * var(--site-horizontal-ratio));
    background-image: url(../images/index/top-p-before.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: calc(274.32 * var(--site-horizontal-ratio));
    top: calc(calc(4526.1 - 4551 + var(--offset)) * var(--site-horizontal-ratio));
    z-index: 0;
    transform: rotate(-38.89deg);
    transform-origin: left;
}
.reception>h2::after{
    content: "";
    display: block;
    width: calc(544 * var(--site-horizontal-ratio));
    height: calc(544 * var(--site-horizontal-ratio));
    border-radius: 50%;
    background:
        linear-gradient(to bottom,#ffffff 0 calc(247 * var(--site-horizontal-ratio)),transparent calc(247 * var(--site-horizontal-ratio)) 100%),
        radial-gradient(circle at center,#BC122D 0 calc(212 / 2 * var(--site-horizontal-ratio)),#CB1834 calc(213 / 2 * var(--site-horizontal-ratio)) calc(392 / 2 * var(--site-horizontal-ratio)),#D72340 calc(393 / 2 * var(--site-horizontal-ratio)) calc(544 / 2 * var(--site-horizontal-ratio)));
    position: absolute;
    top: calc(calc(-247 + var(--offset)) * var(--site-horizontal-ratio));
    left: calc(72 * var(--site-horizontal-ratio));
    z-index: -2;
}
.reception>P{
    margin-top: calc(calc(4703 - 4611 - 72) * var(--site-horizontal-ratio));
    color: #ffffff;
    font-weight: 400;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(20.72 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
.reception>span{
    display: block;
    margin-top: calc(calc(4827 - 4703 - 84) * var(--site-horizontal-ratio));
    color: #ffffff;
    font-weight: 700;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(20.72 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
.reception>.btn{
    display: flex;
    align-items: center;
    /* width: calc(351 * var(--site-horizontal-ratio)); */
    height: calc(56 * var(--site-horizontal-ratio));
    justify-content: center;
}
.reception>.btn:nth-of-type(1){
    background-color: #ffffff;
    color: var(--site-color-base-brand);
    margin-top: calc(calc(4860 - 4827 - 21) * var(--site-horizontal-ratio));
}
.reception>.btn:nth-of-type(1)::after{
    background-image: url(../images/index/btn-arrow-brand.svg);
}
.reception>.btn:nth-of-type(2){
    background-color: #00B900;
    margin-top: calc(calc(74 - 56) * var(--site-horizontal-ratio));
}
/* reception end */

/* services start */
.services{
    width: calc(350 * var(--site-horizontal-ratio));
    margin: calc(50 * var(--site-horizontal-ratio)) auto 0;
}
.services>h2{
    text-align: center;
}
.services>ul>li{
    margin-top: calc(30 * var(--site-horizontal-ratio));
}
.services>ul>li>span{
    display: block;
    text-align: center;
    color: var(--site-color-base-brand);
    font-weight: 700;
    font-size: calc(18 * var(--site-horizontal-ratio));
    line-height: calc(36 * var(--site-horizontal-ratio));
    letter-spacing: 0.05em;
}
.services>ul>li>ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: calc(10 * var(--site-horizontal-ratio));
}
.services>ul>li>ul>li{
    width: 48%;
    border: 2px solid var(--site-color-base-brand);
    border-radius: calc(8 * var(--site-horizontal-ratio));
    padding: calc(15 * var(--site-horizontal-ratio)) calc(5 * var(--site-horizontal-ratio)) calc(5 * var(--site-horizontal-ratio)) calc(5 * var(--site-horizontal-ratio));
}
.services>ul>li>ul>li>span{
    display: block;
    width: fit-content;
    margin: auto;
    text-align: center;
    background-color: var(--site-color-base-brand);
    color: #ffffff;
    font-weight: 700;
    font-size: calc(16 * var(--site-horizontal-ratio));
    line-height: calc(32 * var(--site-horizontal-ratio));
    letter-spacing: 0.05em;
    padding: 0 calc(10 * var(--site-horizontal-ratio));
    border-radius: calc(5 * var(--site-horizontal-ratio));
}
.services>ul>li>ul>li>img{
    display: block;
    width: calc(50 * var(--site-horizontal-ratio));
    margin: calc(15 * var(--site-horizontal-ratio)) auto 0;
}
.services>ul>li>ul>li>p{
    margin: calc(15 * var(--site-horizontal-ratio)) auto 0;
    font-weight: 400;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(20.72 * var(--site-horizontal-ratio));
    letter-spacing: 0.05em;
    padding: 0 calc(10 * var(--site-horizontal-ratio));
    border-radius: calc(5 * var(--site-horizontal-ratio));
}
.services>.btn{
    margin-top: calc(25 * var(--site-horizontal-ratio));
}
/* services end */

/* qa start */
.qa{
    margin-top: calc(calc(5110 - 4551 - 499) * var(--site-horizontal-ratio));
    padding: 0 calc(19 * var(--site-horizontal-ratio));
    position: relative;
    z-index: 4;
}
.qa>h2{
    margin-bottom: calc(calc(5232 - 5110 - 82) * var(--site-horizontal-ratio));
}
.qa>h2::before{
    content: "Q&A";
}
.qa>section:first-of-type~section{
    margin-top: calc(20 * var(--site-horizontal-ratio));
}
.qa>section>h3{
    background-color: var(--site-color-base-brand);
    border-radius: 100px;
    height: calc(40 * var(--site-horizontal-ratio));
    padding: 0 calc(20 * var(--site-horizontal-ratio));
    display: flex;
    align-items: center;
    gap: calc(10 * var(--site-horizontal-ratio));
    font-weight: 700;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(20.72 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    color: #ffffff;
}
.qa>section>h3::before{
    content: "Q";
    font-family: var(--site-font-family-Roboto-Flex);
    font-weight: 800;
    font-size: calc(20 * var(--site-horizontal-ratio));
    line-height: calc(23.44 * var(--site-horizontal-ratio));
}
.qa>section>p{
    margin-top: calc(calc(52 - 40) * var(--site-horizontal-ratio));
    padding-left: calc(10 * var(--site-horizontal-ratio));
    font-weight: 400;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(20.72 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
/* qa end */

.qa+.reception>h2::before{
    top: calc(15 * var(--site-horizontal-ratio));
}
.qa+.reception>h2{
    margin-bottom: calc(30 * var(--site-horizontal-ratio));
}

/* column start */
.column{
    margin-top: calc(calc(6334 - 5232 - 1042) * var(--site-horizontal-ratio));
    padding: calc(calc(6394 - 6334) * var(--site-horizontal-ratio)) calc(20 * var(--site-horizontal-ratio)) calc(calc(6334 + 698 - 6516 - 456) * var(--site-horizontal-ratio));
    background-color: #F5F5F5;
    /* background-color: rebeccapurple; */
}
.column>h2{
    margin-bottom: calc(calc(6516 - 6394 - 82) * var(--site-horizontal-ratio));
}
.column>h2::before{
    content: "COLUMN";
}
.column>a{
    display: flex;
    align-items: center;
    width: 100%;
    gap: calc(10 * var(--site-horizontal-ratio));
    background-color: #ffffff;
    text-decoration: none;
    color: var(--site-color-base-gray);
    padding: calc(18 * var(--site-horizontal-ratio));
    border-radius: calc(10 * var(--site-horizontal-ratio));
    font-weight: 700;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(20.72 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
}
.column>a::after{
    content: "";
    display: block;
    width: calc(24 * var(--site-horizontal-ratio));
    height: calc(12 * var(--site-horizontal-ratio));
    background-image: url(../images/index/btn-arrow-brand.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
.column>a:first-of-type~a{
    margin-top: calc(20 * var(--site-horizontal-ratio));
}
/* column end */

/* notice start */
.notice{
    margin-top: calc(calc(7092 - 6334 - 698) * var(--site-horizontal-ratio));
    padding: 0 calc(20 * var(--site-horizontal-ratio));
}
.notice>ul{
    font-size: calc(18 * var(--site-horizontal-ratio));
    line-height: calc(27 * var(--site-horizontal-ratio));
}
.notice>ul{
    margin-top: calc(calc(7129 - 7092 - 27) * var(--site-horizontal-ratio));
    border: calc(1 * var(--site-horizontal-ratio)) solid var(--site-color-base-gray);
    padding: calc(20 * var(--site-horizontal-ratio));
    display: flex;
    flex-wrap: wrap;
    gap: calc(10 * var(--site-horizontal-ratio));
}
.notice>ul>li{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: calc(10 * var(--site-horizontal-ratio));
}
.notice>ul>li>*{
    width: 100%;
    font-weight: 500;
    font-size: calc(14 * var(--site-horizontal-ratio));
    line-height: calc(21 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    text-decoration: none;
    color: var(--site-color-base-gray);
}
/* notice end */

/* overlay start */
.overlay{
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    padding: calc(5 * var(--site-horizontal-ratio));
}
@keyframes overlay_fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.overlay_fadeIn{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    position: fixed;
    z-index: 9999;
    bottom: 0;
    animation:overlay_fadeIn 0.5s linear;
}
.overlay>a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 49%;
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    font-size: calc(16 * var(--site-horizontal-ratio));
    line-height: calc(24 * var(--site-horizontal-ratio));
    letter-spacing: 0.1em;
    border-radius: calc(5 * var(--site-horizontal-ratio));
}
.overlay>a:nth-of-type(1){
    background-color: #E03751;
    box-shadow: inset 0 calc(-3 * var(--site-horizontal-ratio)) 0 0 #c1122d, 0 calc(3 * var(--site-horizontal-ratio)) calc(8 * var(--site-horizontal-ratio)) #b1b1b1;
}
.overlay>a:nth-of-type(2){
    background-color: #F5AA00;
    box-shadow: inset 0 calc(-3 * var(--site-horizontal-ratio)) 0 0 #c1122d, 0 calc(3 * var(--site-horizontal-ratio)) calc(8 * var(--site-horizontal-ratio)) #b1b1b1;
}
.overlay>a:nth-of-type(2)>span{
    font-size: calc(12 * var(--site-horizontal-ratio));
}
/* overlay end */

/*== landscape responsive ==*/
@media screen and (max-width: 767px) and (orientation: landscape){
}
/*== landscape responsive ==*/
/* -------------------------------base(mobile)↑-------------------------------------- */

/* ---------------------------desktop(include ipad)↓--------------------------------- */
@media screen and (min-width: 768px){
    h2.bk{
        height: calc(141 * var(--site-horizontal-ratio));
        font-size: calc(38 * var(--site-horizontal-ratio));
        line-height: calc(56.24 * var(--site-horizontal-ratio));
    }
    h2.bk::before {
        font-size: calc(120 * var(--site-horizontal-ratio));
        line-height: calc(140.63 * var(--site-horizontal-ratio));
    }

    /* top start */
    .top{
        position: relative;
        padding-top: calc(340 * var(--site-horizontal-ratio));
    }
    .top::before{
        width: calc(1596 * var(--site-horizontal-ratio));
        height: calc(1596 * var(--site-horizontal-ratio));
        top: calc(-371 * var(--site-horizontal-ratio));
        left: initial;
        right: calc(calc(1440 - 1596 + 354) * var(--site-horizontal-ratio));
        transform: initial;
        /* background:radial-gradient(circle at center,#00B900 0 calc(620 / 2 * var(--site-horizontal-ratio)),aqua calc(621 / 2 * var(--site-horizontal-ratio)) calc(1150 / 2 * var(--site-horizontal-ratio)),yellow calc(1151 / 2 * var(--site-horizontal-ratio)) calc(1596 / 2 * var(--site-horizontal-ratio))); */
        background:radial-gradient(circle at center,#ffffff 0 calc(620 / 2 * var(--site-horizontal-ratio)),#FBFBFB calc(621 / 2 * var(--site-horizontal-ratio)) calc(1150 / 2 * var(--site-horizontal-ratio)),#F5F4F4 calc(1151 / 2 * var(--site-horizontal-ratio)) calc(1596 / 2 * var(--site-horizontal-ratio)));
    }
    .top::after{
        width: calc(215.28 * var(--site-horizontal-ratio));
        height: calc(455.59 * var(--site-horizontal-ratio));
        top: calc(192.19 * var(--site-horizontal-ratio));
        left: calc(1017.08 * var(--site-horizontal-ratio));
        transform: initial;
    }
    .top>p{
        position: initial;
        padding-left: calc(147 * var(--site-horizontal-ratio));
        padding-bottom: calc(calc(319 + 610 - 243 - 316.54 - calc(157.69 / 2)) * var(--site-horizontal-ratio));
    }
    .top>.scrollCampaign{
        width: fit-content;
        font-size: calc(24 * var(--site-horizontal-ratio));
        line-height: calc(42 * var(--site-horizontal-ratio));
        bottom: calc(100 * var(--site-horizontal-ratio));
        right: calc(60 * var(--site-horizontal-ratio));
    }
    .top>.scrollCampaign>a{
        cursor: pointer;
    }
    .top>p::before{
        height: 100%;
        top: 0;
    }
    .top>p::after{
        width: 100vw;
        height: calc(319 * var(--site-horizontal-ratio));
        top: calc(580 * var(--site-horizontal-ratio));
        background-image: url(../images/index/top-p-after-desktop.png);
        background-size: cover;
    }
    .top>p>span:nth-of-type(1){
        font-weight: 700;
        font-size: calc(20 * var(--site-horizontal-ratio));
        line-height: calc(29.6 * var(--site-horizontal-ratio));
        margin-left: 0;
        transform: rotate(-6deg);
    }
    .top>p>span:nth-of-type(2){
        font-weight: 700;
        font-size: calc(50 * var(--site-horizontal-ratio));
        line-height: calc(0 * var(--site-horizontal-ratio));
        transform: rotate(-6deg);
    }
    .top>p>span:nth-of-type(3){
        font-size: calc(140 * var(--site-horizontal-ratio));
        line-height: calc(180 * var(--site-horizontal-ratio));
        transform: rotate(-6deg);
    }
    .top>.btn{
        position: absolute;
        z-index: 5;
        top: calc(639 * var(--site-horizontal-ratio));
        left: calc(159 * var(--site-horizontal-ratio));
        margin: auto;
        width: calc(480 * var(--site-horizontal-ratio));
        height: calc(80 * var(--site-horizontal-ratio));
        flex-wrap: wrap;
        padding: calc(15 * var(--site-horizontal-ratio)) calc(30 * var(--site-horizontal-ratio));
    }
    .top>.btn::before{
        position: initial;
        width: 100%;
        transform: initial;
        color: #ffffff;
    }
    .top_splide{
        position: relative;
        z-index: 1;
    }
    /* top end */

    /* stroke end */
    .stroke{
        padding: calc(calc(1088 - 850 - 157.69) * var(--site-horizontal-ratio)) calc(40 * var(--site-horizontal-ratio)) 0;
    }
    .stroke>*{
        padding: 0;
    }
    .stroke>h2{
        overflow: initial;
        padding-top: calc(calc(1168 - 1088) * var(--site-horizontal-ratio));
        text-align: left;
        font-size: calc(38 * var(--site-horizontal-ratio));
        line-height: calc(56.24 * var(--site-horizontal-ratio));
    }
    .stroke>h2::before{
        font-size: calc(180 * var(--site-horizontal-ratio));
        line-height: calc(210.94 * var(--site-horizontal-ratio));
        transform: rotate(-9.68deg) translate(calc(-28 * var(--site-horizontal-ratio)), -35%);
    }
    .stroke>h2~p{
        margin-top: calc(calc(1310 - 112 - 1168) * var(--site-horizontal-ratio));
    }
    .stroke>img{
        width: calc(380 * var(--site-horizontal-ratio));
        width: calc(580 * var(--site-horizontal-ratio));
        position: relative;
        z-index: 1;
    }
    .quality{
        display: grid;
        grid-template-areas: 
            "quality-h2 quality-img"
            "quality-p1 quality-img"
            "quality-p2 quality-img";
        column-gap: calc(84 * var(--site-horizontal-ratio));
    }
    .quality>h2{
        grid-area: quality-h2;
    }
    .quality>h2::before{
        transform: rotate(-9.68deg) translate(calc(-60 * var(--site-horizontal-ratio)), -35%);
    }
    .quality>img{
        grid-area: quality-img;
    }
    .quality>p:nth-of-type(1){
        grid-area: quality-p1;
    }
    .quality>p:nth-of-type(2){
        grid-area: quality-p2;
    }
    .speedy{
        display: grid;
        grid-template-areas: 
            "speedy-img speedy-h2"
            "speedy-img speedy-p1";
        column-gap: calc(84 * var(--site-horizontal-ratio));
        justify-content: flex-start;
        padding-bottom: calc(166 * var(--site-horizontal-ratio));
    }
    .speedy::after {
        content: "";
        display: block;
        width: 100vw;
        height: calc(166 * var(--site-horizontal-ratio));
        background-image: url(../images/index/speedy-after-desktop.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
    }
    .speedy>h2{
        grid-area: speedy-h2;
    }
    .speedy>h2::before{
        z-index: -1;
        transform: rotate(-9.68deg) translate(calc(-88 * var(--site-horizontal-ratio)), -35%);
    }
    .speedy>img{
        grid-area: speedy-img;
    }
    .speedy>p:nth-of-type(1){
        grid-area: speedy-p1;
    }
    /* stroke end */

    /* works end */
    .works{
        margin-top: calc(calc(2305 - 2068 - 166) * var(--site-horizontal-ratio));
    }
    .works>h2>span{
        font-size: calc(16 * var(--site-horizontal-ratio));
        line-height: calc(23.68 * var(--site-horizontal-ratio));
    }
    .works_splide{
        margin-top: calc(calc(2486 - 2305 - 141) * var(--site-horizontal-ratio));
    }
    .works>dl{
        width: auto;
        margin: auto;
        margin-top: calc(calc(2980 - 2486 - 454) * var(--site-horizontal-ratio));
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: calc(calc(392 - 216 - 116) * var(--site-horizontal-ratio));
    }
    .works>dl>dt{
        padding-left: calc(116 * var(--site-horizontal-ratio));
    }
    .works>dl>dd{
        margin-top: 0;
        gap: calc(20 * var(--site-horizontal-ratio));
    }
    .works>dl>dd>span{
        font-weight: 700;
        font-size: calc(16 * var(--site-horizontal-ratio));
        line-height: calc(23.68 * var(--site-horizontal-ratio));
    }
    .works>.btn{
        margin-top: calc(calc(3064 - 2980 - 44) * var(--site-horizontal-ratio));
        width: calc(260 * var(--site-horizontal-ratio));
    }
    /* works end */

    /* flow start */
    .flow{
        margin-top: calc(calc(3280 - 3064 - 56) * var(--site-horizontal-ratio));
        display: grid;
        grid-template-areas: 
            "flow-h2 flow-h2 flow-h2"
            "flow-section1 flow-section2 flow-section3"
            "flow-btn flow-btn flow-btn";
        grid-template-columns: 1fr 1fr 1fr;
        padding: 0 calc(40 * var(--site-horizontal-ratio));
        column-gap: calc(20 * var(--site-horizontal-ratio));
    }
    .flow>h2{
        grid-area: flow-h2;
        margin-bottom: calc(calc(3461 - 3280 - 141) * var(--site-horizontal-ratio));
    }
    .flow>section{
        width: 100%;
        height: 100%;
        padding: calc(30 * var(--site-horizontal-ratio)) calc(20 * var(--site-horizontal-ratio));
    }
    .flow>section:first-of-type~section{
        margin-top: 0;
    }
    .flow>section:nth-of-type(1){
        grid-area: flow-section1;
    }
    .flow>section:nth-of-type(2){
        grid-area: flow-section2;
    }
    .flow>section:nth-of-type(3){
        grid-area: flow-section3;
    }
    .flow>.btn{
        grid-area: flow-btn;
        width: calc(260 * var(--site-horizontal-ratio));
        margin-top: calc(calc(3728 - 3461 - 227) * var(--site-horizontal-ratio));
    }
    /* flow end */

    .campaign{
        display: block;
        width: fit-content;
        height: calc(250 * var(--site-horizontal-ratio));
        margin: calc(50 * var(--site-horizontal-ratio)) auto;
    }
    .campaign img{
        width: auto;
        height: 100%;
    }

    /* reception start */
    .reception{
        --offset: calc(3862 - 3728 - 56);
        padding: calc(calc(3922 - 3862 + var(--offset)) * var(--site-horizontal-ratio)) calc(98 * var(--site-horizontal-ratio)) calc(170 * var(--site-horizontal-ratio));
        display: grid;
        grid-template-areas: 
            "reception-h2 reception-h2"
            "reception-p reception-p"
            "reception-span reception-span"
            "reception-btn1 reception-btn2";
        grid-template-columns: calc(260 * var(--site-horizontal-ratio)) 1fr;
        column-gap: calc(calc(376 - 260 - 98) * var(--site-horizontal-ratio));
    }
    .reception>h2{
        font-size: calc(32 * var(--site-horizontal-ratio));
        line-height: calc(47.36 * var(--site-horizontal-ratio));
        grid-area: reception-h2;
        text-align: left;
    }
    .reception>h2::before{
        width: calc(110.48 * var(--site-horizontal-ratio));
        height: calc(233.8 * var(--site-horizontal-ratio));
        left: calc(1110.88 * var(--site-horizontal-ratio));
        top: calc(calc(3823.49 - 3862 + var(--offset)) * var(--site-horizontal-ratio));
        transform: initial;
        transform-origin: initial;
    }
    .reception>h2::after{
        width: calc(916 * var(--site-horizontal-ratio));
        height: calc(916 * var(--site-horizontal-ratio));
        background:
            linear-gradient(to bottom, #ffffff 0 calc(326 * var(--site-horizontal-ratio)), transparent calc(326 * var(--site-horizontal-ratio)) 100%),
            radial-gradient(circle at center, #BC122D 0 calc(356 / 2 * var(--site-horizontal-ratio)), #CB1834 calc(357 / 2 * var(--site-horizontal-ratio)) calc(660 / 2 * var(--site-horizontal-ratio)), #D72340 calc(661 / 2 * var(--site-horizontal-ratio)) calc(916 / 2 * var(--site-horizontal-ratio)));
        top: calc(calc(-326 + var(--offset)) * var(--site-horizontal-ratio));
        left: calc(715 * var(--site-horizontal-ratio));
    }
    .reception>P{
        margin-top: calc(calc(4056 - 3922 - 94) * var(--site-horizontal-ratio));
        grid-area: reception-p;
    }
    .reception>p::after{
        content: "";
        display: block;
        width: 100vw;
        height: calc(452 * var(--site-horizontal-ratio));
        background-image: url(../images/index/reception-bottom.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }
    .reception>span{
        margin-top: calc(calc(4118 - 4056 - 42) * var(--site-horizontal-ratio));
        margin-bottom: calc(calc(4151 - 21 - 4118) * var(--site-horizontal-ratio));
        grid-area: reception-span;
    }
    .reception>.btn{
        width: calc(260 * var(--site-horizontal-ratio));
    }
    .reception>.btn:nth-of-type(1){
        grid-area: reception-btn1;
        margin-top: 0;
    }
    .reception>.btn:nth-of-type(2){
        grid-area: reception-btn2;
        margin-top: 0;
    }
    /* reception end */

    /* services start */
    .services{
        width: calc(990 * var(--site-horizontal-ratio));
    }
    .services>h2{
        font-size: calc(38 * var(--site-horizontal-ratio));
        line-height: calc(56.24 * var(--site-horizontal-ratio));
    }
    .services>ul>li{
        margin-top: calc(50 * var(--site-horizontal-ratio));
    }
    .services>ul>li>span{
        font-size: calc(22 * var(--site-horizontal-ratio));
        line-height: calc(48 * var(--site-horizontal-ratio));
    }
    .services>ul>li>ul{
        justify-content: flex-start;
        margin-top: calc(25 * var(--site-horizontal-ratio));
    }
    .services>ul>li>ul>li{
        width: calc(calc(100% - calc(40 * var(--site-horizontal-ratio))) / 5);
    }
    .services>.btn{
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(56 * var(--site-horizontal-ratio));
        width: calc(260 * var(--site-horizontal-ratio));
        margin: calc(calc(3728 - 3461 - 227) * var(--site-horizontal-ratio)) auto 0;
    }
    /* services end */

    /* qa start */
    .qa{
        padding: 0;
        margin: auto;
        margin-top: calc(calc(4445 - 3776 - 589) * var(--site-horizontal-ratio));
        width: calc(990 * var(--site-horizontal-ratio));
        display: flex;
        flex-wrap: wrap;
        column-gap: calc(calc(990 - 480 - 480) * var(--site-horizontal-ratio));
    }
    .qa>h2{
        width: 100%;
        margin-bottom: calc(calc(4604 - 4445 - 141) * var(--site-horizontal-ratio));
    }
    .qa>section{
        width: calc(480 * var(--site-horizontal-ratio));
    }
    .qa>section,
    .qa>section:first-of-type~section{
        margin-top: calc(calc(4806 - 4604 - 162) * var(--site-horizontal-ratio));
    }
    .qa>section>h3{
        height: calc(60 * var(--site-horizontal-ratio));
        padding: calc(12 * var(--site-horizontal-ratio)) calc(20 * var(--site-horizontal-ratio));
        font-size: calc(16 * var(--site-horizontal-ratio));
        line-height: calc(23.68 * var(--site-horizontal-ratio));
        gap: calc(20 * var(--site-horizontal-ratio));
    }
    .qa>section>h3::before{
        font-size: calc(30 * var(--site-horizontal-ratio));
        line-height: calc(35.16 * var(--site-horizontal-ratio));
    }
    .qa>section>p {
        margin-top: calc(calc(4682 - 4604 - 60) * var(--site-horizontal-ratio));
        padding-left: calc(20 * var(--site-horizontal-ratio));
    }
    /* qa end */

    .qa+.reception>.btn:nth-of-type(1)::before{
        content: "";
        display: block;
        width: 100vw;
        height: calc(452 * var(--site-horizontal-ratio));
        background-image: url(../images/index/reception-bottom.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0%;
        transform: translate(calc(-110 * var(--site-horizontal-ratio)), -40%);
        z-index: -1;
        pointer-events: none;
    }
    .qa+.reception::after {
        background: linear-gradient(to bottom, transparent calc(326 * var(--site-horizontal-ratio)), #D72340 calc(326 * var(--site-horizontal-ratio)) 80%, transparent 80% 100%);
    }
    .qa+.reception::before {
        background: linear-gradient(to bottom, transparent calc(198 * var(--site-horizontal-ratio)), #CB1834 calc(198 * var(--site-horizontal-ratio)) 90%, transparent 90% 100%);
    }


    /* column end */
    .column{
        margin-top: calc(calc(5251 - 4445 - 725) * var(--site-horizontal-ratio));
        padding: calc(calc(5331 - 5251) * var(--site-horizontal-ratio)) calc(20 * var(--site-horizontal-ratio)) calc(calc(5251 + 641 - 5752 - 60) * var(--site-horizontal-ratio));
    }
    .column>h2{
        margin-bottom: calc(calc(5512 - 5331 - 141) * var(--site-horizontal-ratio));
    }
    .column>a{
        width: 100%;
        padding: calc(18 * var(--site-horizontal-ratio)) calc(30 * var(--site-horizontal-ratio));
        border-radius: calc(30 * var(--site-horizontal-ratio));
        font-size: calc(16 * var(--site-horizontal-ratio));
        line-height: calc(23.68 * var(--site-horizontal-ratio));
        letter-spacing: 0.1em;
        width: calc(940 * var(--site-horizontal-ratio));
        height: calc(60 * var(--site-horizontal-ratio));
        margin: auto;
    }
    .column>a::after {
        width: calc(32 * var(--site-horizontal-ratio));
        height: calc(16 * var(--site-horizontal-ratio));
    }
    .column>a:first-of-type~a{
        margin-top: calc(calc(5592 - 5512 - 60) * var(--site-horizontal-ratio));
    }
    /* column end */

    /* notice start */
    .notice{
        margin-top: calc(calc(5972 - 5251 - 641) * var(--site-horizontal-ratio));
        position: relative;
    }
    h2{
        text-align: center;
        font-size: calc(18 * var(--site-horizontal-ratio));
        line-height: calc(26.64 * var(--site-horizontal-ratio));
    }
    .notice>ul{
        width: calc(980 * var(--site-horizontal-ratio));
        margin: auto;
        margin-top: calc(calc(6029 - 5972 - 27) * var(--site-horizontal-ratio));
        border: calc(1 * var(--site-horizontal-ratio)) solid #A9A9A9;
        border-radius: calc(20* var(--site-horizontal-ratio));
        padding: calc(calc(6069 - 6029) * var(--site-horizontal-ratio)) calc(calc(270 - 230) * var(--site-horizontal-ratio));
        gap: calc(20 * var(--site-horizontal-ratio));
    }
    .notice>ul>li{
        flex-wrap: nowrap;
        gap: calc(40 * var(--site-horizontal-ratio));
    }
    .notice>ul>li>*{
        line-height: calc(20.72 * var(--site-horizontal-ratio));
    }
    .notice>ul>li>time{
        width: calc(119 * var(--site-horizontal-ratio));
        word-break: keep-all;
    }
    /* notice end */

    /* overlay start */
    .overlay{
        display: none !important;
    }
    .overlay_fadeIn{
        display: none !important;
        opacity: 0;
    }
    /* overlay end */
}
/* ---------------------------desktop(include ipad)↑--------------------------------- */