@charset"UTF-8";
         
/*共通--*/
		 
html{
     font-size:100%;
	 }
	
body{
     font-family: 'Cinzel Decorative', cursive,'Noto Serif JP', serif;
	 line-hight:1.7;
   text-decoration: none;
	 }    

.container3{
         display:grid;;		 
         grid-template-columns:250px 250px 250px;
		 gap:50px;
		 margin-left:20rem;
		 width:80%;
		 }


.container2{
         display:grid;;		 
         grid-template-columns:300px 340px;
		 gap:50px;
		 margin-left:20rem;
		 width:80%;
		 }

.item2-body {flot:left;
             width:400px;
             }

.item2-body{flot:right;
            width:400px;
			}

	 
/*　テープ　枠　3 */
.kakomi-tape3 {
         position:relative;
        padding: 35px 20px 15px;
         margin: 2.5em auto;
        width: 90%;
         color: #555555; 
        /* 文字色 */
         background-color: #e8ddbd;
           box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 2px #ccc;
        }

.title-tape3 {
           position: absolute;
            top: -15px;
            left: 30px;
            padding: 4px 20px;
            color: #555555;
              /*タイトル色*/
            font-weight: bold;
            background-color: rgba(255,255,255,.4);
            border-left: 2px dotted rgba(0,0,0,.1);
            border-right: 2px dotted rgba(0,0,0,.1);
            box-shadow: 0 0 5px rgba(0,0,0,0.2); 
            transform: rotate(-5deg);
           }

/*画像枠*/
.box17{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}

.sirizu{display:grid;
		 grid-template-columns:230px 230px 230px 230px ;
		 gap:5px;
		 margin-left:8rem;
		 width:90%;
        }

.sirizu2{
        justify-self:center;
		}



/*　テープ　枠　2 sirizu*/
.kakomi-tape2 {
 position: relative;
 width: ;
 margin: 2.5em auto;
 padding: 35px 30px 20px;
 color: #770000;/* 文字色 */
 background-color: #e8ddbd; /*枠背景色*/
 box-shadow: inset 0 0 40px rgba(204, 186, 136,1), 0 2px 2px #ccc;
}

.kakomi-tape2::before {
 display: block;
 position: absolute;
 content: "";
 width: 80px;
 height: 35px;
 left: 35%;
 top: -16px;
 background-color: rgba(204, 186, 136,0.3);/*テープ色*/
 box-shadow: 0 0 3px rgba(0,0,0,0.1);
 transform: rotate( -3deg ); /*テープ角度*/
}



/*カーソル*/	 
	   .tori1{ cursor:url(tori1.cur), default; }
	    .tori2{ cursor:url(tori2.cur), default; }
	    .tori3{ cursor:url(tori3.cur), default; }
	    .tori4{ cursor:url(tori4.cur), default; }
	    .kuma{ cursor:url(kuma.cur), default; }		 

/*各背景*/
.mail{
          position:relative;
          height:100vh;
	      width:100vw;
          background:url(image/maikbook.jpg)100% 100% no-repeat;
          background-size:cover;
	      }
	 	 
.baby{
        position:relative;
          height:100vh;
	      width:100vw;
          background:url(image/babybook.jpg)100% 100% no-repeat;
		   background-size:cover;
	     }
		 
.babygrey{
        position:relative;
          height:100vh;
	      width:100vw;
          background:url(image/babygrey.png)100% 100% no-repeat;
		   background-size:cover;
	     }


.child{
        position:relative;
          height:100vh;
	      width:100vw;
          background:url(image/childbook.jpg)50% 50% no-repeat;
		   background-size:cover;
	     }	 

.childgrey{
        position:relative;
          height:100vh;
	      width:100vw;
          background:url(image/childgrey.png)50% 50%no-repeat;
	       background-size:cover;
}	 

.book{
        position:relative;
          height:100vh;
	      width:100vw;
          background:url(image/book.jpg)50% 50% no-repeat;
		   background-size:cover;
	     }
.bookgrey{
        position:relative;
          height:100vh;
	      width:100vw;
          background:url(image/bookgre.png)50% 50% no-repeat;
		   background-size:cover;
	     }

	 
a {
   text-decoration: none;
   }	 

img {
     max-width:100%;
	 }


		  

		  
/*header--*/

.container{
         display:flex;		 
		 justify-content:space-between;
		 width:90%;
		 }

#logo{
	  margin-top:30px;
	  margin-left:20px;
	  }	  
	  
#ul{
      display:flex;
	  font-size:1rem;
	  font-color: rgba(0,206,209,1);
	  margin-top:60px;
	  list-style:none;
	  justify-content:right;
	   }

#main{
        position:absolute;
         width:100%;
         height:100%;
          top:-60px;
         left:120px;
		 margin:auto;
          display:center;
         }



 body, html {
            position: absolute;
            width: 100%;
            height: 100%;
            top:0;
            left:0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
          }

 #readme {
            width: 100vw;
            height: 100vh;
            position: relative;
              overflow: visible;
            }