@charset "utf-8";
/*===================================================== 
 * Last Up Date: 2023/09/14
=====================================================*/
/**----- contents -------
1:common
2:global
3:fsview
4:sustainability
5:usability
6:footer_vs
----------------------*/
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@500;600&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
/*== 1:common ==================*/
h1, h2, h3, h4, p, ul, li, dl, dt, dd{
 margin: 0;
 padding: 0;
}
#sustainability_usability{
 color: #000;
}
#sustainability_usability img {
 display: block;
 max-width: 100%;
 height: auto;
}
#sustainability_usability p{
 font-size: 16px;
 font-weight: 500;
}
#sustainability_usability a{
 color: inherit;
 text-decoration: none;
}
.cont_inner {
 width: 980px;
 margin: auto;
 box-sizing: border-box;
}
.fl{
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.notes{
 font-size: 12px !important;
 font-weight: bold !important;
}
.txtr{
 text-align: right;
}
.txtc{
 text-align: center;
}
.sp {
 display: none !important;
}
@media screen and (max-width: 1023px) {
 #sustainability_usability p{
  font-size: 12px;
 }
 .cont_inner {
  width: 95vw;
 } 
 .notes{
  font-size: 10px !important;
 }
}
@media screen and (max-width: 640px) {
 .cont_inner {
   width: 84vw;
  }
 .pc {
  display: none !important;
 }
 .sp {
  display: block !important;
 }
}

/*--fade--*/
.fade_off {
 opacity: 0;
 transition: all 1s;
}
.fade_on {
 opacity: 1;
}
.fade::before, .fade::after{
 opacity: 0;
 transition: all 1s;
 transition-delay: 0.5s;
}
.fade_on::before, .fade_on::after{
 opacity: 1;
}
.slide::before{ 
 transition: all 1s;
}
.slide::after{ 
 transition: all 1s;
}
.slide_left::before{
 left: -45vw !important;
}
.slide_right::after{
 right: -45vw !important;
 transition-delay: 1s;
}
.slide_left.slide_act::before{ 
 left: -1vw !important;
}
.slide_right.slide_act::after{ 
 right: -1vw !important;
}
.slide.slide_sus.slide_act{
 animation: slideIn01 1s ease 0s forwards;
}
.slide.slide_usa.slide_act{
 animation: slideIn02 1s ease 0s forwards;
}
/*--Animation--*/
@keyframes slideIn01 {
 0% {
  opacity: 0;
  transform: translateX(20px);
 }
 100% {
  opacity: 1;
  transform: translateX(0);
 }
}
@keyframes slideIn02 {
 0% {
  opacity: 0;
  transform: translateX(-20px);
 }
 100% {
  opacity: 1;
  transform: translateX(0);
 }
}
/*--//Animation--*/
/*==============================*/
/*== 2:global ==================*/
.l-header {
 background: #fff;
}
.l-header img {
 z-index: 9000;
}
.l-main{
 margin-bottom: 0;
}
.m-nav-product-list img {
 display: inline;
}
.l-footer {
 line-height: 2.0;
}
/*==============================*/
/*== 3:fsview ==================*/
#fsview .fsview_bg{
 background: url("../images/fsview_bg.jpg") center center no-repeat;
 background-size: cover;
 opacity: 0;
 animation: fadeIn01 5s ease 0s forwards;
}
#fsview .cont_inner{
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 680px;
 padding-left: 500px;
}
#fsview .cont_inner p.catch01{
 width: 230px;
 background: #fff;
 padding: 10px 12px;
 margin-bottom: 10px;
 opacity: 0;
 animation: fadeIn01 1s ease 0.5s forwards;
}
#fsview .cont_inner p.catch01 img{
 width: 207px;
}
#fsview .cont_inner p.catch02{
 width: 480px;
 background: #fff;
 padding: 10px 12px;
 margin-bottom: 13px;
 opacity: 0;
 animation: fadeIn01 1s ease 1s forwards;
}
#fsview .cont_inner p.catch02 img{
 width: 459px;
}
#fsview .cont_inner p.catch03{
 width: 400px;
 margin-bottom: 25px;
 opacity: 0;
 animation: fadeIn01 1s ease 1.3s forwards;
}
#fsview .cont_inner h1{
 position: relative;
 width: 147px;
 margin-bottom: 15px;
 opacity: 0;
 animation: fadeIn01 1s ease 1.4s forwards;
}
#fsview .cont_inner picture{
 opacity: 0;
 animation: fadeIn01 1s ease 1.5s forwards;
}
/*--Animation--*/
@keyframes fadeIn01 {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
/*--//Animation--*/
@media screen and (min-width:641px) and (max-width: 1023px) {
}
@media screen and (max-width: 640px) {
 #fsview .fsview_bg{
  background: url("../images/sp/fsview_bg.jpg") top center no-repeat;
  background-size: 100vw auto;
 }
 #fsview .cont_inner{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 92vw;
  height: 120vw;
  padding-left: 0;
 }
 #fsview .cont_inner p.catch01{
  width: 42.8vw;
  padding: 1.33vw 1.6vw;
  margin: 0 auto 2vw 0;
 }
 #fsview .cont_inner p.catch01 img{
  width: 39.6vw;
 }
 #fsview .cont_inner p.catch02{
  width: 91.06vw;
  padding: 1.33vw 1.6vw;
  margin: 0 auto 2.66vw 0;
  animation: fadeIn01 1s ease 1s forwards;
 }
 #fsview .cont_inner p.catch02 img{
  width: 87.86vw;
 }
 #fsview .cont_inner p.catch03{
  width: 76.66vw;
  margin-bottom: 49.06vw;
 } 
 #fsview .cont_inner h1{
  width: 25.73vw;
  margin-bottom: 2.4vw;
 }
 #fsview .cont_inner picture{
  width: 54.4vw;
 }
}
/*==============================*/
/*== 4:sustainability ==========*/
#sustainability{
 padding: 0 0 30px;
}
#sustainability .wrapper_inner{
 width: 100vw;
 max-width: 1400px;
 margin: 0 auto 20px;
}
#sustainability .en_sustainability{
 width: 945px;
 margin: 0 0 0 auto;
 opacity: 0;
}
#sustainability h2{
 display: block;
 width: 434px;
 margin: 0 auto 25px;
}
#sustainability h2 > span{
 display: block;
 margin-bottom: 22px;
}
#sustainability h2 > span > img{ 
 width: 200px;
 margin: 0 auto;
}
#meijitokachi #main #sustainability p.sub_comment{
 font-family: 'Noto Sans JP', sans-serif !important;
 color: #008747;
 font-size: 18px;
 font-weight: 600;
 text-align: center;
}
#sustainability .fl{
 align-items: flex-start;
 flex-wrap: wrap;
}
#sustainability .fl h3{
 display: block;
 margin-bottom: 10px;
}
#sustainability .fl .point{
 display: inline-block;
 font-family: 'Hind', sans-serif !important;
 font-style: italic;
 color: #008747;
 font-size: 30px;
 line-height: 1; 
}
#sustainability .fl  dl dt{
 margin-bottom: 15px;
}
@media screen and (min-width:641px) and (max-width: 1024px) {
 #sustainability .wrapper_inner{
  width: 100%;
 } 
 #sustainability .fl .point01, #sustainability .fl .point02{
  width: 48%;
 }
}
@media screen and (max-width: 640px) {
 #sustainability{
  padding: 0 0 21vw;
 }
 #sustainability .wrapper_inner{
  width: 100vw;
  margin: 0 auto 20px;
 }
 #sustainability .en_sustainability{
  width: 100vw;
 }
 #sustainability h2{
  width: 75.2vw;
  margin: 0 auto 4vw;
 }
 #sustainability h2 > span{
  margin-bottom: 4vw;
 }
 #sustainability h2 > span > img{ 
  width: 28vw;
 } 
 #meijitokachi #main #sustainability p.sub_comment{
  font-size: 13px;
 }
 #sustainability .fl{
  display: block;
 }
 #sustainability .fl .point01, #sustainability .fl .point02{
  width: 100%;
 }
 #sustainability .fl h3{
  margin-bottom: 1.33vw;
 }
 #sustainability .fl .point{
  font-size: 24px;
  padding-right: 3vw;
 }
 #sustainability .fl  dl dt{
  margin-bottom: 6.4vw;
 }
}
/*--point01--*/
#sustainability .point01 .en_cup{
 display: inline-block;
 width: 142px;
 margin-bottom: -20px;
}
#sustainability .point01 h3{
 width: 296px;
}
@media screen and (min-width:641px) and (max-width: 1023px) {
 #sustainability .point01 picture{
  display: block;
  width: 36.96vw;
 }
}
@media screen and (max-width: 640px) {
 #sustainability .point01 .en_cup{
  width: 21.33vw;
  margin-bottom: -2vw;
 }
 #sustainability .point01 h3{
  width: 64vw;
 } 
}
/*--point02--*/
#sustainability .point02{
 margin-top: 200px;
}
#sustainability .point02 .en_sticker{
 display: inline-block;
 width: 253px;
}
#sustainability .point02 h3{
 width: 294px;
}
@media screen and (max-width: 640px) {
 #sustainability .point02{
  margin-top: 9.33vw;
 }
 #sustainability .point02 .en_sticker{
  width: 37.86vw;
 }
 #sustainability .point02 h3{
  width: 64vw;
 }
}
/*--bg--*/
#sustainability div.point_wrapper{
 position: relative;
}
#sustainability div.point_wrapper::before {
 position: absolute;
 top: 77px;
 left: -1vw;
 content: "";
 display: block;
 width: 45vw;
 height: 365px;
 background: rgba(0, 135, 71, 0.05);
 border-radius: 0 30px 30px 0;
}
#sustainability div.point_wrapper::after {
 position: absolute;
 bottom: 70px;
 right: -1vw;
 content: "";
 display: block;
 width: 45vw;
 height: 365px;
 background: rgba(0, 135, 71, 0.05);
 border-radius: 30px 0 0 30px;
 visibility: initial;
}
@media screen and (max-width: 640px) {
 #sustainability div.point_wrapper::before {
  top: 16vw;
  left: 0;
  width: 85.33vw;
  height: 76.53vw;
 }
 #sustainability div.point_wrapper::after {
  bottom: 12vw;;
  right: 0;
  width: 85.33vw;
  height: 76.53vw;
 } 
}
/*--circle--*/
#sustainability .cont_inner{
 position: relative;
 z-index: 10;
}
#sustainability .cont_inner::before{
 content: "";
 position: absolute;
 top: -22px;
 left: -188px;
 display: block;
 width: 130px;
 height: 131px;
 background: url("../images/sustainability_circle_01.svg") center center no-repeat;
}
#sustainability .cont_inner::after{
 content: "";
 position: absolute;
 top: 226px;
 right: -149px;
 display: block;
 width: 140px;
 height: 143px;
 background: url("../images/sustainability_circle_02.svg") center center no-repeat;
 visibility: initial;
}
#sustainability .cont_inner .point01{
 position: relative;
}
#sustainability .cont_inner .point01::before{
 content: "";
 position: absolute;
 top: 414px;
 left: -110px;
 display: block;
 width: 100px;
 height: 101px;
 background: url("../images/sustainability_circle_03.svg") center center no-repeat;
}
#sustainability .cont_inner .point02{
 position: relative;
}
#sustainability .cont_inner .point02::before{
 content: "";
 position: absolute;
 bottom: 53px;
 right: -62px;
 display: block;
 width: 31px;
 height: 31px;
 background: url("../images/sustainability_circle_04.svg") center center no-repeat;
}
@media screen and (max-width: 640px) { 
 #sustainability .cont_inner::before{
  top: 7vw;
  left: 71.53vw;
  width: 16vw;
  height: 16.13vw;
 }
 #sustainability .cont_inner::after{
  top: 120.33vw;
  right: -10vw;
  width: 18.667vw;
  height: 19.067vw;
 }
 #sustainability .cont_inner .point01::before{
  top: 88vw;
  left: -15vw;
  width: 13.33vw;
  height: 13.46vw;
 }
 #sustainability .cont_inner .point02::before{
  bottom: 9vw;
  right: -6vw;
  width: 4.13vw;
  height: 4.13vw;
 }
}
/*==============================*/
/*== 5:usability ===============*/
#usability .wrapper_inner{
 width: 100vw;
 max-width: 1400px;
 margin: 0 auto 75px;
}
#usability .en_usability{
 width: 579px;
 margin: 0 auto 0 0;
 opacity: 0;
}
#usability h2{
 display: block;
 width: 431px;
 margin: 0 auto 25px;
}
#usability h2 > span{
 display: block;
 margin-bottom: 22px;
}
#usability h2 > span > img{ 
 width: 200px;
 margin: 0 auto;
}
#meijitokachi #main #usability p.sub_comment{
 font-family: 'Noto Sans JP', sans-serif !important;
 color: #008747;
 font-size: 18px;
 font-weight: 600;
 text-align: center;
}
@media screen and (min-width:641px) and (max-width: 1024px) {
}
@media screen and (min-width:641px) and (max-width: 1024px) {
 #usability .wrapper_inner{
  width: 100%;  
 }
}
@media screen and (max-width: 640px) {
 #usability .wrapper_inner{
  width: 100%;
  margin: 0 auto 9.6vw;
 }
 #usability .en_usability{
  width: 67.2vw;
  margin: 0 auto 0 0;
 }
 #usability h2{
  display: block;
  width: 74.8vw;
  margin: 0 auto 4vw;
 }
 #usability h2 > span{
  margin-bottom: 4vw;
 }
 #usability h2 > span > img{ 
  width: 28vw;
 }
 #meijitokachi #main #usability p.sub_comment{
  font-size: 13px;
 } 
}
/*--usability_01--*/
#usability .usability_01{
 margin-bottom: 80px;
}
#usability .usability_01 h3{
 margin: 0 auto 20px;
}
#meijitokachi #main #usability p.g_txt{
 font-family: 'Noto Sans JP', sans-serif !important;
 color: #008747;
 font-size: 20px;
 font-weight: 600;
}
#usability .usability_01 .sub_cont_inner{
 width: 740px;
 margin: 0 auto;
}
#usability .usability_01 .fl{
 margin-bottom: 40px;
}
#usability .usability_01 picture:nth-child(2){
 position: relative;
}
#usability .usability_01 picture:nth-child(2)::before{
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 left: -22px;
 display: block;
 width: 20px;
 margin: auto 0;
 background: url("../images/usability_ya.svg") center center no-repeat;
}
#usability .usability_01 picture:nth-child(2)::after{
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 right: -22px;
 display: block;
 width: 20px;
 margin: auto 0;
 background: url("../images/usability_ya.svg") center center no-repeat;
}
@media screen and (max-width: 640px) {
 #usability .usability_01{
  margin-bottom: 12.66vw;
 }
 #usability .usability_01 h3{
  margin: 0 auto 2.8vw;
 }
 #meijitokachi #main #usability p.g_txt{
  font-size: 11px;
 }
 #usability .usability_01 .sub_cont_inner{
  width: 100%;
 }
 #usability .usability_01 .fl{
  margin-bottom: 4vw;
 }
 #usability .usability_01 picture{
  width: 26.13vw;
 }
 #usability .usability_01 picture:nth-child(2)::before{
  left: -2.5vw;
  width: 1.86vw;
 }
 #usability .usability_01 picture:nth-child(2)::after{
  right: -2.5vw;
  width: 1.86vw;
 }
}
/*--usability_02--*/
#usability .usability_02{
 margin-bottom: 90px; 
}
#usability .usability_02 h3{
 margin: 0 auto 20px;
}
#usability .usability_02 picture.open_img{
 display: block;
 width: 440px;
 margin: 0 auto 40px;
}
#usability .usability_02 .fl{
 margin-top: 40px; 
}
#usability .usability_02 .figure_item{
 position: relative;
 display: flex;
 align-items: flex-end;
 justify-content: center;
 flex-wrap: wrap;
 width: 45%;
 min-height: 440px;
 padding: 40px 38px 53px;
 border: #008747 3px solid;
 border-radius: 20px;
 background: #fff;
 box-sizing: border-box;
}
#usability .usability_02 .figure_item .point{
 position: absolute;
 top:30px;
 right: 0;
 width: 142px;
}
#usability .usability_02 .figure_item picture{
 width: 360px;
}
#usability .usability_02 .figure_item p{
 position: absolute; 
 bottom: 18px;
 font-size: 11px !important;
}
#usability .usability_02 .figure_item.item_01 h4{
 position: absolute;
 top:30px;
 left: 0;
 width: 130px; 
}
#usability .usability_02 .figure_item.item_01 p{
 right: 25px;
}
#usability .usability_02 .figure_item.item_02 h4{
 position: absolute;
 top:30px;
 left: 0;
 width: 180px; 
}
#usability .usability_02 .figure_item.item_02 p{
 left: 20px;
}
#usability .usability_02 .figure_item.item_02 p > span{
 margin-left: 20px;
}
@media screen and (max-width: 640px) {
 #usability .usability_02{
  margin-bottom: 12vw; 
 }
 #usability .usability_02 h3{
  margin: 0 auto 8vw;
 }
 #usability .usability_02 picture.open_img{
  width: 100%;
  margin: 0 auto 4vw;
 }
 #usability .usability_02 .fl{
  display: block;
  margin-top: 4vw;
 }
 #usability .usability_02 .figure_item{
  width: 100%;
  min-height: 89vw;
  padding: 5.33vw 5.06vw 13vw;
 }
 #usability .usability_02 .figure_item .point{
  position: absolute;
  top: 5vw;
  right: 2vw;
  width: 27.06vw;
 }
 #usability .usability_02 .figure_item picture{
  width: 68.66vw;
 }
 #usability .usability_02 .figure_item p{
  bottom: 3vw;
  font-size: 10px !important;
 }
 #usability .usability_02 .figure_item.item_01{
  margin-bottom: 6vw;
 }
 #usability .usability_02 .figure_item.item_01 h4{
  top:5vw;
  width: 24.8vw; 
  left: -0.8vw;
 }
 #usability .usability_02 .figure_item.item_01 p{
  right: 5vw;
 }
 #usability .usability_02 .figure_item.item_02 h4{
  top:5vw;
  width: 34.4vw; 
  left: -1vw;
 }
 #usability .usability_02 .figure_item.item_02 p{
  width: 83%;
  left: 7vw;
 }
 #usability .usability_02 .figure_item.item_02 p > span{
  display: block;
  text-align: right;
  margin-left: 0;
 }
}
/*--usability_03--*/
#usability .usability_03{
 margin-bottom: 150px; 
}
#usability .usability_03 h3{
 margin: 0 auto 60px;
}
#usability .usability_03 .fl{
 align-items: flex-start;
 margin-bottom: 40px;
}
#usability .usability_03 .figure_item{
 width: 440px;
}
#usability .usability_03 .figure_item p{
 font-size: 11px !important;
}
#usability .usability_03 .figure_item.item_01 picture{
 display: block;
 width: 440px;
 margin-bottom: 5px;
}
#usability .usability_03 .figure_item.item_02{
 position: relative;
 display: flex;
 align-items: flex-end;
 flex-wrap: wrap;
 width: 45%;
 min-height: 440px;
 padding: 40px 38px 53px;
 border: #008747 3px solid;
 border-radius: 20px;
 background: #fff;
 box-sizing: border-box;
}
#usability .usability_03 .figure_item.item_02 h4{
 position: absolute;
 top:30px;
 left: 0;
 width: 326px; 
}
#usability .usability_03 .figure_item.item_02 picture{
 width: 360px;
}
#usability .usability_03 .figure_item.item_02 p{
 position: absolute; 
 bottom: 18px;
 right: 25px;
 font-size: 11px !important;
}
@media screen and (max-width: 1023px) {
 #usability .usability_03 .figure_item.item_01{
  width: 50%;
 }
 #usability .usability_03 .figure_item.item_01 picture{
  width: 100%;
 }
}
@media screen and (max-width: 640px) {
 #usability .usability_03{
  margin-bottom: 21.2vw; 
 }
 #usability .usability_03 h3{
  margin: 0 auto 7.2vw;
 }
 #usability .usability_03 .fl{
  display: block;
  margin-bottom: 4vw;
 }
 #usability .usability_03 .figure_item{
  width: 100%;
 }
 #usability .usability_03 .figure_item p{
  font-size: 10px !important;
 }
 #usability .usability_03 .figure_item.item_01{
  width: 100%;
  margin-bottom: 8.66vw;
 }
 #usability .usability_03 .figure_item.item_01 picture{
  display: block;
  width: 100%;
  margin-bottom: 1vw;
 }
 #usability .usability_03 .figure_item.item_02{
  width: 100%;
  min-height: 89vw;
  padding: 5.33vw 5.06vw 13vw;
 }
 #usability .usability_03 .figure_item.item_02 h4{
  top:5vw;
  width: 63.2vw;
  left: -1vw;
 }
 #usability .usability_03 .figure_item.item_02 picture{
  width: 68.66vw;
 }
 #usability .usability_03 .figure_item.item_02 p{
  bottom: 3vw;
  right: 5vw;
  font-size: 10px !important;
 } 
}
/*--circle--*/
#usability .usability_01{
 position: relative;
}
#usability .usability_01::before{
 content: "";
 position: absolute;
 top: -10px;
 left: -185px;
 display: block;
 width: 169px;
 height: 190px;
 background: url("../images/usability_circle_01.svg") center center no-repeat;
}
#usability .usability_01::after{
 content: "";
 position: absolute;
 bottom: -192px;
 right: -185px;
 display: block;
 width: 173px;
 height: 152px;
 background: url("../images/usability_circle_02.svg") center center no-repeat;
 visibility: initial;
}
#usability .usability_02{
 position: relative;
}
#usability .usability_02::before{
 content: "";
 position: absolute;
 top: 315px;
 left: -177px;
 display: block;
 width: 106px;
 height: 181px;
 background: url("../images/usability_circle_03.svg") center center no-repeat;
}
#usability .usability_02::after{
 content: "";
 position: absolute;
 bottom: 170px;
 right: -197px;
 display: block;
 width: 194px;
 height: 147px;
 background: url("../images/usability_circle_04.svg") center center no-repeat;
 visibility: initial;
}
#usability .usability_03{
 position: relative;
}
#usability .usability_03::before{
 content: "";
 position: absolute;
 top: 228px;
 left: -166px;
 display: block;
 width: 120px;
 height: 191px;
 background: url("../images/usability_circle_05.svg") center center no-repeat;
}
#usability .usability_03::after{
 content: "";
 position: absolute;
 bottom: 5px;
 right: -98px;
 display: block;
 width: 57px;
 height: 54px;
 background: url("../images/usability_circle_06.svg") center center no-repeat;
 visibility: initial;
}
@media screen and (max-width: 640px) {
 #usability .usability_01::before{
  top: 16.8vw;
  left: -14vw;
  width: 18vw;
  height: 20.26vw;
  z-index: -1;
 }
 #usability .usability_01::after{
  bottom: -47.2vw;
  right: -17vw;
  width: 23.06vw;
  height: 20.26vw;
  z-index: -1;
 }
 #usability .usability_02::before{
  top: 107.2vw;
  left: -12vw;
  width: 14.13vw;
  height: 24.13vw;
  z-index: -1;
 }
 #usability .usability_02::after{
  bottom: -7.6vw;
  right: -15vw;
  width: 25.86vw;
  height: 19.6vw;
  z-index: -1;
 }
 #usability .usability_03::before{
  top: 51.06vw;
  left: -12vw;
  width: 16vw;
  height: 25.46vw;
  z-index: -1;
 }
 #usability .usability_03::after{
  bottom: 17.53vw;
  right: 87.8vw;
  width: 7.6vw;
  height: 7.2vw;
  z-index: -1;
 }
}

/*==============================*/
/*== 6:footer_vs ===============*/
#footer_vs {
 padding: 0 0 60px;
}
#footer_vs .cont_inner{
 width: 100%;
 height: 500px;
 text-align: center;
 padding: 65px 0 40px;
 margin-bottom: 65px;
 background: url("../images/footer_vs.jpg");
 background-size: cover;
}
#footer_vs h2{
 width: 980px;
 display: inline-block;
 margin-bottom: 30px;
}
#footer_vs .product{
 width: 533px;
 margin: 0 auto 55px;
}
#footer_vs .banner{
 display: flex;
 justify-content: space-between;
 width: 1220px;
 margin: 0 auto;
}
#footer_vs .banner a{
 display: block;
 margin: 0 auto;
 transition: all 1.0s;
}
#footer_vs .banner a:hover{
 opacity: 0.7;
}
@media screen and (min-width:641px) and (max-width: 1023px) {
 #footer_vs h2{
  width: 98vw;
 }
 #footer_vs .banner{
  width: 98vw;
 }
 #footer_vs .banner a{
  width: 47%;
 }
}
@media screen and (max-width: 640px) {
 #footer_vs {
  padding: 0 0 10vw;
 }
 #footer_vs .cont_inner{
  height: 85.33vw;
  padding: 5.53vw 0 7.46vw;
  margin-bottom: 9.86vw;
  background: url("../images/sp/footer_vs.jpg");
  background-size: cover;
 }
 #footer_vs h2{
  width: 84vw;
  margin-bottom: 4.93vw;
 }
 #footer_vs .product{
  width: 70.933vw;
  margin: 0 auto 4.93vw;
 }
 #footer_vs .banner{
  display: block;
  width: 92vw;
  margin: 0 auto;
 }
 #footer_vs .banner a{
  display: block;
  margin: 0 auto;
 } 
 #footer_vs .banner a:first-child{
  margin-bottom: 5.86vw;
 }
}
/*==============================*/