@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 #ff6f00;}
a:hover{color:#ff6f00;}
body{
    position:relative;
    font-family:"游ゴシック", YuGothic,  'Open Sans',"メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serifsans-serif, Verdana, Roboto, "Droid Sans";
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight:500;
    color:#555;
    background:url(../img/k1.jpg) repeat;
}
header{
    position:relative;
    z-index:999;
}
#main-visual{
    background: #81d5ff;
    background:linear-gradient(#81d5ff, #e9f7ff);
    width:100%;
    overflow:hidden;
    position:relative;
}
#main-visual span{
    display:block;
    text-align:center;
    font-size:110%;
    position:relative;
    z-index:50;
}
#main-visual span+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:60px;
    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:120px;
    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 ul,
.slider li{
    padding:0 0;
}
.slider img{
    width:810px;
    height:auto;
    border-radius:20px;
}
.slider li h2{
    text-align:center;
    margin:0 auto;
}
.slider i{color:#f44779;}
.sp{
    display: none;
}

@media screen and (max-width: 640px) {
    .sp{
        display: inline-block;
    }
    #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;}
    #cl oud1{
        position:absolute;
        z-index:1;
        top:150px;
        left:20px;
        animation: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{
        margin:0;
        padding:0 5px;
    }
    .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;
    }
    .slider{
        width:100%;
        margin-top:0;
    }
}

/* contents */

#contents_box{margin:130px auto 0;}
#contents{
    max-width:1020px;
    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 0;}
    #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;
    width:400px;
    margin:0 auto;
}
#footer_logo img{
    width:100%;
    height: auto;
}
@media screen and (max-width: 640px) {#footer_logo{padding:2em 0;}}
@media screen and (max-width: 480px) {
    #footer_logo{
        width:250px
    }
}
#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:#56b29a;
    background:#ffffc3;
    display:inline-block;
    font-size:120%;
    padding:0.5em 1em;
    border-radius:10px;
}
#q_info dt br{display:none;}
#q_info dd{
    color:#fff;
    padding-top:1em;
}
#q_info dd span:nth-last-of-type(1){
    font-size:80%;
    font-weight:normal;
}
#q_info dd span a{
    color:#ffffc3;
    font-size:120%;
    line-height:2;
}
#q_info dd span:nth-of-type(1) {font-size:120%;}
#q_info dd span a:hover{color:#ff6f00;}
#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:inline-block;
}

#co_info dt span{font-size:160%;}

#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:#ff6f00;
    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: #81d5ff;
    background: linear-gradient(#81d5ff, #e9f7ff);
}

#res{
    background:#564a42;
    color:#fff;
    text-align:center;
    padding:1em 0;
    font-size:70%;
    font-weight:normal;
}

#co_info dd br:nth-of-type(1),#co_info dd br:nth-of-type(3){
    display:none;
}

footer nav{
    position:relative;
    max-width:1020px;
    margin:15px auto 0;
    padding:0 20px 10px 30px;
    z-index:10;
}

footer nav ul li{
    display:inline-block;
    vertical-align:top;
    margin:0 35px 10px 0;
    line-height:2;
}

footer nav ul li a i,
footer nav ul li i{
    color:#ff6f00;
    padding-right:0.2em;
}

footer nav ul li ul li{
    display:block;
    margin:0;
}

footer nav ul li ul li a{
    font-size:80%;
}

footer nav ul li:nth-of-type(1) a{
    border:none;
}

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

footer nav li:nth-of-type(3) li:nth-of-type(4){
    padding-top:1em;
}

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

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

    footer nav ul li ul li a{
        font-size:73%;
    }

    #co_info div p{
        font-size:68%;
    }

    footer nav ul li{
        margin-right:20px;
    }
}

@media screen and (max-width: 740px) {
    footer nav ul li ul li a{
        font-size:75%;
    }
    footer nav ul{
        ont-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:90%;
        margin:0 auto;
        font-size:90%;
        display:inline-block;
        text-align:justify;
    }

    #q_info dd span:nth-last-of-type(1){padding-top:1em;}
    #q_info{padding:0.5% 0.5% 0;}
    #q_info dt{
        font-size:95%;
        padding:0.5em 0;
        width:90%;
    }

    #q_info dt br{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 li ul li a{font-size:85%;}
    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: -595px; 
    }
}