@media screen and (min-width: 769px) {
  #contents {
    background: url(../img/history/bg_history.png) repeat center;
  }

  #main_visual {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100% !important;
    height: 575px;
    margin: 0 auto 57px !important;
    padding: 0;
    background: url(../img/history/bg_main.png) no-repeat bottom center;
    background-size: cover;
    transition: all .8s;
  }
  #main_visual h1 {
    position: relative;
    top: 50%;
    color: #6a3906;
    font-size: 66px;
    text-align: center;
    line-height: 1;
    letter-spacing: 9px;
    transform: translateY(-44%);
  }
  #main_visual h1 span {
    display: block;
    margin-top: 18px;
    font-size: 34px;
    letter-spacing: 0;
    line-height: 1.1;
  }

  #read {
    padding-top: 320px;
    padding-bottom: 100px;
    background: url(../img/history/img_history_01.png) no-repeat center top;
    background-size: 477px 305px;
  }
  #read p {
    font-size: 17px;
    text-align: center;
    line-height: 1.58;
  }

  #history_area {
    position: relative;
    padding-bottom: 57px;
  }
  #history_area:before {
    position: absolute;
    top: 0;
    left: 50%;
    content: "";
    width: 4px;
    height: 100%;
    background-color: #f7bca7;
    transform: translateX(-50%);
  }
  #history_area .unit {
    position: relative;
    width: 96%;
    max-width: 850px;
    margin: 0 auto;
    padding: 102px 0 10px;
    background-color: #fff;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0px 0px 16px 5px rgba(233, 142, 88, 0.3);
  }
  #history_area .unit + .unit {
    margin-top: 128px;
  }
  #history_area .unit h2 {
    position: absolute;
    top: -72px;
    left: 50%;
    width: 144px;
    height: 144px;
    color: #fff;
    border-radius: 72px;
    background-color: #f39976;
    font: 700 22px/46px fot-tsukuardgothic-std, sans-serif;
    text-align: center;
    transform: translateX(-50%);
    padding-top: 44px;
  }
#history_area h2 span {
    display: block;
}

  #history_area .unit h3 {
    margin-bottom: 12px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-size: 21px;
  }
  #history_area .unit h3 span {
    font-size: 12px;
  }
  #history_area .unit p {
    width: 330px;
    margin: 0 auto 30px;
    font-size: 16px;
  }
  #history_area .unit#edo .img01 {
    width: 192px;
    height: 113px;
    margin: 0 auto 22px;
    background: url(../img/history/img_edo_01.png) no-repeat center;
  }
  #history_area .unit#edo .img02 {
    width: 84px;
    height: 120px;
    margin: 0 auto 22px;
    background: url(../img/history/img_edo_02.png) no-repeat center;
  }
  #history_area .unit#meiji:before {
    position: absolute;
    top: -112px;
    left: 50%;
    content: "";
    width: 480px;
    height: 88px;
    background: url(../img/history/bg_history_01.png) no-repeat center;
    background-size: 480px 88px;
    transform: translateX(-50%);
  }
  #history_area .unit#meiji .img {
    width: 70px;
    height: 144px;
    margin: 0 auto 22px;
    background: url(../img/history/img_meiji_01.png) no-repeat center;
  }
  #history_area .unit#meiji p {
    margin-bottom: 24px;
  }
  #history_area .unit#heisei:before {
    position: absolute;
    top: -112px;
    left: 50%;
    content: "";
    width: 480px;
    height: 84px;
    background: url(../img/history/bg_history_02.png) no-repeat center;
    background-size: 480px 84px;
    transform: translateX(-50%);
  }
  #history_area .unit#heisei .img {
    width: 82px;
    height: 150px;
    margin: 0 auto 34px;
    background: url(../img/history/img_heisei_01.png) no-repeat center;
    background-size: cover;
  }
  #history_area .unit#reiwa:before {
    position: absolute;
    top: -100px;
    left: 50%;
    content: "";
    width: 480px;
    height: 70px;
    background: url(../img/history/bg_history_03.png) no-repeat center;
    background-size: 480px 70px;
    transform: translateX(-50%);
  }
  #history_area .unit#reiwa .img {
    width: 136px;
    height: 152px;
    margin: 0 auto 30px;
    background: url(../img/history/img_reiwa_01.png) no-repeat center;
  }

  #last_txt {
    position: relative;
    width: 546px;
    margin: 0 auto;
    padding: 20px 0 158px;
    background: url(../img/history/bg_history_04.png) no-repeat center 130px;
    background-size: 541px 94px;
    text-align: center;
  }
  #last_txt:before {
    position: absolute;
    top: 130px;
    left: 50%;
    content: "";
    width: 4px;
    height: calc(100% - 130px);
    background-color: #f7bca7;
    transform: translateX(-50%);
  }
  #last_txt p {
    font-size: 20px;
  }
}
/* SP */
@media screen and (max-width: 768px) {
  #contents {
    background: url(../img/history/sp/bg_history.png) repeat center;
    background-size: 26px 39px;
  }

  #main_visual {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto 24px !important;
    padding-top: 74%;
    padding-bottom: 0;
    background: url(../img/history/sp/bg_main.png) no-repeat bottom center;
    background-size: cover;
    transition: all .8s;
  }
  #main_visual h1 {
    position: relative;
    top: 50%;
    color: #6a3906;
    font-size: 43px;
    text-align: center;
    line-height: 1;
    letter-spacing: 6px;
    transform: translateY(-69%);
  }
  #main_visual h1 span {
    display: block;
    margin-top: 10px;
    font-size: 26.6px;
    letter-spacing: 0;
    line-height: 1.1;
  }

  #read {
    width: 100%;
    padding: 250px 0 87px;
    background: url(../img/history/sp/img_history_01.png) no-repeat center top;
    background-size: 375px 237px;
  }
  #read p {
    font-size: 15px;
    text-align: center;
    line-height: 1.59;
  }

  #history_area {
    position: relative;
    width: 100%;
    padding: 0 0 57px;
  }
  #history_area:before {
    position: absolute;
    top: 0;
    left: 50%;
    content: "";
    width: 3px;
    height: 100%;
    background-color: #f7bca7;
    transform: translateX(-50%);
  }
  #history_area .unit {
    position: relative;
    width: 88%;
    max-width: 660px;
    margin: 0 auto;
    padding: 94px 0 10px;
    background-color: #fff;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0px 0px 16px 5px rgba(233, 142, 88, 0.3);
  }
  #history_area .unit + .unit {
    margin-top: 112px;
  }
  #history_area .unit h2 {
    position: absolute;
    top: -63px;
    left: 50%;
    width: 125px;
    height: 125px;
    color: #fff;
    border-radius: 78px;
    background-color: #f39976;
    font: 700 18.71px/27px fot-tsukuardgothic-std, sans-serif;
    text-align: center;
    transform: translateX(-50%);
    padding-top: 12%;
  }
#history_area h2 span {
    display: block;
}

  #history_area .unit h3 {
    margin-bottom: 12px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-size: 18px;
  }
  #history_area .unit h3 span {
    font-size: 10px;
  }
  #history_area .unit p {
    width: 88%;
    max-width: 330px;
    margin: 0 auto 20px;
    font-size: 14px;
  }
  #history_area .unit#edo .img01 {
    width: 167px;
    height: 98px;
    margin: 0 auto 22px;
    background: url(../img/history/sp/img_edo_01.png) no-repeat center;
    background-size: cover;
  }
  #history_area .unit#edo .img02 {
    width: 75px;
    height: 104px;
    margin: 0 auto 22px;
    background: url(../img/history/sp/img_edo_02.png) no-repeat center;
    background-size: cover;
  }
  #history_area .unit#meiji:before {
    position: absolute;
    top: -103px;
    left: 50%;
    content: "";
    width: 375px;
    height: 80px;
    background: url(../img/history/sp/bg_history_01.png) no-repeat center;
    background-size: cover;
    transform: translateX(-50%);
  }
  #history_area .unit#meiji .unit {
    padding-top: 86px;
  }
  #history_area .unit#meiji .img {
    width: 58px;
    height: 125px;
    margin: 0 auto 22px;
    background: url(../img/history/img_meiji_01.png) no-repeat center;
    background-size: cover;
  }
  #history_area .unit#heisei:before {
    position: absolute;
    top: -97px;
    left: 50%;
    content: "";
    width: 375px;
    height: 80px;
    background: url(../img/history/sp/bg_history_02.png) no-repeat center;
    background-size: cover;
    transform: translateX(-50%);
  }
  #history_area .unit#heisei .img {
    width: 63px;
    height: 127px;
    margin: 0 auto 28px;
    background: url(../img/history/img_heisei_01.png) no-repeat center;
    background-size: cover;
  }
  #history_area .unit#reiwa:before {
    position: absolute;
    top: -96px;
    left: 50%;
    content: "";
    width: 375px;
    height: 80px;
    background: url(../img/history/sp/bg_history_03.png) no-repeat center;
    background-size: cover;
    transform: translateX(-50%);
  }
  #history_area .unit#reiwa .img {
    width: 118px;
    height: 130px;
    margin: 0 auto 30px;
    background: url(../img/history/img_reiwa_01.png) no-repeat center;
    background-size: cover;
  }

  #last_txt {
    position: relative;
    width: 100%;
    max-width: 375px;
    margin: 0 auto;
    padding: 16px 0 112px;
    background: url(../img/history/bg_history_04.png) no-repeat center 110px;
    background-size: 375px 80px;
    text-align: center;
  }
  #last_txt:before {
    position: absolute;
    top: 110px;
    left: 50%;
    content: "";
    width: 3px;
    height: calc(100% - 110px);
    background-color: #f7bca7;
    transform: translateX(-50%);
  }
  #last_txt p {
    font-size: 16.5px;
  }
}

/*# sourceMappingURL=history.css.map */