/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2018/04/16, 14:00:41
    Author     : mediacubetakeon
*/

body {
    font: 13px/1.7 "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "モリサワ 新ゴ R", "Droid Sans", メイリオ, sans-serif;
}
#body_inner {
    overflow: hidden;
}
[data-namespace='index'] {
    margin-top:-130px;
}
a:focus,.btn:focus {
    outline: none;
}
.index section:after {
    background:none;
}



/**     movie       **/

#top-movie {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
#top-movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#mainvisual .visualplay {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -40px;
    transform: translate(-50%, -50%);
}

.mod_bgMovie .movieOverlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 980px;
    z-index: 10;
}
.mod_bgMovie .movieOverlay > .inner > .innerContent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.mod_bgMovie .movieOverlay > .inner {
    display: table;
    width: 980px;
    height: 100%;
}

.mod_bgMovie {
    height:541px;
    overflow: hidden;
}
#lineup .slick-next {
    right:0;
    display: none !important;
}

/**     concept     **/

#concept {
    padding:5% 0;
}
.concept-inner h2 {
    text-align: center;
    margin:0 0 40px 0;
}
.concept-inner p.concept-catch {
    text-align: center;
    font-size:26px;
    font-weight:600;
    margin:2% 0;
}
.concept-inner .concept-text p {
    font-size:18px;
    color:#8d8d8d;
    text-align: center;
    line-height:1.8;
}


/**     base        **/

#benefit h2,#lineup h2 {
    text-align: center;
    margin-bottom:3%;
    font-family: 'Montserrat', sans-serif;
}
#interaction h2.u-ttl {
    font-family: 'Montserrat', sans-serif;
}
.benefit-btn a,.detail-btn a {
    display: block;
    text-decoration: none;
    text-align: left;
    padding-left:10px;
}
.benefit-btn a {
    font-size:20px;
}
.benefit-image img {
    width:100%;
    cursor: pointer;
}
/**基本**/
.benefit-btn::before,
.benefit-btn::after,
.detail-btn::before,
.detail-btn::after,
.more-lineup::before,
.more-lineup::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
/**基本**/
.benefit-btn,
.benefit-btn::before,
.benefit-btn::after,
.detail-btn,
.detail-btn::before,
.detail-btn::after,
.more-lineup,
.more-lineup::before,
.more-lineup::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.benefit-btn,.detail-btn,.more-lineup {
  position: relative;
  z-index: 2;
  border: 1px solid #000;
  color: #000;
  line-height: 50px;
  overflow: hidden;
  text-align: center;
}
.benefit-btn:hover,.detail-btn:hover,.more-lineup:hover {
  color: #fff;
}
.benefit-btn::after {
  top: -100%;
  width: 100%;
  height: 100%;
}
.detail-btn::after,.more-lineup::after {
    top:-100%;
    left:-100%;
    width:100%;
    height:100%;
}
.benefit-btn:hover::after {
  top: 0;
  background-color: #737373;
}
.detail-btn:hover::after,.more-lineup:hover::after {
    top:0;
    left:0;
    background-color:#737373;
}
.benefit-btn,.detail-btn,.more-lineup {
    position: relative;
}
.benefit-btn a:hover,.detail-btn a:hover,.more-lineup a:hover {
    color:#fff;
}
.benefit-btn a:before,.detail-btn a:before,.more-lineup a:before {
    content:"";
    position: absolute;
    right: 18.8px;
    top: 22%;
    width: 50px;
    height: 20px;
    border-right: 1px solid #000;
    display: inline-block;
}
.benefit-btn a:after,.detail-btn a:after,.more-lineup a:after {
    position: absolute;
    top: 42%;
    right: 15px;
    width: 10px;
    height: 10px;
    content: '';
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.benefit-btn a:hover:before,.detail-btn a:hover:before,.more-lineup a:hover:before {
    border-right: 1px solid #fff;
}
.benefit-btn a:hover:after,.detail-btn a:hover:after,.more-lineup a:hover:after {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}
.detail-btn a:hover:before,.more-lineup a:hover:before {
    background:#fff;
}
#lineup.linup-bottom {
    margin-top:10%;
}

/**     detail      **/

#interaction {
    padding-top:10%;
}

.interaction-detail a:before {
    content:"";
    position: absolute;
    right: 14px;
    top: 49%;
    width: 100px;
    height: 1px;
    background: #333;
    display: inline-block;
}
.interaction-detail a:after {
    position: absolute;
    top: 43%;
    right: 15px;
    width: 10px;
    height: 10px;
    content: '';
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.interaction-detail {
    position: relative;
    text-align: center;
}
.interaction-detail a {
    background:#ddd;
    width:50%;
    display: block;
    margin:5% auto;
    padding:2%;
    font-size:24px;
    border:2px solid #999;
    position: relative;
}
.interaction-detail a:hover {
    text-decoration: none;
}

.interaction-image img {
    width:auto;
}
.interaction-text h3 {
    font-size:64px;
    letter-spacing: 3px
}
.interaction-text p {
    font-size:35px;
    line-height:40px;
}
#interaction .u-ttl {
    text-align: left;
    margin-bottom: 0px;
}
.index .u-ttl {
    margin-top:0;
}
.design .interaction-text {
    width:60%;
    margin:0 auto 0;
    position: relative;
    z-index: 3;
}
.cleanliness .interaction-text {
    width:90%;
    margin:-10% auto 0;
    position: relative;
    z-index: 3;
}
.hospitality .interaction-text {
    width:80%;
    margin:-50% auto 0;
    position: relative;
    z-index: 3;
}
.sustainability .interaction-text {
    width:100%;
    margin:-35% auto 0;
    position: relative;
    z-index: 3;
}
.washlet-sust-text-inner {
    width:70%;
    margin:0 auto;
    font-size:18px;
    vertical-align: middle;
    display: table-cell; 
}
.washlet-content-category .washlet-sust-text-inner p {
    font-size:18px;
}
#sustainability div {
    height:50px;
}
.washlet-design-text {
    float:right;
}
.washlet-content-category .washlet-design-text-inner p {
    font-size:22px;
    text-align: left;
}
.washlet-design-text-inner p span {
    font-weight:900;
}
.washlet-design-text-inner h3 {
    font-size:26px;
}
.design.interaction-image:after {
    content:"";
    background:#ddd;
    width:340px;
    height:350px;
    display: inline-block;
    position: absolute;
    top: 40px;
    z-index: -2;
    left: -290px;
}
.cleanliness.interaction-image:after {
    content:"";
    background:#ddd;
    width:640px;
    height:550px;
    display: inline-block;
    position: absolute;
    top: 30px;
    z-index: -2;
    right: -420px;
}
.hospitality.interaction-image:after {
    content:"";
    background:#ddd;
    width:730px;
    height:470px;
    display: inline-block;
    position: absolute;
    top: 95px;
    z-index: -1;
    left: -570px;
}
.sustainability.interaction-image:after {
    content:"";
    background:#ddd;
    width:640px;
    height:360px;
    display: inline-block;
    position: absolute;
    top: 30px;
    z-index: -2;
    right: -510px;
}
.interaction-image {
    position: relative;
    z-index: 2;
}

.detail-btn {
    position: relative;
    line-height: 50px;
    border: 1px solid #000;
    width:200px;
}
.detail-btn a {
    display: block;
    padding-left: 15px;
    font-size: 20px;
    text-align: left;
}
.detail-btn a:hover {
    text-decoration: none;
}
.detail-btn a:before {
    content:"";
    position: absolute;
    right: 14px;
    top: 49%;
    width: 50px;
    height: 1px;
    background: #000;
    display: inline-block;
}
.detail-btn a:after {
    position: absolute;
    top: 40.5%;
    right: 15px;
    width: 10px;
    height: 10px;
    content: '';
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#design {
    margin-top:-110px;
    margin-bottom:10%;
    padding-top:200px;
}
#cleanliness {
    margin-top:-280px;
    margin-bottom:10%;
    padding-top:300px;
}
#hospitality {
    margin-top:-300px;
    margin-bottom:10%;
    padding-top:400px;
}
#sustainability {
    margin-top:-400px;
    margin-bottom:10%;
    padding-top:430px;
}
.washlet-content-category-image.line:before {
    content:"";
    width:1px;
    height:100px;
    background: #999;
    display: inline-block;
    position: absolute;
    top: -40%;
    right: 50%;
}
.washlet-content-category-image.line:after {
    content:"";
    width:1px;
    height:100px;
    background: #999;
    display: inline-block;
    position: absolute;
    bottom: -50%;
    right: 50%;
}


/**     lineup      **/

#benefit {
    padding-top:5%;
    padding-bottom:5%;
}

.slick-slide img {
    width:100%;
}
#benefit {
    border-bottom:5px solid #231815;
}
#choose {
    margin-top:10%;
}
.more-lineup {
    margin:2% auto 5% auto;
    width:80%;
    background:#ddd;
}
.more-lineup a {
    text-align: center;
    display: block;
    width: 80%;
    margin: 0 auto;
    padding:1%;
    font-size:22px;
    position: relative;
}
.more-lineup a:before {
    content: "";
    position: absolute;
    right: 14px;
    top: 49%;
    width: 100px;
    height: 1px;
    background: #000;
    display: inline-block;
}
.more-lineup a:after {
    position: absolute;
    top: 43%;
    right: 15px;
    width: 10px;
    height: 10px;
    content: '';
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.more-lineup a:hover {
    text-decoration: none;
    color:#fff;
}

/**     cleanliness     **/

.cleanliness-wrap {
    background:url(/assets/global/washletplus/images/cleanliness-visual.jpg) no-repeat;
    height:553px;
    background-size:100%;
    color:#fff;
}

.washlet-visual-inner {
    padding:8%;
}
.washlet-visual-inner p {
    font-size:30px;
}
.washlet-visual-inner p span {
    font-weight:900;
}
.cleanliness-inner,.design-inner,.sustainability-inner,.hospitality-inner {
    display: table;
    width:100%;
}

.cleanliness-head,.sustainability-head {
    float:left;
    display: block;
}
.sustainability-head span {
    font-size:14px;
}
.cleanliness-img p,.sustainability-img p {
    position: absolute;
    top:50%;
    right:50%;
    left:64%;
    color:#fff;
    font-size:34px;
    font-weight:900;
}
.clean-synergy {
    text-align: center;
    position: relative;
}
.clean-synergy img {
    animation: Turn 10s linear infinite;
    position: relative;
    width:300px;
}
@keyframes Turn{
  from{
    transform: rotate(0deg);
  }

  to{
    transform: rotate(360deg);
  }
}
.clean-synergy-circle {
    margin-bottom:5%;
    position: relative;
    width:300px;
    margin:10% auto;
}
.clean-synergy-wrap h2,.creative-design-wrap h2,.environment-wrap h2,.relax-wrap h2 {
    font-weight:900;
    font-size:56px;
    font-family: 'Montserrat', sans-serif;
    
}
.clean-synergy-wrap h2,.clean-synergy-wrap p,.creative-design-wrap h2,.creative-design-wrap p,.environment-wrap h2,.environment-wrap p,.relax-wrap h2,.relax-wrap p {
    text-align: center;
}
.clean-synergy-wrap p {
    margin:1% 0;
    line-height:1.8;
    font-size:20px;
}
.clean-synergy-circle:before {
    content:"";
    background:url(/assets/global/washletplus/images/clean_synergy-logo.png) no-repeat;
    display: block;
    width:126px;
    height:37px;
    background-size:100%;
    position: absolute;
    top: 40%;
    right: 28%;
}
.clean-synergy-circle:after {
    content:"";
    background:url(/assets/global/washletplus/images/clean_synergy-wrap.png) no-repeat;
    display: block;
    width:502px;
    height:432px;
    background-size:100%;
    position: absolute;
    top: -35%;
    right: -28%;
}
.cleanliness-text-wrap {
    font-size:30px;
    text-align: center;
    color:#282828;
}
.cleanliness-text-inner {
    padding:8%;
}
.clean-synergy-wrap {
    background:#f7f8f9 url(/assets/global/washletplus/images/clean-synergy-bg.png) no-repeat;
    background-position: right bottom;
}
.washlet-content-category.tornadoflush {
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
}
.washlet-content-category {
    padding-top:4%;
    padding-bottom:4%;
}

.washlet-content-category h2.cefiontect-title:before {
    content:"";
    background:url(/assets/global/washletplus/images/cefiontect-icon.png) no-repeat;
    width:58px;
    height:56px;
    display: inline-block;
    background-size:100%;
    vertical-align: middle;
    margin-right:15px;
}
.washlet-content-category h2.tornadoflush-title:before {
    content:"";
    background:url(/assets/global/washletplus/images/tornadoflush-icon.png) no-repeat;
    width:56px;
    height:57px;
    display: inline-block;
    background-size:100%;
    vertical-align: middle;
    margin-right:15px;
}
.washlet-content-category h2.ewater-title:before {
    content:"";
    background:url(/assets/global/washletplus/images/ewater-icon.png) no-repeat;
    width:56px;
    height:57px;
    display: inline-block;
    background-size:100%;
    vertical-align: middle;
    margin-right:15px;
}

.washlet-content-category-image {
    text-align: right;
}
.washlet-content-category-image.environment {
    text-align: center;
}
.washlet-content-category p {
    font-size:30px;
}

.watch-video-btn a {
    display: block;
    text-decoration: none;
    text-align: left;
    padding-left:10px;
}

/**基本**/
.watch-video-btn::before,
.watch-video-btn::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
/**基本**/
.watch-video-btn,
.watch-video-btn::before,
.watch-video-btn::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.watch-video-btn {
  position: relative;
  z-index: 2;
  border: 1px solid #282828;
  color: #282828;
  line-height: 50px;
  overflow: hidden;
  text-align: center;
}
.watch-video-btn:hover {
  color: #fff;
}
.watch-video-btn::after {
  top: -100%;
  width: 100%;
  height: 100%;
}
.watch-video-btn::after {
    top:0;
    left:-100%;
    width:100%;
    height:100%;
}
.watch-video-btn:hover::after {
  top: 0;
  background-color: #282828;
}
.watch-video-btn:hover::after {
    left:0;
    background-color:#282828;
}
.watch-video-btn {
    position: relative;
    display: inline-block;
    width:65%;
}
.watch-video-btn a {
    padding: 0% 10%;
    font-size:20px;
}
.watch-video-btn:hover a,.watch-video-btn:hover a:after {
    color:#fff;
    transition: 0.3s;
}
.watch-video-btn a:hover {
    color:#fff;
}
.watch-video-btn a:before {
    content:"";
    position: absolute;
    right: 14.8px;
    top: 50%;
    width: 50px;
    height: 1px;
    background: #282828;
    display: inline-block;
}
.watch-video-btn a:after {
    position: absolute;
    top: 42%;
    right: 15px;
    width: 10px;
    height: 10px;
    content: '';
    border-top: 1px solid #282828;
    border-right: 1px solid #282828;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.watch-video-btn a:hover:after {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}

.rimless-inner {
    padding:2% 4%;
    margin-top:3%;
    border-top:1px solid #ccc;
}
.rimless-inner img {
    float:left;
}
.rimless-text {
    width:70%;
    float:left;
}
.rimless-text,.rimless-image {
    display: inline-block;
}
h2.rimless-title:before {
    content:"";
    background:url(/assets/global/washletplus/images/rimless-icon.png) no-repeat;
    width:75px;
    height:73px;
    display: inline-block;
    background-size:100%;
    vertical-align: middle;
    margin-right:15px;
}
.rimless-text p {
    font-size:20px;
}

.washlet-content-category h2 {
    margin-top:0;
    font-size:40px;
    font-weight:900;
}
.washleft-category-inner {
    width:60%;
    float:left;
}

.structure h2,.whats-ewater h2 {
    text-align: center;
    margin-bottom:3%;
}
.structure span:before {
    content:"";
    position: absolute;
    right: -20px;
    top: 49%;
    width: 100px;
    height: 1px;
    background: #333;
    display: inline-block;
}
.structure span:after {
    content:"";
    position: absolute;
    top: 36%;
    right: -18px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.structure span {
    position: relative;
    display: block;
    text-align: center;
    color:#999;
    font-size:18px;
}
.structure p {
    min-height:80px;
}

.structure span.last:before,.structure span.last:after {
    display: none;
}
.structure-image {
    text-align: center;
    min-height:130px;
    position: relative;
}
.structure-image img {
    position: absolute;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    
}
.structure {
    margin-top:5%;
    margin-bottom:5%;
}
.whats-ewater-image {
    text-align: center;
    margin-top:4%;
}
.whats-ewater {
    margin-top:5%;
    margin-bottom:5%;
}
/**     page-category       **/

.page-category-content img {
    width:100%;
}
.page-category-content {
    width:25%;
    float:left;
    position: relative;
    overflow: hidden;
}
.page-category-content span {
    position: absolute;
    color:#fff;
    font-size:26px;
    transform: translateY(-530%) translateX(0%);
    display: block;
    text-align: center;
    width:100%;
    font-weight:900;
    font-family: 'Montserrat', sans-serif;
}
.page-category-content a {
    display: block;
}
.page-category-content a:hover img,.page-category-content a img:hover,.page-category-content a span:hover img,.page-category-content a:hover {
    opacity: 1;
}
.page-category-content a::before{
    content:"";
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.page-category-content.active a::before {
    background-color: rgba(0,0,0,0);
}
.page-category-content:hover::before {
    background-color: rgba(0,0,0,0);
    transition: 0.5s;
}

.mobile-slider .slick-slide img,.mobile-slider02 .slick-slide img {
    width:auto;
}
.whats-ewater-image {
    position: relative;
}
.whats-ewater-image img {
    margin:0 auto;
}
.whats-ewater-image:before {
    content: "";
    position: absolute;
    right: -20px;
    top: 58px;
    width: 40px;
    height: 1px;
    background: #333;
    display: inline-block;
}
.whats-ewater-image:after {
    content: "";
    position: absolute;
    top: 53px;
    right: -18px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.structure .scroll-inner p {
    color:#282828;
}
.scroll-inner p {
    font-size:16px;
    color:#c9c9c9;
    text-align: center;
    height: 35px;
    line-height:1.3;
}
.scroll-inner span {
    display: block;
    text-align: center;
}
.whats-ewater-image.last:before {
    display: none;
}
.ewater-text p {
    color:#282828;
}
.ewater-text span {
    border:1px solid #282828;
    display: inline-block;
    padding:5px;
}
.scroll-wrap .slick-track {
    height:230px;
}
.structure .scroll-wrap .slick-track {
    height:auto;
}
.ewater-text {
    position: absolute;
    text-align: center;
    left: 0;
    margin-top:10px;
    width:100%;
}
.scroll-wrap {
    margin-top:20px;
}
.structure .slick-initialized .slick-slide {
    width:25% !important;
}
.whats-ewater .slick-initialized .slick-slide {
    width:20% !important;
}
#adon .scroll-wrap .slick-track {
    width:1172px !important;
}
#adon .whats-ewater .scroll-wrap .slick-track {
    width:1140px !important;
}
a.learn-more {
    background:#777;
    color:#fff;
    width:100%;
    border-radius:0;
    padding:3%;
    color:#fff;
    font-size:18px;
    position: relative;
    font-weight:900;
}
a.learn-more:hover {
    color:#fff;
    background:#555;
    transition: 0.5s;
}
a.learn-more[aria-expanded="false"]:before {
    content:"LEARN MORE";
    font-size:18px;
    color:#fff;
}
a.learn-more[aria-expanded="true"]:before {
    content:"CLOSE";
    font-size:18px;
    color:#fff;
}
a.learn-more[aria-expanded="true"],a.learn-more[aria-expanded="false"] {
    font-size:0;
}
a.learn-more[aria-expanded="true"]:after {
    position: absolute;
    top: 10%;
    left: 50%;
    display: block;
    width: 11px;
    height: 11px;
    margin-top: 18px;
    content: '';
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
a.learn-more:after,a.learn-more[aria-expanded="false"]:after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 11px;
    height: 11px;
    margin-top: 18px;
    content: '';
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    -ms-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
a.learn-more:hover:after {
    margin-top:25px;
}
a.learn-more[aria-expanded="true"]:hover:after {
    margin-top:10px;
}


/**     design      **/

.design-img p {
    position: absolute;
    top:50%;
    left:20%;
    color:#fff;
    font-size:34px;
    font-weight:900;
}
.design-img img,.hospitality-img img {
    float:left;
}

.washlet-design-text-inner {
    width:70%;
    margin:0 auto;
    font-size:18px;
    background:url(/assets/global/washletplus/images/design-text-bg.png) no-repeat;
    height:326px;
    background-position: center;
    vertical-align: middle;
    display: table-cell;
    
}
.washlet-content-image {
    text-align: center;
}
.washlet-content-inner:nth-of-type(2) {
    border-right:1px solid #ddd;
    border-left:1px solid #ddd;
}
.washlet-content-text {
    margin-top:5%;
}
.washlet-design-movie {
    text-align: center;
}
.environment-image {
    text-align: center;
}
#minimized {
    text-align: center;
}
.minimized-list {
    position: relative;
}
[data-target="#modal01"] {
    position: absolute;
    top:-420px;
    right:30%;
}
[data-target="#modal02"] {
    position: absolute;
    top:-380px;
    right:48%;
}
[data-target="#modal03"] {
    position: absolute;
    top:-240px;
    right:45%;
}
.fadeUp {
    opacity: 1 !important; 
    margin-top: 0 !important;
}
.minimized-list .description-box {
    width: 250px;
    position: absolute;
    opacity: 0;
    transition: .7s;
    margin-top: 60px;    
}

.minimized-list #modal01 {
    top: -550px;
    right: 10%;
}
.minimized-list #modal02 {
    top: -550px;
    left: 5%;
}
.minimized-list #modal03 {
    top: -220px;
    left: 5%;   
}

.minimized-list #modal01-arrow {
    width: 100px;
    height: 40px;
    border-top: 1px #0d3275 solid;
    border-left: 1px #0d3275 solid;
    position: absolute;
    top: -360px;
    right: 32%;
    opacity: 0;
    transition: .7s;
    margin-left: 60px;    
}
.minimized-list #modal02-arrow {
    width: 252px;
    height: 50px;
    border-bottom: 1px #0d3275 solid;
    border-left: 1px #0d3275 solid;
    position: absolute;
    top: -305px;
    left: 18%;
    opacity: 0;
    transition: .7s;
    margin-right: 60px;    
}
.minimized-list #modal03-arrow {
    width: 228px;
    height: 75px;
    border-bottom: 1px #0d3275 solid;
    border-right: 1px #0d3275 solid;
    position: absolute;
    top: -95px;
    left: 25%;
    opacity: 0;
    transition: .7s;
    margin-right: 60px;    
}
.minimized-list #modal01-arrow.fadeUp 
{
    opacity: 1 !important; 
    margin-left: 0 !important;    
}
.minimized-list #modal02-arrow.fadeUp 
.minimized-list #modal03-arrow.fadeUp 
{
    opacity: 1 !important; 
    margin-right: 0 !important;        
}
.minimized-list .description-box p {
    padding: 5px 20px;
}
.modal-btn {
    background:#0d3275;
    border-radius:50%;
}
a.modal-btn {
    color:#fff;
}
.modal-btn:before {
    line-height: 40px;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    content: '';
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #626262;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.modal-btn:after {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    content: '';
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: pulsate 1s ease-out;
    animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 50%;
    background: #0d3275;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.minimized-list .modal-dialog {
    top:20%;
}
.modal-header {
    background:#0d3275;
}
.modal-body-wrap {
    padding:5%;
}
.modal-body-wrap p {
    font-size:20px;
}
.modal-footer {
    border-top:0;
    padding:0;
}
.modal-header .close {
    color:#fff;
    opacity: 1;
}
a.modal-btn:hover,a.modal-btn:focus {
    color:#fff;
}
#minimized {
    margin-bottom:10%;
    margin-top: 10%;
}
.design-wrap {
    background:url(/assets/global/washletplus/images/design-visual.jpg) no-repeat;
    height:553px;
    background-size:100%;
    color:#fff;
}


/**     hospitality     **/

.hospitality-img p {
    position: absolute;
    top:50%;
    left:16%;
    color:#fff;
    font-size:34px;
    font-weight:900;
}

.relax .washlet-design-text-inner {
    width:85%;
    margin-bottom:10%;
}
.washlet-content-category.bottom-fix {
    padding-top:4%;
    padding-bottom:0;
}
.bottom-fix .relax .washlet-design-text-inner {
    width:100%;
}
.automated-inner-text {
    padding-top:5% !important;
}

.automated-inner-text.auto-flush {
    position: relative;
    top: 100px;
}
.automated-wrap {
    background:#f7f8f9 url(/assets/global/washletplus/images/hospitality-bg.png) no-repeat;
    background-position:top right;
}
.automated-wrap h2 {
    text-align: center;
    font-size:65px;
    margin-top:5%;
    font-family: 'Montserrat', sans-serif;
}
.automated-wrap p {
    text-align: center;
    font-size:22px;
}
.automated-text p {
    text-align: left;
}
.automated-text {
    margin-top:5%;
}
.hospitality-bottom-text p {
    font-size:22px;
}
.hospitality-bottom-text {
    margin-top:5%;
}
.hospitality-bottom-wrap {
    margin-top:5%;
    margin-bottom:5%;
}
.hospitality-wrap {
    background:url(/assets/global/washletplus/images/hospitality-visual.jpg) no-repeat;
    height:553px;
    background-size:100%;
    color:#fff;
}
.automated-inner-image img {
    width:100%;
}

/**     hover       **/

.pulse {
  margin:100px;
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #0d3275;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(13,50,117, 0.4);
  animation: pulse .7s infinite;
}
.pulse:hover {
  animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(13,50,117, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(13,50,117, 0.4)
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(13,50,117, 0.4);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(13,50,117, 0.4);
    box-shadow: 0 0 0 0 rgba(13,50,117, 0.4);
  }
  15% {
      -moz-box-shadow: 0 0 0 3px rgba(13,50,117, 0.4);
      box-shadow: 0 0 0 3px rgba(13,50,117, 0.4);
  }  
  35% {
      -moz-box-shadow: 0 0 0 5px rgba(13,50,117, 0.4);
      box-shadow: 0 0 0 5px rgba(13,50,117, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 8px rgba(13,50,117, 0.4);
      box-shadow: 0 0 0 8px rgba(13,50,117, 0.4);
  }
  100% {
      -moz-box-shadow: 0 0 0 8px rgba(13,50,117, 0);
      box-shadow: 0 0 0 8px rgba(13,50,117, 0);
  }
}


/**     sustainability      **/

.sustainability-wrap {
    background:url(/assets/global/washletplus/images/sustainability-visual.jpg) no-repeat;
    height:450px;
    background-size:100%;
    color:#fff;
}
.washlet-main-visual {
    margin-top:3%;
}
.washlet-main-visual h2,.washlet-main-visual p {
    text-align: center;
    font-weight:900;
    text-shadow: 1px 1px 20px #666;
}
.washlet-main-visual h2 {
    font-family: 'Montserrat', sans-serif;
    font-size:36px;
}
.washlet-main-visual p {
    font-size:24px;
    line-height:1.3;
}
.washlet-main-visual-text {
    margin-top:20px;
}
.washlet-main-visual-text p {
    font-size:18px;
    text-align: left;
    line-height:1.4;
    font-weight:normal;
}
.washlet-main-visual-text p span {
    font-weight:900;
}
.auto-open br {
    display: none;
}

/**     nav-menu        **/

ul.pager-list li.to-top {
    position: relative;
}
ul.pager-list li.to-top a {
    display: block;
}
ul.pager-list li.to-top a:after {
    position: absolute;
    top: 30%;
    left:50%;
    right: 15px;
    width: 20px;
    height: 20px;
    content: '';
    border-bottom: 5px solid #fff;
    border-left: 5px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
ul.pager-list li.to-top a:hover:after {
    left:40%;
}

.index .index-pager .pager-list li.to-top a span {
    text-indent:-1000px;
}
.index .index-pager ul.pager-list li.last a span {
    border:1px solid #fff;
    line-height:2;
    padding:0 10px;
}
.index .index-pager ul.pager-list li.last span:after {
    display: none;
}
 

/**     レスポンシブ        **/


@media screen and (max-width:1200px) {
    #adon .scroll-wrap .slick-track {
        width:972px !important;
    }
    #adon .whats-ewater .scroll-wrap .slick-track {
        width:940px !important;
    }
    .structure span:before {
        width:60px;
    }
    
    [data-target="#modal01"] {
        position: absolute;
        top:-420px;
        right:30%;
    }
    [data-target="#modal02"] {
        position: absolute;
        top:-380px;
        right:48%;
    }
    [data-target="#modal03"] {
        position: absolute;
        top:-240px;
        right:45%;
    }
    .inview-fadeup {
        opacity: 0;
        transition: .7s;
        margin-top: 60px;
    }

    .inview-fadeup.in {
        opacity: 1;
        margin-top: 0px;
    }
    .fadeUp {
        opacity: 1 !important; 
        margin-top: 0 !important;
    }
    .minimized-list .description-box {
        width: 250px;
        position: absolute;
        opacity: 0;
        transition: .7s;
        margin-top: 60px;    
    }

    .minimized-list #modal01 {
        top: -550px;
        right: 10%;
    }
    .minimized-list #modal02 {
        top: -550px;
        left: 5%;
    }
    .minimized-list #modal03 {
        top: -220px;
        left: 5%;   
    }

    .minimized-list #modal01-arrow {
        width: 100px;
        height: 40px;
        border-top: 1px #0d3275 solid;
        border-left: 1px #0d3275 solid;
        position: absolute;
        top: -360px;
        right: 32%;
        opacity: 0;
        transition: .7s;
        margin-left: 60px;    
    }
    .minimized-list #modal02-arrow {
        width: 182px;
        height: 50px;
        border-bottom: 1px #0d3275 solid;
        border-left: 1px #0d3275 solid;
        position: absolute;
        top: -305px;
        left: 18%;
        opacity: 0;
        transition: .7s;
        margin-right: 60px;    
    }
    .minimized-list #modal03-arrow {
        width: 170px;
        height: 75px;
        border-bottom: 1px #0d3275 solid;
        border-right: 1px #0d3275 solid;
        position: absolute;
        top: -95px;
        left: 25%;
        opacity: 0;
        transition: .7s;
        margin-right: 60px;    
    }
    .minimized-list #modal01-arrow.fadeUp 
    {
        opacity: 1 !important; 
        margin-left: 0 !important;    
    }
    .minimized-list #modal02-arrow.fadeUp 
    .minimized-list #modal03-arrow.fadeUp 
    {
        opacity: 1 !important; 
        margin-right: 0 !important;        
    }
    .minimized-list .description-box p {
        padding: 5px 20px;
    }  
    .index .index-pager .pager-list > li {
        padding:0 5px;
    }
}

@media screen and (min-width:991px) {
    .relax-wrap p br,.relax-wrap h2 br {
        display: none;
    }
    [data-target="#modal02"] {
        position: absolute;
        top:-380px;
        right:48%;
    }
    [data-target="#modal03"] {
        position: absolute;
        top:-240px;
        right:45%;
    }
    .inview-fadeup {
        opacity: 0;
        transition: .7s;
        margin-top: 60px;
    }

    .inview-fadeup.in {
        opacity: 1;
        margin-top: 0px;
    }
    .fadeUp {
        opacity: 1 !important; 
        margin-top: 0 !important;
    }
    .minimized-list .description-box {
        width: 250px;
        position: absolute;
        opacity: 0;
        transition: .7s;
        margin-top: 60px;    
    }

    .minimized-list #modal01 {
        top: -550px;
        right: 7%;
    }
    .minimized-list #modal02 {
        top: -560px;
        left: 0%;
    }
    .minimized-list #modal03 {
        top: -220px;
        left: 0%;   
    }

    .minimized-list #modal01-arrow {
        width: 100px;
        height: 40px;
        border-top: 1px #0d3275 solid;
        border-left: 1px #0d3275 solid;
        position: absolute;
        top: -360px;
        right: 32%;
        opacity: 0;
        transition: .7s;
        margin-left: 60px;    
    }
    .minimized-list #modal01-arrow.fadeUp 
    {
        opacity: 1 !important; 
        margin-left: 0 !important;    
    }
    .minimized-list #modal02-arrow.fadeUp 
    .minimized-list #modal03-arrow.fadeUp 
    {
        opacity: 1 !important; 
        margin-right: 0 !important;        
    }
    .minimized-list .description-box p {
        padding: 5px 20px;
    }   
    .index .index-pager .pager-list > li a {
        font-size:1.2rem;
    }
}

@media screen and (max-width:991px) {
    
    .relax .washlet-design-text-inner,.washlet-content-category-image img {
        width:100%;
    }
    .hospitality-img p {
        left:11%;
    }
    .washlet-visual-inner {
        padding:5% 3%;
    }
    .relax-wrap p br:nth-of-type(1) {
        display: block;
    }

    .washlet-content-category-image.bottom-fix img {
        width:auto;
        position: relative;
        right:180%;
        z-index: 0;
    }
    .bottom-fix .relax .washlet-design-text-inner {
        z-index: 1;
        position: relative;
    }
    .washlet-content-category p {
        font-size:14px;
    }
    .sustainability-img p {
        left:56%;
    }
    .cleanliness-img p {
        left:58%;
    }
    .washlet-design-text-inner {
        width:90%;
    }
    .clean-synergy-wrap h2, .creative-design-wrap h2, .environment-wrap h2, .relax-wrap h2 {
        font-size:43px;
    }
    .clean-synergy-wrap p, .creative-design-wrap p, .environment-wrap p, .relax-wrap p {
        font-size:18px;
    }
    .washlet-content-image {
        height:180px;
    }
    .design-img p {
        left:17.5%;
    }
    .clean-synergy:before {
        right:41%;
    }
    .clean-synergy:after {
        right:22%;
    }
    .whats-ewater-image img,
    .design .interaction-text,
    .cleanliness .interaction-text,
    .hospitality .interaction-text {
        width:100%;
    }
    .structure span:before {
        right:-20px;
        width:40px;
    }
    .structure span:after {
        right:-20px;
        top:30%;
    }
    .hospitality .interaction-text:after {
        width:480px;
        height:210px;
    }

    .design .interaction-text:after {
        width:290px;
        height:190px;
        right:-160px;
    }
    .cleanliness .interaction-text:after {
        height:250px;
    }
    .interaction-text h3 {
        font-size:50px;
    }
    .design.interaction-image:after {
        height:320px;
    }
    .cleanliness.interaction-image:after {
        height:410px;
    }
    .hospitality.interaction-image:after {
        width:520px;
        height:330px;
        left:-420px;
    }
    .sustainability.interaction-image:after {
        height:300px;
        right:-400px;
    }
    .cleanliness .interaction-text {
        width:100%;
    }
    #interaction img {
        width:100%;
    }
    .sustainability-img img {
        width:100%;
    }
    .washlet-content-category-image.line:before {
        top:-60%;
        height:60px;
    }
    .washlet-content-category-image.line:after {
        bottom:-85%;
        height:60px;
    }
    .cleanliness-head img,.cleanliness-img img {
        width:100%;
    }
    .watch-video-btn {
        width:90%;
    }
    .washlet-content-category-image.design-movie {
        width:55%;
    }
    .cleanliness-head, .sustainability-head {
        width:42%;
        display: inline-block;
    }
    .cleanliness-img {
        width:58%;
        display: inline-block;
    }
    .washlet-content-category-image {
        width:40%;
        display: inline-block;
    }
    .washlet-content-category h2 {
        font-size:30px;
    }
    .rimless-text {
        width:62%;
    }
    .structure .scroll-inner p {
        height:110px;
    }
    #adon .scroll-wrap .slick-track {
        width: 752px !important;
    }
    #adon .whats-ewater .scroll-wrap .slick-track {
        width: 720px !important;
    } 
    .design.interaction-image:after,.cleanliness.interaction-image:after {
        height:280px;
    }
    .hospitality.interaction-image:after {
        height:220px;
        width:630px;
        left:-490px;
    }
    .washlet-main-visual h2 {
        font-size:26px;
    }
    .washlet-main-visual p {
        font-size:18px;
    }
    .washlet-main-visual-text p {
        font-size:11px;
    }
    .washlet-main-visual {
        margin-top:0;
    }
    .sustainability-wrap {
        height:287px;
    }
    [data-target="#modal01"] {
        position: absolute;
        top:-420px;
        right:20%;
    }
    [data-target="#modal02"] {
        position: absolute;
        top:-380px;
        right:48%;
    }
    [data-target="#modal03"] {
        position: absolute;
        top:-240px;
        right:45%;
    }
    .inview-fadeup {
        opacity: 0;
        transition: .7s;
        margin-top: 60px;
    }

    .inview-fadeup.in {
        opacity: 1;
        margin-top: 0px;
    }
    .fadeUp {
        opacity: 1 !important; 
        margin-top: 0 !important;
    }
    .minimized-list .description-box {
        width: 250px;
        position: absolute;
        opacity: 0;
        transition: .7s;
        margin-top: 60px;    
    }

    .minimized-list #modal01 {
        top: -550px !important;
        right: -10% !important;
    }
    .minimized-list #modal02 {
        top: -550px;
        left: -10%;
    }
    .minimized-list #modal03 {
        top: -220px;
        left: 0%;   
    }

    .minimized-list #modal01-arrow {
        width: 100px;
        height: 40px;
        border-top: 1px #0d3275 solid;
        border-left: 1px #0d3275 solid;
        position: absolute;
        top: -360px;
        right: 23%;
        opacity: 0;
        transition: .7s;
        margin-left: 60px;    
    }
    .minimized-list #modal02-arrow {
        width: 152px;
        height: 50px;
        border-bottom: 1px #0d3275 solid;
        border-left: 1px #0d3275 solid;
        position: absolute;
        top: -305px;
        left: 11%;
        opacity: 0;
        transition: .7s;
        margin-right: 60px;    
    }
    .minimized-list #modal03-arrow {
        width: 70px;
        height: 75px;
        border-bottom: 1px #0d3275 solid;
        border-right: 1px #0d3275 solid;
        position: absolute;
        top: -95px;
        left: 30%;
        opacity: 0;
        transition: .7s;
        margin-right: 60px;    
    }
    .minimized-list #modal01-arrow.fadeUp 
    {
        opacity: 1 !important; 
        margin-left: 0 !important;    
    }
    .minimized-list #modal02-arrow.fadeUp 
    .minimized-list #modal03-arrow.fadeUp 
    {
        opacity: 1 !important; 
        margin-right: 0 !important;        
    }
    .minimized-list .description-box p {
        padding: 5px 20px;
    }
    .design-wrap,.hospitality-wrap,.cleanliness-wrap {
        height:354px;
    }
    .clean-synergy-circle {
        margin:13% auto;
    }
    .rimless-inner {
        margin-bottom:5%;
    }
}


@media screen and (max-width:768px) {
    
    .hospitality-img p {
        left:12%;
    }
    .washlet-content-category p br,.washlet-design-text-inner h3 br {
        display: none;
    }
    .interaction-text h3 {
        font-size:40px;
    }
    .interaction-text p {
        font-size:35px;
    }

    #cleanliness,#hospitality {
        margin-top:-230px;
    }
    #sustainability {
         margin-top:-310px;
    }
    .benefit-btn a {
        font-size:14px;
    }
    [data-target="#modal01"] {
        position: absolute;
        top:-420px;
        right:20%;
    }
    [data-target="#modal02"] {
        position: absolute;
        top:-380px;
        right:48%;
    }
    [data-target="#modal03"] {
        position: absolute;
        top:-240px;
        right:45%;
    }
    #minimized {
        margin-top: 30%;
        margin-bottom: 60%;
    }
    .minimized-list .description-box {
        width: 250px;
        position: absolute;
        opacity: 1;
        transition: none;
        margin-top: 0;    
    }
    .minimized-list .description-box img {
        width: 100%;
    }
    .minimized-list #modal01 {
        top: -605px !important;
        right: 7% !important;
    }
    .minimized-list #modal02 {
        top: -715px;
        left: 5%;
    }
    .minimized-list #modal03 {
        top: 30px;
        left: 50%;   
    }

    .minimized-list #modal01-arrow {
        width: 80px;
        height: 85px;
        border-bottom: 1px #0d3275 solid;
        border-right: 1px #0d3275 solid;
        position: absolute;
        top: -375px;
        right: 20%;
        opacity: 1;
        transition: none;
        margin-left: 0;
        border-top: none;
        border-left: none;
    }
    .minimized-list #modal02-arrow {
        width: 140px;
        height: 214px;
        border-bottom: 1px #0d3275 solid;
        border-left: 1px #0d3275 solid;
        position: absolute;
        top: -470px;
        left: 11%;
        opacity: 1;
        transition: none;
        margin-right: 0;
    }
    .minimized-list #modal03-arrow {
        width: 40px;
        height: 320px;
        border-bottom: 1px #0d3275 solid;
        border-left: 1px #0d3275 solid;
        position: absolute;
        top: -75px;
        left: 39%;
        opacity: 1;
        transition: none;
        margin-right: 0;
        border-right: none;
    }
    .minimized-list .description-box p {
        padding: 5px 20px;
    }
    .index .index-pager .pager-list > li a {
        padding:0 10px;
        font-size:1.2rem;
    }
    .washlet-design-text-inner {
        height:246px;
    }
    .cleanliness-wrap {
        height:413px;
    }
    .automated-inner-text.auto-flush {
        top:0;
    }
}

@media screen and (max-width:640px) {
    
    .hospitality-img p {
        font-size:28px;
        left:12%;
    }

    .washlet-design-text-inner h3 br {
        display: block;
    }

    .washlet-content-category p, .environment-wrap p, .relax-wrap p {
        font-size:26px;
    }
    .creative-design-wrap p,.clean-synergy-wrap p {
        font-size:24px;
    }
    .clean-synergy-wrap p br {
        display: none;
    }
    .washlet-content-category-image.bottom-fix img {
        width:100%;
        right:0;
    }
    .bottom-fix .washlet-design-text-inner h3 br {
        display: none;
    }
    .sustainability-img p {
        left:52%;
    }
    .cleanliness-img p {
        left:55%;
    }
    .relax-wrap .washlet-visual-inner {
        background-position:right top;
        height:558px;
    }
    .washlet-design-text-inner {
        width:100%;
    }

    .environment-wrap p br {
        display: none;
    }
    .design-img p {
        left:16%;
    }
    .creative-design-wrap .washlet-visual-inner {
        height: 567px;
        background-position: left bottom;
    }
    .washlet-content-inner:nth-of-type(2) {
        border-right:0;
        border-left:0;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
    .washlet-design-movie iframe {
        width:100%;
    }
    .clean-synergy:before {
        right:39%;
    }
    .clean-synergy:after {
        right:17%;
    }
    .washlet-content-category h2 {
        font-size:26px;
    }

    .cleanliness .interaction-text,.cleanliness .interaction-text,.concept-inner img {
        width:100%;
    }
    .design .interaction-text,.hospitality .interaction-text {
        width:70%;
    }
    .image-wrap {
        position: relative;
        top:-190px;
    }
    .design .interaction-text,.hospitality .interaction-text {
        position: relative;
        top:470px;
    }
    .interaction-text h3 {
        font-size:50px;
    }
    .interaction-text p {
        font-size:45px;
    }
    .detail-btn {
        margin:0 auto;
    }
    .detail-btn a {
        font-size:30px;
        padding-top:20px;
        padding-bottom:20px;
    }
    .detail-btn {
        width:320px;
    }
    .detail-btn a:after {
        top:42.5%;
    }
    #benefit h2, #lineup h2 {
        margin-bottom:5%;
    }
    #sustainability {
        margin-top:-130px;
    }
    #cleanliness {
        margin-top:-230px;
    }
    #hospitality .image-wrap {
        top:0;
    }
    #sustainability .image-wrap {
        top:0;
    }
    .interaction-image {
        height:540px;
    }
    .cleanliness .interaction-text {
        position: relative;
        top:-130px;
    }
    .sustainability .interaction-text {
        margin:30% auto 0;
    }
    #lineup {
        margin-top:0%;
    }
    #sustainability div {
        height:80px;
    }
    .washlet-content-category-image.line:before {
        top:-15%;
    }
    .washlet-content-category-image.line:after {
        bottom:-90%;
    }
    .clean-synergy-circle {
        margin:18% auto 8% auto;
    }
    .watch-video-btn {
        width:80%;
    }
    .rimless-text {
        width:55%;
    }
    #adon .scroll-wrap .slick-track {
        width:640px !important;
    }
    #adon .whats-ewater .scroll-wrap .slick-track {
        width:620px !important;
    }
    #lineup.linup-bottom,#choose {
        margin-top:30%;
    }
    .design-wrap {
        height:300px;
    }
    .creative-design-wrap .washlet-visual-inner,.relax-wrap .washlet-visual-inner {
        height:auto;
    }
    .hospitality-wrap {
        height:300px;
    }
    [data-target="#modal01"] {
        position: absolute;
        top:-420px;
        right:30%;
    }
    [data-target="#modal02"] {
        position: absolute;
        top:-380px;
        right:48%;
    }
    [data-target="#modal03"] {
        position: absolute;
        top:-240px;
        right:45%;
    }
    .inview-fadeup {
        opacity: 0;
        transition: .7s;
        margin-top: 60px;
    }

    .inview-fadeup.in {
        opacity: 1;
        margin-top: 0px;
    }
    .fadeUp {
        opacity: 1 !important; 
        margin-top: 0 !important;
    }
    .minimized-list .description-box {
        width: 150px;
        position: absolute;
        opacity: 1;
        transition: none;
        margin-top: 0;    
    }
    .minimized-list .description-box p {
        padding: 5px 5px;
    }
    .washlet-content-category-image.design-movie {
        width:100%;
    }
    .index .index-pager .pager-list > li a {
        font-size:1.1rem;
        padding: 0 5px;
    }
    .minimized-list #modal02 {
        top:-675px;
    }
    .minimized-list #modal03-arrow {
        width:70px;
        left:36%;
    }
    .page-category-content span {
        font-size:16px;
    }
}


@media screen and (max-width:540px) {
    
    .hospitality-img p {
        left:9%;
    }

    .cleanliness-img p, .sustainability-img p {
        font-size:29px;
    }

    .design-img p {
        left:15%;
    }
    .clean-synergy:before {
        right:37%;
    }
    .clean-synergy:after {
        right:10%;
    }
    .rimless-inner {
        padding:3% 10%;
        text-align: center;
    }
    .design .interaction-text, .hospitality .interaction-text {
        width:90%;
    }
    .cleanliness .interaction-text:after {
        height:190px;
    }
    .hospitality .interaction-text:after {
        height:130px;
    }

    #concept .concept-inner h2 img {
        width:80%;
    }
    .concept-inner .concept-text p br {
        display: none;
    }

    .design .interaction-text, .hospitality .interaction-text {
        top:370px;
    }
    .image-wrap {
        top:-280px;
    }
    #cleanliness {
        padding-top:50px;
    }
    .cleanliness .interaction-text {
        top:110px;
    }
    .hospitality .interaction-text {
        top:760px;
    }
    .sustainability .interaction-text {
        top:260px;
    }
    .interaction-text p {
        font-size:25px;
    }
    .detail-btn a {
        font-size:20px;
    }
    .detail-btn {
        width:220px;
        line-height:20px;
    }
    #sustainability div {
        height:60px;
    }
    .washlet-content-category-image.line:after {
        bottom:-110%;
    }
    .washleft-category-inner,.washlet-content-category-image,.rimless-text,.watch-video-btn {
        width:100%;
    }
    .collapse {
        display: block;
    }
    a.learn-more {
        display: none;
    }
    .ewater-text {
        left:0;
        width:100%;
    }
    .scroll-inner p {
        height:25px;
    }
    .page-category-content {
        width:50%;
    }
    .slick-prev:before, .slick-next:before {
        color:#000;
    }
    .slick-next {
        right:25px;
    }
    .slick-prev {
        left:25px;
    }
    #adon .scroll-wrap .slick-track {
        width:2160px !important;
    }
    #adon .whats-ewater .scroll-wrap .slick-track {
        width:2550px !important;
    }
    .structure .scroll-inner p {
        width:50%;
        margin:0 auto;
    }
    .whats-ewater p {
        width:80%;
        margin:0 auto;
    }
    .structure span:before,.structure span:after,.whats-ewater-image:before,.whats-ewater-image:after {
        display: none;
    }
    .prev-arrow,.next-arrow {
        position: absolute;
        top:25%;
    }
    .next-arrow {
        right:15px;
    }
    .prev-arrow {
        left:15px;
        z-index: 2;
    }
    .cleanliness-head, .sustainability-head,.cleanliness-img {
        width:100%;
    }
    .more-lineup a:before {
        width:60px;
    }
    .interaction-image {
        height:auto;
    }
    .design.interaction-image:after, .cleanliness.interaction-image:after {
        height:300px;
    }
    #cleanliness {
        margin-top:-100px;
    }
    #hospitality {
        margin-top:120px;
        padding-top:20px;
    }
    #hospitality .image-wrap {
        top:20px;
    }
    .hospitality.interaction-image:after {
        height: 370px;
        width: 390px;
        left: -120px;
    }
    #sustainability {
        margin-top:240px;
        padding-top:10px;
    }
    #lineup.linup-bottom,#choose {
        margin-top:110%;
    }
    #design {
        margin-top:-20px;
        padding-top:120px;
    }
    .sustainability-wrap {
        background: url(/assets/global/washletplus/images/sustainability-visual-sp.jpg) no-repeat;
    }
    .hospitality-wrap {
        background: url(/assets/global/washletplus/images/hospitality-visual-sp.jpg) no-repeat;
    }
    .cleanliness-wrap {
        background: url(/assets/global/washletplus/images/cleanliness-visual-sp.jpg) no-repeat;
    }
    .design-wrap {
        background: url(/assets/global/washletplus/images/design-visual-sp.jpg) no-repeat;
    }
    .sustainability-wrap,.hospitality-wrap,.cleanliness-wrap,.design-wrap {
        height: 823px;
        background-position: center;
        margin-top:55px;
        background-size:100%;
    }
    .washlet-main-visual {
        position: absolute;
        bottom:0px;
        left:0;
    }
    .washlet-main-visual h2 {
        font-size:50px;
    }
    .washlet-main-visual p {
        font-size:40px;
    }
    .washlet-main-visual-text p {
        font-size:26px;
    }
    .automated-inner-image img {
        display: none;
    }
    .automated-inner-image {
        background:url(/assets/global/washletplus/images/hospitality-image01-sp.png) no-repeat;
        background-size:50%;
        height:670px;
        width:100%; 
        background-position: center 50px;
    }
    .automated-inner-text.auto-open {
        position: absolute;
    }
    .automated-inner-text.auto-flush {
        position: relative;
        bottom:70px;
        top:-70px;
    }
    .clean-synergy img,.clean-synergy-circle {
        width:250px;
    }
    .clean-synergy-circle:after {
        width:422px;
        height:362px;
    }
    .washlet-content-category-image.line:before,.washlet-content-category-image.line:after {
        height:40px;
    }
    .minimized-list #modal02 {
        top:-655px;
    }
    .minimized-list #modal02-arrow {
        width:60px;
        height:184px;
        top:-440px;
    }
    .minimized-list #modal03-arrow {
        width:80px;
        left:32%;
    }
    .more-lineup a {
        width:100%;
    }

}


@media screen and (max-width:414px) {
    .hospitality-img p {
        font-size:23px;
    }
    .hospitality-head img,.sustainability-head img,.design-head img,.cleanliness-head img {
        width:80%;
    }
    .creative-design-wrap h2, .environment-wrap h2, .relax-wrap h2 {
        font-size:40px;
    }
    .clean-synergy-wrap h2 {
        font-size:39px;
    }
    .washlet-content-category p, .clean-synergy-wrap p, .creative-design-wrap p, .environment-wrap p, .relax-wrap p {
        font-size:17px;
    }
    .sustainability-head span {
        display: block;
    }
    .sustainability-head {
        transform: translateY(25%) translateX(0%);
    }
    .cleanliness-img p, .sustainability-img p {
        font-size:21px;
    }
    .environment-image img, .hospitality .interaction-text {
        width:100%;
    }
    .design .interaction-text {
        width:70%;
    }

    .design-img p {
        font-size:26px;
    }
    .washlet-content-inner {
        padding:10%;
    }
    .clean-synergy:before {
        right:33%;
        top:46%;
    }
    .clean-synergy:after {
        right:-2%;
    }
    .clean-synergy {
        height:540px;
    }
    .washlet-content-category h2 {
        font-size:32px;
    }
    #benefit h2 {
        font-size:30px;
    }
    .interaction-text h3 {
        font-size:35px;
    }
    .interaction-text p {
        font-size:25px;
    }
    .image-wrap {
        top:-270px;
    }
    .design .interaction-text, .hospitality .interaction-text {
        top:250px;
    }
    .design.interaction-image:after {
        height:140px;
    }
    .cleanliness.interaction-image:after {
        height:170px;
    }
    .hospitality.interaction-image:after {
        height:260px;
    }
    .sustainability.interaction-image:after {
        height:240px;
    }
    #benefit h2, #lineup h2 {
        font-size:44px;
    }
    .interaction-image img,.cleanliness-head, .sustainability-head,.hospitality-head img, .sustainability-head img, .design-head img, .cleanliness-head img,.cleanliness-img {
        width:100%;
    }

    .cleanliness .interaction-text {
        top:70px;
    }
    .hospitality .interaction-text {
        top:600px;
    }
    .sustainability .interaction-text {
        top:190px;
    }
    #hospitality .image-wrap {
        top:20px;
    }
    .detail-btn a {
        font-size:22px;
    }
    .detail-btn {
        width:210px;
        line-height:10px;
    }
    #sustainability div {
        height:50px;
    }
    .washlet-content-category-image.line:after {
        bottom:-150%;
    }
    .cleanliness-text-wrap {
        font-size:20px;
    }
    .clean-synergy-circle {
        margin:28% auto 8% auto;
    }
    .clean-synergy-circle:after {
        right:-38%;
    }
    #adon .scroll-wrap .slick-track {
        width:1656px !important;
    }
    #adon .whats-ewater .scroll-wrap .slick-track {
        width:1920px !important;
    }
    .benefit-btn a {
        font-size:16px;
    }
    .more-lineup a:before {
        width:30px;
    }
    .more-lineup {
        width:100%;
    }
    .washlet-main-visual h2 {
        font-size:40px;
    }
    .washlet-main-visual p {
        font-size:30px;
    }
    .washlet-main-visual-text p {
        font-size:22px;
    }
    .sustainability-wrap,.hospitality-wrap,.cleanliness-wrap,.design-wrap {
        height:623px;
    }
    .washlet-design-movie iframe {
        height:210px;
    }
    .automated-wrap h2 {
        font-size:45px;
    }
    .page-category-content span {
        font-size:20px;
    }
    .automated-inner-image {
        background-size:70%;
        height:700px;
    }
    .auto-open br {
        display: block;
    }
    .automated-inner-text h3 {
        font-size:30px;
    }
    .automated-inner-text p {
        font-size:18px;
    }
    .automated-inner-text.auto-flush {
        bottom:60px;
    }
    .clean-synergy img, .clean-synergy-circle {
        width:200px;
    }
    .clean-synergy-circle:after {
        width:372px;
        height:312px;
        top:-40%;
    }
    .clean-synergy-circle:before {
        right:19%;
    }
    .hospitality-bottom-image img {
        width:100%;
    }
    [data-target="#modal01"] {
        position: absolute;
        top:-310px;
        right:5%;
    }
    [data-target="#modal02"] {
        position: absolute;
        top:-270px;
        right:35%;
    }
    [data-target="#modal03"] {
        position: absolute;
        top:-190px;
        right:30%;
    }    
    .minimized-image img {
        width: 60%;
    }
    #minimized {
        margin-top:75%;
        margin-bottom:90%;
    }
    .minimized-list #modal02 {
        top:-575px;
    }
    .minimized-list #modal01 {
        top:-575px !important;
    }
    .minimized-list #modal02-arrow {
        height:219px;
        width:60px;
        top:-370px;
    }
    .minimized-list #modal01-arrow {
        width:30px;
        height:185px;
        top:-375px;
    }
    .minimized-list #modal03-arrow {
        width:30px;
        left:40%;
        height:210px;
        top:-35px;
    }
    .washlet-content-category-image.line:before {
        top:-17%;
    }

}

@media screen and (max-width:410px) {
    #adon .scroll-wrap .slick-track {
        width:1640px !important;
    }
    #adon .whats-ewater .scroll-wrap .slick-track {
        width:1900px !important;
    }
}


@media screen and (max-width:375px) {
    
    .design-img p {
        left:13%;
    }
    .washlet-content-category p, .clean-synergy-wrap p, .creative-design-wrap p, .environment-wrap p, .relax-wrap p {
        font-size:16px;
    }

    .cleanliness-img p, .sustainability-img p {
        font-size:19px;
    }
    .hospitality-img p {
        left:7%;
    }
    .clean-synergy-wrap h2 {
        font-size:35px;
    }
    .clean-synergy:before {
        right:30%;
    }
    .clean-synergy:after {
        right: -18%;
        background-size: 86%;
        top: 2%;
    }
    .washlet-content-category h2 {
        font-size:26px;
    }
 
    .structure h2, .whats-ewater h2 {
        font-size:26px;
    }
    .design .interaction-text, .hospitality .interaction-text {
        top:225px;
    }
    #cleanliness .interaction-image {
        margin-top:-20px;
    }
    .cleanliness.interaction-image:after {
        height:140px;
    }
    .hospitality.interaction-image:after {
        height:120px;
        width: 280px;
        left: -80px;
        top:45px;
    }
    .image-wrap {
        top:-260px;
    }
    .cleanliness .interaction-text {
        top:65px;
    }
    #hospitality .image-wrap {
        top:0px;
    }
    .hospitality .interaction-text {
        top:490px;
    }
    .sustainability .interaction-text {
        top:160px;
    }
    .benefit-btn a {
        font-size:14px;
    }
    .detail-btn a:after {
        top:39.5%;
    }
    #benefit h2, #lineup h2 {
        font-size:34px;
    }
    .washlet-content-category-image.line:before,.washlet-content-category-image.line:after {
        height:30px;
    }
    .washlet-content-category-image.line:after {
        bottom:-177%;
    }
    .clean-synergy img {
        width:100%;
    }
    .clean-synergy-circle {
        width:177px;
    }
    .clean-synergy-circle:after {
        background-size:85%;
        right:-67%;
        top:-45%;
    }
    .clean-synergy-circle {
        margin:40% auto 0;
    }
    .clean-synergy-circle:before {
        background-size:85%;
        right:10%;
    }
    #adon .scroll-wrap .slick-track {
        width:1500px !important;
    }
    #adon .whats-ewater .scroll-wrap .slick-track {
        width:1725px !important;
    }
    .washlet-main-visual p {
        font-size:25px;
    }
    .washlet-main-visual-text p {
        font-size:18px;
    }
    .washlet-main-visual {
        bottom:10px;
    }
    .sustainability-wrap, .hospitality-wrap, .cleanliness-wrap, .design-wrap {
        height:573px;
    }
    .washlet-design-movie iframe {
        height:175px;
    }
    .page-category-content span {
        font-size:18px;
    }
    .automated-inner-image {
        height:645px;
    }
    .minimized-list #modal02 {
        top:-525px;
    }
    .minimized-list #modal01 {
        top:-525px !important;
    }
    .minimized-list #modal02-arrow {
        height:184px;
        width:40px;
        top:-330px;
    }
    .minimized-list #modal01-arrow {
        height:145px;
        top:-335px;
    }
    .minimized-list #modal03-arrow {
        left:37%;
    }
}


@media screen and (max-width:360px) {
    #adon .scroll-wrap .slick-track {
        width: 1440px !important;
    }
    #adon .whats-ewater .scroll-wrap .slick-track {
        width: 1650px !important;
    }
}


@media screen and (max-width:320px) {
    
    .hospitality-img p {
        font-size:18px;
    }

    .clean-synergy-wrap h2, .creative-design-wrap h2, .environment-wrap h2, .relax-wrap h2 {
        font-size:29px;
    }
    .washlet-content-category p, .environment-wrap p, .relax-wrap p,.cleanliness-img p {
        font-size:16px;
    }
    .clean-synergy-wrap p {
        font-size:15px;
    }
    .design-img p {
        left:11%;
    }
    .creative-design-wrap p {
        font-size:13px;
    }
    .clean-synergy:before {
        right:27%;
        top:50%;
    }
    .clean-synergy:after {
        right:-31%;
    }
    .washlet-content-category h2 {
        font-size:20px;
    }
    .rimless-inner img {
        width:100%;
    }
    .washlet-content-category p {
        font-size:14px;
    }
    .structure h2, .whats-ewater h2 {
        font-size:22px;
    }
    .design.interaction-image:after {
        height:110px;
    }
    .design .interaction-text, .hospitality .interaction-text {
        top:160px;
    }
    .detail-btn {
        width:180px;
    }
    .interaction-text h3 {
        font-size:30px;
    }
    .interaction-text p,.automated-inner-text h3 {
        font-size:25px;
    }
    .image-wrap {
        top:-270px;
    }
    .cleanliness.interaction-image:after,.sustainability.interaction-image:after {
        height:110px;
    }
    .hospitality.interaction-image:after {
        height:190px;
    }
    #benefit h2, #lineup h2 {
        font-size:34px;
    }
    .concept-inner p.concept-catch {
        font-size:18px;
    }
    #benefit div {
        width:100%;
    }
    .cleanliness .interaction-text {
        top:45px;
    }
    #hospitality .image-wrap {
        top:-20px;
    }
    .hospitality.interaction-image:after {
        height:100px;
    }
    .hospitality .interaction-text {
        top:385px;
    }
    #design {
        height:660px;
        overflow: hidden;
    }
    #benefit div.row {
        margin:0;
    }
    #cleanliness .interaction-image {
        margin-top:-100px;
    }
    .sustainability .interaction-text {
        top:130px;
    }
    .design .interaction-text {
        width:80%;
    }
    .washlet-content-category-image.line:after {
        bottom:-227%;
    }
    .washlet-content-category-image.line:before {
        top:-25%;
    }
    .clean-synergy-circle {
        width:147px;
    }
    .clean-synergy-circle:after {
        background-size: 70%;
        right: -110%;
        top: -45%;
    }
    .clean-synergy-circle:before {
        right:0;
    }
    #adon .scroll-wrap .slick-track {
        width:1280px !important;
    }
    #adon .whats-ewater .scroll-wrap .slick-track {
        width:1450px !important;
    }
    .scroll-inner p,.page-category-content span,.automated-inner-text p {
        font-size:16px;
    }
    .sustainability-wrap, .hospitality-wrap, .cleanliness-wrap, .design-wrap {
        height:493px;
    }
    .automated-wrap h2 {
        font-size:35px;
    }
    .washlet-main-visual-text p {
        font-size:16px;
    }
    .automated-inner-image {
        height:565px;
    }
    #minimized {
        margin-top: 80%;
        margin-bottom: 100%;
    }
    [data-target="#modal01"] {
        position: absolute;
        top: -290px;
        right: 0%;
    }
    [data-target="#modal02"] {
        position: absolute;
        top: -260px;
        right: 25%;
    }
    [data-target="#modal03"] {
        position: absolute;
        top: -190px;
        right: 22%;
    }    
    .minimized-list .description-box {
        width: 135px;
        position: absolute;
        opacity: 1;
        transition: none;
        margin-top: 0;
    }    
    .minimized-list #modal01-arrow {
        width: 40px;
        height: 110px;
        border-bottom: 1px #0d3275 solid;
        border-right: 1px #0d3275 solid;
        position: absolute;
        top: -277px;
        right: 20%;
        opacity: 1;
        transition: none;
        margin-left: 0;
        border-top: none;
        border-left: none;
    }   
    .minimized-list #modal02-arrow {
        width: 80px;
        height: 134px;
        border-bottom: 1px #0d3275 solid;
        border-left: 1px #0d3275 solid;
        position: absolute;
        top: -271px;
        left: 11%;
        opacity: 1;
        transition: none;
        margin-right: 0;
    }    
    .minimized-list #modal03-arrow {
        width: 40px;
        height: 250px;
        border-bottom: 1px #0d3275 solid;
        border-left: 1px #0d3275 solid;
        position: absolute;
        top: -45px;
        left: 39%;
        opacity: 1;
        transition: none;
        margin-right: 0;
        border-right: none;
    }  
    .minimized-list #modal02,.minimized-list #modal01 {
        top:-465px !important;
    }
}