@charset "utf-8";
/* ------ 共通設定 ------ */
body {
    background-color: #FaF3F0;
    color: #153462;
    font-size: 15px;
    line-height: 2;
    font-family: 'Noto Sans JP', sans-serif;
    margin-left: 50px;
    margin-top: 50px;
}

h1 {
    font-size: 30px;
    margin: 0  30px;
    text-align: center;
}



a {    
    text-decoration: none;
    color: #153462;
}

a:visited {
    color: #153462;
}

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

/* ------ ヘッダー部分 ------ */
header {
    width: 960px;
    height: 170px;
    margin: 0 auto;
}


/* ------ ナビ部分 ------ */
nav ul{
    width: 960px;
    margin: 0 auto;
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding-right:50px ;
}

nav li {
    margin: 0 20px;
    font-size: 19px;
    
}

nav li a {
    text-align: center;
    color: #153462;
}

nav li a:hover {
    padding-bottom: 8px;
    text-decoration: none;
}

#visual-area{
    width: 960px;
    margin: 10px auto;
}



/* ------ メイン部分 ------ */
#main {
    width: 960px;
    margin: 20px auto ;
    
}
   


#contents-area, #news-area {
    background-color: #DBDFEA;
    padding: 20px 40px;
    border-radius: 10px;
    box-sizing: border-box;
}

#contents-area {
    width: 960px;
    margin-bottom: 50px;
    margin-top: 50px;
    padding-bottom: 50px;
}



p.text1{
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    margin: 50px 0 20px 0;
    
}

img.animal{
    margin: 0 auto;
}



img.usg{
    float: right;
    
   
}

img.pnd{
    margin-left: 20px;
}


.example {
    position: relative;
    margin: 50px 0 -50px 0;
    }
  
  .example p {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-229%,56%);
    margin:0;
    padding:0;
    
    font-size: 25px;
    }
  
.example img {
    
    margin: 0 278px 0 200px;
    float: left;
    }

.example2 {
        margin: 100px 0 -30px 0;
    }

p.text2{
        transform: translate(69%,-185%);
        font-size: 25px;
    }
    

#news-area {
    width: 960px;
    font-size: small;
    margin-bottom: 50px;
}

#news-area li{
    font-size: 16px;
    margin-left: 10px;
    font-weight: bold;
}

#news-area img{
    margin: 0 378px;
    
}

p.news{
    margin-bottom: 10px;
}



/* ------ フッター部分 ------ */
footer {
    width: 960px;
    margin: 15px auto;
    text-align: center;
    background-color:#153462;
    color: #ffffff;
    padding: 20px 0;
}

footer small {
    font-size: 12px;
}



    

   /* ------ 作品紹介ページ ------ */
    #newworks-area{
        background-color: #DBDFEA;
        padding: 20px 40px;
        border-radius: 10px;
        box-sizing: border-box;
        width: 960px;
        margin-bottom: 50px;
        margin-top: 10px;
    }
    
    
    
    

    #newworks-area img{
        margin: 15px 10px;
        width: 350px;
        height: 280px;
    }

    .yokonarabi{
        display: flex;
        justify-content: center;
    }





  
        
      
        


        /*お店情報ページ*/

       th,td{
        font-size: 16px;
       }

      table{
        margin: 0 auto;
        border-collapse: separate;
       }

       th{
        background-color: #153462;
        color: #ffffff;
       }

       td{
        background-color: #DBDFEA;
       }

       #shop-area{
        margin: 10px;
       }

       /*ブログページ*/

       #blog{ background-color: #DBDFEA;
       padding: 20px 40px;
       border-radius: 10px;
       box-sizing: border-box;
       }



       #blog-area{
        display: flex;
        background-color: #DBDFEA;
        padding: 20px 40px;
        margin-top: 10px;
        border-radius: 10px;
        box-sizing: border-box;
       }
       #blog-area img{
        font-size: 50%;
        margin: 10px 40px 0 50px;
        
       }

       .blog-img{
        clear: both;
       }
       #blog-text{
        margin-top: 10px;
       }
       
       #blog-text a{
        text-decoration: underline;
       }

       img.neko{
        margin-left: 550px;
        margin-top: 20px;
       }


       /*お知らせページ*/

       .switchdsp input {
        display: none;
        }
        
        .switchdsp .dsp {
        padding: 0px 10px 0px 10px;
        height: 0;
        overflow: hidden;
        transition: 0.9s;
        opacity: 0;
        }
        
        .switchdsp input:checked ~ .dsp {
        padding: 0px 25px 0px 25px;
        height: auto;
        opacity: 1;
        }

        #news{
            font-size: 16px;
            background-color: #DBDFEA;
            padding: 20px 40px;
            margin-top: 10px;
            border-radius: 10px;
            box-sizing: border-box;

        }
        #news p{
            font-size: 14px;
            
        }
        
        img.pngn{
            
            margin: 30px 0 30px 360px;
        }

        .clicktxt:hover{
            text-decoration: underline;
        }