/*ALL*/

.shippori-mincho-regular {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
}  

.shippori-mincho-bold {
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-style: normal;
}

.shippori-mincho-extrabold {
    font-family: "Shippori Mincho", serif;
    font-weight: 800;
    font-style: normal;
}

*{
    box-sizing: border-box;
}

html{
    overflow-y: scroll;
    font-family: 'Shippori Mincho';
}

body{
    margin: 0;
    background-color: #333333;
    color: #F4F5F7;
}

/*2カラム*/

.wrapper{
    margin: 0 auto 0 auto;
    max-width: 960px;
    display: flex;
}

.menu{
    flex-basis: 25%;
    margin-right: 20px;
}

.menu img{
    max-width: 95%;
    height: auto;
    display: block;
}

.main{
    flex-basis: 70%;
    margin-top: 10px;
}

.nav li{
    list-style-type: none;
    font-size: 21px;
    margin-bottom: 2px;
}

.nav {
    padding-left: 8px;
    line-height: 2em;
}

.logo{
    margin-top: 20px;
}

/*LINK*/

a{
    text-decoration: none;
    font-weight: bold;
}

a:link{
    color: #adb1ff;
}

a:visited{
    color: #adb1ff;
}

a:hover{
    color: #775cff;
}

a:active{
    color: #775cff;
}

/*TEXT*/

p{
    line-height: 1.5;
}

h2{
    border-bottom: solid 1px #F4F5F7;
    padding-bottom: 3px;
}

h3{
    margin-bottom: 10px;
}

footer{
    margin:20px 0 10px 0;
}

/* index*/

.banner{
    margin-top: 40px;
}

.top{
    margin: 0 auto 0 auto;
    max-width: 1000px;
}

img.topimg{
    width: 100%;
    height: auto;
    margin-top: 20px;
}

iframe{
    width: 100%;
    height:100px;
}

/* home */
img.icon{
    height: 200px;
    border-radius: 40px;
}

/* gallery */
.thumbnails{
    display: grid;
    grid-template-columns: repeat(auto-fit,80px);
    gap: 16px;
    justify-content: center;
}

/*タブレット&スマホ*/
@media screen and (max-width:959px){
    .wrapper{
        flex-direction: column;
    }

    body{
        margin: 0 3% 0 3%;
    }

    .nav {
        display: flex;
        justify-content: space-around; 
        padding: 0; 
        margin: 0;
      }

    .nav a {
        text-decoration: none;
        padding-top: 20px;
        display: block;
      }

    img.logo{
        margin: auto;
        margin-top: 10px;
    }

}