@charset "UTF-8";
/* ----------------------------------------------------------
/* index
---------------------------------------------------------- */
 /*メニューバー*/
 .hh{
    margin:0 0 0 0;
    padding:13px 0px 6px 0px;
    font-size: 27px;
    background: #c4d700;
    display:flex;flex-wrap:nowrap; /*横一列に*/
    text-align:center; align-items:center;}

header{width: 100%; height: 100px;}
/* footer{width: 100%; height: 40px; 
bottom: 0; text-align: center;
background-color:#c4d700; color:#ffffff;
}*/

a:link {color: #ffee7d; text-decoration: none;}/*現在リンク*/
a:visited {color: #ffffff; text-decoration: none;}
a:hover {color: #db8b29;/*カーソル乗った時*/
            position: relative;
            top: 1px;
            left: 1px;
            text-decoration: none;}

a.link:hover {position: relative;
      top: 0px;
      left: 0px;}
/*メニューバー終わり*/
 
body{/*中心を保つのとポインタを画像に変更する*/
    margin:auto;
    padding:auto;
    background-color: #f49c2d;
    cursor:url(../image/icon2.png) 30 30,auto;}


/* ----------------------------------------------------------
/* 3
---------------------------------------------------------- */
/*#rank
a{text-decoration: none;}
a:link { color:green; } /*未訪問リンクの色*/
/*a:hover { color:#f49c2d; } /*マウスを乗せた時の色*/
/*a:visited { color:orange; } /*訪問済みリンクの色*/
/*a:active { color:rgb(139, 204, 122); } /*クリックした時のリンクの色*/

p.small{
    line-height:90%;
    text-align:center;}


#character ul {
	width: 780px;
	display: table;
	}

#character ul li {
	width: 390px;
	text-align: center;
	display: table-cell;
	}

#character ul li .image {
	margin: 0 0 15px 0;
	}

@media (max-width: 768px){
#character ul {
	width: 80%;
	margin: auto;
	}

#character ul li {
	width: 50%;
	padding: 0 20px;
	}

#character ul li img {
	width: 100%;
	}
}

@media (max-width: 640px){
#character ul {
	width: 100%;
	}

#character ul li {
	padding: 0 10px;
	}
}



 .iziModal div a{
    position: fixed;
    margin: 20px 0 0 -50px;
  }

  .p-modal__ico-close {/*ここでmodal内クローズボタンを自分が準備した画像に変えています*/
    width: 20px;
    height: 20px;
    position: absolute;
    top: 1em;
    right: 1em;
    border: none;
    background: url(../image/close.svg) center center no-repeat;
    background-size: cover;
    transition: transform 0.5s;
    opacity: .5;
  }
  
  .p-modal__ico-close:hover {/*クローズボタンに魔渦が乗ったらくるっと回転する*/
    cursor: pointer;
    transform: rotate(180deg);
  }