[data-mobile-type='ios'] { --statusbar: 20px; }
[data-mobile-type='ios'] body:before { content: ''; position: fixed; top: 0; left: 0; z-index: 10000; display: block; width: 100%; height: 20px; background-color: rgba(0, 0, 0, 0.3); transform: translateZ(0); opacity: 1; transition: opacity 0.3s; }
[data-mobile-type='ios'] body.page-main:before {opacity: 0;}
[data-mobile-type='ios'][data-layer-target='.panel'] .page-main:before { opacity: 1; }

[data-mobile-type='ios'] .document {padding-top: 20px;}

[data-mobile-type='ios'] .header {padding-top: 20px;}
[data-mobile-type='ios'] .headline--main {margin-top: 20px;}
[data-mobile-type='ios'] .headline--main:after { top: calc(20px * -1); }

[data-mobile-type='ios'] .section--main.fixed-headline:before { height: calc(var(--headline-height) + 20px); }

[data-mobile-type='ios'] .panel__wrap .btn-setting { top: calc(20px - 5px); }
[data-mobile-type='ios'] .panel__top { padding-top: calc(20px + 17px); }

[data-mobile-type='ios'][data-header="fixed"] .seminar__headline__inner {padding-top: 20px;}


@media only screen and (device-width: 375px) and (max-device-width: 812px) and (-webkit-device-pixel-ratio: 3),
screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3),
only screen and (-webkit-min-device-pixel-ratio: 4.770833333333333),
only screen and (min-resolution: 458dpi),
only screen and (min-resolution: 3dppx),
screen and (device-width: 360px) and (device-height: 740px) and (-webkit-min-device-pixel-ratio: 4),
only screen and (min-device-pixel-ratio: 4),
only screen and (-webkit-min-device-pixel-ratio: 5.447916666666667),
only screen and (min-resolution: 523dpi),
only screen and (-webkit-min-device-pixel-ratio: 4),
only screen and (min-resolution: 4dppx) {
    [data-mobile-type='ios'] { --statusbar : 20px; }
    [data-mobile-type='ios'] body:before { content: ''; position: fixed; top: 0; left: 0; z-index: 10000; display: block; width: 100%; height: 40px; background-color: rgba(0, 0, 0, 0.3); transform: translateZ(0); opacity: 1; transition: opacity 0.3s; }
    [data-mobile-type='ios'] body.page-main:before {opacity: 0;}
    [data-mobile-type='ios'][data-layer-target='.panel'] .page-main:before { opacity: 1; }

    [data-mobile-type='ios'] .document {padding-top: 40px;}

    [data-mobile-type='ios'] .header {padding-top: 40px;}
    [data-mobile-type='ios'] .headline--main {margin-top: 40px;}
    [data-mobile-type='ios'] .headline--main:after { top: calc(40px * -1); }

    [data-mobile-type='ios'] .section--main.fixed-headline:before { height: calc(var(--headline-height) + 40px); }

    [data-mobile-type='ios'] .panel__wrap .btn-setting { top: calc(40px - 5px); }
    [data-mobile-type='ios'] .panel__top { padding-top: calc(40px + 17px); }

    [data-mobile-type='ios'][data-header="fixed"] .seminar__headline__inner {padding-top: 40px;}

}
@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2), screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {

    [data-mobile-type='ios'] body:before { content: ''; position: fixed; top: 0; left: 0; z-index: 10000; display: block; width: 100%; height: 20px; background-color: rgba(0, 0, 0, 0.3); transform: translateZ(0); opacity: 1; transition: opacity 0.3s; }
    [data-mobile-type='ios'] body.page-main:before {opacity: 0;}
    [data-mobile-type='ios'][data-layer-target='.panel'] .page-main:before { opacity: 1; }

    [data-mobile-type='ios'] .document {padding-top: 20px;}

    [data-mobile-type='ios'] .header {padding-top: 20px;}
    [data-mobile-type='ios'] .headline--main {margin-top: 20px;}
    [data-mobile-type='ios'] .headline--main:after { top: calc(20px * -1); }

    [data-mobile-type='ios'] .section--main.fixed-headline:before { height: calc(var(--headline-height) + 20px); }

    [data-mobile-type='ios'] .panel__wrap .btn-setting { top: calc(20px - 5px); }
    [data-mobile-type='ios'] .panel__top { padding-top: calc(20px + 17px); }

    [data-mobile-type='ios'][data-header="fixed"] .seminar__headline__inner {padding-top: 20px;}
}


[data-mobile-type='android'] { --statusbar : 23px; }
[data-mobile-type='android'] body:before { content: ''; position: fixed; top: 0; left: 0; z-index: 10000; display: block; width: 100%; height: 23px; background-color: rgba(0, 0, 0, 0.3); transform: translateZ(0); opacity: 1; transition: opacity 0.3s; }
[data-mobile-type='android'] body.page-main:before {opacity: 0;}
[data-mobile-type='android'][data-layer-target='.panel'] .page-main:before { opacity: 1; }

[data-mobile-type='android'] .document {padding-top: 23px;}

[data-mobile-type='android'] .header {padding-top: 23px;}
[data-mobile-type='android'] .headline--main {margin-top: 23px;}
[data-mobile-type='android'] .headline--main:after { top: calc(23px * -1); }

[data-mobile-type='android'] .section--main.fixed-headline:before { height: calc(var(--headline-height) + 23px); }

[data-mobile-type='android'] .panel__wrap .btn-setting { top: calc(23px - 5px); }
[data-mobile-type='android'] .panel__top { padding-top: calc(23px + 17px); }

[data-mobile-type='android'][data-header="fixed"] .seminar__headline__inner {padding-top: 23px;}