body{


    background-color : white;
}

h3 {
    padding : 0.2em 0.2em 0.2em 0.5em;
}

h4 {
    background-color : #56b7e6;
    color : white;
    margin-top: 5px;
    padding: 0.1em 0.1em 0.1em 1.3em;
}

a {
    text-decoration: none;

}

.bgscolor{
    background-color: #008655;
    color : white;
}

.bgscolorx {
    background-color: #550086;
    color: white;
}

.bgscolorblue {
    background-color: #003a70;
    color: white;
}

.eachYMCAtop {
    background-color: #003a70;
    color: white;
    padding: 0.5em 0.5em 0.5em 1.5em;
    border-radius: 0.5em 0 0.5em 0;
}


/*==================================================*/

.cb{
  /* floatを解除 */
  clear: both;
}

.hr80{
    width : 80%;
    /* margin-left : 10%; */
}

.largebox {
    width : 100%;    
    display: inline-block;
    float: left;
    background-color : white;
}

.largebox  h5{
    color : #003a70;
    background-color: white;
    font-size: 1em;
    font-weight: bold;
    padding: 0;
    margin : 0;

}
.box p{
    font-size: 0.7em;
    padding: 0;
    margin : 0;
    
    background-color : white;

}

.largebox a{
    color : black;
    background-color : white;
    text-decoration :none;

}
.box{
    width : 100%;
    display: inline-block;
    float: left;
    background-color : white;
}

.boximage{
    display: inline-block;
    float: left;
    background-color : white;
    margin : 0 10px 0 10px;
    padding : 0 20px 0 20px;
    /* width : 40%; */
}

.boximage img{
    max-width : 270px; 
}


.images{
    width: 100%;
    padding : 20px 20px 20px 20px ;
    display: inline-block;
    float: center;

}

.largebox h5,
.consumersindex h5,
.compcenter h5 {
    color : #003a70;
    font-weight: bolder;
    font-size : 1.2em;
    margin-bottom: 1px;
    padding-left : 10px;
    border-left : 10px #003a70 solid; 
}

.largebox h6{
    color : #003a70;
    font-weight: bolder;
    margin-bottom: 1px;
}
/*==================================================*/

@media screen and (min-width : 651px) {
.boxtext {
    display: inline-block;
    float : left;

    max-width : 300px;
    margin : 0 0 0 20px;
}
}
@media screen and (max-width : 650px) {
    .boxtext {
    display: inline-block;
    float : left;
    width : 100%;
    margin : 0;
}
}


.consumersindex h5{
    font-size : 1em;
    font-weight: bolder;
}


.headerdiv {
    width : auto; 
    margin-right: 0px
}
@media screen and (min-width : 751px) {
    .headerdiv .spanp{
        font-size:1.5em; font-weight:bold;
    }
    .headerdiv .headerbr{
        display:none; 
    }
}
@media screen and (max-width : 750px) and (min-width : 611px) {
    .headerdiv .spanp{
        font-size:1.1em; font-weight:bold;
    }
    .headerdiv .headerbr{
        display:none; 
    }

}
@media screen and (max-width : 610px) {
    .headerdiv .spanp{
        font-size:1.1em; font-weight:bold;
    }
    .headerdiv .headerbr{
        display:block;
    }
}



/*==================================================*/


.tooltip1{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.tooltip1 p{
    margin:0;
    padding:0;
}
.description1 {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #000;
    width: 300px;
}
.description1:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 15px solid transparent;
    border-top: 15px solid #000;
    margin-left: -15px;
}
.tooltip1:hover .description1{
    display: inline-block;
    top: -70px;
    left: -30px;
}



.tooltip2{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.tooltip2 p{
    margin:0;
    padding:0;
}
.description2 {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #000;
    width: 400px;
}
.description2:before {
    content: "";
    position: absolute;
    top: 0%;
    right: 99%;
    border: 15px solid transparent;
    border-top: 15px solid #000;
    margin-left: -15px;
    transform: rotateZ(90deg);
}
.tooltip2:hover .description2{
    display: inline-block;
    top: 0px;
    left: 40px;
}


.batton_4_YMCA{ 
    margin: 0.2em;
    background-color: #00aa00;
    color: white;
    padding: 0.3em 0.3em 0.3em 0.3em;
    font-size: 1.5em;
    border-radius: 10px;
    text-align: center;
    width : 16em;
}

.batton_4_YMCA a {
    color: white;
    text-decoration-color: hotpink;
}