#close-icon-charapos {
	mix-blend-mode: difference;
	position:absolute;
	width:30px;
	height:30px;
	right:40px;
	top:40px;
	z-index:800;
}
#close-icon-charapos a {
	position:absolute;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	text-indent:-99999px;
}
#close-icon {
	mix-blend-mode: difference;
	position:fixed;
	width:30px;
	height:30px;
	right:2%;
	top:2%;
	z-index:1100;
	display: none;
}
.close-icon,
.close-icon span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.close-icon {
  position: relative;
  width: 30px;
  height: 30px;
  top:0px;
  left:0px;
}
.close-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #FFFFFF;
}
.close-icon span:nth-of-type(1) {
  top: 4px;
}
.close-icon span:nth-of-type(2) {
  top: 13px;
}
.close-icon span:nth-of-type(3) {
  bottom: 5px;
}

.close-icon span:nth-of-type(1) {
  -webkit-transform: translateY(9px) rotate(-45deg);
  transform: translateY(9px) rotate(-45deg);
}
.close-icon span:nth-of-type(2) {
  left: 150%;
  opacity: 0;
  -webkit-animation: active-menu-bar02 .8s forwards;
  animation: active-menu-bar02 .8s forwards;
}
.close-icon span:nth-of-type(3) {
  -webkit-transform: translateY(-9px) rotate(45deg);
  transform: translateY(-9px) rotate(45deg);
}
#close-icon a {
	position:absolute;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	text-indent:-99999px;
}
/*------------------------------------------------------------------------------
								CHARAPOS
------------------------------------------------------------------------------*/
.center {
	text-align: center!important;
}
.margin-top-10 {
	margin-top: -30px;
}
#charapos {
	margin:0 auto;
	width:100%;
	box-sizing:border-box;
	padding:0 0 0;
	min-height:500px;
}
#charapos p.setsumei {
	margin-bottom: 20px;
}
#charapos p.setsumei span:after {
	content: "クリック";
}
#charapos .box {
	width: 100%;
	margin: 60px auto 0;
	position: relative;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
}
#charapos .box li {
	width: 32%;
	height: auto;
	float: left;
	margin: 0 0.6666% 1.3333%;
	position: relative;
}
#charapos h5 {
	color: #52413b;
	font-family: 'Noto Serif JP', serif;
	font-size: 24px;
	margin-top: 50px;
	margin-bottom: -40px;
	text-align: center;
}
#charapos .box li.margin-left {
	margin-left: 17%
}

#charapos .box li div.img-box {
	width: 100%;
	height: 0px;
	padding-top: 141%;
	position: relative;
}
#charapos .box li div.img-box .img-main {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0px;
	left: 0px;
}
#charapos .box li div.img-box .img-main img {
	width: 100%;
	height: 100%;
}
#charapos .box li a {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0px;
	left:0px;
	text-indent: -99999px;
}
#charapos .box li .name {
	width: 100%;
	height: 80px;
	margin: 10px 0 10px;
}
#charapos .box li .name p {
	text-align: center;
	font-family: 'Noto Sans JP', serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 20px;
	margin-bottom: 20px;
	color: #52413b;
}
#charapos .box li .name h3 {
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 40px;
	color: #52413b;
}
#charapos .box li .name h3.noname {
	line-height: 60px;
}
#charapos .box li.margin-left {
	margin-left: 17%!important;
}

#charapos .box li .name h3 ruby[data-ruby] {
  position:relative;
}
#charapos .box li .name h3 ruby[data-ruby]::before {
  content: attr(data-ruby);
  position:absolute;
  left:-2em;
  top:-2em;
  right:-2em;
  text-align:center;
  font-size:.5em;
}
#charapos .box li .name h3 rt {
  display:none;
}

#charapos .box li#charapos2-1 div.img-box {
	background: url("../../../charapos/img/silhouette2-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos3-1 div.img-box {
	background: url("../../../charapos/img/silhouette3-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos3-2 div.img-box {
	background: url("../../../charapos/img/silhouette3-2.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos4-1 div.img-box {
	background: url("../../../charapos/img/silhouette4-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos4-2 div.img-box {
	background: url("../../../charapos/img/silhouette4-2.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos5-1 div.img-box {
	background: url("../../../charapos/img/silhouette5-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos6-1 div.img-box {
	background: url("../../../charapos/img/silhouette6-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos6-2 div.img-box {
	background: url("../../../charapos/img/silhouette6-2.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos7-1 div.img-box {
	background: url("../../../charapos/img/silhouette7-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos7-2 div.img-box {
	background: url("../../../charapos/img/silhouette7-2.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos8-1 div.img-box {
	background: url("../../../charapos/img/silhouette8-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos9-1 div.img-box {
	background: url("../../../charapos/img/silhouette9-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos9-2 div.img-box {
	background: url("../../../charapos/img/silhouette9-2.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos9-3 div.img-box {
	background: url("../../../charapos/img/silhouette9-3.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos10-1 div.img-box {
	background: url("../../../charapos/img/silhouette10-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos10-2 div.img-box {
	background: url("../../../charapos/img/silhouette10-2.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos10-3 div.img-box {
	background: url("../../../charapos/img/silhouette10-3.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos11-1 div.img-box {
	background: url("../../../charapos/img/silhouette11-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos11-2 div.img-box {
	background: url("../../../charapos/img/silhouette11-2.jpg") no-repeat center center / cover;
}

#charapos .box li#charapos1-1 div.img-box .img-main {
	background: url("../../../charapos/img/1-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos2-1 div.img-box .img-main {
	background: url("../../../charapos/img/2-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos3-1 div.img-box .img-main {
	background: url("../../../charapos/img/3-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos3-2 div.img-box .img-main {
	background: url("../../../charapos/img/3-2.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos4-1 div.img-box .img-main {
	background: url("../../../charapos/img/4-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos4-2 div.img-box .img-main {
	background: url("../../../charapos/img/4-2.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos5-1 div.img-box .img-main {
	background: url("../../../charapos/img/5-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos6-1 div.img-box .img-main {
	background: url("../../../charapos/img/6-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos6-2 div.img-box .img-main {
	background: url("../../../charapos/img/6-2.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos7-1 div.img-box .img-main {
	background: url("../../../charapos/img/7-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos7-2 div.img-box .img-main {
	background: url("../../../charapos/img/7-2.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos8-1 div.img-box .img-main {
	background: url("../../../charapos/img/8-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos9-1 div.img-box .img-main {
	background: url("../../../charapos/img/9-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos9-2 div.img-box .img-main {
	background: url("../../../charapos/img/9-2.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos9-3 div.img-box .img-main {
	background: url("../../../charapos/img/9-3.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos10-1 div.img-box .img-main {
	background: url("../../../charapos/img/10-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos10-2 div.img-box .img-main {
	background: url("../../../charapos/img/10-2.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos10-3 div.img-box .img-main {
	background: url("../../../charapos/img/10-3.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos11-1 div.img-box .img-main {
	background: url("../../../charapos/img/11-1.jpg") no-repeat center center / cover;
}
#charapos .box li#charapos11-2 div.img-box .img-main {
	background: url("../../../charapos/img/11-2.jpg") no-repeat center center / cover;
}
#charapos-over {
	position: fixed;
	width: 100%;
	height: 100%;
	top:0px;
	left:0px;
	background: rgba(0,0,0,0.8);
	z-index:990;
	display: none;
}

#charapos-over ul {
	position: absolute;
	width: 90%;
	height: 90%;
	top:5%;
	left:5%;
}
#charapos-over ul li {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0px;
	left:0px;
}

#charapos .box li:nth-child(19) {
	margin:0 0 0 17.666%;
}

#charapos-over ul #charapos-over1-1 {
	background: url("../../../charapos/img/1-1.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over2-1 {
	background: url("../../../charapos/img/2-1.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over3-1 {
	background: url("../../../charapos/img/3-1.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over3-2 {
	background: url("../../../charapos/img/3-2.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over4-1 {
	background: url("../../../charapos/img/4-1.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over4-2 {
	background: url("../../../charapos/img/4-2.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over5-1 {
	background: url("../../../charapos/img/5-1.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over6-1 {
	background: url("../../../charapos/img/6-1.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over6-2 {
	background: url("../../../charapos/img/6-2.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over7-1 {
	background: url("../../../charapos/img/7-1.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over7-2 {
	background: url("../../../charapos/img/7-2.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over8-1 {
	background: url("../../../charapos/img/8-1.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over9-1 {
	background: url("../../../charapos/img/9-1.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over9-2 {
	background: url("../../../charapos/img/9-2.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over9-3 {
	background: url("../../../charapos/img/9-3.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over10-1 {
	background: url("../../../charapos/img/10-1.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over10-2 {
	background: url("../../../charapos/img/10-2.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over10-3 {
	background: url("../../../charapos/img/10-3.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over11-1 {
	background: url("../../../charapos/img/11-1.jpg") no-repeat center center / contain;
}
#charapos-over ul #charapos-over11-2 {
	background: url("../../../charapos/img/11-2.jpg") no-repeat center center / contain;
}
/*------------------------------------------------------------------------------
								SP
------------------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
/*------------------------------------------------------------------------------
								CHARAPOS
------------------------------------------------------------------------------*/
#charapos {
	margin:0 auto;
	width:100%;
	box-sizing:border-box;
	padding:0 0 0;
	min-height:500px;
}
#charapos h5 {
	font-size: 4vw;
}
#charapos p.setsumei span:after {
	content: "タップ";
}
#charapos .box {
	width: 100%;
	margin: 60px auto 0;
}
#charapos .box li {
	width: 48%;
	margin: 0 2% 4%;
}
#charapos .box li.margin-left {
	width: 48%;
	margin: 0 2% -10% 0px!important;
}
#charapos .box li.margin-left2 {
	width: 48%;
	margin: 0 2% -10% 0px!important;
}
#charapos .box li:nth-last-child(2n) {
	margin: 0 0% 0;
}
#charapos .box li .name {
	width: 100%;
	height: 135px;
}
#charapos .box li .name p {
	font-size: 22px;
	line-height: 30px;
	height: 60px;
	margin-bottom: 25px;
}
#charapos .box li .name h3 {
	font-size: 32px;
	line-height: 50px;
}
#charapos .box li .name h3.noname {
	line-height: 70px;
	height: 135px;
}

#charapos .box li:nth-child(19) {
	margin:0 0 0 0;
}
}


@media print{
.main ul li .photo-none {
	display:none;
}
}