.start-pdf *{
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #666;
    line-height: 150%;
}

/* common 
----------------------------------------------------*/
.start-pdf_inner{
    width: 880px;
    margin: 0px auto;
    position: relative;
}

.start-pdf .color_red{color: #DF2D57;}
.start-pdf .color_blue{color: #00A0E9;}

.start-pdf p + p {margin-top: 8px;}
.start-pdf_button{margin-top: 16px;}

.start-pdf p small{font-size:14px;}

.start-pdf_button a{
    display: block;
    width: 400px;
    height: 48px;
    line-height: 48px;
    background-color: #fff;
    border: 2px solid #00A0E9;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0px 2px 0px #00A0E9; 
    margin:0 auto;
}

.start-pdf_button a:hover{
    opacity: 0.6;
}

.start-pdf .imgborder img{
    border:2px solid #EDF0F2;
    border-radius: 4px;
}

/* icon
----------------------------------------------------*/

.icon-arrow_down {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%2394B3BF" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>');
    background-repeat: no-repeat;
    background-position: center right 8px;
    background-size: 20px;
}
.icon-arrow_right {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%2300A0E9" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /></svg>');
    background-repeat: no-repeat;
    background-position: center right 8px;
    background-size: 20px;
}

/* Hero
----------------------------------------------------*/

.start-pdf_hero{
    background-image: url(https://mangaz-static.j-comi.jp/images/promo/start_pdf/hero_bg.gif);
    background-size: cover;
    height: 320px;
    animation: bgLoop 40s linear infinite;
    position: relative;
    margin-bottom: 72px;
}

@keyframes bgLoop {
    0% { background-position: 0 0;}
  100% { background-position: -1040px 0px;}
}

.start-pdf_hero h1{
    font-size: 48px;
    line-height: 1.2;
    text-align: center;
    padding-left: 370px;
    padding-top: 98px;
    color: #333;
}

.start-pdf_hero h1 small{
    font-size: 31px;
}

.start-pdf_hero_chara {
    position: absolute;
    top: 8px;
    left: 0px;
}

/* Intro
----------------------------------------------------*/

.start-pdf_intro{
    padding: 0 16px;
    color: #333;
    margin-bottom: 40px;
}

.start-pdf_intro h2{
    font-size: 19px;
    margin-bottom: 16px;
    line-height: 1;
}

/* nav
----------------------------------------------------*/
.start-pdf_nav{
    padding: 0 16px;
    margin-bottom: 24px;
}

.start-pdf_nav ul{
    border-top: 1px dashed #E1E6EA;
    line-height: 1;
}

.start-pdf_nav ul li{
    border-bottom: 1px dashed #E1E6EA;
}

.start-pdf_nav ul li a{
    display: block;
    padding: 18px 8px;
    color: #00A0E9;
}

/* box
----------------------------------------------------*/
.start-pdf_container{
    padding:40px 16px 24px;
    background-color: #fff;
}

.start-pdf_box{
    padding: 24px 80px;
    background-color: #EDF0F2;
    border-radius: 6px;
}

.start-pdf_box a{
    color: #00A0E9;
}

.start-pdf_box + .start-pdf_box{
    margin-top: 16px;
}

.start-pdf_container:nth-child(even){
    background-color: #EDF0F2;
}

.start-pdf_container:nth-child(even) .start-pdf_box{
    background-color: #fff;
}

/* box / parts
----------------------------------------------------*/
.start-pdf_container h2{
    margin-bottom: 40px;
    text-align: center;
    font-size: 28px;
    line-height: 1.4;
    color: #333;
    background-image: url(https://mangaz-static.j-comi.jp/images/promo/start_pdf/headline.svg);
    background-repeat: no-repeat;
    background-position: bottom 4px center;
    background-size: 385px;
}

.start-pdf_container h2 .text_small{
    font-size: 18px;
}
.start-pdf_container h3{
    text-align: center;
    color: #333;
    margin-bottom: 24px;
}

.start-pdf_flex{
    display: flex;
}

.start-pdf_flex div:first-child{
    margin-right: 16px;
}

/* box / diff
----------------------------------------------------*/
.start-pdf_diff h3 span{
    background-color: #E9B600;
    color: #fff;
    font-size: 11px;
    padding:4px 8px;
    border-radius: 20px;
}

/* box / howto
----------------------------------------------------*/
.start-pdf_howto .start-pdf_box + .start-pdf_box{
    margin-top: 40px;
}

.start-pdf_howto h3 {
    position: relative;
}
.start-pdf_howto h3 span{
    background-image: url(https://mangaz-static.j-comi.jp/images/promo/start_pdf/balloon.svg);
    display: block;
    width: 140px;
    height: 39px;
    color: #fff;
    line-height: 33px;
    position: absolute;
    left: calc(50% - 70px);
    top: -48px
}


/* box / footer
----------------------------------------------------*/
.start-pdf_footer{
    background-color: #fff!important;
    text-align: center;
    margin-bottom: 40px;
}