@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap');

/* ======================================================================

    2025.11  STYLE  /  Midoricheck Project

    ▼ Fonts
      Zen Maru Gothic
        font-family: "Zen Maru Gothic", serif;
        300 / 400 / 500 / 700 / 900

      Zen Kaku Gothic New
        font-family: "Zen Kaku Gothic New", sans-serif;
        300 / 400 / 500 / 700

      System fallback
        "Helvetica Neue", Arial,
        "Hiragino Kaku Gothic ProN", "Hiragino Sans",
        Meiryo, sans-serif;

    ▼ DOM Structure
      <main>
        ├─ midoricheck-mv
        └─ midoricheck__content
             ├─ midoricheck__info-group
             │     ├─ midoricheck-overview
             │     └─ midoricheck-flow
             ├─ midoricheck-example
             ├─ midoricheck__app-group
             │     ├─ app-guide
             │     ├─ app-detail
             │     └─ app-register
             └─ app-intro

====================================================================== */


/*============================================================
   common
============================================================*/

:root {
    /* ---------- breakpoint ---------- */
    --bp-sp: 599px;
    --bp-pc: 600px;

    /* ---------- colors ---------- */
    --color-green: #009245;
    --color-yellow: #ffff00;
    --color-green-bg-light: #DCF0E6;

    /* ---------- font sizes ---------- */
    --font-size-h2: 6.4vw;
    --font-size-h3: 4.5333vw;
    --font-size-h4: 4.2667vw;
    --font-size-lead: 4.8vw;
    --font-size-p: 4vw;
    --font-size-small: 4vw;
    --font-size-x-small: 3.7333vw;

    /* ---------- logo ---------- */
    --logo__midoricheck-size: 60vw;
    --logo__midoricheck-aspect: 6.25/1;

    /* ---------- width ---------- */
    --conts-width: 96%;
    --conts-width-max: 96%;

    --card-width: 90%;
    --card-width-max: 825px;
    --card-width-max-720: 720px;
}
@media (min-width: 600px) {
    :root {
        /* ---------- font sizes ---------- */
        --font-size-h2: 24px;
        --font-size-h3: 17px;
        --font-size-h4: 16px;
        --font-size-lead: 18px;
        --font-size-p: 16px;
        --font-size-small: 15px;
        --font-size-x-small: 14px;
        
        /* ---------- logo ---------- */
        --logo__midoricheck-size: 280px;
        
    }
}

@media (max-width: 599px) {
    .br__pc{display: none;}
}
@media (min-width: 600px) {
    .br__sp{display: none;}
}

main h2{
    font-weight: 700;
    line-height: 100%;
    letter-spacing:-0.05em;
}
main h3,main h4{
    font-weight: 500;
    line-height: 125%;
    letter-spacing:-0.05em;
}
main .txt__note{
    font-size: 12px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing:-0.07em;
}

main .txt__kerning{ margin-left: -.5em }
main .txt__line{
    font-weight: 700;
    padding-bottom:0px;
    border-bottom:2.5px solid #FF0;
}
    @media screen and (min-width: 600px){
        main .txt__line{
            padding-bottom:2px;
        }
    }

/*============================================================
   midoricheck-mv
============================================================*/
.midoricheck-mv{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background:var(--color-green-bg-light);
}
.mv__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width:1900px;
    overflow: hidden;
}
    @media screen and (min-width: 600px) and (max-width: 767px){
        .mv__inner{
            height: 900px;
        }
    }
    @media screen and (min-width: 768px) and (max-width: 1200px){
        .mv__inner{
            height: 675px;
        }
    }
    @media screen and (min-width: 1201px) and (max-width: 1620px){
        .mv__inner{
            aspect-ratio: 1900 / 1069;
        }
    }
    @media screen and (min-width: 1620px){
        .mv__inner{
            height: 900px;
        }
    }

.mv__inner:before{
    position: absolute;
    transform:translateX(-50%);
    top:0;
    left: 50%;
    width: 100%;
    content:"";
}

    @media screen and (max-width: 599px){
        .mv__inner:before{
            height: 184vw;
            aspect-ratio: 25/46;
            background: url("../images/mv/mv_bg_sp.webp") 0 0 / 100% no-repeat;
        }
    }
    @media screen and (min-width: 600px) and (max-width: 767px){
        .mv__inner:before{
            height: 900px;
            background: url("../images/mv/mv_bg_tab.webp") center 0 no-repeat;
            background-size: auto 900px;
        }
    }
    @media screen and (min-width: 768px) and (max-width: 899px){
        .mv__inner:before{
            height: 675px;
            background: url("../images/mv/mv_bg_tabp.webp") center 0 no-repeat;
            background-size: auto 675px;
        }
    }
    @media screen and (min-width: 900px) and (max-width: 1200px){
        .mv__inner:before{
            height: 675px;
            background: url("../images/mv/mv_bg_pc.webp") center 0 no-repeat;
            background-size: auto 675px;
        }
    }
    @media screen and (min-width: 1201px) and (max-width: 1620px){
        .mv__inner:before{
            width: 100%;
            aspect-ratio: 1900 / 1069;
            background: url("../images/mv/mv_bg_pc.webp") 0 0 / 100% no-repeat;
        }
    }
    @media screen and (min-width: 1621px){
        .mv__inner:before{
            width: 1900px;
            height: 900px;
            aspect-ratio: 1900 / 1069;
            background: url("../images/mv/mv_bg_pc.webp") 0 80% / 100% no-repeat;
        }
    }

  .mv__frame{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    z-index: 10;
}
@media (max-width:599px){
    .mv__frame{
        width: 100vw;
        aspect-ratio: 25/46;
    }
}
@media (min-width:600px) and (max-width:767px){
    .mv__frame{
        width: 100%;
        aspect-ratio: unset; 
    }
}
@media (min-width:768px){
    .mv__frame{
        width: 698px;
        align-items:center;
        aspect-ratio: unset;
    }
}
.mv__catch-top{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-weight: 700;
    color: var(--color-green);
    background: #FFF;
}
    @media screen and (max-width: 599px){
        .mv__catch-top{
            top:5.33vw;
            left: 5.33vw;
            width: 61.33vw;
            height: 11.47vw;
            font-size: 5.33vw;
            border-radius: 11.47vw;
        }
    }

    @media screen and (min-width: 600px) and (max-width: 767px){
        .mv__catch-top{
            top:20px;
            left: 20px;
            width: 345px;
            height: 64px;
            font-size: 30px;
            border-radius: 64px;
        }
    }
    @media screen and (min-width: 768px){
        .mv__catch-top{
            top:84px;
            left: 20px;
            width: 230px;
            height: 43px;
            font-size: 20px;
            border-radius: 43px;
        }
    }

        /* mv__body ----------------------------------------- */
        .mv__body{
            position: absolute;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        @media (max-width:599px){
            .mv__body{
                top: 32.8vw;
                height: auto;
            }
        }
        @media (min-width:600px) and (max-width:767px){
            .mv__body{
                top: 132px;
                height: auto;
            }
        }
        @media (min-width:768px){
            .mv__body{
                top: 168px;
                height: 336px;
                align-items: flex-end;
            }
        }
        @media (min-width:1201px) and (max-width:1620px){
            .mv__body{
                top: 14vw;
            }
        }
        @media (min-width:1621px){
            .mv__body{
                top: 227px;
            }
        }

        /* mv__img　 */
        .mv__body .mv__img{
            position: absolute;
            flex-shrink: 0;
            font-size: 0;
            border-radius: 0 0 100% 100%;
            left: 0;
            transform: none;
            left: auto;
        }
        .mv__body .mv__img .mv__img-inner{
            width: 100%;
            flex-shrink: 0;
            font-size: 0;
            border-radius: 0 0 100% 100%;
            left: 0;
            transform: none;
            left: auto;
            overflow: hidden;
        }
        .mv__body .mv__img:before{
            position: absolute;
            bottom: 4%;
            width: 100%;
            aspect-ratio: 1 / 1;
            background: #fff;
            border-radius: 100%;
            content: "";
            transform: none;
            left: auto;
        }
        @media (max-width:599px){
            .mv__body .mv__img{
                top: 16vw;
                width: 35.47vw;
                height: 41.33vw;
                aspect-ratio: unset;
            }
        }
        @media (min-width:600px) and (max-width:767px){
            .mv__body .mv__img{
                top: 96px;
                width: 200px;
                height: 232px;
                aspect-ratio: unset;
            }
        }
        @media (max-width:767px){
            .mv__body .mv__img,
            .mv__body .mv__img:before{
                left: 50%;
                transform: translateX(-50%);
            }
        }
        @media (min-width:768px){
            .mv__body .mv__img{
                left: 0;
                top: 0;
                transform: none;
                width: 290px;
                height: 336px;
                aspect-ratio: unset;
                z-index: 10;
            }
            .mv__body .mv__img:before{
                transform: none;
                bottom: 0px;
                margin-left: 6px
            }
        }


        /* mv__body-box ----------------------------------------- */
        .mv__body-box{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
        @media (max-width:599px){
            .mv__body-box{
                gap: 22.4vw;
            }
        }
        @media (min-width:600px) and (max-width:767px){
            .mv__body-box{
                gap: 130px;
            }
        }
        @media (min-width:768px){
            .mv__body-box{
                width: auto;
                margin-top: 56px;
                padding: 20px 54px;
                gap: 10px;
                background: #FFF;
            }
        }
   

    /* mv__catch-mid ----------------------------------------- */
    .mv__body .mv__catch-mid{
        position: relative;
        font-size: 0;
        flex-shrink: 0;
        overflow: hidden;
    }

    .mv__body .mv__catch-mid:before,
    .mv__body .mv__catch-mid:after{
        position: absolute;
        top: 0;
        content: "";
    }
    @media (max-width:599px){
        .mv__body .mv__catch-mid{
            width: 74.67vw;
            height: 32vw;
        }
        .mv__body .mv__catch-mid:before{
            left: 50%;
            transform: translateX(-50%);
            width: 74.67vw;
            height: 74.67vw;
            background: url("../images/mv/mv_catch_bg_sp.svg") 0 0 / 100% no-repeat;
        }
        .mv__body .mv__catch-mid:after{
            left: 50%;
            transform: translateX(-50%);
            width: 74.67vw;
            height: 32vw;
            background: url("../images/mv/mv_catch_sp.svg") 0 0 / 100% no-repeat;
        }
    }
    @media (min-width:600px) and (max-width:767px){
        .mv__body .mv__catch-mid{
            width: 420px;
            height: 180px;
        }
        .mv__body .mv__catch-mid:before{
            left: 50%;
            transform: translateX(-50%);
            width: 420px;
            height: 420px;
            background: url("../images/mv/mv_catch_bg_sp.svg") 0 0 / 100% no-repeat;
        }
        .mv__body .mv__catch-mid:after{
            left: 50%;
            transform: translateX(-50%);
            width: 420px;
            height: 180px;
            background: url("../images/mv/mv_catch_sp.svg") 0 0 / 100% no-repeat;
        }
    }
    @media (min-width:768px){
        .mv__body .mv__catch-mid{
            width: 328px;
            height: 26px;
        }
        .mv__body .mv__catch-mid:before{
            left: 0;
            transform: none;
            width: 192px;
            height: 27px;
            background: url("../images/mv/mv_catch_bg_pc.svg") 0 0 / auto 27px no-repeat;
        }
        .mv__body .mv__catch-mid:after{
            left: 0;
            transform: none;
            width: 328px;
            height: 27px;
            background: url("../images/mv/mv_catch_pc.svg") 0 0 / 100% no-repeat;
        }
    }




    /* mv__title ----------------------------------------- */
    .mv__body .mv__title{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 20;
    }

    .mv__body .mv__title .mv__lead{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        color: #FFF;
        font-weight: 700;
        line-height: 100%;
        letter-spacing:0.05em;
        background: url("../images/mv/mv_txt_01.svg") 0 0 / 100% no-repeat;
    }

    .mv__body .mv__title .mv__title-txt{
        position: relative;
        font-size: 0;
        flex-shrink: 0;
    }

    .mv__body .mv__title .mv__title-txt:after{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        content:"";
        background: url("../images/mv/mv_txt_02.svg") 0 0 / 100% no-repeat;
    }
        @media (max-width:599px){
            .mv__body .mv__title{
                width: 74.67vw;
                gap: 2.67vw;
            }
            .mv__body .mv__title .mv__lead{
                height: 6.93vw;
                font-size: 4vw;
            }
            .mv__body .mv__title .mv__title-txt{
                width: 74.67vw;
                height: 19.2vw;
            }
            .mv__body .mv__title .mv__title-txt:after{
                width: 74.67vw;
                height: 19.2vw;
            }
        }
        @media (min-width:600px) and (max-width:767px){
            .mv__body .mv__title{
                width: 448px;
                gap: 16px;
            }
            .mv__body .mv__title .mv__lead{
                height: 42px;
                font-size: 24px;
            }
            .mv__body .mv__title .mv__title-txt{
                width: 448px;
                height: 115px;
            }
            .mv__body .mv__title .mv__title-txt:after{
                width: 448px;
                height: 115px;
            }
        }
        @media (min-width:768px){
            .mv__body .mv__title{
                width: 350px;
                gap: 10px;
            }
            .mv__body .mv__title .mv__lead{
                height: 32px;
                font-size: 20px;
            }

            .mv__body .mv__title .mv__title-txt{
                width: 350px;
                height: auto;
                aspect-ratio: 47/12;
            }
            .mv__body .mv__title .mv__title-txt:after{
                width: 350px;
                height: auto;
                aspect-ratio: 47/12;
                background-size: 100% auto;
            }
        }


/* animation  ------------------------------------------------ */
.mv__inner:before{
    opacity: 0;
    animation: fadeIn .7s linear 0s forwards;
}
.mv__catch-top{
    opacity: 0;
    animation: slideUp 1.5s cubic-bezier(0.2,0.8,0.3,1) .7s forwards;
}
.mv__body .mv__catch-mid{
    opacity: 0;
    animation: slideUp 1.5s cubic-bezier(0.2,0.8,0.3,1) 1.2s forwards;
}
.mv__body{
    opacity: 0;
    animation: slideUp 1.5s cubic-bezier(0.2,0.8,0.3,1) 1.2s forwards;
}

.mv__body .mv__catch-mid:before{
    opacity: 0;
    animation: fadeIn 1.5s cubic-bezier(0.33,0,0.2,1) 1.7s forwards;
}

@keyframes slideUp {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeSlideUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/*============================================================
   Layout
============================================================*/

.midoricheck__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 72px;
    gap: 72px;
}

.midoricheck__info-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 40px;
}
.midoricheck__app-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 54px;
}
    @media (min-width: 600px){
        .midoricheck__content {
            padding-top: 62px;
            padding-bottom: 84px;
            gap: 84px;
        }
        .midoricheck__info-group {
            gap: 62px;
        }
    }


/*============================================================
   Sections
============================================================*/

/* ------------------------------------------------------------
   midoricheck-overview
------------------------------------------------------------ */
.midoricheck-overview{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.33vw;
    width: var(--card-width);
    max-width: var(--card-width-max);
    padding: 9.6vw 8vw 20.27vw;
    border-radius: 30px;
    background: var(--color-green);
}
    @media (min-width: 600px) {
        .midoricheck-overview{
            padding: 30px 45px 60px;
            gap: 20px;
        }
    }

/* overview__head ------------------------------------------------ */
.overview__head{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
    .overview__head h2{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        font-size: var(--font-size-h2);
        color: #ffff;
    }
    .overview__head h2 .logo__midoricheck{
        display: block;
        width: var(--logo__midoricheck-size);
        aspect-ratio: var(--logo__midoricheck-aspect);
        font-size: 0;
        background:url("../images/check/txt_about-check-wh.svg") 0 0 / 100% no-repeat;
    }
    .overview__head p{
        font-size: var(--font-size-lead);
        font-weight: 700;
        line-height: 174%;
        color: #FFF;
    }
    @media (min-width: 600px) {
        .overview__head h2{
            flex-direction: row;
        }
        .overview__head p{
            line-height: 180%;
        }
    }
/* overview__line ------------------------------------------------ */
.overview__line{
    width: 100%;
    height: 0.6933vw;
     background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='8' height='2.6'>\
    <circle cx='1.3' cy='1.3' r='1.3' fill='%23fff' />\
    </svg>");
    background-repeat: repeat-x;
    background-size: 2.1333vw 0.6933vw; 
}
    @media (min-width: 600px) {
        .overview__line{
            height: 2.6px;
            background-size: 8px 2.6px; 
        }
    }

/* overview__body ------------------------------------------------ */
.overview__body{
}
    .overview__body:before{
        float: right;
        display: block;
        width: 20vw;
        aspect-ratio: 15 / 17;
        content:"";
        shape-outside: inset(calc(100% - 2em) 0 0 0);
    }
    .overview__body-pict{
        position: absolute;
        display: block;
        width: 24vw;
        aspect-ratio: 15 / 17;
        bottom: -16vw;
        right: -4.8vw;
    }
    .overview__body-pict img{
        width: 100%;
        height: auto;
    }
    @media (min-width: 600px) {
        .overview__body{
            display: flex;
            flex-direction:row-reverse;
        }
        .overview__body:before{
            float:none;
            display: block;
            width: 80px;
            shape-outside:none;
            flex-shrink: 0;
        }
        .overview__body-pict{
            width: 90px;
            top: 8px;
            bottom:auto;
            right: -12px;
        }
    }
    .overview__body p{
        font-size: var(--font-size-p);
        font-weight: 500;
        line-height: 180%;
        letter-spacing: -0.05em;
        color: #FFF;
    }
    .overview__body p .txt__line{
        font-size: 112.5%;
    }
    @media (min-width: 600px) {
        .overview__body p{
        }
    }
    @media (min-width: 900px) {
        .overview__body p .txt__line{
            display: inline-block;
        }
    }


/* ------------------------------------------------------------
   midoricheck-flow
------------------------------------------------------------ */
.midoricheck-flow{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-green-bg-light);
}
    @media (max-width: 599px) {
        .midoricheck-flow{
            width: var(--card-width);
            max-width: var(--card-width-max);
            padding: 9.6vw 8vw;
            border-radius: 30px;
        }
    }
    @media (min-width: 600px) {
        .midoricheck-flow{
            width: 100%;
            padding: 84px 30px;
        }
    }
    @media (min-width: 1000px) {
        .midoricheck-flow{
            padding-left: 0;
            padding-right: 0;
        }
    }

    /* flow__inner ------------------------------------------------ */
    .flow__inner{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    @media (max-width: 599px) {
        .flow__inner{
            gap: 12.8vw;
        }
    }
    @media (min-width: 600px) {
        .flow__inner{
            gap: 48px;
            width: 100%;
            max-width:1000px;
        }
    }

    /* midoricheck-flow ------------------------------------------------ */
    .midoricheck-flow h2{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3.2vw;/* 12px */
        font-size: var(--font-size-h2);
        line-height: 100%;
        color: var(--color-green);
    }
    .midoricheck-flow h2 .logo__midoricheck{
        display: block;
        width: var(--logo__midoricheck-size);
        aspect-ratio: var(--logo__midoricheck-aspect);
        font-size: 0;
        background:url("../images/check/txt_about-check-gr.svg") 0 0 / 100% no-repeat;
    }
    @media (min-width: 600px) {
        .midoricheck-flow h2{
            gap: 12px;
        }
    }

/* flow__block ------------------------------------------------ */
.flow__block{
    display: flex;
    flex-direction: column;
    gap: 4.8vw;/* 18px */
}
@media (min-width: 600px) {
    .flow__block{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 32px;
        width: 100%;
        max-width:710px;
    }
}
@media (min-width: 1000px) {
    .flow__block{
        width: 100%;
        max-width:100%;
    }
}
    /* flow__box */
    .flow__block .flow__box{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10.13vw;/* 38px */
        border-bottom: 2px solid var(--color-green);
        padding-bottom: 12.8vw;/* 48px */
    }
    .flow__block .flow__box:last-child{
        border-bottom: none;
    }
    @media (min-width: 600px) {
        .flow__block .flow__box{
            flex-basis:calc((100% - calc(38px * 2))/ 2) ;
            gap: 38px;
            border-bottom: none;
            padding-bottom: 0px;
        }
        .flow__block .flow__box:after{
                position: absolute;
                top:0;
                right: -32px;
                width: 32px;
                height: 47px;
                background: no-repeat center/contain url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 47'><path d='M0 0 31.553 23.273 0 46.644Z' fill='%2399D3B5'/></svg>");
                content: "";
                display: block;
        }
        .flow__block .flow__box:last-child:after{
                display: none;
        }
    }
    @media (min-width: 1000px) {
        .flow__block .flow__box{
            flex-basis:calc((100% - calc(38px * 3))/ 4) ;
        }
    }

        /* flow__box-head */
        .flow__block .flow__box-head{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2.67vw;
            }
            .flow__block .flow__box-head h3{
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2.67vw;
                font-size: var(--font-size-h3);
                font-weight: 700;
                line-height: 150%;
                text-align: center;
                color: var(--color-green);
            }
            .flow__block .flow__box-head h3 .icon__number{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 13.07vw;
                height: 13.07vw;
                padding-bottom: 2.5%;
                border-radius: 50%;
                font-size: 11.73vw;
                line-height: 100%;
                text-align: center;
                text-indent: -.03em;
                color: #FFF;
                background: var(--color-green);
            }
            .flow__block .flow__box-head .txt__note{
                text-align: center;
            }
            @media (min-width: 600px){
                /* flow__box-head */
                .flow__block .flow__box-head{
                    min-height: 162px;
                    gap: 10px;
                    }
                    .flow__block .flow__box-head h3{
                        gap: 10px;
                    }
                    .flow__block .flow__box-head h3 .icon__number{
                        width: 49px;
                        height: 49px;
                        padding-bottom: 2.5%;
                        font-size: 44px;
                    }
            }

        /* flow__box-pict */
        .flow__block .flow__box-pict{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 47.463vw;
            aspect-ratio: 1/1;
            border-radius: 50%;
            border: 4px solid var(--color-green);
            flex-shrink: 0;
        }
        .flow__block .flow__box-pict img.pict-img{
            aspect-ratio: 1/1;
            width: 45.33vw;
            flex-shrink: 0;
        }
            .flow__block .flow__box-pict:before{
                position: absolute;
                top: 50%;
                left:50%;
                transform: translateX(-50%) translateY(-50%);
                width: 46vw;
                aspect-ratio: 1/1;
                border-radius: 50%;
                background:url("../images/check/pict_check-bg.webp") 0 0 / 100% no-repeat;
                content: "";
                display: block;
                overflow: hidden;
                z-index: -1;
            }
            .flow-01 .pict-01_txt-01,
            .flow-01 .pict-01_txt-02,
            .flow-01 .pict-01_txt-03{
                position: absolute;
            }
                .flow-01 .pict-01_txt-01 img,
                .flow-01 .pict-01_txt-02 img,
                .flow-01 .pict-01_txt-03 img{
                    width: 100%;
                    height: auto;
                    overflow: visible;
                    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.20));
                }
                .flow-01 .pict-01_txt-01{
                    width: 17.9vw;
                    top: -5.33vw;
                    right: -4.8vw;
                }
                .flow-01 .pict-01_txt-02{
                    width: 21.3vw;
                    top: 2.13vw;
                    left: -6.93vw;
                }
                .flow-01 .pict-01_txt-03{
                    width: 13.3vw;
                    top: 24vw;
                    left: -3.73vw;
                }

                .flow-02 .pict-02_txt-01,
                .flow-02 .pict-02_txt-02,
                .flow-02 .pict-02_txt-03{
                    position: absolute;
                }
                .flow-02 .pict-02_txt-01 img,
                .flow-02 .pict-02_txt-02 img,
                .flow-02 .pict-02_txt-03 img{
                    width: 100%;
                    height: auto;
                    overflow: visible;
                    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.20));
                }
                .flow-02 .pict-02_txt-01{
                    width: 25.1vw;
                    top: -6.4vw;
                    right: -6.93vw;
                }
                .flow-02 .pict-02_txt-02{
                    width: 20.3vw;
                    top: -3.2vw;
                    left: -9.07vw;
                }
                .flow-02 .pict-02_txt-03{
                    width: 15.5vw;
                    top: 24vw;
                    left: -3.73vw;
                }
                .flow-02 .pict-illust{
                    position: absolute;
                    width: 20.3vw;
                    right: -11.73vw;
                    bottom: -3.2vw;
                }
                .flow-02 .pict-illust img{
                    width: 100%;
                    height: auto;
                }
            @media (min-width: 600px){
                /* flow__box-pict */
                .flow__block .flow__box-pict{
                    width: 178px;
                }
                    .flow__block .flow__box-pict:before{
                        width: 170px;
                        border-radius: 170px;
                    }
                    .flow-01 .pict-01_txt-01{
                        width: 67px;
                        top:-20px;
                        right:-18px;
                    }
                    .flow-01 .pict-01_txt-02{
                        width: 80px;
                        top:8px;
                        left:-26px;
                    }
                    .flow-01 .pict-01_txt-03{
                        width: 50px;
                        top:90px;
                        left:-14px;
                    }
                    .flow-02 .pict-02_txt-01{
                        width: 94px;
                        top:-24px;
                        right:-26px;
                    }
                    .flow-02 .pict-02_txt-02{
                        width: 76px;
                        top:-12px;
                        left:-34px;
                    }
                    .flow-02 .pict-02_txt-03{
                        width: 58px;
                        top:90px;
                        left:-14px;
                    }
                    .flow-02 .pict-illust{
                        width: 76px;
                        right: -44px;
                        bottom:-12px;
                    }
            }

        /* flow__box-example */
        .flow__block .flow__box-example{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .flow__block .flow__unit-example{
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px;
            gap: 10px;
            background: #FFF;
        }
            .flow__block .flow__unit-example h4{
                font-size:var(--font-size-small);
                line-height: 100%;
                text-align: center;
                color: #009245;
            }
            .flow__block .flow__unit-example ul{
                display: flex;
                flex-direction: column;
            }
            .flow__block .flow__unit-example ul li{
                font-size:var(--font-size-small);
                font-weight: 500;
                line-height: 150%; 
                letter-spacing:-0.05em;
            }
            .flow__block .flow__unit-example ul li:before{
                content: "・";
            }
            @media (min-width: 600px) {
                .flow__block .flow__unit-example h4{
                    font-size:12px;
                }
                .flow__block .flow__unit-example ul li{
                    font-size:12px;
                }
            }


/* ------------------------------------------------------------
   midoricheck-example
------------------------------------------------------------ */
.midoricheck-example{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 5.3vw;
    gap: 10.7vw;
    overflow: hidden;
}
@media (min-width: 600px) {
    .midoricheck-example{
        padding-bottom: 24px;
        gap: 20px;
    }
}


/* example__head ------------------------------------------------ */
.example__head{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}
    .example__head-box{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        font-size: var(--font-size-lead);
        font-weight: 700;
        line-height: 100%;
        text-align: center;
        color:var(--color-green);
    }
    .example__head-line-l,
    .example__head-line-r{
        position: absolute;
        display: block;
        top: 50%;
        width: 3px;
        height: 110px;
        border-radius: 3px;
        background: var(--color-green);
    }
        .example__head-line-l{
            transform:translateY(-50%) rotate(-30deg);
            left: 5vw;
        }
        .example__head-line-r{
            transform:translateY(-50%) rotate(30deg);
            right: 5vw;
        }
        @media (min-width: 600px) {
            .example__head-line-l{
                left: 0;
            }
            .example__head-line-r{
                right: 0;
            }
        }
    .example__head .example__head-txt{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
    }
    .example__head .inBk{
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .example__head .txt__tuna-ag-app{
        width: 48.8vw;
        aspect-ratio: 183/ 30;
        font-size:0;
        background:url("../images/txt_tsuna-ag-app.svg") 0 0 / 100% no-repeat;
    }
    @media (min-width: 600px) {
        .example__head .example__head-txt{
            flex-direction:row;
            gap: 0;
        }
        .example__head .txt__tuna-ag-app{
            width: 220px;
        }
    }

/* example__app ------------------------------------------------ */
.example__app{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13.3vw;
}
@media (min-width: 600px) {
    .example__app{
        gap: 50px;
    }
}

    .example__app .example__unit-logo{
        width: 36vw;
    }
    .example__app .example__unit-logo img{
        width:100%;
        height: auto;
    }
    .example__app .example__app-list{
        display: flex;
    }
    .example__app-list-wrap{
        display: flex;
        align-items: center;
        width: 100%;
        overflow: hidden;
    }
    .example__app-list-wrap ul{
        width: 584px;
    }
    .example__app-list-wrap ul li{
        width: 146px;
        padding: 0 8px;
    }
    .example__app .example__app-list img{
        width: 100%;
        height: auto;
    }

    @media (min-width: 600px) {
        .example__app-list-wrap{
            max-width: 920px;
        }
        .example__app .example__unit-logo{
            width: 162px;
        }
        .example__app-list-wrap ul{
            width: 1288px;
        }
        .example__app-list-wrap ul li{
            width: 184px;
        }
    }


/* ------------------------------------------------------------
   app-guide
------------------------------------------------------------ */
.app-guide{
    display: flex;
    width: 100%;
    padding: 17.07vw 0 11.2vw;
    flex-direction: column;
    align-items: center;
    background: var(--color-green-bg-light);
}
.guide__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--card-width);
    max-width: var(--card-width-max-720);
    padding-bottom: 5.33vw;
    gap: 10.67vw;
}
    @media (min-width: 600px) {
        .app-guide{
            padding: 64px 0;
        }
        .guide__inner{
            padding-bottom: 20px;
            gap: 40px;
        }
    }

    /* guide__head */
    .guide__head{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .guide__head h2{
        color: var(--color-green);
        text-align: center;
        font-size: var(--font-size-h2);
    }
    
    /* guide__checkList */
    .guide__checkList{
        width:100%;
        border-collapse: collapse;
        border-spacing: 0;
    }
    .guide__checkList thead tr{
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .guide__checkList thead th{
        display: flex;
        flex: 1;
        padding: 3.2vw 0;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #FFF;
        font-size: var(--font-size-h3);
        font-weight: 700;
    }
    .guide__checkList thead th.guide__col-title-01{
        background: var(--color-green);
        width: 46vw;
    }
    .guide__checkList thead th.guide__col-title-02{
        padding: 4.53vw 0 3.2vw;
        border-radius: 20px 20px 0 0;
        background: #22A7AE;
        line-height: 120%;
    }
    @media (min-width: 600px) {
        .guide__checkList thead th{
            flex: auto;
            padding: 12px 0;
        }
        .guide__checkList thead th.guide__col-title-01{
            width: 172.5px;
        }
        .guide__checkList thead th.guide__col-title-02{
            width : calc(100% - 172.5px) ;
            padding: 22px 0 17px;
        }
    }

    .guide__checkList tbody{
        background: #B3B3B3;
        display: flex;
        flex-direction: column;
        gap:1px;
    }
    .guide__checkList tbody tr{
        display: flex;
        justify-content: center;
        gap:1px;
    }
    .guide__checkList tbody th{
        display: flex;
        flex: 0 0 50%;
        align-items: center;
        padding: 4.8vw 3.2vw;
        gap: 10px;
        background: #FFF;
        color: #333;
        font-size:var(--font-size-lead);
        font-weight: 500;
        line-height: 125%;
        letter-spacing: -0.05em;
        box-sizing: border-box;
    }
    .guide__checkList tbody td{
        display: flex;
        flex: 0 0 50%;
        padding: 4.8vw 2.13vw;
        background: #FFF;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        box-sizing: border-box;
    }
    .guide__checkList tbody td img{
        width: 100%;
    }
    .guide__checkList tbody .row__empty th{
        background: #F2F2F2;
        color: #B3B3B3;
        font-size: var(--font-size-p);
    }
    .guide__checkList tbody .row__empty td{
        justify-content: center;
        align-items: center;
        padding: 0 2.67vw;
        background: #F2F2F2;
        color: #B3B3B3;
        font-size: var(--font-size-p);
    }
    @media (min-width: 600px) {
        .guide__checkList tbody th{
            flex: auto;
            width: 172px;
            padding: 18px 12px;
            gap: 10px;
        }
        .guide__checkList tbody td{
            flex-wrap: wrap;
            flex-direction:row;
            justify-content: flex-start;
            flex: auto;
            width : calc(100% - 172px) ;
            padding: 18px 8px;
            gap: 10px;
        }
        .guide__checkList tbody td img{
            width: 152px;
        }
        .guide__checkList tbody .row__empty td{
            padding: 0 10px;
        }
    }

/* ------------------------------------------------------------
   app-detail
------------------------------------------------------------ */
.app-detail{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
/* detail__inner ------------------------------------------------ */
.app-detail__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--conts-width);
    max-width: var(--card-width-max-720);
}
    /* app-detail__head ------------------------------------------------ */
    .app-detail__head{
        display: flex;
        align-items: flex-end;
        gap: 5px;
    }
    .app-detail__head-image{
        display: block;
        width: 115px;
        height: 135px;
        aspect-ratio: 23/27;
        overflow: hidden;
    }
    .app-detail__head h2{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding-bottom: 15px;
        font-size: var(--font-size-h2);
        line-height: 125%;
        color: var(--color-green);
    }
    @media (min-width: 600px) {
        .app-detail__head{
            gap: 15px;
        }
        .app-detail__head h2{
            padding-bottom: 35px;
        }
    }
    /* app-detail__list ------------------------------------------------ */
    .app-detail__list{
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        z-index: 10;
    }
    .app-detail__item-block{
        display: flex;
        flex-direction: column;
    }

    /* app-detail__item-head ------------------------------------------------ */
    .app-detail__item-head{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
        .app-detail__item-head h3{
            display: flex;
            align-items: center;
            flex: 1 0 0;
            width : calc(100% - 114px);
            align-self: stretch;
            padding: 0 18px;
            gap: 10px;
            font-size: 22px;
            color: #FFF;
            background: linear-gradient(180deg, #009245 0%, #008345 75%, #007445 100%);
        }
        .app-detail__item-head .app-detail__item-head-more{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 114px;
            height: 114px;
            flex-shrink: 0;
            gap: 12px;
            font-size: clamp(14px, var(--font-size-small), 18px);
            font-weight: 500;
            line-height: 125%;
            letter-spacing:-0.05em;
            color: #FFF;
            background: linear-gradient(0deg, #2289AE 0%, #2299AE 25%, #22A7AE 100%);
        }
        .app-detail__item-head .app-detail__item-head-more span{
            text-align: center;
        }
                .app-detail__item-head .app-detail__item-head-more .txt__more::before{
                    content: "クリック";
                }

                @media (hover: none) {
                .app-detail__item-head .app-detail__item-head-more .txt__more::before{
                    content: "タップ";
                }
            }
        .app-detail__item-head .app-detail__item-head-more:after{
            width: 12px;
            height: 7px;
            aspect-ratio: 12/7;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'><path d='M1 1l5 5 5-5' stroke='white' stroke-width='2' stroke-linecap='square'/></svg>");
            content: "";
        }
        .app-detail__item-head.acco_open-tit .app-detail__item-head-more:after{
            width: 12px;
            height: 7px;
            aspect-ratio: 12/7;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'><path d='M1 1l5 5 5-5' stroke='white' stroke-width='2' stroke-linecap='square'/></svg>");
            content: "";
            transform-origin: center;
            transform: scale(1, -1);
        }

    /* app-detail__item-body ------------------------------------------------ */
    .app-detail__item-body{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 30px;
        padding: 24px;
        background: var(--color-green-bg-light);
    }
    @media (min-width: 768px){
        .app-detail__item-body{
            padding: 30px 56px;
        }
    }
        .app-detail__check{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            gap: 2.67vw;
            padding: 4vw;
            background: #F2FAF6;
            border: 1px solid var(--color-green);
        }
        .app-detail__check h4{
            color: var(--color-green);
            font-size: var(--font-size-h4);
            flex-shrink: 0;
    }
        .app-detail__check ul{
            display: flex;
            flex-direction: column;
    }
        .app-detail__check li{
            display: flex;
            gap: 1.33vw;
            font-size:var(--font-size-p);
            font-weight: 500;
            line-height: 160%;
        }
        .app-detail__check li:before{
            display: flex;
            align-items: center;
            width: 4.27vw;
            height:4.27vw;
            flex-shrink: 0;
            margin-top: 1.87vw;
            background:url("../images/use/icon_check.svg") 0 0 / 100%;
            content:"";
        }
        @media (min-width: 600px) {
            .app-detail__check{
                padding: 15px;
                flex-direction:row;
                align-items: center;
                gap: 10px;
            }
            .app-detail__check li{
                gap: 5px;
            }
            .app-detail__check li:before{
                margin-top: 7px;
                width: 16px;
                height: 16px;
            }
        }
        @media (min-width: 768px) {
            .app-detail__check h4{
                padding-left: 1em;
                padding-right: 1em;
            }
        }

    /* app-detail__app-list ------------------------------------------------ */
    .app-detail__app-list{
        display: flex;
        flex-direction: column;
        gap: 16.53vw;
    }
    @media (min-width: 600px){
        .app-detail__app-list{
            gap: 62px;
        }
    }
        .app-detail__app{
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 16.53vw;
            gap: 8vw;
            border-bottom: 1px solid var(--color-green);
        }
        .app-detail__app:last-child{
            border-bottom:none;
            padding-bottom: 0;
        }
        .app-detail__app h4{
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5.33vw;
        }
        .app-detail__app h4 span.icon__pc{
            display: none;
        }
        .app-detail__app h4 span{
            color: var(--color-green);
            text-align: center;
            font-size: 5.33vw;
            font-weight: 700;
            line-height: 100%;
        }
        .app-detail__app h4 img{
            width: 64vw;
        }
        @media (min-width: 600px){
            .app-detail__app{
                padding-bottom: 62px;
                gap: 30px;
            }
            .app-detail__app h4{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: 16px;
            }
            .app-detail__app h4 span.icon__pc{
                display: flex;
            }
            .app-detail__app h4 span{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 82px;
                height: 82px;
                gap: 10px;
                text-align: center;
                font-size: 15px;
                line-height: 140%;
                border-radius: 15px;
                border: 3px solid var(--color-green);
            }
            .app-detail__app h4 img{
                width: 240px;
            }
        }
    /* app-detail__app-body-area */
    .app-detail__app-body-area{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8vw;
    }
        @media (min-width: 600px){
            .app-detail__app-body-area{
                flex-direction:row;
                gap:20px;
            }
            .app-detail__app-body-area:after{
                width: 234px;
                height: 234px;
                display: block;
                content: "";
                flex-shrink: 0;
            }
        }
    /* app-detail__app-img */
    .app-detail__app-img{
        flex-shrink: 0;
        width: 62.4vw;
        height: 72.27vw;
        aspect-ratio: 234/271;
        border-radius: 0 0 62.4vw 62.4vw;
    }
    .app-detail__app-img:before{
        position: absolute;
        left: 50%;
        bottom: 0;
        transform:translateX(-50%);
        flex-shrink: 0;
        width: 62.4vw;
        aspect-ratio: 1/1;
        border-radius:100%;
        background: #fff;
        filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.10));
        content: "";
    }
        @media (min-width: 600px) {
            .app-detail__app-img{
                position: absolute;
                transform:translateY(-50%);
                top: 50%;
                margin-top: -16px;
                right: 0;
                width: 234px;
                height: 271px;
            }
            .app-detail__app-img:before{
                width: 234px;
            }
        }
    /* app-detail__app-body */
    .app-detail__app-body{
        display: flex;
        flex-direction: column;
        gap: 3.73vw;
    }
        @media (min-width: 600px){
            .app-detail__app-body{
                gap: 14px;
            }
        }
    /* app-detail__app-point */
    .app-detail__app-point{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4.8vw;
        padding: 4vw 4.8vw;
        border-radius: 15px;
        border: 3px solid;
        background: #FFF;
    }
        .app-detail__app-point-icon{
            display: flex;
            justify-content: center;
            flex-direction: column; 
            align-items: center;
            width: 17.07vw;
            height: 17.07vw;
            flex-shrink: 0;
        }
        .app-detail__app-point h5{
            padding-top: 2.67vw;
            display: block;
            width: 16vw;
            font-size:12px;
            letter-spacing: -0.2em;
        }
        .app-detail__app-point h5 svg{
            overflow: visible;
        }
        .app-detail__app-point h5 path{
            fill: none;
        }
        .app-detail__app-point h5:before,
        .app-detail__app-point h5:after{
            position: absolute;
            transform: translateX(-50%) translateY(-50%);
            top: 10.67vw;
            left:50%;
            display: block;
            width: 13.33vw;
            height: 13.33vw;
            flex-shrink: 0;
            content:"";
            border-radius: 50%;
        }
        .app-detail__app-point h5:after{
            background: url("../images/use/icon_good.svg") 50% 40% / 70% no-repeat;
        }
        .app-detail__app-point p{
            text-align: justify;
            font-size:var(--font-size-p);
            line-height: 150%;
        }
            /* color*/
            .app_mikata .app-detail__app-point{ border-color: #0E6EB8}
            .app_mikata .app-detail__app-point h5 text{ fill: #0E6EB8; }
            .app_mikata .app-detail__app-point h5:before{ background: #0E6EB8 }

            .app_mushikin .app-detail__app-point{ border-color: #22A7AE}
            .app_mushikin .app-detail__app-point h5 text{ fill: #22A7AE }
            .app_mushikin .app-detail__app-point h5:before{ background: #22A7AE }

            .app_expests .app-detail__app-point{ border-color: #009245}
            .app_expests .app-detail__app-point h5 text{ fill: #009245 }
            .app_expests .app-detail__app-point h5:before{ background: #009245 }

            .app_noyaku .app-detail__app-point{ border-color: #6D519B}
            .app_noyaku .app-detail__app-point h5 text{ fill: #6D519B }
            .app_noyaku .app-detail__app-point h5:before{ background: #6D519B }

        @media (min-width: 600px){
        .app-detail__app-point{
            padding: 15px 18px;
            gap: 18px;
        }
            .app-detail__app-point-icon{
                width: 64px;
                height: 64px;
            }
            .app-detail__app-point h5{
                padding-top: 10px;
                width: 60px;
                font-size:12px;
            }
            .app-detail__app-point h5:before,
            .app-detail__app-point h5:after{
                top: 40px;
                width: 50px;
                height: 50px;
            }
        }

    /* app-detail__app-links */
    .app-detail__app-links{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .app-detail__app-links-box{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
        .app-detail__app-links h5{
            text-align: center;
            font-size:var(--font-size-h4);
            font-weight: 500;
            line-height: 100%;
        }
    .app-detail__app-store{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    .app-detail__app-store img{
        width: auto;
        height: 10.67vw;
    }
    .app-detail__app-links p a{
        font-size: var(--font-size-x-small);
        line-height: 100%;
        text-decoration: underline;
    }
    .app-detail__app-links p a:hover{
    text-decoration: none;
    }
        @media (min-width: 600px){
            .app-detail__app-links{
                gap: 15px;
            }
            .app-detail__app-links-box{
                gap: 10px;
            }
            .app-detail__app-store{
                gap: 20px;
            }
            .app-detail__app-store img{
                height: 46px;
            }
    }

/* ------------------------------------------------------------
   app-register
------------------------------------------------------------ */
.app-register{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14.4vw;
    width: 100%;
}
@media (min-width: 600px) {
    .app-register{
        gap: 54px;
    }
}

/* app-register__inner ------------------------------------------------ */
.app-register__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 5.33vw;
    padding: 12.8vw 0 11.2vw 0;
    background: #FEF0DA;
}
@media (min-width: 600px) {
    .app-register__inner{
        padding: 48px 0 42px 0;
        gap: 20px;
    }
}

    /* app-register__body ------------------------------------------------ */
    .app-register__body{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 68vw;
        height: 68vw;
        margin-bottom: 13.33vw;
        font-size: var(--font-size-h2);
        font-weight: 700;
        line-height: 135%;
        text-align: center;
        color: #FFF;
        border-radius: 50%;
    }
        .app-register__body span{
            position: relative;
            z-index: 2;
        }
        .app-register__body-pict{
            position: absolute;
            inset-inline: 0;   /* ← 左右0（論理プロパティ） */
            margin-inline: auto;   /* ← 左右オートで中央寄せ */
            bottom: calc(-1 * (25.87vw * 0.40));
            width: 33.07vw;
            height: 25.87vw;
            z-index: 3;
        }
        .app-register__body-pict img{
            width: 100%;
            height: auto;
        }
        .app-register__body-bg{
            position: absolute;
            top: 0;
            left:0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #F29600;
            z-index: 1;
        }
        .app-register__inner p{
            text-align: center;
            font-size: var(--font-size-h3);
            font-weight: 700;
            line-height: 160%;
        }
        .app-register__inner a{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 68vw;
            height: 50px;
            gap: 10px;
            font-size: var(--font-size-h3);
            font-weight: 700;
            line-height: 100%;
            text-align: center;
            color: #FFF;
            border-radius: 50px;
            background: #F29600;
            box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.20);
        }
        .app-register__inner a:after{
            width: 3.47vw;
            height: 4vw;
            background: no-repeat center/contain
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='15'><path d='M0 0v15l13-7.5z' fill='white'/></svg>");
            content:"";
        }
        @media (min-width: 600px){
            .app-register__body{
                width: 255px;
                height: 255px;
                margin-bottom: 50px;
            }
            .app-register__body-pict{
                width: 124px;
                height: 97px;
                bottom: calc(-1 * (97px * 0.35));
            }
            .app-register__body-bg{
                width: 100%;
                height: 100%;
            }
            .app-register__inner a{
                width: 330px;
                height: 50px;
                gap: 10px;
            }
            .app-register__inner a:after{
                width: 13px;
                height: 15px;
            }
        }

    /* app-register__midoricheck ------------------------------------------------ */
    .app-register__midoricheck{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
        .app-register__midoricheck a{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 69.87vw;
            height: 26.67vw;
            padding: 0 4vw;
            gap: 10px;
            font-size: var(--font-size-p);
            font-weight: 700;
            line-height: 135%;
            text-align: center;
            letter-spacing: -0.05em;
            color: #AD0000;
            border: 2px solid #AD0000;
        }
        .app-register__midoricheck a:after{
            width: 3.73vw;
            height: 5.6vw;
            background: no-repeat center/contain
            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='21'><rect width='7' height='7' fill='%23AD0000'/><rect y='14' width='7' height='7' fill='%23AD0000'/><rect x='7' y='7' width='7' height='7' fill='%23AD0000'/></svg>");
            content:"";
    }
        @media (min-width: 600px){
                .app-register__midoricheck a{
                    width: 262px;
                    height: 100px;
                    padding: 0 15px;
                }
                .app-register__midoricheck a:after{
                    width: 14px;
                    height: 21px;
            }
        }

/* ------------------------------------------------------------
   app-intro
------------------------------------------------------------ */
.app-intro{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--card-width);
    max-width:1000px;
    gap: 8.53vw;
}
.app-intro:before{
    width: 37.33vw;
    height: 1px;
    background:var(--color-green);
    content:"";
}
    @media (min-width: 600px) {
        .app-intro {
            width:100%;
            gap: 32px;
            padding-left: 20px;
            padding-right: 20px;
        }
        .app-intro:before{
            width:90%;
            max-width: 624px;
        }
    }
    @media (min-width: 1020px) {
        .app-intro {
            padding-left: 0px;
            padding-right:0px;
        }
    }

    /* app-intro .app-intro__head ------------------------------------------------ */
    .app-intro .app-intro__head{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8.53vw;
    }
    .app-intro .app-intro__head h2{
        color: var(--color-green);
        text-align: center;
        font-size:var(--font-size-h2);
        line-height: 125%;
    }
    .app-intro__logo{
        width: 48.53vw;
    }
    .app-intro__logo img{
        width: 100%;
        height: auto;
    }
        @media (min-width: 600px) {
            .app-intro .app-intro__head{
                gap: 32px;
        }
            .app-intro__logo{
                width: 182px;
            }
        }

    /* app-intro .app-intro__list ------------------------------------------------ */
    .app-intro .app-intro__list{
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4vw;
    }
    @media (min-width: 600px){
        .app-intro .app-intro__list{
            flex-direction:row;
            width: 100%;
            max-width: 728px;
            flex-wrap: wrap;
            justify-content: center;
            gap: 24px;
        }
    }
    @media (min-width: 1000px){
        .app-intro .app-intro__list{
            max-width: 100%;
        }
    }
    /* app-intro__card */
    .app-intro__card{
        display: flex;
        padding-top: 6.67vw;
        flex-direction: column;
        align-items: center;
        gap: 5.33vw;
        border-radius: 10px;
        background: #FFFFDE;
        box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.20);
    }
    .app-intro__card:hover{
        box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.10);
    }
    .app-intro__card-logo{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 20.8vw;
    }
        .app-intro__card:nth-child(1) .app-intro__card-logo img{
            width: auto;
            height: 17.9vw;
        }
        .app-intro__card:nth-child(2) .app-intro__card-logo img{
            width: auto;
            height: 20.8vw;
        }
        .app-intro__card:nth-child(3) .app-intro__card-logo img{
            width: auto;
            height: 16vw;
        }

    .app-intro__card-body{
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding: 0 2.67vw 2.67vw 6.67vw;
    }
    .app-intro__card-body:after{
        flex-shrink: 0;
        width: 8vw;
        height: 8vw;
        background: no-repeat center/contain
        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='15' fill='%23009245'/><path d='M11.5385 8.9226L20.7693 14.6802L11.5385 20.461V8.9226Z' fill='white'/></svg>");
        content:"";
    }
    .app-intro .app-intro__list p{
        display: flex;
        padding-bottom: 2.13vw;
        font-size: var(--font-size-x-small);
        font-weight: 400;
        line-height: 170%;
        letter-spacing:-0.05em;
    }
    .app-intro__card .txt__note{
        position: absolute;
        left: 50%;
        bottom: -30px;
        transform:translateX(-50%);
        width: 100%;
        text-align: center;
        pointer-events: none;
    }

        @media (min-width: 600px){
            .app-intro__card{
                padding-top: 25px;
                gap: 20px;
                align-items: stretch;
                width : calc((100% - 24px)/ 2) ;
            }
                .app-intro__card-logo{
                    height: 78px;
                }
                .app-intro__card:nth-child(1) .app-intro__card-logo img{
                    width: auto;
                    height: 67px;
                }
                .app-intro__card:nth-child(2) .app-intro__card-logo img{
                    width: auto;
                    height: 78px;
                }
                .app-intro__card:nth-child(3) .app-intro__card-logo img{
                    width: auto;
                    height: 60px;
                }
            .app-intro__card-body{
                padding: 0 10px 10px 25px;
                flex: 1;
                min-height: 0;
                align-self: stretch;
            }
            .app-intro__card-body:after{
                width: 28px;
                height: 28px;
            }
            .app-intro .app-intro__list p{
                min-height: 0;
                align-self: stretch;
                padding-bottom: 8px;
            }
        }
        @media screen and (min-width: 600px) and (max-width: 700px){
            .app-intro__card{
                min-height:210px;
            }
            /*.app-intro__card-logo img{
                height: 60px;
            }*/
        }
        @media (min-width: 1000px) {
            .app-intro__card{
                min-height:210px;
                flex: 1;
            }
        }

/*------------------------------------------------------------
    footer
------------------------------------------------------------*/
footer{
    display: flex;
    flex-direction: column;
    align-items:center;
    padding: 30px 0 40px;
    gap: 40px;
    background:#F2F2F2;
}

/* foot__link
------------------------------------------------------------*/
footer .foot__link{
    display: flex;
    flex-direction: column;
    align-items:center;
    gap: 15px;
}

    /* btn__link */
    footer .btn__footer-link{
        display: flex;
        align-items: center;
        justify-content:center;
        width: 260px;
        height: 32px;
        border: 1px solid #000;
        border-radius: 32px;
        -webkit-border-radius: 32px;
        -moz-border-radius: 32px;
        font-size: 13px;
}
    footer .btn__footer-link:hover{
          opacity: .8;
    }

    /* footer nav */
    footer nav{
        display: flex;
        justify-content: center;
        align-items: center;
    }
        footer nav a{
            font-size: 11px;
            display: flex;
            justify-content: center;
            flex-direction: column; 
            align-items: center;
            padding: 0 20px;
            height: 20px;
        }
        footer nav a + a{
            border-left: 1px solid #000;
        }




/* foot__conts
------------------------------------------------------------*/
footer .foot__conts{
    display: flex;
    flex-direction: column;
    align-items:center;
    gap: 40px;
}

    /* poweredby */
    footer .poweredby img{
        width: 223px;
    }
        footer .foot__txt{
            display: flex;
            flex-direction: column;
            align-items:center;
            gap: 0px;
            padding-left: 10px;
            padding-right: 10px;
        }

    /* txt__note */
    footer p.txt__note{
        font-size: 8px;
        line-height: 1.5em;
        font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
        text-align: center;
    }

    /* copy */
    footer .copy{
        font-size: 8px;
        font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
        letter-spacing: 0.08em;
    }