main {
    padding-top: 50px;
    @media (width > 768px) {
        padding-top:98px;
    }
    > * {
        max-width:900px;
        @media (width > 900px) {
            margin-inline:auto;
        }
    }
}
.inpagelinks {
    counter-reset: inpagelinks 0;
    padding-top:40px;
    > ul {
        /* @media (width > 600px) {
            display:flex;
            flex-direction:row;
            justify-content: center;
            column-gap: 20px;
        } */
        > li {
            padding-top:2px;
            padding-bottom:4px;
            border-bottom: solid 1px #D0E7D1;
            padding-left:20px;
            padding-right:30px;
            position:relative;
            @media (width > 600px) {
                min-width:180px;
            }
            &::before,
            &::after {
                position:absolute;
            }
            &::before {
                counter-increment: inpagelinks 1;
                content:counter(inpagelinks) ". ";
                display:block;
                /* border-radius:9999px; */
                /* background:#128B3A; */
                aspect-ratio:1/1;
                width:18px;
                left:0;
                top:2px;
                color:#128B3A;
                font-size:16px;
                line-height:1.6;
                text-align:center;
                font-weight:bold;
            }
            &::after {
                content:"";
                aspect-ratio:1/1;
                border-right:solid 2px #128B3A;
                border-bottom:solid 2px #128B3A;
                display:block;
                width:8px;
                transform: rotate(45deg);
                right:2px;
                bottom:16px;
            }
            > a {
                font-size:16px;
                font-weight:500;
                line-height:1.6;
                color:#128B3A;
                width:100%;
                display:block;
            }
        }
    }
}
#setup,
#areaoption {
    counter-reset: sectionnum 0;
    > section {
        counter-increment: sectionnum 1;
        > header {
            > h2 {
                position:relative;
                padding-left:20px;
                padding-bottom:8px;
                border-bottom:solid 1px #20A73F;
                @media (width > 600px) {
                    padding-left:24px;
                }
                &::before {
                    position:absolute;
                    content:counter(sectionnum) ".";
                    display:block;
                    /* border-radius:9999px; */
                    /* background:#128B3A; */
                    aspect-ratio:1/1;
                    width:22px;
                    left:0;
                    top:1px;
                    color:#333;
                    /* font-size:14px;
                    line-height:22px;
                    text-align:center; */
                    font-weight:bold;
                    font-size:18px !important;
                    line-height:22px !important;
                    font-weight:bold;
                    @media (width > 600px) {
                        font-size:22px !important;
                        line-height:1.2 !important;
                    }
                }
            }
        }
        p {
            a {
                text-decoration:underline;
                transition-duration: .3s;
                &:hover {
                    opacity:0.7;
                }
                &[target="_blank"]{
                    display:inline-flex;
                    padding
                    position:relative;
                    column-gap:8px;
                    &::after {
                        content:"";
                        display:block;
                        width:16px;
                        margin-right:4px;
                        /* position:absolute;
                        right:4px;
                        top:50%;
                        transform:translateY(-50%); */
                        background: url(/assets/images/common/link.svg);
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position:center right;
                    }
                }
            }
        }
        > section {
            > header {
                > h3 {
                    color:#128B3A;
                }
            }
        }
    }
}
#setup {
    > section {
        &:nth-of-type(2){
            details {
                &:first-of-type {
                    padding-top:18px;
                }
                &[open]{
                    > summary {
                        &::after {
                            content:"－";
                            font-size: 18px;
                            right: 10.5px;
                        }
                    }
                }
                > summary {
                    display: block;
                    list-style: none;
                    font-size:16px;
                    line-height:34px;
                    font-weight:bold;
                    border-bottom:solid 1px #D0E7D1;
                    padding-left:12px;
                    position:relative;
                    &::after {
                        content:"+";
                        color:#128B3A;
                        font-size:24px;
                        font-weight:bold;
                        position:absolute;
                        right:12px;
                        top:50%;
                        transform:translatey(-50%);
                    }
                }
                > summary::-webkit-details-marker {
                    display: none;
                }
                > div {
                    padding-inline:12px;
                    > section {
                        padding-bottom:20px;
                        &:nth-of-type(n+2){
                            border-top:solid 1px #CDD6DD;
                        }
                        /* > header {
                            > h4 {
                                font-size:14px;
                                line-height:1.6;
                                font-weight:bold;
                            }
                        } */
                        > figure {
                            padding-top:16px;
                            > img {
                                display:block;
                                margin-inline:auto;
                            }
                        }
                    }
                }
                &:first-of-type {
                    > div {
                        > section {
                            &:nth-of-type(1){
                                > figure {
                                    > img {
                                        height:auto;
                                        max-width:196px;
                                    }
                                }
                            }
                            &:nth-of-type(2){
                                > figure {
                                    > img {
                                        height:auto;
                                        max-width:256px;
                                    }
                                }
                            }
                            &:nth-of-type(3){
                                > figure {
                                    > img {
                                        height:auto;
                                        max-width:256px;
                                    }
                                }
                            }
                        }
                    }
                }
                &:nth-of-type(2) {
                    > div {
                        > section {
                            &:nth-of-type(1){
                                > figure {
                                    > img {
                                        height:auto;
                                        max-width:150px;
                                    }
                                }
                            }
                            &:nth-of-type(2){
                                > figure {
                                    > img {
                                        height:auto;
                                        max-width:265px;
                                    }
                                }
                            }
                            &:nth-of-type(3){
                                > figure {
                                    > img {
                                        height:auto;
                                        max-width:264px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        &:nth-of-type(3) {
            > section:nth-of-type(2) {
                > figure {
                    padding-top:20px;
                    > img {
                        height:140px;
                        width:auto;
                        display:block;
                        margin-inline:auto;
                    }
                }
            }
            > section:nth-of-type(3) {
                > header {
                    > h3 {
                        color:#333;
                    }
                }
                > figure {
                    padding-top:20px;
                    > img {
                        max-height:136px;
                        width:auto;
                        display:block;
                        margin-inline:auto;
                    }
                    & + p {
                        padding-top:30px;
                    }
                }
            }
        }
    }
    > nav {
        padding-top:27px;
    }
}
#areaoption {
    section {
        &:nth-of-type(2){
            > section {
                > *:not(header) {
                    padding-left:12px;
                }
            }
        }
        > section {
            > ol,
            > ul {
                padding-top:16px;
                > li {
                    padding-left:20px;
                    position:relative;
                    font-size:14px;
                    @media (width > 600px) {
                        font-size:16px;
                    }
                    &::before {
                        display:block;
                        position:absolute;
                        left:0;
                        top:0;
                    }
                }
            }
            > ol {
                > li {
                    &:first-of-type {
                        &::before {
                            content:"1）";
                        }
                    }
                    &:nth-of-type(2) {
                        &::before {
                            content:"2）"
                        }
                    }
                }
            }
            > figure {
                padding-top:24px;
                > img {
                    width:auto;
                    height:136px;
                    display:block;
                    margin-inline:auto;
                }
            }
            > ul {
                > li {
                    &::before {
                        content:"・";
                    }
                }
            }
        }
    }
    > div {
        padding-top: 40px;
        > section {
            padding-top:16px;
            padding-right:16px;
            padding-bottom:16px;
            padding-left:16px;
            background-color:#f5f5f5;
            > header {
                padding-top:0;
                > h2 {
                    font-size:14px !important;
                    line-height:18px !important;
                    @media (width > 600px) {
                        font-size:16px !important;
                        line-height:20px !important;
                    }
                }
            }
            > p {
                font-size:12px;
            }
        }
    }
}
.appstores {
    padding-top:16px;
    > nav {
        background-color:#EAF8DB;
        border-radius:10px;
        padding-block:20px;
        @media (width > 767px) {
            display:flex;
            justify-content: space-between;
            padding:20px 10px 20px 75px;
            position:relative;
        }
        &::before {
            display:none;
            content:"";
            background-image:url(/wifi/assets/images/top/img_logo_hh.png);
            background-repeatg:none;
            background-size:cover;
            width:55px;
            aspect-ratio:1/1;
            @media (width > 767px) {
                display:block;
                position:absolute;
                top:50%;
                transform:translateY(-50%);
                left:10px;
            }
        }
        > header {
            padding-top:0;
            @media (width > 767px) {
                display:flex;
                justify-content:center;
                align-items: center;
            }
            > h3 {
                font-size:12px;
                line-height:20px;
                text-align:center;
                font-weight:700;
                @media (width > 767px) {
                    font-size:16px;
                }
            }
        }
        > ul {
            display:flex;
            flex-direction:row;
            display: flex;
            column-gap: 20px;
            justify-content: center;
            padding-top:10px;
            @media (width > 767px) {
                padding-top:0;
            }
            > li {
                > a {
                    > img {
                        width:auto;
                        &:first-of-type {
                            display:block;
                            max-height:40px;
                            @media (width > 767px) {
                                display:none;
                            }
                        }
                        &:last-of-type {
                            display:none;
                            max-height:56px;
                            @media (width > 767px) {
                                display:block;
                            }
                        }
                    }
                }
            }
        }
    }
}
.btnlink {
    position:relative;
    font-size:16px;
    line-height:46px;
    font-weight:bold;
    border:solid 1px #cdd6dd;
    width:100%;
    max-width:270px;
    text-align:center;
    display:block;
    margin-inline:auto;
    border-radius:23px;
    &::before {
        content: "\e909";
        font-family: "icomoon";
        font-size: 1rem;
        position: absolute;
        top: 51%;
        transform: translateY(-50%);
        left: 1.5rem;
        box-sizing: border-box;
        font-weight: 600;
    }
}
.bodyWrapper #area > div > h2,
.bodyWrapper #flow > div > h2,
.bodyWrapper > div.subFvWrap > div > h2,
.bodyWrapper section.news > div > h2 {
    font-size:18px;
    line-height:22px;
    font-weight:bold;
    @media (width > 600px) {
        font-size:22px;
        line-height:1.2;
    }
    & ~ p {
        font-size:14px;
        @media (width > 600px) {
            font-size:16px;
        }
    }
}
.bodyWrapper > section.spot > div > section > h4,
#flow > div > div > div > ol > li > div > div > span.flowExplanation,
#flow > div > div > div > ol > li:nth-child(3) > div > span.flowExplanation,
#flow > div > div > div > ol > li > div > div > span.flowNamber,
#flow > div > div > div > ol > li:nth-child(3) > div > span.flowNamber {
    font-size:16px;
    line-height:20px;
    font-weight:bold;
    @media (width > 600px) {
        font-size:18px;
        line-height:22px;
    }
    & ~ p {
        font-size:14px;
        @media (width > 600px) {
            font-size:16px;
        }
    }
}
.flow.howtosteps .ssidWrap {
    display:block;
    margin-top: 1rem;
}
.flow.howtosteps .ssidWrap .ssidLeft,
.flow.howtosteps .ssidWrap .ssidRight {
    width:100%
}
.flow.howtosteps .ssidWrap .ssidLeft {
    background-color:#128B3A
}
.flow.howtosteps .flow-detail.flow-detail-custom {
    padding-top:20px;
}
.flow-detail.flow-detail-custom .btn-area {
    justify-content: center;
}
.flow-detail.flow-detail-custom .btn-area a {
    max-width:435px;
    line-height: 38px;
}
@media (width > 600px) {
    .flow.howtosteps .flow-detail.flow-detail-custom {
        padding-top:20px;
    }
    .flow-detail.flow-detail-custom .btn-area a {
        line-height:52px;
    }
}
.news .btnWrap .btn-white::before{
    width: auto;
    height: auto;
    border-top: none;
    border-right: none;
}
.flowBox {
    border-color:#128B3A;
}