@charset "utf-8";
body {
	margin: 0px;
    padding: 0px;
}


/*main*/
.main {
    //width: 90%; 
    //max-width: 1280px; 
    margin: auto;
    padding: 40px 0px 20px;
    background-color:#fff;
}

.button1 a{
    text-decoration: none;
    color: #666;
}
.button1 a:hover{
    text-decoration: none;
    color: white;
}
.button1 {
    display: block;
    background-color: white;
}
.button1:hover{
    display: block;
    background-color: dodgerblue;
    color: #cce5ff;
}

.button2 a{
    text-decoration: none;
    color: black;
}
.button2 a:hover{
    text-decoration: none;
    color: black;
}
.button2 {
    display: block;
    background-color: pink;
}
.button2:hover{
    display: block;
    background-color: #ffe5e5;
}

    
.button3 a{
    text-decoration: none;
    color: #666;
}
.button3 a:hover{
    text-decoration: none;
    color: white;
}
.button3 {
    display: block;
    background-color: white;
}
.button3:hover{
    display: block;
    background-color: #e5f2ff;
    color: #666666;
}


/*２つブロックのレスポンシブ*/
 .flexbox {
     display: flex;
     align-items: flex-start;
 }
 .box21 {
     width: 50%;
     margin: 10px;
 }
 .box22 {
     width: 50%;
     margin: 10px;
 }

 .box23 {
     width: 70%;
     margin: 0px;
 }
 .box24 {
     width: 30%;
     margin: 0px;
 }

 @media screen and (max-width: 767px) {
     .flexbox {
         display: block;
     }
     .flexbox .box21 {
         width: 100%;
         margin: 0 auto;
     }
     .flexbox .box22 {
         width: 100%;
         margin: 0 auto;
     }
     .flexbox .box23 {
         width: 100%;
         margin: 0 auto;
     }
     .flexbox .box24 {
         width: 100%;
         margin: 0 auto;
     }
 }


/*３つブロックのレスポンシブ*/
 .box31 {
     width: 30%;
     margin: auto;
 }
 @media screen and (max-width: 767px) {
     .flexbox .box31 {
         width: 100%;
         margin: 0 auto;
     }
 }


/*４つブロックのレスポンシブ*/
 .box41 {
     width: 20%;
     margin: auto;
 }
 @media screen and (max-width: 767px) {
     .flexbox .box41 {
         width: 100%;
         margin: 0 auto;
     }
 }

ul.list1{
}

ul.list1 li{
    padding: 5px;
  }
 


/*footer*/
.footer1{
display: flex;
}
.footer2{
font-size: 12px;
line-height: 180%;
width: 200px;
height: 200px;
}
.footer2 a{
color:#666;
text-decoration: none;
}
.footer2 a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 767px) {
.footer1{
display: block;
}
.footer2{
font-size: 100%;
line-height: 180%;
color:#666;
width: 90%;
height: auto;
}
.footer2 a{
color:#666;
text-decoration: none;
}
.footer2 a:hover{
text-decoration: underline;
}
}