@charset "UTF-8";
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, input, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block
}

body {
  line-height: 1
}

ol, ul {
  list-style: none
}

blockquote, q {
  quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
  content: '';
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

html {
  width: 100%;
  height: 100%
}

body {
  width: 100%;
  height: 100%;
  color: #000;
  text-align: left;
  background-color: #f7f4f0
}

a {
  color: #000;
  text-decoration: none;
  -webkit-transition: color .3s ease-out, background-color .3s ease-out;
  transition: color .3s ease-out, background-color .3s ease-out
}

a.hover {
  color: #e60012;
  -webkit-transition-duration: 0s;
  transition-duration: 0s
}

.nowrap {
  display: inline-block;
  white-space: nowrap
}

@media all and (min-width:500px) {
  .only_xss {
    display: none
  }
}

@media all and (max-width:499px) {
  .only_mlxlxxl {
    display: none
  }
}

.icon_flag {
  display: inline-block;
  width: 16px;
  height: 11px;
  margin-right: 19px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain
}

.icon_flag.us {
  background-image: url(../../img/flag_us.png)
}

.icon_flag.china {
  background-image: url(../../img/flag_china.png)
}

.matrix {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  left: 0;
  color: #000;
  background-color: #fff;
  -webkit-transition: color 1.5s cubic-bezier(.9, 0, .1, 1), background-color 1.5s cubic-bezier(.9, 0, .1, 1), -webkit-transform 1s cubic-bezier(.9, 0, .1, 1);
  transition: color 1.5s cubic-bezier(.9, 0, .1, 1), background-color 1.5s cubic-bezier(.9, 0, .1, 1), -webkit-transform 1s cubic-bezier(.9, 0, .1, 1);
  transition: color 1.5s cubic-bezier(.9, 0, .1, 1), background-color 1.5s cubic-bezier(.9, 0, .1, 1), transform 1s cubic-bezier(.9, 0, .1, 1);
  transition: color 1.5s cubic-bezier(.9, 0, .1, 1), background-color 1.5s cubic-bezier(.9, 0, .1, 1), transform 1s cubic-bezier(.9, 0, .1, 1), -webkit-transform 1s cubic-bezier(.9, 0, .1, 1)
}

@media all and (max-width:499px) {
  .matrix {
    height: 329px;
    padding: 14px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .matrix {
    height: 317px;
    padding: 14px
  }
}

@media all and (min-width:769px) {
  .matrix {
    height: 289px;
    padding: 28px
  }
}

@media all and (max-width:499px) {
  .matrix .four {
    width: 100%;
    height: 219px
  }
  .matrix .one {
    width: 100%;
    height: 96px;
    margin-top: 14px
  }
}

@media all and (min-width:500px) {
  .matrix .four {
    width: calc((100% - 14px - 4px) * .66666)
  }
  .matrix .one {
    width: calc((100% - 14px - 4px) * .33333);
    margin-left: 14px
  }
}

@media all and (min-width:500px) {
  .matrix.edge .one {
    margin-left: 13px
  }
}

.matrix.edge.keyvisual .one {
  margin-left: 9px
}

.matrix a.cat::before {
  -webkit-transition: background-color .4s ease-out, ease-out, opacity .3s ease-out;
  transition: background-color .4s ease-out, ease-out, opacity .3s ease-out
}

.matrix a.cat::after {
  -webkit-transition: color .3s ease-out;
  transition: color .3s ease-out
}

.matrix a.cat.hover::after {
  color: #e60012;
  -webkit-transition: color 0s ease-out;
  transition: color 0s ease-out
}

.matrix a.cat.selected::before {
  background-color: #000;
  opacity: 1;
  -webkit-animation-name: catSelected;
  animation-name: catSelected;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out
}

.matrix a.cat.selected::after {
  color: #fff;
  -webkit-transition: color 0s ease-out;
  transition: color 0s ease-out
}

.matrix a.cat.selected.hover::before {
  opacity: .75;
  -webkit-transition: opacity 0s ease-out;
  transition: opacity 0s ease-out
}

@-webkit-keyframes catSelected {
  0% {
    -webkit-transform: scale(1.06);
    transform: scale(1.06)
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes catSelected {
  0% {
    -webkit-transform: scale(1.06);
    transform: scale(1.06)
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

.matrix.cat_1 .four .cat:nth-child(1)::before {
  background-color: #000;
  opacity: 1
}

.matrix.cat_1 .four .cat:nth-child(1)::after {
  color: #fff
}

.matrix.cat_2 .four .cat:nth-child(2)::before {
  background-color: #000;
  opacity: 1
}

.matrix.cat_2 .four .cat:nth-child(2)::after {
  color: #fff
}

.matrix.cat_3 .four .cat:nth-child(4)::before {
  background-color: #000;
  opacity: 1
}

.matrix.cat_3 .four .cat:nth-child(4)::after {
  color: #fff
}

.matrix.cat_4 .four .cat:nth-child(3)::before {
  background-color: #000;
  opacity: 1
}

.matrix.cat_4 .four .cat:nth-child(3)::after {
  color: #fff
}

.matrix.cat_5 .one .cat::before {
  background-color: #000;
  opacity: 1
}

.matrix.cat_5 .one .cat::after {
  color: #fff
}

.matrix.invert {
  color: #fff;
  background-color: #000
}

.matrix.invert.cat_1 .four .cat:nth-child(1)::before {
  background-color: #fff
}

.matrix.invert.cat_1 .four .cat:nth-child(1)::after {
  color: #000
}

.matrix.invert.cat_2 .four .cat:nth-child(2)::before {
  background-color: #fff
}

.matrix.invert.cat_2 .four .cat:nth-child(2)::after {
  color: #000
}

.matrix.invert.cat_3 .four .cat:nth-child(4)::before {
  background-color: #fff
}

.matrix.invert.cat_3 .four .cat:nth-child(4)::after {
  color: #000
}

.matrix.invert.cat_4 .four .cat:nth-child(3)::before {
  background-color: #fff
}

.matrix.invert.cat_4 .four .cat:nth-child(3)::after {
  color: #000
}

.matrix.invert.cat_5 .one .cat::before {
  background-color: #fff
}

.matrix.invert.cat_5 .one .cat::after {
  color: #000
}

.matrix.invert .four {
  border-color: rgba(255, 255, 255, .1);
  background-image: url(/asset/img/matrix_grid_white.svg)
}

.matrix.invert .one {
  border-color: rgba(255, 255, 255, .1)
}

.matrix.invert .cat::before {
  border: solid 1px #fff;
  background-color: #000
}

.matrix.invert .cat::after {
  color: #fff
}

.matrix .four {
  position: relative;
  border: solid 1px #dadada;
  background-image: url(/asset/img/matrix_grid_black.svg);
  background-position: center center;
  overflow: hidden;
  -webkit-transition: border-color 1.5s cubic-bezier(.9, 0, .1, 1);
  transition: border-color 1.5s cubic-bezier(.9, 0, .1, 1)
}

@media all and (max-width:499px) {
  .matrix .four .cat:nth-child(1) {
    top: calc(50% - 78px / 2 - 54px - 2px);
    left: calc(50% - 78px / 2 - 54px - 2px)
  }
}

@media all and (min-width:500px) {
  .matrix .four .cat:nth-child(1) {
    top: calc(50% - 141px / 2 - 92px - 1px);
    left: calc(50% - 141px / 2 - 92px - 1px)
  }
}

.matrix .four .cat:nth-child(1)::after {
  content: 'AROMATIC'
}

@media all and (max-width:499px) {
  .matrix .four .cat:nth-child(2) {
    top: calc(50% - 78px / 2 - 54px - 2px);
    left: calc(50% - 78px / 2 + 54px - 1px)
  }
}

@media all and (min-width:500px) {
  .matrix .four .cat:nth-child(2) {
    top: calc(50% - 141px / 2 - 92px - 1px);
    left: calc(50% - 141px / 2 + 92px - 1px)
  }
}

.matrix .four .cat:nth-child(2)::after {
  content: 'AGED'
}

@media all and (max-width:499px) {
  .matrix .four .cat:nth-child(3) {
    top: calc(50% - 78px / 2 + 54px - 1px);
    left: calc(50% - 78px / 2 - 54px - 2px)
  }
}

@media all and (min-width:500px) {
  .matrix .four .cat:nth-child(3) {
    top: calc(50% - 141px / 2 + 92px - 1px);
    left: calc(50% - 141px / 2 - 92px - 1px)
  }
}

.matrix .four .cat:nth-child(3)::after {
  content: 'SMOOTH\AREFRESHING'
}

@media all and (max-width:499px) {
  .matrix .four .cat:nth-child(4) {
    top: calc(50% - 78px / 2 + 54px - 1px);
    left: calc(50% - 78px / 2 + 54px - 1px)
  }
}

@media all and (min-width:500px) {
  .matrix .four .cat:nth-child(4) {
    top: calc(50% - 141px / 2 + 92px - 1px);
    left: calc(50% - 141px / 2 + 92px - 1px)
  }
}

.matrix .four .cat:nth-child(4)::after {
  content: 'RICH'
}

.matrix .four .cat.fr:nth-child(1)::after {
  content: 'AROMATIQUE'
}

.matrix .four .cat.fr:nth-child(2)::after {
  content: 'ÂGÉ'
}

.matrix .four .cat.fr:nth-child(3)::after {
  content: 'DOUX\ARAFRAÎCHISSANT';
  -webkit-transform: translate3d(-50%, -50%, 0) scale(.8);
  transform: translate3d(-50%, -50%, 0) scale(.8)
}

.matrix .four .cat.fr:nth-child(4)::after {
  content: 'RICHE'
}

.matrix .four .axis::before {
  position: absolute;
  font-family: "Gotham A", "Gotham B", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  white-space: pre;
  opacity: .5
}

@media all and (max-width:499px) {
  .matrix .four .axis::before {
    font-size: 9px;
    line-height: 13px
  }
}

@media all and (min-width:500px) {
  .matrix .four .axis::before {
    font-size: 14px;
    line-height: 17px
  }
}

.matrix .four .axis:nth-child(5)::before {
  content: 'AROMATIC';
  top: 7px;
  left: 50%;
  text-align: center;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0)
}

.matrix .four .axis:nth-child(6)::before {
  content: 'RICH\ATASTE';
  top: 50%;
  right: 9px;
  text-align: right;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0)
}

.matrix .four .axis:nth-child(7)::before {
  content: 'LESS\A AROMATIC';
  bottom: 7px;
  left: 50%;
  text-align: center;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0)
}

.matrix .four .axis:nth-child(8)::before {
  content: 'LIGHT\ATASTE';
  top: 50%;
  left: 9px;
  text-align: left;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0)
}

.matrix .axis.fr:nth-child(5)::before {
  content: 'AROMATIQUE'
}

.matrix .axis.fr:nth-child(6)::before {
  content: 'RICHE\AGOÛT'
}

.matrix .axis.fr:nth-child(7)::before {
  content: 'MOINS\A AROMATIQUE'
}

.matrix .axis.fr:nth-child(8)::before {
  content: 'LÉGER\AGOÛT'
}

.matrix .one {
  position: relative;
  border: solid 1px #dadada;
  overflow: hidden;
  -webkit-transition: border-color 1.5s cubic-bezier(.9, 0, .1, 1);
  transition: border-color 1.5s cubic-bezier(.9, 0, .1, 1)
}

@media all and (max-width:499px) {
  .matrix .one .cat {
    top: calc(50% - 78px / 2 - 1px);
    left: calc(50% - 78px / 2 - 1px)
  }
}

@media all and (min-width:500px) {
  .matrix .one .cat {
    top: calc(50% - 141px / 2 - 1px);
    left: calc(50% - 141px / 2 - 1px)
  }
}

.matrix .one .cat::after {
  content: 'SPARKLING'
}

.matrix .one.fr .cat::after {
  content: 'PÉTILLANT'
}

.matrix .cat {
  position: absolute
}

@media all and (max-width:499px) {
  .matrix .cat {
    width: 78px;
    height: 78px
  }
}

@media all and (min-width:500px) {
  .matrix .cat {
    width: 141px;
    height: 141px
  }
}

.matrix .cat::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 1px #000;
  border-radius: 50%;
  background-color: #fff;
  opacity: .5;
  -webkit-transition: border-color 1.5s cubic-bezier(.9, 0, .1, 1), background-color 1.5s cubic-bezier(.9, 0, .1, 1);
  transition: border-color 1.5s cubic-bezier(.9, 0, .1, 1), background-color 1.5s cubic-bezier(.9, 0, .1, 1)
}

.matrix .cat::after {
  font-family: "Gotham A", "Gotham B", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  display: block;
  position: absolute;
  top: calc(50% + 1px);
  left: calc(50% + 1px);
  color: #000;
  text-align: center;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: color 1.5s cubic-bezier(.9, 0, .1, 1);
  transition: color 1.5s cubic-bezier(.9, 0, .1, 1)
}

@media all and (max-width:499px) {
  .matrix .cat::after {
    font-size: 10px;
    line-height: 11px
  }
}

@media all and (min-width:500px) {
  .matrix .cat::after {
    font-size: 12px;
    line-height: 14px
  }
}

.menu_open header {
  position: fixed;
  width: 70px
}

@media all and (min-width:769px) {
  .menu_open header {
    top: 50px;
    right: 50px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .menu_open header {
    top: 28px;
    right: 30px
  }
}

@media all and (max-width:499px) {
  .menu_open header {
    top: 7px;
    right: 11px
  }
}

.menu_open #humburger .humburger-inner {
  margin-left: 15px
}

@media all and (max-width:499px) {
  .menu_open #humburger .humburger-inner {
    margin-top: 23px
  }
}

.menu_open #humburger .menubtn-child span {
  width: 40px;
  background-color: #fff
}

.menu_open #humburger .menubtn-child span:after {
  display: none
}

.menu_open #humburger .menubtn-child:nth-child(1) span.hover {
  -webkit-transform: scale(.75, .75) rotate(315deg);
  -ms-transform: scale(.75, .75) rotate(315deg);
  transform: scale(.75, .75) rotate(315deg)
}

@media all and (max-width:320px) {
  .menu_open #humburger .menubtn-child:nth-child(1) span.hover {
    top: 13px
  }
}

@media all and (min-width:321px) {
  .menu_open #humburger .menubtn-child:nth-child(1) span.hover {
    top: 14px
  }
}

.menu_open #humburger .menubtn-child:nth-child(2) {
  -webkit-transform: scale(.75, .75);
  -ms-transform: scale(.75, .75);
  transform: scale(.75, .75)
}

.menu_open #humburger .menubtn-child:nth-child(3) span.hover {
  -webkit-transform: scale(.75, .75) rotate(-315deg);
  -ms-transform: scale(.75, .75) rotate(-315deg);
  transform: scale(.75, .75) rotate(-315deg)
}

@media all and (max-width:320px) {
  .menu_open #humburger .menubtn-child:nth-child(3) span.hover {
    top: 13px
  }
}

@media all and (min-width:321px) {
  .menu_open #humburger .menubtn-child:nth-child(3) span.hover {
    top: 14px
  }
}

.menu_open #humburger .menubtn-child:nth-child(1) span {
  left: 1px;
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  transform: rotate(315deg)
}

@media all and (max-width:320px) {
  .menu_open #humburger .menubtn-child:nth-child(1) span {
    top: 13px
  }
}

@media all and (min-width:321px) {
  .menu_open #humburger .menubtn-child:nth-child(1) span {
    top: 14px
  }
}

.menu_open #humburger .menubtn-child:nth-child(2) span {
  width: 0
}

@media all and (max-width:320px) {
  .menu_open #humburger .menubtn-child:nth-child(2) span {
    left: 14px
  }
}

@media all and (min-width:321px) {
  .menu_open #humburger .menubtn-child:nth-child(2) span {
    left: 0
  }
}

.menu_open #humburger .menubtn-child:nth-child(3) span {
  left: 1px;
  -webkit-transform: rotate(-315deg);
  -ms-transform: rotate(-315deg);
  transform: rotate(-315deg)
}

@media all and (max-width:320px) {
  .menu_open #humburger .menubtn-child:nth-child(3) span {
    top: 13px
  }
}

@media all and (min-width:321px) {
  .menu_open #humburger .menubtn-child:nth-child(3) span {
    top: 14px
  }
}

header {
  position: fixed;
  z-index: 6000;
  right: 0;
  width: 70px;
  height: 74px
}

@media all and (min-width:500px) and (max-width:768px) {
  header {
    width: 50px
  }
}

@media all and (max-width:499px) {
  header {
    width: 50px
  }
}

header #humburger {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer
}

header .humburger-inner {
  position: relative;
  margin-top: 22px;
  margin-left: 20px
}

@media all and (min-width:500px) and (max-width:768px) {
  header .humburger-inner {
    margin-left: 10px
  }
}

@media all and (max-width:499px) {
  header .humburger-inner {
    margin-top: 30px
  }
}

header span {
  display: block;
  position: absolute;
  width: 30px;
  height: 1px;
  background-color: #000;
  transition: ease-out, top .3s ease-out, left .3s ease-out, width .2s ease-out, transform .2s ease-out, -webkit-transform .2s ease-out
}

header span:after {
  content: '';
  display: block;
  margin-top: 1px;
  width: 100%;
  height: 1px;
  background-color: #fff;
  opacity: .5
}

header .menubtn-child:nth-child(1) span {
  top: 0
}

header .menubtn-child:nth-child(1) span.hover {
  top: 3px
}

header .menubtn-child:nth-child(2) span {
  top: 12px
}

header .menubtn-child:nth-child(3) span {
  top: 25px
}

header .menubtn-child:nth-child(3) span.hover {
  top: 22px
}

#global_menu {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  text-align: right;
  background-color: rgba(0, 0, 0, .9);
  overflow: hidden;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  transition: transform .5s cubic-bezier(.9, 0, .1, 1), -webkit-transform .5s cubic-bezier(.9, 0, .1, 1)
}

#global_menu .logo_jfoodo {
  display: block;
  position: absolute;
  top: 70px;
  left: 70px;
  width: 114px;
  height: 29px;
  text-align: left;
  text-indent: -10000px;
  background-image: url(/asset/img/logo_jfoodo_white_frame.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden
}

@media all and (min-width:500px) and (max-width:768px) {
  #global_menu .logo_jfoodo {
    top: 50px;
    left: 50px
  }
}

@media all and (max-width:499px) {
  #global_menu .logo_jfoodo {
    top: 30px;
    left: 30px
  }
}

#global_menu .logo_jfoodo.hover {
  opacity: .7
}

#global_menu .navilist {
  text-align: right
}

#global_menu .navilist li {
  display: block;
  line-height: 120%;
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: color .5s cubic-bezier(.8, 0, .1, 1) 0s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) 0s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) 0s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) 0s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) 0s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) 0s, transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) 0s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) 0s, transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s
}

#global_menu .navilist li .pc_elm {
  display: inherit
}

#global_menu .navilist li .sp_elm {
  display: none
}

#global_menu .navilist a {
  color: #FFF
}

#global_menu .navilist a.hover {
  color: #e60012
}

#global_menu .navilist li.current a {
  color: #e60012
}

@media all and (min-width:769px) {
  #global_menu .navilist {
    padding-top: 150px;
    padding-right: 68px
  }
  #global_menu .navilist li {
    padding-top: 12px;
    padding-bottom: 12px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #global_menu .navilist {
    padding-top: 110px;
    padding-right: 48px
  }
  #global_menu .navilist li {
    padding-top: 8px;
    padding-bottom: 8px
  }
}

@media all and (max-width:499px) {
  #global_menu .navilist {
    padding-top: 95px;
    padding-right: 28px
  }
  #global_menu .navilist li {
    padding-top: 8px;
    padding-bottom: 8px
  }
  #global_menu .navilist li .pc_elm {
    display: none
  }
  #global_menu .navilist li .sp_elm {
    display: inherit
  }
}

#global_menu .sns {
  color: #4c4c4c;
  white-space: nowrap;
  font-size: 11px;
  text-align: right;
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: color .5s cubic-bezier(.8, 0, .1, 1) 0s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) 0s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) 0s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) 0s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) 0s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) 0s, transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) 0s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) 0s, transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s
}

#global_menu .sns a {
  color: #FFF
}

@media all and (min-width:769px) {
  #global_menu .sns {
    margin-top: 47px;
    padding-right: 70px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #global_menu .sns {
    margin-top: 32px;
    padding-right: 50px
  }
}

@media all and (max-width:499px) {
  #global_menu .sns {
    margin-top: 32px;
    font-size: 10px;
    padding-right: 30px
  }
}

#global_menu .country_selector {
  position: absolute;
  bottom: -1px;
  right: 0;
  font-size: 0
}

#global_menu .country_selector a {
  display: block;
  color: #fff
}

@media all and (min-width:769px) {
  #global_menu .country_selector {
    padding-right: 70px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #global_menu .country_selector {
    padding-right: 50px
  }
}

@media all and (max-width:499px) {
  #global_menu .country_selector {
    padding-left: 30px;
    left: 0;
    right: auto;
    bottom: 23px
  }
}

#global_menu .country_selector .country-select.current a {
  color: #000;
  background-color: #fff
}

@media all and (max-width:499px) {
  #global_menu .country_selector .country-select.current a {
    color: #e60012;
    background-color: transparent
  }
}

#global_menu .country_selector .country-select {
  display: inline-block
}

@media all and (max-width:499px) {
  #global_menu .country_selector .country-select {
    display: block
  }
}

#global_menu .country_selector .country-select a {
  border: 1px solid #fff;
  padding-top: 11px;
  padding-bottom: 10px;
  text-align: left
}

@media all and (min-width:769px) {
  #global_menu .country_selector .country-select a {
    padding-left: 20px;
    padding-right: 19px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #global_menu .country_selector .country-select a {
    padding-left: 14px;
    padding-right: 13px
  }
}

@media all and (max-width:499px) {
  #global_menu .country_selector .country-select a {
    border: 0 solid #fff;
    font-size: 12px;
    padding-top: 7px;
    padding-bottom: 7px
  }
}

#global_menu .country_selector .country-select a.hover {
  color: #FFF;
  background-color: rgba(255, 255, 255, .25)
}

@media all and (max-width:499px) {
  #global_menu .country_selector .country-select a.hover {
    color: #e60012;
    background-color: transparent
  }
}

#global_menu .country_selector .country-select .icon_flag {
  margin-right: 10px;
  margin-bottom: -1px
}

@media all and (min-width:500px) and (max-width:768px) {
  #global_menu .country_selector .country-select .icon_flag {
    margin-right: 9px
  }
}

#global_menu .country_selector .country-select.fr, #global_menu .country_selector .country-select.uk {
  margin-left: -1px
}

@media all and (max-width:499px) {
  #global_menu .country_selector .country-select.fr, #global_menu .country_selector .country-select.uk {
    margin-left: 0
  }
}

.menu_open #global_menu {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition: transform 1s cubic-bezier(0, .9, .1, 1), -webkit-transform 1s cubic-bezier(0, .9, .1, 1)
}

.menu_open #global_menu .navilist li {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.menu_open #global_menu .navilist li:nth-of-type(1) {
  -webkit-transition: color .5s cubic-bezier(.8, 0, .1, 1) 0s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) 0s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) 0s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) 0s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) 0s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) 0s, transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) 0s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) 0s, transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) 0s
}

.menu_open #global_menu .navilist li:nth-of-type(2) {
  -webkit-transition: color .5s cubic-bezier(.8, 0, .1, 1) .1s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .1s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .1s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .1s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .1s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .1s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .1s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .1s, transform 1.2s cubic-bezier(.8, 0, .1, 1) .1s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .1s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .1s, transform 1.2s cubic-bezier(.8, 0, .1, 1) .1s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .1s
}

.menu_open #global_menu .navilist li:nth-of-type(3) {
  -webkit-transition: color .5s cubic-bezier(.8, 0, .1, 1) .2s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .2s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .2s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .2s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .2s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .2s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .2s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .2s, transform 1.2s cubic-bezier(.8, 0, .1, 1) .2s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .2s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .2s, transform 1.2s cubic-bezier(.8, 0, .1, 1) .2s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .2s
}

.menu_open #global_menu .navilist li:nth-of-type(4) {
  -webkit-transition: color .5s cubic-bezier(.8, 0, .1, 1) .3s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .3s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .25s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .3s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .3s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .25s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .3s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .3s, transform 1.2s cubic-bezier(.8, 0, .1, 1) .25s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .3s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .3s, transform 1.2s cubic-bezier(.8, 0, .1, 1) .25s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .25s
}

.menu_open #global_menu .navilist li:nth-of-type(5) {
  -webkit-transition: color .5s cubic-bezier(.8, 0, .1, 1) .4s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .4s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .3s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .4s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .4s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .3s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .4s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .4s, transform 1.2s cubic-bezier(.8, 0, .1, 1) .3s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .4s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .4s, transform 1.2s cubic-bezier(.8, 0, .1, 1) .3s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .3s
}

.menu_open #global_menu .sns {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: color .5s cubic-bezier(.8, 0, .1, 1) .5s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .5s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .6s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .5s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .5s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .6s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .5s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .5s, transform 1.2s cubic-bezier(.8, 0, .1, 1) .6s;
  transition: color .5s cubic-bezier(.8, 0, .1, 1) .5s, opacity 1.2s cubic-bezier(.8, 0, .1, 1) .5s, transform 1.2s cubic-bezier(.8, 0, .1, 1) .6s, -webkit-transform 1.2s cubic-bezier(.8, 0, .1, 1) .6s
}

.menu_open #global_menu .sns a {
  cursor: pointer
}

.menu_open #global_menu .sns a:hover {
  color: #e60012
}

.btn_see {
  position: relative;
  z-index: 5;
  top: 293px;
  right: 0
}

.btn_see a {
  display: block;
  width: 100%;
  background-color: #fff;
  padding: 16px 0 16px 20px
}

@media all and (min-width:769px) {
  .btn_see a {
    padding: 16px 0 16px 20px
  }
}

.btn_see.font.s_12 {
  padding: 0
}

#_about .sub_navi.fixed, #_harmonies .sub_navi.fixed {
  position: fixed;
  z-index: 50;
  top: 22px
}

#_about .sub_navi.isHide, #_harmonies .sub_navi.isHide {
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out
}

#_about .sub_navi, #_harmonies .sub_navi {
  position: fixed;
  z-index: 50;
  top: 87px;
  right: 22px;
  opacity: 1;
  -webkit-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out
}

@media all and (min-width:500px) and (max-width:768px) {
  #_about .sub_navi, #_harmonies .sub_navi {
    right: 12px
  }
}

@media all and (max-width:499px) {
  #_about .sub_navi, #_harmonies .sub_navi {
    right: 2px
  }
}

#_about .sub_navi a.sub_navi-item, #_harmonies .sub_navi a.sub_navi-item {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  cursor: pointer
}

#_about .sub_navi a.sub_navi-item:before, #_harmonies .sub_navi a.sub_navi-item:before {
  position: absolute;
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  top: 8px;
  left: 8px;
  border-radius: 50%;
  background-color: #000;
  opacity: .3;
  -webkit-transform: scale(.6);
  -ms-transform: scale(.6);
  transform: scale(.6);
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out
}

#_about .sub_navi a.sub_navi-item.hover:before, #_harmonies .sub_navi a.sub_navi-item.hover:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  -webkit-transition: -webkit-transform 0s ease-out;
  transition: -webkit-transform 0s ease-out;
  transition: transform 0s ease-out;
  transition: transform 0s ease-out, -webkit-transform 0s ease-out
}

#_about .sub_navi a.sub_navi-item.current:before, #_harmonies .sub_navi a.sub_navi-item.current:before {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out
}

body.sp #_home #cover #cover_movie {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  margin: auto;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0)
}

body.sp #_home #cover #cover_movie.playing {
  opacity: 1;
  -webkit-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out
}

body.sp #_home #cover #cover_photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/asset/img/usuk_cover_sp.jpg);
  background-repeat: no-repeat;
  background-size: cover
}

body.sp #_home #cover #cover_photo.fr {
  background-image: url(/asset/img/fr_cover_sp.jpg)
}

#_home #cover {
  position: relative;
  z-index: 0;
  width: 100%;
  background-color: #000
}

#_home #cover #cover_movie {
  position: absolute;
  opacity: 0;
  margin: auto;
  min-width: 100%;
  min-height: 100%
}

#_home #cover #cover_movie.playing {
  opacity: 1;
  -webkit-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out
}

#_home #cover #cover_youtube {
  opacity: 0
}

#_home #cover #cover_youtube.show {
  opacity: 1;
  -webkit-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out
}

#_home #cover #cover_photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(/asset/img/usuk_cover_pc.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover
}

#_home #cover #cover_photo.fr {
  background-image: url(/asset/img/fr_cover_pc.jpg)
}

#_home #cover .play {
  display: block;
  position: absolute;
  top: calc(50% - 36px);
  left: calc(50% - 36px);
  width: 72px;
  height: 72px;
  background: center/cover url(/asset/img/icon_play.svg) no-repeat
}

@media all and (max-width:768px) {
  #_home #cover .play {
    top: calc(33.33333% - 36px)
  }
}

#_home #cover a {
  display: block;
  width: 100%;
  height: 100%
}

#_home #cover:after {
  content: '';
  display: block
}

@media all and (min-width:500px) and (max-width:768px) {
  #_home #cover:after {
    padding-top: 78.125%
  }
}

#_home #statement_wrapper {
  position: relative;
  background-color: #0b0b10;
  height: 1536px
}

@media all and (max-width:499px) {
  #_home #statement_wrapper {
    height: 1023px
  }
}

#_home #statement_wrapper #statement_photo {
  position: absolute;
  z-index: 0;
  bottom: 0;
  overflow: hidden
}

@media all and (max-width:768px) {
  #_home #statement_wrapper #statement_photo {
    left: 0;
    width: 100%;
    height: 0;
    padding-bottom: 200%
  }
  #_home #statement_wrapper #statement_photo .photo_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/asset/img/sake_alt.jpg);
    background-repeat: no-repeat;
    background-size: contain
  }
}

@media all and (min-width:769px) {
  #_home #statement_wrapper #statement_photo {
    right: 0;
    width: 768px;
    height: 1536px
  }
  #_home #statement_wrapper #statement_photo .photo_container {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    background-image: url(/asset/img/sake_alt.jpg);
    background-repeat: no-repeat;
    background-size: contain
  }
}

#_home #statement_wrapper #statement_photo::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(11, 11, 16, 0)), to(#0b0b10));
  background-image: -webkit-linear-gradient(bottom, rgba(11, 11, 16, 0) 0, #0b0b10 100%);
  background-image: linear-gradient(0deg, rgba(11, 11, 16, 0) 0, #0b0b10 100%);
  z-index: 1
}

@media all and (min-width:769px) {
  #_home #statement_wrapper #statement_photo::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background-image: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(11, 11, 16, 0)), to(#0b0b10));
    background-image: -webkit-linear-gradient(right, rgba(11, 11, 16, 0) 0, #0b0b10 100%);
    background-image: linear-gradient(-90deg, rgba(11, 11, 16, 0) 0, #0b0b10 100%);
    z-index: 1
  }
}

#_home #statement_wrapper #video {
  display: none;
  position: absolute;
  z-index: 0;
  bottom: 0;
  overflow: hidden
}

@media all and (max-width:768px) {
  #_home #statement_wrapper #video {
    left: 0;
    width: 100%;
    height: 0;
    padding-bottom: 200%
  }
  #_home #statement_wrapper #video #pour_movie {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }
}

@media all and (min-width:769px) {
  #_home #statement_wrapper #video {
    right: 0;
    width: 768px;
    height: 1536px
  }
  #_home #statement_wrapper #video #pour_movie {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
  }
}

#_home #statement_wrapper #video::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(11, 11, 16, 0)), to(#0b0b10));
  background-image: -webkit-linear-gradient(bottom, rgba(11, 11, 16, 0) 0, #0b0b10 100%);
  background-image: linear-gradient(0deg, rgba(11, 11, 16, 0) 0, #0b0b10 100%);
  z-index: 1
}

@media all and (min-width:769px) {
  #_home #statement_wrapper #video::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background-image: -webkit-gradient(linear, right top, left top, color-stop(0, rgba(11, 11, 16, 0)), to(#0b0b10));
    background-image: -webkit-linear-gradient(right, rgba(11, 11, 16, 0) 0, #0b0b10 100%);
    background-image: linear-gradient(-90deg, rgba(11, 11, 16, 0) 0, #0b0b10 100%);
    z-index: 1
  }
}

#_home #statement_wrapper #statement {
  color: #fff;
  margin: 0 auto;
  pointer-events: none;
  -webkit-transform: translate3d(0, -421px, 0);
  transform: translate3d(0, -421px, 0)
}

@media all and (max-width:499px) {
  #_home #statement_wrapper #statement {
    width: calc(100% - 30px - 30px)
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_home #statement_wrapper #statement {
    width: calc(100% - 50px - 30px - 50px - 30px)
  }
}

@media all and (min-width:769px) and (max-width:1024px) {
  #_home #statement_wrapper #statement {
    width: calc(100% - 70px - 30px - 70px - 30px);
    max-width: 960px
  }
}

@media all and (min-width:1025px) {
  #_home #statement_wrapper #statement {
    width: calc(100% - 70px - 90px - 70px - 90px);
    max-width: 960px;
    position: relative
  }
}

@media all and (max-width:768px) {
  #_home #statement_wrapper #statement {
    padding: 50px 0 100% 0
  }
}

@media all and (min-width:769px) {
  #_home #statement_wrapper #statement {
    padding: 50px 0 125px 0
  }
}

#_home #statement_wrapper #statement .site_title {
  display: block;
  z-index: 2
}

@media all and (min-width:500px) and (max-width:768px) {
  #_home #statement_wrapper #statement .site_title {
    margin-top: -420px
  }
}

@media all and (max-width:499px) {
  #_home #statement_wrapper #statement .site_title {
    margin-top: -368px
  }
}

#_home #statement_wrapper #statement .site_subtitle {
  display: block;
  margin-top: -50px;
  z-index: 2
}

@media all and (min-width:500px) and (max-width:768px) {
  #_home #statement_wrapper #statement .site_subtitle {
    padding-bottom: 141px
  }
}

@media all and (max-width:499px) {
  #_home #statement_wrapper #statement .site_subtitle {
    padding-bottom: 82px
  }
}

#_home #statement_wrapper #statement .statement {
  display: block;
  z-index: 2
}

@media all and (max-width:499px) {
  #_home #statement_wrapper #statement .statement {
    font-size: 14px;
    line-height: 214%
  }
}

#_home #statement_wrapper #statement.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto
}

#_home #statement_wrapper #statement.absolute {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto
}

@media all and (min-width:769px) {
  #_home #statement_wrapper.fr #statement {
    padding: 62px 0 125px 0
  }
}

#_home #top-gallery {
  position: relative
}

@media all and (min-width:769px) {
  #_home #top-gallery {
    margin: 0 auto;
    padding: 0 70px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_home #top-gallery {
    padding: 0 50px
  }
}

@media all and (max-width:499px) {
  #_home #top-gallery {
    padding: 0 15px
  }
}

#_home #top-gallery .sec-gallery-header-inner {
  max-width: 960px;
  margin: 0 auto
}

#_home #top-gallery .sec-gallery-header-inner h3 {
  padding-top: 89px;
  padding-bottom: 90px
}

@media all and (max-width:499px) {
  #_home #top-gallery .sec-gallery-header-inner h3 {
    padding-top: 54px;
    padding-bottom: 42px
  }
}

#_home #top-gallery .btn_see {
  position: absolute;
  top: 88px;
  width: 320px
}

@media all and (max-width:768px) {
  #_home #top-gallery .btn_see {
    top: 86px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_home #top-gallery .btn_see {
    width: 183px
  }
}

@media all and (max-width:499px) {
  #_home #top-gallery .btn_see {
    width: 108px;
    top: 50px
  }
}

@media all and (min-width:1280px) {
  #_home #top-gallery .btn_see {
    width: calc(320px + (100% - 1280px)/ 2);
    right: 0
  }
}

#_home #top-gallery .btn_see a {
  color: #fff;
  background-color: #000
}

#_home #top-gallery .btn_see a.hover {
  color: #e60012;
  background-color: #fff
}

@media all and (max-width:499px) {
  #_home #top-gallery .btn_see.fr {
    right: 20px
  }
}

#_home #top-gallery .gallery-list, #_home #top-gallery .gallery-list-item, #_home #top-gallery .swiper-container {
  margin-bottom: 0
}

#_home #top-gallery .swiper-container {
  max-width: 1140px;
  overflow: visible;
  margin: 0 auto
}

#_home #top-gallery .swiper-pagination {
  width: 100%;
  max-width: 1140px;
  top: 102px;
  right: 365px;
  margin: auto;
  text-align: right
}

#_home #top-gallery .swiper-pagination-bullet {
  outline: 0;
  opacity: 1;
  margin: 0 5px
}

#_home #top-gallery .swiper-pagination-bullet-active {
  opacity: .1;
  background-color: #000
}

@media all and (min-width:1280px) {
  #_home #top-gallery .swiper-pagination {
    right: calc(365px + (100% - 1280px)/ 2)
  }
}

@media all and (max-width:768px) {
  #_home #top-gallery .swiper-pagination {
    text-align: left
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_home #top-gallery .swiper-pagination {
    top: 158px;
    left: 78px;
    right: auto
  }
}

@media all and (max-width:499px) {
  #_home #top-gallery .swiper-pagination {
    top: 96px;
    left: 28px;
    right: auto
  }
}

#_home #top-gallery .gallery-list {
  max-width: none;
  padding: 0
}

#_home #top-gallery .gallery-list-item {
  margin: 0;
  width: 300px
}

@media all and (max-width:330px) {
  #_home #top-gallery .gallery-list-item {
    width: 100%
  }
}

#_home #top-gallery .gallery-list-item .img:before {
  content: '';
  display: block;
  padding-top: 66.6666%
}

@media all and (min-width:500px) and (max-width:768px) {
  #_home #top-gallery .gallery-list-item .img:before {
    padding-top: 57.8034%
  }
}

#_home #top-about {
  position: relative
}

@media all and (min-width:769px) {
  #_home #top-about {
    margin: 0 auto;
    padding: 0 70px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_home #top-about {
    padding: 0 50px
  }
}

@media all and (max-width:499px) {
  #_home #top-about {
    padding: 0 15px
  }
}

#_home #top-about .about-header-inner {
  max-width: 960px;
  margin: 0 auto
}

@media all and (min-width:500px) and (max-width:1024px) {
  #_home #top-about .about-header-inner {
    padding: 0 30px
  }
}

@media all and (min-width:1025px) {
  #_home #top-about .about-header-inner {
    padding: 0 90px
  }
}

@media all and (max-width:499px) {
  #_home #top-about .about-header-inner {
    padding: 0 15px
  }
}

#_home #top-about .about-header-inner h3 {
  padding-top: 93px;
  padding-bottom: 90px
}

@media all and (max-width:499px) {
  #_home #top-about .about-header-inner h3 {
    padding-top: 44px;
    padding-bottom: 42px
  }
}

#_home #top-about .btn_see {
  position: absolute;
  top: 88px;
  width: 320px
}

@media all and (min-width:500px) and (max-width:768px) {
  #_home #top-about .btn_see {
    top: 86px;
    width: 183px
  }
}

@media all and (max-width:499px) {
  #_home #top-about .btn_see {
    top: 50px;
    width: 108px
  }
}

@media all and (min-width:1280px) {
  #_home #top-about .btn_see {
    width: calc(320px + (100% - 1280px)/ 2);
    right: 0
  }
}

#_home #top-about .btn_see a {
  color: #fff;
  background-color: #000
}

#_home #top-about .btn_see a.hover {
  color: #e60012;
  background-color: #fff
}

@media all and (max-width:499px) {
  #_home #top-about .btn_see.fr {
    right: 20px
  }
}

#_home #top-about .things-item {
  display: none;
  position: relative;
  max-width: 1140px;
  margin: 0 auto 100px;
  border-radius: 5px
}

#_home #top-about .things-item .col-r {
  background-color: #efece8;
  -webkit-transition: background-color .3s ease-out;
  transition: background-color .3s ease-out
}

#_home #top-about .things-item.hover {
  color: #000
}

#_home #top-about .things-item.hover .col-r {
  background-color: #fff;
  -webkit-transition: background-color 0s ease-out;
  transition: background-color 0s ease-out
}

@media all and (max-width:499px) {
  #_home #top-about .things-item {
    margin: 0 auto 50px
  }
}

#_home #top-about .things-item.isShow {
  display: block
}

#_home #top-about.sec-brands-things {
  max-width: none
}

#top-harmonies {
  position: relative
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-harmonies {
    margin-bottom: 80px
  }
}

@media all and (max-width:499px) {
  #top-harmonies {
    margin-bottom: 50px
  }
}

@media all and (max-width:499px) {
  #top-harmonies .harmonies_swiper-pagination.isHide {
    display: none
  }
}

@media all and (min-width:769px) {
  #top-harmonies .harmonies_swiper.fr .keyvisual {
    height: 650px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-harmonies .harmonies_swiper.fr .keyvisual {
    padding-top: 228px
  }
}

@media all and (max-width:499px) {
  #top-harmonies .harmonies_swiper.fr .keyvisual {
    padding-top: 177px
  }
}

@media all and (min-width:1025px) {
  #top-harmonies .harmonies_swiper.fr .keyvisual {
    height: auto;
    padding-bottom: 63.47656%
  }
}

@media all and (min-width:769px) {
  #top-harmonies .harmonies_swiper.fr .textSet {
    position: absolute;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-harmonies .harmonies_swiper.fr .textSet {
    opacity: 0
  }
}

@media all and (max-width:499px) {
  #top-harmonies .harmonies_swiper.fr .textSet {
    opacity: 0
  }
}

@media all and (max-width:768px) {
  #top-harmonies .harmonies_swiper.fr .harmonies-item.crabs h2:before, #top-harmonies .harmonies_swiper.fr .harmonies-item.lobsters h2:before, #top-harmonies .harmonies_swiper.fr .harmonies-item.mussels h2:before, #top-harmonies .harmonies_swiper.fr .harmonies-item.oysters h2:before, #top-harmonies .harmonies_swiper.fr .harmonies-item.salmons h2:before, #top-harmonies .harmonies_swiper.fr .harmonies-item.shrimps h2:before {
    display: inline-block;
    content: '\A'
  }
}

@media all and (max-width:499px) {
  #top-harmonies .harmonies_swiper.fr .harmonies-item.scallops .shrink {
    display: inline-block;
    white-space: nowrap;
    letter-spacing: -.11rem
  }
}

#top-harmonies .harmonies_swiper.fr .harmonies-item .title .wlight {
  display: block
}

@media all and (min-width:769px) {
  #top-harmonies .harmonies_swiper.fr .harmonies-item .title h2 {
    margin-top: 0;
    padding-top: 0
  }
  #top-harmonies .harmonies_swiper.fr .harmonies-item .title .bold {
    display: block;
    margin-bottom: 18px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-harmonies .harmonies_swiper.fr .harmonies-item .title h2 {
    color: #fff
  }
  #top-harmonies .harmonies_swiper.fr .harmonies-item .title .bold {
    display: block;
    color: #000;
    margin-bottom: 18px
  }
}

@media all and (max-width:499px) {
  #top-harmonies .harmonies_swiper.fr .harmonies-item .title h2 {
    color: #fff
  }
  #top-harmonies .harmonies_swiper.fr .harmonies-item .title .bold {
    display: block;
    color: #000;
    margin-bottom: 18px
  }
}

@media all and (min-width:769px) {
  #top-harmonies .harmonies_swiper.fr .harmonies-item .btn_see {
    margin-bottom: 0
  }
}

@media all and (min-width:769px) {
  #top-harmonies .harmonies_swiper .keyvisual {
    height: 650px
  }
}

@media all and (min-width:1025px) {
  #top-harmonies .harmonies_swiper .keyvisual {
    height: auto;
    padding-bottom: 63.47656%
  }
}

@media all and (min-width:769px) {
  #top-harmonies .harmonies_swiper .textSet {
    position: absolute;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
  }
}

#top-harmonies .harmonies_swiper .harmonies-item .title .wlight {
  display: block
}

@media all and (min-width:769px) {
  #top-harmonies .harmonies_swiper .harmonies-item .btn_see {
    margin-bottom: 0
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-harmonies .keyvisual.swiper-slide-active .textSet {
    opacity: 1
  }
}

@media all and (max-width:499px) {
  #top-harmonies .keyvisual.swiper-slide-active .textSet {
    opacity: 1
  }
}

#top-harmonies .keyvisual {
  position: relative
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-harmonies .keyvisual {
    padding-top: 260px
  }
}

@media all and (max-width:499px) {
  #top-harmonies .keyvisual {
    padding-top: 204px
  }
}

#top-harmonies .keyvisual .img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover
}

@media all and (max-width:768px) {
  #top-harmonies .keyvisual .img {
    background-position: right center
  }
}

@media all and (min-width:769px) {
  #top-harmonies .keyvisual .img {
    background-position: center center
  }
}

@media all and (max-width:768px) {
  #top-harmonies .keyvisual .img {
    position: relative
  }
}

#top-harmonies .keyvisual .img.crabs {
  background-image: url(/asset/img/kv_crabs.jpg)
}

#top-harmonies .keyvisual .img.lobsters {
  background-image: url(/asset/img/kv_lobsters.jpg)
}

#top-harmonies .keyvisual .img.mussels {
  background-image: url(/asset/img/kv_mussels.jpg)
}

#top-harmonies .keyvisual .img.oysters {
  background-image: url(/asset/img/kv_oysters.jpg)
}

#top-harmonies .keyvisual .img.salmons {
  background-image: url(/asset/img/kv_salmons.jpg)
}

#top-harmonies .keyvisual .img.scallops {
  background-image: url(/asset/img/kv_scallops.jpg)
}

#top-harmonies .keyvisual .img.shrimps {
  background-image: url(/asset/img/kv_shrimps.jpg)
}

#top-harmonies .keyvisual .img.fr.crabs {
  background-image: url(/asset/img/kv_crabs_fr.jpg)
}

#top-harmonies .keyvisual .img.fr.lobsters {
  background-image: url(/asset/img/kv_lobsters_fr.jpg)
}

#top-harmonies .keyvisual .img.fr.mussels {
  background-image: url(/asset/img/kv_mussels_fr.jpg)
}

#top-harmonies .keyvisual .img.fr.oysters {
  background-image: url(/asset/img/kv_oysters_fr.jpg)
}

#top-harmonies .keyvisual .img.fr.salmons {
  background-image: url(/asset/img/kv_salmons_fr.jpg)
}

#top-harmonies .keyvisual .img.fr.scallops {
  background-image: url(/asset/img/kv_scallops_fr.jpg)
}

#top-harmonies .keyvisual .img.fr.shrimps {
  background-image: url(/asset/img/kv_shrimps_fr.jpg)
}

#top-harmonies .keyvisual .img:before {
  content: '';
  display: block;
  padding-top: 62.5%
}

@media all and (max-width:768px) {
  #top-harmonies .keyvisual .img:before {
    padding-top: 100%
  }
}

@media all and (max-width:768px) {
  #top-harmonies .keyvisual:nth-child(n+2) .harmonies-item .title h2 .sptab {
    color: transparent
  }
}

@media all and (min-width:769px) {
  #top-harmonies .harmonies-item {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 70px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-harmonies .harmonies-item {
    position: absolute;
    top: 0;
    padding: 0 50px;
    height: 100%
  }
}

@media all and (max-width:499px) {
  #top-harmonies .harmonies-item {
    position: absolute;
    top: 0;
    padding: 0 30px;
    height: 100%
  }
}

#top-harmonies .harmonies-item .title {
  position: relative;
  top: 0;
  z-index: 1
}

#top-harmonies .harmonies-item .title h2 {
  color: #fff
}

@media all and (min-width:500px) and (max-width:1024px) {
  #top-harmonies .harmonies-item .title h2 {
    margin-left: 30px
  }
}

@media all and (min-width:1025px) {
  #top-harmonies .harmonies-item .title h2 {
    margin-left: 90px
  }
}

@media all and (min-width:769px) {
  #top-harmonies .harmonies-item .title .font {
    padding-top: 0;
    line-height: 116%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-harmonies .harmonies-item .title h2 {
    padding-top: 74px
  }
  #top-harmonies .harmonies-item .title h2 .sptab {
    color: #000
  }
}

@media all and (max-width:499px) {
  #top-harmonies .harmonies-item .title h2 {
    padding-top: 44px
  }
  #top-harmonies .harmonies-item .title h2 .sptab {
    color: #000
  }
}

@media all and (min-width:500px) and (max-width:1024px) {
  #top-harmonies .harmonies-item .btn_see {
    margin-left: 30px
  }
}

@media all and (min-width:1025px) {
  #top-harmonies .harmonies-item .btn_see {
    margin-left: 90px
  }
}

@media all and (min-width:769px) {
  #top-harmonies .harmonies-item .btn_see {
    position: relative;
    top: 0;
    width: auto;
    margin-bottom: 166px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-harmonies .harmonies-item .btn_see {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 80px
  }
}

@media all and (max-width:499px) {
  #top-harmonies .harmonies-item .btn_see {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 30px
  }
}

#top-harmonies .harmonies-item .btn_see a {
  width: auto;
  padding: 16px 20px 16px
}

#top-harmonies .harmonies-item .btn_see a.hover {
  color: #e60012;
  background-color: #000
}

#top-harmonies .harmonies_swiper-pagination {
  display: none;
  position: absolute;
  z-index: 10;
  width: auto;
  max-width: 1140px;
  margin: auto;
  text-align: right
}

#top-harmonies .harmonies_swiper-pagination .swiper-pagination-bullet {
  outline: 0;
  opacity: 1;
  margin: 0 5px
}

#top-harmonies .harmonies_swiper-pagination .swiper-pagination-bullet-active {
  opacity: .1;
  background-color: #000
}

@media all and (max-width:768px) {
  #top-harmonies .harmonies_swiper-pagination {
    display: block;
    text-align: left
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-harmonies .harmonies_swiper-pagination {
    top: 84px;
    right: 65px
  }
}

@media all and (max-width:499px) {
  #top-harmonies .harmonies_swiper-pagination {
    top: 52px;
    right: 25px
  }
}

#top-harmonies .harmonies_swiper.thumbnail {
  margin-left: 10px;
  padding: 10px 0 10px 0;
  height: 150px
}

@media all and (max-width:768px) {
  #top-harmonies .harmonies_swiper.thumbnail {
    display: none
  }
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-container {
  overflow: unset
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img {
  -webkit-filter: grayscale(0) brightness(100%);
  filter: grayscale(0) brightness(100%)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  width: 220px;
  height: 130px;
  margin: 10px;
  -webkit-filter: grayscale(100%) brightness(150%);
  filter: grayscale(100%) brightness(150%);
  background-size: 240px auto;
  background-position: -10px -10px;
  background-repeat: no-repeat
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.oysters:before {
  background-image: url(/asset/img/kv_thumbnail_oysters.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.lobsters:before {
  background-image: url(/asset/img/kv_thumbnail_lobsters.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.crabs:before {
  background-image: url(/asset/img/kv_thumbnail_crabs.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.shrimps:before {
  background-image: url(/asset/img/kv_thumbnail_shrimps.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.salmons:before {
  background-image: url(/asset/img/kv_thumbnail_salmons.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.mussels:before {
  background-image: url(/asset/img/kv_thumbnail_mussels.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.scallops:before {
  background-image: url(/asset/img/kv_thumbnail_scallops.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  width: 220px;
  height: 130px;
  margin: 10px;
  background-color: #fff;
  opacity: .4
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.fr.crabs:before {
  background-image: url(/asset/img/kv_crabs_fr.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.fr.lobsters:before {
  background-image: url(/asset/img/kv_lobsters_fr.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.fr.mussels:before {
  background-image: url(/asset/img/kv_mussels_fr.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.fr.oysters:before {
  background-image: url(/asset/img/kv_oysters_fr.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.fr.salmons:before {
  background-image: url(/asset/img/kv_salmons_fr.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.fr.scallops:before {
  background-image: url(/asset/img/kv_scallops_fr.jpg)
}

#top-harmonies .harmonies_swiper.thumbnail .swiper-slide-thumb-active .img.fr.shrimps:before {
  background-image: url(/asset/img/kv_shrimps_fr.jpg)
}

#top-harmonies .harmonies-list-item .img {
  -webkit-filter: grayscale(0) brightness(100%);
  filter: grayscale(0) brightness(100%);
  -webkit-transition: -webkit-filter .3s ease-out;
  transition: -webkit-filter .3s ease-out;
  transition: filter .3s ease-out;
  transition: filter .3s ease-out, -webkit-filter .3s ease-out;
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 150px;
  background-size: cover;
  background-repeat: no-repeat
}

#top-harmonies .harmonies-list-item .img.oysters {
  background-image: url(/asset/img/kv_thumbnail_oysters.jpg)
}

#top-harmonies .harmonies-list-item .img.lobsters {
  background-image: url(/asset/img/kv_thumbnail_lobsters.jpg)
}

#top-harmonies .harmonies-list-item .img.crabs {
  background-image: url(/asset/img/kv_thumbnail_crabs.jpg)
}

#top-harmonies .harmonies-list-item .img.shrimps {
  background-image: url(/asset/img/kv_thumbnail_shrimps.jpg)
}

#top-harmonies .harmonies-list-item .img.salmons {
  background-image: url(/asset/img/kv_thumbnail_salmons.jpg)
}

#top-harmonies .harmonies-list-item .img.mussels {
  background-image: url(/asset/img/kv_thumbnail_mussels.jpg)
}

#top-harmonies .harmonies-list-item .img.scallops {
  background-image: url(/asset/img/kv_thumbnail_scallops.jpg)
}

#top-harmonies .harmonies-list-item .img.fr.crabs {
  background-image: url(/asset/img/kv_crabs_fr.jpg)
}

#top-harmonies .harmonies-list-item .img.fr.lobsters {
  background-image: url(/asset/img/kv_lobsters_fr.jpg)
}

#top-harmonies .harmonies-list-item .img.fr.mussels {
  background-image: url(/asset/img/kv_mussels_fr.jpg)
}

#top-harmonies .harmonies-list-item .img.fr.oysters {
  background-image: url(/asset/img/kv_oysters_fr.jpg)
}

#top-harmonies .harmonies-list-item .img.fr.salmons {
  background-image: url(/asset/img/kv_salmons_fr.jpg)
}

#top-harmonies .harmonies-list-item .img.fr.scallops {
  background-image: url(/asset/img/kv_scallops_fr.jpg)
}

#top-harmonies .harmonies-list-item .img.fr.shrimps {
  background-image: url(/asset/img/kv_shrimps_fr.jpg)
}

#top-harmonies .harmonies-list-item.hover {
  cursor: pointer
}

#top-harmonies .harmonies-list-item.hover .img {
  -webkit-filter: grayscale(100%) brightness(150%);
  filter: grayscale(100%) brightness(150%);
  -webkit-transition: -webkit-filter 0s ease-out;
  transition: -webkit-filter 0s ease-out;
  transition: filter 0s ease-out;
  transition: filter 0s ease-out, -webkit-filter 0s ease-out
}

#top-rtb {
  position: relative;
  width: 100%;
  height: 100%
}

#top-rtb .keyvisual {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url(/asset/img/top/top_rtb_kv.jpg) no-repeat;
  background-size: cover;
  background-position: 25% center
}

#top-rtb .btn_see {
  position: absolute
}

@media all and (min-width:769px) {
  #top-rtb .btn_see {
    width: 320px;
    padding-left: 80px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-rtb .btn_see {
    padding-left: 80px
  }
}

@media all and (max-width:499px) {
  #top-rtb .btn_see {
    padding-left: 30px
  }
}

@media all and (max-width:768px) {
  #top-rtb .btn_see {
    position: relative;
    top: 0
  }
}

@media all and (min-width:1280px) {
  #top-rtb .btn_see {
    width: 320px;
    width: calc(320px + (100% - 1280px)/ 2);
    right: 0
  }
}

#top-rtb .btn_see a.hover {
  color: #e60012;
  background-color: #000
}

#top-rtb .title {
  position: relative;
  top: 0;
  z-index: 1
}

@media all and (min-width:769px) {
  #top-rtb .title {
    max-width: 1140px;
    padding: 0 70px;
    margin: 0 auto
  }
  #top-rtb .title .font {
    line-height: 116%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-rtb .title {
    padding: 0 50px
  }
}

@media all and (max-width:499px) {
  #top-rtb .title {
    padding: 0 30px 0 28px
  }
}

#top-rtb .title h2 {
  color: #fff
}

@media all and (min-width:500px) and (max-width:1024px) {
  #top-rtb .title h2 {
    margin-left: 30px
  }
}

@media all and (min-width:1025px) {
  #top-rtb .title h2 {
    margin-left: 90px
  }
}

@media all and (min-width:769px) {
  #top-rtb .title h2 {
    margin-top: 117px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-rtb .title h2 {
    padding-bottom: 60px
  }
}

@media all and (max-width:499px) {
  #top-rtb .title h2 {
    padding-bottom: 41px
  }
}

@media all and (max-width:768px) {
  #top-rtb .title h2 {
    padding-top: 191px;
    line-height: 120%
  }
  #top-rtb .title h2 .font {
    line-height: 120%
  }
}

#top-rtb .produced {
  max-width: 1140px;
  margin: 0 auto;
  padding-top: 46px;
  padding-bottom: 50px;
  font-size: 0
}

@media all and (min-width:769px) {
  #top-rtb .produced {
    margin-top: 65px;
    padding: 0 70px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-rtb .produced {
    padding: 0 50px
  }
}

@media all and (max-width:499px) {
  #top-rtb .produced {
    padding: 0 30px
  }
}

#top-rtb .produced .logotitle {
  color: #fff;
  display: inline-block;
  padding-bottom: 0
}

@media all and (min-width:500px) and (max-width:1024px) {
  #top-rtb .produced .logotitle {
    margin-left: 30px
  }
}

@media all and (min-width:1025px) {
  #top-rtb .produced .logotitle {
    margin-left: 90px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-rtb .produced .logotitle {
    padding-top: 67px
  }
}

#top-rtb .produced .txt {
  line-height: 140%;
  margin-top: 0;
  padding-top: 16px;
  color: #fff
}

@media all and (min-width:500px) and (max-width:1024px) {
  #top-rtb .produced .txt {
    margin: 0 30px
  }
}

@media all and (min-width:1025px) {
  #top-rtb .produced .txt {
    margin: 0 90px
  }
}

@media all and (min-width:769px) {
  #top-rtb .produced .txt {
    padding-bottom: 66px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-rtb .produced .txt {
    padding-bottom: 47px
  }
}

@media all and (max-width:499px) {
  #top-rtb .produced .txt {
    padding-top: 11px;
    padding-bottom: 27px
  }
}

#top-rtb .produced .logo_brandconnect {
  display: inline-block;
  background: url(/asset/img/logo_brandconnect.svg) no-repeat;
  background-size: contain;
  margin-left: 4px;
  margin-bottom: -5px
}

@media all and (max-width:499px) {
  #top-rtb .produced .logo_brandconnect {
    width: 80px;
    height: 15px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #top-rtb .produced .logo_brandconnect {
    width: 89px;
    height: 16px
  }
}

@media all and (min-width:769px) {
  #top-rtb .produced .logo_brandconnect {
    width: 104px;
    height: 19px
  }
}

.brands-filter .font.s_12 {
  padding: 0
}

.brands-filter .chackbox {
  margin-right: 20px;
  cursor: pointer
}

.brands-filter .chackbox.active:after {
  position: absolute;
  top: 1px;
  left: 7px;
  content: '';
  display: block;
  width: 18px;
  height: 14px;
  background: url(/asset/img/icon_check.svg) no-repeat
}

.brands-filter .chackbox:before {
  content: '';
  display: inline-block;
  width: 19px;
  height: 19px;
  border: solid 1px #000;
  opacity: .25;
  margin-right: 10px;
  margin-bottom: -5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.sec-about-header-inner {
  width: auto
}

@media all and (min-width:500px) and (max-width:1024px) {
  .sec-about-header-inner {
    padding: 0 30px
  }
}

@media all and (min-width:1025px) {
  .sec-about-header-inner {
    padding: 0 90px
  }
}

@media all and (min-width:769px) {
  .sec-about-header {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 70px
  }
  .sec-about-header h1 {
    margin-top: 50px;
    margin-bottom: 50px;
    line-height: 115%
  }
  .sec-about-header h1 span {
    margin-top: -50px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-about-header {
    padding: 0 50px
  }
  .sec-about-header h1 {
    margin-top: 30px;
    margin-bottom: 50px;
    line-height: 122%
  }
  .sec-about-header h1 span {
    margin-top: -50px
  }
}

@media all and (max-width:499px) {
  .sec-about-header {
    padding: 0 30px
  }
  .sec-about-header z h1 {
    padding-top: 28px;
    padding-bottom: 46px;
    line-height: 113%
  }
}

.sec-brands-things {
  max-width: 1140px;
  margin: 0 auto
}

.sec-brands-things .things-item {
  overflow: hidden;
  border-radius: 5px
}

@media all and (max-width:768px) {
  .sec-brands-things .things-item {
    border-radius: 0 5px 5px 0;
    margin-top: 100px
  }
}

.sec-brands-things .things-item:nth-child(1) {
  margin: 0
}

.sec-brands-things .things_10 {
  vertical-align: middle
}

.sec-brands-things .things_10 .matrix {
  position: relative;
  height: auto;
  background-color: transparent
}

@media all and (max-width:499px) {
  .sec-brands-things .things_10 .matrix {
    width: calc(100% - 14px - 14px);
    padding: 14px
  }
}

@media all and (min-width:500px) {
  .sec-brands-things .things_10 .matrix {
    width: calc(100% - 50px - 50px);
    padding: 50px
  }
}

.sec-brands-things .things_10 .matrix .four {
  width: 100%
}

@media all and (max-width:499px) {
  .sec-brands-things .things_10 .matrix .four {
    height: 241px
  }
}

@media all and (min-width:500px) {
  .sec-brands-things .things_10 .matrix .four {
    height: 409px
  }
}

.sec-brands-things .things_10 .matrix .one {
  width: 100%;
  margin-top: 20px;
  margin-left: 0
}

@media all and (max-width:499px) {
  .sec-brands-things .things_10 .matrix .one {
    margin-top: 14px;
    height: 108px
  }
}

@media all and (min-width:500px) {
  .sec-brands-things .things_10 .matrix .one {
    height: 204px
  }
}

.sec-brands-things .col-l {
  background-color: #fff;
  background-repeat: no-repeat
}

@media all and (max-width:768px) {
  .sec-brands-things .col-l {
    display: block;
    width: 100%
  }
}

@media all and (min-width:769px) {
  .sec-brands-things .col-l {
    display: table-cell;
    width: 50%;
    height: 100%
  }
}

.sec-brands-things .col-l.things_1, .sec-brands-things .col-l.things_4, .sec-brands-things .col-l.things_5 {
  background-size: cover
}

.sec-brands-things .col-l.things_2, .sec-brands-things .col-l.things_3, .sec-brands-things .col-l.things_6, .sec-brands-things .col-l.things_7, .sec-brands-things .col-l.things_8, .sec-brands-things .col-l.things_9 {
  background-size: contain
}

.sec-brands-things .col-l.things_1 {
  background-image: url(/asset/img/about/things_01.jpg);
  background-position: right top
}

@media all and (max-width:499px) {
  .sec-brands-things .col-l.things_1 {
    padding-bottom: 100%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-brands-things .col-l.things_1 {
    padding-bottom: 66.66666%
  }
}

.sec-brands-things .col-l.things_2 {
  background-image: url(/asset/img/about/things_02.jpg);
  background-position: center center
}

@media all and (max-width:499px) {
  .sec-brands-things .col-l.things_2 {
    padding-bottom: 105.85714%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-brands-things .col-l.things_2 {
    padding-bottom: 70.57143%
  }
}

.sec-brands-things .col-l.things_3 {
  background-image: url(/asset/img/about/things_03.jpg);
  background-position: center center
}

@media all and (max-width:499px) {
  .sec-brands-things .col-l.things_3 {
    padding-bottom: 94.57142%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-brands-things .col-l.things_3 {
    padding-bottom: 63.04761%
  }
}

.sec-brands-things .col-l.things_4 {
  background-image: url(/asset/img/about/things_04.jpg);
  background-position: center center
}

@media all and (max-width:499px) {
  .sec-brands-things .col-l.things_4 {
    padding-bottom: 100%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-brands-things .col-l.things_4 {
    padding-bottom: 66.66666%
  }
}

.sec-brands-things .col-l.things_5 {
  background-image: url(/asset/img/about/things_05.jpg);
  background-position: center center
}

@media all and (max-width:499px) {
  .sec-brands-things .col-l.things_5 {
    padding-bottom: 100%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-brands-things .col-l.things_5 {
    padding-bottom: 66.66666%
  }
}

.sec-brands-things .col-l.things_6 {
  background-image: url(/asset/img/about/things_06.jpg);
  background-position: center center
}

@media all and (max-width:499px) {
  .sec-brands-things .col-l.things_6 {
    padding-bottom: 101.28571%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-brands-things .col-l.things_6 {
    padding-bottom: 67.52381%
  }
}

.sec-brands-things .col-l.things_7 {
  background-image: url(/asset/img/about/things_07.jpg);
  background-position: center center
}

@media all and (max-width:499px) {
  .sec-brands-things .col-l.things_7 {
    padding-bottom: 113.2%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-brands-things .col-l.things_7 {
    padding-bottom: 75.46667%
  }
}

.sec-brands-things .col-l.things_8 {
  background-image: url(/asset/img/about/things_08.jpg)
}

@media all and (max-width:499px) {
  .sec-brands-things .col-l.things_8 {
    padding-bottom: 96.57142%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-brands-things .col-l.things_8 {
    padding-bottom: 64.38095%
  }
}

@media all and (max-width:1200px) {
  .sec-brands-things .col-l.things_8 {
    background-position: center center
  }
}

@media all and (min-width:1201px) {
  .sec-brands-things .col-l.things_8 {
    background-position: center top
  }
}

.sec-brands-things .col-l.things_9 {
  background-image: url(/asset/img/about/things_09.jpg);
  background-position: center center
}

@media all and (max-width:499px) {
  .sec-brands-things .col-l.things_9 {
    padding-bottom: 84.42857%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-brands-things .col-l.things_9 {
    padding-bottom: 56.28571%
  }
}

.sec-brands-things .col-r {
  display: table-cell;
  vertical-align: top;
  background-color: #efece8;
  min-height: 530px
}

@media all and (min-width:769px) {
  .sec-brands-things .col-r {
    width: calc(50% - 140px);
    padding: 0 30px 20px 70px
  }
  .sec-brands-things .col-r .txt, .sec-brands-things .col-r h3 {
    padding-right: 40px
  }
  .sec-brands-things .col-r .txt {
    margin-top: -50px;
    line-height: 171.4%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-brands-things .col-r {
    padding: 0 30px 0 50px
  }
  .sec-brands-things .col-r h3 {
    padding-top: 33px;
    padding-bottom: 32px;
    margin-right: 20px
  }
  .sec-brands-things .col-r .txt {
    margin-top: -50px;
    margin-right: 20px;
    line-height: 192%
  }
}

@media all and (max-width:499px) {
  .sec-brands-things .col-r {
    padding: 0 30px 0 30px
  }
  .sec-brands-things .col-r h3 {
    padding-top: 23px;
    padding-bottom: 22px
  }
  .sec-brands-things .col-r .txt {
    margin-top: -50px;
    line-height: 192%;
    padding-bottom: 25px
  }
}

.sec-brands-things .col-r-head {
  text-align: right
}

.sec-brands-things .col-r .shoulder {
  line-height: 166%;
  text-align: left;
  margin-bottom: -45px
}

@media all and (max-width:499px) {
  .sec-brands-things .col-r .shoulder {
    padding-top: 26px
  }
}

.sec-brands-things .col-r .num {
  display: block;
  margin-top: -33px;
  margin-bottom: -44px;
  margin-left: -24px
}

@media all and (max-width:499px) {
  .sec-brands-things .col-r .num {
    margin-top: -43px
  }
}

.sec-brands-things .col-r .num span {
  font-size: 14px;
  font-weight: 700
}

.sec-brands-things .col-r .num .separate {
  position: relative;
  top: 4px;
  margin-right: 5px;
  margin-left: 7px
}

.sec-brands-things .col-r .num .total {
  position: relative;
  top: 12px
}

@media all and (min-width:769px) {
  .sec-brands-things {
    padding: 0 70px
  }
  .sec-brands-things .things-item {
    margin: 40px 0 0
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-brands-things {
    padding: 0 50px 0 0
  }
}

@media all and (max-width:499px) {
  .sec-brands-things {
    padding: 0 30px 0 0
  }
}

#_harmonies .sec-harmonies {
  font-size: 0;
  margin-bottom: 100px
}

#_harmonies .sec-harmonies .keyvisual {
  height: 0;
  margin: 0 auto 0 0;
  background-repeat: no-repeat;
  background-size: cover
}

@media all and (max-width:499px) {
  #_harmonies .sec-harmonies .keyvisual {
    width: calc(100% - 30px);
    padding-bottom: calc(100% - 30px)
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .sec-harmonies .keyvisual {
    width: calc(100% - 50px);
    padding-bottom: calc(100% - 50px)
  }
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies .keyvisual {
    width: calc(100% - 70px);
    padding-bottom: 60%
  }
}

@media all and (max-width:499px) {
  #_harmonies .sec-harmonies .keyvisual {
    background-position: left center
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .sec-harmonies .keyvisual {
    background-position: left center
  }
}

@media all and (max-width:768px) {
  #_harmonies .sec-harmonies .keyvisual {
    background-position: right center
  }
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies .keyvisual {
    background-position: center center
  }
}

#_harmonies .sec-harmonies .keyvisual.fr.crabs {
  background-image: url(/asset/img/kv_crabs_fr.jpg)
}

#_harmonies .sec-harmonies .keyvisual.fr.lobsters {
  background-image: url(/asset/img/kv_lobsters_fr.jpg)
}

#_harmonies .sec-harmonies .keyvisual.fr.mussels {
  background-image: url(/asset/img/kv_mussels_fr.jpg)
}

#_harmonies .sec-harmonies .keyvisual.fr.oysters {
  background-image: url(/asset/img/kv_oysters_fr.jpg)
}

#_harmonies .sec-harmonies .keyvisual.fr.salmons {
  background-image: url(/asset/img/kv_salmons_fr.jpg)
}

#_harmonies .sec-harmonies .keyvisual.fr.scallops {
  background-image: url(/asset/img/kv_scallops_fr.jpg)
}

#_harmonies .sec-harmonies .keyvisual.fr.shrimps {
  background-image: url(/asset/img/kv_shrimps_fr.jpg)
}

#_harmonies .sec-harmonies .keyvisual.crabs {
  background-image: url(/asset/img/kv_crabs.jpg)
}

#_harmonies .sec-harmonies .keyvisual.lobsters {
  background-image: url(/asset/img/kv_lobsters.jpg)
}

#_harmonies .sec-harmonies .keyvisual.mussels {
  background-image: url(/asset/img/kv_mussels.jpg)
}

#_harmonies .sec-harmonies .keyvisual.oysters {
  background-image: url(/asset/img/kv_oysters.jpg)
}

#_harmonies .sec-harmonies .keyvisual.salmons {
  background-image: url(/asset/img/kv_salmons.jpg)
}

#_harmonies .sec-harmonies .keyvisual.scallops {
  background-image: url(/asset/img/kv_scallops.jpg)
}

#_harmonies .sec-harmonies .keyvisual.shrimps {
  background-image: url(/asset/img/kv_shrimps.jpg)
}

#_harmonies .sec-harmonies .note {
  background-color: #000;
  color: #fff;
  width: calc(100% - 70px);
  padding-top: 93px;
  padding-bottom: 90px
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .sec-harmonies .note {
    width: calc(100% - 50px)
  }
}

@media all and (max-width:768px) {
  #_harmonies .sec-harmonies .note {
    border-top: 1px solid rgba(255, 255, 255, .1)
  }
}

@media all and (max-width:499px) {
  #_harmonies .sec-harmonies .note {
    padding-top: 43px;
    padding-bottom: 40px;
    width: calc(100% - 30px)
  }
}

#_harmonies .sec-harmonies .note>span {
  display: block;
  width: calc(50% - 90px);
  margin: 0 0 0 auto;
  padding-right: 90px
}

@media all and (max-width:768px) {
  #_harmonies .sec-harmonies .note>span {
    width: calc(100% - 25px - 30px);
    padding: 0 30px
  }
}

#_harmonies .sec-harmonies .sake {
  display: inline-block;
  height: 0;
  margin-right: 2px;
  overflow: hidden
}

@media all and (max-width:499px) {
  #_harmonies .sec-harmonies .sake {
    width: calc(100% - 30px);
    padding-bottom: calc(100% - 30px)
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .sec-harmonies .sake {
    width: calc(100% - 50px);
    padding-bottom: calc(100% - 50px);
    margin-right: 0
  }
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies .sake {
    width: calc(50% - 1px - 70px / 2);
    padding-bottom: calc(50% - 1px - 70px / 2)
  }
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies .sake {
    margin-top: 2px
  }
}

#_harmonies .sec-harmonies .sake::before {
  content: '';
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background-repeat: no-repeat;
  background-size: cover
}

@media all and (max-width:768px) {
  #_harmonies .sec-harmonies .sake::before {
    -webkit-transform: scale3d(-1, 1, 1);
    transform: scale3d(-1, 1, 1)
  }
}

#_harmonies .sec-harmonies .sake.a::before {
  background-image: url(/asset/img/sake_pour_a.jpg)
}

#_harmonies .sec-harmonies .sake.b::before {
  background-image: url(/asset/img/sake_pour_b.jpg)
}

#_harmonies .sec-harmonies .sake.c::before {
  background-image: url(/asset/img/sake_pour_c.jpg)
}

#_harmonies .sec-harmonies .sake.d::before {
  background-image: url(/asset/img/sake_pour_d.jpg)
}

#_harmonies .sec-harmonies .sizzle {
  display: inline-block;
  height: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center
}

@media all and (max-width:499px) {
  #_harmonies .sec-harmonies .sizzle {
    width: calc(100% - 30px);
    padding-bottom: calc(100% - 30px)
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .sec-harmonies .sizzle {
    width: calc(100% - 50px);
    padding-bottom: calc(100% - 50px)
  }
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies .sizzle {
    width: calc(50% - 1px - 70px / 2);
    padding-bottom: calc(50% - 1px - 70px / 2);
    margin-top: 2px
  }
}

#_harmonies .sec-harmonies .sizzle.oysters {
  background-image: url(/asset/img/sizzle_oysters.jpg)
}

#_harmonies .sec-harmonies .sizzle.lobsters {
  background-image: url(/asset/img/sizzle_lobsters.jpg)
}

#_harmonies .sec-harmonies .sizzle.crabs {
  background-image: url(/asset/img/sizzle_crabs.jpg)
}

#_harmonies .sec-harmonies .sizzle.shrimps {
  background-image: url(/asset/img/sizzle_shrimps.jpg)
}

#_harmonies .sec-harmonies .sizzle.salmons {
  background-image: url(/asset/img/sizzle_salmons.jpg)
}

#_harmonies .sec-harmonies .sizzle.mussels {
  background-image: url(/asset/img/sizzle_mussels.jpg)
}

#_harmonies .sec-harmonies .sizzle.scallops {
  background-image: url(/asset/img/sizzle_scallops.jpg)
}

#_harmonies .sec-harmonies-crabs, #_harmonies .sec-harmonies-lobsters, #_harmonies .sec-harmonies-mussels, #_harmonies .sec-harmonies-oysters, #_harmonies .sec-harmonies-salmons, #_harmonies .sec-harmonies-scallops, #_harmonies .sec-harmonies-shrimps {
  position: relative
}

#_harmonies .sec-harmonies-crabs .title, #_harmonies .sec-harmonies-lobsters .title, #_harmonies .sec-harmonies-mussels .title, #_harmonies .sec-harmonies-oysters .title, #_harmonies .sec-harmonies-salmons .title, #_harmonies .sec-harmonies-scallops .title, #_harmonies .sec-harmonies-shrimps .title {
  position: absolute;
  z-index: -1;
  top: 0;
  margin-left: 100px;
  -webkit-transition: -webkit-transform 0s linear;
  transition: -webkit-transform 0s linear;
  transition: transform 0s linear;
  transition: transform 0s linear, -webkit-transform 0s linear
}

#_harmonies .sec-harmonies-crabs .title.areaTop, #_harmonies .sec-harmonies-lobsters .title.areaTop, #_harmonies .sec-harmonies-mussels .title.areaTop, #_harmonies .sec-harmonies-oysters .title.areaTop, #_harmonies .sec-harmonies-salmons .title.areaTop, #_harmonies .sec-harmonies-scallops .title.areaTop, #_harmonies .sec-harmonies-shrimps .title.areaTop {
  position: absolute;
  top: 0
}

#_harmonies .sec-harmonies-crabs .title.areaFixed, #_harmonies .sec-harmonies-lobsters .title.areaFixed, #_harmonies .sec-harmonies-mussels .title.areaFixed, #_harmonies .sec-harmonies-oysters .title.areaFixed, #_harmonies .sec-harmonies-salmons .title.areaFixed, #_harmonies .sec-harmonies-scallops .title.areaFixed, #_harmonies .sec-harmonies-shrimps .title.areaFixed {
  position: fixed;
  top: 0
}

#_harmonies .sec-harmonies-crabs .title.areaBottom, #_harmonies .sec-harmonies-lobsters .title.areaBottom, #_harmonies .sec-harmonies-mussels .title.areaBottom, #_harmonies .sec-harmonies-oysters .title.areaBottom, #_harmonies .sec-harmonies-salmons .title.areaBottom, #_harmonies .sec-harmonies-scallops .title.areaBottom, #_harmonies .sec-harmonies-shrimps .title.areaBottom {
  position: absolute;
  top: auto;
  bottom: 0
}

#_harmonies .sec-harmonies-crabs .sake, #_harmonies .sec-harmonies-crabs .sizzle, #_harmonies .sec-harmonies-lobsters .sake, #_harmonies .sec-harmonies-lobsters .sizzle, #_harmonies .sec-harmonies-mussels .sake, #_harmonies .sec-harmonies-mussels .sizzle, #_harmonies .sec-harmonies-oysters .sake, #_harmonies .sec-harmonies-oysters .sizzle, #_harmonies .sec-harmonies-salmons .sake, #_harmonies .sec-harmonies-salmons .sizzle, #_harmonies .sec-harmonies-scallops .sake, #_harmonies .sec-harmonies-scallops .sizzle, #_harmonies .sec-harmonies-shrimps .sake, #_harmonies .sec-harmonies-shrimps .sizzle {
  position: relative;
  vertical-align: top
}

#_harmonies .sec-harmonies-crabs .sake span, #_harmonies .sec-harmonies-crabs .sizzle span, #_harmonies .sec-harmonies-lobsters .sake span, #_harmonies .sec-harmonies-lobsters .sizzle span, #_harmonies .sec-harmonies-mussels .sake span, #_harmonies .sec-harmonies-mussels .sizzle span, #_harmonies .sec-harmonies-oysters .sake span, #_harmonies .sec-harmonies-oysters .sizzle span, #_harmonies .sec-harmonies-salmons .sake span, #_harmonies .sec-harmonies-salmons .sizzle span, #_harmonies .sec-harmonies-scallops .sake span, #_harmonies .sec-harmonies-scallops .sizzle span, #_harmonies .sec-harmonies-shrimps .sake span, #_harmonies .sec-harmonies-shrimps .sizzle span {
  position: absolute;
  color: #fff;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  top: 0;
  left: 30px;
  width: calc(100% - 20px);
  text-align: right;
  padding-top: 0;
  padding-bottom: 0
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .sec-harmonies-crabs .sake span, #_harmonies .sec-harmonies-crabs .sizzle span, #_harmonies .sec-harmonies-lobsters .sake span, #_harmonies .sec-harmonies-lobsters .sizzle span, #_harmonies .sec-harmonies-mussels .sake span, #_harmonies .sec-harmonies-mussels .sizzle span, #_harmonies .sec-harmonies-oysters .sake span, #_harmonies .sec-harmonies-oysters .sizzle span, #_harmonies .sec-harmonies-salmons .sake span, #_harmonies .sec-harmonies-salmons .sizzle span, #_harmonies .sec-harmonies-scallops .sake span, #_harmonies .sec-harmonies-scallops .sizzle span, #_harmonies .sec-harmonies-shrimps .sake span, #_harmonies .sec-harmonies-shrimps .sizzle span {
    right: 50px;
    left: calc(100% - 46px);
    width: calc(100% - 50px)
  }
}

@media all and (max-width:499px) {
  #_harmonies .sec-harmonies-crabs .sake span, #_harmonies .sec-harmonies-crabs .sizzle span, #_harmonies .sec-harmonies-lobsters .sake span, #_harmonies .sec-harmonies-lobsters .sizzle span, #_harmonies .sec-harmonies-mussels .sake span, #_harmonies .sec-harmonies-mussels .sizzle span, #_harmonies .sec-harmonies-oysters .sake span, #_harmonies .sec-harmonies-oysters .sizzle span, #_harmonies .sec-harmonies-salmons .sake span, #_harmonies .sec-harmonies-salmons .sizzle span, #_harmonies .sec-harmonies-scallops .sake span, #_harmonies .sec-harmonies-scallops .sizzle span, #_harmonies .sec-harmonies-shrimps .sake span, #_harmonies .sec-harmonies-shrimps .sizzle span {
    right: 50px;
    left: calc(100% - 16px);
    width: calc(100% - 20px)
  }
}

@media all and (min-width:500px) and (max-width:1024px) {
  #_harmonies .sec-harmonies-crabs .title, #_harmonies .sec-harmonies-lobsters .title, #_harmonies .sec-harmonies-mussels .title, #_harmonies .sec-harmonies-oysters .title, #_harmonies .sec-harmonies-salmons .title, #_harmonies .sec-harmonies-scallops .title, #_harmonies .sec-harmonies-shrimps .title {
    margin-left: 80px
  }
}

@media all and (min-width:1025px) {
  #_harmonies .sec-harmonies-crabs .title, #_harmonies .sec-harmonies-lobsters .title, #_harmonies .sec-harmonies-mussels .title, #_harmonies .sec-harmonies-oysters .title, #_harmonies .sec-harmonies-salmons .title, #_harmonies .sec-harmonies-scallops .title, #_harmonies .sec-harmonies-shrimps .title {
    margin-left: 160px
  }
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies-crabs, #_harmonies .sec-harmonies-lobsters, #_harmonies .sec-harmonies-mussels, #_harmonies .sec-harmonies-oysters, #_harmonies .sec-harmonies-salmons, #_harmonies .sec-harmonies-scallops, #_harmonies .sec-harmonies-shrimps {
    position: relative
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .sec-harmonies-crabs .title, #_harmonies .sec-harmonies-lobsters .title, #_harmonies .sec-harmonies-mussels .title, #_harmonies .sec-harmonies-oysters .title, #_harmonies .sec-harmonies-salmons .title, #_harmonies .sec-harmonies-scallops .title, #_harmonies .sec-harmonies-shrimps .title {
    margin-top: -277px
  }
}

@media all and (max-width:499px) {
  #_harmonies .sec-harmonies-crabs .title, #_harmonies .sec-harmonies-lobsters .title, #_harmonies .sec-harmonies-mussels .title, #_harmonies .sec-harmonies-oysters .title, #_harmonies .sec-harmonies-salmons .title, #_harmonies .sec-harmonies-scallops .title, #_harmonies .sec-harmonies-shrimps .title {
    margin-top: -232px;
    margin-left: 30px
  }
}

@media all and (max-width:768px) {
  #_harmonies .sec-harmonies-crabs, #_harmonies .sec-harmonies-lobsters, #_harmonies .sec-harmonies-mussels, #_harmonies .sec-harmonies-oysters, #_harmonies .sec-harmonies-salmons, #_harmonies .sec-harmonies-scallops, #_harmonies .sec-harmonies-shrimps {
    margin-top: 100px
  }
  #_harmonies .sec-harmonies-crabs .title, #_harmonies .sec-harmonies-lobsters .title, #_harmonies .sec-harmonies-mussels .title, #_harmonies .sec-harmonies-oysters .title, #_harmonies .sec-harmonies-salmons .title, #_harmonies .sec-harmonies-scallops .title, #_harmonies .sec-harmonies-shrimps .title {
    color: #fff;
    padding-top: 100%
  }
}

#_harmonies .sec-harmonies-oysters .title {
  z-index: 1;
  color: #fff
}

#_harmonies .sec-harmonies-oysters h2 {
  padding-bottom: 83px
}

#_harmonies .sec-harmonies-oysters .keyvisual {
  margin: 0 auto 0 0
}

#_harmonies .sec-harmonies-oysters .sizzle {
  border-radius: 0 0 5px 0
}

@media all and (max-width:768px) {
  #_harmonies .sec-harmonies-oysters {
    margin-top: 0
  }
}

#_harmonies .sec-harmonies-crabs .inner-title, #_harmonies .sec-harmonies-lobsters .inner-title, #_harmonies .sec-harmonies-mussels .inner-title, #_harmonies .sec-harmonies-salmons .inner-title, #_harmonies .sec-harmonies-scallops .inner-title, #_harmonies .sec-harmonies-shrimps .inner-title {
  position: absolute;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  height: 100%
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies-crabs .inner-title, #_harmonies .sec-harmonies-lobsters .inner-title, #_harmonies .sec-harmonies-mussels .inner-title, #_harmonies .sec-harmonies-salmons .inner-title, #_harmonies .sec-harmonies-scallops .inner-title, #_harmonies .sec-harmonies-shrimps .inner-title {
    height: calc(100% - 296px)
  }
}

#_harmonies .sec-harmonies-crabs .inner-title .title, #_harmonies .sec-harmonies-lobsters .inner-title .title, #_harmonies .sec-harmonies-mussels .inner-title .title, #_harmonies .sec-harmonies-salmons .inner-title .title, #_harmonies .sec-harmonies-scallops .inner-title .title, #_harmonies .sec-harmonies-shrimps .inner-title .title {
  position: absolute;
  top: 0;
  color: #fff
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies-crabs .inner-title .title, #_harmonies .sec-harmonies-lobsters .inner-title .title, #_harmonies .sec-harmonies-mussels .inner-title .title, #_harmonies .sec-harmonies-salmons .inner-title .title, #_harmonies .sec-harmonies-scallops .inner-title .title, #_harmonies .sec-harmonies-shrimps .inner-title .title {
    top: -296px
  }
}

#_harmonies .sec-harmonies-crabs .inner-title .title.areaTop, #_harmonies .sec-harmonies-lobsters .inner-title .title.areaTop, #_harmonies .sec-harmonies-mussels .inner-title .title.areaTop, #_harmonies .sec-harmonies-salmons .inner-title .title.areaTop, #_harmonies .sec-harmonies-scallops .inner-title .title.areaTop, #_harmonies .sec-harmonies-shrimps .inner-title .title.areaTop {
  position: absolute
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies-crabs .inner-title .title.areaTop, #_harmonies .sec-harmonies-lobsters .inner-title .title.areaTop, #_harmonies .sec-harmonies-mussels .inner-title .title.areaTop, #_harmonies .sec-harmonies-salmons .inner-title .title.areaTop, #_harmonies .sec-harmonies-scallops .inner-title .title.areaTop, #_harmonies .sec-harmonies-shrimps .inner-title .title.areaTop {
    top: -296px
  }
}

#_harmonies .sec-harmonies-crabs .inner-title .title.areaFixed, #_harmonies .sec-harmonies-lobsters .inner-title .title.areaFixed, #_harmonies .sec-harmonies-mussels .inner-title .title.areaFixed, #_harmonies .sec-harmonies-salmons .inner-title .title.areaFixed, #_harmonies .sec-harmonies-scallops .inner-title .title.areaFixed, #_harmonies .sec-harmonies-shrimps .inner-title .title.areaFixed {
  position: fixed;
  top: 0
}

#_harmonies .sec-harmonies-crabs .inner-title .title.areaBottom, #_harmonies .sec-harmonies-lobsters .inner-title .title.areaBottom, #_harmonies .sec-harmonies-mussels .inner-title .title.areaBottom, #_harmonies .sec-harmonies-salmons .inner-title .title.areaBottom, #_harmonies .sec-harmonies-scallops .inner-title .title.areaBottom, #_harmonies .sec-harmonies-shrimps .inner-title .title.areaBottom {
  position: absolute;
  top: auto;
  bottom: 0
}

#_harmonies .sec-harmonies-crabs .keyvisual, #_harmonies .sec-harmonies-lobsters .keyvisual, #_harmonies .sec-harmonies-mussels .keyvisual, #_harmonies .sec-harmonies-salmons .keyvisual, #_harmonies .sec-harmonies-scallops .keyvisual, #_harmonies .sec-harmonies-shrimps .keyvisual {
  border-radius: 0 5px 0 0
}

#_harmonies .sec-harmonies-crabs .sizzle, #_harmonies .sec-harmonies-lobsters .sizzle, #_harmonies .sec-harmonies-mussels .sizzle, #_harmonies .sec-harmonies-salmons .sizzle, #_harmonies .sec-harmonies-scallops .sizzle, #_harmonies .sec-harmonies-shrimps .sizzle {
  border-radius: 0 0 5px 0
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies-crabs .title.fixed, #_harmonies .sec-harmonies-lobsters .title.fixed, #_harmonies .sec-harmonies-mussels .title.fixed, #_harmonies .sec-harmonies-salmons .title.fixed, #_harmonies .sec-harmonies-scallops .title.fixed, #_harmonies .sec-harmonies-shrimps .title.fixed {
    position: absolute
  }
  #_harmonies .sec-harmonies-crabs h2, #_harmonies .sec-harmonies-lobsters h2, #_harmonies .sec-harmonies-mussels h2, #_harmonies .sec-harmonies-salmons h2, #_harmonies .sec-harmonies-scallops h2, #_harmonies .sec-harmonies-shrimps h2 {
    padding-top: 83px;
    padding-bottom: 83px
  }
}

#_harmonies .sec-harmonies-oysters {
  border-radius: 0 0 5px 0
}

#_harmonies .sec-harmonies-lobsters {
  padding-top: 296px
}

@media all and (max-width:768px) {
  #_harmonies .sec-harmonies-lobsters {
    padding-top: 0
  }
}

#_harmonies .sec-harmonies-crabs {
  padding-top: 296px
}

@media all and (max-width:768px) {
  #_harmonies .sec-harmonies-crabs {
    padding-top: 0
  }
}

#_harmonies .sec-harmonies-shrimps {
  padding-top: 296px
}

@media all and (max-width:768px) {
  #_harmonies .sec-harmonies-shrimps {
    padding-top: 0
  }
}

#_harmonies .sec-harmonies-mussels, #_harmonies .sec-harmonies-salmons, #_harmonies .sec-harmonies-scallops {
  padding-top: 296px
}

@media all and (max-width:768px) {
  #_harmonies .sec-harmonies-mussels, #_harmonies .sec-harmonies-salmons, #_harmonies .sec-harmonies-scallops {
    padding-top: 0
  }
}

#_harmonies .sec-harmonies-oysters.fr .title .wlight {
  display: block
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies-oysters.fr .title .bold {
    display: block;
    margin-bottom: 20px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .sec-harmonies-oysters.fr .title {
    margin-top: -197px
  }
  #_harmonies .sec-harmonies-oysters.fr .title .bold {
    display: block;
    margin-bottom: 18px
  }
}

@media all and (max-width:499px) {
  #_harmonies .sec-harmonies-oysters.fr .title {
    margin-top: -165px
  }
  #_harmonies .sec-harmonies-oysters.fr .title .bold {
    display: block;
    margin-bottom: 18px
  }
}

#_harmonies .sec-harmonies-crabs.fr, #_harmonies .sec-harmonies-lobsters.fr, #_harmonies .sec-harmonies-mussels.fr, #_harmonies .sec-harmonies-salmons.fr, #_harmonies .sec-harmonies-scallops.fr, #_harmonies .sec-harmonies-shrimps.fr {
  padding-top: 206px
}

#_harmonies .sec-harmonies-crabs.fr .title .wlight, #_harmonies .sec-harmonies-lobsters.fr .title .wlight, #_harmonies .sec-harmonies-mussels.fr .title .wlight, #_harmonies .sec-harmonies-salmons.fr .title .wlight, #_harmonies .sec-harmonies-scallops.fr .title .wlight, #_harmonies .sec-harmonies-shrimps.fr .title .wlight {
  display: block
}

#_harmonies .sec-harmonies-crabs.fr .title .blod, #_harmonies .sec-harmonies-lobsters.fr .title .blod, #_harmonies .sec-harmonies-mussels.fr .title .blod, #_harmonies .sec-harmonies-salmons.fr .title .blod, #_harmonies .sec-harmonies-scallops.fr .title .blod, #_harmonies .sec-harmonies-shrimps.fr .title .blod {
  display: block
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies-crabs.fr .title .bold, #_harmonies .sec-harmonies-lobsters.fr .title .bold, #_harmonies .sec-harmonies-mussels.fr .title .bold, #_harmonies .sec-harmonies-salmons.fr .title .bold, #_harmonies .sec-harmonies-scallops.fr .title .bold, #_harmonies .sec-harmonies-shrimps.fr .title .bold {
    display: block;
    margin-bottom: 20px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .sec-harmonies-crabs.fr .title, #_harmonies .sec-harmonies-lobsters.fr .title, #_harmonies .sec-harmonies-mussels.fr .title, #_harmonies .sec-harmonies-salmons.fr .title, #_harmonies .sec-harmonies-scallops.fr .title, #_harmonies .sec-harmonies-shrimps.fr .title {
    margin-top: -197px
  }
  #_harmonies .sec-harmonies-crabs.fr .title .bold, #_harmonies .sec-harmonies-lobsters.fr .title .bold, #_harmonies .sec-harmonies-mussels.fr .title .bold, #_harmonies .sec-harmonies-salmons.fr .title .bold, #_harmonies .sec-harmonies-scallops.fr .title .bold, #_harmonies .sec-harmonies-shrimps.fr .title .bold {
    display: block;
    margin-bottom: 18px
  }
}

@media all and (max-width:499px) {
  #_harmonies .sec-harmonies-crabs.fr .title, #_harmonies .sec-harmonies-lobsters.fr .title, #_harmonies .sec-harmonies-mussels.fr .title, #_harmonies .sec-harmonies-salmons.fr .title, #_harmonies .sec-harmonies-scallops.fr .title, #_harmonies .sec-harmonies-shrimps.fr .title {
    margin-top: -165px
  }
  #_harmonies .sec-harmonies-crabs.fr .title .bold, #_harmonies .sec-harmonies-lobsters.fr .title .bold, #_harmonies .sec-harmonies-mussels.fr .title .bold, #_harmonies .sec-harmonies-salmons.fr .title .bold, #_harmonies .sec-harmonies-scallops.fr .title .bold, #_harmonies .sec-harmonies-shrimps.fr .title .bold {
    display: block;
    margin-bottom: 18px
  }
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies-crabs.fr .inner-title, #_harmonies .sec-harmonies-lobsters.fr .inner-title, #_harmonies .sec-harmonies-mussels.fr .inner-title, #_harmonies .sec-harmonies-salmons.fr .inner-title, #_harmonies .sec-harmonies-scallops.fr .inner-title, #_harmonies .sec-harmonies-shrimps.fr .inner-title {
    height: calc(100% - 206px)
  }
  #_harmonies .sec-harmonies-crabs.fr .inner-title .title, #_harmonies .sec-harmonies-lobsters.fr .inner-title .title, #_harmonies .sec-harmonies-mussels.fr .inner-title .title, #_harmonies .sec-harmonies-salmons.fr .inner-title .title, #_harmonies .sec-harmonies-scallops.fr .inner-title .title, #_harmonies .sec-harmonies-shrimps.fr .inner-title .title {
    top: -206px
  }
}

@media all and (max-width:768px) {
  #_harmonies .sec-harmonies-crabs.fr, #_harmonies .sec-harmonies-lobsters.fr, #_harmonies .sec-harmonies-mussels.fr, #_harmonies .sec-harmonies-salmons.fr, #_harmonies .sec-harmonies-scallops.fr, #_harmonies .sec-harmonies-shrimps.fr {
    padding-top: 0
  }
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies-scallops.fr {
    padding-top: 260px
  }
}

@media all and (min-width:769px) {
  #_harmonies .sec-harmonies-scallops.fr .inner-title {
    height: calc(100% - 260px)
  }
  #_harmonies .sec-harmonies-scallops.fr .inner-title .title {
    top: -260px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .sec-harmonies-scallops.fr .inner-title .title {
    top: -50px
  }
  #_harmonies .sec-harmonies-scallops.fr .inner-title .bold {
    display: block;
    margin-bottom: 18px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .sec-harmonies-scallops.fr .inner-title .title {
    top: -207pxpx
  }
  #_harmonies .sec-harmonies-scallops.fr .inner-title .bold {
    display: block;
    margin-bottom: 18px
  }
}

#_harmonies .other_harmonies {
  max-width: 1140px
}

@media all and (min-width:769px) {
  #_harmonies .other_harmonies {
    padding: 0 70px;
    margin: 0 auto 50px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .other_harmonies {
    padding: 0 50px;
    margin: 0 auto 70px
  }
}

@media all and (max-width:499px) {
  #_harmonies .other_harmonies {
    padding: 0 15px
  }
}

#_harmonies .other_harmonies-header {
  max-width: 1140px;
  margin: 0 auto
}

@media all and (min-width:769px) {
  #_harmonies .other_harmonies-header-inner {
    padding: 0 90px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .other_harmonies-header-inner {
    padding: 0 30px
  }
}

@media all and (max-width:499px) {
  #_harmonies .other_harmonies-header-inner {
    padding: 0 15px
  }
}

#_harmonies .other_harmonies-header h3 {
  margin-top: 50px;
  margin-bottom: 50px
}

@media all and (max-width:499px) {
  #_harmonies .other_harmonies-header h3 {
    margin-bottom: 0
  }
}

#_harmonies .other_harmonies .harmonies-list {
  font-size: 0
}

#_harmonies .other_harmonies .harmonies-list .harmonies-list-item {
  display: inline-block;
  line-height: 0
}

#_harmonies .other_harmonies .harmonies-list .harmonies-list-item a {
  display: block
}

#_harmonies .other_harmonies .harmonies-list .harmonies-list-item a.hover img {
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
  -webkit-transition: -webkit-filter .1s ease-out;
  transition: -webkit-filter .1s ease-out;
  transition: filter .1s ease-out;
  transition: filter .1s ease-out, -webkit-filter .1s ease-out
}

@media all and (min-width:769px) {
  #_harmonies .other_harmonies .harmonies-list .harmonies-list-item {
    width: calc((100% - 80px)/ 5);
    margin: 0 20px 0 0
  }
  #_harmonies .other_harmonies .harmonies-list .harmonies-list-item:nth-child(5) {
    margin-right: 0
  }
  #_harmonies .other_harmonies .harmonies-list .harmonies-list-item .item__name {
    padding-top: 16px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_harmonies .other_harmonies .harmonies-list .harmonies-list-item {
    width: calc((100% - 40px)/ 3);
    margin: 0 20px 0 0
  }
  #_harmonies .other_harmonies .harmonies-list .harmonies-list-item:nth-child(3n) {
    margin-right: 0
  }
  #_harmonies .other_harmonies .harmonies-list .harmonies-list-item .item__name {
    padding-top: 16px;
    padding-bottom: 26px
  }
}

@media all and (max-width:499px) {
  #_harmonies .other_harmonies .harmonies-list .harmonies-list-item {
    width: calc((100% - 20px)/ 3);
    margin: 0 10px 0 0
  }
  #_harmonies .other_harmonies .harmonies-list .harmonies-list-item:nth-child(3n) {
    margin-right: 0
  }
  #_harmonies .other_harmonies .harmonies-list .harmonies-list-item .item__name {
    padding-top: 6px;
    padding-bottom: 16px
  }
}

#_harmonies .other_harmonies .harmonies-list .harmonies-list-item .item__name {
  margin: 0 10px
}

#_harmonies .other_harmonies .harmonies-list .harmonies-list-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transition: -webkit-filter .3s ease-out;
  transition: -webkit-filter .3s ease-out;
  transition: filter .3s ease-out;
  transition: filter .3s ease-out, -webkit-filter .3s ease-out
}

@media all and (max-width:499px) {
  #_harmonies .other_harmonies .harmonies-list {
    margin: 0 auto 30px
  }
}

#_rtb .content_bg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100vh
}

#_rtb .content_bg .front-layer {
  position: absolute;
  z-index: 3;
  content: '';
  display: block;
  width: 100%;
  height: 100%
}

@media all and (min-width:769px) {
  #_rtb .content_bg .front-layer {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, transparent), to(rgba(0, 0, 0, .7)));
    background-image: -webkit-linear-gradient(bottom, transparent 0, rgba(0, 0, 0, .7) 100%);
    background-image: linear-gradient(0deg, transparent 0, rgba(0, 0, 0, .7) 100%)
  }
}

@media all and (max-width:768px) {
  #_rtb .content_bg .front-layer {
    opacity: 0;
    -webkit-transition: opacity .1s ease-out;
    transition: opacity .1s ease-out;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, .3)), to(rgba(0, 0, 0, .7)));
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .7) 100%);
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .7) 100%)
  }
}

#_rtb .content_bg.fixed {
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 100vh;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden
}

#_rtb .content_bg:before {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background: url(/asset/img/science/science_bg.jpg) no-repeat;
  background-size: cover;
  background-position: 15% center
}

#_rtb .sec-rtb {
  max-width: 1140px;
  margin: 0 auto
}

@media all and (min-width:769px) {
  #_rtb .sec-rtb {
    padding: 0 70px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_rtb .sec-rtb {
    padding: 0 50px
  }
}

@media all and (max-width:499px) {
  #_rtb .sec-rtb {
    padding: 0 30px
  }
}

#_rtb .sec-rtb-inner {
  position: relative;
  z-index: 4;
  color: #FFF
}

@media all and (min-width:500px) and (max-width:1024px) {
  #_rtb .sec-rtb-inner {
    margin: 0 30px
  }
}

#_rtb .sec-rtb-inner .txt {
  margin-top: -50px
}

#_rtb .sec-rtb-inner .btn_box {
  position: relative;
  width: calc(100% + 160px);
  margin-top: 50px;
  margin-bottom: 5px
}

#_rtb .sec-rtb-inner .btn_box .sp_elm {
  display: none
}

@media all and (min-width:1440px) {
  #_rtb .sec-rtb-inner .btn_box {
    width: calc(300% + 160px)
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_rtb .sec-rtb-inner .btn_box {
    margin-top: 50px;
    margin-bottom: 5px
  }
}

@media all and (max-width:499px) {
  #_rtb .sec-rtb-inner .btn_box {
    width: calc(100% + 30px);
    margin-top: 50px;
    margin-bottom: 10px
  }
}

#_rtb .sec-rtb-inner .btn_see {
  position: relative;
  top: 0;
  left: 0;
  right: auto;
  width: 100%;
  margin-bottom: 10px
}

#_rtb .sec-rtb-inner .btn_see a.hover {
  color: #e60012;
  background-color: #000
}

@media all and (max-width:499px) {
  #_rtb .sec-rtb-inner .btn_see br.sp_elm {
    display: block
  }
}

#_rtb .sec-rtb-inner .btn_see.pdf {
  margin-top: 30px;
  margin-bottom: 0
}

#_rtb .sec-rtb-inner .btn_see.pdf a {
  color: #fff;
  background-color: transparent;
  border: 1px solid #FFF;
  padding: 15px 0 17px 20px
}

#_rtb .sec-rtb-inner .btn_see.pdf a i {
  position: relative;
  top: 2px;
  font-style: normal;
  font-size: 1.5em;
  margin-right: 14px
}

#_rtb .sec-rtb-inner .btn_see.pdf a.hover {
  color: #333;
  background-color: #FFF
}

#_rtb .sec-rtb-inner .btn_see:nth-child(3) {
  margin-bottom: 0
}

#_rtb .sec-rtb-inner .produced {
  font-size: 0;
  padding-top: 46px;
  padding-bottom: 50px
}

#_rtb .sec-rtb-inner .produced .logotitle {
  display: inline-block;
  padding-bottom: 0
}

#_rtb .sec-rtb-inner .produced .txt {
  line-height: 140%;
  margin-top: 0;
  padding-top: 16px
}

#_rtb .sec-rtb-inner .produced .logo_brandconnect {
  display: inline-block;
  background: url(/asset/img/logo_brandconnect.svg) no-repeat;
  background-size: contain;
  margin-left: 4px
}

@media all and (min-width:769px) {
  #_rtb .sec-rtb-inner {
    width: 50%;
    margin: 0 0 0 auto
  }
  #_rtb .sec-rtb-inner .title {
    padding-top: 100px;
    margin-bottom: 50px
  }
  #_rtb .sec-rtb-inner .title .font {
    line-height: 118%
  }
  #_rtb .sec-rtb-inner .logo_brandconnect {
    width: 104px;
    height: 19px;
    margin-bottom: -6px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #_rtb .sec-rtb-inner {
    width: auto
  }
  #_rtb .sec-rtb-inner .title {
    padding-top: 620px
  }
  #_rtb .sec-rtb-inner .title .font {
    line-height: 120%
  }
  #_rtb .sec-rtb-inner .produced .txt {
    margin-top: 12px;
    padding-top: 0
  }
  #_rtb .sec-rtb-inner .logo_brandconnect {
    width: 89px;
    height: 16px;
    margin-bottom: -4px
  }
}

@media all and (max-width:499px) {
  #_rtb .sec-rtb-inner .title {
    padding-top: 350px
  }
  #_rtb .sec-rtb-inner .title h2, #_rtb .sec-rtb-inner .title span {
    line-height: 120%
  }
  #_rtb .sec-rtb-inner .produced .txt {
    margin-top: 10px;
    padding-top: 0
  }
  #_rtb .sec-rtb-inner .logo_brandconnect {
    width: 80px;
    height: 15px;
    margin-bottom: -4px
  }
}

#top-harmonies.rtb {
  position: relative;
  z-index: 1;
  background-color: #f7f4f0
}

@media all and (max-width:768px) {
  #top-harmonies.rtb {
    margin-bottom: 0
  }
}

body.win {
  position: relative
}

body.win:before {
  position: relative;
  z-index: -1;
  top: -1px;
  width: 100%;
  height: 100%;
  width: 100%;
  height: 100%;
  background: url(/asset/img/science/science_bg.jpg) no-repeat;
  background-size: cover;
  background-position: 15% center
}

body.win .content_bg.fixed {
  background: 0 0
}

.gallery-filter .font.s_12 {
  padding: 0
}

.gallery-filter .chackbox {
  margin-right: 20px;
  margin-bottom: 15px;
  cursor: pointer
}

.gallery-filter .chackbox.active:after {
  position: absolute;
  top: 1px;
  left: 7px;
  content: '';
  display: block;
  width: 18px;
  height: 14px;
  background: url(/asset/img/icon_check.svg) no-repeat
}

.gallery-filter .chackbox:before {
  content: '';
  display: inline-block;
  width: 19px;
  height: 19px;
  border: solid 1px #000;
  opacity: .25;
  margin-right: 10px;
  margin-bottom: -5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.sec-gallery-header {
  padding: 0 70px
}

.sec-gallery-header h1 {
  width: 50%
}

.sec-gallery-header .gallery-filter {
  width: 50%;
  display: none;
  vertical-align: top;
  margin-top: 144px;
  text-align: right
}

.sec-gallery-header-inner {
  font-size: 0
}

.sec-gallery .gallery-list {
  max-width: 1160px;
  font-size: 0
}

.sec-gallery .gallery-list-item.isShow {
  display: inline-block
}

.sec-gallery .gallery-list-item {
  display: none;
  vertical-align: top;
  width: calc((100% - 60px)/ 3);
  background-color: #efece8;
  margin: 0 10px;
  border-radius: 5px;
  overflow: hidden
}

.sec-gallery .gallery-list-item img {
  display: block;
  width: 100%;
  height: auto
}

.sec-gallery .gallery-list-item span {
  position: relative;
  display: block;
  background-size: cover;
  background-position: center
}

.sec-gallery .gallery-list-item .img:before {
  content: '';
  display: block;
  padding-top: 57.8034%
}

.sec-gallery .gallery-list-item.movies .img-wrapper:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 72px;
  max-height: 72px;
  border-radius: 50%;
  background: center/contain url(/asset/img/icon_play.svg) no-repeat;
  background-color: rgba(0, 0, 0, .2)
}

@media all and (min-width:769px) {
  .sec-gallery .gallery-list-item.movies .img-wrapper:after {
    width: calc(72 * (100 / 1140) * 1vw);
    height: calc(72 * (100 / 1140) * 1vw)
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-gallery .gallery-list-item.movies .img-wrapper:after {
    width: calc(72 * (100 / 768) * 1vw);
    height: calc(72 * (100 / 768) * 1vw)
  }
}

@media all and (max-width:499px) {
  .sec-gallery .gallery-list-item.movies .img-wrapper:after {
    width: calc(72 * (100 / 499) * 1vw);
    height: calc(72 * (100 / 499) * 1vw)
  }
}

.sec-gallery .gallery-list-item .img-wrapper {
  position: relative;
  z-index: 1;
  border-radius: 5px 5px 0 0;
  overflow: hidden
}

.sec-gallery .gallery-list-item .item-inner {
  padding: 0 30px 0;
  height: 200px
}

.sec-gallery .gallery-list-item .item__date {
  display: block;
  padding-top: 26px;
  text-transform: uppercase
}

.sec-gallery .gallery-list-item .item__cat {
  display: block;
  margin-top: -91px;
  padding-bottom: 22px
}

.sec-gallery .gallery-list-item .item__caption.font.s_12 {
  margin-top: 0;
  padding-top: 0
}

.sec-gallery .gallery-list-item a .item-inner {
  -webkit-transition: background-color .3s ease-out;
  transition: background-color .3s ease-out
}

.sec-gallery .gallery-list-item a .img {
  -webkit-transform: scale(1) rotate(.0001deg);
  -ms-transform: scale(1) rotate(.0001deg);
  transform: scale(1) rotate(.0001deg);
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out
}

.sec-gallery .gallery-list-item a .item__caption, .sec-gallery .gallery-list-item a .item__cat, .sec-gallery .gallery-list-item a .item__date {
  color: #010101;
  -webkit-transition: color .3s ease-out;
  transition: color .3s ease-out
}

.sec-gallery .gallery-list-item a.hover .item-inner {
  background-color: #fff;
  -webkit-transition: background-color 0s ease-out;
  transition: background-color 0s ease-out
}

.sec-gallery .gallery-list-item a.hover .img {
  -webkit-transform: scale(1.03) rotate(.0001deg);
  -ms-transform: scale(1.03) rotate(.0001deg);
  transform: scale(1.03) rotate(.0001deg);
  -webkit-transition: -webkit-transform .2s ease-out;
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.sec-gallery .gallery-list-item a.hover .item__caption, .sec-gallery .gallery-list-item a.hover .item__cat, .sec-gallery .gallery-list-item a.hover .item__date {
  color: #e60012;
  -webkit-transition: color 0s ease-out;
  transition: color 0s ease-out
}

.sec-gallery .gallery-list-item, .sec-gallery _:lang(x)::-ms-backdrop {
  margin: 0 9px
}

.sec-gallery .gallery-list-item.current .img {
  -webkit-filter: grayscale(100%) brightness(85%);
  filter: grayscale(100%) brightness(85%)
}

.sec-gallery .gallery-list-item.current .img:after {
  -webkit-filter: brightness(115%);
  filter: brightness(115%)
}

.sec-gallery .gallery-list-item.current .item-inner {
  background-color: #fff
}

.sec-gallery .gallery-list-item.current a {
  cursor: default
}

.sec-gallery .gallery-list-item.current a.hover .img {
  -webkit-transform: scale(1) rotate(.0001deg);
  -ms-transform: scale(1) rotate(.0001deg);
  transform: scale(1) rotate(.0001deg)
}

.sec-gallery .gallery-list-item.current a.hover .item-inner {
  background-color: #fff
}

.sec-gallery .gallery-list-item.current a.hover .item__caption, .sec-gallery .gallery-list-item.current a.hover .item__cat, .sec-gallery .gallery-list-item.current a.hover .item__date {
  color: #010101
}

@media all and (min-width:1025px) {
  .sec-gallery-header-inner {
    padding: 0 90px
  }
}

@media all and (min-width:500px) and (max-width:1024px) {
  .sec-gallery-header-inner {
    padding: 0 30px
  }
}

@media all and (min-width:769px) {
  .sec-gallery-header {
    max-width: 1140px;
    margin: 0 auto
  }
  .sec-gallery-header h1 {
    margin-top: 50px;
    margin-bottom: 50px;
    line-height: 115%
  }
  .sec-gallery-header h1 span {
    margin-top: -50px
  }
  .sec-gallery .gallery-list {
    padding: 0 60px;
    margin: 0 auto 60px
  }
  .sec-gallery .gallery-list-item {
    margin-bottom: 40px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-gallery-header {
    padding: 0 50px
  }
  .sec-gallery-header h1 {
    width: 40%;
    margin-top: 30px;
    margin-bottom: 50px
  }
  .sec-gallery-header h1.font.s_20 {
    padding-top: 47px;
    line-height: 127%
  }
  .sec-gallery-header .gallery-filter {
    width: 60%;
    margin-top: 121px
  }
  .sec-gallery .gallery-list {
    padding: 0 40px;
    margin: 0 auto 70px
  }
  .sec-gallery .gallery-list-item {
    width: calc((100% - 40px)/ 2);
    margin-bottom: 20px
  }
  .sec-gallery .gallery-list-item .item-inner {
    height: 172px
  }
  .sec-gallery .gallery-list-item .item-inner .item__cat.font.s_12 {
    padding-bottom: 22px
  }
  .sec-gallery .sec-gallery.article .hero {
    padding: 0
  }
}

@media all and (max-width:499px) {
  .sec-gallery.index {
    padding: 0 15px
  }
  .sec-gallery-header {
    padding: 0
  }
  .sec-gallery-header-inner {
    padding: 0 15px
  }
  .sec-gallery-header h1 {
    width: 100%;
    margin-top: -20px;
    margin-bottom: -20px
  }
  .sec-gallery-header .gallery-filter {
    width: 100%;
    margin-top: 0;
    margin-bottom: 50px
  }
  .sec-gallery-header .gallery-filter .chackbox {
    margin-bottom: 0
  }
  .sec-gallery .gallery-list {
    margin: 0 auto 30px
  }
  .sec-gallery .gallery-list-item {
    width: 100%;
    margin: 0;
    margin-bottom: 20px
  }
  .sec-gallery .gallery-list-item .item-inner {
    height: 175px
  }
  .sec-gallery .gallery-list-item .item-inner .item__cat.font.s_12 {
    padding-bottom: 22px
  }
}

.sec-gallery.article .hero {
  position: relative;
  background-size: cover;
  background-position: center
}

.sec-gallery.article .hero:after {
  position: relative;
  top: 0;
  content: '';
  display: block;
  width: 100%;
  padding-top: 56.25%
}

@media all and (max-width:499px) {
  .sec-gallery.article .hero:after {
    padding-top: 100%
  }
}

.sec-gallery.article .hero-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}

.sec-gallery.article a.movies {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden
}

@media all and (min-width:769px) {
  .sec-gallery.article a.movies {
    width: calc(100% - 70px)
  }
}

.sec-gallery.article a.movies .hero {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out
}

.sec-gallery.article a.movies:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 72px;
  max-height: 72px;
  border-radius: 50%;
  background: center/contain url(/asset/img/icon_play.svg) no-repeat;
  background-color: rgba(0, 0, 0, .2)
}

@media all and (min-width:769px) {
  .sec-gallery.article a.movies:after {
    width: calc(72 * (100 / 1140) * 1vw);
    height: calc(72 * (100 / 1140) * 1vw)
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-gallery.article a.movies:after {
    width: calc(72 * (100 / 768) * 1vw);
    height: calc(72 * (100 / 768) * 1vw)
  }
}

@media all and (max-width:499px) {
  .sec-gallery.article a.movies:after {
    width: calc(72 * (100 / 499) * 1vw);
    height: calc(72 * (100 / 499) * 1vw)
  }
}

.sec-gallery.article a.movies.hover .hero {
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
  -webkit-transition: -webkit-transform .2s ease-out;
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.sec-gallery.article .gallery-col {
  max-width: 1140px;
  margin: 0 auto;
  font-size: 0
}

.sec-gallery.article .gallery-col__left {
  display: inline-block;
  vertical-align: top
}

.sec-gallery.article .gallery-col__left h1 {
  margin-top: 30px
}

.sec-gallery.article .gallery-col__left .art__date_cat .art__cat, .sec-gallery.article .gallery-col__left .art__date_cat .art__date {
  display: block
}

.sec-gallery.article .gallery-col__left .art__date_cat .art__cat {
  margin-top: -85px
}

@media all and (min-width:1025px) {
  .sec-gallery.article .gallery-col .art__date_cat, .sec-gallery.article .gallery-col h1 {
    margin-left: 90px
  }
}

@media all and (min-width:769px) {
  .sec-gallery.article .gallery-col {
    padding: 0 70px
  }
  .sec-gallery.article .gallery-col__left {
    width: 28.9473%
  }
}

@media all and (min-width:500px) and (max-width:1024px) {
  .sec-gallery.article .gallery-col .art__date_cat, .sec-gallery.article .gallery-col h1 {
    margin-left: 30px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-gallery.article .gallery-col {
    width: calc(100% - 50px*2);
    padding: 0 50px
  }
  .sec-gallery.article .gallery-col .art__date_cat, .sec-gallery.article .gallery-col h1 {
    margin-left: 0
  }
  .sec-gallery.article .gallery-col__left {
    width: calc(100% - 30px*2);
    margin: 0 30px
  }
}

@media all and (max-width:768px) {
  .sec-gallery.article .gallery-col__left .art__date_cat, .sec-gallery.article .gallery-col__left h1 {
    display: inline-block;
    width: 50%;
    vertical-align: top
  }
  .sec-gallery.article .gallery-col__left .art__date_cat {
    margin-top: 30px;
    text-align: right
  }
}

@media all and (max-width:499px) {
  .sec-gallery.article .gallery-col {
    width: calc(100% - 15px*2);
    padding: 0 15px
  }
  .sec-gallery.article .gallery-col__left {
    width: calc(100% - 15px*2);
    margin: 0 15px
  }
  .sec-gallery.article .gallery-col__left h1 {
    margin-top: 0;
    padding-top: 28px;
    padding-bottom: 0
  }
  .sec-gallery.article .gallery-col__left .art__date_cat {
    margin-top: -20px
  }
  .sec-gallery.article .gallery-col__left .art__date_cat .art__cat {
    margin-top: -90px
  }
}

.sec-gallery.article .gallery-col__right .title {
  color: #010101
}

.sec-gallery.article .gallery-col__right .body {
  color: #010101
}

.sec-gallery.article .gallery-col__right .body p {
  margin-right: 90px
}

.sec-gallery.article .gallery-col__right .body p a {
  opacity: 1;
  color: #e60012;
  text-decoration: underline;
  -webkit-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out
}

.sec-gallery.article .gallery-col__right .body p a.hover {
  opacity: .6;
  text-decoration: none;
  -webkit-transition: opacity 0s ease-out;
  transition: opacity 0s ease-out
}

.sec-gallery.article .gallery-col__right .body img {
  width: 100%;
  height: auto;
  margin: 40px 0 40px;
  border-radius: 5px;
  overflow: hidden
}

@media all and (min-width:769px) {
  .sec-gallery.article .gallery-col__right {
    width: 68.6842%;
    display: inline-block;
    float: right
  }
  .sec-gallery.article .gallery-col__right .title {
    margin-top: 30px;
    margin-right: 90px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-gallery.article .gallery-col__right .title {
    width: calc(100% - 30px*2);
    margin: 0 30px;
    margin-top: -20px
  }
  .sec-gallery.article .gallery-col__right .body {
    margin-top: -20px
  }
  .sec-gallery.article .gallery-col__right .body p {
    margin: 0 30px
  }
}

@media all and (max-width:499px) {
  .sec-gallery.article .gallery-col__right .title {
    width: calc(100% - 15px*2);
    margin: -4px 15px -29px
  }
  .sec-gallery.article .gallery-col__right .body {
    margin-top: -20px
  }
  .sec-gallery.article .gallery-col__right .body p {
    width: calc(100% - 15px*2);
    margin: 0 15px
  }
  .sec-gallery.article .gallery-col__right .body img {
    margin: 23px 0 17px
  }
}

.sec-gallery.article .more_gallery-header {
  max-width: 1140px;
  margin: 0 auto
}

@media all and (min-width:769px) {
  .sec-gallery.article .more_gallery-header {
    padding: 0 70px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  .sec-gallery.article .more_gallery-header {
    padding: 0 50px
  }
}

@media all and (max-width:499px) {
  .sec-gallery.article .more_gallery-header {
    padding: 0 15px
  }
}

.sec-gallery.article .more_gallery-header-inner {
  font-size: 0
}

@media all and (min-width:1025px) {
  .sec-gallery.article .more_gallery-header-inner {
    padding: 0 90px
  }
}

@media all and (min-width:500px) and (max-width:1024px) {
  .sec-gallery.article .more_gallery-header-inner {
    padding: 0 30px
  }
}

@media all and (max-width:499px) {
  .sec-gallery.article .more_gallery-header-inner {
    padding: 0 15px
  }
}

.sec-gallery.article .more_gallery-header h3 {
  width: 50%;
  display: inline-block;
  margin-top: 50px;
  margin-bottom: 50px
}

@media all and (min-width:769px) and (max-width:999px) {
  .sec-gallery.article .more_gallery-header h3 {
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 20px
  }
}

@media all and (max-width:768px) {
  .sec-gallery.article .more_gallery-header h3 {
    width: 100%;
    margin-bottom: 0
  }
}

@media all and (max-width:499px) {
  .sec-gallery.article .more_gallery-header h3 {
    margin-top: 0
  }
}

.sec-gallery.article .more_gallery-header .gallery-filter {
  width: 50%;
  display: none;
  vertical-align: top;
  margin-top: 100px;
  text-align: right
}

@media all and (min-width:769px) and (max-width:999px) {
  .sec-gallery.article .more_gallery-header .gallery-filter {
    width: 100%;
    margin-top: 0;
    margin-bottom: 80px
  }
}

@media all and (max-width:768px) {
  .sec-gallery.article .more_gallery-header .gallery-filter {
    width: 100%;
    margin-top: 0;
    margin-bottom: 50px
  }
}

@media all and (max-width:499px) {
  .sec-gallery.article .more_gallery .gallery-list {
    padding: 0 15px;
    margin: 0 auto 30px
  }
}

#wrapper {
  position: relative;
  width: 100%
}

#wrapper #contents {
  position: relative;
  overflow: hidden
}

#wrapper #contents .page_identifier {
  position: relative
}

#wrapper #contents .page_identifier section {
  position: relative
}

#wrapper #contents .page_identifier section .sec-brands-header {
  background-color: #fff
}

@media all and (max-width:768px) {
  #wrapper #contents .page_identifier section .sec-brands-header {
    background-color: transparent
  }
}

#wrapper #contents .page_identifier section .sec-brands-header-inner {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 70px
}

#wrapper #contents .page_identifier section .sec-brands-header-inner .matrix {
  position: relative;
  height: 320px;
  margin: 0 0 0 auto;
  width: 50%;
  padding: 30px 0 0
}

@media all and (max-width:768px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .matrix {
    display: none
  }
}

@media all and (min-width:500px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .matrix .cat {
    width: 118px;
    height: 118px
  }
}

#wrapper #contents .page_identifier section .sec-brands-header-inner .matrix .four {
  width: calc((100% - 15px - 4px) * .66666)
}

@media all and (min-width:500px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .matrix .four .cat:nth-child(1) {
    top: calc(50% - 118px / 2 - 76px - 1px);
    left: calc(50% - 118px / 2 - 76px - 1px)
  }
}

@media all and (min-width:500px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .matrix .four .cat:nth-child(2) {
    top: calc(50% - 118px / 2 - 76px - 1px);
    left: calc(50% - 118px / 2 + 76px - 1px)
  }
}

@media all and (min-width:500px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .matrix .four .cat:nth-child(3) {
    top: calc(50% - 118px / 2 + 76px - 1px);
    left: calc(50% - 118px / 2 - 76px - 1px)
  }
}

@media all and (min-width:500px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .matrix .four .cat:nth-child(4) {
    top: calc(50% - 118px / 2 + 76px - 1px);
    left: calc(50% - 118px / 2 + 76px - 1px)
  }
}

#wrapper #contents .page_identifier section .sec-brands-header-inner .matrix .four .axis:before {
  font-size: 12px;
  line-height: 16px
}

#wrapper #contents .page_identifier section .sec-brands-header-inner .matrix .one {
  width: calc((100% - 15px - 4px) * .33333);
  margin-left: 14px;
  -webkit-transition: border-color 1.5s cubic-bezier(.9, 0, .1, 1);
  transition: border-color 1.5s cubic-bezier(.9, 0, .1, 1)
}

@media all and (min-width:500px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .matrix .one .cat {
    top: calc(50% - 118px / 2 - 1px);
    left: calc(50% - 118px / 2 - 1px)
  }
}

@media all and (max-width:768px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner {
    padding: 0
  }
}

#wrapper #contents .page_identifier section .sec-brands-header-inner h1 {
  width: calc(50% - 90px * 2)
}

@media all and (min-width:500px) and (max-width:1024px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner h1 {
    padding: 168px 0 40px 30px
  }
}

@media all and (min-width:1025px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner h1 {
    padding: 168px 0 40px 90px
  }
}

@media all and (min-width:769px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner h1 {
    position: absolute
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner h1 {
    width: calc(100% - 80px * 2);
    padding: 39px 80px 40px
  }
}

@media all and (max-width:499px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner h1 {
    width: calc(100% - 30px * 2);
    padding: 90px 30px 40px
  }
}

#wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter {
  font-size: 0
}

@media all and (min-width:500px) and (max-width:1024px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter {
    padding: 0 0 0 30px
  }
}

@media all and (min-width:1025px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter {
    padding: 0 0 0 90px
  }
}

@media all and (max-width:320px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter .chackbox {
    margin: 0 10px 20px 0
  }
}

@media all and (min-width:321px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter .chackbox {
    margin: 0 20px 20px 0
  }
}

@media all and (min-width:500px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter .chackbox:last-child {
    margin-right: 0
  }
}

@media all and (min-width:769px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter {
    position: relative;
    padding-top: 70px;
    padding-bottom: 10px
  }
}

@media all and (max-width:768px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter {
    background-color: #fff;
    padding: 40px 80px 20px
  }
}

@media all and (max-width:499px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter {
    text-align: right;
    padding: 30px 30px 30px 20px
  }
}

#wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter a.about_sake_type {
  display: table;
  font-size: 12px;
  overflow: hidden
}

@media all and (min-width:769px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter a.about_sake_type {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 17px
  }
}

@media all and (max-width:768px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter a.about_sake_type {
    margin-top: 7px;
    margin-right: 20px
  }
}

@media all and (max-width:499px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter a.about_sake_type {
    margin: 7px 20px 0 auto
  }
}

#wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter a.about_sake_type:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
  -webkit-animation-name: hoverBorder;
  animation-name: hoverBorder;
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-transition: background-color 0s ease-out, -webkit-transform .1s ease-out;
  transition: background-color 0s ease-out, -webkit-transform .1s ease-out;
  transition: transform .1s ease-out, background-color 0s ease-out;
  transition: transform .1s ease-out, background-color 0s ease-out, -webkit-transform .1s ease-out
}

@media all and (min-width:769px) {
  #wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter a.about_sake_type:after {
    margin-top: 6px
  }
}

#wrapper #contents .page_identifier section .sec-brands-header-inner .brands-filter a.about_sake_type.hover:after {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: background-color 0s ease-out, -webkit-transform .1s ease-out;
  transition: background-color 0s ease-out, -webkit-transform .1s ease-out;
  transition: transform .1s ease-out, background-color 0s ease-out;
  transition: transform .1s ease-out, background-color 0s ease-out, -webkit-transform .1s ease-out
}

@-webkit-keyframes hoverBorder {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

@keyframes hoverBorder {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

#wrapper #contents .page_identifier section#section_brands {
  margin-top: 100px
}

@media all and (max-width:499px) {
  #wrapper #contents .page_identifier section#section_brands {
    padding-bottom: 50px
  }
}

@media all and (min-width:500px) {
  #wrapper #contents .page_identifier section#section_brands {
    padding-bottom: 100px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #wrapper #contents .page_identifier section#section_brands {
    margin-top: 50px
  }
}

@media all and (max-width:499px) {
  #wrapper #contents .page_identifier section#section_brands {
    margin-top: 0
  }
}

#wrapper #contents .page_identifier section#section_brands h1 {
  text-align: left
}

#wrapper #contents .page_identifier section#section_brands .brands {
  position: relative;
  margin: 50px auto 0 auto
}

@media all and (max-width:499px) {
  #wrapper #contents .page_identifier section#section_brands .brands {
    width: calc(100% - 30px / 2 - 30px / 2)
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  #wrapper #contents .page_identifier section#section_brands .brands {
    width: calc(100% - 50px - 50px)
  }
}

@media all and (min-width:769px) and (max-width:1024px) {
  #wrapper #contents .page_identifier section#section_brands .brands {
    width: calc(100% - 70px - 70px)
  }
}

@media all and (min-width:1025px) {
  #wrapper #contents .page_identifier section#section_brands .brands {
    width: calc(100% - 70px - 70px);
    max-width: 1181px
  }
}

#wrapper #contents .page_identifier section#section_brands .brands .brand_columns {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between
}

@media all and (max-width:499px) {
  #wrapper #contents .page_identifier section#section_brands .brands .brand_columns .brand_column {
    width: calc(33.33333% - 10px * 2 / 3)
  }
}

@media all and (min-width:500px) and (max-width:1024px) {
  #wrapper #contents .page_identifier section#section_brands .brands .brand_columns .brand_column {
    width: calc(33.33333% - 20px * 2 / 3)
  }
}

@media all and (min-width:1025px) {
  #wrapper #contents .page_identifier section#section_brands .brands .brand_columns .brand_column {
    width: calc(25% - 20px * 3 / 4)
  }
}

@media all and (max-width:1024px) {
  #wrapper #contents .page_identifier section#section_brands .brands .brand_columns .brand_column:nth-child(4) {
    display: none
  }
}

#wrapper #contents .page_identifier section#section_brands .brands .brand {
  position: relative;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
  border-radius: 5px;
  overflow: hidden
}

@media all and (max-width:499px) {
  #wrapper #contents .page_identifier section#section_brands .brands .brand {
    margin-top: 10px
  }
}

@media all and (min-width:500px) {
  #wrapper #contents .page_identifier section#section_brands .brands .brand {
    margin-top: 20px
  }
}

#wrapper #contents .page_identifier section#section_brands .brands .brand:first-child {
  margin-top: 0
}

#wrapper #contents .page_identifier section#section_brands .brands .brand.inview {
  opacity: 1
}

#wrapper #contents .page_identifier section#section_brands .brands .brand .countryflag {
  opacity: 0;
  -webkit-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out;
  position: absolute;
  z-index: 1;
  background-color: #000;
  margin: 1px 0 0 1px;
  padding: 15px 10px 15px 15px;
  font-size: 0;
  border-radius: 4px 0 5px 0
}

#wrapper #contents .page_identifier section#section_brands .brands .brand .countryflag span {
  display: inline-block;
  width: 16px;
  height: 11px;
  margin-right: 5px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain
}

#wrapper #contents .page_identifier section#section_brands .brands .brand .countryflag span.us {
  background-image: url(/asset/img/flag_us.gif)
}

#wrapper #contents .page_identifier section#section_brands .brands .brand .countryflag span.uk {
  background-image: url(/asset/img/flag_uk.gif)
}

#wrapper #contents .page_identifier section#section_brands .brands .brand .countryflag span.fr {
  background-image: url(/asset/img/flag_fr.gif)
}

#wrapper #contents .page_identifier section#section_brands .brands .brand .countryflag.sp {
  display: none;
  position: relative;
  opacity: 1;
  background-color: transparent;
  padding: 5px 10px 0 5px
}

#wrapper #contents .page_identifier section#section_brands .brands .brand a.image.hover {
  cursor: pointer
}

#wrapper #contents .page_identifier section#section_brands .brands .brand a.image.hover .countryflag {
  opacity: 1;
  -webkit-transition: opacity 0s ease-out;
  transition: opacity 0s ease-out
}

#wrapper #contents .page_identifier section#section_brands .brands .brand a.image.hover img {
  opacity: .7;
  -webkit-transition: opacity 0s ease-out;
  transition: opacity 0s ease-out
}

#wrapper #contents .page_identifier section#section_brands .brands .brand .image.hover .countryflag {
  opacity: 1;
  -webkit-transition: opacity 0s ease-out;
  transition: opacity 0s ease-out
}

#wrapper #contents .page_identifier section#section_brands .brands .brand .image {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  line-height: 0;
  -webkit-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out;
  opacity: .05
}

#wrapper #contents .page_identifier section#section_brands .brands .brand .image::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: solid 1px rgba(0, 0, 0, .05)
}

#wrapper #contents .page_identifier section#section_brands .brands .brand .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%!important;
  height: 100%!important;
  opacity: 1;
  -webkit-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out
}

#wrapper #contents .page_identifier section#section_brands .brands .brand .image.isShow {
  opacity: 1
}

#player.opened {
  z-index: 9000
}

#player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  opacity: 0;
  z-index: 5000;
  pointer-events: none;
  -webkit-transition: opacity .5s cubic-bezier(.6, 0, .4, 1);
  transition: opacity .5s cubic-bezier(.6, 0, .4, 1)
}

#player.opened {
  opacity: 1;
  pointer-events: auto
}

#player #player_youtube {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}

#player #player_youtube.show {
  opacity: 1;
  -webkit-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out
}

#player .player-wrapper {
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto
}

#player .player-wrapper:after {
  content: '';
  display: block;
  padding-top: 56.25%
}

#player #plaer_close {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  width: 108px;
  height: 99px
}

#player #plaer_close.hover .bar:nth-child(1) {
  -webkit-transform: rotate(-225deg) scaleX(.8);
  -ms-transform: rotate(-225deg) scaleX(.8);
  transform: rotate(-225deg) scaleX(.8)
}

#player #plaer_close.hover .bar:nth-child(2) {
  -webkit-transform: rotate(225deg) scaleX(.8);
  -ms-transform: rotate(225deg) scaleX(.8);
  transform: rotate(225deg) scaleX(.8)
}

#player #plaer_close .bar {
  display: block;
  position: absolute;
  top: 49px;
  left: 30px;
  width: 48px;
  height: 1px;
  background-color: #fff;
  -webkit-transition: left .2s ease-out, width .2s ease-out, -webkit-transform .2s ease-out;
  transition: left .2s ease-out, width .2s ease-out, -webkit-transform .2s ease-out;
  transition: left .2s ease-out, width .2s ease-out, transform .2s ease-out;
  transition: left .2s ease-out, width .2s ease-out, transform .2s ease-out, -webkit-transform .2s ease-out
}

#player #plaer_close .bar:nth-child(1) {
  -webkit-transform: rotate(-225deg) scaleX(1);
  -ms-transform: rotate(-225deg) scaleX(1);
  transform: rotate(-225deg) scaleX(1)
}

#player #plaer_close .bar:nth-child(2) {
  -webkit-transform: rotate(225deg) scaleX(1);
  -ms-transform: rotate(225deg) scaleX(1);
  transform: rotate(225deg) scaleX(1)
}

footer {
  position: relative;
  z-index: 4;
  background-color: #fff
}

@media all and (max-width:499px) {
  footer {
    width: calc(100% - 30px - 30px);
    padding: 50px 30px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  footer {
    width: calc(100% - 50px - 50px);
    padding: 80px 50px
  }
}

@media all and (min-width:769px) {
  footer {
    padding: 100px 70px 98px 70px
  }
}

footer.fixed {
  position: fixed;
  bottom: 0
}

footer .footer-inner {
  position: relative
}

@media all and (min-width:500px) and (max-width:1024px) {
  footer .footer-inner {
    margin: 0 30px
  }
}

@media all and (min-width:1025px) {
  footer .footer-inner {
    margin: 0 90px
  }
}

@media all and (max-width:499px) {
  footer .footer-inner {
    margin: 0
  }
}

footer .logo_jfoodo {
  display: block;
  width: 171px;
  height: 43px;
  text-indent: -10000px;
  background-image: url(/asset/img/logo_jfoodo_color.svg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden
}

@media all and (max-width:499px) {
  footer .logo_jfoodo {
    width: 115px;
    height: 28px
  }
}

@media all and (min-width:769px) {
  footer .logo_jfoodo {
    margin-right: 84px
  }
}

footer .logo_jfoodo.hover {
  opacity: .7
}

footer .texts {
  text-align: left
}

@media all and (max-width:499px) {
  footer .texts {
    font-size: 8px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  footer .texts {
    width: 100%;
    font-size: 10px
  }
}

@media all and (min-width:769px) {
  footer .texts {
    font-size: 11px
  }
}

footer .texts .profile {
  display: block;
  line-height: 155%;
  letter-spacing: .05em
}

@media all and (max-width:499px) {
  footer .texts .profile {
    margin-top: 47px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  footer .texts .profile {
    margin-top: 77px
  }
}

@media all and (min-width:769px) {
  footer .texts .profile {
    margin-top: 45px
  }
}

footer .texts .copyright {
  display: block;
  line-height: 14px;
  letter-spacing: .05em;
  opacity: .5
}

@media all and (max-width:499px) {
  footer .texts .copyright {
    margin-top: 23px
  }
  footer .texts .copyright .fr .nowrap {
    white-space: normal
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  footer .texts .copyright {
    margin-top: 43px
  }
}

@media all and (min-width:769px) {
  footer .texts .copyright {
    margin-top: 143px
  }
}

footer .logo_drinkaware {
  top: 15px;
  right: 0;
  display: block;
  width: 172px;
  height: 12px;
  text-indent: 10000px;
  background-image: url(/asset/img/logo_drinkaware.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden
}

@media all and (max-width:499px) {
  footer .logo_drinkaware {
    position: unset;
    font-size: 8px;
    margin-top: 96px
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  footer .logo_drinkaware {
    position: unset;
    font-size: 10px;
    text-align: left;
    margin-top: 96px;
    margin-left: -1px
  }
}

@media all and (min-width:769px) {
  footer .logo_drinkaware {
    position: absolute;
    font-size: 11px;
    text-align: right;
    margin-left: 28px
  }
}

footer .logo_drinkaware.hover {
  opacity: .7
}

footer .logo_drinkaware.hide {
  display: none
}

footer .responsibility {
  display: block;
  width: 100%;
  height: 12px;
  line-height: 14px;
  letter-spacing: .05em;
  top: 15px;
  right: 0
}

@media all and (min-width:769px) {
  footer .responsibility {
    position: absolute;
    font-size: 11px;
    text-align: right;
    margin-left: 28px
  }
}

@media all and (min-width:769px) and (max-width:999px) {
  footer .responsibility {
    width: 50%
  }
}

@media all and (min-width:500px) and (max-width:768px) {
  footer .responsibility {
    width: 100%;
    position: unset;
    font-size: 10px;
    text-align: left;
    margin-top: 96px;
    margin-left: -1px
  }
}

@media all and (max-width:499px) {
  footer .responsibility {
    position: unset;
    font-size: 8px;
    margin-top: 96px
  }
}

footer .responsibility.hover {
  opacity: .7
}

footer .responsibility.hide {
  display: none
}

body.uk #global_menu .inner.fr {
  display: none
}

body.uk footer .copyright .fr, body.uk footer .profile .fr, body.uk footer .responsibility.en, body.uk footer .responsibility.fr {
  display: none
}

body.us #global_menu .inner.fr {
  display: none
}

body.us footer .copyright .fr, body.us footer .logo_drinkaware, body.us footer .profile .fr, body.us footer .responsibility.fr {
  display: none
}

body.fr #global_menu .inner.en {
  display: none
}

body.fr footer .copyright .en, body.fr footer .logo_drinkaware, body.fr footer .profile .en, body.fr footer .responsibility.en {
  display: none
}

body.sp #wrapper #contents .page_identifier section#section_brands .brands .brand .countryflag.pc, body.tab #wrapper #contents .page_identifier section#section_brands .brands .brand .countryflag.pc {
  display: none
}

body.sp #wrapper #contents .page_identifier section#section_brands .brands .brand .countryflag.sp, body.tab #wrapper #contents .page_identifier section#section_brands .brands .brand .countryflag.sp {
  display: block
}


/*# sourceMappingURL=jfoodo.vol3.11.css.map */