@charset "UTF-8";
/**
 * 大阪油化70年のあゆみ
 */
/* ==========================================================================
   common
   ========================================================================== */
.inner {
  margin: 0 auto;
  width: 980px; }

@media screen and (max-width: 767px) {
  .inner {
    width: 100%; } }

/* ==========================================================================
   header
   ========================================================================== */
header {
  background: url(img/bg_header.jpg) no-repeat center center;
  background-size: cover;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 400px;
  padding-top: 30px;
  width: 100%; }

#header-logo {
  position: static; }

#header-logo a {
  background: url(/common/css/img/logo_w.svg) no-repeat left top;
  background-size: 277px auto; }

.header-ttl {
  background: url(img/bg_ttl.png) no-repeat left top;
  height: 156px;
  margin-left: 174px;
  width: 628px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  zoom: 1; }

.header-lead {
  background: url(img/bg_lead.png) no-repeat left top;
  height: 109px;
  margin: -35px 0 0 254px;
  width: 472px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  zoom: 1; }

@media screen and (max-width: 767px) {
  header {
    background-image: url(img/bg_header_sp.jpg);
    height: 150px;
    padding-top: 10px; }
  #header-logo a {
    background-size: 200px auto; }
  .header-ttl {
    background: url(img/bg_ttl_sp.png) no-repeat left top;
    background-size: 290px auto;
    height: 72px;
    margin: 0 auto;
    width: 290px; }
  .header-lead {
    background: url(img/bg_lead_sp.png) no-repeat left top;
    background-size: 268px auto;
    height: 57px;
    margin: -23px auto;
    width: 268px; } }

/* ==========================================================================
   contents
   ========================================================================== */
.period-wrap {
  position: relative;
  overflow: hidden; }
  .period-wrap:before {
    background-color: #78aed7;
    content: '';
    height: 100%;
    left: 49.85%;
    position: absolute;
    top: 127px;
    width: 4px; }

.ttl-period {
  background-color: #6c6044;
  line-height: 1;
  padding: 27px 0;
  position: relative;
  text-align: center;
  z-index: 100; }

.box-year-wrap {
  position: relative; }

.box-year {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  width: 490px; }

.box-year-left {
  left: 0;
  padding-right: 40px; }
  .box-year-left .box-year-l .year {
    text-align: right; }
  .box-year-left .box-year-l:before {
    left: inherit;
    right: -49px; }

.box-year-right {
  padding-left: 40px;
  right: 0; }
  .box-year-right .box-year-s {
    padding-left: 80px;
    padding-right: 0; }
    .box-year-right .box-year-s .year {
      left: 0;
      right: inherit; }

.box-year-l {
  position: relative; }
  .box-year-l:before {
    background-color: #fff;
    border: 3px solid #78aed7;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 9px;
    content: '';
    height: 18px;
    left: -49px;
    position: absolute;
    top: 10px;
    width: 18px; }
  .box-year-l .year {
    margin-bottom: 17px; }
  .box-year-l .lead {
    margin-bottom: 16px; }
  .box-year-l .txt {
    margin-bottom: 20px; }
  .box-year-l .img {
    text-align: center; }

.box-year-s {
  padding: 1px 80px 30px 0;
  position: relative; }
  .box-year-s .year {
    position: absolute;
    right: 0;
    top: 0; }
    .box-year-s .year img {
      height: auto;
      width: 60px; }

.box-year-in {
  background-color: #fff;
  border: 1px solid #5284cc;
  padding: 34px 30px 30px; }

@media screen and (max-width: 767px) {
  .period-wrap:before {
    left: 13px;
    top: 48px;
    width: 3px; }
  .ttl-period {
    padding: 8px 0; }
  .box-year-wrap {
    height: auto !important; }
  .box-year {
    padding-right: 10px;
    position: static;
    width: 100%; }
  .box-year-left {
    padding-left: 35px; }
    .box-year-left .box-year-l .year {
      text-align: left; }
  .box-year-right {
    padding-left: 35px; }
  .box-year-l {
    padding-top: 11px; }
    .box-year-l:before {
      border-width: 1px;
      border-radius: 5px;
      height: 9px;
      left: -25px !important;
      top: 16px;
      width: 9px; }
    .box-year-l .year {
      margin-bottom: 8px; }
      .box-year-l .year img {
        width: 70px; }
    .box-year-l .lead {
      margin-bottom: 10px; }
    .box-year-l .txt {
      margin-bottom: 16px; }
    .box-year-l .img {
      margin-top: 10px; }
  .box-year-s {
    font-size: 85.71429%;
    line-height: 1.5;
    padding: 0 0 15px 62px;
    position: relative; }
    .box-year-s .year {
      left: 0;
      position: absolute !important;
      right: inherit; }
      .box-year-s .year img {
        width: 45px; }
  .box-year-in {
    font-size: 85.71429%;
    line-height: 1.5;
    padding: 15px; } }

/* 創業期
   ========================================================================== */
.period01 {
  background: url(img/bg_period01.gif) repeat left top; }
  .period01 .box-year-wrap {
    height: 350px; }
  .period01 .box-year-1948 {
    top: 30px; }
  .period01 .box-year-1949 {
    top: 88px; }

@media screen and (max-width: 767px) {
  .period01 {
    background-size: 490px auto;
    padding-bottom: 10px; }
    .period01 .ttl-period img {
      width: 41px; }
    .period01 .box-year-1948 .lead img {
      width: 186px; }
    .period01 .box-year-1949 {
      margin-top: 15px; } }

/* 枚方市に移転
   ========================================================================== */
.period02 {
  background: url(img/bg_period02.gif) repeat left top; }
  .period02 .box-year-wrap {
    height: 1850px; }
  .period02 .box-year-1962 {
    top: 30px; }
  .period02 .box-year-1963 {
    top: 84px; }
  .period02 .box-year-1972 {
    top: 195px; }
  .period02 .box-year-1976 {
    top: 550px; }
  .period02 .box-year-1988 {
    top: 674px; }
  .period02 .box-year-1997 {
    top: 858px; }
  .period02 .box-year-1997-2 {
    top: 1222px; }
  .period02 .box-year-1998 {
    top: 1295px; }

@media screen and (max-width: 767px) {
  .period02 {
    background-size: 25px auto;
    padding-bottom: 25px; }
    .period02 .ttl-period img {
      width: 84px; }
    .period02 .box-year-1962 .lead img {
      width: 213px; }
    .period02 .box-year-1963 {
      margin-top: 15px; }
    .period02 .box-year-1972 .lead01 img {
      width: 250px; }
    .period02 .box-year-1972 .lead02 img {
      width: 134px; }
    .period02 .box-year-1976 {
      margin-top: 15px; }
    .period02 .box-year-1988 .lead img {
      width: 116px; }
    .period02 .box-year-1988 .img img {
      width: 175px; }
    .period02 .box-year-1997 {
      margin-top: 15px; }
    .period02 .box-year-1997 .lead img {
      width: 118px; }
    .period02 .box-year-1997 .img img {
      width: 175px; }
    .period02 .box-year-1997-2 {
      margin-top: 15px; }
    .period02 .box-year-1998 .lead img {
      width: 162px; }
    .period02 .box-year-1998 .img img {
      width: 245px; } }

/* 少量多品種への対応
   ========================================================================== */
.period03 .box-year-wrap {
  height: 1800px; }

.period03 .box-year-2000 {
  top: 30px; }

.period03 .box-year-2001 {
  top: 80px; }

.period03 .box-year-2004 {
  top: 125px; }

.period03 .box-year-2008 {
  top: 262px; }

.period03 .box-year-2012 {
  top: 405px; }

.period03 .box-year-2013 {
  top: 684px; }

.period03 .box-year-2014 {
  top: 900px; }

.period03 .box-year-2015 {
  top: 1175px; }

.period03 .box-year-2017 {
  top: 1300px; }

.period03 .box-year-2019 {
  top: 1500px; }

@media screen and (max-width: 767px) {
  .period03 {
    padding-bottom: 10px; }
    .period03 .ttl-period img {
      width: 125px; }
    .period03 .box-year-2000 .lead img {
      width: 182px; }
    .period03 .box-year-2001 {
      margin-top: 15px; }
    .period03 .box-year-2004 .lead img {
      width: 118px; }
    .period03 .box-year-2004 .img img {
      width: 175px; }
    .period03 .box-year-2008 {
      margin-top: 15px; }
    .period03 .box-year-2012 .lead img {
      width: 142px; }
    .period03 .box-year-2013 {
      margin-top: 15px; }
    .period03 .box-year-2013 .lead img {
      width: 224px; }
    .period03 .box-year-2014 .lead img {
      width: 142px; }
    .period03 .box-year-2015 .lead img {
      width: 142px; }
    .period03 .box-year-2017 .lead img {
      width: 118px; }
    .period03 .box-year-2019 .lead img {
      width: 118px; } }

/* 創業70年
   ========================================================================== */
.period04 {
  background: url(img/bg_period04.png) no-repeat center top;
  background-size: cover;
  margin-top: 200px;
  min-height: 750px;
  position: relative;
  z-index: 200; }
  .period04 .ttl-period {
    background: none;
    padding: 0;
    position: absolute;
    top: 150px;
    width: 100%; }
    .period04 .ttl-period span {
      background: url(img/bg_ttl_period04.png) no-repeat left top;
      display: block;
      height: 125px;
      margin: 0 auto;
      width: 790px;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      zoom: 1; }

@media screen and (min-width: 1500px) {
  .period04 {
    height: 0;
    min-height: inherit;
    padding-top: 46.7%; } }

@media screen and (max-width: 767px) {
  .period04 {
    margin-top: 0;
    min-height: auto;
    padding-top: 80%;
    background: url(img/bg_period04_sp.png) no-repeat center top;
    background-size: 100%; }
    .period04 .ttl-period {
      top: 37px; }
      .period04 .ttl-period span {
        background: url(img/bg_ttl_period04_sp.png) no-repeat left top;
        background-size: 300px;
        height: 63px;
        width: 300px; } }

/* ==========================================================================
   footer
   ========================================================================== */
footer {
  background-color: #fff;
  z-index: 200; }

.copyright {
  color: #555;
  font-size: 85.71429%; }

#pagetop {
  z-index: 200; }

@media screen and (max-width: 767px) {
  footer {
    background-color: #f0f0f0;
    padding: 15px; }
  .copyright {
    font-size: 64.28571%; }
  #sp-pagetop {
    background-color: #fff; } }