@charset "utf-8";
/* CSS Document */
#main{position:relative;}
#main img{
width:100%;
height:auto;
}
#main img:nth-of-type(2){display:none;}
#cloud1 img{
width:100px;
height:auto;
}
#cloud2 img{
width:85px;
height:auto;
}
@media screen and (max-width: 768px) {
#main-visual span img{
width:1500px;
margin-top:10px;
margin-left: -750px; 
}
}
@media screen and (max-width: 640px) {
#main img:nth-of-type(1){display:none;}
#main img:nth-of-type(2){display:inline;}
#main-visual span img{
width:1000px;
margin-top:10px;
margin-left: -480px; 
}
#cloud1{
position:absolute;
z-index:1;
top:15px;
left:20px;
}
#cloud1 img{
width:80px;
height:auto;
}
#cloud2{
top:220px;
right:30px;
}
#cloud2 img{
width:70px;
height:auto;
}
@keyframes translate { 
0%  { transform:  translate(0px, 15px); } 
15% { transform:  translate(40px, 0px);}
30% { transform:  translate(30px, 15px);}
45% { transform:  translate(20px, 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(40px, 0px);}
30% { transform:  translate(30px, 15px);}
45% { transform:  translate(20px, 25px);} 
60% { transform:  translate(-50px, 15px);}
75% { transform:  translate(-10px, 8px);} 
85% { transform:  translate(-50px, 0px);} 
100%{ transform:  translate(0px, 15px);} 
} 
}
#top_message{
width:100%;
max-width:650px;
display:block;
position:relative;
left: 50%;
margin:250px 0 0 -260px; 
padding:0;
}
#ukiha{
display:inline-block;
vertical-align:middle;
margin:-0.5em -3.5em 0 0;
font-family: 'Open Sans';
font-weight:600;
}
#top_copy{
position:relative;
font-size:220%;
display:inline-block;
vertical-align:middle;
line-height:1.2;
padding-left:2em;
padding-bottom:0.5em;
font-weight:500;
}
#top_copy span{color:#f44779;}
#top_copy span:nth-of-type(2){
border:1px solid #f44779;
width:5em;
height:5em;
display:block;
border-radius:50%;
position:absolute;
bottom:-0.8em;
left:0em;
}
#top_sub_copy{
margin:6em auto 2em;
width:80%;
max-width:950px;
line-height:2.8;
}
@media screen and (max-width: 768px) {
#top_message{
width:100%;
max-width:500px;
display:block;
margin:200px 0 0 -200px;
}
#top_copy{font-size:180%;}
#ukiha{margin:-0.5em -3.7em 0 0;font-size:75%;}
#top_sub_copy{
width:500px;
margin:5em auto;
}
}
@media screen and (max-width: 640px) {
#top_message{
text-align:center;
width:100%;
left:0;
right:0;
margin:80px 0 0 5%; 
}
#ukiha{
display:block;
padding:0 0 2em;
font-size:70%;
margin:0;
}
#ukiha span:nth-of-type(18){display:none;}
#top_copy{
font-size:150%;
display:inline-block;
vertical-align:middle;
line-height:2;
padding-left:0;
}
#top_copy span:nth-of-type(2){
width:4em;
height:4em;
display:block;
border-radius:50%;
position:absolute;
bottom:-0.5em;
left:-1.5em;
}
#top_sub_copy{
font-size:80%;
text-align:justify;
margin:5em auto 3em;
width:80%;
line-height:2.3;
}
}
#main p{
position:absolute;
z-index:20;
top:70px;
width:100%;
text-align:center;
color:#fff;
font-size:150%;
}
#main p img{
width:300px;
height:auto;
display:block;
margin:0 auto;
}

@media screen and (min-width: 1200px) {
#main p{
top:100px;
}
}
#recruit_info{
font-family: Rounded Mplus\ 1c,Mplus\ 1p,sans-serif;
font-weight: 400;
font-size:130%;
position:absolute;
right:3%;
top:60px;
text-align:center;
z-index:999;
background:#fff;
padding:0.5em;
border-radius:15px;
}

#recruit_info a{
display:block;
background:#00c457;
color:#fff;
border-radius:8px;
font-size:110%;
border:none;
font-weight:700;
padding:0.5em;
}

#recruit_info span{
display:block;
font-size:80%;
}

#recruit_info a:hover{
background:#30F;
}

@media screen and (max-width: 900px) {
}
@media screen and (max-width: 768px) {
#main p{display:none;}
#recruit_info{
font-size:120%;
position:relative;
right:0;
top:0;
border-radius:0;
}

}
#summary{margin-bottom:1em;}
#summary ul{
font-size:80%;
text-align:center;
display:block;
padding-top:2em;
display:flex;
flex-wrap: wrap;
justify-content:center;
}
#summary li{
display:block;
width:30%;
line-height:1.7;
margin:0 3% 2em 0;
}
#summary li img{
display:ininline-block;
width:100%;
height:auto;
margin:1em 0 0.5em;
}
#summary li a:nth-of-type(2){
border:none;
}
#summary li a:hover img{
opacity:0.7;
}
@media screen and (max-width: 768px){#summary ul{font-size:70%;}}
@media screen and (max-width: 640px){
#summary{margin-bottom:2em;}
#summary ul{
font-size:80%;
padding-top:1em;
display:block;
}
#summary li{
display:block;
width:100%;
margin-bottom:2em;
border-bottom:2px solid #bbb;
padding-bottom:2em;
}
#summary li img:nth-of-type(1){
width:70%;
display:block;
margin:0 auto 1em;
}
#summary li a img:nth-of-type(1){
display:inline-block;
margin-top:1em;
}
}
#recruit{
position:relative;
margin:3em 0 1em;
text-align:center;
}
#recruit dt a{
font-size:24px;
display:block;
margin-bottom:0.5em;
padding:8em 0 2em;
background:url(../img/kourin60.jpg);
background-size:cover;
border:none;
background-position:center center;
}
#recruit dt span{
display:inline-block;
padding:0.5em 1em;
background:#fff;
border-radius:10px;
}
#recruit dd:nth-of-type(2){
line-height:1.2;
position:absolute;
display:block;
color:#fff;
background:#f44779;
border-radius:50%;
width:5em;
height:5em;
padding-top:1.3em;
right:-1em;
top:-0.5em;
}
@media screen and (max-width:768px){
#recruit dt a{
padding:6em 0 2em;
}
}
@media screen and (max-width:640px){
#recruit{
margin:1em 0 1em;
}
#recruit dt a{
font-size:16px;
padding:10em 0 5em;
background:url(../img/kourin61.jpg);
background-size:cover;
background-position:center center;
}
#recruit dd{
font-size:90%;
text-align:left;
}
#recruit dd:nth-of-type(2){text-align:center;}
}
iframe{
display:block;
margin:1em auto 4em;
}
#information{
margin:2em auto;
}
#information h3{
text-align:center;
font-size:170%;
margin-bottom:1em;
}
#information ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;
}
#information li{
position:relative;
width:23%;
height:auto;
margin-bottom:2em;
}
#information li span:nth-of-type(1){
position: relative;
display:block;
width:100%;
padding-top:75%;
overflow:hidden;/
margin:0 auto;
background:#ddd;
}
#information li span:nth-of-type(1) img{
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform:translate(-50%, -50%);
object-fit:cover;
width:100%;
height:100%;
}
#information li span:nth-of-type(2){
display:block;
margin-top:0.5em;
font-size:70%;
color:#aaa;
font-weight:500;
}
#information li span:nth-of-type(3){
font-size:80%;
}
@media screen and (max-width:640px){
#information li{
width:48%;
}
}


#ug{
    text-align:center;
    padding-top:2em;
}

#ug div{
    margin-top:2em;
}

#ug h4{
    font-size:1.4rem;
    font-weight: 500;
}

#ug div{
    display: flex;
    justify-content: center;
    align-items: center;
}

#ug p{
    margin-right: 30px;
}

#ug p img{
    width:180px;
    height: auto;
}

#ug ul{
    width:65%;
    display:flex;
    flex-wrap:wrap;
}

#ug li{
    font-size:24px;
    margin:0.75em 0 0.75rem 2rem;
}

#ug li img{
    margin-right:10px;
    vertical-align:middle;
}

#ug li a{
    border:none;
    border-radius:5px;
}

#ug li span{
    font-size:50%;
    display:inline-block;
    margin-bottom:-0.1em;
    margin-right:0.2em;
}

@media screen and (max-width:640px){
    #ug h4{
        font-size:1.2rem;
    }

    #ug div{
        display: block;
        margin-top: 1rem;
    }

    #ug p{
        margin-right: 0;
        margin-bottom: 1rem;
    }

    #ug p img{
        width:140px;
    }

    #ug ul{
        width: 100%;
        display: block;
    }

    #ug li{
        font-size:20px;
        margin:0.5em 0 ;
    }
}