/*
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;
    min-width: auto;
}
[data-namespace='index'] {
    padding-top:0px;
}
a:focus,.btn:focus {
    outline: none;
}
.index section:after {
    background:none;
}

/* -- 改修 generalasahi 2021/06/25 -- */

h1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
ul {
    margin-bottom: 0 !important;
}
footer{
    /*padding-top: 0 !important;*/
}
.main__v img{
    width: 100vw;
}
/* 2107add */
@media screen and (min-width:1200px) { 
	.index .detail.index .main__v div {
		width: 60%;
		margin: 0 auto;
	}
}


/**     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     **/

@media screen and (min-width:1025px) { 

	#concept {
	    padding: 2% 0;
	    position: relative;
	}
	.concept-inner h2 {
		width: 40%;
	    text-align: center;
	    margin: 0 auto 2% auto;
	}
	
}

@media screen and (max-width:1024px) {
	#concept {
	    padding:5% 0;
	    position: relative;
	    width: auto;
	}
	.concept-inner h2 {
	    text-align: center;
	    margin:0 auto 40px auto;
	    width: 60%;
	}
}

.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:#333;
    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;
    font-weight:900;
}
.detail-btn a {
    display: block;
    text-decoration: none;
    text-align: left;
    padding-left:10px;
}
.benefit-btn a {
    font-size:20px;
    display: block;
    text-decoration: none;
    text-align: center;
    padding-left:0px;
}
.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 #737373;
  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;
}
.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;
}
.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%;
}
#lineup .slider {
    min-height:100% !important;
}


/**     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:30px;
    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 {
    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-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:440px;
    height:350px;
    display: inline-block;
    position: absolute;
    top: 40px;
    z-index: -2;
    left: -430px;
}
.cleanliness.interaction-image:after {
    content:"";
    background:#ddd;
    width:590px;
    height:550px;
    display: inline-block;
    position: absolute;
    top: 30px;
    z-index: -2;
    right: -380px;
}
.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:570px;
    height:440px;
    display: inline-block;
    position: absolute;
    top: 30px;
    z-index: -2;
    right: -450px;
}
.interaction-image {
    position: relative;
    z-index: 2;
}

.detail-btn {
    position: relative;
    line-height: 50px;
    border: 1px solid #737373;
    width:250px;
}
.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:50px;
    background: #999;
    display: inline-block;
    position: absolute;
    top: -40%;
    right: 50%;
}
.washlet-content-category-image.line:after {
    content:"";
    width:1px;
    height:50px;
    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%;
}
#choose.index-where {
    padding-bottom:60px;
}
.more-lineup {
    margin:2% auto 5% auto;
    width:60%;
    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;
}
.slick-slide img {
    display: inline-block;
}
#benefit .col-xs-6 {
   margin-bottom:15px; 
}
#benefit h2 span {
    position: relative;
    bottom: -5px;
    font-size:14px;
}


/**     cleanliness     **/

.washlet-visual-inner {
    padding:5% 0 7% 0;
}
.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:402px;
}
@keyframes Turn{
  from{
    transform: rotate(0deg);
  }

  to{
    transform: rotate(360deg);
  }
}
.clean-synergy-circle {
    margin-bottom:5%;
    position: relative;
    width:402px;
    margin:13% auto 0 auto;
}
.clean-synergy-wrap h2,.creative-design-wrap h2,.environment-wrap h2,.relax-wrap h2,.automated-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,.automated-wrap h2 {
    text-align: center;
}
.clean-synergy-wrap p,.automated-wrap p {
    margin:1% 0;
    line-height:1.8;
    font-size:32px;
}
.clean-synergy-circle:before {
    content:"";
    background:url(/washletplus/assets/images/clean_synergy-logo.png) no-repeat;
    display: block;
    width:223px;
    height:64px;
    background-size:100%;
    position: absolute;
    top: 40%;
    right: 22%;
}
.clean-synergy-circle:after {
    content:"";
    background:url(/washletplus/assets/images/clean_synergy-wrap.png) no-repeat;
    display: block;
    width:632px;
    height:535px;
    background-size:100%;
    position: absolute;
    top: -31%;
    right: -23%;
}
.cleanliness-text-wrap {
    font-size:30px;
    text-align: center;
    color:#282828;
}
.cleanliness-text-inner {
    padding:8%;
}
.clean-synergy-wrap {
    background:#f7f8f9 url(/washletplus/assets/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(/washletplus/assets/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(/washletplus/assets/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(/washletplus/assets/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.environment,.washlet-content-category-image {
    text-align: center;
}
.washlet-content-category-image.cefiontect,.washlet-content-category-image.tornadoflush,.washlet-content-category-image.ewater {
    width:40%;
    float:left;
}
.washlet-content-category-image.ewater .is_disabled {
    pointer-events: none;
    cursor: default;
}
.washlet-content-category-image.cefiontect img,.washlet-content-category-image.tornadoflush img,.washlet-content-category-image.ewater img {
    width:100%;
}
.washlet-content-category p {
    font-size:30px;
    padding-left:11%;
}
.sustainability-content .washlet-content-category p {
    padding-left:0;
}


.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 #737373;
  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: #737373;
}
.watch-video-btn:hover::after {
    left:0;
    background-color:#737373;
}
.watch-video-btn {
    position: relative;
    display: inline-block;
    width:65%;
    margin-left:11%;
    margin-bottom: 80px;
}
.watch-video-btn.top-watch a {
    position: absolute;
    z-index: 1;
    bottom: -80px;
    left: 50%;
    width: 1024px;
    height: 160px;
    margin-left: -512px;
    cursor: pointer;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
    background: rgba(98, 98, 98, .75);
}
.watch-video-btn.top-watch a:before {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    content: '';
    -webkit-transition: all .4s cubic-bezier(.47, .12, .11, .99);
    transition: all .4s cubic-bezier(.47, .12, .11, .99);
    background: #626262;
}
.watch-video-btn.top-watch a span {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    display: inline-block;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    text-align: left;
    letter-spacing: .1em;
    color: #fff;
}
.watch-video-btn.top-watch a span:after {
    position: absolute;
    top: -8px;
    right: -60px;
    width: 40px;
    height: 40px;
    content: '';
    background: url(/washletplus/assets/images/i_play.svg) no-repeat center;
    background-size: 100% auto;
}
.watch-video-btn.top-watch a:after {
    display: none;
}
.watch-video-btn.top-watch {
    width:100%;
    margin-left:0;
    border:0;
    overflow: unset;
    margin-top:8%;
}
.watch-video-btn.top-watch a:hover:before {
    top: 15px;
    left: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
}
.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: #737373;
    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% 15px;
    margin-top:3%;
    border-top:1px solid #ccc;
}
.rimless-inner img {
    float:left;
}
.rimless-text {
    float:left;
}
.rimless-text,.rimless-image {
    display: inline-block;
    width:50%;
}
h2.rimless-title:before {
    content:"";
    background:url(/washletplus/assets/images/rimless-icon.png) no-repeat;
    width:56px;
    height:57px;
    display: inline-block;
    background-size:100%;
    vertical-align: middle;
    margin-right:15px;
}
.rimless-text p {
    font-size:30px;
    padding-left:12%;
    line-height:1.3;
}

.washlet-content-category h2,.rimless-text 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%;
    font-weight:900;
}
.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%;
}
.whats-ewater p {
    font-size:16px;
    width:70%;
    margin:0 auto;
}
/**     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 a:hover::before {
    background-color: rgba(0,0,0,0);
    transition: 0.5s;
}
.page-category-content a:hover img {
    background-color:rgba(0,0,0,0);
    opacity: 1!important;
}

.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);
}
.whats-ewater-image.last:after {
    display: none;
}
.structure .scroll-inner p {
    color:#282828;
}
.whats-ewater .scroll-inner p {
    white-space: nowrap;
}
.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: -15%;
    margin-top: 10px;
    width: 0%;
    white-space: nowrap;
}
.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(/washletplus/assets/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;
}
.washlet-design-movie > a {
    display: inline-block;
}
.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: 1;
    /*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: 1;
    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: 1;
    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: 1;
    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;
}
div.modal-btn {
    color:#fff;
    pointer-events: none !important;
}
.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%;
}
.premist:before {
    content:"";
    background:url(/washletplus/assets/images/premist-icon.png) no-repeat;
    width:50px;
    height:50px;
    display: block;
    background-size:100%;
    position: absolute;
    right:-10px;
}
.premist:after {
    content:"PREMIST";
    position: absolute;
    right:-15px;
    bottom:55px;
}
.waterplus:before {
    content:"";
    background:url(/washletplus/assets/images/ewater-icon.png) no-repeat;
    width:50px;
    height:50px;
    display: block;
    background-size:100%;
    position: absolute;
    right:-10px;
}
.waterplus:after {
    content:"EWATER+";
    position: absolute;
    right:-15px;
    bottom:55px;
}
.waterplus-after:before {
    content:"";
    background:url(/washletplus/assets/images/ewater-icon.png) no-repeat;
    width:50px;
    height:50px;
    display: block;
    background-size:100%;
    position: absolute;
    right:-10px;
}
.waterplus-after:after {
    content:"EWATER+";
    position: absolute;
    right:-15px;
    bottom:55px;
}


/**     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:12% !important;
    font-size:16px;
}

.automated-inner-text.auto-flush {
    position: relative;
    top: -60px;
}
.automated-wrap {
    background:#f7f8f9 url(/washletplus/assets/images/hospitality-bg.png) no-repeat;
    background-position:top right;
}
.automated-wrap h2 {
    margin-top:5%;
}
.automated-wrap p {
    text-align: center;
}
.automated-text p {
    text-align: left;
}
.automated-text {
    margin-top:5%;
}
.hospitality-bottom-text p {
    font-size:16px;
    text-align: right;
}
.hospitality-bottom-text {
    margin-top:5%;
}
.hospitality-bottom-wrap {
    margin-top:5%;
    margin-bottom:5%;
}
.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,.hospitality-wrap,.cleanliness-wrap,.design-wrap {
    color:#fff;
    background:#737373;
}
.washlet-main-visual-image {
    width:55%;
    float:left;
    margin-right: -15px;
    margin-left: 25px;
}
.washlet-main-visual-image-sp {
    display: none;
}
.washlet-main-visual-image img {
    float:right;
}
.washlet-main-visual {
    width:45%;
    float:left;
    padding:3%;
    margin-right: -15px;
    margin-left: 5px;
}
.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.6;
    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;
}
.head-index a {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 80px;
    height: 80px;
}
.head-index a:before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: 13px;
    height: 13px;
    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: 4px solid #fff;
    border-right: 4px solid #fff;
}
.head-index a:hover:before {
    left:40%;
}

.index .index-pager .pager-list li.to-top a span {
    text-indent: -999999999px;
}
/*.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 a:hover span {
    background:#999;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.index .index-pager ul.pager-list li.last span:after {
    display: none;
}*/
.index .index-pager .pager-list > li a {
    padding: 0 30px;
}
.index .index-pager {
    height:auto;
}
.head-burger {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    width: 60px;
    height: 40px;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.head-burger > span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: 14px;
    height: 2px;
    margin-left: -7px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background-color: #fff;
}
.head-burger > span:nth-of-type(1) {
    margin-top: -7px;
}
.head-burger > span:nth-of-type(2) {
    margin-top: -1px;
}
.head-burger > span:nth-of-type(3) {
    margin-top: 5px;
}
.container-head {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: rgba(0, 0, 0, .75);
}

 

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


@media screen and (max-width:1240px) {
    .index .index-pager .pager-list > li a {
        padding:0 15px;
    }
}
@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: 1;
        /*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: 1;
        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: 1;
        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: 1;
        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;
    }
    .washlet-main-visual-image img {
        width:100%;
    }
    .washlet-main-visual p {
        font-size:22px;
    }
    .washlet-main-visual-text p {
        font-size:16px;
    }
    .washlet-main-visual {
        padding:0 3%;
    }
}

@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: 1;
        /*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: 1;
        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.8rem;
    }
}

@media screen and (max-width:991px) {
    
    .relax .washlet-design-text-inner {
        width:100%;
    }
    .hospitality-img p {
        left:11%;
    }
    .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,.rimless-text p {
        font-size:20px;
        padding-left:17%;
    }
    .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:290px;
        left:-350px;
    }
    .cleanliness.interaction-image:after {
        height:400px;
        width:410px;
        right:-310px;;
    }
    .hospitality.interaction-image:after {
        width:520px;
        height:330px;
        left:-420px;
    }
    .sustainability.interaction-image:after {
        height:300px;
        right:-400px;
    }
    .cleanliness .interaction-text,#interaction img,.sustainability-img img,.cleanliness-head img,.cleanliness-img img,.rimless-image img {
        width:100%;
    }
    .washlet-content-category-image.line:before {
        top:-60%;
        height:60px;
    }
    .washlet-content-category-image.line:after {
        bottom:-85%;
        height:60px;
    }

    .watch-video-btn {
        width:70%;
        margin-left:17%;
        margin-bottom: 15%;
    }
    .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:100%;
        display: inline-block;
    }
    .sustainability-content .washlet-content-category-image {
        width:50%;
    }
    .washlet-content-category h2,.rimless-text h2 {
        font-size:30px;
    }
    .rimless-text {
        width:60%;
    }
    .rimless-image {
        width:40%;
    }
    .structure .scroll-inner p {
        height:110px;
    }
    #adon .scroll-wrap .slick-track {
        width: 752px !important;
    }
    #adon .whats-ewater .scroll-wrap .slick-track {
        width: 720px !important;
    } 
    .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;
    }

    [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: 1;
        /*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: 1;
        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: 1;
        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: 1;
        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;
    }
    .rimless-inner {
        margin-bottom:5%;
    }
    .index .index-pager .pager-list > li a {
        padding: 0 15px;
    } 
    #interaction h2.u-ttl {
        font-size:4.8rem;
        line-height:1.8;
    }
    .interaction-text p {
        font-size:32px;
    }
    #hospitality {
        margin-top: -130px;
        padding-top: 230px;
    }
    .hospitality .interaction-text {
        margin:-80% auto 0;
    }
    .sustainability .interaction-text {
        margin:-50% auto 0;
    }
    .benefit-btn a {
        font-size:16px;
    }
    #cleanliness {
        margin-top:-100px;
        padding-top:130px;
    }
    #sustainability {
        margin-top: -240px;
        padding-top: 220px;
    }
    .watch-video-btn.top-watch {
        margin-top:13%;
        margin-bottom:6%;
    }
    .automated-inner-text {
        padding-top:7% !important;
    }
    .waterplus-after:before {
        right:-50px;
    }
    .waterplus-after:after {
        right:-55px;
    }
    .premist:before {
        right:-30px;
    }
    .premist:after {
        right:-35px;
    }
    .clean-synergy-circle {
        margin:15% auto 0 auto;
    }
    .ewater-text {
        left:-50%;
    }
}


@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:-130px;
    }
    #sustainability {
         margin-top:-210px;
    }
    .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: 10px;
        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.4rem;
    }
    .washlet-design-text-inner {
        height:246px;
    }
    .automated-inner-text.auto-flush {
        top:0;
    }
    .clean-synergy-circle {
        margin:16% auto;
    }
    .automated-inner-text {
        padding-top: 3% !important;
    }
}

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

    .washlet-design-text-inner h3 br {
        display: block;
    }
    .rimless-text p {
        font-size: 18px;
        padding-left: 22%;
    }

    .washlet-content-category p {
        padding-left:20%;
    }
    .washlet-content-category p, .environment-wrap p, .relax-wrap p {
        font-size:18px;
    }
    .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,.rimless-text h2 {
        font-size:26px;
    }
    .rimless-text h2 {
        text-align: left;
    }

    .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:-90%;
    }
    .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%;
    }
    .creative-design-wrap .washlet-visual-inner,.relax-wrap .washlet-visual-inner {
        height:auto;
    }
    [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;
    }
    .rimless-text, .rimless-image,.rimless-image img {
        width:100%;
    }
}


@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% 0%;
        text-align: center;
    }
    .design .interaction-text, .hospitality .interaction-text {
        width:50%;
    }
    .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:400px;
    }
    .image-wrap {
        top:-280px;
    }
    #cleanliness {
        padding-top:50px;
    }
    .cleanliness .interaction-text {
        top:110px;
    }
    .hospitality .interaction-text {
        top:900px;
    }
    .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%;
    }

    .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,.washlet-content-category-image.cefiontect, .washlet-content-category-image.tornadoflush, .washlet-content-category-image.ewater,.rimless-text,.washlet-content-category-image,.washlet-content-category-image img {
        width:100%;
    }
    .more-lineup a:before {
        width:60px;
    }
    .interaction-image {
        height:auto;
    }
    .cleanliness.interaction-image:after {
        height:430px;
    }
    #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:290px;
        padding-top:10px;
    }
    #lineup.linup-bottom,#choose {
        margin-top:110%;
    }
    #design {
        margin-top:-20px;
        padding-top:120px;
    }

    .sustainability-wrap,.hospitality-wrap,.cleanliness-wrap,.design-wrap {
        margin-top:55px;
        padding:0;
    }
    .washlet-main-visual {
        margin-top:50px;
        margin-left:0;
        margin-right:0;
    }

    .washlet-main-visual h2 {
        font-size:50px;
    }
    .washlet-main-visual p {
        font-size:40px;
    }
    .washlet-main-visual-text p {
        font-size:26px;
        text-align: center;
    }
    .automated-inner-image img {
        display: none;
    }
    .automated-inner-image {
        background:url(/washletplus/assets/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,.washleft-category-inner,.washlet-main-visual,.sustainability-content .washlet-content-category-image,.washlet-main-visual-image-sp img {
        width:100%;
    }
    .washlet-main-visual-image {
        display: none;
    }
    .washlet-main-visual-image-sp {
        width:100%;
        margin-left:0;
        margin-right:0;
        display: block;
    }
    .washlet-content-category p {
        padding-left:15%;
    }
    .watch-video-btn {
        margin-left:15%;
        width:70%;
    }
    .rimless-text p {
        padding-left:15%;
        text-align: left;
    }
    .clean-synergy-circle:before {
        width:133px;
        height:44px;
    }
    .clean-synergy-circle:after {
        top:-35%;
        right:-29%;
    }
    .clean-synergy-circle:before {
        right:23%;
    }
    .watch-video-btn.top-watch {
        margin-top:8%;
        margin-bottom:1%;
    }
    .head-burger {
        display: block;
    }
    .container-head {
        height: 40px;
    }
    .index .index-pager {
        display: block;
    }
    .head-list {
        display: none;
        margin-top: 40px;
        padding-bottom: 20px;
        text-align: left;
        background: rgba(0, 0, 0, .75);
    }
    .head-index a {
        width: 50px;
        height: 40px;
    }
    .index .index-pager.is-active {
        height:40px;
    }
    .watch-video-btn.top-watch a {
        position: static;
        z-index: 1;
        display: block;
        width: 100%;
        height: 50px;
        margin-left: 0;
        text-align: center;
        background: #626262;
    }
    .index .index-pager .pager-list > li a {
        font-size:14px;
    }
    .premist:before,.waterplus-after:before,.waterplus:before {
        right:90px;
    }
    .premist:after,.waterplus-after:after,.waterplus:after {
        right:85px;
    }
    .washleft-category-inner {
        margin-bottom:10px;
    }
    .washlet-main-visual {
        padding-bottom:20px;
    }
    p.item-btn {
        margin:0;
    }
    

}


@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,.rimless-text h2 {
        font-size:24px;
    }
    #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:289px;
    }
    .design.interaction-image:after {
        height:140px;
    }
    .cleanliness.interaction-image:after {
        height:320px;
    }
    .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:690px;
    }
    .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:-36%;
    }
    #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;
    }
    .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:100%;
    }
    .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:-135%;
    }
    .washlet-content-category p,.rimless-text p {
        padding-left:20%;
    }
    .watch-video-btn {
        margin-left:20%;
    }
    #interaction h2.u-ttl {
        font-size:3.8rem;
    }
    #lineup.linup-bottom, #choose {
        margin-top:120%;
    }
    .clean-synergy-circle:before {
        width:103px;
        height:44px;
        right: 24%;
    }
    .watch-video-btn.top-watch {
        margin-top:23%;
        margin-bottom:11%;
    }
    .watch-video-btn.top-watch a span {
        font-size: 1.4rem;
        position: static;
        width: auto;
        margin-left: -20px;
        padding: 18px 0;
        -webkit-transform: translateY(0) rotate(0);
        -ms-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
        text-align: center;
        color: #fff;
}
.watch-video-btn.top-watch a span:after {
    top: 50%;
    right: -30px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
}
.watch-video-btn.top-watch {
    margin-top: 6%;
    margin-bottom: 0%;
}
.clean-synergy-wrap p, .automated-wrap p {
    font-size:28px;
}
.premist:before, .waterplus-after:before, .waterplus:before {
    right:40px;
}
.premist:after, .waterplus-after:after, .waterplus:after {
    right:35px;
}
a.learn-more:after, a.learn-more[aria-expanded="false"]:after {
    top:40%;
}
a.learn-more[aria-expanded="true"]:hover:after,a.learn-more:hover:after {
    margin-top:5px;
}
    .minimized-list .description-box p {
        position: relative;
        z-index: 2;
        background-color: #fff;
    }
}

@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,.rimless-text 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,.rimless-text h2 {
        font-size:21px;
    }
 
    .structure h2, .whats-ewater h2 {
        font-size:26px;
    }
    .design .interaction-text, .hospitality .interaction-text {
        top:240px;
    }
    #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:580px;
    }
    .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:before {
        top:-165%;
    }
    .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:-64%;
        top:-45%;
    }
    .clean-synergy-circle {
        margin:40% auto 0;
    }
    .clean-synergy-circle:before {
        background-size:85%;
        right:16%;
    }
    #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;
    }
    .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%;
    }
    .watch-video-btn a {
        font-size:16px;
    }
    #sustainability {
        margin-top:220px;
    }
    #interaction h2.u-ttl {
        font-size:3.4rem;
    }
    a.learn-more[aria-expanded="true"]:after {
        top:0%;
    }
    
}


@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,.rimless-text h2 {
        font-size:16px;
    }
    .rimless-inner img {
        width:100%;
    }
    .washlet-content-category p,.rimless-text 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:180px;
    }
    .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:464px;
    }
    #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:-277%;
    }
    .washlet-content-category-image.line:before {
        top:-215%;
    }
    .clean-synergy-circle {
        width:147px;
    }
    .clean-synergy-circle:after {
        background-size: 70%;
        right: -110%;
        top: -45%;
    }
    .clean-synergy-circle:before {
        right:10%;
    }
    #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;
    }
    .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;
    }
    .watch-video-btn a {
        font-size: 12px;
    } 
    #sustainability {
        margin-top:180px;
    }
    #interaction h2.u-ttl {
        font-size: 2.8rem;
    }
    .washlet-main-visual h2 {
        font-size:30px;
    }
    .waterplus-after:before {
        right:0;
    }
    .waterplus-after:after {
        right:-5px;
    }
}





.modal
{
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;

    display: none; 

    width: 100%;
    height: 100%;
}
.modal .modal-bg
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    opacity: .8;
    background: #000;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
}
.modal .modal-inner
{
    position: absolute;
    z-index: 1; 
    top: 50%;
    left: 50%;

    width: 100%;
    max-width: 1024px;
    height: 100%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
@media screen and (min-width: 0) and (max-width: 568px)
{
    .modal .modal-inner
    {
        width: 90%;
    }
}
.modal #player
{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 90%;
    padding-top: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
@media screen and (min-width: 0) and (max-width: 568px)
{
    .modal #player
    {
        min-width: 0;
        padding-top: 50%;
    }
}
.modal #player .video-js
{
    position: absolute;
    top: 0;
    right: 0;

    width: 100% !important;
    height: 100% !important;
}
.modal #player video
{
    position: absolute;
    top: 0;
    right: 0;

    width: 100% !important;
    height: 100% !important;
}
.modal .modal-close
{
    position: absolute;
    z-index: 10;
    top: -70px;
    right: 0;

    width: 50px;
    height: 50px;

    cursor: pointer;
    -webkit-transition: all .5s ease;
            transition: all .5s ease; 
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
@media screen and (min-width: 0) and (max-width: 568px)
{
    .modal .modal-close
    {
        top: -50px;
        right: 0;

        width: 40px;
        height: 40px;
    }
}
.modal .modal-close:hover
{
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
}
.modal .modal-close:before
{
    position: absolute;
    top: 25px;
    right: 0;

    width: 100%;
    height: 2px;

    content: '';

    background: #fff;
}
@media screen and (min-width: 0) and (max-width: 568px)
{
    .modal .modal-close:before
    {
        top: 20px;
    }
}
.modal .modal-close:after
{
    position: absolute;
    top: 0;
    left: 25px;

    width: 2px;
    height: 100%;

    content: '';

    background: #fff;
}
@media screen and (min-width: 0) and (max-width: 568px)
{
    .modal .modal-close:after
    {
        left: 20px;
    }
}


#lineup-top .slider {
    display: block;
    min-height: 504px !important;
}

/*20240209アクセシビリティ改修*/
*:focus-visible{
    outline: #000 3px solid !important;
    outline-offset:-5px !important;
    border: 4px solid #fff !important;
}  
.dialog {
    position: relative;
    margin: 0;
    border: none;
    overflow: visible;
    max-width: 1024px;
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dialog::before {
	content: "";
  display: block;
  padding-top: 56.25%;
}
.dialog::backdrop {
    opacity: .8;
    background-color: #000;
}
.dialog .video-js {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}
.dialog-close {
    /* button reset */
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    /* button reset */
    position: absolute;
    z-index: 10;
    top: -70px;
    right: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
    -webkit-transition: all .5s ease;
            transition: all .5s ease; 
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
@media screen and (min-width: 0) and (max-width: 568px) {
    .dialog-close {
        top: -50px;
        right: 0;
        width: 40px;
        height: 40px;
    }
}
.dialog-close:hover {
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
}
.dialog-close::before {
    position: absolute;
    top: 25px;
    right: 0;
    width: 100%;
    height: 2px;
    content: '';
    background: #fff;
}
@media screen and (min-width: 0) and (max-width: 568px) {
    .dialog-close::before {
        top: 20px;
    }
}
.dialog-close:after {
    position: absolute;
    top: 0;
    left: 25px;
    width: 2px;
    height: 100%;
    content: '';
    background: #fff;
}
@media screen and (min-width: 0) and (max-width: 568px) {
    .dialog-close:after {
        left: 20px;
    }
}

.linup-bottom .watch-video-btn {
    margin: 2% auto 5% auto;
    width: 28%;
    display: block;
}