/*---------------------
　　　 共通スタイル
---------------------*/
.mt10 {margin-top: 10px}
.mt20 {margin-top: 10px}
.mt30 {margin-top: 10px}
.mt40 {margin-top: 10px}
.mb10 {margin-bottom: 10px}
.mb20 {margin-bottom: 20px}
.mb30 {margin-bottom: 30px}
.mb40 {margin-bottom: 40px}
.talign_c {text-align: center;}
.talign_r {text-align: right;}
.talign_l {text-align: left;}
.txt_small {font-size:80%;}
.fl-l {float: left;}
.fl-r {float: right;}
.clearfix:after,.list_chapter:after {
    content: " ";
    display: block;
    clear: both;
}
a:hover {text-decoration: none !important;}


/*---------------------
　　　　パンの歴史館
---------------------*/

/* 共通 */
.line_dot_brown {
    width: 900px;
    margin: 0 auto;
    height: auto;
    border-top: none;
    border-bottom: 1px dashed #5b3708;
}

/* コンテンツ */
#history_wrapper {
    width: 950px;
    margin: 0 auto 20px;
    padding: 8px;
    border: 5px solid #c4b5a1;
    background: url(../img/bg.jpg) repeat;
    font-size: 14px;
    line-height: 1.5;
    font-family: "HiraKakuPro-W3", "Hiragino Kaku Gothic", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka", "sans-serif";
    box-sizing: border-box;
}
#history {
    border: 1px dashed #5b3708;
}
.history_title {
    margin: 10px 10px 0;
    padding: 0 0 10px;
    border-bottom: 1px solid #563011;
    text-align: right;
}
.history_title img {
    width: 340px;
}
.lead_txt {
    margin: 40px 0;
    text-align: center;
    font-size: 18px;
    color: #6b4b0a;
}
.contents {
    width: 900px;
    margin: 50px auto;
}
.chapter_maintitle {
    display: table-cell;
    vertical-align: middle;
    padding: 0 30px 50px;
}
.chapter_maintitle img {
    vertical-align: middle;
}
.chapter_maintitle .title_label {
    margin-right: 17px;
}
.chapter_title {
    color: #40220f;
    font-size: 30px;
    font-weight: bold;
    padding: 0 30px;
}
.chapter_title br {
    display: none;
}
.chapter_box {
    font-size: 18px;
    line-height: 1.8;
    padding: 20px 30px 30px;
}
.chapter_txtbox p {
    margin: 0 0 30px;
}
.chapter_pic {
    margin: 0 0 30px;
}
.box_w490 {width: 490px;}
.box_w490 img {width: 100%;}
.box_w460 {width: 460px;}
.box_w460 img {width: 100%;}
.box_w410 {width: 410px;}
.box_w410 img {width: 100%;}
.box_w360 {width: 360px;}
.box_w360 img {width: 100%;}
.box_w240 {width: 240px;}
.box_w240 img {width: 100%;}

/* パンの小話部分 */
.anecdote_head {
    background: #7f4f21;
    color: #fff;
    display: inline-block;
    padding: 5px 13px;
    border-radius: 8px 8px 0 0;
}
.anecdote_head span {
    background-position: center right;
    background-size: 20%;
    background-repeat: no-repeat;
    padding: 5px 30px 5px 0;
}
.anecdote_head .icon_circle01 {background-image: url(../img/icon_circle01.png);}
.anecdote_head .icon_circle02 {background-image: url(../img/icon_circle02.png);}
.anecdote_head .icon_circle03 {background-image: url(../img/icon_circle03.png);}
.anecdote_head .icon_circle04 {background-image: url(../img/icon_circle04.png);}
.anecdote_box {
    border-top: 2px solid #7f4f21;
    border-bottom: 2px solid #7f4f21;
    background: #fff;
    padding: 3px 0;
    margin: 0 0 30px;
}
.anecdote_txtbox {
    padding: 30px 50px;
    border-top: 1px dashed #7f4f21;
    border-bottom: 1px dashed #7f4f21;
}
.anecdote_title {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 10px;
    color: #b28247;
}

/* ページャー */
.pager {
    font-size: 18px;
    margin: 15px 0 0;
    text-align: center;
}
.pager li {
    display:inline;
    padding: 0 15px 0 10px;
    border-right: 1px solid #e61673;
}
.pager li:last-child {
    border-right: none;
}
.pager a {
    color: #e61673 !important;
}

/* TOP用目次 */
.list_chapter_top {
    width: 780px;
    margin: 0 auto;
}
.list_chapter_top li {
    margin: 0 0 15px;
}
.list_chapter_top a {
    display: block;
    width: 780px;
    height: 85px;
    background-repeat: no-repeat;
    background-image: url(../img/btn_sprite_title_long.png);
}
.list_chapter_top .chapter01 a {
    background-position: 0 0;
}
.list_chapter_top .chapter01 a:hover {
    background-position: 0 -85px;
}
.list_chapter_top .chapter02 a {
    background-position: 0 -170px;
}
.list_chapter_top .chapter02 a:hover {
    background-position: 0 -255px;
}
.list_chapter_top .chapter03 a {
    background-position: 0 -340px;
}
.list_chapter_top .chapter03 a:hover {
    background-position: 0 -425px;
}
.list_chapter_top .chapter04 a {
    background-position: 0 -510px;
}
.list_chapter_top .chapter04 a:hover {
    background-position: 0 -595px;
}
.list_chapter_top .chapter05 a {
    background-position: 0 -680px;
}
.list_chapter_top .chapter05 a:hover {
    background-position: 0 -765px;
}
.list_chapter_top .chapter06 a {
    background-position: 0 -850px;
}
.list_chapter_top .chapter06 a:hover {
    background-position: 0 -935px;
}
.list_chapter_top .chapter07 a {
    background-position: 0 -1020px;
}
.list_chapter_top .chapter07 a:hover {
    background-position: 0 -1105px;
}

/* 下層ページ用目次 */
.list_chapter {
    width: 845px;
    margin: 0 auto;
}
.list_chapter li {
    float: left;
    margin: 25px 5px 0 0;
}
.list_chapter li:nth-child(2n) {
    margin: 25px 0 0 0;
}
.list_chapter a {
    display: block;
    width: 420px;
    height: 75px;
    background-size: 200%;
    background-repeat: no-repeat;
    background-image: url(../img/btn_sprite_title_short.png);
}
.list_chapter .chapter01 a {
    background-position: 0 0;
}
.list_chapter .chapter01 a:hover {
    background-position: 0 -76px;
}
.list_chapter .chapter01 a.active {
    background-position: 0 -76px;
}
.list_chapter .chapter02 a {
    background-position: -420px 0;
}
.list_chapter .chapter02 a:hover {
    background-position: -420px -76px;
}
.list_chapter .chapter02 a.active {
    background-position: -420px -76px;
}
.list_chapter .chapter03 a {
    background-position: 0 -153px;
}
.list_chapter .chapter03 a:hover {
    background-position: 0 -229px;
}
.list_chapter .chapter03 a.active {
    background-position: 0 -229px;
}
.list_chapter .chapter04 a {
    background-position: -420px -153px;
}
.list_chapter .chapter04 a:hover {
    background-position: -420px -229px;
}
.list_chapter .chapter04 a.active {
    background-position: -420px -229px;
}
.list_chapter .chapter05 a {
    background-position: 0 -306px;
}
.list_chapter .chapter05 a:hover {
    background-position: 0 -382px;
}
.list_chapter .chapter05 a.active {
    background-position: 0 -382px;
}
.list_chapter .chapter06 a {
    background-position: -420px -306px;
}
.list_chapter .chapter06 a:hover {
    background-position: -420px -382px;
}
.list_chapter .chapter06 a.active {
    background-position: -420px -382px;
}
.list_chapter .chapter07 a {
    background-position: 0 -457px;
}
.list_chapter .chapter07 a:hover {
    background-position: 0 -533px;
}
.list_chapter .chapter07 a.active {
    background-position: 0 -533px;
}


/*---- SP表示 ----*/

@media only screen and (max-width: 767px) {
    a {text-decoration: none !important;}
    a:hover {text-decoration: none !important;}

    /* 共通 */
    img {
        width: 100%;
    }

    .line_dot_brown {
        width: 100%;
    }

    /* コンテンツ */
    #history_wrapper {
        width: 100%;
        margin: auto;
    }
    .history_title {
        margin: 3% 3% 0;
        padding: 0 0 3%;
        border-bottom: 1px dotted #563011;
    }
    .history_title img {
        width: 60%;
    }
    .chapter_maintitle {
        display: block;
        text-align: center;
        padding: 0 3% 0;
    }
    .chapter_maintitle .title_label {
        margin-right: 0;
        margin: 10% 0;
        width: 13%;
    }
    .chapter_maintitle .title_label_txt {
        display:block;
        margin: 0 auto;
        width: 100%;
    }
    .chapter_maintitle .title_label_txt img {
        width: 100%;
    }
    .chapter_title {
        font-size: 140%;
        line-height: 1.4;
        margin: 10% 0;
        padding: 0 3%;
        text-align: center;
    }
    .chapter_title br {
        display: block;
    }
    .chapter_box {
        font-size: 115%;
        line-height: 1.8;
        padding: 5% 3% 9%;
    }
    .chapter_txtbox p {
        margin: 0 0 3%;
    }
    .chapter_pic {
        margin: 0 0 5%;
    }
    .lead_txt {
        font-size: 130%;
    }
    .contents {
        width: 90%;
        margin: 0 auto 7%;
    }
    .lead_txt {
        margin: 6% 0 7%;
        text-align: left;
    }
    .lead_txt br {
        display: none;
    }
    .box_w490,.box_w490 img,.box_w460,.box_w460 img,.box_w360,.box_w360 img,.box_w410,.box_w410 img ,.box_w240,.box_w240 img{
        width: 100%;
    }

    /* パンの小話部分 */
    .anecdote_head {
        margin: 3% 0 0;
    }
    .anecdote_title {
        line-height: 1.4;
    }
    .anecdote_box {
        margin: 0 0 3%;
    }
    .anecdote_txtbox {
        padding: 5% 5%;
        border-top: 1px dashed #7f4f21;
        border-bottom: 1px dashed #7f4f21;
    }

    /* ページャー */
    .pager {
        font-size: 130%;
        margin: 5% 0 0;
    }

    /* TOP用目次 */
    .list_chapter_top {
        width: 100%;
        margin: 0 auto 7%
    }
    .list_chapter_top li {
        margin: 0 0 2% 0;
    }
    .list_chapter_top a {
        width: 100%;
        height: auto;
        padding-bottom: 17.5%;
        background-size: 201%;
        background-repeat: no-repeat;
        background-image: url(../img/btn_sprite_title_short.png);
    }
    .list_chapter_top .chapter01 a {
        background-position: 0 0;
    }
    .list_chapter_top .chapter01 a:hover {
        background-position: 0 0;
    }
    .list_chapter_top .chapter02 a {
        background-position: 99.5% 0;
    }
    .list_chapter_top .chapter02 a:hover {
        background-position: 99.5% 0;
    }
    .list_chapter_top .chapter03 a {
        background-position: 0 28.5%;
    }
    .list_chapter_top .chapter03 a:hover {
        background-position: 0 28.5%;
    }
    .list_chapter_top .chapter04 a {
        background-position: 99.5% 28.5%;
    }
    .list_chapter_top .chapter04 a:hover {
        background-position: 99.5% 28.5%;
    }
    .list_chapter_top .chapter05 a {
        background-position: 0 57%;
    }
    .list_chapter_top .chapter05 a:hover {
        background-position: 0 57%;
    }
    .list_chapter_top .chapter06 a {
        background-position: 99.5% 57%;
    }
    .list_chapter_top .chapter06 a:hover {
        background-position: 99.5% 57%;
    }
    .list_chapter_top .chapter07 a {
        background-position: 0 85.5%;
    }
    .list_chapter_top .chapter07 a:hover {
        background-position: 0 85.5%;
    }


    /* 下層ページ用目次 */
    .list_chapter {
        width: 100%;
        margin: 4% auto 7%
    }
    .list_chapter li {
        float: none;
        margin: 0 0 2% 0;
    }
    .list_chapter li:nth-child(2n) {
        margin: 0 0 2% 0;
    }
    .list_chapter a {
        width: 100%;
        height: auto;
        padding-bottom: 17.5%;
        background-size: 201%;
        background-repeat: no-repeat;
        background-image: url(../img/btn_sprite_title_short.png);
    }
    .list_chapter .chapter01 a {
        background-position: 0 0;
    }
    .list_chapter .chapter01 a:hover {
        background-position: 0 0;
    }
    .list_chapter .chapter01 a.active {
        background-position: 0 14%;
    }
    .list_chapter .chapter02 a {
        background-position: 99.5% 0;
    }
    .list_chapter .chapter02 a:hover {
        background-position: 99.5% 0;
    }
    .list_chapter .chapter02 a.active {
        background-position: 99.5% 14%;
    }
    .list_chapter .chapter03 a {
        background-position: 0 28.5%;
    }
    .list_chapter .chapter03 a:hover {
        background-position: 0 28.5%;
    }
    .list_chapter .chapter03 a.active {
        background-position: 0 42.8%;
    }
    .list_chapter .chapter04 a {
        background-position: 99.5% 28.5%;
    }
    .list_chapter .chapter04 a:hover {
        background-position: 99.5% 28.5%;
    }
    .list_chapter .chapter04 a.active {
        background-position: 99.5% 42.8%;
    }
    .list_chapter .chapter05 a {
        background-position: 0 57%;
    }
    .list_chapter .chapter05 a:hover {
        background-position: 0 57%;
    }
    .list_chapter .chapter05 a.active {
        background-position: 0 71%;
    }
    .list_chapter .chapter06 a {
        background-position: 99.5% 57%;
    }
    .list_chapter .chapter06 a:hover {
        background-position: 99.5% 57%;
    }
    .list_chapter .chapter06 a.active {
        background-position: 99.5% 71%;
    }
    .list_chapter .chapter07 a {
        background-position: 0 85.5%;
    }
    .list_chapter .chapter07 a:hover {
        background-position: 0 85.5%;
    }
    .list_chapter .chapter07 a.active {
        background-position: 0 99.5%;
    }

    #footer {
        margin-top: 0;
        background-image: none;
    }
}