html {
    font-size: 62.5%; 
    width: 100%;
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background-color: #E7E7E7;
    font-size: 1.4rem;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: 190%;
	letter-spacing: 1px;
    text-align: center;
}

b,.f {
	font-size: 2.4rem;
	line-height: 125%;
	font-weight: bold;
    vertical-align: baseline;
}

.container {
    width: 500px;
    min-height: 100%;
	background: url(/koneta/iimatugai/images/base.gif) repeat-y center top;
    margin: 0 auto;
    padding: 10px 45px;
    box-sizing: border-box;
}


/* Btn
 * --------------------------------------------------------*/
.btn {
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background-repeat: no-repeat;
}

.btn:hover {
    background-position: 0 0;
}

.btn--back, .btn--next {
    width: 71px;
    height: 54px;
    background-position: 0 -54px;
}

.btn--back {
    background-image: url(/koneta/iimatugai/images/navi_back.gif?201612);
}

.btn--next {
    background-image: url(/koneta/iimatugai/images/navi_next.gif?201612);
}

.btn--mail {
    width: 186px;
    height: 163px;
    background-image: url(/koneta/iimatugai/images/navi_mail.gif?201612);
    background-position: 0 -163px;
}

.btn--close {
    width: 139px;
    height: 103px;
    background-image: url(/koneta/iimatugai/images/navi_close.gif?201612);
    background-position: 0 -103px;
}

.btn--old {
    width: 194px;
    height: 103px;
    background-image: url(/koneta/iimatugai/images/navi_old.gif?201612);
    background-position: 0 -103px;
}

/* Header
 * --------------------------------------------------------*/
.header {
    margin-bottom: 20px;
}

.header__title {
    margin: 0;
}

.header__title img {
    width: 100%;
}


/* Content
 * --------------------------------------------------------*/
.content__title {
    height: 83px;
    margin: 0;
    font-size: 2.4rem;
    font-weight: bold;
}

.content__title:before {
    content: '';
    display: inline-block;
    width: 143px;
    height: 100%;
    margin-right: -65px;
    margin-bottom: -20px;
    background: url(/koneta/iimatugai/images/today.gif) no-repeat;
}

.content__body {
    display: inline-block;
    text-align: left;
}

.content__date {
    margin-top: 0;
    font-size: 1.0rem;
    line-height: 30px;
    background: url(/koneta/iimatugai/images/date_base.gif) no-repeat center center;
}

/* Pager
 * --------------------------------------------------------*/
.pager {
    overflow: hidden;
    margin-top: -80px;
    margin-bottom: 20px;
    padding: 0 15px;
}

.pager .btn--back {
    float: left;
}

.pager .btn--next {
    float: right;
}

/* Footer
 * --------------------------------------------------------*/
.footer {
    padding: 0 15px;
}

/* Util
 * --------------------------------------------------------*/
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.separator {
    width: 100%;
    margin: 20px 0;
}


@media screen and (max-width: 480px) {
    .container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }

    .separator {
        margin: 10px 0;
    }

    .btn--back, .btn--next {
        width: 50px;
        height: 38px;
        background-size: 50px 76px;
        background-position: 0 -38px;
    }

    .btn--mail {
        width: 130px;
        height: 114px;
        background-size: 130px 228px;
        background-position: 0 -114px;
    }

    .btn--close {
        width: 98px;
        height: 72px;
        background-size: 98px 144px;
        background-position: 0 -72px;
    }

    .btn--old {
        width: 136px;
        height: 72px;
        background-size: 136px 144px;
        background-position: 0 -72px;
    }

    .pager {
        margin-top: -60px;
    }
}