@charset "UTF-8";


/* 数字で見る大塚商会 */
/* 数字で見る大塚商会：背景画像 */
.wrapper.number {
    background: url(../img/number_bg.png) no-repeat 50% 300px;
    /* background-size: 2880px auto ; */
}

main {
    padding: 0 20px 20px;
}

/* 数字で見る大塚商会：各要素の空き */
.number article {
    margin-bottom: 100px;
}

.number article:last-child {
    margin-bottom: 0;
}

/* 数字で見る大塚商会：レイアウト */
.flex-columns.number > * {
    flex-basis: 50%;
}

.flex-columns.number > *:last-child {
    text-align: right;
}

/* 数字で見る大塚商会：文書 */
.flex-columns.number > *:first-child > p {
    padding-right: 2em;
}

/* 数字で見る大塚商会：数字部分 */
.values {
    font-family: Meiryo, 'Hiragino Kaku Gothic Pro', Helvetica, sans-serif;
    font-size: 5.75em;
    font-weight: bold;
    color: #ff4400;
    margin-bottom: 40px;
    position: relative;
}

/*.values.ex {
	padding-bottom: 50px;
}*/

.values::after {
    content: attr(data-unit);
    font-size: 0.3em;
    /* display: inline-block; */
}

.values[data-misc] {
    margin-bottom: 80px;
}

.values[data-misc]::before {
	white-space: pre-wrap;
    content: attr(data-misc);
    font-size: 0.3em;
    position: absolute;
    top: 3.3em;
}

.values.ex::before {
	white-space: pre-wrap;
	content: "情報処理系：11,671名\Aその他公的資格：2,992名";
	font-size: 1.2rem;
    position: absolute;
	font-weight: normal;
	line-height: 1.5;
    top: 5.2rem;
}

h2[data-misc]::after {
    content: attr(data-misc);
    font-size: 0.7em;
}

/* 数字で見る大塚商会：グラフ部分 */
.graph > small {
    display: block;
    padding-top: 1em;
    text-align: right;
    font-size: 0.8em;
}

/* 数字で見る大塚商会：矢印 */
.arrow {
    display: none;
}

/** --------------------------------
* タブレット
*/
/* グラフ部分 */
.tablet .graph {
    width: 40%;
}
.tablet .graph img {
    width: 100%;
    height: inherit;
}

/** --------------------------------
* sp
*/
@media screen and (max-width: 767px) {

    /* 数字で見る大塚商会 */
    /* 数字で見る大塚商会：背景画像 */
    .wrapper.number {
        background: url(../img/number_bg.png) no-repeat 50% 270px;
        background-size: 300% auto;
    }

    main {
        padding: 10px 1em 50px;
    }

    /* 数字で見る大塚商会：レイアウト */
    .flex-columns.number {
        flex-direction: column;
    }

    /* 数字で見る大塚商会：各要素の空き */
    .number article {
        margin-bottom: 30px;
    }

    /* 数字で見る大塚商会：文書 */
    .flex-columns.number > *:first-child > p {
        padding-right: 0;
    }

    /* 数字で見る大塚商会：数字部分 */
    .values {
        font-size: 4.5rem;
    }

    /* 数字で見る大塚商会：グラフ */
    .graph > img {
        width: 100%;
        height: auto;
    }
	
}