@font-face {
    font-family: 'kosugimaru';
    src: url('../font/kosugimaru.woff') format('woff');
  }
a{
    text-decoration: none;
}   
 a,a:hover,a:visited{
    color: inherit;    
}
body{
    margin: 0;
}
/*ローディングアニメーション*/
#loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background-color: #0bd;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
.load-text{
    color:white;
    font-family: Georgia;
    font-size: 1.4rem;
}
.sk-cube-grid {
    width: 40px;
    height: 40px;
    margin: 100px auto;
}

.sk-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: #333;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
            animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
    -webkit-animation-delay: 0s;
            animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
    } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
    }
}

@keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
    } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
    } 
}
.loaded {
display: none;
opacity: 0;
visibility: hidden;
}
/*アニメーション*/
.sa{
    display: none;
    opacity: 0;
    transition: all 3s 1s ease;
}
.sa.show{
    display: flex;
    opacity: 1;
}
.sa2{
    opacity: 0;
    transition: all 1s 0.6s ease;
}
.sa2.show{
    opacity: 1;
    transform: none;
}

.sa--lr {
    transform: translate(-100px, 0);
  }
  .sa--lr2 {
    transform: translate(-500px, 0);
  }
  .sa--lr3 {
    transform: translate(-250px, 0);
  }
  .sa--rl {
    transform: translate(100px, 0);
  }
   
  .sa--up {
    transform: translate(0, 100px);
  }
   
  .sa--down {
    transform: translate(0, -100px);
  }
   
  .sa--scaleUp {
    transform: scale(.5);
  }
   
  .sa--scaleDown {
    transform: scale(1.5);
  }
  .sa--rotateL {
    transform: rotate(180deg);
  }
  .sa--rotateR {
    transform: rotate(-180deg);
  }
  .sa--rotateG{
    transform:rotateY(-270deg); 
  }

.openmenubox{
    height: 100vh;
    width: 0%;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    position: fixed;
    z-index:-1;
    transition: all 0.7s 0s ease-out;
}
.openmenubox.is-open{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: 100vh;
    width: 100%;
    z-index: 100;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 1;
    transition: all 1.2s 0s ease;
    z-index: 100;
}
.close0{
    font-family: serif;
}
.menuALLline{
    display: flex;
    align-items: center; 
    position: absolute;
}
.menuALLline a:visited{
    color: white;
}
.menuSubline{
    display: flex;
    height: 100vh;
    margin-left: 12rem;
}
.openmenuline0{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 18rem;
    height: 2.6rem;
    padding-right: 1.8rem;
    font-size: 1.2rem;
    color:white;
    border-radius: 0px 50px 50px 0px;
    background-color: rgba(255,255,255,0.2);
}
.openmenuline1{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 2.6rem;
    height: 20vh;
    padding-bottom: 2rem;
    writing-mode: vertical-rl;
    font-size: 1.2rem;
    margin-right: 5rem;
    margin-left: 5rem;
    color:white;
    border-radius: 0px 0px 50px 50px;
    background-color: rgba(255,255,255,0.2);
}
.openmenuline2{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 2.6rem;
    height: 40vh;
    padding-bottom: 2rem;
    writing-mode: vertical-rl;
    font-size: 1.2rem;
    margin-right: 5rem;
    margin-left: 5rem;
    color:white;
    border-radius: 0px 0px 50px 50px;
    background-color: rgba(255,255,255,0.2);
}
.openmenuline3{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 2.6rem;
    height: 60vh;
    padding-bottom: 2rem;
    writing-mode: vertical-rl;
    font-size: 1.2rem;
    margin-right: 5rem;
    margin-left: 5rem;
    color:white;
    border-radius: 0px 0px 50px 50px;
    background-color: rgba(255,255,255,0.2);
}

.fixmenu{
    display: flex;
    flex-direction: row-reverse; 
    height: 100vh;
    width: 2rem;
    margin: 0;
    right:0;
    position: fixed;
    z-index: 100;
    background-color: #33ad84;
}
.menubar0{
    display: flex;
    height: 100vh;
    width: 2rem;
    top:0;
    position: absolute;
    z-index: 1;
    writing-mode: vertical-rl;
    background-color: #ce2b4b;
    color: white;
    overflow: hidden;
    white-space:nowrap;
    align-items: center;
}
.menubar-frame{
    display: flex;
    flex-direction: column;
}
.menubar1{
   display: block;
}
.menubar1:after{
    display: flex;
    content: 'MENU';
    height: 2.4rem;
    width: 8.2rem;
    margin-left: -0.5rem;
    padding-left: 0.5rem;
    top:0;
    right: 2rem;
    position: absolute;
    background-color: orange;
    color: white;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    border-radius: 0px 0px 0px 50px;
    cursor: pointer;
}
.menubar2{
    display: block;
}
.menubar2:after{
    display: flex;
    content: 'TOP';
    height: 2.4rem;
    width: 8.2rem;
    padding-left: 0.5rem;
    bottom: 0;
    right: 2rem;
    position: absolute;
    background-color: orange;
    color: white;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    border-radius: 50px 0px 0px 0px;
    cursor: pointer;
}
.loop {
    animation: loop 20s linear infinite;
    height: 100%;
    font-family: serif;
}
.loop2{
    position: absolute;
    top: 0; 
    font-family: serif;
    animation: loop 20s -10s linear infinite;
}
@keyframes loop {
    0%{transform: translateY(100%);}
    100%{transform: translateY(-100%);}
}


.base-frame{
    display: flex;
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: rgb(167, 167, 172);
}
.service-menu-frame{
    display: flex;
    width: calc(100% - 2rem);
    height: 100%;
    position: relative;
    z-index: 1;
    background-color: rgb(122, 121, 121);
}
.service-toppage{
    width: calc(100% - 8.8rem);
    height: 100vh;
    position: absolute;
    top:0;
    right: 0;
    display: flex;
    flex-direction: row-reverse;
    z-index: -1;
    background-color: #33ad84;
}
.service-toppage-right{
    display: flex;
    flex-direction: column;
    width: 33.5rem;
    height: 100%;
    position: absolute;
    top:0;
    right: max(16%,2rem);
    font-family: serif;
    border-right: 2px solid white;
}
.right-allfarme{
    border-left: 2px solid white;
}
.service-toppage-right::after{
    position:absolute;
    content: '';
    /*height: calc(100% - 3rem);*/
    height: 100%;
    width: 3%;
    top: 0;
    right: -2rem;
    z-index: -1;
    background-color:white;
}
.service-toppage-right::before{
    display: none;
    position:absolute;
    content: '';
    height: calc(100% - 17.4rem);
    width: 6%;
    top:0;
    left: -3.0rem;
    z-index: -1;
    background-color: white;
    opacity: 0.8;
}
.service-toppage-center{
    position: absolute;
    width: 4%;
    height: 100vh;
    top:0;
    left: 5rem;
    opacity: 0.8;
}
.service-toppage-center::after{
    position: absolute;
    content: '';
    width: 50%;
    height: 100vh;
    top:0;
    left: 200%;
    background-color: white;
}
.service-toppage-center::before{
    position: absolute;
    content: '';
    width: 1400%;
    height: 3rem;
    bottom:0;
    left: 200%;
    background-color: white;
    border-radius: 0px 100px 0px 0px;
}
.top-right-frame0{
    display: flex;
    align-items: flex-end;
    position: relative;
    width: 100%;
    height: 15rem;
}
.frame0-box0{
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 15rem;
}
.box0-text0{
    position: relative;
    font-size: 19.2rem;
    line-height: 0.7;
}
.frame0-box1{
    display: flex;
    height: 15rem;
    flex-direction: column;
    background-color: #65B2FF;
}
.box1-text0{
    display: flex;
    justify-content: center;
    height: 12rem;
    font-size: 2.8rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: white;
    background-color: #a7dc14;
    line-height: 1;
}
.box1-text1{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 3rem;
    background-color: #E599FF;
}
.box1-text1::after{
    position: absolute;
    content: 'e';
    font-size: 4.3rem;
    top: 1.2rem;
    line-height: 0;
}
.frame0-box2{
    display: flex;
    height: 15rem;
    width: 11.9rem;
    justify-content: flex-end;
    flex-direction: column;
    background-color: #FFB265;
}
.box2-text0{
    display: flex;
    align-items: end;
    justify-content: center;
    position: relative;
    font-size: 2.8rem;
    height: 9.2rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: white;
    background-color: #E599FF;
    line-height: 1;
}
.box2-text0::after{
    position: absolute;
    content: 'AKU!';
    font-size: 2.8rem;
    left:2.8rem;
    bottom: 0.34rem;
    writing-mode:horizontal-tb;
    letter-spacing: 0.14em;
}
.box2-text0::before{
    position: absolute;
    content: '';
    top:0;
    left:4rem;
    height: calc(6.5rem / 2 * tan(60deg));
    width: 6.5rem;
    clip-path: polygon(0% 0, 100% 100%, 0 100%);
    background-color: white;
}
.box2-text1{
    height: 3rem;
    position: relative;
    color: white;
    background-color: #FF6565;
}
.box2-text1::after{
    position: absolute;
    content: 'state';
    font-size: 4.3rem;
    top: 1.1rem;
    left: 0.5rem;
    line-height: 0;
    letter-spacing: 0.12em;
}
.box2-img{
    display: flex;
    height: 2.8rem;
    width: 2.8rem;
    border: 1px solid white;
    background-image: url(../img/line.png);
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
}
.top-right-frame1{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #E599FF;
    border-radius: 100px 0px 0px 0px;
}
.frame1-box0-text0{
    font-size: 6rem;
    color: white;
    line-height: 1;
    letter-spacing: 0.05em;
    
}
.top-right-frame2{
    display: flex;
    width: 100%;
    height: 8rem;
}
.frame2-box0{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
}
.f2-box0-text0{
    font-size: 2.6rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1;
}
.frame2-box1{
    height: 8rem;
    position: relative;
    background-color: #FF6565;
    flex-grow: 1;
}
.frame2-box1::after{
    position: absolute;
    content: 'BEST';
    font-size:10rem;
    bottom: -4.4rem;
}
.top-right-frame3{
    display: flex;
    align-items: center;
    height: 7rem;
}
.frame3-box0{
    display: flex;
    align-items: center;
    height: 7rem;
    border-bottom: 2px solid white;
}
.f3-box0-text0{
    font-size: 6rem;
    line-height: 1;
    color: white;
}
.f3-3box-frame{
    display: flex;
    align-items: flex-end;
    height: 100%;
}
.f3-box1{
    width: 2rem;
    height: 90%;
    margin-left: 0%;
    background-color: white;
    animation-name: billloop;
    animation-delay: 2s;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes billloop{
    0%{}
    50%{height: 0%;}
    100%{height: 90%;}
}
.f3-box2{
    width: 2rem;
    height: 60%;
    margin-left: 10%;
    background-color: white;
    animation-name: billloop2;
    animation-delay: 2s;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes billloop2{
    0%{height: 60%;}
    20%{height: 90%;}
    60%{height: 0%;}
    100%{height: 60%;}
}
.f3-box3{
    width: 2rem;
    height: 30%;
    margin-left: 10%;
    background-color: white;
    animation-name: billloop3;
    animation-delay: 2s;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}
@keyframes billloop3{
    0%{}
    30%{height: 60%;}
    60%{}
    100%{height: 0%;}
}
.service-toppage-left{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 100vh;
    position: absolute;
    left:0;
}
.top-left-frame0{
    display: flex;
    align-items: center;
    width: 100%;
    height: 5rem;
}
.triangle1{
    height: calc(6rem / 2);
    width: 3rem;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: white;
    transform:rotate(270deg); 
    padding-left: 30%;
    animation-name: flashloop;
    animation-iteration-count:infinite;
    animation-duration: 3.4s;
    animation-delay: 1.4s;
    animation-timing-function: ease-in-out;
}
@keyframes flashloop{
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}
.triangle1-text{
    font-size: 1.4rem;
    font-family: serif;
}
.triangle1-text::after{
    position: absolute;
    content: 'CLicK & ToucH !';
    top:40%;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    z-index: -1;
    color: rgba(255, 255, 255, 0.8)
}
.triangle2{
    height: calc(3rem / 2);
    width: 1rem;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: white;
    transform:rotate(270deg); 
    padding-left: 4%;
}
.sevice-button-frame{
    display: flex;
    flex-direction:row ;
    height: 100%;
    width: min(100%,8.8rem);
    position: relative;
}
.next-button{
    width: 10%;
    height: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom:0;
    right: 40%;
    z-index: 20;
    background-color: #dc143c;
    color: white;
    cursor: pointer;
    border-radius: 0px 100px 0px 0px;
}
.back-button{
    width: 10%;
    height: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom:0;
    left: 40%;
    z-index: 20;
    background-color: #E599FF;
    color: white;
    cursor: pointer;
    border-radius: 100px 0px 0px 0px;
    
}
.page-text-rent0{
    font-family: serif;
    color: white;
    font-size: 2rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-size: 100%;
    white-space: nowrap;
}
.page-text-rent0::before{
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    right: 9rem;
    bottom: 4rem;
    z-index: -1;
    background-image: url(../img/key.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.page-text-rent0::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '借主様 仲介の流れ';
    position: absolute;
    right: 9rem;
    top: 20%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid white;
    border-radius: 50px 50px 50px 50px;
    font-family: serif;
    font-size: 2rem;
    writing-mode: horizontal-tb;
    z-index: 1;
    white-space: nowrap;
    color: white;    
}
.page-text-rent1{
    font-family: serif;
    color: white;
    font-size: 2rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-size: 100%;
    white-space: nowrap;
}
.page-text-rent1::before{
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    right: 9rem;
    bottom: 4rem;
    z-index: -1;
    background-image: url(../img/key.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.page-text-rent1::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '貸主様 ※物件を管理委託する場合';
    position: absolute;
    right: 1rem;
    top: 20%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid white;
    border-radius: 50px 50px 50px 50px;
    font-family: serif;
    font-size: 1.7rem;
    writing-mode: horizontal-tb;
    z-index: 1;
    white-space: nowrap;
    color: white;    
}
.page-text-sale0{
    font-family: serif;
    color: white;
    font-size: 2rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-size: 100%;
    white-space: nowrap;
}
.page-text-sale0::before{
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    right: 9rem;
    bottom: 4rem;
    z-index: -1;
    background-image: url(../img/home.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.page-text-sale0::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '買主様 仲介の流れ';
    position: absolute;
    right: 9rem;
    top: 20%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid white;
    border-radius: 50px 50px 50px 50px;
    font-family: serif;
    font-size: 2rem;
    writing-mode: horizontal-tb;
    z-index: 1;
    white-space: nowrap;
    color: white;    
}
.page-text-sale1{
    font-family: serif;
    color: white;
    font-size: 2rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-size: 100%;
    white-space: nowrap
}
.page-text-sale1::before{
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    right: 9rem;
    bottom: 4rem;
    z-index: -1;
    background-image: url(../img/home.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.page-text-sale1::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '売主様 仲介の流れ';
    position: absolute;
    right: 9rem;
    top: 20%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid white;
    border-radius: 50px 50px 50px 50px;
    font-family: serif;
    font-size: 2rem;
    writing-mode: horizontal-tb;
    z-index: 1;
    white-space: nowrap;
    color: white;    
}
.service-page00{
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:0;
    left: 0;
    background-color: #33ad84;
    z-index: 1;
    overflow: hidden;
}
.service-page00::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '1';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page01{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 2;
    background-color: #d18343;
    transition: all 1s 0s ease;
    opacity: 0;
    overflow: hidden;
}
.service-page01::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '2';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page01.p-open{   
    height: 100%;
    width: 100%;
    opacity: 1;
    transition: all 1s 0s ease;
}
.service-page02{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 3;
    color: rgba(255, 0, 0, 0);
    background-color: rgb(93, 155, 226);
    transition: color 4s ease;
    transition: all 1s 0s ease;
    opacity: 0;
    overflow: hidden;
}
.service-page02::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '3';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page02.p-open{   
    height: 100%;
    width: 100%;
    opacity: 1;
    color: white;
    transition: color 4s ease;
    transition: all 1s 0s ease;
    
}
.service-page03{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 4;
    background-color: rgb(92, 92, 187);
    transition: all 1s 0s ease;
    opacity: 0;
    overflow: hidden;
}
.service-page03::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '4';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page03.p-open{   
    height: 100%;
    width: 100%;
    transition: all 1s 0s ease;
    opacity: 1;
}
.service-page04{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 5;
    background-color: rgb(231, 90, 90);
    transition: all 1s 0s ease;
    opacity: 0;
    overflow: hidden;
}
.service-page04::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '5';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page04.p-open{   
    height: 100%;
    width: 100%;
    color: white;
    transition: all 1s 0s ease;
    opacity: 1;
}
.service-page05{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 5;
    background-color: rgb(60, 167, 78);
    transition: all 1s 0s ease;
    opacity: 0;
    overflow: hidden;
}
.service-page05::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '6';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page05.p-open{   
    height: 100%;
    width: 100%;
    color: white;
    transition: all 1s 0s ease;
    opacity: 1;
}
.service-contents0{
    display: flex;
    width: 0%;
    position: relative;
    z-index: -1;
    opacity: 0;
    transition: all 0.7s 0s ease-out;
}
.service-contents0.sv-open{   
    position: relative;
    width: calc(100% - 8.6rem);
    height: 100%;
    background-color:rgba(255,255,255,0.6);
    opacity: 1;
    transition: all 1.2s 0s ease;
    z-index: 1;
}
.service-contents1{
    display: flex;
    width: 0%;
    position: relative;
    transition: all 0.7s 0s ease-out;
    opacity: 0;
}
.service-contents1.sv-open{
    position: relative;
    width: calc(100% - 8.6rem);
    height: 100%;
    background-color: white;
    transition: all 1.2s 0s ease;
    opacity: 1;
}
.service-contents2{
    display: flex;
    width: 0%;
    position: relative;
    transition: all 0.7s 0s ease-out;
    opacity: 0;
}
.service-contents2.sv-open{
    position: relative;
    width: calc(100% - 8.6rem);
    height: 100%;
    background-color: white;
    transition: all 1.2s 0s ease;
    opacity: 1;
}
.service-contents3{
    display: flex;
    width: 0%;
    position: relative;
    transition: all 0.7s 0s ease-out;
    opacity: 0;
}
.service-contents3.sv-open{
    position: relative;
    width: calc(100% - 8.6rem);
    height: 100%;
    background-color: white;
    transition: all 1.2s 0s ease;
    opacity: 1;
}
.sevice-button0{
    width: 2.2rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FF6565;
    cursor: pointer;
    z-index: 1000;
  
}
.sevice-button1{
    width: 2.2rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFB265;
    cursor: pointer;
    z-index: 1000;
 
}
.sevice-button2{
    width: 2.2rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #65B2FF;
    cursor: pointer;
    z-index: 1000;
}
.sevice-button3{
    width: 2.2em;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E599FF;
    cursor: pointer;
    z-index: 1000;
}
.service-button-text{
    color: white;
    font-family: 'kosugimaru';
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.samp{
    display: block;
}
.samp.sample{
    color: #33ad84;
}

@media screen and (max-width:480px) {
 
/*隠しメニュー*/
.openmenubox{
    height: 100vh;
    width: 0%;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    position: fixed;
    z-index:-1;
    transition: all 0.7s 0s ease-out;
}
.openmenubox.is-open{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    height: 100vh;
    width: 100%;
    z-index: 100;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 1;
    transition: all 1.2s 0s ease;
    z-index: 100;
}
.close0{
    font-family: serif;
}
.menuALLline{
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column-reverse;
    align-items: center; 
    position: absolute;
    top:0;
}
.menuALLline a:visited{
    color: white;
}
.menuSubline{
    display: flex;
    position: absolute;
    height: 40rem;
    top:0;
    left: 0;
    margin: 0rem;
    padding: 0rem;
}
.openmenuline0{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    width: 18rem;
    height: 2.4rem;
    left: 0;
    bottom: 4rem;
    padding-right: 1.8rem;
    font-size: 1.2rem;
    color:white;
    border-radius: 0px 50px 50px 0px;
    background-color: rgba(255,255,255,0.2);
    z-index: 1;
}
.openmenuline1{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 2.6rem;
    height: 20vh;
    padding-bottom: 2rem;
    writing-mode: vertical-rl;
    font-size: 1.2rem;
    margin-right: 0rem;
    margin-left: 2rem;
    color:white;
    border-radius: 0px 0px 50px 50px;
    background-color: rgba(255,255,255,0.2);
}
.openmenuline2{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 2.6rem;
    height: 40vh;
    padding-bottom: 2rem;
    writing-mode: vertical-rl;
    font-size: 1.2rem;
    margin-right: 0rem;
    margin-left: 2rem;
    color:white;
    border-radius: 0px 0px 50px 50px;
    background-color: rgba(255,255,255,0.2);
}
.openmenuline3{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 2.6rem;
    height: 60vh;
    padding-bottom: 2rem;
    writing-mode: vertical-rl;
    font-size: 1.2rem;
    margin-right: 0rem;
    margin-left: 2rem;
    color:white;
    border-radius: 0px 0px 50px 50px;
    background-color: rgba(255,255,255,0.2);
}


/*固定メニュー*/
.fixmenu{
    display: flex;
    flex-direction: row-reverse; 
    height: 0rem;
    width: 100%;
    margin: 0;
    left:0;
    right: auto;
    bottom: 0;
    position: fixed;
    z-index: 100;
    background-color: #33ad84;
}
.menubar0{
    display: none;
    height: 2rem;
    width: 100%;
    top:0;
    position: absolute;
    z-index: 1;
    writing-mode: horizontal-tb;
    background-color: #dc143c;
    color: white;
    overflow: hidden;
    white-space:nowrap;
    align-items: center;
}
.menubar-frame{
    display: flex;
    flex-direction: column;
}
.menubar1{
   display: block;
}
.menubar1:after{
    display: flex;
    content: 'MENU';
    height: 2.4rem;
    width: 6.2rem;
    padding-right: 0.5rem;
    top:auto;
    bottom: 0;
    left:0;
    position: absolute;
    background-color: orange;
    color: white;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    border-radius: 0px 50px 0px 0px;
    cursor: pointer;
}
.menubar2{
    display: block;
}
.menubar2:after{
    display: flex;
    content: 'TOP';
    height: 2.4rem;
    width: 6.2rem;
    padding-left: 0.5rem;
    bottom: 0;
    right: 0;
    position: absolute;
    background-color: orange;
    color: white;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    border-radius: 50px 0px 0px 0px;
    cursor: pointer;
}
.loop {
    animation: loop 20s linear infinite;
    width:  100%;
}
.loop2{
    position: absolute;
    top: 0; 

    animation: loop 20s -10s linear infinite;
}
@keyframes loop {
    0%{transform: translateX(100%);}
    100%{transform: translateX(-100%);}
}

/*基本フレーム*/
.base-frame{
    display: flex;
    width: 100%;
    /*height: calc(var(--vh) * 100);*/
    height: 100svh;
    position: relative;
    background-color: rgb(167, 167, 172);
    overflow: hidden;
}
/*topページフレーム*/
.service-toppage{
    width: 100%;
    height: calc(100% - 8rem);
    position: absolute;
    top:8rem;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: -1;
    background-color: #33ad84;
}
.service-toppage::after{
    position: absolute;
    content: '';
    /*width: 80%;
    height: 0.1rem;*/
    width: 0%;
    height: 0rem;
    bottom: 28%;
    left: 0;
    z-index: -1;
    background-color: white
}
.service-toppage::before{
   position: absolute;
   /*content: '';*/
   /*width: 1.6rem;
   height: 1.6rem;*/
   width: 0rem;
   height: 0rem;
   bottom: 26%;
   left: 14rem;
   background-color:#ffffff;
   border: 2px solid white;
   z-index: 0;
   border-radius: 100px 100px 100px 100px;
}
/*トップページtopフレーム（PC右フレーム）*/

.service-toppage-right{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: calc(100% - 3rem);
    /*height: auto;*/
    height: 56%;
    position: absolute;
    /*top: 5rem;*/
    top:4.4rem;
    left: auto;
    right: 2rem;
    font-family: serif;
    border-right: 1rem solid white;
    border-bottom: 2px solid white;
    font-size: 1rem;
    box-sizing: content-box;
}
.service-toppage-right::after{
    display: block;
    position:absolute;
    content: '';
    /*height: calc(100% - 3rem);*/
    /*height: 42rem;*/
    /*height: 100%;
    width: 1rem;*/
    height: 0%;
    width: 0%;
    top: 0;
    right: -1.6rem;
    z-index: -1;
    background-color:white;
}
.service-toppage-right::before{
    display: none;
    position:absolute;
    content: '';
    height: 0.15rem;
    width: 100%;
    top:auto;
    bottom: 0rem;
    left: auto;
    right: -2.1rem;
    z-index: -1;
    background-color: white;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
}
.right-allfarme{
    display: flex;
    position: absolute;
    flex-direction: column;
    top:0;
    width: 18rem;
    border-right: 2px solid white;
    box-sizing: content-box;
    overflow: hidden;
}
.right-allfarme::after{
    display: block;
    position: absolute;
    /*content: '';*/
    right: 9rem;
    bottom: 0rem;
    width: 1.2rem;
    height: 9rem;
    background-color: white;
}
.right-allfarme::before{
    display: block;
    position: absolute;
    content: '';
    right: 6.2rem;
    bottom: 0rem;
    width: 1rem;
    height: 6rem;
    background-color: white;
}
.right-in-right-frame{
    display: none;
    width: 8.8rem;
    height: 25rem;
    position: relative;
    flex-direction: column;
    background-color: red;
    border-bottom: 2px solid white;
}
.r-3box-frame{
    position:absolute;
    display: flex;
    align-items: flex-end;
    position: absolute;
    width: 7rem;
    height: 8rem;
    right: 0;
    bottom: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    border: 1px solid white;
    background: linear-gradient(135deg, #E599FF 0%, #E599FF 50%, black 50%, black 100%);
}
.r-box1{
    width: 2rem;
    height: 100%;
    margin-left: 0%;
    background-color: white;
    animation-name: billloop;
    animation-delay: 2s;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.r-box2{
    width: 2rem;
    height: 70%;
    margin-left: 10%;
    background-color: white;
    animation-name: billloop2;
    animation-delay: 2s;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.r-box3{
    width: 2rem;
    height: 30%;
    margin-left: 10%;
    background-color: white;
    animation-name: billloop3;
    animation-delay: 2s;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}
/*トップページmainフレーム*/
.service-toppage-center{
    display: none;
    position: absolute;
    width: 4%;
    height: 100vh;
    top:0;
    left: 5rem;
    opacity: 0.8;
}
.service-toppage-center::after{
    position: absolute;
    content: '';
    width: 50%;
    height: 100vh;
    top:0;
    left: 200%;
    background-color: white;
}
.service-toppage-center::before{
    position: absolute;
    content: '';
    width: 1400%;
    height: 3rem;
    bottom:0;
    left: 200%;
    background-color: white;
    border-radius: 0px 100px 0px 0px;
}
/*スマホトップページ上部（PCトップページ左部）*/
.service-toppage-left{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.2rem;
    position: absolute;
    top:0;
    left:0;
    background-color:;
    border-bottom: 2px solid white;
}
.service-toppage-left2{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.2rem;
    position: absolute;
    top:2.2rem;
    left:0;
    background-color:;
    border-bottom: 2px solid white;
}
.top-left-frame0{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2rem;
}
.triangle1{
    height: calc(3rem / 2);
    width: 2rem;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: white;
    transform:rotate(0deg); 
    padding-left: 0%;
    animation-name: flashloop;
    animation-iteration-count:infinite;
    animation-duration: 3.4s;
    animation-delay: 1.4s;
    animation-timing-function: ease-in-out;
}
.triangle1-text::after{
    position: absolute;
    content: 'Please ToucH !';
    right: 0;
    top:0%;
    margin-right: 0.2rem;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    z-index: -1;
    color: rgba(255, 255, 255, 0.8)
}
/*トップページ　topフレームコンテンツ*/

/*frame0*/
.top-right-frame0{
    display: flex;
    align-items: flex-end;
    position: relative;
    width: 100%;
    height: 10rem;
    background-color:;
}
.frame0-box0{
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 10rem;
    height: 100%;
    background-color: #65B2FF;
}
.box0-text0{
    position: relative;
    font-size: 10em;
    line-height: 0.7;
}
.frame0-box1{
    display: flex;
    height: 10rem;
    flex-direction: column;
    background-color: #65B2FF;
}
.frame0-box1::after{
    position: absolute;
    content: '';
    width: 10rem;
    height: 2rem;
    top:0;
    left: 0;
    background-color: white;
}
.box1-text0{
    display: flex;
    justify-content: center;
    height: 8rem;
    font-size: 2em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: white;
    background-color: #a7dc14;
    line-height: 1;
}
.box1-text1{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 2rem;
    background: linear-gradient(135deg, #E599FF 0%, #E599FF 50%, white 50%, white 100%);
}
.box1-text1::after{
    position: absolute;
    content: 'e';
    font-size: 2em;
    line-height: 0;
    top:1rem;
}
.frame0-box2{
    display: flex;
    height: 10rem;
    /*width: 6rem;*/
    width: 6.1rem;
    position: relative;
    flex-direction: column;
    background-color: #FFB265;
}
.box2-text0{
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    font-size: 2em;
    width: 100%;
    height: 6rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: white;
    background-color: #E599FF;
    line-height: 1;
}
.box2-text0::after{
    position: absolute;
    content: 'A';
    font-size: 1em;
    left:2.3rem;
    bottom: 0.01rem;
    writing-mode:horizontal-tb;
    line-height: 0.9;
    letter-spacing: 0em;   
}
.box2-text0::before{
    
    position: absolute;
    content: '';
    top:auto;
    bottom:0.4rem;
    left:4.3rem;
    /*height: calc(2rem / 2 * tan(60deg));*/
    width: 1.2rem;
    height: 1.2rem;
    clip-path:none;
    background-color: white;
    border-radius: 100px 100px 100px 100px;
    color: #dc143c;
}
.box2-text1{
    height: 2rem;
    position: relative;
    color: white;
    background-color: #FF6565;
}
.box2-text1::after{
    position: absolute;
    content: 'state';
    font-size: 2em;
    top: 1rem;
    left: 0.5rem;
    line-height: 0;
    letter-spacing: 0.12em;
}
.box2-img{
    display: flex;
    height: 2rem;
    width: 2rem;
    position: relative;
    border: 1px solid white;
    background-image: url(../img/line.png);
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
}
.box2-img::after{
    position: absolute;
    content: 'KU';
    bottom: -0.7rem;
    left: 2.2rem;
    font-size: 2rem;
    letter-spacing: 0.2em;
    color: white;
}
/*farme1*/
.top-right-frame1{
    display: flex;
    height: 2.5rem;
    align-items: center;
    justify-content: flex-end;
    background-color: #E599FF;
    border-radius: 100px 0px 0px 0px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    border-right: 6px solid white;
}
.frame1-box0-text0{
    font-size: 3em;
    color: white;
    line-height: 1;
    letter-spacing: 0.05em;
    
}
/*frame2*/
.top-right-frame2{
    display: flex;
    width: 100%;
    height: 4rem;
    border-bottom: white 2px solid;
}
.frame2-box0{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    transform: scale(1.4, 0.8);
}
.f2-box0-text0{
    font-size: 1.5em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1;
}
.frame2-box1{
    height: 100%;
    position: relative;
    background-color: #FF6565;
    flex-grow: 1;
}
.frame2-box1::after{
    position: absolute;
    content: 'BEST';
    font-size:2.5rem;
    transform: scale(1, 1.8);
    bottom: -0.2rem;
    left: 0.3rem;
}
.frame2-box1::before{
    position: absolute;
    content: 'Service!';
    font-size:2.5rem;
    left:6.6rem;
    bottom: -0.2rem;
    transform: scale(0.9, 1.8);
    color: white;
    
}
.top-right-frame3{
    display: flex;
    align-items: center;
    height: 6rem;
    width: 10rem;
    border-bottom: 2px solid white;
    box-sizing: border-box;
}
.top-right-frame3::after{
    position: absolute;
    content: '';
    bottom: 4rem;
    right:0;
    height: 2rem;
    width: 5rem;
    border: 0px solid white;
    background-color: white;
}
.top-right-frame3::before{
    position: absolute;
    /*content: '';*/
    bottom: 7.22rem;
    height: 1.64rem;
    width: 16rem;
    border: 1px solid white;
    background-color: white;
}
.frame3-box0{
    display: flex;
    align-items: center;
    height: 8rem;
    width: 10rem;
    background-color: ;
    border-bottom: 0px solid white;
}
.f3-box0-text0{
    display: none;
    font-size: 2em;
    position: relative;
    left: 3rem;
    line-height: 1;
    color: white;
}
.f3-3box-frame{
    position:absolute;
    display: flex;
    align-items: flex-end;
    height: 5.5rem;
    width: 5.5rem;
    left: 5.3rem;
    bottom: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    border: 1px solid white;
    border-bottom: 2px solid white;
    background: linear-gradient(135deg, #E599FF 0%, #E599FF 50%, black 50%, black 100%);
    box-sizing: border-box;
}
.f3-box1{
    width: 2rem;
    height: 100%;
    margin-left: 0%;
    background-color: white;
    animation-name: billloop;
    animation-delay: 2s;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes billloop{
    0%{}
    50%{height: 0%;}
    100%{height: 100%;}
}
.f3-box2{
    width: 2rem;
    height: 70%;
    margin-left: 10%;
    background-color: white;
    animation-name: billloop2;
    animation-delay: 2s;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes billloop2{
    0%{height: 70%;}
    20%{height: 100%;}
    60%{height: 0%;}
    100%{height: 70%;}
}
.f3-box3{
    width: 2rem;
    height: 30%;
    margin-left: 10%;
    background-color: white;
    animation-name: billloop3;
    animation-delay: 2s;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}
@keyframes billloop3{
    0%{}
    30%{height: 60%;}
    60%{}
    100%{height: 0%;}
}
/*サービス・メニューフレーム*/
.service-menu-frame{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    z-index: 1;
    background-color: rgb(122, 121, 121);
}
/*サービスメニュー・ボタンフレーム*/
.sevice-button0{
    width: 100%;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FF6565;
    cursor: pointer;
  
}
.sevice-button1{
    width: 100%;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFB265;
    cursor: pointer;
 
}
.sevice-button2{
    width: 100%;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #65B2FF;
    cursor: pointer;
}
.sevice-button3{
    width: 100%;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E599FF;
    cursor: pointer;
}
.service-button-text{
    color: white;
    font-family: 'kosugimaru';
    writing-mode:horizontal-tb;
}

/*next and back ボタン*/
.next-button{
    width: 20%;
    height: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:auto;
    bottom:0;
    right: 28.15%;
    padding-right: 0.5rem;
    z-index: 20;
    background-color: #dc143c;
    color: white;
    cursor: pointer;
    border-radius: 0px 50px 0px 0px;
}
.back-button{
    width: 20%;
    height: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:auto;
    bottom:0;
    left: 28.15%;
    padding-left: 0.5rem;
    z-index: 20;
    background-color: #E599FF;
    color: white;
    cursor: pointer;
    border-radius: 50px 0px 0px 0px;
}

/*openページ　共通*/
.page-text-rent0{
    font-family: serif;
    color: white;
    font-size: 1.5rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-size: 100%;
    white-space: nowrap;
}
.page-text-rent0::before{
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    right: 9rem;
    bottom: 4rem;
    z-index: -1;
    background-image: url(../img/key.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.page-text-rent0::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '借主様 仲介の流れ';
    position: absolute;
    right: 50%;
    top: 10%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid white;
    border-radius: 50px 50px 50px 50px;
    font-family: serif;
    font-size: 1rem;
    writing-mode: horizontal-tb;
    z-index: 1;
    white-space: nowrap;
    color: white;   
    white-space: nowrap; 
}
.page-text-rent1{
    font-family: serif;
    color: white;
    font-size: 1.5rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-size: 100%;
    white-space: nowrap;
}
.page-text-rent1::before{
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    right: 9rem;
    bottom: 4rem;
    z-index: -1;
    background-image: url(../img/key.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.page-text-rent1::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '貸主様 ※物件を管理委託する場合';
    position: absolute;
    right: 24%;
    top: 10%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid white;
    border-radius: 50px 50px 50px 50px;
    font-family: serif;
    font-size: 1rem;
    writing-mode: horizontal-tb;
    z-index: 1;
    white-space: nowrap;
    color: white;    
}
.page-text-sale0{
    font-family: serif;
    color: white;
    font-size: 1.5rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-size: 100%;
    white-space: nowrap;
}
.page-text-sale0::before{
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    bottom: 9rem;
    z-index: -1;
    background-image: url(../img/home.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
}
.page-text-sale0::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '買主様 仲介の流れ';
    position: absolute;
    right: 50%;
    top: 10%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid white;
    border-radius: 50px 50px 50px 50px;
    font-family: serif;
    font-size: 1rem;
    writing-mode: horizontal-tb;
    z-index: 1;
    white-space: nowrap;
    color: white;    
}
.page-text-sale1{
    font-family: serif;
    color: white;
    font-size: 1.5rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-size: 100%;
    white-space: nowrap
}
.page-text-sale1::before{
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    right: 9rem;
    bottom: 9rem;
    z-index: -1;
    background-image: url(../img/home.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
}
.page-text-sale1::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '売主様 仲介の流れ';
    position: absolute;
    right: 50%;
    top: 10%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid white;
    border-radius: 50px 50px 50px 50px;
    font-family: serif;
    font-size: 1rem;
    writing-mode: horizontal-tb;
    z-index: 1;
    white-space: nowrap;
    color: white;    
}
.service-page00{
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:0;
    left: 0;
    background-color: #33ad84;
    z-index: 1;
}
.page-text{
    color: white;
}
.service-page00::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '1';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page01{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 2;
    background-color: #d18343;
    transition: all 1s 0s ease;
    opacity: 0;
}
.service-page01::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '2';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page01.p-open{   
    height: 100%;
    width: 100%;
    opacity: 1;
    transition: all 1s 0s ease;
}
.service-page02{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 3;
    background-color: rgb(93, 155, 226);
    transition: all 1s 0s ease;
    opacity: 0;
}
.service-page02.p-open{   
    height: 100%;
    width: 100%;
    opacity: 1;
    transition: all 1s 0s ease;
}
.service-page02::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '3';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page03{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 4;
    background-color: rgb(92, 92, 187);
    transition: all 1s 0s ease;
    opacity: 0;
}
.service-page03::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '4';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page03.p-open{   
    height: 100%;
    width: 100%;
    transition: all 1s 0s ease;
    opacity: 1;
}
.service-page04{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 5;
    background-color: rgb(231, 90, 90);
    transition: all 1s 0s ease;
    opacity: 0;
    overflow: hidden;
}
.service-page04::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '5';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page04.p-open{   
    height: 100%;
    width: 100%;
    color: white;
    transition: all 1s 0s ease;
    opacity: 1;
}
.service-page05{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 5;
    background-color: rgb(60, 167, 78);
    transition: all 1s 0s ease;
    opacity: 0;
    overflow: hidden;
}
.service-page05::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '6';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page05.p-open{   
    height: 100%;
    width: 100%;
    color: white;
    transition: all 1s 0s ease;
    opacity: 1;
}
/*openコンテンツ*/
.service-contents0{
    display: flex;
    width: 100%;
    height: 0%;
    position: relative;
    z-index: -1;
    opacity: 0;
    transition: all 0.7s 0s ease-out;
}
.service-contents0.sv-open{   
    position: relative;
    width: 100%;
    height: calc(100% - 8rem);
    background-color:rgba(255,255,255,0.6);
    opacity: 1;
    transition: all 1.2s 0s ease;
    z-index: 1;
}
.service-contents1{
    display: flex;
    width: 100%;
    height: 0%;
    position: relative;
    transition: all 0.7s 0s ease-out;
    opacity: 0;
}
.service-contents1.sv-open{
    position: relative;
    width: 100%;
    height: calc(100% - 8rem);
    background-color: white;
    transition: all 1.2s 0s ease;
    opacity: 1;
}
.service-contents2{
    display: flex;
    width: 100%;
    height: 0%;
    position: relative;
    transition: all 0.7s 0s ease-out;
    opacity: 0;
}
.service-contents2.sv-open{
    position: relative;
    width: 100%;
    height: calc(100% - 8rem);
    background-color: white;
    transition: all 1.2s 0s ease;
    opacity: 1;
}
.service-contents3{
    display: flex;
    width: 100%;
    height: 0%;
    position: relative;
    transition: all 0.7s 0s ease-out;
    opacity: 0;
}
.service-contents3.sv-open{
    position: relative;
    width: 100%;
    height: calc(100% - 8rem);
    background-color: white;
    transition: all 1.2s 0s ease;
    opacity: 1;
}
@media screen and (max-height:760px){

    .service-toppage-right{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: calc(100% - 3rem);
    /*height: calc((var(--vh)* 100) - 48%);*/
    height: 100svh;
    position: absolute;
    top:4.4rem;
    left: auto;
    right: 2rem;
    font-family: serif;
    border-right: 1rem solid white;
    border-bottom: 2px solid white;
    font-size: 1rem;
    box-sizing: content-box;
}
}    

}
/*
@media screen and (max-height:670px){
.service-toppage{
    width: 100%;
    height: calc(100% - 8rem);
    position: absolute;
    top:8rem;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: -1;
    background-color: #33ad84;
}

.service-toppage::before{
    position: absolute;
    content: '';
    height: 0.2rem;
    width: 23.4rem;
    left: 0;
    bottom: 4.2rem;
    background-color: white;
    border: 0px solid white;
}
.service-toppage-left{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.2rem;
    position: absolute;
    top:0rem;
    left:0;
    background-color:;
    border-bottom: 2px solid white;
}
.service-toppage-left2{
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.2rem;
    position: absolute;
    top:8rem;
    left:0;
    background-color:;
    border-bottom: 2px solid white;
}
.service-toppage-right{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: calc(100% - 2rem);
    height: auto;
    position: relative;
    top: 2.3rem;
    left: auto;
    right: 2rem;
    font-family: serif;
    border-right: 2px solid white;
    font-size: 1rem;
    box-sizing: content-box;
    overflow: hidden;
}
.service-toppage-right::after{
    display: block;
    position:absolute;
    content: '';
    height: 30rem;
    width: 1rem;
    top: 0;
    right: -2.1rem;
    z-index: -1;
    background-color:white;
}
.service-toppage-right::before{
    display: none;
    position:absolute;
    content: '';
    height: 2rem;
    width: 100%;
    top:auto;
    bottom: -6rem;
    left: 0rem;
    z-index: -1;
    background-color: white;
    opacity: 0.8;
}
.right-allfarme{
    display: flex;
    position: relative;
    flex-direction: column;
    width: 18rem;
    border-right: 2px solid white;
    box-sizing: content-box;
    overflow: hidden;
}
.right-allfarme::after{
    display: block;
    position: absolute;
    content: '';
    right: 9rem;
    bottom: -4.2rem;
    width: 1rem;
    height: 9rem;
    background-color: white;
}
.right-allfarme::before{
    display: block;
    position: absolute;
    content: '';
    right: 5.2rem;
    bottom: -4.0rem;
    width: 2rem;
    height: 6.5rem;
    background-color: white;
}
.frame0-box1{
    display: flex;
    height: 10rem;
    flex-direction: column;
    background-color: #65B2FF;
}
.frame0-box1::after{
    position: absolute;
    content: '';
    width: 8.7rem;
    height: 2rem;
    top:0;
    left: 0;
    background-color: white;
}

.top-right-frame3{
    display: flex;
    align-items: center;
    height: 7.2rem;
    width: 10rem;
    border-bottom: 2px solid white;
    box-sizing: border-box;
}
.top-right-frame3::after{
    
    position: absolute;
    content: '';
    bottom: 0.00rem;
    right:1.7rem;
    height: 7.1rem;
    width: 1.4rem;
    border: 1px solid white;
    background-color: white;
}
.top-right-frame3::before{
    position: absolute;
    content: '';
    bottom: 5.45rem;
    left:8rem;
    height: 1.64rem;
    width: 9.7rem;
    border: 1px solid white;
    background-color: white;
}
.frame3-box0{
    display: flex;
    align-items: center;
    height: 8rem;
    width: 10rem;
    background-color: ;
    border-bottom: 0px solid white;
}
.f3-box0-text0{
    display: none;
    font-size: 2em;
    position: relative;
    left: 3rem;
    line-height: 1;
    color: white;
}
.f3-3box-frame{
    position:absolute;
    display: flex;
    align-items: flex-end;
    height: 7rem;
    left: 1.7rem;
    bottom: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    border: 1px solid white;
    border-bottom: 2px solid white;
    background: linear-gradient(135deg, #E599FF 0%, #E599FF 50%, black 50%, black 100%);
}
.triangle1{
    height: calc(3rem / 2);
    width: 2rem;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: white;
    transform:rotate(0deg); 
    padding-left: 0%;
    animation-name: flashloop;
    animation-iteration-count:infinite;
    animation-duration: 3.4s;
    animation-delay: 1.4s;
    animation-timing-function: ease-in-out;
}
.triangle1-text::after{
    position: absolute;
    content: '';
    top:120%;
    right: auto;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    z-index: -1;
    color: rgba(255, 255, 255, 0.8)
}
}
*/
@media screen and (max-width:380px) {

.page-text-rent0{
    font-family: serif;
    color: white;
    font-size: 1.3rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-size: 100%;
    white-space: nowrap;
}
.page-text-rent0::before{
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    right: 9rem;
    bottom: 4rem;
    z-index: -1;
    background-image: url(../img/key.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.page-text-rent0::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '借主様 仲介の流れ';
    position: absolute;
    right: 11rem;
    top: 10%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid white;
    border-radius: 50px 50px 50px 50px;
    font-family: serif;
    font-size: 1rem;
    writing-mode: horizontal-tb;
    z-index: 1;
    white-space: nowrap;
    color: white;    
}
.page-text-rent1{
    font-family: serif;
    color: white;
    font-size: 1.3rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-size: 100%;
    white-space: nowrap;
}
.page-text-rent1::before{
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    right: 9rem;
    bottom: 4rem;
    z-index: -1;
    background-image: url(../img/key.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.page-text-rent1::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '貸主様 ※物件を管理委託する場合';
    position: absolute;
    right: 5rem;
    top: 10%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid white;
    border-radius: 50px 50px 50px 50px;
    font-family: serif;
    font-size: 1rem;
    writing-mode: horizontal-tb;
    z-index: 1;
    white-space: nowrap;
    color: white;    
}
.page-text-sale0{
    font-family: serif;
    color: white;
    font-size: 1.3rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-size: 100%;
    white-space: nowrap;
}
.page-text-sale0::before{
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    right: 9rem;
    bottom: 4rem;
    z-index: -1;
    background-image: url(../img/home.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.page-text-sale0::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '買主様 仲介の流れ';
    position: absolute;
    right: 11rem;
    top: 10%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid white;
    border-radius: 50px 50px 50px 50px;
    font-family: serif;
    font-size: 1rem;
    writing-mode: horizontal-tb;
    z-index: 1;
    white-space: nowrap;
    color: white;    
}
.page-text-sale1{
    font-family: serif;
    color: white;
    font-size: 1.3rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-size: 100%;
    white-space: nowrap
}
.page-text-sale1::before{
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    right: 9rem;
    bottom: 4rem;
    z-index: -1;
    background-image: url(../img/home.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.page-text-sale1::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '売主様 仲介の流れ';
    position: absolute;
    right: 11rem;
    top: 10%;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 2px solid white;
    border-radius: 50px 50px 50px 50px;
    font-family: serif;
    font-size: 1rem;
    writing-mode: horizontal-tb;
    z-index: 1;
    white-space: nowrap;
    color: white;    
}

.service-page00{
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:0;
    left: 0;
    background-color: #33ad84;
    z-index: 1;
}
.page-text{
    color: white;
}
.service-page00::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '1';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page01{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 2;
    background-color: #d18343;
    transition: all 1s 0s ease;
    opacity: 0;
}
.service-page01::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '2';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page01.p-open{   
    height: 100%;
    width: 100%;
    opacity: 1;
    transition: all 1s 0s ease;
}
.service-page02{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 3;
    background-color: rgb(93, 155, 226);
    transition: all 1s 0s ease;
    opacity: 0;
}
.service-page02.p-open{   
    height: 100%;
    width: 100%;
    opacity: 1;
    transition: all 1s 0s ease;
}
.service-page02::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '3';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page03{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 4;
    background-color: rgb(92, 92, 187);
    transition: all 1s 0s ease;
    opacity: 0;
}
.service-page03::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '4';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page03.p-open{   
    height: 100%;
    width: 100%;
    transition: all 1s 0s ease;
    opacity: 1;
}
.service-page04{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 5;
    background-color: rgb(231, 90, 90);
    transition: all 1s 0s ease;
    opacity: 0;
    overflow: hidden;
}
.service-page04::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '5';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page04.p-open{   
    height: 100%;
    width: 100%;
    color: white;
    transition: all 1s 0s ease;
    opacity: 1;
}
.service-page05{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 0%;
    top:0;
    left:0;
    z-index: 5;
    background-color: rgb(60, 167, 78);
    transition: all 1s 0s ease;
    opacity: 0;
    overflow: hidden;
}
.service-page05::after{
    display: flex;
    align-items: center;
    justify-content: center;
    content: '6';
    color: black;
    width: 50rem;
    height:50rem;
    position: absolute;
    left: -6rem;
    top:-10rem;
    border: 2rem solid black;
    border-radius: 50%;
    font-size: 50rem;
    font-family: serif;
    z-index: -1;
}
.service-page05.p-open{   
    height: 100%;
    width: 100%;
    color: white;
    transition: all 1s 0s ease;
    opacity: 1;
}
}

@media screen and (max-height:670px) {

.menuSubline{
    display: flex;
    height: 100vh;
    margin-left: 7rem;
}
.openmenuline1{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 2.6rem;
    height: 20vh;
    padding-bottom: 2rem;
    writing-mode: vertical-rl;
    font-size: 1.2rem;
    margin-right: 4rem;
    margin-left: 0rem;
    color:white;
    border-radius: 0px 0px 50px 50px;
    background-color: rgba(255,255,255,0.2);
}
.openmenuline2{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 2.6rem;
    height: 40vh;
    padding-bottom: 2rem;
    writing-mode: vertical-rl;
    font-size: 1.2rem;
    margin-right: 4rem;
    margin-left: 0rem;
    color:white;
    border-radius: 0px 0px 50px 50px;
    background-color: rgba(255,255,255,0.2);
}
.openmenuline3{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 2.6rem;
    height: 60vh;
    padding-bottom: 2rem;
    writing-mode: vertical-rl;
    font-size: 1.2rem;
    margin-right: 0rem;
    margin-left: 0rem;
    color:white;
    border-radius: 0px 0px 50px 50px;
    background-color: rgba(255,255,255,0.2);
}   
.service-toppage-center::after{
    position: absolute;
    content: '';
    width: 50%;
    height: 100vh;
    top:0;
    left: 200%;
    background-color: white;
}
.service-toppage-center::before{
    display: none;
    position: absolute;
    content: '';
    width: 1400%;
    height: 3rem;
    bottom:0;
    left: 200%;
    background-color: white;
    border-radius: 0px 100px 0px 0px;
}
}
@media screen and (max-width: 1440px) {
@media screen and (max-height:768px) {

    .top-right-frame3{
        overflow: hidden;
    }
}
}