@charset "utf-8";
/* CSS Document */


.ofCharacontainer {
	padding-top: 30px;
	padding-bottom: 400px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

.ofCharacontainer img {
	width: 100%;
}

/*header===================================================*/
.ofCharaheader {
	margin-bottom: 50px;	
}

/*navigation===================================================*/
nav.ofCharaNav {
	width: 100%;
	height: 140px;
	padding-top: 30px;
	box-sizing: border-box;
}
nav.ofCharaNav ul {
	overflow: hidden;
	width: calc(100% - 120px);
	width: -webkit-calc(100% - 120px);
	margin:0 auto;
	background: #fff;
	border-radius: 5px 5px 0 0;
}
nav.ofCharaNav ul li {
	float: left;
	/*width: calc(100% / 7);*/
	/*width: -webkit-calc(100% / 7);*/
	width:14.28%;
	height: 100px;
	position: relative;
	box-sizing: border-box;
}

nav.ofCharaNav ul li .boxBorderLeft{
	margin: 10px 0;
	height: 75px;
	border-left: dashed #dcdcdc 1px;
}
nav.ofCharaNav ul li:first-child .boxBorderLeft{
	border-left: none;
}
nav.ofCharaNav ul li .ofCharaNavA {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
/*------メニューicon-----*/
nav.ofCharaNav ul li .ofCharaNavimage {
	height: 43px;
}
nav.ofCharaNav ul li.top .ofCharaNavimage{
	background: url(../img/Mico1.png) no-repeat center center;
}
nav.ofCharaNav ul li.character .ofCharaNavimage{
	background: url(../img/Mico2.png) no-repeat center center;
}
nav.ofCharaNav ul li.manyDon .ofCharaNavimage{
	background: url(../img/Mico3.png) no-repeat center center;
}
nav.ofCharaNav ul li.atelier .ofCharaNavimage{
	background: url(../img/Mico4.png) no-repeat center center;
}
nav.ofCharaNav ul li.majica .ofCharaNavimage{
	background: url(../img/Mico5.png) no-repeat center center;
}
nav.ofCharaNav ul li.photo .ofCharaNavimage{
	background: url(../img/Mico6.png) no-repeat center center;
}
nav.ofCharaNav ul li.goods .ofCharaNavimage{
	background: url(../img/Mico7.png) no-repeat center center;
}
/*------メニューtext-----*/
nav.ofCharaNav ul li .ofCharaNavText {
	text-align: center;
	font-size: 11px;
	line-height: 1.27;
	padding: 5px 0 0 0;
}
/*nav.ofCharaNav ul li.top .ofCharaNavText{
	text-align: center;
	font-size: 11px;
	line-height: 1.27;
	padding: 13px 0 0 0;
}*/
/*------メニューborderBottom------*/
nav.ofCharaNav ul li.top {
	border-bottom: 5px solid #ff6581;
	border-radius: 5px 0 0 0;
}
nav.ofCharaNav ul li.character {
	border-bottom: 5px solid #7ecef4;
}
nav.ofCharaNav ul li.manyDon {
	border-bottom: 5px solid #f4d10e;
}
nav.ofCharaNav ul li.atelier {
	border-bottom: 5px solid #77d8d8;
}
nav.ofCharaNav ul li.mov {
	border-bottom: 5px solid #f19149;
}
nav.ofCharaNav ul li.majica {
	border-bottom: 5px solid #f0a5ad;
}
nav.ofCharaNav ul li.photo {
	border-bottom: 5px solid #b7d66b;
}
nav.ofCharaNav ul li.goods {
	border-bottom: 5px solid #f5ccdb;
	border-radius: 0 5px 0 0;
}

/*------メニューhover------*/
nav.ofCharaNav ul li.top:hover {
	background-color:#ffe7ed ;
}
nav.ofCharaNav ul li.character:hover {
	background-color:#eaf8ff ;
}
nav.ofCharaNav ul li.manyDon:hover {
	background-color:#fdf8da ;
}
nav.ofCharaNav ul li.atelier:hover {
	background-color:#edffff ;
}
nav.ofCharaNav ul li.mov:hover {
	background-color:#fff7f1 ;
}
nav.ofCharaNav ul li.majica:hover {
	background-color:#ffedef ;
}
nav.ofCharaNav ul li.photo:hover {
	background-color:#f1ffd0 ;
}
nav.ofCharaNav ul li.goods:hover {
	background-color:#fff6f9 ;
}

/*中ページメインビジュアル*/
.meinVisual {
	border:5px solid #7ecef4;
	border-radius: 20px;
	box-sizing: border-box;
	margin: 20px 60px 0 60px;
	background: #fff;
	overflow: hidden;
}

/*中ページナビゲーション*/
ul.ofPlofMenu {
	margin: 0 auto 50px auto;
}
ul.ofPlofMenu li{
	
}
/*TOPページメインビジュアル*/
.breadcrumbsArea,.ofCharacontainer {
	background: url(../img/backImage.jpg) repeat;
}

/*NEW！*/
nav.ofCharaNav ul li.new:after {
	content: "";
	width: 40px;
	height: 30px;
	background: url(../img/newIcon.png) no-repeat center center / contain;
	position: absolute;
	top: 5px;
	right: 5%;
}


@media screen and (min-width:1379px){
nav.ofCharaNav ul {
	overflow: hidden;
	width: calc(100% - 240px);
	width: -webkit-calc(100% - 240px);
	margin:0 auto;
}
.meinVisual {
	margin: 40px 120px 0 120px;
}
nav.ofCharaNav ul li.new:after {
	width: 50px;
	height: 40px;

}
}
@media screen and (min-width:1068px){
}
@media screen and (max-width:767px){

/*header===================================================*/
.ofCharaheader {
	margin-bottom: 30px;
}
.meinVisual {
	margin:30px 25px 0 25px;
}

/*メニュー===================================================*/
nav.ofCharaNav {
	height: 240px;
	padding-top: 0;
}
nav.ofCharaNav ul{
	margin-top:0; 
	width: calc(100%);
	width: -webkit-calc(100%);
	height: 240px;
	border-radius: 0;
}
	nav.ofCharaNav ul li {
	float: left;
	/*width: calc(100% / 3);*/
	/*width: -webkit-calc(100% / 3);*/
	width:33.33%;
	height: 80px;
	background: #fff;
	position: relative;
	box-sizing: border-box;
}
nav.ofCharaNav ul li .boxBorderLeft{
	margin: 10px 0;
	height: 55px;
	border-left: dashed #dcdcdc 1px;
}
nav.ofCharaNav ul li:first-child .boxBorderLeft,nav.ofCharaNav ul li.character .boxBorderLeft,nav.ofCharaNav ul li.majica .boxBorderLeft{
	border-left: none;
}
nav.ofCharaNav ul li.top, nav.ofCharaNav ul li.goods{
	border-radius: 0;
}
/*------メニューicon------*/
nav.ofCharaNav ul li .ofCharaNavimage {
	height: 23px;
}
	nav.ofCharaNav ul li.top .ofCharaNavimage,nav.ofCharaNav ul li.character .ofCharaNavimage,nav.ofCharaNav ul li.atelier .ofCharaNavimage,
nav.ofCharaNav ul li.manyDon .ofCharaNavimage,nav.ofCharaNav ul li.mov .ofCharaNavimage,nav.ofCharaNav ul li.majica .ofCharaNavimage,nav.ofCharaNav ul li.photo .ofCharaNavimage,nav.ofCharaNav ul li.goods .ofCharaNavimage{
	background-size: contain;
}	
/*------nav TOP------*/
nav.ofCharaNav ul li.top {
	width: 100%;	
}
/*中ページメニュー===================================================*/
ul.ofPlofMenu {
	margin: 0 auto 30px auto;
}
}
@media screen and (max-width:480px){

.meinVisual {
	margin:30px 10px 0 10px;
}
nav.ofCharaNav ul li.new:after {
	width: 30px;
	height: 20px;

}
}