@charset "utf-8";
*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
font-size:62.5%;
}
/* Thin, Light, Regular, Medium, Bold, Extra Bold, Black
----------------------------------------------------------------*/
body{
font:normal 140%/160% "M PLUS 1p", sans-serif;
text-align:justify;
color:#21b8c5;
}


img{
border:none;
max-width:100%;
}

a{
color:#21B7C4;
text-decoration:none;
}

ul, ol{
list-style:none;
}

.both{
clear:both;
}

.fig{
text-align:center;
}

#wrapper{
overflow:hidden;
}

.sp{
display:none;
}

/* header
----------------------------------------------------------------*/
header{
position:relative;
background:url(../img/main.jpg) no-repeat;
background-size:cover;
text-align:center;
height:655px
}

header div{
position:absolute;
bottom:5rem;
left:0%;
width:100%;
text-align:center;
}

#baloon{
position:absolute;
right:0;
top:0;
animation:swing 2s ease 0s infinite alternate;
-webkit-transform-origin: top center;
transform-origin: top center;
}

/* section
----------------------------------------------------------------*/
.container{
margin:0 auto;
width:960px;
}

/* doc
----------------------------------------------------------------*/
#doc figure{
position:relative;
margin:-3rem 2.5rem 0 0;
float:left;
z-index:2;
animation: swing 2s ease 0s infinite alternate;
-webkit-transform-origin: top center;
transform-origin: top center;
}

#doc div div{
padding:3rem 0 0;
font:700 260%/120% "M PLUS 1p", sans-serif;
}

#doc div img{
margin:-1rem 0 2rem 3rem;
float:right;
}

#doc p{
margin:3rem 0 0;
position: relative;
}

#doc a{
display:block;
padding:10px 0 10px 25rem;
font:500 200%/120% "M PLUS 1p", sans-serif;
text-align: center;
border: 3px solid #21B7C4;
background: #ffffff;
font-weight: bold;
transition:all 0.8s ease;
}

#doc a:hover{
text-decoration: none;
opacity: 0.7;
}

#doc a:before{
content: '';
position: absolute;
background: url("../img/arrow.png")no-repeat 0 0;
width: 54px;
height: 54px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 20%;
}

/* house
----------------------------------------------------------------*/
#house{
margin:6rem 0 4rem;
}

#house p img{
margin:-19.5rem 0 2rem 2rem;
float:right;
}

#house p{
margin:2.5rem 0 0;
font:700 140%/180% "M PLUS 1p", sans-serif;
}

#house h3{
clear:both;
width:950px;
margin:0 auto 0.3rem;
color:#000;
}

#gallery{
padding:1.5rem 0 3.5rem;
border-top:1px solid #000;
border-bottom:1px solid #000;
}

#gallery div{
margin:0 auto;
width:950px;
}

/* trouble
----------------------------------------------------------------*/
#trouble{
margin:8rem 0 4rem;
text-align:center;
}

#trouble h2{
margin:0 0 2rem;
}

#icon{
display:flex;
}

#icon li{
margin:0 0 6rem;
width:25%;
font:700 150%/130% "M PLUS 1p", sans-serif;
}

#trouble h3{
position:relative;
margin:0 0 2rem;
z-index:2;
}

#usr{
margin:-7.2rem 0 10rem;
display:flex;
flex-wrap:wrap;
}

#usr li{
width:calc(100% / 3);
}

/* feature
----------------------------------------------------------------*/
#feature{
padding:0 0 4rem;
}

#feature h2{
text-align:center;
}

#feature .catch{
margin:0 0 4rem;
padding:3rem 0 0;
font:700 200%/150% "M PLUS 1p", sans-serif;
text-align:center;
}

#feature .catch span{
background:#FFFF00;
}

#feature li{
display:flex;
padding:6rem 0 2rem;
font:700 130%/150% "M PLUS 1p", sans-serif;
border-bottom:1px dotted #999;
overflow:hidden;
}

#feature li:last-child{
border-bottom:none;
}

#feature li a{
display: block;
margin:1.5rem 0 0;
padding: 10px 0;
text-align: center;
font-size: 22px;
color: #21B8C5;
background: #FFFF00;
border: 4px solid #21B8C5;
border-radius: 50px;
position: relative;
font-weight: bold;
}

#feature li a:before{
content: '';
position: absolute;
background: url("../img/arrow02.png")no-repeat 0 0;
width: 30px;
height: 20px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
right: 30px;
}

#feature a:hover{
text-decoration: none;
opacity: 0.7;
}

#feature li figure, #feature li p{
width:calc(100% / 3);
}

#feature li figure:first-child{
transform:translateY(-3rem);
}

/* price
----------------------------------------------------------------*/
#price{
padding:0 0 6rem;
}

#price h2{
background:#F7931E;
text-align:center;
}

#price h2 img{
margin:0 3rem 0 0;
transform:translateY(-2.5rem);
}

#type .slides li{
margin:3rem 0 0;
padding:1.5rem;
text-align:center;
border: 3px solid #f7931e;
overflow:hidden;
}

#type li img:first-child{
margin:0 3rem 0 0;
}

#carousel{
margin:0 0 1rem;
}

#carousel .slides li{
margin:0 5px;
padding:10px 0;
border:3px solid #f7931e;
color:#4D4D4D;
font-size:140%;
text-align:center;
cursor:pointer;
transition:all 1s ease;
}

#carousel .slides li span{
font-size:140%;
}

#carousel .slides li.flex-active-slide{
background:#f7931e;
cursor:pointer;
}

.pricetxt{
font-size:80%;
line-height:130%;
color:#666666;
font-family:"メイリオ", sans-serif;
}

.pricetxt li{
margin:0 0 0.4rem 1.2rem;
text-indent:-1.2rem;
}

/* style
----------------------------------------------------------------*/
#style{
padding:0 0 6rem;
}

#style h2{
background:#8CC63F;
text-align:center;
}

#style h2 img{
margin:0 3rem 0 0;
transform:translateY(-2.5rem);
}

#style4{
margin:3rem auto 0;
}

#style4 .slides li{
padding:1.5rem;
border:3px solid #8CC63F;
color:#333;
overflow:hidden;
}

#style4 .slides figure{
margin:0 0 0 1.5rem;
float:right;
}

#style4 .slides p{
margin:0 0 1.5rem;
}

/* facility
----------------------------------------------------------------*/
#facility{
padding:0 0 6rem;
}

#facility h2{
background:#FF66A1;
text-align:center;
}

#facility h2 img{
margin:0 3rem 0 0;
transform:translateY(-2.5rem);
}

#equip{
margin:3rem auto 0;
}

#equip .slides>li{
padding:1.5rem;
color:#333;
border: 3px solid #FF7BAC;
overflow:hidden;
}

#equip .slides li span{
color:#21B8C5;
}

#equip .slides figure{
margin:0 0 0 1.5rem;
float:right;
}

#equip .slides h3{
font-size:300%;
line-height:120%;
text-align:center;
}

#equip .slides ul{
margin:0.5rem 0 2rem 1.5rem;
}

#equip .slides ul li{
margin:0 0 0.5rem;
font-size:110%;
}

#equip .slides li dl{
margin:1.5rem 0 0;
}

#equip .slides li:first-child dt, #equip .slides li:nth-child(2) dt{
margin:0 0 0.5rem;
font-size:130%;
line-height:150%;
font-weight:bold;
color:#b9717f;
}

#equip .slides li:nth-child(2) dt{
color:#21b8c5;
}


/* voice
----------------------------------------------------------------*/
#voice{
margin:4rem 0 0;
padding:0 0 6rem;
}

#voice h2{
background:#21B8C5;
text-align:center;
}

#voice h2 img{
margin:0 0 -7rem;
transform:translateY(-4rem);
}

#voice ul{
margin:2.5rem 0 0;
display:flex;
flex-wrap:wrap;
}

#voice li{
margin:0 2% 3rem 0;
padding:2rem;
width:48%;
border:2px solid #21b8c5;
}

#voice li:nth-child(even){
margin:0 0 3rem 2%;
width:48%;
}

#voice dl{
position:relative;
}

#voice dl:after{
position:absolute;
top:-4rem;
right:-1rem;
width:49px;
height:69px;
background:url(../img/pin.png) no-repeat;
background-size:contain;
content:" ";
}

#voice dt{
margin:0 0 1rem;
padding:0 5rem 0.5rem 0;
font:700 200%/140% "M PLUS 1p", sans-serif;
border-bottom:1px solid #21b8c5;
}

#voice dd{
font:500 130%/140% "M PLUS 1p", sans-serif;
transform: rotate(0.028deg);
-webkit-transform: rotate(0.028deg);
-moz-transform: rotate(0.028deg);
color:#666;
}

/* request
----------------------------------------------------------------*/
#request{
margin:4rem 0 0;
}

#request h2{
padding:3rem 0;
background:#21B8C5;
text-align:center;
}

#request h2 img{
margin:0 1rem;
vertical-align:middle;
}

#request h3{
padding:1rem 0;
font:700 320%/140% "M PLUS 1p", sans-serif;
text-align:center;
}

#request ul{
margin:2.5rem 0 0;
display:flex;
}

#request li{
margin:0 0 3rem;
padding:1rem 2rem;
width:32%;
border:1px solid #21b8c5;
}

#request li:nth-child(3n+2){
margin:0 2% 3rem;
}

#request h4{
margin:0 0 0.5rem;
font:700 200%/140% "M PLUS 1p", sans-serif;
text-align:center;
}

#request h4 span{
font-size:140%;
}

#request p{
font:500 140%/140% "M PLUS 1p", sans-serif;
transform: rotate(0.028deg);
-webkit-transform: rotate(0.028deg);
-moz-transform: rotate(0.028deg);
}

/* anchor01
----------------------------------------------------------------*/
#anchor01{
margin:4rem 0 0;
}

#easy{
position:relative;
margin:0 0 6rem;
padding:4rem 0;
color:#21B8C5;
font:700 230%/140% "M PLUS 1p", sans-serif;
text-align:center;
border: 3px solid #21B8C5;
}

#easy:before{
content: '';
position: absolute;
background: url("../img/fukidashi.jpg")no-repeat 0 0;
width: 42px;
height: 35px;
bottom: -34px;
left: 125px;
z-index: 2;
}

.formtable{
margin:40px auto 0;
width:88%;
border:1px solid #21B8C5;
border-collapse:collapse;
}

.formtable th{
padding:1.5rem 0.5rem;
color:#666666;
width:24rem;
background:#def4f6;
border-right:1px solid #21B8C5;
border-bottom:1px solid #21B8C5;
vertical-align:top;
}

.formtable td{
color:#4D4D4D;
vertical-align:top;
border-bottom:1px solid #21B8C5;
padding:1.5rem 0.5rem;
}

.lt-red{
color:#cf0000;
font-weight:bold;
}

td li{
margin:0 0 0.3rem 2rem;
list-style:disc;
}

.li-3{
overflow:hidden;
}

.li-3 li{
width:calc(90% / 3);
float: left;
}

input[type="text"], input[type="email"], input[type="tel"]{
padding:0.3rem;
font-size:120%;
}

#addr{
width:95%;
}

textarea{
padding:2px;
width:95%;
height:12rem;
font-size:130%;
}

.formlink{
display: block;
border: none;
width: 365px;
padding: 30px 0;
text-align: center;
color: #FFFFFF;
font-size: 26px;
background: #21B8C5;
margin: 60px auto 70px auto;
cursor:pointer;
}

.formlink:hover{
opacity: 0.7;
}

#return{
display: block;
margin:1.5rem 0 0;
border: none;
padding: 1rem 3rem;
text-align: center;
color: #FFFFFF;
font-size: 120%;
background: #333;
cursor:pointer;
}

.jscrollpane{
margin:40px auto 0;
width:100%;
height:190px;
border:1px solid #21B8C5;
color:#333;
font-size:90%;
font-family:"メイリオ",sans-serif;
overflow:hidden;
}

.jspVerticalBar{
	width: 30px!important;
	background: #DCDDDD;
}
.jspDrag{
	background: #BDBEBE!important;
}
.jspContainer{
padding:1rem;
	width: 100%!important;
}
.jspPane{
	width: 95% !important;
}

.jspTrack{
background:#dedede;
}

.formtable thead th{
background:#21B8C5;
text-align:center;
font-size:150%;
font-weight:500;
letter-spacing:0.2rem;
color:#ffffff;
}

#profile table{
font-size:120%;
}

#profile .formtable th{
width:14rem;
}

#profile .formtable td{
transform: rotate(0.028deg);
-webkit-transform: rotate(0.028deg);
-moz-transform: rotate(0.028deg);
}

#copyright{
margin:5rem 0 0;
padding:3rem 0;
background:#21b8c5;
font-size:110%;
text-align:center;
color:#ffffff;
}

/***PC 960px ~***/

/***IPAD 768px ~ 960px***/
@media screen and (max-width: 960px){
header div{
left:0;
margin:0;
width:100%;
text-align:center;
}

.container{
width:100%;
padding:0 1rem;
}

#house h3, #gallery div{
width:100%;
}

#price .container, #style .container, #facility .container{
padding:0 3rem;
}

#carousel .slides li{
width:118px !important;
}

.formtable{
font-size:110%;
}

}

/*** SP 480px ~ 768px***/
@media screen and (max-width: 768px) {
#baloon{
width:28%;
}

#doc figure{
width:20%;
}

#doc div div{
font:700 200%/120% "M PLUS 1p", sans-serif;
}

#doc a{
padding:10px 0 10px 6rem;
}

#house p{
font:700 130%/180% "M PLUS 1p", sans-serif;
}

#house p img{
margin:-7.5rem 0 2rem 1rem;
width:50%;
}

#feature .catch{
font:700 160%/150% "M PLUS 1p", sans-serif;
}

#feature li a{
padding:10px 0 10px 2rem;
text-align:left;
}

#price h2 img:first-child, #style h2 img:first-child, #facility h2 img:first-child{
margin:0 1rem 0 0;
width:20%;
}

#price h2 img:nth-child(2){
margin:0 1rem 0 0;
width:75%;
transform:translateY(-0.5rem);
}

#style h2 img:nth-child(2){
margin:0 1rem 0 0;
width:75%;
transform:translateY(-1.5rem);
}

#facility h2 img:nth-child(2){
margin:0 1rem 0 0;
width:75%;
transform:translateY(-2.5rem);
}

#carousel .slides li{
font-size:120%;
width:90px !important;
}

.pricetxt{
font-size:100%;
}

#style4 .slides figure, #equip .slides figure{
text-align:center;
float:none;
}

#style4 .slides h3{
text-align:center;
}

#style4 .slides p{
margin:0 1rem 0 0;
width:70%;
font-size:120%;
float:left;
}

#equip .slides p{
position:absolute;
top:1.5rem;
right:1.5rem;
}

#voice dt{
font:700 140%/140% "M PLUS 1p", sans-serif;
}

.jscrollpane{
font-size:100%;
}

}

/*** SP 320px ~ 479px***/
@media screen and (max-width: 640px){
.sp{
display:block;
}

header{
background:url(../img/main_sp.jpg) no-repeat;
background-size:cover;
height:390px;
}

#doc div div img{
width:25%;
}

#doc a{
padding:10px 0 10px 1.5rem;
text-align:left;
}

#doc a:before{
right:5%;
}

#house p{
font:700 110%/180% "M PLUS 1p", sans-serif;
}

#house p img{
margin:-2.5rem 0 2rem 1rem;
width:45%;
}

#gallery .slides{
display:flex;
flex-wrap:wrap;
width:100% !important;
}

#gallery .slides li{
float:none !important;
}

#gallery .flex-direction-nav a, .flex-control-nav{
display:none;
}

#icon li{
font:700 130%/130% "M PLUS 1p", sans-serif;
}

#feature li{
flex-wrap:wrap;
}

#feature li figure{
width:50%;
}

#feature li p{
width:100%;
}

#feature li a{
text-align:center;
}

#carousel .slides{
display:flex;
flex-wrap:wrap;
width:100% !important;
}

#carousel .slides li{
margin:0 0 1rem;
width:185px !important;
float:none !important;
}

#style4 .slides p{
width:62%;
}

#voice li, #voice li:nth-child(even){
margin:0 auto 1.5rem;
width:80%;
}

#voice dt{
padding:0 0 0.5rem 0;
}

#voice dl:after{
width:35px;
right:-3rem;
}

.li-3 li{
width:49%;
}

td li{
margin:0 0 0.5rem;
text-align:left;
}

}


/*** SP 320px ~ 479px***/
@media screen and (max-width: 425px){
header h1{
margin:0 auto;
width:60%;
}

#baloon{
width:30%;
}

#doc figure{
width:35%;
float:none;
}

#doc div div{
font:700 140%/120% "M PLUS 1p", sans-serif;
}

#doc div div img{
position:relative;
margin:-17.5rem 0 0;
width:48%;
z-index:10;
}

#doc a{
font:700 130%/120% "M PLUS 1p", sans-serif;
}

#doc a:before{
right:2%;
width:28px;
background-size:contain;
transform:translateY(-30%);
}

#house p{
margin:0 0 3rem;
}

#house p img{
display:block;
margin:0 auto;
width:70%;
float:none;
}

#gallery .slides li{
width:180px !important;
}

#house h3{
padding:0 0 0 0.5rem;
font-size:140%;
}

#icon{
flex-wrap:wrap;
}

#icon li{
margin:0 0 1.5rem;
width:50%;
font:700 110%/130% "M PLUS 1p", sans-serif;
}

#icon li img{
width:70%;
}

#usr{
margin:-4.2rem 0 4rem;
}

#usr li{
width:50%;
}

#feature .catch{
font:700 180%/150% "M PLUS 1p", sans-serif;
}

#price h2 img:first-child, #style h2 img:first-child, #facility h2 img:first-child{
width:40%;
}

#price h2 img:nth-child(2){
width:96%;
}

#price .flexslider{
margin:0;
}

#style4 .slides p{
width:100%;
float:none;
}

#equip .slides ul{
margin:0.5rem 0 2rem -1rem;
}

#equip .flex-direction-nav a{
top:56%;
}

#voice li, #voice li:nth-child(even){
width:90%;
}

#request h3{
font:700 180%/140% "M PLUS 1p", sans-serif;
}

#request ul{
margin:0;
display:block;
}

#request li{
margin:0 auto 1rem !important;
width:100%;
font-size:90%;
}

#easy{
font:700 170%/140% "M PLUS 1p", sans-serif;
}

.formtable{
width:100%;
}

th, td{
display:list-item;
list-style:none;
width:100% !important;
}

input[type="text"], input[type="email"], input[type="tel"]{
font-size:140%;
}

textarea{
width:100%;
height:10rem;
}

.formtable thead th{
font-size:120%;
}

#profile table{
font-size:110%;
}

#price .container, #style .container, #facility .container{
padding:0 0.2rem;
}

.jspVerticalBar{
width:15px !important;
}

.jspPane{
width:92% !important;
}