@charset "UTF-8";
@import url("html5reset-1.6.1.css");
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

/* ↓レイアウト↓ */

body{
    font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    background-color:#fcfcfc;
    color:#333;
    margin:10px;
    background-image:url(bg1.png);
    background-repeat:repeat-x;
    background-position:top;
    background-attachment:fixed;
} 

*{
    line-height:170%;
    font-family: 'Lato', sans-serif;
}

.menutop{
    max-width:1100px;
    margin:0 auto;
}

.colortop{
    width:200px;
    box-shadow:1px 1px 3px -1px #777;
    padding:2px;
    margin:5px;
    text-align:center;
    font-size:120%;
}

.page2 a:link{
    text-decoration:none;
    color:#000;
}

.page2 a:visited{
    text-decoration:none;
    color:#000;
}

.page2 a:hover{
    color:#666;
    text-decoration:underline #db7093;
}

.page2{
    display: flex;
    justify-content:flex-start;
    flex-wrap: wrap;
}

.color{
    width:300px;
    box-shadow:1px 1px 3px -1px #777;
    padding:2px;
    margin:5px;
    border-radius:3px;
}

.hex{
    margin:5px;
    font-size:90%;
    padding:5px;
}

.hex span{
    color:#fff;
}


.box{
    margin:5px;
    color:#000;
}

.page{
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
}


a:link{
    color:#2b6c8e;
    text-decoration: underline #2AD4FF;
}

a:visited{
    color:#111;
    text-decoration: underline #2AD4FF;
}

a:hover{
    color:#db7093;
}

h4 a:link{
    color:#ffffff;
    text-decoration:none;
    padding:4px;
    background-color:#79b4c9;
    box-shadow:1px 1px 3px -1px #777;
    border-radius:3px;
    line-height:200%;
}

h4 a:visited{
    color:#fff;
    text-decoration:none;
}

h4 a:hover{
    color:#ffd93c;
    text-decoration:underline;
}

h1{
    font-size:170%;
    text-shadow: 1px 2px 3px #888;
}

h3{
    font-size:100%;
    font-weight:lighter;
}

h4{
    font-size:100%;
    font-weight:lighter;
    margin:10px;
}

h5{
    font-size:80%;
    font-weight:lighter;
    margin:10px;
}

small{
    font-size:70%;
}

em{
    font-style:normal;
    background-color:#fdf48e;
}

strong{
    font-weight:bold;
}

hr{
    border-style:dashed;
    border-width:1px 0px 0px 0px;
    margin:10px 0px;
}

.pagetop{
    position: fixed;
    bottom: 10px;
    right: 14px;
}
 
.pagetop a{
    display: block;
    text-decoration: none;
}
 
.pagetop:hover{
    opacity: 0.7 ;
}

li{
    font-size:90%;
    margin:0px 10px;
}

@media screen and (max-width:700px) 
{

body{
    margin:20px 5px;
} 

.color{
    width:100%;
    margin:0px;
    padding:0px;
}

.menetop{
    margin:5px;
}

.colortop{
    width:97%;
    margin:5px;
    padding:0px;
}

.page{
    flex-direction:column;
    margin:5px;
}

.page2{
    flex-direction:column;
    margin:10px;
}

.box{
    margin:3px;
}

h1{
    font-size:140%;
}
h2{
    font-size:130%;
}

}