@charset "utf-8";
@font-face {
  font-family: "myFont";
  src: url("single.eot?")  format('eot'),
       url("single.woff")  format('woff');
}
.myFontClass {
  font-family: "myFont";
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
font-size:62.5%;
}
/* main
----------------------------------------------------------------*/
body{
font:normal 160%/170% "メイリオ","Osaka", sans-serif;
text-align:justify;
color:#40210e;
background:url(../img/bg.jpg);
}

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

a{
color:#40210e;
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 center;
background-size:cover;
height:550px;
font-family: "myFont";
}

#main-title{
height:350px;
}

#catch{
position:absolute;
top:22%;
left:50%;
width:1000px;
margin:0 0 0 -500px;
padding:8rem 0 0 0;
}

#main-title div{
top:12%;
}

#catch{
background:url(../img/catch-deco.png) no-repeat;
}

h1{
text-align:center;
}

header p{
margin:0 0 0 12rem;
font-size:250%;
}

header h2{
margin:2.5rem 0 0;
font-size:250%;
line-height:100%;
font-weight:normal;
}

header h2 span{
display:block;
float:left;
}

header h2 span:first-child{
margin:1.5rem 0 0;
font-size:180%;
letter-spacing:-0.5rem;
}

#title{
width:100%;
height:150px;
background:url(../img/title-bg.png);
}

#title div{
position:relative;
padding:2rem 0;
}

#title h2{
text-align:center;
}

#balloon{
position:absolute;
left:-12rem;
top:-5rem;
animation:swing 5s ease 0s infinite alternate;
-webkit-transform-origin: top center;
transform-origin: top center;
}

.move{
margin:1.5rem auto 6rem;
text-align:center;
}

#three li.move{
margin:1.5rem auto 0;
}

.move a{
transition:all 0.6s ease;
}

.move a:hover{
opacity:0.7;
filter:drop-shadow(3px 3px 6px rgba(237, 130, 177, 0.8));
}

/* section
----------------------------------------------------------------*/
.container{
position:relative;
margin:0 auto;
width:1100px;
}

/* trouble
----------------------------------------------------------------*/
#trouble{
padding:4rem 0;
border-bottom:1px solid #999;
box-shadow:0 3px 3px #ccc;
background:#fff;
}

#trouble .container{
background:url(../img/room.jpg) no-repeat right bottom;
}

#trouble h2{
margin:0 0 8rem;
padding:3rem 0 1.5rem 12%;
/*color:#5cabf5;*/
font-size:180%;
line-height:110%;
font-weight:normal;
font-family: "myFont";
background:url(../img/trouble-line.png) no-repeat center bottom;
display:flex;
flex-wrap:wrap;
}

#trouble h2 span{
display:flex;
align-items: center;
-webkit-align-items: center;
-webkit-justify-content: center;
-moz-align-items: center;
-moz-justify-content: center;
}

#trouble h2 span:first-child, #trouble h2 span:nth-child(3){
font-size:180%;
}

#trouble h2 span:nth-child(2){
margin:0 0.5rem;
}

#trouble figure{
padding:5rem 0 0 21%;;
}

#trouble li{
position:absolute;
}

#trouble li:first-child{
top:22%;
left:0;
}

#trouble li:nth-child(2){
top:62%;
left:0;
}

#trouble li:nth-child(3){
top:20%;
left:41%;
}

#trouble li:nth-child(4){
top:58%;
left:46%;
}


/* answer
----------------------------------------------------------------*/
#answer{
margin:6rem 0 12rem;
}

#answer h2{
margin:0 0 3rem;
}

#answer h3{
margin:0 0 0.5rem;
font-size:170%;
line-height:150%;
font-family: "myFont";
}

#answer h3 img{
margin:0 0 1rem 1rem;
float:right;
}

/* reason
----------------------------------------------------------------*/
#reason h2{
padding:4.2rem 0 0;
background:url(../img/town.png) repeat-x;
}

#reason h2 span{
position:relative;
display:block;
padding:1.5rem 0;
font-size:120%;
font-family: "myFont";
text-align:center;
color:#fff;
background:#40210e;
border-radius:6px;
}

#reason h2:after{
position:absolute;
top:4rem;
right:9%;
width:60px;
height:60px;
content:"";
background:url(../img/star.png) no-repeat;
background-size:contain;
}

#three{
display:flex;
margin:3rem auto;
width:90%;
}

#three li{
padding:0 2rem;
width:calc(100% / 3);
text-align:center;
}

.arrow{
position:relative;
top:-4rem;
left:2rem;
animation:swing 5s ease 0s infinite alternate;
-webkit-transform-origin: top center;
transform-origin: top center;
z-index:2;
}

.arrow2{
position:relative;
top:-2rem;
left:2rem;
animation:swing 3s ease 0s infinite alternate;
-webkit-transform-origin: top center;
transform-origin: top center;
z-index:2;
}

.arrow3{
position:relative;
top:-3rem;
left:2rem;
animation:swing 4s ease 0s infinite alternate;
-webkit-transform-origin: top center;
transform-origin: top center;
z-index:2;
}

#desc li{
margin:0 0 2rem;
overflow:hidden;
border-bottom:2px dashed #40210E;
}

#desc ul{
margin:0 0 1.5rem;
}

#desc li li{
margin:0 0 0.5rem;
border-bottom:none;
}

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

#desc h3{
position:relative;
margin:0 2rem 0 0;
padding:1.5rem 0 2.5rem 4rem;
float:left;
}

#desc h3 img:first-child{
position:absolute;
top:0;
left:0;
width:18rem;
z-index:10;
transform:rotate(-5deg);
}

#desc p{
padding:1.5rem 0 0;
}

#desc li img:nth-child(2){
max-width:350px;
box-shadow:2px 2px 3px rgba(64,33,14,0.5);
}

/* user
----------------------------------------------------------------*/
#user{
padding:6rem 0;
background:#fff url(../img/obi.png) repeat-x top;
}

#user h2{
margin:0 0 2rem;
text-align:center;
}

#user .img-right{
margin:0 0 1.5rem 6rem;
float:right;
}

#user p{
margin:0 0 0.5rem;
}

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

#staff div{
overflow:hidden;
}

#staff h2{
margin:0 0 1.5rem;
}

#staff h3{
margin:0 0 1.5rem;
font-size:160%;
font-family: "myFont";
}

.img-left{
margin:0 1.5rem 1.5rem 0;
width:30%;
float:left;
}

#staff div div{
width:65%;
float:right;
}

#staff .img-right{
margin:0 0 1.5rem 1.5rem;
float:right;
}


/* merit
----------------------------------------------------------------*/
#merit{
padding:3rem 0 6rem;
background:url(../img/title-bg.png);
}

#merit ul{
display:flex;
margin:3rem auto;
width:80%;
}

#merit li{
padding:0 3rem;
width:calc(100% / 3);
}

#merit p{
font-size:120%;
}

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

#map h2{
margin:0 0 1rem;
padding:1rem 0;
background:#FF66A1;
color:#fff;
text-align:center;
font-family: "myFont";
}

/* card
----------------------------------------------------------------*/
#card{
margin:4rem auto;
padding:2rem;
width:48%;
background:rgba(255,255,255,0.7);
border:1px solid #ccc;
overflow:hidden;
}

#card h3{
font-size:120%;
}

#card h3+p{
margin:0.25rem 0;
font-size:180%;
font-weight:bold;
}

#card .img-right{
margin:0 0 0 1.5rem;
float:right;
}

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

.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;
}

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

select{
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;
}

footer{
margin:5rem 0 0;
padding:3rem 0;
background:#40210E;
font-size:110%;
text-align:center;
color:#ffffff;
}

@media screen and (min-width: 1201px){
#answer h3, #answer p{
padding:0 3rem;
}

}

/***1400px***/
@media screen and (max-width: 1400px){
#title h2{
margin:0 0 0 15rem;
}

#balloon{
left:-5rem;
}
}

/***1200px***/
@media screen and (max-width: 1200px){
#title h2{
margin:0;
text-align:right;
}

#balloon{
left:0;
}

}


/***1100px***/
@media screen and (max-width: 1100px){
.container{
width:100%;
padding:0 1rem;
}

#catch{
position:static;
margin:0;
width:100%;
}

header h2{
font-size:230%;
}

#title div{
padding:2rem 1rem;
}

}

/***1024px***/
@media screen and (max-width: 1024px){
header{
background:url(../img/main.jpg) no-repeat -15vw center;
background-size:cover;
height:450px;
}

#balloon{
top:-14rem;
}

#reason h2:after{
right:3%;
}

}



/***960px***/
@media screen and (max-width: 960px){
header{
background:url(../img/main.jpg) no-repeat -20vw center;
background-size:cover;
}

#title h2{
text-align:center;
}

#balloon{
left:2.5rem;
}

#trouble h2{
padding:3rem 0 1.5rem 0;
}

#trouble figure{
padding:5rem 0 0 18%;
}

#trouble li:first-child{
top:25%;
width:25%;
}

#trouble li:nth-child(3){
top:23%;
width:30%;
}

#trouble li:nth-child(4){
top:58%;
left:46%;
}

#staff .img-left, #staff div div{
float:none;
}

#staff div div{
width:100%;
}

#staff .img-left{
width:100%;
text-align:center;
float:none;
}

#merit ul{
width:96%;
}

}

/*** 768px***/
@media screen and (max-width: 768px){
.pc{
display:none;
}

header{
background:url(../img/main.jpg) no-repeat -45vw center;
background-size:cover;
}

#catch{
width:80%;
}

header h2{
margin:2.5rem 0 0 3rem;
line-height:130%;
}

header h2 span{
display:inline;
float:none;
}

header h2 br{
display:none;
}

#balloon{
width:28%;
}

#trouble h2{
font-size:150%;
}

#trouble .container{
background:none;
}

#trouble figure{
padding:5rem 0 0;
text-align:center;
}

#trouble li:first-child{
width:35%;
}

#trouble li:nth-child(3){
width:40%;
left:auto;
right:0;
}

#trouble li:nth-child(4){
width:35%;
left:auto;
right:0;
}

#answer h3 img{
width:47.5%;
}

#three{
width:100%;
}

#reason h2 span{
font-size:100%;
}

#reason h2:after {
height:32px;
top:5rem;
right:0;
}

.arrow, .arrow2, .arrow3{
width:50%;
}

#desc h3{
padding:1.5rem 0 5.5rem 0;
}

#desc h3 img:first-child{
top:-3rem;
}

#desc li img:nth-child(2){
max-width:320px;
}

#desc li#d01, #desc li#d02, #desc li#d03{
margin:0 0 5rem;
padding:0 0 1rem;
overflow:visible;
}

#desc li#d03{
margin:0 0 2rem;
}

#user{
padding:6rem 0 0;
}

}

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

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

#catch{
margin:15rem 0 0;
width:100%;
}

#balloon{
top:1rem;
}

#title{
height:auto;
}

#title h2{
padding:10.5rem 0 0;
}

#trouble h2{
font-size:130%;
}

#answer{
margin:6rem 0;
}

#answer h3 img{
display:block;
margin:0 auto 1rem;
width:auto;
float:none;
}

#reason h2 span{
padding:1.5rem 0.5rem;
}

#reason h2:after{
right:2rem;
height:60px;
}

#desc h3{
padding:0;
text-align:center;
float:none;
}

#desc h3 img:first-child{
left:1rem;
top:1rem;
}

#desc li img:nth-child(2){
max-width:300px;
}

#merit p{
font-size:110%;
}

#merit p.fig{
text-align:left;
}

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

input[type="email"]{
width:90%;
}

footer{
font-size:90%;
}

}


/*** 425px***/
@media screen and (max-width: 425px){
header{
background-position:-10vw center;
}

#catch{
margin:12rem 0 0;
background-size:45%;
background-position:left 4vh;
}

header p{
margin:0 0 0 6rem;
font-size:200%;
}

header h2{
margin:2.5rem 0 0;
padding:0 2%;
font-size:180%;
}

#balloon{
width:50%;
}

.move{
margin:1.5rem auto 0;
}

#trouble{
padding:4rem 0 0;
}

#trouble h2{
line-height:140%;
}

#trouble h2 br{
display:none;
}

#trouble h2 span:first-child, #trouble h2 span:nth-child(3){
font-size:140%;
}

#trouble figure{
padding:10rem 0 0;
}

#trouble li:first-child{
width:45%;
top:21%;
}

#trouble li:nth-child(2){
width:35%;
top:39%;
}

#trouble li:nth-child(3){
width:50%;
}

#trouble li:nth-child(4){
top:46%;
}

.move{
padding:0 1rem;
}

#three li.move{
padding:0;
}

#answer{
margin:3rem 0;
}

#answer h2{
margin:0 0 1.5rem;
}

#answer h3{
font-size:130%;
letter-spacing:-0.4rem;
}

#answer p, #staff p{
padding:0 1rem;
}

#reason h2 span{
font-size:85%;
text-align:left;
}

#reason h2:after{
top:9rem;
height:32px;
}

#three{
display:block;
margin:0 0 3rem;
text-align:center;
}

#three li{
display:inline-block;
padding:0 0.5rem;
width:49%;
}

#three li:last-child{
margin:-2rem 0 0;
}

#desc li#d01, #desc li#d02, #desc li#d03{
margin:0 0 7rem;
}

#desc ul{
padding:0 1rem;
}

#desc h3 img:first-child{
top:-5rem;
}

#user .img-right, #staff .img-right{
display:block;
margin:0 auto 2rem;
width:auto;
border-bottom:1px dotted #ccc;
float:none;
}

#merit li{
padding:0 0.5rem;
}

#map h2{
letter-spacing:-0.4rem;
}

#map h2 img{
width:24px;
}

select{
margin:0.5rem 0 0;
font-size:120%;
}

.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%;
}

@media screen and (max-width: 375px){
#trouble h2{
letter-spacing:-0.1rem;
}

#answer h3{
font-size:122%;
letter-spacing:-0.2rem;
}

.formlink{
width:90%;
}



}