@charset "utf-8";

/* header */
.content_title {
    color           : #c1272d;
}

#contents_image {
    margin-bottom   : 40px;
}

#contents_image > img {
    height          : 210px;
}

/* download_list */
#download_list {
    margin          : 50px 0 0 5%;
}

#download_list > h2 {
    font-size	    : 20px;
}

#download_list > p {
    padding         : 10px 20px 0 20px;
}

#download_list > dl {
    margin          : 20px 20px 50px 20px;
}

#download_list > dl > dt {
    clear           : left;
    font-weight     : bold;
}

#download_list > dl > dd {
    width           : 95%;
    margin          : 0 0 0 20px;
}

#download_list ul {
    margin          : 0.5em 2em;
    list-style      : disc;
}

#download_list li {
    display         : list-item;
    margin          : 0.25em 0;
}

/* download */
.dl {
    text-align	: center;
    font-size	: 14px;
}

.dl-container {
    margin		: 80px auto;
    width		: 650px;
}

.dl-container > h3 {
    font-size	: 20px;
    color		: #c1272d;
}

.dl-container > p {
    font-size	: 14px;
    color		: #4d4d4d;
}

.dl-container > p > a {
    text-decoration : underline;
}

.dl-container > .with-prize {
    background	: url('../image/prize_silver.png') top right no-repeat;
    margin		: 5px 0 70px 0;
    padding		: 0 60px 0 0;
}

.dl-container > .button {
    background	: url('../image/pdf_logo.png') top left no-repeat;
    padding		: 0 0 0 360px;
    font-size	: 14px;
    text-align	: center;
}

.dl-container > .button > a {
    color		: #0000ff;
}

/* attention */
.attention {
    background  : url('../image/pr_arrow.png') center right no-repeat;
    border      : solid 3px #C1272D;
    padding     : 20px 30px 20px 10px;
    margin      : 30px 70px 20px 70px;
}

.attention > a,
.attention > a:link,
.attention > a:visited {
    color       : #C1272D;
}

.warn {
    color       : #c1272D;
}

/* overview */
.overview-container {
    margin		: 40px 0 0 0;
    background	: #ff4845;
}

.overview {
    background	: url('../image/pdf_pic01.png') no-repeat;
    margin		: 0 auto;
    padding		: 40px 0 0 190px;
    width		: 550px;
    height		: 160px;
    color		: #ffffff;
}

.overview > h2 {
    font-size	: 32px;
    font-weight	: normal;
}

.overview p {
    width		: 500px;
    font-size	: 12px;
}

/* tutorial */
.tutorial {
    background	: #f4f6f8;
    padding		: 46px 0 55px 0;
    color		: #2e3192;
}

.tutorial > h2 {
    background	: url('../image/pdf_arw.png') top center no-repeat;
    padding		: 60px 0 0 0;
    font-size	: 36px;
    font-weight : normal;
    text-align	: center;
}

.tutorial > .image {
    margin		: 10px 0;
    text-align	: center;
}

.tutorial > .image > img {
    max-width	: 100%;
}

.tutorial > p {
    margin		: 20px auto;
    width		: 570px;
    font-size	: 12px;
    line-height	: 1.5;
}

/* feature */
.feature {
    background	: #f4f6f8;
    padding		: 55px 40px;
}

.feature > h2 {
    font-size	: 20px;
    text-align	: center;
}

.feature-item {
    display			: inline-block;
    vertical-align	: top;
    margin			: 40px 25px;
    width			: 350px;
    color			: #2e3192;
}

.feature-item > h3 {
    padding		: 60px 0 0 0;
    font-size	: 32px;
    font-weight	: normal;
    text-align	: center;
}

.feature-item > p {
    font-size	: 12px;
    margin		: 5px 0 0 0;
}

.feature-item > .convenient {
    background 	: url('../image/pdf_bnf01.png') top center no-repeat;
}

.feature-item > .secure {
    background 	: url('../image/pdf_bnf02.png') top center no-repeat;
}

.feature-item > .bitmap {
    background	: url('../image/pdf_bnf03.png') top center no-repeat;
}

.feature-item > .japanese {
    background	: url('../image/pdf_bnf04.png') top center no-repeat;
}

.feature-item > .free {
    background	: url('../image/pdf_bnf05.png') top center no-repeat;
}

/* others */
br.wide   { display : inline; }
br.narrow { display : none; }

@media screen and (max-width: 900px) {
    #contents_image > img { height : 100%; }

    .feature-item { margin : 40px 2%; padding : 0; width : 45%; }
}

@media screen and (max-width: 740px) {
    .overview { background : none; margin : 0 auto; padding : 30px 0; width : 80%; height : 100%; }
    .overview > h2 { text-align : center; }
    .overview > p  { width : 100%; }
}

@media screen and (max-width: 640px) {
    .dl-container { margin : 30px auto; width : 95%; }
    .dl-container > h3 { font-size : 16px; text-align : center; }
    .dl-container > .with-prize { background : none; margin : 5px 0 30px 0; padding : 0; }
    .dl-container > .button { background : none; padding : 0; }

    .attention { margin : 20px 3%; }

    .overview { width : 95%; }
    .overview > h2 { font-size : 20px; }
    .overview > p  { width : 100%; }

    .tutorial { padding : 30px 20px; }
    .tutorial > h2 { background	: none; padding	: 0; font-size : 20px; }
    .tutorial > p  { width : 100%; }

    .feature { padding : 30px 20px; }
    .feature-item { margin : 20px 2%; padding : 0; width : 95%; }
    .feature-item > h3 { font-size : 24px; }

    br.wide   { display : none; }
    br.narrow { display : inline; }
}