@charset "utf-8";
/* CSS Document */
#main-visual{height:450px;}
#main-visual h2{
margin-top:100px;
}
#main-visual h2+img{margin-top:45px;}
#cloud1 img{
width:100px;
height:auto;
}
#cloud2 img{
width:85px;
height:auto;
}
#global-nav{position:relative;margin-top:0px;}
@media screen and (max-width: 640px) {
#global-nav{margin-top:-50px;}
#main-visual{height:330px;}
#main-visual h2+img{
width:1300px;
display:inline-block;
height:auto;
position: relative;
left: 50%;
margin-top:50px;
margin-left: -650px; 
}
#main-visual h2{
position:relative;
display:block;
font-size:130%;
margin-top:50px;
}
#sp_logo2{
position:relative;
display:block;
z-index:10;
margin:0.5em auto 0;
width:150px;
height:auto;
}
#cloud1{
pos ition:absolute;
z-index:1;
top:130px;
left:20px;
anim ation:none; 
}
#cloud1 img{
width:80px;
height:auto;
}
#cloud2{display:none;}
@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:720px;
display:block;
position:relative;
left: 52%;
margin:0 0 0 -360px; 
padding:0;
}
#ukiha{
display:inline-block;
vertical-align:middle;
padding-top:3em;
}
#top_copy{
position:relative;
font-size:260%;
display:inline-block;
vertical-align:middle;
font-weight:300;
line-height:1.2;
padding-left:1em;
padding-bottom:0.5em;
padding-top:0.5em;
z-index:10;
}
#top_copy span{
color: #92c400;
}
#top_copy span:nth-of-type(2){
width: 4em;
height: 4em;
display: block;
border-radius: 50%;
position: absolute;
bottom: -0.8em;
left: -0.5em;
border: 1px solid #92c400;
}
@media screen and (max-width: 900px) {
#top_message{
width:100%;
max-width:570px;
display:block;
margin:0 0 0 -285px;
 }
#top_copy{font-size:200%;}
#ukiha{padding-top:2em;font-size:85%;}
}
@media screen and (max-width: 640px) {
#top_message{
text-align:center;
width:100%;
left:0;
right:0;
margin:0; 
}
#top_copy{
font-size:160%;
display:inline-block;
vertical-align:middle;
font-weight:300;
line-height:1.2;
padding-left:0;
}
#top_copy span:nth-of-type(2){
width:3.5em;
height:3.5em;
display:block;
border-radius:50%;
position:absolute;
bottom:-0.6em;
left:-1.2em;
}
}
h3{
text-align:center;
font-size:90%;
vertical-align:middle;
}
h3 img{
vertical-align:middle;
margin:0 1em 5px;
}
#contents dl{
margin:3em auto;
}
#contents dl dt{
text-align:center;
font-size:170%;
margin-bottom:0.5em;
}
#contents dl dd{
text-align:center;
line-height:2;
}
#contents dl:nth-of-type(2) dt{
text-align:center;
margin-bottom:0.5em;
display:flex;
justify-content:center;
align-items:center;
}
#contents dl:nth-of-type(2) dt br:nth-of-type(1),
#contents dl:nth-of-type(2) dt br:nth-of-type(3){
display:none;
}

#contents dl dt span{
width:95px;
margin:0 0.5em;
}
#contents dl dt img{
width:100%;
height:auto;
}
#g_point{
display:flex;
justify-content:space-between;
text-align:center;
}
#g_point li{
margin:0 2%;
}
#g_point li span{
color:#0080ec;
font-size:110%;
}
#g_point li dd{
font-size:90%;
margin-bottom:0.5em;
}
#g_point li dl dt{
background:#0080ec;
color:#fff;
display:inline-block;
font-size:130%;
padding:0 1em;
border-radius:20px;
width:11em;
}
@media screen and (max-width:1000px) {
#g_point li dl dt{font-size:120%;}
#g_point li dd{font-size:80%;}
#g_point li span{font-size:100%;}
}
@media screen and (max-width:800px) {
#g_point li dl dt{
font-size:110%;
}
#g_point li dd{
font-size:75%;
}
}
@media screen and (max-width:800px) {
#gakudou_m{font-size:90%;}
#g_point{display:block;}
#g_point li dd{font-size:90%;}
#g_point li dl{margin-bottom:2em;}
#g_point li dl dt{margin:0.5em 0 1em;}
#g_point li:nth-of-type(1) dl dd:nth-of-type(2) br:nth-of-type(2){display:inline;}
#g_point li:nth-of-type(2) dl dd:nth-of-type(3) br{display:inline;}
}
#contents dl:nth-of-type(2) dd ul,
#point{
display:flex;
justify-content:center;
margin:2em auto 0;
}
#contents dl:nth-of-type(2) dd li,
#point li{
margin:0 3%;
width:100%;
line-height:2;
}
#contents dl:nth-of-type(2) dd span,
#point span{
display:block;
font-size:120%;
}
#contents dl:nth-of-type(2) dd li img,
#point li img{
width:100%;
height:auto;
margin-bottom:1em;
}
#contents dl:nth-of-type(2)+div{text-align:center;}
#contents dl:nth-of-type(2)+div p{
background:#fff;
display:inline-block;
margin-top:2em;
padding:1em 1.5em;
text-align:center;
font-size:140%;
border:1px solid #f24779;
border-radius:10px;
}
#contents dl:nth-of-type(2)+div p br{display:none;}
figure img{
width:20px;
height:auto;
vertical-align:top;
}
figure:nth-of-type(2) img{
width:45%;
height:auto;
margin-top:1em;
}
@media screen and (max-width:900px) {
#contents dl dt{font-size:150%;}
#contents dl:nth-of-type(2) dd li,
#point li{font-size:90%;}
#contents dl:nth-of-type(2)+div p{font-size:115%;}
#contents dl:nth-of-type(2)+div p br:nth-of-type(1){display:inline;}
figure:nth-of-type(2) img{
width:400px;
height:auto;
}
}
@media screen and (max-width: 640px) {
#contents dl dt{font-size:130%;}
#contents dl{margin:1em auto -1em;}
#contents dl:nth-of-type(2) dt{font-size:100%;}
#contents dl dd{text-align:justify;}
#contents dl dd br{display:none;}
#contents dl dt span{
width:70px;
margin:0 0.5em;
}
#contents dl:nth-of-type(2) dt br:nth-of-type(2){
display:none;
}
#contents dl:nth-of-type(2) dt br:nth-of-type(1),
#contents dl:nth-of-type(2) dt br:nth-of-type(3){
display:inline;
}
#contents dl:nth-of-type(2) dd ul,
#point{
flex-wrap: wrap;
justify-content:space-around;
}
#contents dl:nth-of-type(2) dd li,
#point li{
margin:0 0 2em;
width:40%;
font-size:80%;
text-align:center;
}
#contents dl:nth-of-type(2) dd li br,
#point li br{display:inline;}
#contents dl:nth-of-type(2)+div p br:nth-of-type(2){display:inline;}
figure:nth-of-type(2) img{
width:80%;
height:auto;
}
}
#top_img{
width:100%;
height:100vh;
overflow:hidden;
position:relative;
}
#top_img > span{
display:block;
width:100%;
height:100vh;
position: absolute;
top: 0;
left: 0;
background-position:center center;
background-repeat: no-repeat;
background-size: cover;
}
.s1{
background:url(../img/g1.jpg);
animation: f1 34s ease-out infinite;
animation-delay:0.5s;
}
.s2{
background:url(../img/g2.jpg);
animation: f2 34s ease-out infinite;
animation-delay:0.5s;
}
.s3{
background:url(../img/g21.jpg);
animation: f3 34s ease-out infinite;
animation-delay:0.5s;
}
.s4{
background:url(../img/g3.jpg);
animation: f4 34s ease-out infinite;
animation-delay:0.5s;
}
.s5{
background:url(../img/g4.jpg);
animation: f5 34s ease-out infinite;
animation-delay:0.5s;
}

.s6{
background:url(../img/g20.jpg);
animation: f6 34s ease-out infinite;
animation-delay:0.5s;
}

.s7{
background:url(../img/g1.jpg);
animation: f7 34s ease-out infinite;
animation-delay:0.5s;
}

@keyframes f1 {
0% { opacity: 1; }
8% { opacity: 1; }
16% { opacity: 0; }
24% { opacity: 0; }
32% { opacity: 0; }
40% { opacity: 0; }
48% { opacity: 0; }
56% { opacity: 0; }
64% { opacity: 0; }
72% { opacity: 0; }
80% { opacity: 0; }
88% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes f2 {
0% { opacity: 0; }
8% { opacity: 0; }
16% { opacity: 1; }
24% { opacity: 1; }
32% { opacity: 0; }
40% { opacity: 0; }
48% { opacity: 0; }
56% { opacity: 0; }
64% { opacity: 0; }
72% { opacity: 0; }
80% { opacity: 0; }
88% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes f3 {
0% { opacity: 0; }
8% { opacity: 0; }
16% { opacity: 0; }
24% { opacity: 0; }
32% { opacity: 1; }
40% { opacity: 1; }
48% { opacity: 0; }
56% { opacity: 0; }
64% { opacity: 0; }
72% { opacity: 0; }
80% { opacity: 0; }
88% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes f4 {
0% { opacity: 0; }
8% { opacity: 0; }
16% { opacity: 0; }
24% { opacity: 0; }
32% { opacity: 0; }
40% { opacity: 0; }
48% { opacity: 1; }
56% { opacity: 1; }
64% { opacity: 0; }
72% { opacity: 0; }
80% { opacity: 0; }
88% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes f5 {
0% { opacity: 0; }
8% { opacity: 0; }
16% { opacity: 0; }
24% { opacity: 0; }
32% { opacity: 0; }
40% { opacity: 0; }
48% { opacity: 0; }
56% { opacity: 0; }
64% { opacity: 1; }
72% { opacity: 1; }
80% { opacity: 0; }
88% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes f6 {
0% { opacity: 0; }
8% { opacity: 0; }
16% { opacity: 0; }
24% { opacity: 0; }
32% { opacity: 0; }
40% { opacity: 0; }
48% { opacity: 0; }
56% { opacity: 0; }
64% { opacity: 0; }
72% { opacity: 0; }
80% { opacity: 1; }
88% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes f7 {
0% { opacity: 1; }
8% { opacity: 0; }
16% { opacity: 0; }
24% { opacity: 0; }
32% { opacity: 0; }
40% { opacity: 0; }
48% { opacity: 0; }
56% { opacity: 0; }
64% { opacity: 0; }
72% { opacity: 0; }
80% { opacity: 0; }
88% { opacity: 0; }
100% { opacity: 1; }
}

#top_img p{
color:#fff;
position:absolute;
top:2.5em;
left:2.5em;
font-size:36px;
font-weight:500;
}
#top_img p span{
position:relative;
color:#f24779;
}
#top_img p span span{
border:2px solid #f24779;
border-radius:50%;
width:3.5em;
height:3.5em;
position:absolute;
top:-1.2em;
left:-1.3em;
opacity:0.4;
}
@media (max-width: 768px) {
#top_img p{
position:relative;
top:65vh;
left:0;
margin-top:3em;
font-size:30px;
text-align:center;
}
}
#gakudou_logo{
text-align:center;
font-size:120%;
}
#gakudou_logo img{
width:400px;
height:auto;
}
@media (max-width: 768px) {
#gakudou_logo{font-size:100%;}
#gakudou_logo img{width:300px;}
}
#gakudou{
display:flex;
justify-content:center;
text-align:center;
margin:2em auto 0;
max-width:1200px;
}
#gakudou dt img{
display:block;
width:100%;
height:auto;
margin-bottom:0.5em;
border-radius:10px;
}
#gakudou li{margin:0 2%;}
#gakudou dt{font-size:115%;}
#gakudou dd{font-size:80%;}
.dot{
margin:4em 0;
text-align:center;
}
.dot img{
width:150px;
height:auto;
}
#gakudou dt br{display:none;}

@media (max-width: 768px) {
#gakudou{width:90%;}
#gakudou li{margin:0 1%;}
#gakudou dt{font-size:90%;}
#gakudou dt br{display:inline;}
#gakudou dd{font-size:70%;}
#gakudou dd span{display:none;}
#gakudou dt img{border-radius:0;}
.dot{margin:3em 0;}
.dot img{width:120px;}
}