@charset "utf-8";
/* CSS Document */
@font-face {
font-family: "Yu Gothic";src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Yu Gothic";src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Yu Gothic";src: local("Yu Gothic Medium");
font-weight: 300;
}
@font-face {
font-family: "Yu Gothic";src: local("Yu Gothic Medium");
font-weight: 400;
}
@font-face {
font-family: "Yu Gothic";src: local("Yu Gothic Bold");
font-weight: bold;
}
.pink{color:#f44779;}
.blue{color:#54c6ff;}
.orange{color:#ff6f00;}
.purple{color:#b86ad7;}
.green{color:#88c200;}
.blue_green{color:#56b29a;}
a{border-bottom:1px dotted #ff8674;}
a:hover{color:#ff8674;}
body{
position:relative;
font-family:"游ゴシック", YuGothic,  'Open Sans',"メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serifsans-serif, Verdana, Roboto, "Droid Sans";font-weight:bold;
font-weight:bold;
color:#555;
background:url(../img/k1.jpg) repeat;
}
header{
position:relative;
z-index:999;
}
#main-visual{
background: #9fdfff;
background: -webkit-linear-gradient(#9fdfff, #f0faff);
background:    -moz-linear-gradient(#9fdfff, #f0faff);
background:     -ms-linear-gradient(#9fdfff, #f0faff);
background:      -o-linear-gradient(#9fdfff, #f0faff);
background:         linear-gradient(#9fdfff, #f0faff);
width:100%;
overflow:hidden;
position:relative;
}
#main-visual h2{
display:block;
text-align:center;
font-size:170%;
position:relative;
z-index:50;
}

#main-visual h2+img{
width:1980px;
display:inline-block;
height:auto;
position: relative;
left: 50%;
margin-left: -990px; 
z-index:50;
}
#sp_logo2{display:none;}
#cloud1{
position:absolute;
z-index:1;
top:80px;
left:80px;
animation:translate 50s; 
animation-iteration-count:infinite; 
-webkit-animation:translate 50s; /* Safari & Chrome */
-webkit-animation-iteration-count:infinite; 
}
#about #cloud1 img,
#about2 #cloud1 img,
#about3 #cloud1 img,
#access #cloud1 img,
#care #cloud1 img,
#info #cloud1 img,
#contact #cloud1 img
{
width:90px;
height:auto;
}
#about #cloud2 img,
#about2 #cloud2 img,
#about3 #cloud2 img,
#access #cloud2 img,
#care #cloud2 img,
#info #cloud2 img,
#contact #cloud2 img
{
width:85px;
height:auto;
}
@keyframes translate { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(80px, 0px);}
30% { transform:  translate(100px, 15px);}
45% { transform:  translate(50px, 25px);} 
60% { transform:  translate(-50px, 15px);}
75% { transform:  translate(-10px, 8px);} 
85% { transform:  translate(-50px, 0px);} 
100%{ transform:  translate(0px, 15px);} 
} 
@-webkit-keyframes translate { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(80px, 0px);}
30% { transform:  translate(100px, 15px);}
45% { transform:  translate(50px, 25px);} 
60% { transform:  translate(-50px, 15px);}
75% { transform:  translate(-10px, 8px);} 
85% { transform:  translate(-50px, 0px);} 
100%{ transform:  translate(0px, 15px);} 
} 
#cloud2{
position:absolute;
z-index:1;
top:160px;
right:50px;
animation:translate2 60s; 
animation-iteration-count:infinite; 
-webkit-animation:translate2 60s; /* Safari & Chrome */
-webkit-animation-iteration-count:infinite; 
}
@keyframes translate2 { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(-50px, 0px);}
30% { transform:  translate(50px, 25px);}
45% { transform:  translate(-100px, 5px);} 
60% { transform:  translate(-50px, 8px);} 
75% { transform:  translate(-100px, 20px);} 
85% { transform:  translate(-50px, 30px);} 
100%{ transform:  translate(0px, 15px);} 
} 
@-webkit-keyframes translate2 { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(-50px, 0px);}
30% { transform:  translate(50px, 25px);}
45% { transform:  translate(-100px, 5px);} 
60% { transform:  translate(-50px, 8px);} 
75% { transform:  translate(-100px, 20px);} 
85% { transform:  translate(-50px, 30px);} 
100%{ transform:  translate(0px, 15px);}  
}
.slider{
width:100%;
margin-top:1.5em;
}
.slider li{
marign:0;
padding:0 10px;
}
.slider img{
width:400px;
height:auto;
border-radius:10px;
}
.slider li h2{
text-align:center;
margin:0 auto;
}
.slider i{color:#f44779;}
@media screen and (max-width: 640px) {

#main-visual span{
position:relative;
z-index:10;
display:block;
margin-top:80px;
text-align:center;
font-size:100%;
}
#main-visual span{margin-top:80px;}
#main-visual span img:nth-of-type(1){display:none;}
#cloud1 img{
width:100px;
height:auto;
}
#about #cloud1 img,
#about2 #cloud1 img,
#about3 #cloud1 img,
#access #cloud1 img,
#care #cloud1 img,
#info #cloud1 img,
#contact #cloud1 img
{
width:80px;
height:auto;
}
@keyframes translate { 
0%  { transform:  translate(0px, 10px); } 
15% { transform:  translate(40px, 0px);}
30% { transform:  translate(80px, 15px);}
45% { transform:  translate(40px, 25px);} 
60% { transform:  translate(-40px, 15px);}
75% { transform:  translate(-10px, 8px);} 
85% { transform:  translate(-40px, 0px);} 
100%{ transform:  translate(0px, 15px);} 
} 
.slider ul,.slider li{
marign:0;
padding:0 3px;
}
.slider img{
width:350px;
height:auto;
border-radius:0;
}
.slider li h2{
text-align:center;
margin:-0.5em auto 0;
font-size:80%;
line-height:1.7;
}
}

/* contents */
#contents_box{
margin:150px auto 3em;
}
#contents{
max-width:1200px;
margin:0 auto;
padding:0 30px;
}
@media screen and (max-width: 640px) {
#contents{
width:90%;
margin:1em auto 0;
padding:0;
}
#top #contents_box{
margin:1em auto 2em;
}
#about #contents_box,
#about2 #contents_box,
#about3 #contents_box,
#care #contents_box,
#info #contents_box,
#contact #contents_box
{margin:0 auto 0;}
#contents_box nav#pager{
display:none;
}
}

/* footer */
#footer_logo{
text-align:center;
padding:5em 0;
}
@media screen and (max-width: 640px) {#footer_logo{padding:2em 0;}}
@media screen and (max-width: 400px) {
#footer_logo img{
width:210px;
height:auto;
}
}
#q_info{
background:#56b29a;
text-align:center;
margin:0 auto;
padding:0 30px 0 30px;
}
#q_info dl{padding:2em 0 1em;}
#q_info dt{
color:#fff;
display:inline-block;
font-size:130%;
}
#q_info dt br{display:none;}
#q_info dd{color:#fff;}
#q_info dd span:nth-last-of-type(1){
font-size:80%;
font-weight:normal;
}
#q_info dd span a{
color:#fff;
font-size:120%;
line-height:2;
border:none;
display:inline-block;
background:#090;
padding:0.1em 1em;
margin:0.5em  0.5em 0.5em 0;
border-radius:20px;
}
#q_info dd span br:nth-of-type(2){display:none;}
#q_info dd span:nth-of-type(1) {font-size:110%;}
#q_info dd span:nth-of-type(2) {font-size:150%;}
#q_info dd span:nth-of-type(2) i{font-size:90%;}
#q_info dd span a:hover{color:#56b29a;background:#ffffc3;}
#wave{text-align:center;}
#co_info{
max-width:1020px;
margin:0 auto;
padding:10px 30px 10px 30px;
border-bottom:3px solid #fff;
}
#co_info dl{
font-size:90%;
padding-top:15px;
display:flex;
justify-content:space-between;
}
#co_info dt span{font-size:160%;}
#co_info dd ul{
display:flex;
justify-content:space-between;
text-align:left;
}
#co_info dd ul li{
margin-left:4em;
font-size:90%;
line-height:1.7;
}
#co_info dd span{
display:block;
font-size:130%;
}
@media screen and (max-width: 1000px) {
#co_info dl{justify-content:space-around;}
#co_info dt span{font-size:140%;}
#co_info dd ul li{
margin-left:3em;
font-size:80%;
}
}
@media screen and (max-width: 900px) {
#co_info dt span{font-size:120%;}
}
@media screen and (max-width: 820px) {
#co_info dl{
display:block;
justify-content:center;
}
#co_info dd ul li{margin-left:0;}
#co_info dt {margin-bottom:1em;}
#co_info dt br{display:none;}
#co_info dt span{
display:inline-block;
margin-left:1em;
}
}
@media screen and (max-width:740px) {
#co_info dt span{font-size:130%;}
#co_info dd ul{display:block;}
#co_info dd ul li{
text-align:center;
margin-left:0;
margin-bottom:1em;
font-size:90%;
}
}
#co_info div{
display:inline-block;
vertical-align:top;
margin:0 auto;
padding:15px 0 0 40px;
}
#co_info div p{font-size:75%;}
#co_info div li{display:inline-block;}
#co_info div li a{
display:block;
background:#fff;
padding:0.5em 0.8em;
border:none;
margin:8px 15px 0 0;
border-radius:8px;
}
#co_info div li a:nth-of-type(3){margin:8px 0 0 0;}
#co_info div li a:hover{
background:#ff8674;
color:#fff;
}
footer section:nth-of-type(2) p{
width:100%;
overflow:hidden;
}
footer section:nth-of-type(2) p img{
width:1190px;
height:auto;
position: relative;
left: 50%;
margin-top:10px;
margin-left: -595px; 
}
footer section:nth-of-type(2){
background: #9fdfff;
background: -webkit-linear-gradient(#9fdfff, #e9f7ff);
background:    -moz-linear-gradient(#9fdfff, #e9f7ff);
background:     -ms-linear-gradient(#9fdfff, #e9f7ff);
background:      -o-linear-gradient(#9fdfff, #e9f7ff);
background:         linear-gradient(#9fdfff, #e9f7ff);
}
#res{
background:#564a42;
color:#fff;
text-align:center;
padding:1em 0;
font-size:70%;
font-weight:normal;
}
footer nav{
position:relative;
max-width:1020px;
margin:15px auto 0;
padding:0 20px 10px 30px;
z-index:10;
}
footer nav > ul{
display:flex;
justify-content:space-between;
}

footer nav ul li{
vertical-align:top;
margin:0 0 10px 0;
line-height:2;
}
footer nav ul li a i,
footer nav ul li i{
color:#ff8674;
padding-right:0.2em;
}
footer nav ul li ul li{
display:block;
margin:0;
}
footer nav ul li:nth-of-type(n+3) ul li:nth-of-type(n+2) a,
footer nav ul li:nth-of-type(2) ul li:nth-of-type(3),
footer nav ul li:nth-of-type(2) ul li:nth-of-type(n+2){
font-size:80%;
}
footer nav ul li:nth-of-type(2) ul li:nth-of-type(n+2){
line-height:2.5;
}
#co_info p br{display:none;}
#go_top{
position:fixed;
right:50px;
bottom:50px;
z-index:9999;
}
#go_top a{border:none;}
#go_top img{
width:72px;
height:auto;
}
#co_info_box{position:relative;}
#cloud3 {
position:absolute;
z-index:1;
bottom:130px;
left:80px;
animation:translate 50s; 
animation-iteration-count:infinite; 
-webkit-animation:translate 50s; /* Safari & Chrome */
-webkit-animation-iteration-count:infinite; 
}
@keyframes translate { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(80px, 0px);}
30% { transform:  translate(100px, 15px);}
45% { transform:  translate(50px, 25px);} 
60% { transform:  translate(-50px, 15px);}
75% { transform:  translate(-10px, 8px);} 
85% { transform:  translate(-50px, 0px);} 
100%{ transform:  translate(0px, 15px);} 
} 
@-webkit-keyframes translate { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(80px, 0px);}
30% { transform:  translate(100px, 15px);}
45% { transform:  translate(50px, 25px);} 
60% { transform:  translate(-50px, 15px);}
75% { transform:  translate(-10px, 8px);} 
85% { transform:  translate(-50px, 0px);} 
100%{ transform:  translate(0px, 15px);} 
} 
#cloud3 img{
width:90px;
height:auto;
}
#cloud4{
position:absolute;
z-index:1;
bottom:180px;
right:50px;
animation:translate2 60s; 
animation-iteration-count:infinite; 
-webkit-animation:translate2 60s; /* Safari & Chrome */
-webkit-animation-iteration-count:infinite; 
}
@keyframes translate2 { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(-50px, 0px);}
30% { transform:  translate(50px, 25px);}
45% { transform:  translate(-50px, 5px);} 
60% { transform:  translate(-40px, 8px);} 
75% { transform:  translate(-40px, 20px);} 
85% { transform:  translate(-20px, 30px);} 
100%{ transform:  translate(0px, 15px);} 
} 
@-webkit-keyframes translate2 { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(-50px, 0px);}
30% { transform:  translate(50px, 25px);}
45% { transform:  translate(-50px, 5px);} 
60% { transform:  translate(-40px, 8px);} 
75% { transform:  translate(-40px, 20px);} 
85% { transform:  translate(-20px, 30px);} 
100%{ transform:  translate(0px, 15px);}  
}
#cloud4 img{
width:85px;
height:auto;
}
#co_info{
padding-bottom:1em;
}
@media screen and (max-width:1100px) {
footer nav ul li{
margin:0 0 10px 0;
}
@media screen and (max-width: 840px) {
#co_info div{padding:15px 0 0 3px;}
#co_info dd br:nth-of-type(1){display:inline;}
#co_info div li{font-size:90%;}
#co_info div li a{
margin:8px 10px 0 0;
padding:0.5em 0.9em;
}
#co_info div p{font-size:68%;}
footer nav ul li{margin-right:20px;}
}
@media screen and (max-width: 740px) {
footer nav ul{font-size:95%;}
footer nav ul li{margin-right:12px;}
}
@media screen and (max-width: 640px) {
#cloud3 {
bottom:200px;
left:80px;
animation:translate5 50s; 
animation-iteration-count:infinite; 
-webkit-animation:translate5 50s; /* Safari & Chrome */
-webkit-animation-iteration-count:infinite; 
}
@keyframes translate5 { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(20px, 0px);}
30% { transform:  translate(30px, 15px);}
45% { transform:  translate(30px, 35px);} 
60% { transform:  translate(0px, 15px);}
75% { transform:  translate(-40px, 8px);} 
85% { transform:  translate(-20px, 0px);} 
100%{ transform:  translate(0px, 15px);} 
} 
@-webkit-keyframes translate5 { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(20px, 0px);}
30% { transform:  translate(30px, 15px);}
45% { transform:  translate(30px, 35px);} 
60% { transform:  translate(0px, 15px);}
75% { transform:  translate(-40px, 8px);} 
85% { transform:  translate(-20px, 0px);} 
100%{ transform:  translate(0px, 15px);} 
} 
#cloud4{
bottom:400px;
right:50px;
}
#q_info dd{
width:100%;
margin:0 auto;
font-size:90%;
display:inline-block;
}
#q_info dt{font-size:95%;}
#q_info dt br{display:inline;}
#q_info dd span br:nth-of-type(2){display:inline;}
#co_info{padding:0.5% 0.5% 15px;}
#co_info dl{
display:block;
font-size:80%;
text-align:center;
}
#co_info div{
display:block;
text-align:center;
}
footer nav ul{text-align:center;}
footer nav > ul{display:block;}
footer nav ul li{display:block;}
#go_top a{display:none;}
}
@media screen and (max-width: 350px) {
#co_info dd br:nth-of-type(1),
#co_info dd br:nth-of-type(3){display:inline;}
#co_info p br{display:inline;}
#co_info div li{
display:block;
width:90%;
margin:0 auto;
}
footer section:nth-of-type(2) p img{
width:1190px;
height:auto;
position: relative;
left: 50%;
margin-top:10px;
margin-left: -675px; 
}
}