@charset "UTF-8";
/* ============================================== */
/*                    共通設定                    */
/* ============================================== */
@media screen and (min-width:768px) {
    *:not(body){overflow: visible !important;}
}
@media all and (max-width: 767px){
    *:not(body){overflow: visible !important;}
    header{overflow: hidden !important;}
    .kv{overflow-x: hidden !important;}
    .kv .kv_inner{overflow: visible !important;}
    .kv > p{
        height: 50px;
        overflow: visible !important;
    }
}
@media all and (max-width: 767px){
    html,body{max-width: 100vw;}
    body{width: 100%;}
    img{height: auto;}
    .main-contents{
        width: 100%;
        min-width: auto;
    }
}
@media all and (max-width:767px) {
    *{font-size: 14px;}
    .inner{padding: 0 5%;}
    a[href*=tel]{pointer-events: auto;}
    .pc_cont{display: none;}
    .sp_cont{display: block;}
}

/* ============================================== */
/*                    ヘッダー                    */
/* ============================================== */
@media all and (max-width:767px) {
    header{
        padding: 15px;
        max-width: 100vw;
    }
    header > p{width: 100px;}
}

/* ============================================== */
/*              ハンバーガーメニュー              */
/* ============================================== */
@media screen and (max-width:920px) {
    .ham {
        /* position: fixed; */
        /* z-index: 10; */
        /* inset: 45px 45px auto auto; */
        position: relative;
        z-index: 0;
        display: block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        transition: .3s;
        cursor: pointer;
    }

    .ham span,
    .ham::before,
    .ham::after {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0;
        display: block;
        width: 25px;
        height: 2px;
        border-radius: 1px;
        background: var(--txtColor);
        transition: .5s;
    }
    .ham::before,
    .ham::after{content: '';}
    .ham::before{top: calc(50% - 8px);}
    .ham::after{top: calc(50% + 8px);}

    .ham.open span{opacity: 0;}
    .ham.open::before {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .ham.open::after {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    /* ナビ */
    nav{
        position: fixed;
        top: 62px;
        inset: 62px -100% auto;
        margin: auto;
        z-index: 9;
        background: #fff;
        width: 100vw;
        height: calc(100dvh - 62px);
        padding: 35px 3%;
        transition: .3s;
        transform: translateX(110%);
    }
    nav ul{
        flex-direction: column;
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }
    nav ul li{
        width: 100%;
        border-bottom: 1px solid var(--txtColor);
    }
    nav ul li a{
        font-size: 17px;
        font-weight: 700;
        margin: 0;
        padding: 1.2em 0;
    }
    nav ul li a::before{display: none;}

    /* ロゴ */
    nav ul li.sp_cont {padding: 0 0 3em;}
    nav ul li.sp_cont img{
        width: 80%;
        margin: 0 auto;
    }

    /* メニューOPEN */
    .ham.open + nav{transform: translateX(0);}

    html:has(.ham.open){overflow: hidden;}

    nav .pc_cont{display: none;}
    nav .sp_cont{display: block;}
}

/* ============================================== */
/*                 KV                 */
/* ============================================== */
@media screen and (min-width:2000px) {
    .kv{
        width: 100%;
        height: 840px;
        margin: 70px auto 150px;
    }
    .kv .kv_inner{
        max-width: 1620px;
        padding: 0 50px 50px;
    }
    .kv .kv_inner > figure{
        width: 1500px;
        inset: auto -83% 0 -100%;
    }
    .kv .kv_inner > div > div{width: 490px;}
    .kv .kv_inner > div > div figure{width: 150px;}
    .kv .kv_inner > div > div ul li{height: 61px;}
}
@media screen and (max-width:1300px) and (min-width:1121px) {
    .kv .kv_inner > figure{
        inset: auto -87% -5vw -100%;
        width: 63vw;
    }
    .kv .kv_inner > div > div{width: max(26.5vw,325px)}
}
@media screen and (max-width:1240px) and (min-width:1121px) {
    .kv .kv_inner{width: 85%;}
}
@media screen and (max-width:1120px) and (min-width:1001px) {
    .kv .kv_inner{width: 89%;}
    .kv .kv_inner > figure{
        width: 66vw;
        inset: -88% -88% -100% -100%;
    }
}
@media screen and (max-width:1160px) and (min-width:768px) {
    .kv{
        aspect-ratio: 77 / 67;
        background-image: url(/content/dam/daiwasecurities/onlinetrade/tool/d_port/images/bg/kv_tab.png);
        margin: 62px auto 50px;
        padding: 0 0 8vw;
    }
    .kv .pc_cont{display: none;}
    .kv .sp_cont{display: block;}

    .kv .kv_inner{
        padding: 0 8%;
        flex-direction: column;
        justify-content: flex-end;
        row-gap: 9vw;
    }
    .kv .kv_inner > div:nth-of-type(1){
        padding: 0 3em 0 0;
        width: 75%;
        margin: 0 auto 28px;
    }
    .kv .kv_inner > div > h1{
        font-size: clamp(14px, 3.73vw, 20px);

    }
    .kv .kv_inner > div > h1 img{
        width: clamp(180px, 48vw, 250px);
        margin: 20px 0 0;
    }
    .kv .kv_inner > div > p{
        font-size: 22px;
        line-height: 2;
        margin: 1.5em 0 0;
    }
    .kv .kv_inner > div > div{
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
        column-gap: 1.8vw;
    }
/* 202509改修 タブレット横スクロール回避------------------- */
    .kv .kv_inner > figure{
        inset: -100% -85% calc(-100% - 30vw + 200px) -63%;
        width: 82vw;
        max-width: 82vw;
    }
/* END：202509改修 タブレット横スクロール回避------------------- */
    .kv .kv_inner > div:nth-of-type(2){height: 88px;}
    .kv .kv_inner > div > div{height: 88px;}
    .kv .kv_inner > div > div figure{max-width: 10vw;}
}
@media screen and (max-width:767px) {
    .kv{
        aspect-ratio: 375 / 550;
        background-image: url(/content/dam/daiwasecurities/onlinetrade/tool/d_port/images/bg/kv_sp.png);
        margin: 62px auto 50px;
        padding: 0 0 22%;
    }
    .kv .kv_inner{
        padding: 0 2% 0 0;
        flex-direction: column;
        justify-content: flex-end;
        row-gap: 22vw;
        overflow: visible;
    }
    .kv .kv_inner > div:nth-of-type(1){padding: 0 1em 0 0;width: 90%;margin: 0 auto 0 0;}
    .kv .kv_inner > div > h1{
        font-size: clamp(14px, 3.73vw, 20px);

    }
    .kv .kv_inner > div > h1 img{
        width: clamp(180px, 48vw, 250px);
        margin: 10px 0 0;
    }
    .kv .kv_inner > div > p{
        font-size: clamp(16px, 4.26vw, 22px);
        margin: 1.5em 0 0;
    }
    .kv .kv_inner > div > div{
        width: 100%;
        margin: 0 auto;
        justify-content: space-between;
        column-gap: 10px;
    }
    .kv .kv_inner > figure{
        inset:-100% -70% calc(-100% - 30vw + 240px) auto;
        width: 150vw;
        max-width: 150vw;
    }
    .kv .kv_inner > div > div figure{max-width: 81px;}

    /* scroll down */
    .kv > p{
        font-size: 0;
        inset: auto -100% 16%;
        margin: 0;
        pointer-events: none;
    }
    .kv > p::before{
        width: 34px;
        height: 34px;
        bottom: -60px;
    }
    .kv + .banner{margin: 0 auto 80px;}
}
@media screen and (max-width:767px) and (min-width:610px) {
    .kv .kv_inner > div > div figure{max-width: 100px;}
    .kv .kv_inner > div > div ul li{height: 50px;}
    .kv > p::before{
        width: 50px;
        height: 50px;
        bottom: -96px;
    }
    .kv .kv_inner > div:nth-of-type(1){
        margin: 0 auto 10vw 0;
    }
}
@media screen and (max-width:374px) {
    .kv .kv_inner{row-gap: 15vw;}
    .kv .kv_inner > figure{
        inset: -100% -65% calc(-100% - 30vw + 190px) auto;
        width: 140vw;
        max-width: 140vw;
    }
    .kv > p::before {bottom: -50px;}
}
/* ============================================== */
/* セクション共通 */
/* ============================================== */
@media screen and (min-width:1400px) {
    /* 文字サイズ比例で大きく */
    .sec01 > section .inner{max-width: 1400px;}
    .sec01 > section .f_ttl{font-size: clamp(17px, 1.214vw, 25px);}
    .sec01 > section .f_ttl span{font-size: clamp(39px, 2.785vw, 58px);}
    .sec01 > section h2 + p{font-size: clamp(16px, 1.142vw, 24px);}
    .sec01 > section p:nth-of-type(3){font-size: clamp(14px, 1vw, 21px);}
    /* あしらい */
    .sec01 > section:nth-of-type(1) .f_ttl::before{
        --iconWidth: clamp(47px, 3.357vw, 70px);
        height: auto;
        aspect-ratio: 47 / 57;
    }
    .sec01 > section:nth-of-type(2) .f_ttl::before{
        --iconWidth: clamp(90px, 6.428vw, 133px);
        height: auto;
        aspect-ratio: 9 / 10;
    }
    .sec01 > section:nth-of-type(3) .f_ttl::before{
        --iconWidth: clamp(78px, 5.571vw, 115px);
        height: auto;
        aspect-ratio: 78 / 60;
    }
    /* セクション共通 */
    main > section h2{
        font-size: clamp(30px, 2.142vw, 45px);
    }
    main > section h2 + p{font-size: clamp(16px, 1.142vw, 24px);}
    main > section h2 + p + p{font-size: clamp(14px, .9vw, 20px);}
    /* あしらい */
    main > section:nth-of-type(1) h2::before{
        width: auto;
        --iconHeight: clamp(55px, 3.928vw, 81px);
        aspect-ratio: 52 / 55;
    }
    main > section:nth-of-type(2) h2::before{
        width: auto;
        --iconHeight: clamp(56px, 4vw, 83px);
        aspect-ratio: 45 / 56;
    }
    main > section:nth-of-type(3) h2::before{
        width: auto;
        --iconHeight: clamp(56px, 4vw, 83px);
        aspect-ratio: 67 / 56;
    }
    main > section:nth-of-type(4) h2::before{
        width: auto;
        --iconHeight: clamp(56px, 4vw, 83px);
        aspect-ratio: 51 / 56;
    }
    /* バージョンアップ */
    main > section:nth-of-type(3) .flex li{
        font-size: clamp(18px, 1.085vw, 20px);
        row-gap: .5em;
    }
    /* よくあるご質問 */
    main > section:nth-of-type(4) dl dt{font-size: clamp(18px, 1.285vw, 27px);}
    main > section:nth-of-type(4) dl dt span{font-size: clamp(16px, 1.142vw, 24px);}
    main > section:nth-of-type(4) dl dd,
    main > section:nth-of-type(4) dl dd a{font-size: clamp(16px, 1.142vw, 24px);}
    /* 202506改修 */
    main > section:nth-of-type(2) .inner{max-width: clamp(885px, 69vw, 1330px);}
    .limited_cont.cont01 .h3_point span:has(.en),
    .limited_cont.cont01 .h3_point span.fc_black,
    .limited_cont.cont02 .h3_point > span,
    .limited_cont .h3_point > span{font-size: clamp(30px, 2.34375vw, 45px);}
    .limited_cont .h3_point span.en{font-size: clamp(41px, 3.2vw, 62px);}
    .limited_cont .h3_point span.fc_red{font-size: clamp(34px, 2.65625vw, 51px);}
    .limited_cont h3{font-size: clamp(30px, 2.34375vw, 45px);}
    .limited_cont.cont01 .limited_desc section > ol + p,
    .limited_cont.cont01 .limited_desc section > ol + p + p,
    .limited_cont.cont01 .limited_desc section > ol + p a,
    .limited_cont .limited_desc > p,
    .limited_cont .limited_desc p a,
    .limited_cont .limited_desc section > ol li,
    main > section:nth-of-type(4) .faq_guides li,
    main > section:nth-of-type(4) .faq_guides li a{font-size: clamp(16px, 1.142vw, 24px);}
    .limited_cont .limited_desc section h4{font-size:clamp(18px, 1.285vw, 27px);}
    .limited_cont .h3_point::before,
    .limited_cont .h3_point::after{
        width: clamp(2px, 0.15625vw, 3px);
        height: clamp(60px, 4.84375vw, 90px);
    }
    /* END:202506 */
}

@media screen and (max-width:1000px) and (min-width:768px) {
    main > section h2 + p{font-size: min(20px, 2.2vw);}
}
@media screen and (max-width:767px) {
    main section{
        border-radius: 22px 22px 0 0;
        padding: 80px 0;
    }

    /* 中央揃えセクション（画面のカスタマイズ以降） */
    main > section h2{
        font-size: 26px;
        margin: 80px auto .5em;
    }
    main > section h2 + p{
        text-align: left;
        font-size: 14px;
        line-height: 2;
    }
}

/* ============================================== */
/* アプリの特徴 */
/* ============================================== */
@media screen and (max-width:1000px) and (min-width:768px) {
    /* 特徴共通 */
    .sec01 > section .flex{flex-direction: column !important;}
    .sec01 > section .flex > div{width: 80%;}
    .sec01 > section .flex figure{width: 60%;margin: 30px auto 0;}
}
@media screen and (max-width:767px) {
    /* 特徴共通 */
    .sec01 > section{text-align: center;}
    .sec01 > section .flex{flex-direction: column;}
    .sec01 > section .flex > div,
    .sec01 > section .flex figure{width: 100%;}
    .sec01 > section .flex figure{margin: 25px auto 0;}
    .sec01 > section .f_ttl{margin: 0 auto .5em;}
    .sec01 > section .f_ttl::before{
        inset: 0 -100% auto;
        right: -100% !important;
    }
    .sec01 > section h2{font-size: 26px;}
    .sec01 > section p{
        text-align: left;
        line-height: 2;
    }

    /* 特徴1 */
    .sec01 > section:nth-of-type(1){padding-top: 50px;}
    .sec01 > section:nth-of-type(1) .f_ttl{
        --iconHeight: 68px;
        margin-top: var(--iconHeight);
    }
        .sec01 > section:nth-of-type(1) .f_ttl::before{
            top: calc(var(--iconHeight) * -1);
            width: 56px;
            height: var(--iconHeight);
        }

    /* 特徴2 */
    .sec01 > section:nth-of-type(2){background-image: url(/content/dam/daiwasecurities/onlinetrade/tool/d_port/images/bg/sec_0102_sp.png);}
    .sec01 > section:nth-of-type(2) .flex{flex-direction: column;}
    .sec01 > section:nth-of-type(2) .f_ttl{
        --iconHeight: 66px;
        margin-top: var(--iconHeight);
    }
    .sec01 > section:nth-of-type(2) .f_ttl::before{
        top: calc(var(--iconHeight) * -1);
        width: 100px;
        height: var(--iconHeight);
    }

    /* 特徴3 */
    .sec01 > section:nth-of-type(3) .f_ttl{
        --iconHeight: 66px;
        margin-top: var(--iconHeight);
    }
        .sec01 > section:nth-of-type(3) .f_ttl::before{
            top: calc(var(--iconHeight) * -1);
            width: 86px;
            height: var(--iconHeight);
        }
}

/* ============================================== */
/* 画面のカスタマイズ */
/* ============================================== */
@media screen and (max-width:767px) {
    main > section:nth-of-type(1){
        background-size: 150% auto;
        padding: 80px 0;
    }
    main > section:nth-of-type(1) ul{
        flex-direction: column-reverse;
        row-gap: 35px;
        margin: 45px auto 0;
    }
    main > section:nth-of-type(1) ul li{
        margin: 0 auto;
        width: 90%;
    }
    main > section:nth-of-type(1) ul li figure img{
        width: 85%;
        max-width: 400px;
        margin: 0 auto;
    }
    main > section:nth-of-type(1) ul figcaption{margin: 1em auto 0;}
}
/* ============================================== */
/* アプリ内限定コンテンツ */
/* ============================================== */
@media screen and (max-width:1250px) and (min-width:1081px) {
    main > section:nth-of-type(2) .flex > figure{width: 45%;}
    main > section:nth-of-type(2) .flex > p:nth-of-type(1){right: -5px;}
    main > section:nth-of-type(2) .flex > p:nth-of-type(2){left: -5px;}
}
@media screen and (max-width:1080px) and (min-width:768px) {
    /* 吹き出し */
    main > section:nth-of-type(2) .flex .pc_cont{display: none;}
    main > section:nth-of-type(2) .flex .sp_cont{display: block;}
    main > section:nth-of-type(2) .flex{
        flex-direction: column;
        margin: 35px auto 0;
    }
    main > section:nth-of-type(2) .flex > p{
        position: relative;
        z-index: 0;
        inset: auto !important;
        width: 50%;
        border: 1px solid var(--mainColor);
        border-radius: 13px;
        background: #fff;
        margin: 0 0 20px;
        padding: 1em;
        font-size: 14px;
        line-height: 2;
    }
    main > section:nth-of-type(2) .flex > p::before{
        z-index: 1;
        inset: auto 38% -18px auto;
        width: 20px;
        height: 19px;
        background:url(/content/dam/daiwasecurities/onlinetrade/tool/d_port/images/bg/balloon_sp.svg) no-repeat center / contain !important;
    }
    main > section:nth-of-type(2) .flex > figure{width: 40%;}
    main > section:nth-of-type(2) .flex > figure:nth-of-type(2){margin: 0 0 20px;}

}
@media screen and (max-width:1080px){
    /* 202506修正追記 */
    /* limited_desc */
    .limited_cont .limited_desc{display: contents;}
    .limited_cont .limited_desc section > ol > li::before{padding: 0 0 .2em .05em;}
    .limited_cont .flex > .limited_desc > p{order: 0;}
    .limited_cont .flex > figure{order: 1;}
    .limited_cont .flex > .limited_desc > section{order: 2;}
    main > section:nth-of-type(2) .flex > figure{margin-inline: auto;}
    /* END:202506修正追記 */
}

@media screen and (max-width:767px) {
    main > section:nth-of-type(2){
        background-position: top right 30%;
        background-size: 230% auto;
        padding: 80px 0 100px;
    }
    main > section:nth-of-type(2) p{text-align: center;}
    main > section h2 + p + p{font-size: 12px;}

    /* 吹き出し */
    main > section:nth-of-type(2) .flex{
        flex-direction: column;
        margin: 35px auto 0;
    }
    main > section:nth-of-type(2) .flex > p{
        position: relative;
        z-index: 0;
        inset: auto !important;
        width: 80%;
        border: 1px solid var(--mainColor);
        border-radius: 13px;
        background: #fff;
        margin: 0 0 20px;
        padding: 1em;
        font-size: 14px;
        line-height: 2;
    }
    main > section:nth-of-type(2) .flex > figure{width: 70%;}
    main > section:nth-of-type(2) .flex > figure:nth-of-type(2){margin: 0 0 40px;}

    /* バナー */
    main > section:nth-of-type(2) + .banner{margin: 0 auto 100px;}

        /* 202506改修追記------------------- */
    main > section:nth-of-type(2) h2{margin-bottom: 40px;}
    main > section:nth-of-type(2) p{text-align: left;}
    main > section:nth-of-type(2) .flex{margin: 25px auto 0;}
    main > section:nth-of-type(2) .flex > figure{margin: 0 auto 40px;}
    /* 共通 */
    .limited_cont .h3_point{margin: 0 auto 1.5em;}
    .limited_cont .h3_point > span{
        font-size: 18px;
        text-align: center;
        word-break: auto-phrase;
    }
    .limited_cont .h3_point span.fc_red{
        font-size: 20px;
        letter-spacing: 0;
    }
    .limited_cont .h3_point span.en{font-size: 25px;}
    .limited_cont .h3_point::before,
    .limited_cont .h3_point::after{
        width: 1px;
        height: 36px;
    }
    .limited_cont .h3_point::before{left: -0.8em;}
    .limited_cont .h3_point::after{right: -0.8em;}
    .limited_cont h3{
        font-size: 24px;
        border-width: 3px;
        padding-block: .35em;
    }
    .limited_cont .limited_desc{width: 100%;}
    /* 日経平均予想チャレンジ */
    .limited_cont.cont01{margin: 0 auto 90px;}
    .limited_cont.cont01 .h3_point span:has(.en),
    .limited_cont.cont01 .h3_point span.fc_black{font-size: 18px;}
    .limited_cont.cont01 .limited_desc section > ol + p{margin: 0 0 1.5em;}
    /* 特典・クーポン */
    .limited_cont.cont02 .h3_point > span{font-size: 18px;}
    .limited_cont.cont02 .flex > .limited_desc > p{margin: 0 0 1.8em;}
    /* END:202506改修追記------------------- */
}

/* ============================================== */
/* 今後のバージョンアップについて */
/* ============================================== */
@media screen and (max-width:767px) {
    main > section:nth-of-type(3){padding: 70px 0 100px;}
    main > section:nth-of-type(3) h2::before{
        width: 90px;
        --iconHeight: 66px;
    }
    main > section:nth-of-type(3) h2 + p{text-align: center;}
    main > section:nth-of-type(3) .flex{
        flex-wrap: wrap;
        gap: 14px;
        max-width: 393px;
    }
    main > section:nth-of-type(3) .flex li{
        width: calc((100% / 2) - 7px);
        border-radius: 18px;
        font-size: 16px;
    }
    main > section:nth-of-type(3) .flex li:nth-of-type(4){line-height: 1.5;}
    /* あしらい */
    main > section:nth-of-type(3) .flex li:nth-of-type(1)::before{width: 32px; height: 32px;}
    main > section:nth-of-type(3) .flex li:nth-of-type(2)::before{width: 37px; height: 29px;}
    main > section:nth-of-type(3) .flex li:nth-of-type(3)::before{width: 32px; height: 36px;}
    main > section:nth-of-type(3) .flex li:nth-of-type(4)::before{width: 29px; height: 35px;}
}
/* ============================================== */
/* よくあるご質問 */
/* ============================================== */
@media screen and (max-width:767px) {
    main > section:nth-of-type(4){padding: 60px 0 80px;}
    main > section:nth-of-type(4) h2{margin: 80px auto 35px;}
    main > section:nth-of-type(4) dl dt{
        font-size: 16px;
        padding: 1em 3em 1em 1.5em;
        background: url(/content/dam/daiwasecurities/onlinetrade/tool/d_port/images/bg/ac_circle.svg) no-repeat right 5px top 1.2em/ 27px 27px;
    }
    main > section:nth-of-type(4) dl dt span{
        position: absolute;
        z-index: 0;
        inset: .8em auto auto 0;
        margin: auto;
        font-size: 18px;
    }
/*
    main > section:nth-of-type(4) dl dt::before,
    main > section:nth-of-type(4) dl dt::after{inset: 32px 11px auto auto;}
*/
    main > section:nth-of-type(4) dl dd{padding-right: 3em;}
    main > section:nth-of-type(4) dl dd a{display: inline;margin: 0;word-break: break-all;}

    main > section:nth-of-type(4) dl dd span{padding: 0;}
    main > section:nth-of-type(4) dl dd span::before{position: static;}
    /* 202506改修追記------------------- */
    main > section:nth-of-type(4) h2 + p{text-align: left;}
    main > section:nth-of-type(4) .faq_guides{margin: 20px auto 38px;}
    main > section:nth-of-type(4) .faq_guides li:not(:last-of-type){margin: 0 0 1em;}
    main > section:nth-of-type(4) .faq_guides li a{
        margin: 0;
        transform: translateX(-1.2em);
        word-break: break-all;
    }
    /* END:202506改修追記------------------- */
}
/* ============================================== */
/* CTA(アプリDL) */
/* ============================================== */
@media screen and (max-width:767px) {
    .cta{
        padding: 65px 0;
        background-image: url(/content/dam/daiwasecurities/onlinetrade/tool/d_port/images/bg/cta_sp.jpg);
    }
    .cta div.flex{
        width: 85%;
        column-gap: 20px;
        margin: 0 auto 35px;
    }
    .cta div.flex h2{font-size: 13px;}
    /* .cta div.flex figure{width: 73px;} */
}
/* ============================================== */
/* ディスクレーマー、フッター */
/* ============================================== */
@media screen and (max-width:767px) {
    /* ディスクレーマー */
    .panel-note >*{padding: 0 5%;}
    .panel-note{padding: 50px 0 40px;}
    .panel-note h2{
        display: block;
        font-size: 16px;
        line-height: 2;
        text-align: center;
    }
    .panel-note h2::before{
        display: inline-block;
        margin: 0 .2em -.1em;
    }

    /* フッター */
    footer{padding: 0;}
    footer h2{display: block;}
    footer h2 span{display: none;}
    footer h2:nth-child(2){margin: 2em auto 0;}
    footer h2 + p{margin: 0 auto;}
}


/* ============================================== */
/* ページトップ */
/* ============================================== */
@media screen and (max-width:767px) {
    .pagetop{
        inset: auto 20px 20px auto;
        width: 60px;
        height: 60px;
    }
}