@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700|Poppins:400,500,600,700);
/*
html.-loading:before {
  z-index: 20000;
  visibility: visible;
  background: #fff;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

html:before {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  visibility: hidden;
  width: 100%;
  height: 100%;
  background: 0 0;
  content: "";
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition: all 0.6s 0.1s ease-out;
}
*/
@media screen and (max-width: 767px) {
  .bnrPanel.-horizon {
    padding: 0;
  }
}

.bnrPanel__inner {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -ms-flex-align: stretch;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: stretch;
          align-items: stretch;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-box-align: stretch;
  -webkit-box-pack: justify;
}

@media screen and (max-width: 767px) {
  .-vertical .bnrPanel__detail, .-vertical .bnrPanel__thumb {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .-horizon .bnrPanel__detail, .-horizon .bnrPanel__thumb {
    width: 100%;
  }
}

.bnrPanel__thumb {
  position: relative;
  overflow: hidden;
  width: 34.4%;
}

@media screen and (max-width: 767px) {
  .bnrPanel__thumb {
    margin-top: 2.0em;
  }
}

@media screen and (max-width: 1023px) {
  .-horizon .bnrPanel__thumb {
    background-color: #000;
  }
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
  .shower .bnrPanel__thumb img {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .bnrPanel__img {
    margin-top: 2.0em;
  }
}

.bnrPanel__label {
  position: absolute;
  right: .625em;
  bottom: 0.625em;
}

.bnrPanel__detail {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
          flex-direction: column;
  box-sizing: border-box;
  padding: 0;
  width: calc(65.6% - 1px);
  -webkit-box-pack: center;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .-horizon .bnrPanel__detail {
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .-vertical .bnrPanel__detail {
    padding: 0;
  }
}

.bnrPanel__header {
  position: relative;
  margin-bottom: .875em;
  padding-top: 0;
  padding-bottom: 1.25em;
  border-bottom: 1px solid white;
}

@media screen and (max-width: 767px) {
  .-vertical .bnrPanel__header {
    margin-bottom: 1em;
    padding-top: 0.71429em;
  }
  .-horizon .bnrPanel__header {
    margin-bottom: 1.28571em;
    padding-top: .14286em;
    padding-bottom: 1.28571em;
  }
}

.bnrPanel__name {
  line-height: 1;
}

.bnrPanel__name img {
  width: 18.25em;
  vertical-align: middle;
}

@media screen and (max-width: 767px) {
  .bnrPanel__name {
    font-size: 2rem;
  }
  .bnrPanel__name img {
    width: 12.25em;
  }
}

.bnrPanel__desc {
  margin-top: 1em;
  padding-right: calc(6.6875em + 10px);
  line-height: 1.4;
  font-size: 19.2px;
  font-size: 1.92rem;
}

@media screen and (max-width: 767px) {
  .-vertical .bnrPanel__desc {
    padding-right: calc(5em + 10px);
  }
  .-horizon .bnrPanel__desc {
    margin-top: 2.14285em;
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 320px) {
  .-horizon .bnrPanel__desc {
    font-size: 1.3rem;
  }
}

.bnrPanel__desc:last-child {
  padding-right: 0;
}

.bnrPanel__sticker {
  position: absolute;
  right: 0;
}

@media screen and (min-width: 768px) {
  .bnrPanel__sticker {
    bottom: 20px;
    width: 6.6875em;
  }
}

@media screen and (max-width: 767px) {
  .bnrPanel__sticker {
    width: 5em;
  }
  .-vertical .bnrPanel__sticker {
    top: 1.78571em;
  }
}

@media screen and (min-width: 768px) {
  .bnrPanel__list {
    padding-bottom: calc(3.125em - 20px);
  }
}

@media screen and (max-width: 767px) {
  .bnrPanel__list {
    padding-bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  .bnrPanel__lineupLink {
    margin-top: 1.35714em;
  }
}

.bnrPanel__index {
  font-weight: 600;
}

.selection .bnrPanel__index {
  margin-bottom: .25em;
  font-weight: 400;
  font-size: 19.2px;
  font-size: 1.92rem;
}

@media screen and (max-width: 767px) {
  .selection .bnrPanel__index {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 767px) {
  .-horizon .bnrPanel__index {
    line-height: 1.35;
  }
}

@media screen and (max-width: 320px) {
  .-horizon .bnrPanel__index {
    font-size: 1.3rem;
  }
}

.bnrPanel__icon {
  letter-spacing: -0.4em;
}

.bnrPanel__iconItem {
  position: relative;
  display: inline-block;
  letter-spacing: normal;
  line-height: 1.5625;
}

.bnrPanel__iconItem:before {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  background-repeat: no-repeat;
  content: "";
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.bnrPanel__iconItem.-warm:before {
  background-image: url(../../images/i_warm_bl.svg);
}

.bnrPanel__iconItem.-comfort:before {
  background-image: url(../../images/i_comfort_bl.svg);
}

.bnrPanel__iconItem.-safety:before {
  background-image: url(../../images/i_safety_bl.svg);
}

.bnrPanel__iconItem.-aerial:before {
  background-image: url(../../images/i_aerial_bl.svg);
}

.bnrPanel__iconItem.-active:before {
  background-image: url(../../images/i_active_bl.svg);
}

.bnrPanel__iconItem > span {
  font-size: 14px !important;
  font-size: 1.4rem !important;
}

@media screen and (min-width: 768px) {
  .bnrPanel__iconItem {
    margin-top: .5em;
    margin-right: 1.0em;
    padding-left: 1.7em;
  }
}

@media screen and (max-width: 767px) {
  .bnrPanel__iconItem {
    margin-top: .57143em;
    padding-left: 2em;
    min-width: 8.21429em;
  }
  .-vertical .bnrPanel__iconItem {
    margin-right: 0.92857em;
  }
  .-horizon .bnrPanel__iconItem {
    margin-top: .85714em;
    margin-right: 1.0em;
  }
}

@media screen and (max-width: 320px) {
  .-horizon .bnrPanel__iconItem {
    margin-top: .25em;
    font-size: 1.2rem;
  }
}

@media screen and (min-width: 768px) {
  .bnrPanel__iconItem:before {
    width: 1.25em;
    height: 1.25em;
    background-position: center center;
    background-size: contain;
  }
}

@media screen and (max-width: 767px) {
  .bnrPanel__iconItem:before {
    width: 1.42857em;
    height: 1.42857em;
    background-position: center center;
    background-size: 97.5% auto;
  }
}

@media screen and (max-width: 320px) {
  .-horizon .bnrPanel__iconItem:before {
    width: 1.5em;
    height: 1.5em;
  }
}

.design.lowerSection {
  padding-top: 0;
}

@media screen and (min-width: 768px) {
  .design.lowerSection {
    padding-bottom: 6em;
  }
  .design.lowerSection.is-nopadding {
    padding-bottom: 0;
  }
}

.design__inner {
  position: relative;
}

.design__arw {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .design__arw {
    margin-top: 20px;
  }
}

@media screen and (max-width: 767px) {
  .design__arw {
    display: none;
  }
}

.design__header {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  color: #fff;
  -webkit-box-pack: end;
}

.design__header.lowerSection__header {
  padding-bottom: 0;
}

@media screen and (min-width: 768px) {
  .design__header {
    height: 41.0625em;
  }
}

@media screen and (max-width: 1023px) {
  .design__header {
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@media screen and (max-width: 767px) {
  .design__header {
    height: 151vw;
  }
}

.design__summary {
  padding-bottom: 4.375em;
}

@media screen and (min-width: 768px) {
  .design__content.innerEl-wide {
    padding-bottom: 5em;
  }
}

@media screen and (max-width: 767px) {
  .design__content.innerEl-wide {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 2.85714em;
  }
}

.design__el {
  background: #fff;
}

@media screen and (max-width: 767px) {
  .design__arw + .design__el {
    position: relative;
    padding-bottom: 1.142857em;
  }
  .design__arw + .design__el:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: calc(100% - .9375em * 2);
    height: 1px;
    background-color: rgba(0, 0, 0, 0.08);
    content: "";
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

.design__elInner {
  position: relative;
}

@media screen and (max-width: 767px) {
  .design__elInner.innerEl-tight {
    padding-right: 0;
    padding-left: 0;
  }
}

@media screen and (min-width: 768px) {
  .design__elHeader {
    padding-right: 35.5%;
    padding-top: 3em;
    padding-bottom: 3em;
  }
  .design__el + .design__el .design__elHeader {
    padding-bottom: 4.375em;
  }
}

@media screen and (max-width: 767px) {
  .design__elHeader {
    padding: 2.14285em 1.07143em 1.42857em 1.07143em;
  }
  .design__el + .design__el .design__elHeader {
    padding: 4.28571em 1.07143em 1.42857em 1.07143em;
  }
}

.design__elName {
  font-size: 80px;
  letter-spacing: 0.05em;
  line-height: 1;
  font-weight: 400;
}
.design__elName span {
  display: inline-block;
  margin-left: 10px;
  font-size: 32px;
  letter-spacing: 0;
}
@media screen and (max-width: 767px) {
  .design__elName {
    font-size: 58px;
  }  
  .design__elName span {
    font-size: 24px;
  }  
}
.design__elName.is-zn {
  color :#707158;
}
.design__elName.is-za {
  color :#707158;
}
.design__elName.is-zl {
  color :#607376;
}

@media screen and (min-width: 768px) {
  .design__elName img {
    height: 3.5625em;
  }
}

@media screen and (max-width: 767px) {
  .design__elName img {
    height: 2.5em;
    font-size: 1.6rem;
  }
}

.design__elDesc {
  line-height: 1.4;
}

@media screen and (min-width: 768px) {
  .design__elDesc {
    margin-top: .83333em;
    font-size: 2.4rem;
  }
}

@media screen and (max-width: 767px) {
  .design__elDesc {
    margin-top: 1.42857em;
    font-size: 1.4rem;
  }
}

@media screen and (min-width: 768px) {
  .design__elNav {
    margin-top: 1em;
  }
}

@media screen and (max-width: 767px) {
  .design__elNav {
    margin-top: 1.14286em;
  }
}

.design__elNavList {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  -webkit-box-align: start;
}

.design__elNavItem {
  margin-right: 1em;
}

.design__elSticker {
  position: absolute;
  top: 4.75em;
  z-index: 10;
}

@media screen and (min-width: 768px) {
  .design__elSticker {
    right: 0;
    width: 35.5%;
  }
}

@media screen and (max-width: 767px) {
  .design__elSticker {
    top: 4.28571em;
    right: .71429em;
    display: none;
    width: 30%;
  }
}

@media screen and (min-width: 768px) {
  #faucet-z-series .design__elSticker {
    top: calc(80px + 4.75em);
  }
}

@media screen and (max-width: 1024px) {
  #faucet-z-series .design__elSticker {
    top: calc(100px + 4.75em);
  }
}

@media screen and (max-width: 767px) {
  #faucet-z-series .design__elSticker {
    top: calc(50px + 4.28571em);
  }
}

.design__elKv {
  position: relative;
  text-align: center;
}

.design__elKvLabel {
  position: absolute;
}

@media screen and (min-width: 768px) {
  .design__elKvLabel {
    right: 1.875em;
    bottom: 10em;
  }
}

@media screen and (max-width: 767px) {
  .design__elKvLabel {
    right: 1.42857em;
    bottom: 1.78571em;
  }
}

/* [START] FOR ZN */
.design__ZnSeries {
  position: relative;
}
.design__ZnSeries__image01,
.design__ZnSeries__image03 {
  width: 31.746%;
  position: absolute;
}
.design__ZnSeries__image01 {
  right: 0;
  bottom: 40%;
}
.design__ZnSeries__image02 {
  width: 61.2%;
}
.design__ZnSeries__image03 {
  right: 0;
  bottom: 0;
}
@media screen and (max-width: 767px) {
  .design__ZnSeries__image01,
  .design__ZnSeries__image03 {
    /*width: 35%;*/
    display: none;
  }
  .design__ZnSeries__image02 {
    width: auto;
  }
}
.is_marginAdjust {
  margin-bottom: 80px
}
@media screen and (max-width: 767px) {
  .is_marginAdjust {
    margin-bottom: 0;
  }
}
/* [END] FOR ZN */


.design__link {
  position: relative;
  z-index: 2;
}

#faucet-z-series,
#faucet-g-series,
#faucet-l-series {
  margin-top: -80px;
  padding-top: 80px;
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  #faucet-z-series,
  #faucet-g-series,
  #faucet-l-series {
    margin-top: -100px;
    padding-top: 100px;
  }
}

@media screen and (max-width: 767px) {
  #faucet-z-series,
  #faucet-g-series,
  #faucet-l-series {
    margin-top: -50px;
    padding-top: 50px;
  }
}

@media screen and (min-width: 768px) {
  .design__lineup {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    padding-bottom: 5em;
  }

  .design__lineup.is-center {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-box-pack: center;
  }
}

@media screen and (max-width: 767px) {
  .design__lineup {
    padding-right: 1.07143em;
    padding-bottom: 2.14286em;
    padding-left: 1.07143em;
    padding-bottom: 0;
  }
}

.design__lineupItem {
  box-sizing: border-box;
}

.design__lineupItem:last-child .design__lineupItemInner, .design__lineupItem:nth-of-type(3) .design__lineupItemInner, .design__lineupItem:nth-of-type(6) .design__lineupItemInner {
  border: 0;
}

@media screen and (min-width: 768px) {
  .design__lineupItem {
    margin-bottom: 5em;
    width: calc((100% / 3) - 1px);
  }
}

@media screen and (max-width: 767px) {
  .design__lineupItem {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .design__lineupItem:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
}

@media screen and (min-width: 768px) {
  .design__lineupItemInner {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
  }
}

@media screen and (max-width: 767px) {
  .design__lineupItemInner {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: justify;
    -ms-flex-align: center;
    -webkit-justify-content: space-between;
            justify-content: space-between;
    -webkit-align-items: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
  }
}

@media screen and (max-width: 767px) {
  .design__lineupText, .design__lineupThumb {
    width: calc((100% - .5em)/ 2);
  }
}

.design__lineupThumb {
  position: relative;
}

@media screen and (min-width: 768px) {
  .design__lineupThumb {
    margin-bottom: 1.25em;
  }
}

.design__lineup .design__lineupItem:nth-last-of-type(-n+3) {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .design__lineup .design__lineupBadge {
    position: absolute;
    right: 10%;
    bottom: .875em;
    width: 19%;
  }
  #touchless-faucet .design__lineup .design__lineupBadge {
    right: 5%;
    bottom: 0;
  }
  .design__lineup .design__lineupBadge--wrap {
    text-align: right;
    margin-top: -20px;
  }
  .design__lineup .design__lineupBadge--wrap .design__lineupBadge {
    position: static;
    right: 0;
    bottom: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10%;
  }
}

@media screen and (min-width: 768px) {
  .design__lineup .design__lineupBadge + .design__lineupBadge {
    position: absolute;
    right: 30%;
    bottom: .875em;
    width: 18%;
  }
}

@media screen and (max-width: 767px) {
  .design__lineup .design__lineupBadge {
    display: none;
  }
  #touchless-faucet .design__lineup .design__lineupBadge {
    display: block;
    width: 25%;
    position: absolute;
    left: 5%;
    bottom: 5%;
  }
}

@media screen and (min-width: 768px) {
  .design__lineupText {
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .design__lineupText {
    padding: 2.35714em 0 2.14286em;
  }
}

.-ge .design__lineupName {
  color: #745E58;
}

.-gc .design__lineupName {
  color: #786F56;
}

.-gm .design__lineupName {
  color: #5C7281;
}

.-gb .design__lineupName {
  color: #786F56;
}

.-gf .design__lineupName {
  color: #5F6565;
}

.-ga .design__lineupName {
  color: #6C7169;
}

.-go .design__lineupName {
  color: #6C7169;
}

.-gr .design__lineupName {
  color: #786F56;
}

.-gs .design__lineupName {
  color: #5F6565;
}
.design__lineupName {
  font-size: 56px;
  letter-spacing: 0.05em;
  line-height: 1;
  font-weight: 400;
}

@media screen and (max-width: 767px) {
  .design__lineupName {
    font-size: 40px;
  }
}
.design__lineupName span {
  display: block;
  font-size: 16px;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  .design__lineupName span {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    line-height: 1;
  }
}

@media screen and (min-width: 768px) {
  .design__lineupName img {
    height: 2.0625em;
  }
}

@media screen and (max-width: 767px) {
  .design__lineupName img {
    height: 1.75em;
    vertical-align: bottom;
  }
}

@media screen and (min-width: 768px) {
  .design__lineupDesc {
    margin: .625em auto 1em;
    width: 15em;
  }
}

@media screen and (max-width: 1200px) {
  .design__lineupDesc .for-pc {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .design__lineupDesc {
    margin: 0.71429em auto 0.57143em;
  }
}

.design__lineupLink {
  display: block;
}

@media screen and (min-width: 768px) {
  .design__lineupLink {
    line-height: 1.45;
  }
}

@media screen and (max-width: 767px) {
  .design__lineupLink {
    margin-top: .35714em;
    line-height: 1;
  }
  .design__lineupLink:first-child {
    margin-top: 0;
  }
  .design__lineupLink a {
    padding: 0.21429em 0;
  }
}

@media screen and (min-width: 768px) {
  .design__lineup2 {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-wrap: wrap;
    row-gap: 20px;
  }

  .design__lineup2.is_left {
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
            justify-content: flex-start;
    -webkit-box-pack: start;
  }
}

@media screen and (max-width: 767px) {
  .design__lineup2 {
    padding-right: 1.07143em;
    padding-left: 1.07143em;
  }
}

.design__lineup2Item {
  box-sizing: border-box;
}

.design__lineup2Item:last-child .design__lineup2ItemInner {
  border: 0;
}

@media screen and (min-width: 768px) {
  .design__lineup2Item {
    width: calc((100% / 4) - 1px);
  }
}

@media screen and (max-width: 767px) {
  .design__lineup2Item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .design__lineup2Item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
}

@media screen and (min-width: 768px) {
  .design__lineup2ItemInner {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
  }
}

@media screen and (max-width: 767px) {
  .design__lineup2ItemInner {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: justify;
    -ms-flex-align: center;
    -webkit-justify-content: space-between;
            justify-content: space-between;
    -webkit-align-items: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
  }
}

@media screen and (max-width: 767px) {
  .design__lineup2Text, .design__lineup2Thumb {
    width: calc((100% - .5em)/ 2);
  }
}

.design__lineup2Thumb {
  position: relative;
}

@media screen and (min-width: 768px) {
  .design__lineup2Thumb {
    margin-bottom: 1.25em;
  }
}

@media screen and (min-width: 768px) {
  .design__lineup2Badge {
    position: absolute;
    right: 20%;
    bottom: .875em;
    width: 18%;
  }

  #touchless-faucet .design__lineup2Badge {
      right: 5%;
      bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  .design__lineup2Badge {
    display: none;
  }

  #touchless-faucet .design__lineup2Badge {
    display: block;
    width: 25%;
    position: absolute;
    left: 5%;
    bottom: 5%;
  }
}

@media screen and (min-width: 768px) {
  .design__lineup2Text {
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .design__lineup2Text {
    padding: 2.35714em 0 2.14286em;
  }
}

.-lb .design__lineup2Name,
.-ln .design__lineup2Name,
.-lc .design__lineup2Name,
.-lf .design__lineup2Name {
  color: #6C7071;
}

.design__lineup2Name {
  font-size: 56px;
  letter-spacing: 0.05em;
  line-height: 1;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .design__lineup2Name {
    font-size: 40px;
  }
}
.design__lineup2Name span {
  display: block;
  font-size: 16px;
  letter-spacing: 0;
}
@media screen and (max-width: 767px) {
  .design__lineup2Name span {
    display: inline-block;
    margin-left: 10px;
  }
}

@media screen and (min-width: 768px) {
  .design__lineup2Name img {
    height: 2.0625em;
  }
}

@media screen and (max-width: 767px) {
  .design__lineup2Name img {
    height: 1.75em;
    vertical-align: bottom;
  }
}

@media screen and (min-width: 768px) {
  .design__lineup2Desc {
    margin: .625em auto 1em;
    width: 11em;
  }
}

@media screen and (max-width: 1200px) {
  .design__lineup2Desc .for-pc {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .design__lineup2Desc {
    margin: 0.71429em auto 0.57143em;
  }
}

.design__lineup2Link {
  display: block;
}

@media screen and (min-width: 768px) {
  .design__lineup2Link {
    line-height: 1.45;
  }
}

@media screen and (max-width: 767px) {
  .design__lineup2Link {
    margin-top: .35714em;
    line-height: 1;
  }
  .design__lineup2Link:first-child {
    margin-top: 0;
  }
  .design__lineup2Link a {
    padding: 0.21429em 0;
  }
}

@media screen and (min-width: 768px) {
  .design__comfort {
    margin-top: 120px;
  }
}

@media screen and (max-width: 767px) {
  .design__comfort {
    margin-top: 3.57142em;
    margin-bottom: 3.57142em;
  }
}

.design__comfort .design__elInner {
  position: relative;
}

.design__comfortPanel {
  background-color: black;
  color: #fff;
}

.design__comfort .design__elInner .design__comfortWrap {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .design__comfort .design__elInner .design__comfortWrap {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .design__comfort .design__comfortImage {
    width: 74%;
  }
}

@media screen and (max-width: 767px) {
  .design__comfort .design__comfortImage {
    width: 100%;
  }
}

.design__comfort .design__comfortPanel {
  position: relative;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .design__comfort .design__comfortPanel {
    width: 26%;
    background-position: center center;
    background-size: cover;
  }
}

@media screen and (max-width: 767px) {
  .design__comfort .design__comfortPanel {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    min-height: calc(100vw - 1.07143em * 2);
    background-position: left top;
    background-size: auto 100%;
    -ms-flex-wrap: wrap;
    -webkit-box-align: center;
    width: 100%;
    min-height: 100%;
    padding: 1.42857em 0;
  }
}

@media screen and (max-width: 1023px) {
  .design__comfort .design__comfortPanel:before {
    padding-top: 240%;
  }
}

.design__comfort .design__comfortPanelDetail {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .design__comfort .design__comfortPanelDetail {
    position: absolute;
    top: 50%;
    left: 50%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    min-height: 12em;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-flex-wrap: wrap;
  }
}

@media screen and (min-width: 768px) {
  .design__comfort .design__comfortPanelName {
    font-size: 2.8rem;
    line-height: 1.1;
  }
}

@media screen and (max-width: 1023px) {
  .design__comfort .design__comfortPanelName {
    font-size: 2rem;
    line-height: 1;
  }
}

@media screen and (max-width: 767px) {
  .design__comfort .design__comfortPanelDetail {
    width: 100%;
  }
}

.design__comfort .design__comfortPanelName:before {
  display: block;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  font-size: 16px;
  font-size: 1.6rem;
}

@media screen and (min-width: 768px) {
  .design__comfort .design__comfortPanelName:before {
    margin: 0 auto 1em;
    width: 3.125em;
    height: 3.125em;
  }
}

@media screen and (max-width: 767px) {
  .design__comfort .design__comfortPanelName:before {
    margin: 0 auto .5em;
    width: 1.5625em;
    height: 1.5625em;
  }
}

.design__comfortPanelName:before {
  background-image: url(../../images/i_comfortgrid_bl.svg);
}

@media screen and (min-width: 768px) {
  .design__comfort .design__comfortPanelDesc {
    margin-top: 1.25em;
    line-height: 1.5;
  }
  .ie11 .design__comfort .design__comfortPanelDesc {
    padding-bottom: 3.06667em;
  }
}

@media screen and (max-width: 1023px) {
  .design__comfort .design__comfortPanelDesc {
    margin-top: 1.14286em;
    line-height: 1.3;
  }
}

.design__comfort .design__comfortPanelMore {
  margin-top: 0.5em;
}

.design__comfort .design__comfortPanelMore .more__text {
  padding: 1px 0;
}

@media screen and (min-width: 768px) {
  .design__comfort .design__comfortPanelMore {
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
            justify-content: flex-end;
    -webkit-box-pack: end;
  }
  .ie11 .design__comfort .design__comfortPanelMore {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

/* [START] MATTO BLACK /FEATURE */
.design__sub_title {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 26px;
  font-size: 1.8rem;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  .design__sub_title {
    font-size: 1.5rem;
  }
}

.design__matto_black {
  margin-top: 120px;
  margin-bottom: 120px;
}

.design__matto_black .header {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .design__matto_black {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
}

.design__matto_black--feature {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 3.6rem;
  margin-top: 4rem;
}

@media screen and (max-width: 767px) {
  .design__matto_black--feature {
    flex-flow: column;
  }
}

.design__matto_black--feature__inner {
  max-width: 1350px;
  padding-inline: 50px;
  margin-inline: auto;
}

@media screen and (min-width: 767px) and (max-width: 1110px) {
  .design__matto_black--feature__inner {
    padding-inline: 0;
  }
}
@media screen and (max-width: 767px) {
  .design__matto_black--feature__inner {
    padding-left: 4vw;
    padding-right: 4vw;
  }
}

@media screen and (min-width: 768px) {
  .design__matto_black--feature-image {
    width: 40%;
  }
}

@media screen and (min-width: 768px) {
  .design__matto_black--feature-text {
    width: 56%;
  }
}

.design__matto_black--feature-text .design__matto_black--lead_txt {
  letter-spacing: 0.54px;
  font-size: 1.44rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

@media screen and (max-width: 767px) {
  .design__matto_black--feature-text .design__matto_black--lead_txt {
    font-size: 1.2rem;
  }
}

.design__matto_black--feature-text .text_emphasis {
  font-size: 26px;
  font-size: 1.8rem;
  letter-spacing: 0;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  .design__matto_black--feature-text .text_emphasis {
    font-size: 1.5rem;
  }
}

.design__matto_black--lead {
  margin-top: 3rem;
  line-height: 1.9;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .design__matto_black--lead {
    margin-top: 2rem;
    line-height: 1.7;
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  .design__matto_black--image {
    margin-top: 2rem;
  }
}

.design__matto_black--feature-middle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3.6rem;
  margin-top: 4.8rem;
  margin-bottom: 4.8rem;
}

@media screen and (max-width: 767px) {
  .design__matto_black--feature-middle {
    flex-flow: column;
  }
}

.l-grid {
  display: grid;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  grid-template-rows: 1fr auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem 2rem;
}

@media screen and (min-width: 768px) {
  .l-grid {
    width: 50%;
  }
  .l-grid:first-child {
    padding-right: 2rem;
    position: relative;
  }

  .l-grid:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: #D9D9D9;
  }
}

.l-grid .is-row1 {
  grid-row: 1/1;
  grid-column: 1/3;
}

.l-grid .is-row2 {
  grid-row: 2/2;
}

.l-grid .is-row3 {
  grid-row: 1/3;
}

.l-grid .p-sub_title, .l-grid .p-lead {
  font-size: 1.12rem;
}

@media screen and (max-width: 767px) {
  .l-grid .p-sub_title {
    font-size: 1rem;
    letter-spacing: -0.05rem;
  }
}

.l-grid .p-lead {
  font-weight: 600;
}
/* [END] MATTO BLACK /FEATURE */

@media screen and (min-width: 768px) {
  .lowerSection {
    padding-top: 5em;
  }
}

@media screen and (max-width: 767px) {
  .lowerSection {
    padding-top: 3.5em;
  }
}

@media screen and (min-width: 768px) {
  .lowerSection.about {
    padding-top: 5.625em;
  }
}

@media screen and (max-width: 767px) {
  .lowerSection.about {
    padding-bottom: 4.28571em;
  }
}

@media screen and (max-width: 767px) {
  .lowerSection.global {
    padding-top: 4.28571em;
  }
}

.lowerSection__header {
  position: relative;
  text-align: left;
}

.lowerSection__header.-flex {
  text-align: left;
}

.lowerSection__header.-align-c {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .lowerSection__header {
    padding-bottom: 2.75em;
  }
}

@media screen and (max-width: 767px) {
  .lowerSection__header {
    padding-bottom: 2em;
  }
}

@media screen and (max-width: 767px) {
  .global .lowerSection__header {
    margin-right: auto;
    margin-left: auto;
    width: 75%;
    word-break: break-all;
  }
}

@media screen and (min-width: 768px) {
  .lowerSection__header.-flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-box-align: center;
  }
}

@media screen and (max-width: 767px) {
  .lowerSection__header.-align-c {
    padding-right: 0;
    padding-left: 0;
  }
}

.lowerSection__title {
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.2em;
}

.block__title {
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.2em;
  margin-bottom: 0.5em;
}
.design__lineup + .block__title,
.design__lineup2 + .block__title {
  padding-top: 4.0em;
}
@media screen and (min-width: 768px) {
  .lowerSection__title {
    font-size: 2.8rem;
  }
  .block__title {
    font-size: 2.4rem;
  }
  .lowerSection__title .text-space {
    margin-left: 0.45833em;
  }
}

@media screen and (max-width: 767px) {
  .lowerSection__title {
    font-size: 2.1rem;
    line-height: 1.1;
  }
  .block__title {
    font-size: 2.0rem;
    line-height: 1.1;
  }
}

@media screen and (max-width: 320px) {
  .lowerSection__title {
    font-size: 3rem;
  }
  .block__title {
    font-size: 2.5rem;
  }
}

@media screen and (min-width: 768px) {
  .lowerSection__summary {
    padding-top: .5em;
    line-height: 1.4;
  }
}

@media screen and (max-width: 767px) {
  .lowerSection__summary {
    padding-top: .71429em;
    line-height: 1.5;
  }
}

@media screen and (max-width: 320px) {
  .lowerSection__summary {
    padding-top: .66667em;
    font-size: 1.2rem;
  }
}

.-flex .lowerSection__summary {
  position: relative;
}

@media screen and (min-width: 768px) {
  .-flex .lowerSection__summary {
    margin-left: 1.875em;
    padding-top: 0;
    padding-left: 1.875em;
  }
  .-flex .lowerSection__summary:before {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 1px;
    height: 1em;
    background: rgba(0, 0, 0, 0.08);
    content: "";
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

.lowerSection__summarySentence {
  margin-top: 0.625em;
}

.lowerSection__summarySentence:first-child {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .lowerSection__summarySentence {
    margin-top: 0.8125em;
  }
}

.lowerSection__more {
  font-weight: 600;
}

@media screen and (min-width: 768px) {
  .lowerSection__more {
    padding-top: 1em;
  }
}

@media screen and (max-width: 767px) {
  .lowerSection__more {
    padding-top: 0.42857em;
  }
}

.indexList.lowerSection {
  padding-bottom: 6.25em;
}

.indexList__header.lowerSection__header {
  padding-bottom: 1.25em;
}

.indexList__content {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.indexList__item {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.indexList__link {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  padding: 1.25em 0;
  width: 100%;
}

.indexList__date span {
  display: inline-block;
  padding: .125em 0;
  vertical-align: middle;
}

.indexList__title {
  font-weight: 400;
}

.indexList__title span {
  display: inline-block;
  padding: .125em 0;
  vertical-align: middle;
}

@media screen and (min-width: 768px) {
  .indexList__date {
    width: 7.625em;
  }
}

@media screen and (max-width: 767px) {
  .indexList__date {
    width: 7.14286em;
  }
}

@media screen and (min-width: 768px) {
  .indexList__title {
    width: calc(100% - 7.625em - 1px);
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 767px) {
  .indexList__title {
    width: calc(100% - 7.14286em - 1px);
    font-size: 1.4rem;
  }
}

#design {
  background-color: #fff;
}

.design__header {
  color: #000;
  height: auto !important;
}

@media screen and (min-width: 768px) {
  .design__header.lowerSection__header {
    padding-top: 2.4em;
  }
}

@media screen and (max-width: 767px) {
  .design__header.lowerSection__header {
    padding-top: 3.57142em;
    padding-bottom: 0;
  }
}

@media screen and (min-width: 768px) {
  .design__title.lowerSection__title {
    font-size: 2.8rem;
    line-height: 1.24em;
  }
}

@media screen and (max-width: 767px) {
  .design__title.lowerSection__title {
    font-size: 2.1rem;
    line-height: 1.24em;
  }
}

#shower {
  background-color: #000;
}

#shower .shower.lowerSection {
  padding-top: 0;
}

@media screen and (min-width: 768px) {
  .shower.lowerSection {
    padding-bottom: 5.875em;
  }
}

@media screen and (max-width: 1023px) {
  .shower.lowerSection {
    padding-bottom: 3.57143em;
  }
}

@media screen and (max-width: 767px) {
  .shower.lowerSection {
    padding-bottom: 0;
  }
}

@media screen and (max-width: 1023px) {
  .shower__toggle.-show {
    top: -2.85714em !important;
  }
  .-opened .shower__toggle.-show {
    top: inherit !important;
  }
}

.shower__inner {
  position: relative;
}

.shower__header {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  color: #fff;
  -webkit-box-pack: end;
}

.shower__header.lowerSection__header {
  padding-bottom: 0;
}

@media screen and (min-width: 768px) {
  .shower__header {
    height: 46.25em;
  }
}

@media screen and (max-width: 1023px) {
  .shower__header {
    background: url(../../images/bg-relax-sp.jpg) center top no-repeat;
    background-size: cover;
  }
}

@media screen and (max-width: 767px) {
  .shower__header {
    height: 151vw;
  }
}

@media screen and (min-width: 768px) {
  .shower__summary {
    padding-bottom: 5.625em;
  }
}

@media screen and (max-width: 767px) {
  .shower__summary {
    padding-bottom: 5em;
  }
}

@media screen and (max-width: 767px) {
  .shower__content.innerEl-wide {
    padding-right: 0;
    padding-left: 0;
  }
}

.shower__el {
  background: #fff;
}

@media screen and (max-width: 767px) {
  .shower__el:first-child {
    margin-bottom: 2.14286em;
  }
}

.shower__elInner {
  position: relative;
}

@media screen and (min-width: 768px) {
  .shower__elHeader {
    padding-top: 3.75em;
    padding-bottom: 1.25em;
  }
}

@media screen and (max-width: 767px) {
  .shower__elHeader {
    padding-top: 3.21429em;
    padding-bottom: 0.71429em;
  }
}

@media screen and (min-width: 768px) {
  .shower__elName {
    font-size: 3.2rem;
  }
}

@media screen and (max-width: 767px) {
  .shower__elName {
    font-size: 2.8rem;
  }
}

@media screen and (min-width: 1024px) {
  .shower__elBlock {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: justify;
    -ms-flex-align: center;
    -webkit-justify-content: space-between;
            justify-content: space-between;
    -webkit-align-items: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
  }
}

@media screen and (min-width: 768px) {
  .shower__elBlockName {
    font-size: 2.4rem;
  }
}

@media screen and (max-width: 767px) {
  .shower__elBlockName {
    font-size: 2.1rem;
  }
}

.shower__elBlockName:before {
  display: inline-block;
  width: 1.5625em;
  height: 1.5625em;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  vertical-align: middle;
  font-size: 16px;
  font-size: 1.6rem;
}

@media screen and (min-width: 768px) {
  .shower__elBlockName:before {
    margin-right: 0.625em;
  }
}

@media screen and (max-width: 767px) {
  .shower__elBlockName:before {
    margin-right: 0.375em;
  }
}

.-zero .shower__elBlockName:before {
  background-image: url(../../images/icn-tub-zero-bl.png);
}

.-recline .shower__elBlockName:before {
  background-image: url(../../images/icn-tub-recline-bl.png);
}

.shower__elBlockName span {
  display: inline-block;
  vertical-align: middle;
}

.shower__elBlockDesc {
  margin-top: .625em;
  line-height: 1.4;
}

@media screen and (min-width: 1024px) {
  .shower__elBlockText {
    width: 37%;
  }
}

@media screen and (max-width: 1023px) {
  .shower__elBlockText {
    margin-bottom: 1.14286em;
  }
}

.shower__elBlockThumb {
  position: relative;
}

@media screen and (min-width: 1024px) {
  .shower__elBlockThumb {
    width: 63%;
  }
}

.shower__elBlockKv {
  position: relative;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .shower__elBlockKv {
    margin: 3.125em 0;
  }
}

@media screen and (max-width: 767px) {
  .shower__elBlockKv {
    margin: 1.07143em 0;
  }
}

.shower__elBlockKvCaption {
  position: absolute;
  color: #fff;
  font-weight: 600;
}

.shower__elBlockKvCaption:before {
  display: inline-block;
  background-repeat: no-repeat;
  content: "";
  vertical-align: middle;
  font-size: 16px;
  font-size: 1.6rem;
}

@media screen and (min-width: 768px) {
  .shower__elBlockKvCaption {
    bottom: .5em;
    left: .83333em;
    font-size: 2.4rem;
  }
}

@media screen and (max-width: 767px) {
  .shower__elBlockKvCaption {
    bottom: 10px;
    left: 12px;
    font-size: 2rem;
    line-height: 1;
  }
}

@media screen and (min-width: 768px) {
  .shower__elBlockKvCaption:before {
    margin-right: .625em;
    width: 1.5625em;
    height: 1.5625em;
    background-position: center center;
    background-size: contain;
  }
}

@media screen and (max-width: 767px) {
  .shower__elBlockKvCaption:before {
    margin-right: .3125em;
    width: 1.4375em;
    height: 1.4375em;
    background-position: left center;
    background-size: auto 100%;
  }
}

.-zero .shower__elBlockKvCaption:before {
  background-image: url(../../images/icn-tub-zero.png);
}

.-recline .shower__elBlockKvCaption:before {
  background-image: url(../../images/icn-tub-recline.png);
}

@media screen and (max-width: 767px) {
  .shower__elBlockKvCaption:after {
    display: inline-block;
    margin-left: 6px;
    width: 6px;
    height: 9px;
    background: url(../../images/arw-w.svg) center center no-repeat;
    background-size: contain;
    content: "";
    vertical-align: basline;
  }
}

.shower__elBlockKvCaption span {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.shower__elBlockLink {
  position: relative;
  display: block;
  width: 100%;
}

.shower__elBlockMore {
  position: absolute;
  bottom: .375em;
  left: 0;
  display: block;
  width: 100%;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .shower__elBlockRoll {
    padding-bottom: 1.0625em;
    padding-left: 1.25em;
  }
}

@media screen and (max-width: 767px) {
  .selection {
    padding: 0;
  }
}

.selection.lowerSection {
  padding-top: 0;
  padding-bottom: 6.25em;
}

.selection__inner {
  position: relative;
}

.selection__inner:before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  max-width: 75em;
  width: 88%;
  height: 100%;
  content: "";
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

@media screen and (min-width: 1500px) {
  .selection__inner:before {
    max-width: 1500px;
  }
}

.selection__header {
  color: #fff;
}

@media screen and (min-width: 768px) {
  .selection__header.lowerSection__header {
    padding-top: 5em;
    padding-bottom: 3em;
  }
}

@media screen and (max-width: 767px) {
  .selection__header.lowerSection__header {
    padding-top: 3.57143em;
    padding-bottom: 2.14285em;
  }
}

@media screen and (min-width: 768px) {
  .selection__title.lowerSection__title {
    font-size: 2.8rem;
    line-height: 0.74em;
  }
}

@media screen and (max-width: 767px) {
  .selection__title.lowerSection__title {
    font-size: 2.1rem;
  }
}

.selection__content {
  position: relative;
}

@media screen and (min-width: 768px) {
  .selection__content {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
            justify-content: space-between;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-box-pack: justify;
  }
}

#shower-z-selection,
#shower-g-selection {
  margin-top: -80px;
  padding-top: 80px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  #shower-z-selection,
  #shower-g-selection {
    margin-top: -100px;
    padding-top: 100px;
  }
}

@media screen and (max-width: 767px) {
  #shower-z-selection,
  #shower-g-selection {
    margin-top: -50px;
    padding-top: 50px;
  }
}

@media screen and (max-width: 767px) {
  #shower-z-selection {
    padding-bottom: 2.9375em;
  }
}

@media screen and (min-width: 768px) {
  #shower-z-selection {
    padding-bottom: 6.0em;
  }
}

.selection__bnr {
  position: relative;
}

@media screen and (max-width: 767px) {
  .selection__bnr {
    padding-bottom: 6.0em;
  }
  .selection__bnr .bnrPanel {
    margin-top: 0;
  }
}

@media screen and (min-width: 768px) {
  .selection__content .selection__el {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    width: calc((100% - .375em)/ 2);
    -ms-flex-wrap: wrap;
  }
}

.selection__content .selection__el:first-child {
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
          flex-direction: row-reverse;
  background: url(../../images/bg-shower-warm-01.jpg) top left no-repeat;
}

@media screen and (min-width: 768px) {
  .selection__content .selection__el:first-child {
    background-size: auto 100%;
  }
}

@media screen and (max-width: 767px) {
  .selection__content .selection__el:first-child {
    content: none;
    background-size: cover;
  }
  .selection__content .selection__el:first-child:before {
    display: block;
    padding-top: 100%;
    content: "";
  }
}

.selection__content .selection__elPanel {
  position: relative;
  background-repeat: no-repeat;
  color: #fff;
}

.selection__content .selection__elPanel:before {
  display: block;
  padding-top: 168%;
}

@media screen and (min-width: 768px) {
  .selection__content .selection__elPanel {
    width: 50%;
    background-position: center center;
    background-size: cover;
  }
}

@media screen and (max-width: 767px) {
  .selection__content .selection__elPanel {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    min-height: calc(100vw - 1.07143em * 2);
    background-color: #000;
    background-position: left top;
    background-size: auto 100%;
    -ms-flex-wrap: wrap;
    -webkit-box-align: center;
  }
}

@media screen and (min-width: 768px) {
  .selection__content .selection__elPanel.-warm {
    background-image: url(../../images/bg-shower-warm-02.jpg);
  }
}

@media screen and (max-width: 767px) {
  .selection__content .selection__elPanel.-warm {
    background-image: url(../../images/bg-shower-warm-02-sp.jpg);
    background-position: right top;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 768px) {
  .selection__content .selection__elPanel.-comfort {
    background-image: url(../../images/bg-shower-comfort.jpg);
  }
}

@media screen and (max-width: 767px) {
  .selection__content .selection__elPanel.-comfort {
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
            flex-direction: row-reverse;
    background-image: url(../../images/bg-shower-comfort-sp.jpg);
    background-size: 100% auto;
  }
}

@media screen and (min-width: 768px) {
  .selection__content .selection__elPanel.-active {
    background-image: url(../../images/bg-shower-active.jpg);
  }
}

@media screen and (max-width: 767px) {
  .selection__content .selection__elPanel.-active {
    background-image: url(../../images/bg-shower-active-sp.jpg);
    background-position: right bottom;
    background-size: 100% auto;
  }
}

@media screen and (max-width: 1023px) {
  .selection__content .selection__elPanel:before {
    padding-top: 240%;
  }
}

@media screen and (min-width: 768px) {
  .selection__content .selection__elPanel:before {
    content: "";
  }
}

.selection__content .selection__elPanelDetail {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .selection__content .selection__elPanelDetail {
    position: absolute;
    top: 50%;
    left: 50%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    padding: 0 .625em;
    min-height: 16.25em;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-flex-wrap: wrap;
  }
}

@media screen and (max-width: 767px) {
  .selection__content .selection__elPanelDetail {
    width: 60%;
  }
}

@media screen and (min-width: 768px) {
  .selection__content .selection__elPanelName {
    font-size: 2.8rem;
    line-height: 1.1;
  }
}

@media screen and (max-width: 1023px) {
  .selection__content .selection__elPanelName {
    font-size: 2rem;
    line-height: 1;
  }
}

.selection__content .selection__elPanelName:before {
  display: block;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  font-size: 16px;
  font-size: 1.6rem;
}

@media screen and (min-width: 768px) {
  .selection__content .selection__elPanelName:before {
    margin: 0 auto 1em;
    width: 3.125em;
    height: 3.125em;
  }
}

@media screen and (max-width: 767px) {
  .selection__content .selection__elPanelName:before {
    margin: 0 auto .5em;
    width: 1.5625em;
    height: 1.5625em;
  }
}

.-warm .selection__elPanelName:before {
  background-image: url(../../images/i_warm.svg);
}

.-comfort .selection__elPanelName:before {
  background-image: url(../../images/i_comfort.svg);
}

.-active .selection__elPanelName:before {
  background-image: url(../../images/i_active.svg);
}

@media screen and (min-width: 768px) {
  .selection__content .selection__elPanelDesc {
    margin-top: 1.25em;
    line-height: 1.5;
  }
  .ie11 .selection__content .selection__elPanelDesc {
    padding-bottom: 3.06667em;
  }
}

@media screen and (max-width: 1023px) {
  .selection__content .selection__elPanelDesc {
    margin-top: 1.14286em;
    line-height: 1.3;
  }
}

.selection__content .selection__elPanelMore {
  margin-top: 1em;
}

.selection__content .selection__elPanelMore .more__text {
  padding: 1px 0;
}

@media screen and (min-width: 768px) {
  .selection__content .selection__elPanelMore {
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
            justify-content: flex-end;
    margin-top: auto;
    -webkit-box-pack: end;
  }
  .ie11 .selection__content .selection__elPanelMore {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .selection__content2 {
    padding-bottom: 2.9375em;
  }
}

@media screen and (min-width: 768px) {
  .selection__content2 {
    padding-bottom: 6.0em;
  }
}

@media screen and (min-width: 768px) {
  .selection__content2 .selection__el {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media screen and (min-width: 768px) {
  .selection__content2 .selection__el:first-child {
    background-size: auto 100%;
  }
}

.selection__content2 .selection__elPanel {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  background-repeat: no-repeat;
  color: #fff;
}

.selection__content2 .selection__elPanel:before {
  display: block;
  padding-top: 86%;
}

@media screen and (min-width: 768px) {
  .selection__content2 .selection__elPanel {
    width: 33.33%;
    background-position: center center;
    background-size: cover;
  }
}

@media screen and (min-width: 1366px) {
  .selection__content2 .selection__elPanel:before {
    display: block;
    padding-top: 45.758%;
  }
}

@media screen and (max-width: 767px) {
  .selection__content2 .selection__elPanel {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    min-height: 62vw;
    background-color: #000;
    background-position: left top;
    background-size: auto 100%;
    -ms-flex-wrap: wrap;
    -webkit-box-align: center;
  }
}

@media screen and (min-width: 768px) {
  .selection__content2 .selection__elPanel.-heat {
    background-image: url(../../images/bg-shower-heat-tab.jpg);
  }
}

@media screen and (min-width: 1366px) {
  .selection__content2 .selection__elPanel.-heat {
    background-image: url(../../images/bg-shower-heat.jpg);
  }
}

@media screen and (max-width: 767px) {
  .selection__content2 .selection__elPanel.-heat {
    background-image: url(../../images/bg-shower-heat-sp.jpg);
    background-position: center top;
    background-size: cover;
  }
}

@media screen and (min-width: 768px) {
  .selection__content2 .selection__elPanel.-safety {
    background-image: url(../../images/bg-shower-safety-tab.jpg);
  }
}

@media screen and (min-width: 1366px) {
  .selection__content2 .selection__elPanel.-safety {
    background-image: url(../../images/bg-shower-safety.jpg);
  }
}

@media screen and (max-width: 767px) {
  .selection__content2 .selection__elPanel.-safety {
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
            flex-direction: row-reverse;
    background-image: url(../../images/bg-shower-safety-sp.jpg);
    background-position: center top;
    background-size: cover;
  }
}

@media screen and (min-width: 768px) {
  .selection__content2 .selection__elPanel.-mini {
    background-image: url(../../images/bg-shower-mini-tab.jpg);
  }
}

@media screen and (min-width: 1366px) {
  .selection__content2 .selection__elPanel.-mini {
    background-image: url(../../images/bg-shower-mini.jpg);
  }
}

@media screen and (max-width: 767px) {
  .selection__content2 .selection__elPanel.-mini {
    background-image: url(../../images/bg-shower-mini-sp.jpg);
    background-position: center top;
    background-size: cover;
  }
}

@media screen and (max-width: 1023px) {
  .selection__content2 .selection__elPanel:before {
    padding-top: 120%;
  }
}

@media screen and (min-width: 768px) {
  .selection__content2 .selection__elPanel:before {
    content: "";
  }
}

.selection__content2 .selection__elPanelDetail {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .selection__content2 .selection__elPanelDetail {
    position: absolute;
    top: 50%;
    left: 50%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    padding: 0 .625em;
    min-height: 16.0em;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-flex-wrap: wrap;
  }
}

@media screen and (min-width: 1366px) {
  .selection__content2 .selection__elPanelDetail {
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 11.0em;
  }
}

@media screen and (max-width: 767px) {
  .selection__content2 .selection__elPanelDetail {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .selection__content2 .selection__elPanelName {
    font-size: 2.8rem;
    line-height: 1.1;
  }
}

@media screen and (max-width: 1023px) {
  .selection__content2 .selection__elPanelName {
    font-size: 2rem;
    line-height: 1;
  }
}

@media screen and (min-width: 1366px) {
  .selection__content2 .selection__elPanelName {
    width: 50%;
    margin-top: 0;
  }
}

.selection__content2 .selection__elPanelName:before {
  display: block;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  font-size: 16px;
  font-size: 1.6rem;
}

@media screen and (min-width: 768px) {
  .selection__content2 .selection__elPanelName:before {
    margin: 0 auto 1em;
    width: 3.125em;
    height: 3.125em;
  }
}

@media screen and (max-width: 767px) {
  .selection__content2 .selection__elPanelName:before {
    margin: 0 auto .5em;
    width: 1.5625em;
    height: 1.5625em;
  }
}

.-heat .selection__elPanelName:before {
  background-image: url(../../images/i_heat.svg);
}

.-safety .selection__elPanelName:before {
  background-image: url(../../images/i_safety.svg);
}

.-mini .selection__elPanelName:before {
  background-image: url(../../images/i_mini.svg);
}

@media screen and (min-width: 768px) {
  .selection__content2 .selection__elPanelDesc {
    margin-top: 1.25em;
    line-height: 1.5;
  }
}

@media screen and (max-width: 1023px) {
  .selection__content2 .selection__elPanelDesc {
    margin-top: 1.14286em;
    line-height: 1.3;
  }
}

@media screen and (min-width: 1366px) {
  .selection__content2 .selection__elPanelDesc {
    width: 50%;
    margin-top: 0;
  }
}

.selection__content2 .selection__elPanelMore {
  width: 100%;
  margin-top: 1em;
}

.selection__content2 .selection__elPanelMore .more__text {
  padding: 1px 0;
}

@media screen and (min-width: 768px) {
  .selection__content2 .selection__elPanelMore {
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
            justify-content: flex-end;
    margin-top: auto;
    -webkit-box-pack: end;
  }
  .ie11 .selection__content2 .selection__elPanelMore {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

sub.sub {
  font-weight: 400;
  font-size: 9px;
  font-size: 0.9rem;
}

.bnr__faucet-lavatory {
  margin-top: 55px;
  /*margin-bottom: 110px;*/
  position: relative;
}

@media screen and (max-width: 767px) {
  .bnr__faucet-lavatory {
    margin-top: 45px;
    /*margin-bottom: 45px;*/
  }
}

.bnr__faucet-lavatory > a {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

@media screen and (max-width: 767px) {
  .bnr__faucet-lavatory > a {
    display: block;
  }
}

.bnr__faucet-lavatory .area {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateY(-60%) translateX(-50%);
  -webkit-transform: translateY(-60%) translateX(-50%);
}

.bnr__faucet-lavatory .area-logo {
  width: 40vw;
  max-width: 730px;
}

@media screen and (max-width: 767px) {
  .bnr__faucet-lavatory .area-logo {
    width: 80vw;
  }
}

/* [START] for TOUCHLESS FAUCET */
@media screen and (max-width: 767px) {
  .bnr__faucet-lavatory.is-touchless .area {
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
  }
}
.bnr__faucet-lavatory.is-touchless .area-logo {
  width: 80vw;
  max-width: 1120px;
}
/* [END] for TOUCHLESS FAUCET */

.bnr__faucet-lavatory .area-btn {
  display: block;
  margin-top: 4vw;
  text-align: center;
}

@media screen and (min-width: 1500px) {
  .bnr__faucet-lavatory .area-btn {
    margin-top: 74px;
  }
}

.bnr__faucet-lavatory .area-btn a {
  display: inline-block;
}

.bnr__faucet-lavatory .area-btn a img {
  width: 19.45vw;
  max-width: 280px;
}

@media screen and (max-width: 767px) {
  .bnr__faucet-lavatory .area-btn {
    display: none;
  }
}

/* [START] for MATTO BLACK */
.bnr__matto_black {
  margin-top: 55px;
  position: relative;
}

@media screen and (max-width: 767px) {
  .bnr__matto_black {
    margin-top: 45px;
  }
}

.bnr__matto_black > a {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

@media screen and (max-width: 767px) {
  .bnr__matto_black > a {
    display: block;
  }
}

.bnr__matto_black .area {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateY(-60%) translateX(-50%);
  -webkit-transform: translateY(-60%) translateX(-50%);
}

.bnr__matto_black .area-logo {
  width: 40vw;
  max-width: 730px;
}
@media screen and (max-width: 767px) {
  .bnr__matto_black .area-logo {
    width: 80vw;
  }
}


@media screen and (max-width: 767px) {
  .bnr__matto_black.is-touchless .area {
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
  }
}
.bnr__matto_black.is-touchless .area-logo {
  width: 80vw;
  max-width: 1120px;
}


.bnr__matto_black .area-btn {
  display: block;
  margin-top: 4vw;
  text-align: center;
  max-width: 270px;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .bnr__matto_black .area-btn {
    max-width: 270px;
  }
}
@media screen and (min-width: 1500px) {
  .bnr__matto_black .area-btn {
    margin-top: 74px;
  }
}

.bnr__matto_black .area-btn a {
  display: inline-block;
}

.bnr__matto_black .area-btn button img {
  width: 19.45vw;
  max-width: 280px;
}

@media screen and (max-width: 767px) {
  .bnr__matto_black .area-btn button img {
    width: 50vw;
    max-width: 100%;
  }
}
/* [END] for MATTO BLACK */

.bnr__shower {
  margin-top: 55px;
  margin-bottom: 110px;
  padding-right: 0.625em;
  padding-left: 0.625em;
  position: relative;
}

.bnr__shower img {
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .bnr__shower {
    margin-top: 45px;
    margin-bottom: 45px;
    padding-right: 0;
    padding-left: 0;
  }
}

.bnr__shower > a {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

@media screen and (max-width: 767px) {
  .bnr__shower > a {
    display: block;
  }
}

.bnr__shower .area-logo {
  width: 40vw;
  max-width: 640px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateY(-40%) translateX(-90%);
  -webkit-transform: translateY(-40%) translateX(-90%);
}

@media screen and (max-width: 767px) {
  .bnr__shower .area-logo {
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }
}

.bnr__shower .area-btn {
  display: block;
  margin-top: 4vw;
  text-align: center;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

.bnr__shower .area-btn a {
  display: inline-block;
}

.bnr__shower .area-btn a img {
  width: 19.45vw;
  max-width: 280px;
}

@media screen and (max-width: 767px) {
  .bnr__shower .area-btn {
    display: none;
  }
}




.design__lineupName .design__lineupSeriesTxt,
.design__lineup2Name .design__lineup2SeriesTxt {
  font-size: 42px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.0;
}
@media screen and (max-width: 767px) {
  .design__lineupName .design__lineupSeriesTxt,
  .design__lineup2Name .design__lineup2SeriesTxt {
    font-size: 30px;
    text-align: left;
    margin-left: 0;
    vertical-align: baseline;
  }
  .design__lineupName .design__lineupSeriesTxt + span,
  .design__lineup2Name .design__lineup2SeriesTxt + span {
    font-size: 14px;
  }
}

#touchless-faucet .design__lineupSeriesTxt,
#touchless-faucet .design__lineup2SeriesTxt {
  color: #6C7071;
}
#touchless-faucet .design__lineupName,
#touchless-faucet .design__lineup2Name {
  color: #6C7071;
}


@media screen and (min-width: 768px) {
  .design__banner {
    margin-top: 120px;
  }
  .design__banner + .design__banner {
    margin-top: 60px;
  }
}

@media screen and (max-width: 767px) {
  .design__banner {
    margin-top: 3.57142em;
    /*margin-bottom: 3.57142em;*/
  }
  .design__banner + .design__banner {
    margin-top: 1.785221em;
  }
}

.design__banner .design__elInner {
  position: relative;
}

.design__bannerPanel {
  background-color: black;
  color: #fff;
}

.design__banner .design__elInner .design__bannerWrap {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 767px) {
  .design__banner .design__elInner .design__bannerWrap {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .design__banner .design__bannerImage {
    width: 74%;
  }
}

@media screen and (max-width: 767px) {
  .design__banner .design__bannerImage {
    width: 100%;
  }
}

.design__banner .design__bannerPanel {
  position: relative;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .design__banner .design__bannerPanel {
    width: 26%;
    background-position: center center;
    background-size: cover;
  }
}

@media screen and (max-width: 767px) {
  .design__banner .design__bannerPanel {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    min-height: calc(100vw - 1.07143em * 2);
    background-position: left top;
    background-size: auto 100%;
    -ms-flex-wrap: wrap;
    -webkit-box-align: center;
    width: 100%;
    min-height: 100%;
    padding: 1.42857em 0;
  }
}

@media screen and (max-width: 1023px) {
  .design__banner .design__bannerPanel:before {
    padding-top: 240%;
  }
}

.design__banner .design__bannerPanelDetail {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .design__banner .design__bannerPanelDetail {
    position: absolute;
    top: 50%;
    left: 50%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    min-height: 12em;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-flex-wrap: wrap;
  }
}

@media screen and (min-width: 768px) {
  .design__banner .design__bannerPanelName {
    font-size: 2.8rem;
    line-height: 1.1;
  }
}

@media screen and (max-width: 1023px) {
  .design__banner .design__bannerPanelName {
    font-size: 2rem;
    line-height: 1;
  }
}

@media screen and (max-width: 767px) {
  .design__banner .design__bannerPanelDetail {
    width: 100%;
  }
}

.design__banner .design__bannerPanelName:before {
  display: block;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  font-size: 16px;
  font-size: 1.6rem;
}

@media screen and (min-width: 768px) {
  .design__banner .design__bannerPanelName:before {
    margin: 0 auto 1em;
    width: 3.125em;
    height: 3.125em;
  }
}

@media screen and (max-width: 767px) {
  .design__banner .design__bannerPanelName:before {
    margin: 0 auto .5em;
    width: 1.5625em;
    height: 1.5625em;
  }
}

.design__bannerPanelName:before {
  background-image: url(../../images/i_comfortgrid_bl.svg);
}
.design__bannerPanelName.is-ewater:before {
  background-image: url(../../images/i_ewater_bl.svg);
}
.design__bannerPanelName.is-ecopower:before {
  background-image: url(../../images/i_ecopower_bl.svg);
}

@media screen and (min-width: 768px) {
  .design__banner .design__bannerPanelDesc {
    margin-top: 1.25em;
    line-height: 1.5;
  }
  .ie11 .design__banner .design__bannerPanelDesc {
    padding-bottom: 3.06667em;
  }
}

@media screen and (max-width: 1023px) {
  .design__banner .design__bannerPanelDesc {
    margin-top: 1.14286em;
    line-height: 1.3;
  }
}

.design__banner .design__bannerPanelMore {
  margin-top: 0.5em;
}

.design__banner .design__bannerPanelMore .more__text {
  padding: 1px 0;
}

@media screen and (min-width: 768px) {
  .design__banner .design__bannerPanelMore {
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
            justify-content: flex-end;
    -webkit-box-pack: end;
  }
  .ie11 .design__banner .design__bannerPanelMore {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

/* [START] for TOUCHLESS */
.design__banner.is-flex {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-pack: justify;
  -ms-flex-align: stretch;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: stretch;
          align-items: stretch;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-box-align: stretch;
  -webkit-box-pack: justify;
}
.design__banner.is-flex .design__el {
  width: 49.8%;
  border: 1px solid #ACB2B2;
}
.design__banner.is-flex .design__bannerImage,
.design__banner.is-flex .design__bannerPanel {
  width: 50%;
}
.design__banner.is-flex .design__bannerPanelDetail {
  min-height: 6em;
}

@media screen and (max-width: 767px) {
  .design__banner.is-flex .design__elInner .design__bannerWrap {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: justify;
    -ms-flex-align: stretch;
    -webkit-justify-content: space-between;
            justify-content: space-between;
    -webkit-align-items: stretch;
            align-items: stretch;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-box-align: stretch;
    -webkit-box-pack: justify;
  }
  .design__banner.is-flex .design__bannerPanelName {
    font-size: 3.866667vw;
  }
  .design__banner.is-flex .design__bannerPanelMore {
    font-size: 1.866667vw;
  }
}

.anchor-section {
  padding-top: 10.0em;
}
@media screen and (max-width: 767px) {
  .anchor-section {
    padding-top: 4.0em;
  }
}

.bnr-shower-line-up {
  margin-bottom: 40px;
}

/* [END] for TOUCHLESS */


/**
 * SHOWCASEのスライダー
 */
 :root {
  --base-font-size: 16;
  --rem-font-size: 16px;
  --inner-padding: calc(50 / var(--base-font-size) * var(--rem-font-size));
}
 .showcase-slider {
  position: relative;
  margin-top: 60px;
  margin-bottom: 40px;
  /* max-width: calc(1440 / var(--base-font-size) * var(--rem-font-size));
  margin-left: auto;
  margin-right: auto; */
}

.showcase__card {
  display: block;
  overflow: hidden;
}

@media screen and (min-width: 1024.1px) {
  .showcase__card {
    -webkit-transition: -webkit-filter 0.3s ease;
    transition: -webkit-filter 0.3s ease;
    transition: filter 0.3s ease;
    transition: filter 0.3s ease, -webkit-filter 0.3s ease;
  }

  .showcase__card:hover {
    /* filter: brightness(140%); */
    /* filter: saturate(140%); */
    -webkit-filter: brightness(1.2);
            filter: brightness(1.2);
  }
}

.showcase-slider .swiper-slide-active .showcase-slider__background {
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-name: bg-fade2;
          animation-name: bg-fade2;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.showcase-slider__indicator {
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .showcase-slider__indicator {
    display: -ms-grid;
    display: grid;
    -ms-flex-align: center;
        -webkit-box-align: center;
            align-items: center;
    margin-top: calc(15 / var(--base-font-size) * var(--rem-font-size));
    gap: calc(35 / var(--base-font-size) * var(--rem-font-size));
    padding-right: calc(20 / var(--base-font-size) * var(--rem-font-size));
    padding-left: calc(20 / var(--base-font-size) * var(--rem-font-size));
    -ms-grid-columns:
      calc(8 / var(--base-font-size) * var(--rem-font-size)) calc(35 / var(--base-font-size) * var(--rem-font-size))
      1fr calc(35 / var(--base-font-size) * var(--rem-font-size))
      calc(8 / var(--base-font-size) * var(--rem-font-size));
    grid-template-columns:
      calc(8 / var(--base-font-size) * var(--rem-font-size))
      1fr
      calc(8 / var(--base-font-size) * var(--rem-font-size));
  }
}
.showcase-slider__control {
  position: absolute;
  right: calc(40 / var(--base-font-size) * var(--rem-font-size));
  bottom: calc(42 / var(--base-font-size) * var(--rem-font-size));
  z-index: 1;
}
@media screen and (min-width: 0px) and (max-width: 767px) {
  .showcase-slider__control {
    bottom: calc(80 / var(--base-font-size) * var(--rem-font-size));
    right: calc(10 / var(--base-font-size) * var(--rem-font-size));
  }
}
.showcase-slider__play,
.showcase-slider__pause {
  display: none;
}
.showcase-slider__play.is-active,
.showcase-slider__pause.is-active {
  display: block;
}

.showcase-slider__pagination {
  position: absolute;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  gap: calc(10 / var(--base-font-size) * var(--rem-font-size));
  right: calc(40 / var(--base-font-size) * var(--rem-font-size));
  bottom: calc(20 / var(--base-font-size) * var(--rem-font-size));
  z-index: 1;
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .showcase-slider__pagination {
    gap: calc(4 / var(--base-font-size) * var(--rem-font-size));
    position: static;
  }
}

.showcase-slider__bullet {
  position: relative;
  width: 30px;
  height: 3px;
  background-color: #fff;
  transition: background-color .5s;
}
.showcase-slider__bullet.-active {
  background-color: #666;
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .showcase-slider__bullet {
    background: #cbcbcb;
    width: auto;
    -ms-flex-positive: 1;
        -webkit-box-flex: 1;
            flex-grow: 1;
  }
}

.showcase-slider__bullet.-active::before {
  content: '';
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: bullet;
          animation-name: bullet;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .showcase-slider__bullet.-active::before {
    background: #626262;
  }
}

@-webkit-keyframes bullet {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@keyframes bullet {
  0% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

.showcase-slider__button-prev {
  position: absolute;
  z-index: 1;
  left: calc(40 / var(--base-font-size) * var(--rem-font-size));
  top: 50%;
  -webkit-transform: translateY(-50%) scaleX(-1);
          transform: translateY(-50%) scaleX(-1);
  width: calc(26 / var(--base-font-size) * var(--rem-font-size));
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .showcase-slider__button-prev {
    width: auto;
    position: static;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
}

.showcase-slider__button-prev::before {
  content: '';
  display: block;
  width: calc(80 / var(--base-font-size) * var(--rem-font-size));
  height: calc(80 / var(--base-font-size) * var(--rem-font-size));
  background: transparent;
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-55%, -50%);
          transform: translate(-55%, -50%);
  border-radius: 50%;
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .showcase-slider__button-prev::before {
    display: none;
  }
}

.showcase-slider__button-next {
  position: absolute;
  z-index: 1;
  right: calc(40 / var(--base-font-size) * var(--rem-font-size));
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: calc(26 / var(--base-font-size) * var(--rem-font-size));
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .showcase-slider__button-next {
    width: auto;
    position: static;
    -webkit-transform: none;
            transform: none;
  }
}

.showcase-slider__button-next::before {
  content: '';
  display: block;
  width: calc(80 / var(--base-font-size) * var(--rem-font-size));
  height: calc(80 / var(--base-font-size) * var(--rem-font-size));
  background: transparent;
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-55%, -50%);
          transform: translate(-55%, -50%);
  border-radius: 50%;
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .showcase-slider__button-next::before {
    display: none;
  }
}
/* [END] for SHOWCASEのスライダー */

/*20240209アクセシビリティ改修*/
.more,.page a.more {
  color: #2874B0;
}
.more__text:before {
  background: currentColor;
}
.more__icn:after {
  background-image: none;
  mask-image: url(../../images/arw.svg);
  mask-position: center center;
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: currentColor;
}