@charset "utf-8";

/* 外枠 ＆ ヘッドタイトル */
.content{
  position: relative;
  overflow: hidden;
}
.content section{
  position: relative;
  width: 100%;
}
.content__inner,.product__inner{
  width: 100%;
  margin: 60px auto ;
}

/*タイトル英語*/
.products__lineup{
  text-align: center;
}
.products__lineup img{
  width: 196px;
}

/*タイトル日本語*/
.products__lineup-ja {
  margin-top: 7px;
  text-align: center;
}
.bnr-wrapper{
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: 1000px;
}
.bnr{
    text-align: center;
    margin-bottom: 70px;;
}
/*各種ヘッダー*/
.pro-gum__header,
.pro-tab__header,
.pro-candy__header{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 29.54%;
  background-image: url(/products/img/Lineup_top_gum-bg.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
}
.pro-tab__header{
  background-image: url(/products/img/Lineup_top_mint-bg.png);
}
.pro-candy__header{
  background-image: url(/products/img/Lineup_top_candy-bg.png);
}

/*ヘッダー製品画像位置*/
.pro-gum__headimg,
.pro-tab__headimg,
.pro-candy__headimg{
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  z-index: 50;
    /*
  right: 57%;
  width: 29.2%;
  max-width: 380px;
    */
  margin: auto 0;
height:120%;
}

/*ヘッダー画像　個別の位置調整*/
.pro-gum__headimg{
  right: 55%;
}
.pro-tab__headimg{
    /*
  width: 34.15%;
  max-width: 444px;
    */
    right: 55%;
}
.pro-candy__headimg{
  right: 55%;
  max-width: 444px;
}

/*ヘッダー画像（テキスト）　位置調整*/
.pro-gum__headtext,
.pro-tab__headtext,
.pro-candy__headtext{
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  z-index: 50;
  left: 50%;
  width: 39.7%;
  max-width: 516px;
  margin: auto 0;
}
.pro-tab__headtext{
  width: 33.77%;
  max-width: 439px;
}
.pro-candy__headtext{
  max-width: 416px;
}

/* main */
.pro-gum__body01,.body02,
.body03__illust{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}
.body01__text{
  margin-top: 27px;
}
.body01__right{
  margin-left: 30px;
}
.body02{
  margin-top: 47px;
}
.body02__right{
  margin-left: 19px;
}
.body02__text{
  margin-top: 22px;
}
.body03__title{
  margin-top: 20px;
  text-align: center;
}
.body03__illust{
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  max-width: 1000px;
  margin: 30px auto auto;
}
.body03__illust img + img{
  margin-left: 2.5%;
}
.line-up_wrap{
  width: 100%;
  text-align: center;
}
.line-up__title{
  margin: 0 auto 40px;
  text-align: center;
}
/*gum*/
.lineup-caption{
  margin-bottom: 80px;
}
.line-up__gum-wrap{
  margin-bottom: 40px;
  background: url("/products/img/lineup_top_gum_bg.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
}
.line-up__gum-wrap ul{
  display: flex;
  width: 100%;
  max-width: 1300px;
  margin: auto;
}
.line-up__gum-wrap ul li{
  width: 50%;
  padding: 20px;
  text-align: center;
}
.line-up__gum-wrap ul li:nth-child(1){
  background: url("/products/img/lineup_top_gum_xp_bg.png") no-repeat ;
  background-size: cover;
}
.line-up__gum-wrap ul li:nth-child(2){
  background: url("/products/img/lineup_top_gum_shitaclear_bg.png") no-repeat;
  background-size: cover;
}
.line-up__gum-wrap ul li:nth-child(3){
  background: url("/products/img/lineup_top_gum_sumi_bg.png") no-repeat;
  background-size: cover;
}
.line-up__gum-wrap-01{
  margin-bottom: 20px;
  background: url("/products/img/lineup_top_gum_bg01.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
}
.line-up__gum-wrap-01 ul{
  display: flex;
  width: 100%;
  max-width: 1300px;
  margin: auto;
}
.line-up__gum-wrap-01 ul li{
  width: 50%;
  padding: 40px;
  text-align: center;
}
.line-up__gum-wrap-01 ul li:nth-child(1){
  background: url("/products/img/lineup_top_gum_xp_bg.png") no-repeat ;
  background-size: cover;
}
.line-up__gum-wrap-01 ul li:nth-child(2){
  background: url("/products/img/lineup_top_gum_bigfruits_bg.png") no-repeat;
  background-size: cover;
}
.line-up__gum-wrap-01 ul li:nth-child(3){
  background: url("/products/img/lineup_top_gum_sumi_bg.png") no-repeat;
  background-size: cover;
}
.line-up__gum-wrap-02{
  margin-bottom: 20px;
  background: url("/products/img/lineup_top_gum_bg02.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
}
.line-up__gum-wrap-02 ul{
  display: flex;
  width: 100%;
  max-width: 1300px;
  margin: auto;
}
.line-up__gum-wrap-02 ul li{
  width: 50%;
  padding: 40px;
  text-align: center;
}
.line-up__gum-wrap-02 ul li:nth-child(1){
  background: url("/products/img/lineup_top_gum_aromatime_bg.png") no-repeat ;
  background-size: cover;
}
.line-up__gum-wrap-02 ul li:nth-child(2){
  background: url("/products/img/lineup_top_gum_sumi_bg.png") no-repeat;
  background-size: cover;
}

.line-up__gum-wrap-03{
  margin-bottom: 40px;
  background: url("/products/img/lineup_top_gum_bg03.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
}
.line-up__gum-wrap-03 ul{
  display: flex;
  width: 100%;
  max-width: 1300px;
  margin: auto;
  justify-content: center;
}
.line-up__gum-wrap-03 ul li{
  width: 50%;
  padding: 40px;
  text-align: center;
}
/*line-up__gum-wrap-03 ul li:nth-child(1){
  background: url("/products/img/lineup_top_gum_sumi_bg.png") no-repeat ;
  background-size: cover;
}*/
.line-up__gum-banner{
  display: flex;
  justify-content: center;
  margin: 80px auto;
}
/*tab*/
.line-up__tablet-wrap {
  background: url("/products/img/lineup_top_tablet_bg.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 40px;
  width: 100%;
}
.line-up__tablet-wrap ul{
  display: flex;
  width: 100%;
  max-width: 1300px;
  margin: auto;
}
.line-up__tablet-wrap ul li{
  width: 50%;
  padding: 40px;
  text-align: center;
}
.line-up__tablet-wrap ul li:nth-child(1){
  background: url("/products/img/lineup_top_tablet_freebreath_bg.png") no-repeat;
  background-size: cover;
}
.line-up__tablet-wrap ul li:nth-child(2){
  background: url("/products/img/lineup_top_tablet_relax_bg.png") no-repeat;
  background-size: cover;
}
.line-up__tablet-wrap ul li:first-child a{
  margin-right: 0;
  margin-left: auto;
}

.line-up__tablet-wrap ul li:last-child{
  margin-right: auto;
  margin-left: 0;
}
.line-up__tablet-wrap ul li a{
  display: block;
  width: 100%;
  max-width: 500px;
  text-align: center;
}
/*candy*/
.line-up__candy-wrap{
  background-image: url("/products/img/lineup_top_candy_mint_bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin-top: 40px;
  margin-bottom: 80px;
  display: flex;
  position: relative;
  z-index: 2;
}
.line-up__candy-wrap a{
  display: block;
  width: 482px;
  padding: 20px;
  margin: auto;
  text-align: center;
}
/*moreボタン*/
.btn-more{
  display: block;
  width: 316px;
  margin: 68px auto 100px;
  text-align: center;
}
/*キャンペーンバナー*/
.campaign_wrapper{
  display: flex;
  justify-content: center;
  margin: 80px auto 0;
}
.campaign_banner{
  display: block;
}
@media screen and (min-width: 641px)  {

    .btn-more{
    width: 300px;
    }
}
/*ヘッダー背景1300px以上で拡大させない*/
@media screen and (min-width: 1300px){
  .pro-gum__header,
  .pro-tab__header,
  .pro-candy__header{
    height: 379px;
    background-size: cover;
    padding-top: 0;
  }
  
}

/***********************************************************************
PC アニメーション
***********************************************************************/
@media screen and (min-width: 641px)  {
  
  /*レスポンシブ指定*/
  .body03__illust img {
    width: 22%;
    height: 100%;
  }
  
  /*マージン調整*/
  section .content__inner-gum{
    margin-top: 75px;
  }
  
  /* タイトル　英語 */
  /*消す*/
  .content__inner .products__lineup img {
    margin-left: -30px;
    opacity: 0;

  }
  /*表示*/
  .content__inner .products__lineup img[src*="lineup_top_title"].scroll_events {
    opacity: 1;
    margin-left: 0;
    transition: all 0.2s linear;
  }

  /* タイトル　日本語 */
  /*消す*/
  .content__inner .products__lineup-ja img {
    margin-top: -30px;
    opacity: 0;
  }
  /*表示*/
  .content__inner .products__lineup-ja img[src*="lineup_top_title-ja"].scroll_events {
    opacity: 1;
    margin-top: 0;  
    transition: all 0.3s ease-out 0.3s;
  }
  
  /*--白背景--*/
  /*消す*/
  .js_white-gum,
  .js_white-tab,
  .js_white-candy{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
    background-color: #fff;
    z-index: 1;
  }
  /*表示*/
  .js_white-gum.scroll_events{
    left: 101%;
    transition: all 0.3s ease-out 0.8s;
  }
  .js_white-tab.scroll_events,
  .js_white-candy.scroll_events{
    left: 101%;
    transition: all 0.3s linear;
  }
  
  /*各製品テキスト*/
  /*消す*/
  .pro-gum__headtext,
  .pro-tab__headtext,
  .pro-candy__headtext{
    top: -30px;
    opacity: 0;
  }
  
  /*ガム テキスト　表示*/
  .pro-gum__headtext.scroll_events{
    top: 0;
    opacity: 1;
    transition: all 0.3s ease-out 1s;
  }
  
  /*タブ　キャンディー テキスト　表示*/
  .pro-tab__headtext.scroll_events,
  .pro-candy__headtext.scroll_events{
    top: 0;
    opacity: 1;
    transition: all 0.3s ease-out 0.5s;
  }
  
  /*各製品画像*/
  /*消す*/
  .pro-gum__headimg,
  .pro-tab__headimg,
  .pro-candy__headimg{
    opacity: 0;
  }
  /*ガム画像　表示*/
  .pro-gum__headimg.scroll_events{
    opacity: 1;
    transition: all 0.3s ease-out 1.3s;
  }
  /*タブ　キャンディー画像 表示*/
  .pro-tab__headimg.scroll_events,
  .pro-candy__headimg.scroll_events{
    opacity: 1;
    transition: all 0.3s ease-out 0.8s;
  }
  
  /*コンテンツ*/
  /*消す*/
  #js_content__gum,
  #js_content__tab{
    opacity: 0;
  }
  /*表示*/
  #js_content__gum.scroll_events,
  #js_content__tab.scroll_events{
    opacity: 1;
    transition: all 0.3s linear;
  }
  
}


/***********************************************************************
smart phone
***********************************************************************/
@media screen and (max-width:640px) {
  .content{
    margin-top: 50px;
  }
  .content__inner{
    width: calc(100% - 50px);
    max-width: 345px;
    margin: 54px auto;
  }
  .bnr-wrapper{
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 100%;
  }
  .bnr-wrapper .bnr:first-child{
    margin-bottom: 0;
  }
  .product__inner{
    width: 100%;
    margin: 25px auto;
  }
  .product__inner.last{
    margin: 25px auto 100px;
  }
  
  
    /* title  header */
  .products__lineup img{
    width: 125.5px;
  }
  .content__inner .products__lineup-ja img {
    width: 70px;
  }
  
  /*各種ヘッダー*/
  .pro-gum__header{
    width: 100%;
    padding-top: 53.33%;
    background-image: url(/products/img/sp/Lineup_top_gum-bg.png);
  }
  .pro-tab__header{
    width: 100%;
    padding-top: 53.33%;
    background-image: url(/products/img/sp/Lineup_top_mint-bg.png);
  }
  .pro-candy__header{
    width: 100%;
    padding-top: 53.33%;
    background-image: url(/products/img/sp/lineup_top_candy-bg.png);
  }
  .pro-gum__headimg,.pro-tab__headimg,
  .pro-candy__headimg{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*width: 50.67%;*/
    margin: auto;
  }
    .pro-gum__headimg{
        width: auto;
    }
  .pro-tab__headimg{
    /*width: 59.2%;*/
  }
  .pro-candy__headimg{
    width: 65%;
  }
  /*ガム*/
  .lineup-caption{
    margin-bottom: 50px;
  }
  .line-up__title{
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
    z-index: 10;
    position: relative;
  }
  .line-up__title img{
    height: 40px;
  }
  .line-up__gum-wrap {
    margin-bottom: 50px;
    background: none;
  }
  .line-up__gum-wrap ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1300px;
    margin: auto;
  }
  .line-up__gum-wrap ul li {
    width: 100%;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .line-up__gum-wrap ul li:last-child{
    margin-bottom: 0;
  }
  .line-up__gum-wrap-01 {
    margin-bottom: 20px;
    background: none;
  }
  .line-up__gum-wrap-01 ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1300px;
    margin: auto;
  }
  .line-up__gum-wrap-01 ul li {
    width: 100%;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .line-up__gum-wrap-01 ul li:last-child{
    margin-bottom: 0;
  }
  .line-up__gum-wrap-02 {
    margin-bottom: 20px;
    background: none;
  }
  .line-up__gum-wrap-02 ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1300px;
    margin: auto;
  }
  .line-up__gum-wrap-02 ul li {
    width: 100%;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .line-up__gum-wrap-02 ul li:last-child{
    margin-bottom: 0;
  }
  .line-up__gum-wrap-03 ul li {
    width: 100%;
    padding: 20px;
    text-align: center;
  }
  .line-up__gum-banner{
    margin: 0px auto 40px;
    width: 90%;
  }
  /*タブレット*/
  .line-up__tablet-wrap{
    background: none;
  }
  .line-up__tablet-wrap ul {
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 100%;
  }

  .line-up__tablet-wrap ul li {
    display: flex;
    padding: 20px;
    margin-bottom: 20px;
    max-width: 100%;
    width: 100%;
  }
  .line-up__tablet-wrap ul li:last-child{
    margin-bottom: 0;
  }
  /* main */
  .body__header{
    max-height: 37px;
  }
  .pro-gum__body01,.body02,
  .body03__illust{
    -ms-flex-direction:column;
    -webkit-flex-direction:column;
    flex-direction:column;
    margin-top: 20px;
  }
  .body01__right{
    margin-top: 25px;
    margin-left: 0;
  }
  .body02__left{
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
  }
  .body02__right{
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    margin-top: 25px;
    margin-left: 0;
  }
  .body03__title{
    width:100%;
    max-width: 291px;
    margin: 0 auto;
  }
  .body03__illust{
    width: 100%;
    padding: 0 20px;
  }
  .body03__illust img{
    margin-bottom: 13px;
  }
  .body03__illust img + img{
    margin-left: 0;
  }
  
  /*moreボタン*/
  .btn-more{
    width: 270px;
    margin: 33px auto 40px;
  }

  /*キャンペーンバナー*/
  .campaign_wrapper{
    width: 90%;
    margin: 0 auto 80px;
  }
  .campaign_banner{
    display: block;
  }
  
}