@charset "utf-8";
/* CSS Document --top */
#bs {
}
#bs .bs__mv__box {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  z-index: 2;
  height: auto;
  width: 100%;
}
#bs .bs__mv__kv {
  display: block;
  position: relative;
  margin: 0 auto;
  z-index: 2;
}
#bs .bs__mv__text {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 21% 13% 25% 81.5% ;
  z-index: 3;
  width: 100%;
}
#bs .bs__mv__movie {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 5;
  mix-blend-mode: multiply;
  -webkit-transform: scale(2.5) translate3d(2%,-5%,0);
  -ms-transform: scale(2.5) translate3d(2%,-5%,0);
  -o-transform: scale(2.5) translate3d(2%,-5%,0);
  transform: scale(2.5) translate3d(2%,-5%,0);
}
#bs .bs__mv__moviebox {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
#bs .bs__mv__movie video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

@media screen and (min-width:1125px){
  #bs .bs__mv__box {
    position: relative;
    overflow: hidden;
    max-width: 1440px;
    margin: 0 auto;
  }  
  #bs .bs__mv__kv {
    width: 100%;
    height: auto;
    max-width: 1440px;
    overflow: hidden;
  }
  #bs .bs__mv__kv:before {
  content: "";
  display: block;
  position: relative;
    width: 100%;
    max-width: 1440px;
    padding-bottom: 62.5%;
    margin: 0 auto
  }
  #bs .bs__mv__kv img {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
#bs .bs__mv__movie {
  left: 50%;
  -webkit-transform: scale(1) translate3d(-52%,26%,0);
  -ms-transform: scale(1) translate3d(-52%,26%,0);
  -o-transform: scale(1) translate3d(-52%,26%,0);
  transform: scale(1) translate3d(-52%,26%,0);
}
#bs .bs__mv__text {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 40%;
  left: 50%;
  box-sizing: border-box;
  padding: 0 ;
  z-index: 3;
  width: auto;
  max-width: 480px;
  width: 40%;
  -webkit-transform: translate3d(15%,-50%,0);
  -ms-transform: translate3d(15%,-50%,0);
  -o-transform: translate3d(15%,-50%,0);
  transform: translate3d(15%,-50%,0);
  
}
}

/* bs__message ---------------------------------------*/
#bs .bs__message {
  box-sizing: border-box;
  background: url(../shared/img/arc_2.svg);
  background-repeat: no-repeat;
  background-position: bottom left;
  -webkit-background-size: auto 100%;
  background-size:auto 100%;
  position: relative;
  padding: 0;
}
#bs .bs__message__text {
  color: #595959;
  padding: 9.66% 2.66% 9.66% 9.66% ;
}
#bs .bs__message:before {
  content: "";
  display: block;
  background-color: var(--bs-border);
  position: absolute;
  top: 10%;
  left: -11.5%;
  width: 11.5%;
  height: 1px;
}
#bs .bs__message p {
  margin: 0em auto 3em;
  font-size: .88em;
  line-height: 2.5em;
  letter-spacing: 0.16em;
  font-feature-settings: 'palt' 1;
}
#bs .bs__message--logo {
  width: 40%;
  margin: 0 0 2em;
}

@media screen and (min-width:1125px){
  #bs .bs__messagebox {
    max-width: 1440px;
    margin: 0 auto;
  }
  #bs .bs__message {
    overflow: hidden;
  }
  #bs .bs__message:before {
  content: "";
  display: block;
  background-color: var(--bs-border);
  position: absolute;
  top: 0;
  left: 1247px;
  width: 1px;
  height: 100%;
    
  }
  #bs .bs__message__text {
    padding: 80px calc(12.66% + 50px) 20px 50px;
    text-align: center;
  }
  #bs .bs__message p {
    line-height: 1.85em;
    font-size: 20px;
    margin-bottom: 2em;
  }
  #bs .bs__message--logo {
    width: 229px;
    margin: 60px auto;
  }
  #bs .bs__message__btn {
    text-align: center;
    padding: 0px calc(12.66% + 50px) 60px 50px;
    box-sizing: border-box;
    
}
  #bs .bs__message__btn .bs__boxbtn {
    margin: 0 auto;
  }
  
}

/* - bs__area--hasimg ----------------------------------------------------- */


#bs .bs__area--hasimg {
  display: block;
  margin: 5em auto;
}
#bs .bs__content__image {
  display: block;
  margin: 0;
}
#bs .bs__area--hasimg .bs__content {
  display: block;
  border-bottom: var(--bs-border-set);
}
#bs .bs__area--hasimg .bs__content__title {
  border-bottom: var(--bs-border-set);
  box-sizing: border-box;
  font-size: 1.3em;
  font-weight: 500;
  padding: 6.66% 4.66%;
}
#bs .bs__area--hasimg .bs__content__titletext {
  border-right: var(--bs-border-set);
  width: 84%;
  color: #595959;
  margin: 0 auto 0 0;
}
#bs .bs__area--hasimg .bs__content__titletext p {
  box-sizing: border-box;
  color: #595959;
  padding: 3.66% 1.3% 3.66% 9.66%;
  border-bottom: var(--bs-border-set);
  font-size: 0.92em;
  font-feature-settings: 'palt' 1;
}
#bs .bs__area--hasimg .bs__content__text {
  border-right: var(--bs-border-set);
  box-sizing: border-box;
  width: 84%;
  margin: 0 auto 0 0;
  padding: 4.66% 8.26%  8.26%;
}
#bs .bs__area--hasimg .bs__content__text p {
  color: #595959;
  text-align: left;
  font-size: .92em;
  font-feature-settings: 'palt' 1;
  letter-spacing: 0.16em;
  line-height: 2.2em;
}
#bs .bs__area--hasimg .bs__shindan {
  border-top: var(--bs-border-set);
  border-left: var(--bs-border-set);
  margin: 0 0 0 auto;
  width: 91%;
}
#bs .bs__area--hasimg .bs__shindan__title {
  border-bottom: var(--bs-border-set);
  box-sizing: border-box;
  font-size: 1.3em;
  font-weight: 500;
  padding: 6.66% 7.66%;
}
#bs .bs__area--hasimg .bs__shindan__text {
  box-sizing: border-box;
  padding: 6.66% 7.66%;
}
#bs .bs__area--hasimg .bs__shindan__text p {
  margin: 1em auto;
  line-height: 1.92em;
  font-size: .92em;
  color: #595959;
}
#bs .bs__area--hasimg .bs__shindan__att {
  color: var(--bs-main-color);
  font-weight: 800;
  font-size: 1em;
}


/* bs__content--glycenergy */
#bs .bs__content .bs__content--glycenergy {
  background: url(../shared/img/arc_4.svg) no-repeat top right;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}

#bs .bs__content .bs__content--glycenergy .bs__content__title {
  border-bottom: none;
  box-sizing: border-box;
  line-height: 1.75em;
}
#bs .bs__content .bs__content--glycenergy .bs__content__text {
  width: 100%;
  border: none;
}
#bs .bs__glycenergy__btn {
  box-sizing: border-box;
  padding: 4.66% 0 0  8.26%;
}

/* bs__area--products */
#bs .bs__area--products .bs__content {
  position: relative;
  border-top: var(--bs-border-set);
  box-sizing: border-box;
  padding: 0;
}
#bs .bs__area--products .bs__content:before {
  content: "";
  background: var(--bs-border);
  display: block;
  z-index: 1;
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 8%;
  
}
#bs .bs__area--products .bs__content__title {
  padding-left: 17%;
  line-height: 1.75em;
}
#bs .bs__area--products .bs__content__text {
  padding: 8% 5% 8% 17%;
  width: 100%;
  border: none;
  background: url(../shared/img/arc_3.svg) no-repeat;
  -webkit-background-size: auto 100%;
  background-size: auto 100%;
  background-position: 2em 0%;
}
#bs .bs__area--products .bs__content__text p + p {
  margin-top: 2em;
}
#bs .bs__products__btn {
  box-sizing: border-box;
  padding-left: 8%;
  border-top: var(--bs-border-set);
}
#bs .bs__area--products .bs__boxbtn__text {
  padding-left: 2.66%;
  padding-right: 2.66%;
  font-size: 1.08em;
}
#bs .bs__content__imagetext {
  display: none;
}
@media screen and (min-width:1125px){
  
  #bs .bs__area--hasimg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-top: var(--bs-border-set);
    border-bottom: var(--bs-border-set);
    margin: 140px auto;
    overflow: hidden;
  }
  #bs .bs__content__image {
    width: 50%;
    position: relative;
    overflow: hidden;
  }
  #bs .bs__content__imageitem {
    width: auto;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin-right: 0;
    max-width: 701px;
    min-height: 702px;
    position: relative;
  }
  #bs .bs__content__image img {
    margin-right: 0;
    width: auto;
    height: auto;
    max-width: inherit;
    display: block;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #bs .bs__content__imagetext {
    display: block;
    position: absolute;
    bottom: 50px;
    left: 50px;
    width: 38px;
    box-sizing: border-box;
    z-index: 4;
  }
  #bs .bs__content__imagetext img {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    width: 38px;
    box-sizing: border-box;
    z-index: 4;
  }
  #bs .bs__area--hasimg .bs__content {
    width: 50%;
    border-bottom: none;
    border-left: var(--bs-border-set);
    position: relative;
  }
#bs .bs__area--hasimg .bs__content__titletext {
  border-right: none;
  border-bottom: var(--bs-border-set);
  box-sizing: border-box;
  width: 100%;
  padding: 18px 60px;
  margin: 0 auto 0 0;
}
#bs .bs__area--hasimg .bs__content__titletext p {
  box-sizing: border-box;
  padding: 0;
  border-bottom: none;
  font-size: 16px;
  font-feature-settings: normal;
  display: inline-block;
}
  #bs .bs__area--hasimg .bs__content__text {
    width: 100%;
    border-right: none;
    max-width: 720px;
  }
  #bs .bs__area--hasimg .bs__content__title {
    font-size: 25px;
    padding: 32px 50px;
  }
  #bs .bs__area--hasimg .bs__shindan{
    width: 100%;
    border-left: none;
}
  #bs .bs__area--hasimg .bs__content__text{
    padding: 40px 60px;
  }
  #bs .bs__area--hasimg .bs__content__text p {
font-size: 16px;
    line-height: 1.9em;
    
  }
  #bs .bs__area--hasimg .bs__content__text:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 720px;
    width: 1px;
    height: 100%;
    background-color: var(--bs-border);
    z-index: 1;
  }
  
  #bs .bs__area--hasimg .bs__shindan__title {
    font-size: 25px;
    border-bottom: none;
    padding: 40px 60px 10px;
  }
  #bs .bs__area--hasimg .bs__shindan__text {
    padding: 20px 60px;
    max-width: 720px;
    box-sizing: border-box;
    margin-left: 0;
  }
#bs .bs__area--hasimg .bs__shindan__text p {
  font-size: 16px;
}
#bs .bs__area--hasimg .bs__shindan__att {
  font-size: 17px;
  }
  #bs .bs__shindan__btn {
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 0 60px 30px;
    font-size: 18px;
  }
  
  #bs .bs__area--glycenergy {
    flex-direction: row-reverse;
  }
  #bs .bs__content .bs__content--glycenergy {
    background: none;
    margin-right: 0;
    max-width: 600px;
  }
  #bs .bs__area--glycenergy .bs__content {
    border-left: none;
    border-right: var(--bs-border-set);
    padding: 30px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    flex-direction: column;
    
  }
  #bs .bs__area--glycenergy .bs__content:before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: var(--bs-border-set);
    box-sizing: border-box;
  }
 
  #bs .bs__content .bs__content--glycenergy .bs__content__title  {
    line-height: 2em;
    font-size: 25px;
    padding: 40px;
    margin-top: 40px;
  }
#bs .bs__content .bs__content--glycenergy .bs__content__text {
  padding: 0px 40px 40px;
}
  #bs .bs__area--glycenergy .bs__content__image img {
    margin-right: auto;
    margin-left: 0;
  }
  #bs .bs__area--glycenergy .bs__content__imageitem {
    margin-right: auto;
    margin-left: 0;
    max-width: 637px;
    min-height: 636px;
  }
  #bs .bs__area--glycenergy .bs__content__imagetext {
    left: auto;
    right: 50px;
  }
  
  #bs .bs__area--glycenergy .bs__content__text:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: 700px;
    width: 1px;
    height: 100%;
    background-color: var(--bs-border);
    z-index: 1;
  }
  #bs .bs__glycenergy__btn {
    box-sizing: border-box;
    padding: 40px 40px 0;
  }
  
  #bs .bs__area--products .bs__content__image {
    width: 56.5%;
  }
  #bs .bs__area--products .bs__content {
    width: 43.5%;
  }
  #bs .bs__area--products .bs__content {
    border-top: none;
    background: url(../shared/img/arc_1.svg) no-repeat;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
    background-position: top left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    flex-direction: column;
  }
  #bs .bs__area--products .bs__content:before {
    content: none;
  }
  #bs .bs__area--products .bs__content__title{
    border: none;
    margin: 0;
    width: 100%;
    padding: 20px 60px;
  }
  #bs .bs__area--products .bs__content__imageitem {
    max-width: 805px;
    min-height: 637px;
  }
  #bs .bs__area--products .bs__content__text {
    background: none;
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding: 20px 50px 60px 60px;
  }
  
  #bs .bs__area--products .bs__content__text:after {
    content: none;
  }
  #bs .bs__products__btn {
    border: none;
    margin: 0;
    width: 100%;
    padding: 20px 60px;
  }
  
  #bs .bs__area--products .bs__content__text p + p {
margin-top: 0;}

  #bs .bs__boxbtn__text {
    font-size: 17px;
  }
  }


/* - info ----------------------------------------------------- */
#bs .bs__info {
  margin: 20% auto 0;
  display: block;
}
#bs .bs__info h2.bs__info__title {
  width: 6em;
  margin: 2.5em auto;
}
#bs .bs__info .bs__info__slider {
  position: relative;
  display: block;
}
#bs .bs__info .bs__info__item {
  border-top: var(--bs-border-set);
  border-bottom: var(--bs-border-set);
  box-sizing: border-box;
  display: block;
  position: relative;
  padding: 0 15%;
}
#bs .bs__info .bs__info__image {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  background: #efefef;
  border-left: var(--bs-border-set);
  border-right: var(--bs-border-set);
}
#bs .bs__info .bs__info__image img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: 100%;
  height: 100%;
  -webkit-transform: translate3d(-50%,-50%,0);
  -ms-transform: translate3d(-50%,-50%,0);
  -o-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
  z-index: 3;
  object-fit: contain;
}
#bs .bs__info .bs__info__image img[src*="logo"]{
  -webkit-transform: translate3d(-50%,-50%,0) scale(0.6);
  -ms-transform: translate3d(-50%,-50%,0) scale(0.6);
  -o-transform: translate3d(-50%,-50%,0) scale(0.6);
  transform: translate3d(-50%,-50%,0) scale(0.6);
}
#bs .bs__info__imagebg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-size: cover;
  background-size: cover;
  opacity: 0.1;
}
#bs  .bs__info__image img[src*="logo"] + .bs__info__imagebg{
  background: #fff;
  background-image: none!important;
  opacity: 1;
}
#bs .bs__info span.bs__info__title {
  box-sizing: border-box;
  display: block;
  width: 100%;
}
#bs .bs__info span.bs__info__title span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  line-height: 3.6em;
  height: 3.6em;
  font-size: 1.2em;
  position: relative;
  padding-top: .5em;
}
#bs .bs__info span.bs__info__title span .bs__info__date {
  position: absolute;
  top: 0;
  left: 0;
  font-size: .7em;
  padding: 0;
}
#bs .bs__info span.bs__info__title:before {
  content: "";
  display: block;
  background: var(--bs-border);
  width: 100%;
  height: 1px;
  position: absolute;
  top: auto;
  left: 0;
}
#bs .bs__info .bs__info__text {
  box-sizing: border-box;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: .6em 0;
}
#bs .bs__info .bs__info__text span {
  box-sizing: border-box;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 400;
  padding: 0;
  height: 3.4em;
}
#bs .bs__info__slider {
  margin: 0 auto;
}
#bs .bs__info__slider .owl-prev {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 3.4em);
  width: 15%;
  background: url(../shared/img/nav_ar_l.svg) no-repeat 50% 50%;
  -webkit-background-size: 0.4em auto;
  background-size: 0.4em auto;
  text-indent: -9999px;
  overflow: hidden;
}
#bs .bs__info__slider .owl-next {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: calc(100% - 3.4em);
  width: 15%;
  background: url(../shared/img/nav_ar_r.svg) no-repeat 50% 50%;
  -webkit-background-size: 0.4em auto;
  background-size: 0.4em auto;
  text-indent: -9999px;
  overflow: hidden;
}
#bs .bs__info__btn {
  box-sizing: border-box;
  padding: 12% 8%;
}
#bs .bs__info__btn .bs__boxbtn__text {
  text-align: center;
  margin: 0 auto;
}
#bs .bs__info__btn .bs__boxbtn__text img {
  height: 0.9em;
}
@media screen and (min-width:1125px){
  #bs .bs__info {
    margin-top: 220px;
    margin-bottom: 50px;
  }
#bs .bs__info .bs__info__box {
  border-top: var(--bs-border-set);
  border-bottom: var(--bs-border-set);
}

#bs .bs__info__slider {
  width: 80%;
  max-width: 1050px;
  margin: 0 auto;
}  
#bs .bs__info .bs__info__item {
  box-sizing: border-box;
  border: none;
  border-left: var(--bs-border-set);
  padding: 12% 15% 8.3%;
}
#bs .bs__info span.bs__info__title:before ,
#bs .bs__info span.bs__info__title:after {
  content: none;
  }
  #bs .bs__info .bs__info__image {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 124%;
  overflow: hidden;
  background: #ffffff;
  border: none;
}
  #bs .bs__info__imagebg{
    display: none;
  }

#bs .bs__info__slider .owl-prev {
  display: block;
  position: absolute;
  top: 0;
  left: calc(-10% + 1px);
  height:100%;
  width: 10%;
  background: url(../shared/img/nav_ar_l.svg) no-repeat 50% 50%;
  -webkit-background-size: 0.9em auto;
  background-size: 0.9em auto;
  border-right: var(--bs-border-set);
}
#bs .bs__info__slider .owl-next {
  display: block;
  position: absolute;
  top: 0;
  right: -10%;
  height: 100%;
  width: 10%;
  background: url(../shared/img/nav_ar_r.svg) no-repeat 50% 50%;
  -webkit-background-size: 0.9em auto;
  background-size: 0.9em auto;
  border-left: var(--bs-border-set);
}
  #bs .bs__info span.bs__info__title {
    font-size: 12px;
    line-height: 1.75em;
    margin-top: 1em;
  }
#bs .bs__info .bs__info__text {
  box-sizing: border-box;
  display: block;
  padding-top: 0;
  }
#bs .bs__info .bs__info__text span{
  box-sizing: border-box;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 12px;
  height: 2.5em;
  padding-top: 0;
  }
    
  #bs .bs__info__btn {
    padding: 4em 0;
    text-align: center;
  }
  #bs .bs__info__btn .bs__boxbtn{
    max-width: 400px;
    margin: 0 auto;
  }
  #bs .bs__info span.bs__info__title span {
    font-size: 18px;
  }
}


/*------------------------------------------------------------*/

@media screen and (min-width:1440px){
  #bs .bs__area--right .bs__content {
    box-sizing: border-box;
    max-width: 1440px;
    width: 100%;
    
  }
  #bs .bs__message {
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    background-position: top left;
  }
  #bs .bs__message:before {
    content: "";
    left: auto;
    right: 0;
  }
  #bs .bs__message__text {
    padding-right: 50px;
  }
  #bs .bs__message__btn {
    padding: 0px 50px 60px 50px;
}
  
  #bs .bs__content__image {
    max-width: 720px;
    margin: 0 0 0 auto;
    border-left: var(--bs-border-set);
  }
  #bs .bs__area--hasimg .bs__content {
    max-width: 720px;
    margin: 0 auto 0 0;
  }
  #bs .bs__content__imageitem {
    max-width: none;
    max-height: none;
  }
  #bs .bs__area--glycenergy .bs__content__image {
    margin: 0 auto 0 0;
    border-left: none;
    border-right: var(--bs-border-set);
  }
  #bs .bs__area--glycenergy .bs__content {
    margin: 0 0 0 auto;
    border-left: var(--bs-border-set);
  }
  #bs .bs__area--glycenergy .bs__content__text:after {
    content: none;
  }
  #bs .bs__area--products .bs__content__image {
    max-width: 805px;
  }
  #bs .bs__area--products .bs__content {
    max-width: 635px;
    border-right: var(--bs-border-set);
    background-position: top right;
  }
}