/*シリーズコンテンツ用　CSS*************************************************************************/	

@media screen and (min-width: 800px){
	
/*------------------------------------------------------------ 
    マジハロポータル「マジハロシリーズ」CSS（PC）
 ------------------------------------------------------------*/
 
/*コンテンツ内サイズ*************************************************************************/
#contents{ width:100%;}
.inner{ width:970px; margin:0 auto;}

/*コンテンツタイトル*************************************************************************/	
#title{width:100%;}
#title img{ height:50px; float:left;}
#title p{
	width:966px;
	display:block;
	height:50px;
	font-size:24px;
	line-height:56px;
	font-weight:bold;
	padding:0;
	margin:0 auto;
	color:rgba(255,255,255,0.9);
	text-align:left;
	margin-top:100px;
	background-color:#f776c1;
	background-image: url(../img/bar/title_bar_bg.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
}

/*各説明の背景*************************************************************************/		
#bg_sub{width:98%; margin:0% auto 0% auto ; border:solid 4px #FFFFFF; display: flex; flex-wrap: wrap; justify-content:space-around;}

/*分類タイトル*************************************************************************/
#sub_title{width:700px;}
#sub_title p{width:735px; border-bottom:4px #f776c1 solid; color:#f776c1; font-weight:bold; font-size:22px; margin-left:230px;}


/*左サイドメニュー*************************************************************************/		
ul#sub_menu{ float:left; width:200px; margin-left:5px; border-top:1px #999 solid;}
ul#sub_menu li a{ display:block;padding:2px 0; border-bottom:1px #999 solid;color:#f776c1; font-weight:bold; background-image:url(../img/mh/linkmark_on.png); background-position:center right; background-repeat:no-repeat;}
ul#sub_menu li div{height:40px; line-height:40px; border-left:10px #f776c1 solid;text-align:center;}

ul#sub_menu li a:hover{ display:block;border:none;color:#FFF; font-weight:bold; text-decoration: none; background-color: #f776c1; background-image:url(../img/mh/linkmark_off.png); background-position:center right; background-repeat:no-repeat;}

/*右メイン*************************************************************************/	
#main{ float:left;margin:30px 0 0 20px;width:735px;}


/*各製品タイトル　ロゴ*************************************************************************/
.box_text{width:40%; height:auto; padding-left: 20px; display: flex; align-items: center;}
.series_title{ border-bottom:0px solid #ccc; padding-bottom:5px;display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
	text-align: center;}
.series_title .logo{ width:160px; height:auto;}
.series_title .logo img{ width:100%;}
.series_title .name{ height:auto;color:#FFA018;font-weight:bold; font-size:22px; line-height: 24px; margin-top:0px; }
.series_title .epoch{font-weight:nomal; font-size:14px; }
/*.series_title:after{content: "";display:block;clear:both;}*/

/*紹介テキスト*************************************************************************/
.chach{color:#FFA018;font-size:14px;font-weight:bold; margin:30px 0 10px;}
.mainText{width:500px;float:left;font-size:12px; line-height:160%; margin-bottom:15px;}

/*商品写真*************************************************************************/
.photo{width:40%; height:auto;  margin:20px 0 0 10px; padding-right: 10px; }
.photo img {width:240px;}

/*リンク*************************************************************************/
.link_title{ clear:both;color:#f776c1;font-weight:bold;border-bottom:1px #ccc solid; margin-bottom:15px;}
ul.link{width:calc(100% - 20px); font-size:13px; margin-bottom:20px; padding-bottom:30px; padding-left: 65px; border-bottom:1px solid #ccc; float:left; }
ul.link li a{width:240px; float:left; margin-right:5px;line-height:40px;border:1px #ccc solid;background-image:url(../img/mh/linkmark_off.png); background-position:center right 5px; background-repeat:no-repeat; color:#666;}
ul.link li img{ float:left;padding:9px 0 2px 8px;}
ul.link li div{ float:left;padding:3px 0 0 8px;}
ul.link li a:hover{ color:#FFF;background-color: #f776c1;background-image:url(../img/mh/linkmark_on.png); background-position:center right 5px; background-repeat:no-repeat;}
ul.link:after{content: "";display:block;clear:both;}

}

@media screen and (max-width: 799px){

/*------------------------------------------------------------ 
    マジハロポータル「マジハロシリーズ」CSS（SP）
 ------------------------------------------------------------*/
.inner{ width:100%; margin:0;}

/*コンテンツタイトル*************************************************************************/	
#title{width:100%;}
#title img{ height:50px; float:left;}
#title p{
	width:86%;
	display:block;
	height:50px;
	font-size:24px;
	line-height:56px;
	font-weight:bold;
	padding:0 14% 0 0;
	margin:0 auto;
	color:rgba(255,255,255,0.9);
	text-align: center;
	background-color:#f776c1;
	background-image: url(../img/bar/title_bar_bg.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/*各説明の背景*************************************************************************/		
#bg_sub{width:98%; margin:4% 0 6% 0; border:solid 4px #FFFFFF; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; background-color: rgba(255,255,255,1.00); border-radius: 6px;}

/*分類タイトル*************************************************************************/
#sub_title{width:100%;}
#sub_title p {width:100%; font-size:20px; padding-top:6px; text-align:center;border-bottom:3px #FFF solid;color:#f776c1;font-weight:bold; background-color:#FFF;}


/*左サイドメニュー*************************************************************************/		
ul#sub_menu{ float:none; width:104%;  margin:0 0 0 -2%;  border:0; background-color:#f776c1; padding:1px 0 2px 0;}
ul#sub_menu li a{width:49%; margin:0.5%; float:left; display:block;padding:0; color:#f776c1; font-weight:bold; background-color:#FFF; background-image:url(../img/mh/linkmark_on.png); background-position:center right 3px; background-repeat:no-repeat;}
ul#sub_menu li div{height:34px; line-height:34px; margin-left:2px #f776c1 solid;text-align:center; font-size:14px;}

ul#sub_menu li a:hover{display:block;border:none;color:#FFF; font-weight:bold; text-decoration: none; background-color: #f776c1; background-image:url(../img/mh/linkmark_off.png); background-position:center right 3px; background-repeat:no-repeat;}
ul#sub_menu:after{content: "";display:block;clear:both;}

/*右メイン*************************************************************************/	
#main{ clear:both;float:none;margin:0;width:100%;}


/*各製品タイトル　ロゴ*************************************************************************/
.box_text{width: 50%; max-width:250px; height:auto;}
.series_title{ border-bottom:0px solid #ccc; padding-bottom:5px;display: flex;
	padding-top: 10px;
    flex-wrap: wrap;
    justify-content: space-evenly;
	text-align: center;}
.series_title .logo{ width:160px; height:auto;}
.series_title .logo img{ width:100%;}
.series_title .name{ height:auto;color:#FFA018;font-weight:bold; font-size:22px; line-height: 24px; margin-top:0px; }
.series_title .epoch{font-weight:nomal; font-size:14px; }

/*紹介テキスト*************************************************************************/
.chach{color:#FFA018;font-size:14px;font-weight:bold; margin:30px 0 10px;}
.mainText{width:500px;float:left;font-size:12px; line-height:160%; margin-bottom:15px;}

/*商品写真*************************************************************************/
.photo{width:40%; height:auto;  margin:20px 0 0 10px; padding-right: 10px; }
.photo img {width:100%; max-width:240px;}

/*リンク*************************************************************************/
.link_title{ clear:both;color:#f776c1;font-weight:bold;text-align:center; background-color:#FFF;}
ul.link{width: 100%; font-size:13px; padding-bottom:20px; background-color:#FFF;  padding:10px 0;}
ul.link li a{width:96%; float:left; margin:0 auto 0 2%;line-height:40px;border-bottom:1px #ccc solid;background-image:url(../img/mh/linkmark_off.png); background-position:center right 5px; background-repeat:no-repeat; color:#666; border-top:1px #ccc solid; border-bottom:1px #ccc solid;}
ul.link li img{ float:left;padding:9px 0 2px 8px;}
ul.link li div{ float:left;padding:3px 0 0 8px;}
ul.link li a:hover{ color:#FFF;background-color: #f776c1;background-image:url(../img/mh/linkmark_on.png); background-position:center right 5px; background-repeat:no-repeat;}
ul.link:after{content: "";display:block;clear:both;}

}

@media screen and (max-width: 559px){
.series_title .name{ height:auto;color:#FFA018;font-weight:bold; font-size:4.4vw; line-height: 4.6vw; margin-top:0px; }
.series_title .epoch{font-weight:nomal; font-size:3.0vw; }
}

/*////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////  共通レイアウト ///////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////*/

/*バックグラウンド★アニメーション*/
body {
  background-image: url('../img/index/bg/star1.png'), url('../img/index/bg/star3.png'), url('../img/index/bg/star2.png');
  -webkit-animation: star 10s linear infinite;/*chrome&safari*/
  -moz-animation: star 10s linear infinite;/*firefox*/
  -ms-animation: star 10s linear infinite;/*ie*/
  animation: star 10s linear infinite;
}
/*パンくずリスト*********************************/
#pan_inner{
	display:block;
	width:970px;
  font-size:12px;
  color:#666;
  margin:5px auto;
  text-align:left;
}
#pan_inner a{
	text-decoration:underline;
}
#pan_inner span{
	color:#FFCC00;
}
#footer_img{
	width:970px;
	height:100px;
	clear: both;
	margin: 0 auto;
}
@keyframes star {
 0% {background-position: 0 0, 0 0, 0 0;}
 100% {background-position: 200px 200px, 160px 160px, 180px 180px;}
}
/*chrome&safari*/
@-webkit-keyframes star {
 0% {background-position: 0 0, 0 0, 0 0;}
 100% {background-position: 200px 200px, 160px 160px, 180px 180px;}
}
/*firefox*/
@-moz-keyframes star {
 0% {background-position: 0 0, 0 0, 0 0;}
 100% {background-position: 200px 200px, 160px 160px, 180px 180px;}
}
/*ie*/
@-ms-keyframes star {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 200px 200px, 160px 160px, 180px 180px;}
}
/*//////////////////////////////////////// マジハロシリーズ用 ///////////////////////////////////////*/

/*ページカラー*/
body {background-color:#f776c1;}
#base {background-color:#ffffff;}
@media screen and (min-width: 800px) {
	#base { width:100%; margin:0 auto; background:rgba(255,255,255,1.0);}
	/*#bg_sub { background:rgba(255,255,255,1.0);}*/
}
@media screen and (max-width: 799px) {
	#base { width:96%; margin:0 auto; background:rgba(255,255,255,0.0);}
	/*#bg_sub { background:rgba(255,255,255,0.7);}*/
}

@media screen and (min-width: 800px) {
#footer_area{border-top:3px solid #f776c1;}
#footer_img{
	background-image: url(../img/footer/footer_img_series.png);
	background-repeat: no-repeat;
	background-position: right top;	
}	
}
@media screen and (max-width: 799px) {
#footer_img{ width:100%; height:auto;}
}
.title {
	color:rgba(255,255,255,0.9);
	text-align:left;
	vertical-align:bottom;
	font-weight:bold;
	padding:10px 0 10px 0;
	background-image:url(../img/bar/title_bar_bg.png);
	background-color:#f776c1;
	background-repeat: no-repeat;
	background-position: center center;
	background-size:cover;
}

/*横幅変更*/
body {background-color:#f776c1;}
@media screen and (min-width: 800px) {
	header { width:100%; margin:0 auto;}
	#title { width:100%; margin:0 auto;}
	#sub_title { width:100%; margin:0 auto;}
	#base { width:100%; margin:0 auto;}
	footer { width:100%; margin:0 auto;}
}
@media screen and (max-width: 799px) {
	header { width:104%; margin:0 0 0 -2%;}
	#title { width:104%; margin:0 0 0 -2%;}
	#sub_title { width:104%; margin:0 0 0 -2%;}
	#base { width:96%; margin:0 auto;}
	footer { width:104%; margin:0 0 0 -2%;}
}



/*/////////Tablet Layout: max-799px. Inherits styles from: Mobile Layout. /////////*/

@media screen and (max-width: 799px) {
	
/*パンくずリスト*********************************/
#pan_inner{ display:none;}

/*各項目タイトル*********************************/
.title {
	position:relative;
	width:98%;
	height:30px;
	margin:0% 0% 2% 0%;
	padding-left:2%;
	text-align:left;
	font-size:26px;
	line-height:32px;
}
}

/*/////////Desktop Layout: min-801px.  Inherits styles from: Mobile Layout and Tablet Layout./////////*/

@media screen and (min-width: 800px) {
	
/*パンくずリスト*********************************/
#pan_inner{
	display:block;
	width:970px;
  font-size:12px;
  color:#666;
  margin:5px auto;
  text-align:left;
}
#pan_inner a{
	text-decoration:underline;
}
#pan_inner span{
	color:#FFCC00;
}

/*各項目タイトル*********************************/
.title {
	position:relative;
	width:914px;
	height:36px;
	margin:100px auto 0 auto;
	padding-left:52px;
	font-size:30px;
	text-align:left;
	line-height:38px;
}

}