@charset"UTF-8";
html{
     font-size:100%;
	 }
	 
body{
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size:1.3rem;
	background: transparent;
	 }

.kabe{
	margin-top:6%;
	margin-left:10%;
}

	  
/*リンク下線なし*/
.link {
  text-decoration: none;
}

/*フォントデコなし*/
a {
  text-decoration: none;
}

h1{
     font-family: 'Zen Maru Gothic', sans-serif;
     color: #5481b1 ;
  }

.mizuiro{
     font-family: 'Zen Maru Gothic', sans-serif;
     color: #1e90ff ;
      }

img {
  max-width:100%;
  height: atuo;
}

pre {
     position: absolute;
	background-color: white;
	padding-top:3%;
padding-bottom:3%;
padding-left:3%;
padding-right:3%;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
	font-size: 1rem;
  margin-top:1%;
  margin-bottom:1%;
  margin-right:1%;
  margin-left:1%;
}

body {
	background: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%, #FFFEFF 0%, #D7FFFE 100%, #dfe9f3 0%, white 100%);
	background-size: 1000% 1000%;
	-webkit-animation: gradient 15s ease infinite;
	        animation: gradient 15s ease infinite;
    }

@-webkit-keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
  }


.main_nav{                                     /* メニュー */
        display:flex;
		margin-top:5px;
		margin-left:-70px;
		font-family:'Zen Maru Gothic', sans-serif;
		color: #000000;
		font-size:1.2rem;
		font-weight: ;
		 background: transparent;
		}

ul{
   list-style:none;
   	margin-left:5%;

   }

li{
   margin-left:40px;
	}
.footer{ 
      width:100%; 
margin:0;                           /* footer*/

}

.potkuma:hover {
    position: relative;
    text-decoration: none;
}
.potkuma span {
    display: none;
    position: absolute;
}
.potkuma:hover span {
   border: none;
    display: block;
    width: 200px;     /*位置を調整する*/            
	top: -160px;
    left: 0px;
}

.cupkuma {
	width: 130px;
	height: auto;
}

.teausagi{
	width: 130px;
	height: auto;
}

.potusagi:hover {
    position: relative;
    text-decoration: none;
}
.potusagi span {
    display: none;
    position: absolute;
}
.potusagi:hover span {
   border: none;
    display: block;
    width: 200px;     /*位置を調整する*/            
	top: -180px;
    left: 20px;
}

.kuma:hover {
    position: relative;
    text-decoration: none;
}
.kuma span {
    display: none;
    position: absolute;
}
.kuma:hover span {
   border: none;
    display: block;
    width: 200px;     /*位置を調整する*/            
	top: -100px;
    left:200px;
}

.bluetyou:hover {
    position: relative;
    text-decoration: none;
}
.bluetyou span {
    display: none;
    position: absolute;
}
.bluetyou:hover span {
   border: none;
    display: block;
    width: 200px;     /*位置を調整する*/            
	top: -80px;
    left:180px;
}

.miketira:hover {
    position: relative;
    text-decoration: none;
}
.miketira span {
    display: none;
    position: absolute;
}
.miketira:hover span {
   border: none;
    display: block;
   width: 200px;     /*位置を調整する*/            
	top: -50px;
    left:300px;}

.tyatira:hover {
    position: relative;
    text-decoration: none;
}
.tyatira span {
    display: none;
    position: absolute;
}
.tyatira:hover span {
   border: none;
    display: block;
   width: 200px;     /*位置を調整する*/            
	top: -50px;
    left:220px;
	}


.list ul {
	position:relative;
	top:50px;
	left:-70px;
}

.list li{
	position:relative;
    list-style: none;
padding-bottom:3%;
   }
   
.tape {
           position: absolute;
           top: 0px;
           left: 0%;
           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);
           }
.tapesky {
           position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
            background-color: #b3ffff;
            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);
           }
.tapepink {
           position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
            background-color:rgba(255, 204, 247,.1) ;
            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);
           }

.tapeao {
           position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
            background-color:rgba(179, 217, 255,.3) ;
            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);
           }

.tapedotpink {
            position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
            background: #ffdbef;          /*カラーコード変更可*/
            background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
            background-position: 0 0, 10px 10px;/* 水玉の距離 */
            background-size: 20px 20px;/* 水玉の大きさ */
            color: #593869; 
            transform: rotate(-5deg);
           }
  
.tapedotao {
            position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
            background: #b3d9ff;          /*カラーコード変更可*/
            background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
            background-position: 0 0, 10px 10px;/* 水玉の距離 */
            background-size: 20px 20px;/* 水玉の大きさ */
            color: #593869; 
            transform: rotate(-5deg);
           }

.tapedotmizu {
            position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
            background: #afeeee;          /*カラーコード変更可*/
            background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0); /* 水玉の色 */
            background-position: 0 0, 10px 10px;/* 水玉の距離 */
            background-size: 20px 20px;/* 水玉の大きさ */
            color: #593869; 
            transform: rotate(-5deg);
}
          		   
.tapedotrave {
            position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
            background: #DBD0E4;
            background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
            background-position: 0 0, 10px 10px;
            background-size: 20px 20px;
            color: #593869; 
            transform: rotate(-5deg);
}

.tapedotsky {
            position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
            background: #ccffff;
            background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
            background-position: 0 0, 10px 10px;
            background-size: 20px 20px;
            color: #593869; 
            transform: rotate(-5deg);
}

.tapedotki {
            position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
            background: #ffffb3;　　　　　　/*　マステ色　*/
            background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
            background-position: 0 0, 10px 10px;
            background-size: 20px 20px;
            color: #593869; 
            transform: rotate(-5deg);
}


.tapesutogreen {
           position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
		    background: repeating-linear-gradient(-45deg, rgba(139,198,202,.3), rgba(139,198,202,.3) 10px, #fff 0, #fff 20px);
            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);
           }

.tapesutorave {
            position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
		    background: repeating-linear-gradient(-45deg, rgba(139,198,202,.3), rgba(139,198,202,.3) 10px, #fff 0, #fff 20px);
            background-color:rgba(245, 78, 171,.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);
           }

.tapesutosky {
           position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
		    background: repeating-linear-gradient(-45deg, rgba(139,198,202,.3), rgba(139,198,202,.3) 10px, #fff 0, #fff 20px);
            background-color:rgba(138,115,255,.1) ;
            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);
           }

.tapesutoki {
           position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
		    background: repeating-linear-gradient(-45deg, rgba(139,198,202,.3), rgba(139,198,202,.3) 10px, #fff 0, #fff 20px);
            background-color:rgba(255,255,115,.5) ;
            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);
           }

.tapesutomizu {
           position: absolute;
            top: 0px;
            left: 0%;
            padding: 4px 20px;
            color: #555555;              /*タイトル色*/
            font-weight: bold;
		    background: repeating-linear-gradient(-45deg, rgba(139,198,202,.3), rgba(139,198,202,.3) 10px, #fff 0, #fff 20px);
            background-color:#afeeee ;
            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);
           }

#pagetop{
    position:fixed;
   width:140px;
    height:auto;
  right:200px;
    bottom:50px;
    cursor:pointer;
    z-index: 10;     
}

.huusenn {
	width: 140px;
	height: auto;
    right:200px;
    bottom:50px;
}

.go{ cursor:url(img/go.cur), default; 
}

.tyou{ cursor:url(img/tyou.cur), default; 
}


.kihana64{ cursor:url(img/kihana64.cur), default; 
}
.sirohana64{ cursor:url(img/sirohana64.cur), default; 
}
.pinkhana64{ cursor:url(img/pinkhana64.cur), default; 
}

.momohana64{ cursor:url(img/momohana64.cur), default; 
}
.mizuhana64{ cursor:url(img/mizuhana64.cur), default; 
}
.akahana64{ cursor:url(img/akahana64.cur), default; 
}
.daihana64{ cursor:url(img/daihana64.cur), default; 
}


.box{
  position: relative;
  top: 0px;
  left: 0px;
width: fit-content;
hight:150px;
}

.ue{  position: absolute;
      top: 0px;
   left: 0px;
  	width: 71px;
	height: 63px;
    margin-right:10px;
	}

.sita{  position: absolute ;
   bottom:-10px;
   right:0px;
  	width: 63px;
	height: 55px;
	margin-left:10px;
}

.item-list{
 vertical-align:  middle; 
 padding:  30px;
}

.item{
   display: inline-block;      /* インラインブロック要素にする */
    height:  150px;             /* 高さ指定 */
    width: 150px;                 /* 幅指定 */
 }

/*    
        position: absolute;
       position: absolute;
       top:5%;
		left:5%;
padding-top:5%;
padding-bottom:5%;
padding-left:5%;
padding-right:5%;
		
		margin-top:5%;
      margin-bottom:5%;
     margin-right:5%;
      margin-left:5%;
*/ 

@media screen and (max-width: 767px) {
/* スクリーンサイズが767px以下の場合に適用 */
   
img {
  max-width: 100%;
  height: auto;
}   
   

#pagetop{
    position:fixed;
   width:120px;
    height:auto;
    right:50px;
    bottom:50px;
    cursor:pointer;
    z-index: 10;     
}

.kabe{
	margin-top:6%;
	margin-left:10%;
   width:90%;

}