@charset "UTF-8";
/* #mainImg 下層ページ
================================================ */
/*  #base
================================================ */
/* mainimg */
body:before { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: #262626 url(../img/formulation/mainimg01_sp.png) no-repeat; background-size: 100% auto; content: ''; }

#mainImg .inner { position: relative; z-index: 1; }
#mainImg .inner .mainTit { font-size: 1.5rem; }
@media screen and (min-width: 600px) { 
  body:before { z-index: -1; background-image: url(../img/formulation/mainimg01_pc.png); background-size: 1920px; background-position: top center; min-width: 1520px; } 
}

/* mask sp */
@media screen and (max-width: 599px) { #bg, #gFooter { position: relative; z-index: 2; }
  #contents { position: relative; z-index: 0; }
  #contents:before { position: absolute; content: ''; top: -115px; left: 0; width: 100%; height: 100%; background: url(../img/common/bg_contents01_sp.png) no-repeat top right; background-size: 100% auto; z-index: 0; }
  #contents:after { position: absolute; content: ''; top: 400px; left: 0; width: 100%; height: 100%; background: #262626; background-size: contain; z-index: 0; } }
@media screen and (max-width: 360px) {
  #contents:before { top: -120px;}
}

/* mask pc */
@media screen and (min-width: 600px) { #bg { position: relative; background: #262626; }
  #bg:before { content: ""; position: absolute; top: -330px; height: 675px; width: 1920px; display: block; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: url(../img/common/bg_contents01_pc.png) no-repeat top center; background-size: cover; z-index: 0; } }

/*  #intro
================================================ */
.formulation-intro { position: relative; color: #fff; }
.formulation-intro__inner {
  position: relative;
  z-index: 1;
  padding-top: 120px;
  padding-bottom: 50px;
}
.formulation-intro__lead {
  font-size: 1.8rem;
  line-height: 1.9;
}

@media screen and (min-width: 600px) { 
  .formulation-intro__inner {
    padding-top: 0;
    padding-bottom: 100px;
  }
  .formulation-intro__lead {
    font-size: 2.4rem;
  }
}

/*  #history
================================================ */
.formulation-history { position: relative; color: #fff; }
.formulation-history__inner {
  position: relative;
  z-index: 1;
  padding-top: 100px;
  padding-bottom: 60px;
}
.formulation-history__set + .formulation-history__set {
  margin-top: 130px;
}
.formulation-history__head {
  position: relative;
  text-align: center;  
}
.formulation-history__head::before {
  display: inline-block;
  content: "";
  background: url(../img/formulation/bg_maru01.png) no-repeat center center/contain;
  width: 220px;
  height: 220px;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.formulation-history__head-day {
  position: relative;
  font-size: 2.6rem;
  font-weight: 700;
  color: #9ECB3A;
  margin-bottom: 20px;
}
.formulation-history__head-day:before {
  display: inline-block;
  content: "";
  background-color: #9ECB3A;
  width: 1px;
  height: 26px;    
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
}
.formulation-history__head-main {
  box-sizing: border-box;
  background-color: #9ECB3A;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 8px 10px;
  margin-bottom: 15px;
}
.formulation-history__txt {
  margin-bottom: 20px;
  line-height: 1.9;
}
.formulation-history__txt .is-c-green {
  color: #9ECB3A;
}
.formulation-history__img + .formulation-history__img {
  margin-top: 20px;
}
.formulation-history__set.is-end .formulation-history__head::before {
  top: 35%;
}
.formulation-history__txt-big {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media screen and (min-width: 600px) { 
  .formulation-history__inner {
    padding-bottom: 100px;
  }
  .formulation-history__set + .formulation-history__set {
    margin-top: 174px;
  }
  .formulation-history__head::before {
    width: 250px;
    height: 250px;
  }
  .formulation-history__head-day {
    font-size: 3.2rem;
  }
  .formulation-history__head-day:before {
    height: 30px;
    top: -40px;
  }
  .formulation-history__head-main {
    font-size: 2.4rem;
    margin-bottom: 30px;  
  }
  .formulation-history__txt {
    margin-bottom: 40px;
  }
  .formulation-history__img + .formulation-history__img {
    margin-top: 40px;
  }
  .formulation-history__txt-big {
    font-size: 3.4rem;
  }
}

/*  .formulation-bnr
------------------------------------- */
.formulation-bnr {
  position: relative;
  color: #fff;
  z-index: 2;
}
.formulation-bnr__inner {
  position: relative;
  background: #000;
  padding: 45px 0;
}
.formulation-bnr__inner:before {
  content: "";
  display: inline-block;
  background-color: #9ECB3A;
  width: 1px;
  height: 30px;
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
}
.formulation-bnr__link {
  box-sizing: border-box;
  display: block;
  background: rgba(158,203,58,0.9);
  text-align: center;
  padding: 39px 37px;
}
.formulation-bnr__img {
  width: 120px;
  margin: 0 auto 20px;
}
.formulation-bnr__head {
  position: relative;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 29px;
}
.formulation-bnr__head:after {
  content: "";
  background-color: #fff;
  width: 30px;
  height: 1px;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
}
.formulation-bnr__btn {
  font-size: 1.6rem;
  box-sizing: border-box;
  border: 1px solid #fff;
  padding: 20px;
  
}
@media screen and (min-width: 600px) {
  .formulation-bnr__inner {
    padding: 75px 0;
  }
  .formulation-bnr__inner:before {
    height: 60px;
    top: 36px;
  }
  .formulation-bnr__link {    
    max-width: 1120px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 78px 123px;
  }  
  .formulation-bnr__link:hover {
    opacity: 0.7;
  }
  .formulation-bnr__head {
    font-size: 3.4rem;
  }
  .formulation-bnr__img {
    width: 220px;
    margin: 0 0 0 0;
  }
  .formulation-bnr__btn {
    font-size: 1.8rem;
    box-sizing: border-box;
    max-width: 270px;
    margin: auto;
  }
}