@charset "UTF-8";
.toiletPage{
  overflow: hidden;
  max-width: 1170px;
  margin: 0 auto 80px;
}
.toiletPage .el-d-section {
  box-sizing: border-box;
  margin-bottom: 0;
}
@media screen and (max-width: 699px){
  .toiletPage{
    margin: 0 auto 10%;
  }
  .toiletPage .el-d-section {
    padding: 0;
    margin: 0;
  }
}
.toiletPage img{
  -webkit-backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
  -webkit-font-smoothing: antialiased;/* animation時の文字にじみ防止 */
	-moz-osx-font-smoothing: grayscale;
  width: 100%;
  display: block;
}
.toiletPage picture{
  display: block;
}
.bg{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.relative{
  position: relative;
}
.absolute{
  position: absolute;
}
.flexBox{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 0px;
}
.flex_1{
  flex: 1;
}
.reverse{
  flex-direction: row-reverse;
}
.center{
  text-align: center;
}
@media screen and (min-width:700px){
  .sp{display: none !important;}
}
@media screen and (max-width:699px){
  .pc{display: none !important;}
}




.heading01{
  margin-bottom: 30px;
  font-size: 30px;
  font-weight: 500;
}
.txt01{
  font-size: 20px;
  line-height: 1.7;
  text-align: justify;
}
.ib{
  display: inline-block;
}


body [data-aos]{
  transition-timing-function: cubic-bezier(0.12, 0, 0.39, 0) !important;
}
.toiletPage{
  overflow: hidden;
}
.toiletPage h2{
  padding-top: 8%;
  font-size: 78px;
  line-height: 1.18;
}
.toiletPage h2 span{
  font-size: .67em;
}
.toiletPage h2 span span{
  font-size: .77em;
}
.toiletNote{
  font-size: 12px;
  line-height: 1;
  text-align: right;
}
.italic{
  font-style: italic;
}
@media all and (-ms-high-contrast: none) {
  .italic{
    transform: skewX(-15deg);
  }
  .italic .ribbon{
    transform: skewX(15deg);
  }
}
.imgLine{
  position: relative;
  left: calc(50% - 640px);
  width: 1280px;
}
.bgBlue01,
.bgBlue01 .ribbon.scrollAdd::before{
  background-color: #1E4BB4;
}
.bgBlue01 h2{
  color: #fff;
}
.bgBlue02{
  background-color: #EDF8FF;
}
.bgBlue03{
  background-color: #C8F5FF;
}
.bgBlue04{
  background-color: #01ACE4;
}
.ribbon{
  display: block;
  position: relative;
  width: 60%;
  margin: auto;
  height: auto;
  padding: 1.3% 0;
  z-index: 80;
}
.ribbon.scrollAdd::before{
  animation: ribbon_img 2.5s cubic-bezier(0.6, 0, 0.2, 1) forwards;
  content: '';
  background: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  right: 0;
  width: 100%;
  z-index: 1;
}
.ribbon img{
  display: block;
  opacity: 0;
  transition-delay: 1.1s;
  position: relative;
}
.ribbon.scrollAdd img{
  opacity: 1;
}
@keyframes ribbon_img{
  99%{
    transform:translateX(0);
    opacity: 1;
  }
  99%{
    transform:translateX(200%);
    opacity: 1;
  }
  100%{
    transform:translateX(200%);
   opacity: 0;
  }
}
@media screen and (max-width:699px) {
  .toiletPage h2{
    font-size: 11vw;
  }
  .imgLine{
    width: 100%;
    left: 0;
  }
}


.mv{
  position: relative;
  height: 800px;
  background: url(../img/mv_bg01.png) no-repeat;
  background-size: cover;
  background-position: center;
}

.mvTitle{
  position: absolute;
  top: 45px;
  left: 70px;
  width: 72.1%;
  z-index: 1000;
}
.mvBee{
    position: absolute;
    top: 0px;
    left: -56px;
    width: 1290px;
    z-index: 800;
}
.mvBee.mechanismBee{
    top: -2px;
    left: -142px;
}
.jsActive .mvBee{
	animation: mvBee 9s ease-in-out infinite normal;
}
@keyframes mvBee {
  0%, 30% {opacity: 0; }
  40%, 90% {opacity: 1;}
  100% { opacity: 0; }
}
.mvBg02{
  position: absolute;
  top: 65px;
  left: 11%;
  width: 94%;
  z-index: 1100;
	opacity: 0;
}
.jsActive .mvBg02 {
  position: absolute;
    top: 63px;
    left: 16%;
    width: 81%;
  z-index: 1100;
	animation: mvBg02 9s ease-in-out infinite normal;
}
@keyframes mvBg02 {
  0%, 43% {opacity: 0; }
  50%, 90% {opacity: 1;}
  100% { opacity: 0; }
}

.mvToilet{
  position: absolute;
  top: 55px;
  right: 0;
  width: 50%;
  z-index: 1000;
}
.mvPlus{
  position: absolute;
  top: 20px;
  left: 95%;
  width: 11%;
  z-index: 1000;
}
@media screen and (min-width:700px) and (max-width:1200px) {
  .mvPlus{
    left: 87%;
  }
}
.mvProduct{
  position: absolute;
  top: 200px;
  width: 100%;
  left: 30px;
  z-index: 1000;
}
.mv .mvProduct01{
  width: 27.8%;
  display: inline;
}
.mv .mvProduct02{
  width: 19.65%;
  margin-left: -68px;
  display: inline;
}
.mvLine{
  position: absolute;
  top: 465px;
  z-index: 900;
}
.paperInner {
  position: absolute;
  top: 240px;
  width: 100%;
  z-index: 900;
}
.paperMain {
  position: relative;
  left: 575px;
  z-index: 901;
  width: 12.6%;
}
.kaoriLeft {
  overflow: hidden;
  position: absolute;
  top: -290px;
  left: -144px;
  margin: auto;
  padding-left: 100px;
  width: 691px;
  height: 471px;
  z-index: 902;
  backface-visibility: hidden;
  -webkit-mask-image: linear-gradient(to left, #000 70%, transparent 80%);
  mask-image: linear-gradient(to left, #000 70%, transparent 80%);
}
@media all and (-ms-high-contrast: none) {
  .kaoriLeft {
    left: 18px;
    padding-left: 0;
  }
}
.jsActive .kaoriLeft {
  animation: blue-left 9s ease-in-out infinite normal;
}
.kaoriLeft img {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 100px;
  width: 691px;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, transparent 45%, rgb(255 255 255 / 0%) 100%);
  transform-origin: 0 0;
  backface-visibility: hidden;
  opacity: .7;
}
@media all and (-ms-high-contrast: none) {
  .kaoriLeft img {
    left: -3.5vw;
  }
}
.jsActive .kaoriLeft img {
  animation: blue-left-before 9s ease-in-out infinite normal;
  background-image: url(../img/blue_left.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.jsActive .kaoriRight img {
  animation: blue-right-before 9s ease-in-out infinite normal;
  background-image: url(../img/blue_right.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.kaoriRight {
  overflow: hidden;
  position: absolute;
  top: -412px;
  left: 617px;
  margin: auto;
  padding-right: 100px;
  width: 685px;
  height: 536px;
  z-index: 900;
  backface-visibility: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 70%, transparent 80%);
  mask-image: linear-gradient(to right, #000 70%, transparent 80%);
}
.jsActive .kaoriRight {
  animation: blue-right 9s ease-in-out infinite normal;
}
.kaoriRight img {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 100px;
  width: 685px;
  height: 100%;
  background: linear-gradient(270deg, transparent 0%, transparent 45%, rgb(255 255 255 / 0%) 100%);
  transform-origin: 100% 100%;
  opacity: .7;
}
@media all and (-ms-high-contrast: none) {
  .kaoriRight {
    padding-right: 0;
  }
  .kaoriRight img {
    right: 0;
  }
}
@keyframes blue-left {
  0% {transform: translateX(100%); opacity: 1; }
  50%, 90% {transform: translateX(0); opacity: 1;}
  100% {transform: translateX(0); opacity: 0; }
}
@-ms-keyframes blue-left {
  0% {transform: translateX(100%) rotate(0.1deg) translate3d(0, 0, 0) perspective(0); opacity: 0;}
  50%, 90% {transform: translateX(0) rotate(0.1deg) translate3d(0, 0, 0) perspective(0); opacity: 1;}
  100% {transform: translateX(0) rotate(0.1deg) translate3d(0, 0, 0) perspective(0); opacity: 0;}
}

@keyframes blue-left-before {
  0% {transform: translateX(calc(-100% - 100px)); }
  50%, 100% {transform: translateX(0); }
}
@-ms-keyframes blue-left-before {
  0% {transform: translateX(-100%) rotate(0.1deg) translate3d(0, 0, 0) perspective(0); }
  50%, 100% {transform: translateX(0) rotate(0.1deg) translate3d(0, 0, 0) perspective(0); }
}

@keyframes blue-right {
  0% {transform: translateX(-100%); opacity: 0; }
  50%, 90% {transform: translateX(0); opacity: 1;}
  100% {transform: translateX(0); opacity: 0; }
}

@keyframes blue-right-before {
  0% {transform: translateX(calc(100% + 100px)); }
  50%, 100% {transform: translateX(0); }
}
@-ms-keyframes blue-right-before {
  0% {transform: translateX(100%) rotate(0.1deg) translate3d(0, 0, 0) perspective(0); }
  50%, 100% {transform: translateX(0) rotate(0.1deg) translate3d(0, 0, 0) perspective(0); }
}

@media screen and (max-width:699px) {
  .mv{
    height: 149vw;
    background-image: url(../img/mv_bg01sp.png);
  }
  .mvTitle{
    top: 6vw;
    left: 5vw;
    width: 71.3%;
  }
  .mvBee{
    left: -7vw;
    width: 104%;
    top: -46vw;
  }
.mvBee.mechanismBee{
  top: -3vw;
  left: 0;
}
  .jsActive .mvBg02{
    top: -234%;
    left: 2%;
    width: 89%;
  }
  .mvToilet{
    top: 5vw;
    left: 20vw;
    right: auto;
    width: 93vw;
  }
  .mvPlus{
    top: 4.3vw;
    left: 81vw;
    width: 14%;
  }
  .mvProduct{
    top: 68vw;
    left: 5vw;
  }
  .mv .mvProduct01{
    width: 39.6%;
  }
  .mv .mvProduct02{
    width: 27.6%;
    margin-left: -11vw;
  }
  .mvLine{
    top: 104vw;
    left: 0;
    width: 100%;
  }
  .paperInner {
    top: 45vw;
    left: 4vw;
  }
  .paperMain {
    left: 45vw;
    width: 19vw;
  }
  .kaoriLeft,
  .kaoriLeft img,
  .kaoriLeft img {
    width: 110vw;
  }
  .kaoriLeft {
    height: 73.6vw;
    top: -45vw;
    left: calc(-53vw - 100px);
  }
  .kaoriRight,
  .kaoriRight img{
    width: 112.3vw;
  }
  .kaoriRight {
    height: 87.6vw;
    top: -68vw;
    left: 52vw;
  }
}


.nayami{
  position: relative;
  z-index: 902;
  margin-top: -50px;
}
.nayami .blockHeader{
  position: relative;
  z-index: 1000;
}
.nayami .blockContent{
  margin-top: -320px;
  padding-top: 75px;
  padding-bottom: 110px;
  background-image: url(../img/nayami_bg.png);
  background-position: center;
}
.nayami picture{
  margin: auto;
}
.nayami .nayamiTitle{
  width: 47.4%;
  margin-bottom: 4%;
}
.nayami .nayamiImg01{
  width: 27%;
}
.nayamiFuki01{
  position: absolute;
  width: 35.6%;
  top: -42%;
  left: -4%;
  z-index: 100;
}
.nayamiFuki02{
  position: absolute;
  width: 42.6%;
  top: -33%;
  left: 62%;
}
.nayamiFuki01 span,
.nayamiFuki02 span{
  position: absolute;
  top: 0;
  left: 0;
  animation: wafting1 1s ease-in-out 0.5s infinite alternate;
}
.nayamiFuki02 span{
  animation: wafting1 1s ease-in-out 1s infinite alternate;
}
.nayamiFuki01 span img,
.nayamiFuki02 span img{
  transform: rotate(0.001deg);
}
@keyframes wafting1 {
  0% {
            transform: scale(1) translateY(5px);
  }
  100% {
            transform: scale(1.1) translateY(0);
  }
}
.nayamiImg02{
  position: absolute;
  top: -39%;
  left: 0;
}
.sokode{
  width: 40%;
  margin: auto;
}
.nayamiImg06,
.nayamiImg07{
  position: absolute;
  top: 32%;
  left: 26.5%;
  width: 23.5%;
}
.nayamiImg07{
  left: 50.5%;
}
.nayami .nayamiImg05a{
  position: absolute;
  top: 74%;
  left: 12%;
  width: 17%;
}
@media screen and (max-width:699px) {
  .nayami .nayamiTitle{
    width: 71.6%;
  }
  .nayami .nayamiImg01{
    width: 41.4%;
    padding-top: 78vw;
    margin-bottom: 7vw;
  }
  .nayamiFuki01{
    width: 63%;
    top: 0;
    left: -7%;
  }
  .nayamiFuki02{
    width: 85%;
    top: 20%;
    left: 27%;
  }
  .nayami .blockContent{
    margin-top: -50vw;
    padding-top: 12vw;
    padding-bottom: 0;
  }
  .sokode{
    width: 48%;
    margin-bottom: 3%;
  }
  .nayamiImg06,
  .nayamiImg07{
    width: 44%;
    top: 32%;
    left: 6.5%;
  }
  .nayamiImg07{
    left: 49%;
  }
  .nayami .nayamiImg05a{
    top: 72%;
    left: 3%;
    width: 28.6%;
  }
}


.lineImage>div{
  background: url(../_var/brandURL/contentsURL/img/bg-lineYellow2.png) no-repeat;
  padding-top: 59.189189189189186%;
  padding-top: 100%;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.lineImage>div.aos-animate{
  width: 100%;
  transition: width .5s ease 0s;
}
.lineTitle{
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1000;
}


.mechanism02{
  z-index: 1000;
}
.mechanism .blockHeader .paperInner{
  top: -40px;
  left: -10px;
}
.mechanism .blockHeader .paperMain{
  left: 855px;
  width: 19.8%;
}
.mechanism .blockHeader .kaoriLeft{
  top: 151px;
  left: 352px;
}
@media all and (-ms-high-contrast: none) {
  .mechanism .blockHeader .kaoriLeft{
    left: 505px;
  }
}
.mechanism .blockHeader .kaoriLeft,
.mechanism .blockHeader .kaoriLeft img,
.mechanism .blockHeader .kaoriLeft img{
  width: 430px;
  height: 174px;
}
.mechanism .blockHeader .kaoriLeft img{
  background-image: url(../img/mechanism04.png);
  opacity: 1;
}
@media screen and (min-width:700px) and (max-width:1200px) {
  .mechanism .blockHeader div.relative{
    left: -11%;
  }
}
@media screen and (max-width:699px) {
  .mechanism02{
    padding-top: 4vw;
    margin-bottom: -9vw;
  }
  .mechanism .blockHeader .paperInner{
    top: 9vw;
    left: -2vw;
  }
  .mechanism .blockHeader .paperMain{
    left: 59%;
    width: 33.6%;
  }
  .mechanism .blockHeader .kaoriLeft{
    top: 66%;
    left: auto;
    right: 37%;
  }
  .mechanism .blockHeader .kaoriLeft,
  .mechanism .blockHeader .kaoriLeft img,
  .mechanism .blockHeader .kaoriLeft img{
    width: 79.5vw;
    height: 32.3vw;
  }
}

.mechanismLine{
  z-index: 100;
}

.mechanismList{
  background: url(../img/mechanism_bg01.png) no-repeat;
  background-size: cover;
  background-position: center;
  height: 957px;
  margin-top: -230px;
}
.mechanismList li{
  width: 32%;
  position: absolute;
  top: 90px;
  left: 64%;
  z-index: 1000;
}
.mechanismList li:nth-of-type(2){
  top: 140px;
  left: 21%;
}
.mechanismList li:nth-of-type(3){
  width: 43.6%;
  top: 475px;
  left: 0;
}
.mechanismList .mvBg02{
  width: 110%;
  top: 188px;
  left: -3%;
  z-index: 1000;
}
.mechanismList .mvToilet{
  width: 54%;
  top: 215px;
}
.mechanismList .paperInner{
  top: 455px;
  left: -5%;
}
.mechanismList .toiletNote{
  position: absolute;
  top: 795px;
  right: 0;
}
.mechanismImage ul{
  top: -95px;
	z-index: 1300;
}
.mechanismImage li{
  width: 48%;
}
.mechanismImage li div{
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  width: 75%;
  margin: auto;
  animation: keika3_div 6s linear infinite normal;
}
@keyframes keika3_div {
  0%, 92% { opacity: 1;}
  95%, 100% { opacity: 0; }
}
.mechanismImage li div img{
  position: absolute;
}
@media screen and (max-width:699px) {
  .mechanismList{
    background-image: url(../img/mechanism_bg01sp.png);
    background-position: top;
    height: 214vw;
    margin-top: -50vw;
  }
  .mechanismList li{
    width: 56%;
    top: 35vw;
    left: 37%;
    z-index: 1100;
  }
  .mechanismList li:nth-of-type(2){
    top: 74vw;
    left: 5%;
  }
  .mechanismList li:nth-of-type(3){
    width: 56%;
    top: 148vw;
    left: 9%;
  }
  .mechanismList .mvBg02{
    width: 90%;
    top: 46vw;
    left: 7%;
  }
  .mechanismList .mvToilet{
    width: 126%;
    top: 59VW;
    left: -8%;
  }
  .mechanismList .paperInner{
    top: 117vw;
    left: -6vw;
  }
  .paperMain{
    width: 24vw;
    top: -1vw;
    left: 43vw;
  }
  .mechanismList .toiletNote{
    top: 206vw;
    right: 7vw;
    font-size: 2.66vw;
  }
  .mechanismImage ul{
    top: 0;
    display: block;
    padding: 13vw 0 20vw;
  }
  .mechanismImage li{
    width: 92%;
    margin: auto;
  }
  .mechanismImage li+li{
    margin-top: 8vw;
  }
}


.keika3_1{
  animation: keika3_1 6s linear infinite normal;
}
@keyframes keika3_1 {
  0%, 5%, 100% { opacity: 0; }
  9%, 99% { opacity: 1;}
}
.keika3_2{
  animation: keika3_2 6s linear infinite normal;
}
@keyframes keika3_2 {
  0%, 17%, 100% { opacity: 0; }
  21%, 99% { opacity: 1;}
}
.keika3_3{
  animation: keika3_3 6s linear infinite normal;
}
@keyframes keika3_3 {
  0%, 28%, 100% { opacity: 0; }
  32%, 99% { opacity: 1;}
}


.jizoku .flexBox{
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 8%;
}
.jizoku_01{
  position: absolute;
  top: -50%;
  left: 0;
  width: 15.8%;
}
.jizoku_02{
  width: 40.1%;
}
.jizoku .graph{
  margin-left: 4%;
  width: 52%;
}
.jizoku .graph div{
  animation: keika4_div 7s linear infinite normal;
}
@keyframes keika4_div {
  0%, 96% { opacity: 1;}
  99%, 100% { opacity: 0; }
}
.jizoku .graph img{
  position: absolute;
  bottom: 0;
  left: 0;
}
.jizoku .graph img.jizoku_g01{
  animation: keika4_div_1 7s linear infinite normal;
}
@keyframes keika4_div_1 {
  0%, 10%, 100% { opacity: 0; }
  14%, 99% { opacity: 1;}
}
.jizoku .graph img.jizoku_g02{
  animation: keika4_div_2 7s linear infinite normal;
}
@keyframes keika4_div_2 {
  0%, 18%, 100% { opacity: 0; }
  22%, 99% { opacity: 1;}
}
.jizoku .graph img.jizoku_g03{
  animation: keika4_div_3 7s linear infinite normal;
}
@keyframes keika4_div_3 {
  0%, 26%, 100% { opacity: 0; }
  30%, 99% { opacity: 1;}
}
.jizoku .graph img.jizoku_g04{
  animation: keika4_div_4 7s linear infinite normal;
}
@keyframes keika4_div_4 {
  0%, 34%, 100% { opacity: 0; }
  38%, 99% { opacity: 1;}
}
.jizoku .flexBox:nth-of-type(2){
  justify-content: center;
  padding-bottom: 10%;
  flex-direction: row-reverse;
}
.jizoku_03{
  width: 57.6%;
}
.jizoku_04{
  width: 32%;
}
@media screen and (max-width:699px){
  .jizoku h2{
    text-indent: -1.8em;
  }
  .jizoku .imgLine{
    top: -10vw;
    z-index: 2;
  }
  .jizoku .flexBox{
    display: block;
  }
  .jizoku .flexBox:nth-of-type(1){
    margin-top: -15vw;
    z-index: 100;
  }
  .jizoku_01{
    top: -23vw;
    left: 4vw;
    width: 22%;
    z-index: 100;
  }
  .jizoku_02{
    width: 100%;
    margin: auto;
  }
  .jizoku .graph{
    width: 86.7%;
    height: 44vw;
    margin: auto;
  }
  .jizoku .flexBox:nth-of-type(2){
    margin-top: -13vw;
    padding-bottom: 20%;
  }
  .jizoku_03{
    width: 100%;
  }
  .jizoku_04{
    width: 73.3%;
    margin: auto;
  }
}


.seihouLine{
  z-index: 100;
}
.seihou .blockContent{
  margin-top: -220px;
  padding: 110px 0 120px;
}
.seihouBorder{
  border: 6px solid #8CDCFF;
  border-radius: 5px;
  background: #fff;
}
.seihou_01{
  position: absolute;
  top: -10%;
  left: 0;
  width: 15.8%;
  z-index: 100;
}
.seihou_02{
  width: 65%;
  margin: auto;
  padding: 7% 0 6.5%;
}
.seihou_03{
  width: 54.7%;
  margin: auto;
  padding-bottom: 11%;
}
.seihou_04{
  position: absolute;
  top: 26%;
  left: 38.5%;
  width: 41.5%;
}
@media screen and (max-width:699px){
  .seihou h2{
    text-indent: -2em;
  }
  .seihou .imgLine{
    top: -10vw;
    z-index: 2;
  }
  .seihou .blockContent{
    margin-top: -47vw;
    padding: 19vw 0 22vw;
  }
  .seihou_01{
    top: -10vw;
    left: 4vw;
    width: 22%;
    z-index: 100;
  }
  .seihouBorder{
    width: 87.3vw;
    margin: auto;
    border-width: 1.2vw;
  }
  .seihou_02{
    width: 115%;
    margin-left: -7.5vw;
    padding: 11% 0 16%;
  }
  .seihou_03{
    width: 86%;
    padding-bottom: 13%;
  }
  .seihou_04{
    top: 27%;
    left: 35.5%;
    width: 61.7%;
  }
}




.voice .blockHeader{
  background-image: url(../img/voice_bg01.png);
  background-position: center;
  padding-bottom: 160px;
}
.voice h2{
  padding: 6% 0 3%;
}
.voice .block01{
  height: 220px;
  z-index: 100;
}
.voice03,
.voice03a,
.voice03b{
  position: absolute;
  top: -110px;
  left: 0;
  right: 0;
  width: 44%;
  margin: auto;
}
body .voice03a[data-aos]{
  backface-visibility: hidden;
  transform: scale(.1) translateZ(0);
  transition-timing-function: cubic-bezier(.52,3.2,.46,1.51) !important;
}
body .voice03a[data-aos].aoi-animate{
  transform: scale(1) translateZ(0);
}
.voice .voice04{
  position: absolute;
  bottom: -220px;
  left: -3%;
  width: 25.5%;
}
.voice .voice05{
  position: absolute;
  top: 80px;
  left: 78%;
  width: 8.5%;
}
.voice .voice06{
  position: absolute;
  top: 140px;
  left: 84%;
  width: 20.5%;
}
@media screen and (min-width:700px) and (max-width:1200px) {
  .voice .voice06{
    left: 78%;
  }
}
.voice .block02{
  background-image: url(../img/voice_bg02.png);
  background-position: center;
  background-color: #C8F5FF;
  padding: 180px 0 90px;
}
.voice li{
  max-width: 950px;
  margin: auto;
}
.voice li+li{
  margin-top: 3%;
}
.voice li img{
  width: 120px;
  height: 120px;
  padding: 0 4px;
}
.voice li div{
  width: 814px;
  height: 170px;
  padding: 35px 55px 50px 85px;
  box-sizing: border-box;
}
.voice li.reverse div{
  padding: 35px 85px 50px 55px;
}
.voice li div picture{
  position: absolute;
  top: 0;
  left: 0;
}
@keyframes wafting2 {
  0%, 25%, 100% { transform: scale(1);}
  12.5% { transform: scale(1.05);}
}
.voice li:nth-of-type(1) div.aos-animate picture{
  animation: wafting2 6s ease-in-out 0s infinite normal;
}
.voice li:nth-of-type(2) div.aos-animate picture{
  animation: wafting2 6s ease-in-out 1.5s infinite normal;
}
.voice li:nth-of-type(3) div.aos-animate picture{
  animation: wafting2 6s ease-in-out 3s infinite normal;
}
.voice li:nth-of-type(4) div.aos-animate picture{
  animation: wafting2 6s ease-in-out 4.5s infinite normal;
}
.voice li div img{
  width: 100%;
  height: 100%;
  transform: rotate(0.001deg);
}
.voice li p{
  position: relative;
  font-size: 20px;
  line-height: 1.8;
  height: 100%;
}
.voice li p em{
  font-weight: bold;
  font-style: normal;
}
.voice li span{
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 16px;
  line-height: 1;
}
@media screen and (max-width: 699px){
  .voice .blockHeader{
    background-size: 5vw;
    padding-bottom: 44vw;
  }
  .voice .blockContent{
    background-size: 19vw;
  }
  .voice .block01{
    height: 72vw;
  }
  .voice h2{
    padding: 6% 0 8%;
  }
  .voice01{
    width: 136%;
    margin-left: -17%;
  }
  .voice03,
  .voice03a,
  .voice03b{
    top: -37vw;
    width: 73.3%;
  }
  .voice .voice04{
    bottom: -72vw;
    left: 1%;
    width: 35.5%;
  }
  .voice .voice05{
    top: 42vw;
    left: 82%;
    width: 9.8%;
  }
  .voice .voice06{
    top: 37vw;
    left: 0;
    width: 100%;
  }
  .voice .block02{
    padding: 19% 0 11%;
  }
  .voice ul{
    width: 95%;
    margin: auto;
  }
  .voice li+li{
    margin-top: 5%;
  }
  .voice li div{
    width: 77%;
    height: 59vw;
    padding: 9vw 7vw 11vw 13vw;
    position: relative;
  }
  .voice li:nth-of-type(2) div{
    height: 60vw;
  }
  .voice li:nth-of-type(3) div{
    height: 68vw;
  }
  .voice li:nth-of-type(4) div{
    height: 52vw;
  }
  .voice li.reverse div{
    padding: 9vw 13vw 11vw 7vw;
  }
  .voice li p{
    font-size: 4.2vw;
  }
  .voice li span{
    font-size: 4vw;
  }
  .voice li img{
    width: 20.6vw;
    height: 20.6vw;
    padding: 0;
    margin-top: 3vw;
  }
  .voice .toiletNote{
    font-size: 2.66vw;
    padding-right: 5%;
  }
}



.lineUp::before{
  background: #EDF8FF;
  content: '';
  position: absolute;
  top: 313px;
  bottom: 0;
  left: calc(50% - 640px);
  right: 0;
  width: 1280px;
  height: 100%;
  z-index: -1;
}
.lineUp .ribbon.scrollAdd::before{
  background: linear-gradient(180deg, #fff 50%, #EDF8FF 50%);
}
.lineUp .blockContent{
  padding-bottom: 12%;
}
.lineUp .bgWhite{
  background: #fff;
  padding: 80px 0 120px;
}
.lineUp02{
  padding-top: 3%;
}
.lineUp h3{
  width: 50%;
  margin: auto;
}
.lineUp ul{
  justify-content: center;
  align-items: flex-end;
}
.lineUp li{
  text-align: center;
  width: 31%;
}
.lineUp li picture{
  width: 74.2%;
  margin: 0 auto 5%;
}
.lineUp li a{
  width: 200px;
  line-height: 1.55;
  margin: auto;
}
.lineUpItem02{
  padding-top: 7.7%;
}
.lineUpItem02 li a{
  background: #32B138;
}
@media screen and (max-width:699px) {
  .lineUp::before{
    top: 38.5vw;
  }
  .lineUp01{
    width: 138%;
    margin-left: -19%;
  }
  .lineUp .blockContent{
    padding-bottom: 19%;
  }
  .lineUp .bgWhite{
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    padding: 16% 0 18%;
  }
  .lineUp h3{
    width: 88%;
    margin-bottom: 10%;
  }
  .lineUp li{
    width: 100%;
  }
  .lineUp li+li{
    margin-top: 14%;
  }
  .lineUp li a{
    width: 65%;
  }
  .lineUpItem02{
    padding-top: 23%;
  }
}


@media screen and (min-width:1170px) {
#mv .paperInner {
top: 0;
width: 100vw;
max-width: 1170px;
left: -85px;
	height: 800px;
	overflow: hidden;
}
#mv .paperMain {
left: 660px;
	top: 240px;
	width: 126px;
}
#mv .kaoriLeft {
    top: -50px;
    left: -60px;
}
#mv .kaoriRight {
    top: -172px;
    left: 702px;
}
}
@media screen and (min-width:1170px) and (-ms-high-contrast: none) {
  #mv .kaoriLeft {
		left: 110px;
  }
}

@media all and (-ms-high-contrast: none) {
	#mv .kaoriLeft img {
		left: -70px ;
  }
}