@charset "utf-8";

/*==========================================
 pc/tab
===========================================*/
.pc { display: block !important; }
.sp { display: none !important; }

.top {
    margin: 0 auto;
    }

.hyd h2 {
    color: #0D337B;
    text-align: center;
    font-size: 1.4em;
    } 

.hyd h3 {
    text-align: center;
    font-size: 1em;
    line-height: 200%;
    margin: 30px 0;
    } 

.hyd .dialog {
    font-size: 0.8em;
    color: #0D337B;
    margin: 30px 0;
    } 

.video{
width:100%;             
position: relative;}

.video iframe {
    width: 800px;
    height: 440px;
    margin: 0 auto;
    display: block;
}

.box {
    margin: 30px auto;
    width: 1000px;
    border: 1px solid #E6E6E6;
}

.box-blue {
    margin: 30px auto;
    width: 900px;
    border: 2px solid #00A0E9;
}

.box-blue .box-title-blue {
    font-size: 1.2em;
    background: #00A0E9;
    padding: 4px;
    text-align: center;
    color: #FFF;
    margin-bottom: 30px
}

.gray {
 background-color: #E9E9E9;
 border: none;
padding-bottom: 30px;
}

.box .box-title {
    font-size: 1.2em;
    background: #0D337B;
    padding: 4px;
    text-align: center;
    color: #FFF;
    margin-bottom: 30px
}
.box p {
    padding: 15px 20px;
    margin: 0;
}

.graph {
    margin: 30px auto;
    }

#menu{
  margin: 30px auto; 
}

#menu ul{
  width: 842px;
  margin: 2px auto; 
}

#menu li{ 
display: inline-block;
}

#menu li a{
display: inline-block;
background-color: #0D337B;
padding: 10px 3px;
text-decoration: none;
color: white;
width: 200px; 
margin: 2px 1px;
text-align: center;
}

_::-webkit-full-page-media, _:future, :root #menu li a {
     width: 199px; 
}



.but a{
display: inline-block;
background-color: #0D337B;
padding: 10px 3px;
text-decoration: none;
color: white;
width: 300px  !important;
margin: 2px 1px;
text-align: center;
}
#menu li a:hover{
background-color: #00A0E9;
}

.box-radius{
    width: 960px;
    margin: 50px auto;
    padding: 50px 0;
    background-color: white;
    border-bottom-right-radius: 70px;}

.box-radius .point{
    width: 60px;
    margin-top: -85px;
    margin-left: 450px;
    position: absolute;
}



@media screen and (max-width: 780px) {
/*==========================================
 smp
===========================================*/
.pc { display: none !important; }
.sp { display: block !important; }

.top {
    margin-top: 15%
    }    
    
 .video iframe {
    width: 100%;
    height: 200px;
    margin: 0 auto;
    display: block;
}
.box {
    width: 94%;
    margin-left: 3%;
    border: 1px solid #E6E6E6;
}

.box-blue {
    width: 90%;
    margin-left: 5%;
    border: 2px solid #00A0E9;
}
    
.graph {
    margin: 20px auto;
    width: 70%;
    }

#menu ul{
  width: 90%;
  margin-left: 5%;
    text-align: center;
}

#menu li{ 
display: inline-block;
}

#menu li a{
display: inline-block;
background-color: #0D337B;
padding: 10px 3px;
text-decoration: none;
color: white;
width: 130px;
margin: 4px 2px;
text-align: center;
}
    
.box-radius{
    width: 90%;
    margin-left: 5%;
    padding: 50px 0;
    background-color: white;
    border-bottom-right-radius: 50px;}

.box-radius .point{
    width: 15%;
    margin-top: -85px;
    margin-left: 35%;
    position: absolute;
}