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

:root {
    --font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "Segoe UI", "verdana", sans-serif;
    --font-family-mont: "Montserrat", "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "Segoe UI", "verdana", sans-serif;
    --color-primary-500: #076690;
    --color-primary-400: #3885A7;
    --color-primary-300: #6AA3BD;
    --color-primary-200: #9CC2D3;
    --color-primary-100: #CEE1E9;
    --color-primary-50: #E7F0F4;
    --color-bg: #f4f6f9;
    --color-school: #076690;
    --color-school-bg: #EBF5FA;
    --color-company: #7BA23D;
    --color-company-bg: #F4FAEB;
    --color-cert: #06A3B9;
    --color-cert-bg: #EBF8FA;

    --size-contents: clamp(375px, 90%, 1600px);

}

main {
    position: relative;
}

.c-head {
    line-height: 1.4;
}

/* カード型（番号あり） */
.c-card.u-card-num .c-card-num {
    font-family: var(--font-family-mont);
    font-weight: var(--font-weight-light);
}

.c-card.u-card-text.u-card-num .c-card-num {
    background-color: var(--color-white);
}

/* 見出し：左に線 */
.c-head.head-bl {
    padding-left: var(--size-03);
    border-left: solid 3px var(--color-primary-500);
}

/* 見出し：サブ見出し */
.c-head .c-head-sub {
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-l);
    display: block;
}

/* 矢印リンク */
.c-link.u-mark-arrow {
    color: var(--color-primary-500);
}

/* テーブル */
.c-tbl.u-tbl-horz th {
    background-color: var(--color-bg);
}

/* テキストと画像横並び */
.p-text-thum {
    margin-top: var(--size-10);
    align-items: center;
}

.p-text-thum:first-of-type {
    margin-top: var(--size-05);
}

/* ラベル */
.p-label {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-s);
    display: inline-block;
    padding: 0 var(--size-02);
    border-radius: 50px;
}

.p-label.p-label-news.p-label-info {
    background-color: var(--color-cert-bg);
}

.p-label.l-label-issuer.l-label-country {
    background-color: var(--color-white);
    border: solid 1px var(--color-primary-500);
    color: var(--color-primary-500);
}

.p-label.l-label-issuer.p-label-company {
    color: var(--color-company);
    background-color: var(--color-company-bg);
}

.p-label.l-label-issuer.p-label-school {
    color: var(--color-school);
    background-color: var(--color-school-bg);
}

.p-label.l-label-issuer.p-label-org {
    color: var(--color-cert);
    background-color: var(--color-cert-bg);
}

.p-label.l-label-issuer.p-label-government {
    color: var(--color-cert);
    background-color: var(--color-cert-bg);
}

/* ヘッダー */
.p-header-pc {
    width: 18%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: var(--color-white);
    height: 100%;
    padding: 3.6rem;
    border-right: solid 1px var(--color-gray-100);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.p-header-pc .p-header-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.p-header-pc .p-header-logo {
    margin-bottom: 3.6rem;
}

.p-header-pc .p-header-list {
    display: flex;
    flex-direction: column;
    gap: var(--size-03);
}

.p-header-pc .p-header-list li {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-l);
    padding-left: var(--size-02);
}

.p-header-pc .p-header-lang {
    display: flex;
    gap: var(--size-01);
    font-size: var(--font-size-s);
}

.p-header-pc .p-header-lang li {
    position: relative;
}

.p-header-pc .p-header-lang li a {
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
}

.p-header-pc .p-header-lang li:not(:last-of-type)::after {
    content: "／";
    padding-left: var(--size-01);
}

.p-header-sp {
    display: none;
}

.c-header .c-header-nav-sp {
    height: 100vh;
    max-height: 100vh;
    top: 0;
}

.c-header .c-header-logo img {
    width: clamp(200px, 12vw, 240px);
}

.c-header .c-header-nav-sp .c-acd {
    margin-top: var(--size-03);
}

/* フッター */
footer {
    background-color: var(--color-gray-900);
    padding-top: var(--size-05);
    padding-bottom: var(--size-02);
}

.p-footer {
    display: flex;
}

.p-footer .p-footer-logo {
    margin-right: 16rem;
}

.p-footer .p-footer-box {
    display: flex;
    gap: var(--size-10);   
}

.p-footer .p-footer-box ul {
    display: flex;
    flex-direction: column;
    color: var(--color-white);
    gap: var(--size-01);
}

.p-footer .p-footer-box ul ul {
    margin-top: var(--size-01);
    font-size: var(--font-size-s);
    gap: var(--size-005);
    font-weight: var(--font-weight-light);
}

.p-footer .p-footer-box ul ul li {
    position: relative;
}

.p-footer .p-footer-box ul ul li::before {
    content: "-";
    padding-right: var(--size-01);
}

.p-footer .p-footer-lang {
    display: flex;
    color: var(--color-white);
    gap: var(--size-03);
    font-size: var(--font-size-s);
    margin-top: var(--size-02);
}

.p-copy {
    text-align: right;
    font-size: 1.2rem;
    color: var(--color-white);
}


/* コンテンツエリア */
.p-cnt {
    width: 82%;
    margin-left: 18%;
}


/* 見出しエリア */
.p-title {
    padding: calc(var(--size-10) * 2) 0;
    margin-bottom: var(--size-02);
    background-color: var(--color-bg);
    overflow: hidden;
    background-image: url(/common/assets/img/bg_ttl.png);
    background-position: center left;
    background-repeat: no-repeat;
    background-size: cover;
}

.p-title h1 {
    font-size: clamp(var(--size-04), 5vw, var(--size-06));
}

.p-title .ttl-en {
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-sub);
}

/* お知らせ */
.p-news {
    margin-top: var(--size-05);
}

.p-news .p-news-box {
    display: flex;
    align-items: center;
    gap: var(--size-02);
    padding: var(--size-03) 0;
    border-top: solid 1px var(--color-gray-100);
}

.p-news .p-news-box:last-of-type {
    border-bottom: solid 1px var(--color-gray-100)
}

.p-news .p-news-item {
    display: flex;
    gap: var(--size-02);
    align-items: center;
}

.p-news .p-news-item .date {
    display: block;
    color: var(--color-gray-500);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-mont);
}


/* 疑似タブ */
.p-tab-link ul {
    display: flex;
    border-bottom: solid 2px var(--color-gray-100);
}

.p-tab-link ul li {
    padding: var(--size-01) var(--size-03);
    color: var(--color-gray-500);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-l);
    margin-bottom: -2px;
    box-sizing: border-box;
}

.p-tab-link ul li.current {
    color: var(--color-primary-500);
    border-bottom: solid 2px var(--color-primary-500);
}

/* フィルター */
.p-filter-label ul {
    display: flex;
    gap: var(--size-03);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
    padding-top: var(--size-05);
}

.p-filter-label ul li {
    cursor: pointer;
    background-color: var(--color-gray-100);
}

.p-filter-label ul li.selected {
    background-color: var(--color-primary-500);
    color: var(--color-white);
}

/* カウントセクション（about-ob / TOP） */
.p-count {
    display: flex;
    flex-direction: column;
    gap: var(--size-03);
}

.p-count .p-count-wrap {
    display: flex;
    justify-content: space-around;
    gap: var(--size-02);
}

.p-count .p-count-wrap .p-count-ttl {
    text-align: center;
}

.p-count .p-count-wrap .p-count-dtl {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.p-count .p-count-wrap .p-count-total {
    font-size: clamp(3.2rem, 3vw, 9rem);
    color: var(--color-primary-500);
    display: block;
    line-height: 1;
    font-family: var(--font-family-mont);
}

.p-count .p-count-wrap .p-count-place {
    font-size: clamp(2.2rem, 2vw, 3.2rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-500);
}

.p-count .p-count-wrap .p-count-unit {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.p-count .p-count-date {
    font-size: var(--font-size-s);
    text-align: right;
}

/* アプリ訴求セクション */
.p-app {
    margin-top: var(--size-08);
    padding: var(--size-10) var(--size-10) var(--size-08);
    background-color: var(--color-bg);
}

.p-app .p-app-cnt .p-app-logo {
    margin-bottom: var(--size-03);
}

.p-app .p-app-cnt .p-app-logo img {
    width: 16rem;
}

.p-app .p-app-cnt h2 {
    margin-top: 0;
    color: var(--color-primary-500);
}

.p-app .p-app-slider {
    max-width: 300px;
    margin: 0 auto;
}


.p-app .p-app-slider .slick-initialized .slick-slide {
    display: flex;
    justify-content: center;
}

.p-app .p-app-slider .slick-prev:before,
.p-app .p-app-slider .slick-next:before {
    color: var(--color-primary-500);
}

.p-app .p-app-cnt .p-app-btn {
    display: flex;
    gap: 0 var(--size-02);
    align-items: center;
    margin-top: var(--size-03);
}

.p-app .p-app-cnt .p-app-btn .p-app-apple img {
    width: 15rem;
}

.p-app .p-app-cnt .p-app-btn .p-app-google img {
    width: 18rem;
}



.badge-wrap .badge-box {
    padding: var(--size-04);
    border: solid 1px var(--color-gray-100);
    position: relative;
}

.badge-wrap .badge-box .badge-issue {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 var(--size-02);
    color: var(--color-white);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
}

.badge-wrap .badge-box .badge-issue.school {
    background-color: var(--color-school);
}

.badge-wrap .badge-box .badge-issue.company {
    background-color: var(--color-company);
}

.badge-wrap .badge-box .badge-issue.cert {
    background-color: var(--color-cert);
}

.badge-wrap .badge-box .badge-thum {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.badge-wrap .badge-box .badge-thum img {
    display: block;
    transition: all .3s;
}

.badge-wrap .badge-box:hover .badge-thum img {
    transform: scale(1.05);
}

.badge-wrap .badge-box .badge-dtl {
    margin-top: var(--size-02);
}

.badge-wrap .badge-box .badge-name {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-m);
}

.badge-wrap .badge-box .badge-co {
    font-size: var(--font-size-s);
}

.badge-wrap .badge-box .link-txt {
    display: flex;
    justify-content: center;
}

.badge-wrap .badge-box .link-txt span {
    font-size: var(--font-size-s);
    transition: all .3s;
}

.badge-wrap .badge-box:hover .link-txt span::after {
    right: -2.2rem;
}






/* TOP */
#top .c-head {
    font-size: clamp(var(--size-04), 5vw, var(--size-06));
}

#top #sec-mv .l-mv {
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: var(--color-bg);
}

#top #sec-mv .l-mv .l-mv-bg {
    position: fixed;
    position: absolute;
    top: -25%;
    right: -10%;
    width: 45%;
    width: 50%;
    transition: filter 0.3s ease;
}

#top #sec-mv .l-mv .l-mv-bg svg {
    transform: scale(1.6);
    transform-origin: center;
    animation: mvAnime 20s linear forwards;
    animation-delay: 1s;
}

@keyframes mvAnime {
    0% {
        transform: scale(1.6);
    }
    100% {
        transform: scale(1.9) rotate(15deg);
    }
}

#top #sec-mv .l-mv .l-mv-cnt {
    padding-top: 12rem;
}

#top #sec-mv .l-mv .l-mv-cnt h1 {
    font-size: var(--size-09);
    line-height: 1.4;
    overflow: hidden;
    font-weight: var(--font-weight-heavy);
    display: flex;
    flex-direction: column;
}

#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl {
    display: flex; 
}

#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span {
    display: block;
    animation: .8s h1Anime ease-out;
    animation-fill-mode: forwards;
    line-height: 1.3;
    opacity: 0;
}

@keyframes h1Anime {
    0%{
        transform: translateY(110%);
    }
    50%{
        transform: translateY(0);
        opacity: 1;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(1) {
    animation-delay: 0s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(2) {
    animation-delay: 0.05s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(3) {
    animation-delay: 0.1s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(4) {
    animation-delay: 0.15s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(5) {
    animation-delay: 0.2s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(6) {
    animation-delay: 0.25s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(7) {
    animation-delay: 0.3s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(8) {
    animation-delay: 0.35s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(9) {
    animation-delay: 0.4s;
}

#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(10) {
    animation-delay: 0.45s;
}

#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(11) {
    animation-delay: 0.5s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(12) {
    animation-delay: 0.55s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(13) {
    animation-delay: 0.6s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(14) {
    animation-delay: 0.65s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(15) {
    animation-delay: 0.7s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(16) {
    animation-delay: 0.75s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(17) {
    animation-delay: 0.8s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(18) {
    animation-delay: 0.85s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(19) {
    animation-delay: 0.9s;
}
#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span:nth-child(20) {
    animation-delay: 0.95s;
}

#top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span.l-mv-space {
width: var(--size-03);
}

#top #sec-mv .l-mv .l-mv-cnt .l-mv-lead {
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-700);
    margin-top: var(--size-04);
    font-size: var(--font-size-l);
}

#top .l-mv-news {
    margin-top: var(--size-10);
    margin-bottom: var(--size-10);
    padding: var(--size-03) 0;
    position: relative;
    z-index: 1;
}

#top .l-mv-news::before {
    content: "";
    background-color: var(--color-white);
    position: absolute;
    width: calc(50% + 1.6rem);
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
}

#top .l-mv-news .p-news-box {
    max-width: 50%;
    flex-direction: column;
    align-items: baseline;
    gap: var(--size-01);
    border: none;
    padding: 0;
}


#top #sec-about .l-about-wrap {
    align-items: center;    
}

#top #sec-about .l-about-wrap .l-about-cnt {
    flex: 1;
}

#top #sec-news {
    padding-top: var(--size-10);
    padding-bottom: var(--size-10);
}


/* about配下 */

/* about/first */
#about-first #sec-first .l-first {
    margin-top: var(--size-08);
}

/* about/index */
#about-apon #sec-intro .l-intro p {
    line-height: 2;
    font-size: var(--font-size-l);
    margin-top: var(--size-04);
}

/* about/openbadge */
#about-ob #sec-intro .l-intro .l-intro-thum {
    display: flex;
    align-items: center;
    justify-content: center;
}

#about-ob #sec-count .l-badge {
    margin-top: var(--size-08);
}

#about-ob #sec-type .l-type {
    align-items: center;
}

#about-ob #sec-tech .tech-wrap .l-tech-thum {
    background-color: var(--color-bg);
}

#about-ob #sec-wallet .l-wallet {
    margin-top: var(--size-05);
    align-items: center;
}

#about-ob #sec-wallet .l-wallet .l-wallet-cnt {
    display: flex;
    flex-direction: column;
    gap: var(--size-05);
}

#about-ob #sec-wallet .l-wallet .l-wallet-cnt h3 {
    border-bottom: solid 1px var(--color-gray-100);
    padding-bottom: var(--size-02);
    display: flex;
    flex-direction: row;
}

#about-ob #sec-wallet .l-wallet .l-wallet-cnt .l-head-num {
    color: var(--color-primary-500);
    padding-right: var(--size-02);
    font-size: var(--size-06);
    font-weight: var(--font-weight-light);
    line-height: 1;
    font-family: var(--font-family-mont);
}


/* about/wallet */
#about-wallet #sec-about .l-cando dl:not(:last-of-type) {
    margin-bottom: var(--size-04);
}

#about-wallet #sec-about .l-cando dl dt {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    color: var(--color-primary-500);
    position: relative;
}

#about-wallet #sec-howto .l-howto {
    position: relative;
    margin-top: var(--size-05);
}

#about-wallet #sec-howto .l-howto .l-howto-box {
    position: relative;
}

#about-wallet #sec-howto .l-howto .c-card-thum {
    border: solid 1px var(--color-gray-100);
}

#about-wallet #sec-howto .l-howto .c-card-cnt {
    margin-top: var(--size-02);
}

#about-wallet #sec-howto .l-howto .l-howto-step {
    position: relative;
}

#about-wallet #sec-howto .l-howto .l-howto-step span {
    display: block;
    line-height: 1;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-mont);
    color: var(--color-primary-500);
    background-color: var(--color-white);
}

#about-wallet #sec-howto .l-howto .l-howto-step span.l-step {
    font-size: var(--font-size-s);
    position: relative;
}

#about-wallet #sec-howto .l-howto .l-howto-step span.l-num {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-light);
}


/* issuer配下 */
#issuer-list .l-issuer .l-issuer-box h2 span.l-head-en {
    display: block;
    font-size: var(--font-size-s);
    color: var(--color-gray-500);
}

#issuer-list .l-issuer h2 a:hover {
    text-decoration: underline;
}



@media print,screen and (max-width:1280px){
    .p-header-pc {
        padding: 3.6rem 1.2rem;
    }

    .p-header-pc .p-header-list li {
        font-size: var(--font-size-s);
    }

    .p-cnt {
    width: calc(100% - (15% + 2.4rem));
    margin-left: calc(15% + 2.4rem);
    }

    .p-footer .p-footer-logo {
        margin-right: 8rem;
    }

    #top .l-mv-news::before {
        width: calc(80% + 1.6rem);
    }

    #top .l-mv-news .p-news-box {
        max-width: 80%;
    }

}


@media print,screen and (max-width:1024px){
    

    .u-header-pc {
        display: none !important;
    }

    .u-header-sp {
        display: flex !important;
    }

    .p-header-sp .p-header-btn {
    cursor: pointer;
    position: fixed;
    top: 1.2rem;
    right: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 60px;
    z-index: 180;
    background-color: #fff;
    border-radius: 50%;
}
    
    .p-header-sp .p-header-btn span,
    .p-header-sp .p-header-btn span::before,
    .p-header-sp .p-header-btn span::after {
        content: "";
        position: absolute;
        display: block;
        height: 0.3rem;
        width: var(--size-03);
        background-color: var(--color-primary-500);
    }
        
    .p-header-sp .p-header-btn span::before {
        bottom: var(--size-01);
    }
        
    .p-header-sp .p-header-btn span::after {
        top: var(--size-01);
    }

    .p-header-sp #header-check {
        display: none;
    }
        
    .p-header-sp #header-check:checked ~ .p-header-btn span {
        background: rgba(255, 255, 255, 0);
    }
        
    .p-header-sp #header-check:checked ~ .p-header-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }
        
    .p-header-sp #header-check:checked ~ .p-header-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }
        
    .p-header-sp .header-cnt {
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 100%;
        z-index: 150;
        background-color: var(--color-bg);
        transition: all .5s;
        overflow-x: scroll;
    }
        
    .p-header-sp .p-header-cnt ul {
        padding: var(--size-05) var(--size-02) var(--size-02);
        background-color: var(--color-bg);
        overflow-y: hidden;
        display: flex;
        flex-direction: column;
        gap: var(--size-02);
    }
        
    .p-header-sp .p-header-cnt ul li {
        list-style: none;
        position: relative;
    }

    .p-header-sp .p-header-cnt ul li::before {
        width: 3px;
        height: 100%;
        position: absolute;
        content: "";
        top: 0;
        left: 0;
    }

    .p-header-sp .p-header-cnt ul li:not(:first-of-type)::after {
        content: "";
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--color-gray-100);
        top: -1rem;
        position: absolute;
    }
        
    .p-header-sp .p-header-cnt ul li a {
        font-weight: 500;
        display: block;
        width: 100%;
        font-size: var(--font-size-s);
        box-sizing: border-box;
        text-decoration: none;
        padding: var(--size-01) var(--size-02);
    }
        
    .p-header-sp #header-check:checked ~ .p-header-cnt {
        left: 0;
    }

    .p-cnt {
        width: 100%;
        margin-left: 0;
    }

    #top #sec-mv .l-mv .l-mv-cnt h1 {
        font-size: var(--size-06);
    }

    #top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span.l-mv-space {
    width: var(--size-02);
    }

}



@media print,screen and (max-width:520px){
    .p-footer {
        flex-direction: column;
    }

    .p-footer .footer-box {
        margin-top: var(--size-03);
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr; 
        gap: var(--size-02);
    }
    
    .p-app {
        padding: var(--size-03) var(--size-03) var(--size-05);
    }

    .p-tab-link ul {
        flex-direction: column;
        border-bottom: none;
    }

    .p-tab-link ul li {
        border-bottom: solid 2px var(--color-gray-100);
    }

    .p-tab-link ul li a {
        display: block;
    }

    .p-news .p-news-box {
        flex-direction: column;
        align-items: baseline;
        gap: var(--size-01);
    }
    
    #top #sec-mv .l-mv .l-mv-bg  {
        top: -10%;
    }

    #top #sec-mv .l-mv .l-mv-cnt h1 {
        font-size: var(--size-05);
    }

    #top #sec-mv .l-mv .l-mv-cnt .l-mv-ttl span.l-mv-space {
    width: var(--size-01);
    }
    
    #top #sec-about {
        padding-top: var(--size-05);
    }

    #top #sec-news {
        padding-top: var(--size-05);
        padding-bottom: var(--size-05);
    }

    #about-wallet #sec-howto .l-howto .l-howto-box .l-howto-step span.l-num {
        font-size: 3.2rem;
    }

    .p-count .p-count-wrap {
        flex-direction: column;
    }

    .p-footer .p-footer-box {
        margin-top: var(--size-03);
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: var(--size-02);
    }

}