@charset "utf-8";

/*------------------------------
サイト名：月刊DIGITAL FACTORY
作成日：2013.04.01
修正日：2013.04.01
ガイドライン：Ver.01
------------------------------*/


/* ------------------------------------
 * 共通設定・デフォルト値の再定義
 * ------------------------------------ */

@media screen and (min-width: 959px) {
body {
	background-image: url(/ximg/gekkan/web/photo/bg.png);
}
}

#body-wrapper {

	clear: both;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 960px;
	color: #fff;
	background: #1a1a1a;
	text-align: center;
	font:14px/1.6 Helvetica, ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",'メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS P Gothic', Droid Sans Japanese, sans-serif;
/*	font:14px/1.6 Helvetica, ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Droid Sans Japanese, sans-serif;*/
	overflow-x: hidden;
	-webkit-box-shadow: 0 0px 12px #000000;
	-moz-box-shadow: 0 0px 12px #000000;
	box-shadow: 0 0px 12px #000000;

}


/*
body {
	top: 0 ;
	bottom: 0 ;
	left: 0 ;
	right: 0 ;
	background: #494949; /* Old browsers */
/*	background: -moz-linear-gradient(top,  #494949 0%, #0e0e0e 480px); /* FF3.6+ */
/*	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#494949), color-stop(480px,#0e0e0e)); /* Chrome,Safari4+ */
/*	background: -webkit-linear-gradient(top,  #494949 0%,#0e0e0e 480px); /* Chrome10+,Safari5.1+ */
/*	background: -o-linear-gradient(top,  #494949 0%,#0e0e0e 480px); /* Opera 11.10+ */
/*	background: -ms-linear-gradient(top,  #494949 0%,#0e0e0e 480px); /* IE10+ */
/*	background: linear-gradient(to bottom,  #494949 0%,#0e0e0e 480px); /* W3C */
/*	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
/*}


/* Clearfix */
.clearfix:after {
    content: ""; 
    display: block; 
    height: 0; 
    clear: both;
    visibility: hidden;
}
nav#global ul:after {
    content: ""; 
    display: block; 
    height: 0; 
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
    min-height: 1%;
}

/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}
/* End hide from IE-Mac */


/* ------------------------------------
 * TEXT LINK
 * ------------------------------------ */
 
a {
	cursor: pointer;
	outline: none;
}

a img {
	border: 0;
}

a:link,
a:visited {
	color: #777;
	text-decoration: none;
}


/* ------------------------------------
 * HEADER
 * ------------------------------------ */
@media screen and (min-width: 960px) {

header {
	position: relative;
	zoom: 1;
	padding:10px;
}

header:after {
    content: ""; 
    display: block; 
    height: 0; 
    clear: both;
    visibility: hidden;
}
header h1 {
	float:left;
}

header h1 a {
	width:272px;
	height:46px;
	background: url(/ximg/gekkan/web/photo/logo.png) no-repeat;
	background-size:272px 46px;
	text-indent:-9999px;
	display:block;
}
header .dropdown-menu {
	float:right;
}
header .dropdown-menu span {
	width:142px;
	height:52px;
	background: url(/ximg/gekkan/web/photo/menu.png) no-repeat;
	background-size:142px 52px;
	text-indent:-9999px;
	display:block;
}

}

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

header {
	position: relative;
	zoom: 1;
	padding:10px;
}

header:after {
    content: ""; 
    display: block; 
    height: 0; 
    clear: both;
    visibility: hidden;
}
header h1 {
	float:left;
}

header h1 a {
	width:136px;
	height:23px;
	background: url(/ximg/gekkan/web/photo/logo.png) no-repeat;
	background-size:136px 23px;
	text-indent:-9999px;
	display:block;
}
header .dropdown-menu {
	float:right;
}
header .dropdown-menu span {
	width:71px;
	height:26px;
	background: url(/ximg/gekkan/web/photo/menu.png) no-repeat;
	background-size:71px 26px;
	text-indent:-9999px;
	display:block;
}

}

/* =========================================================
	dropdown main
========================================================= */

.dropdown-wrapper 
{
    margin: 0;


}

.dropdown-wrapper:after
{
    clear: both;
    content: "";
    display: table;
}

/* =========================================================
	dropdown style
========================================================= */

.dropdown-style 
{
    position: relative;
    margin: 0;
    padding: 0;
    cursor: pointer;
    outline: none;
    font-weight: bold;
    color: #fff;

}

	.dropdown-style:after 
	{
	    content: "";
	    width: 0;
	    height: 0;
	    position: absolute;
	    right: 5px;
	}

	.dropdown-style .dropdown 
	{
	 position: absolute;
	    top: 110%;
	    right: 0;
	    background: white;
	    border-radius: inherit;
	    border: 1px solid #aaa;
	    box-shadow: 0 0 5px rgba(0,0,0,0.1);
	    font-weight: normal;
	    -webkit-transition: all 0.2s ease-in;
	    -moz-transition: all 0.2s ease-in;
	    -ms-transition: all 0.2s ease-in;
	    -o-transition: all 0.2s ease-in;
	    transition: all 0.2s ease-in;
	    list-style: none;
	    opacity: 0;
	    pointer-events: none;
	z-index:1000;
	}

		.dropdown-style .dropdown:after 
		{
		    content: "";
		    width: 0;
		    height: 0;
		    position: absolute;
		    bottom: 100%;
		    right: 0;
		}

		.dropdown-style .dropdown:before 
		{
		    content: "";
		    width: 0;
		    height: 0;
		    position: absolute;
		    bottom: 100%;
		    right: 0;
		}

			.dropdown-style .dropdown li a {
			    display: block;
			    padding: 10px 5px 10px 5px;
			    text-decoration: none;
			    width: 123px;
			    color: #000;
			    font-size: 12px;
			    border-bottom: 1px solid #ccc;
			    -webkit-transition: all 0.3s ease-out;
			    -moz-transition: all 0.3s ease-out;
			    -ms-transition: all 0.3s ease-out;
			    -o-transition: all 0.3s ease-out;
			    transition: all 0.3s ease-out;
			}

			.dropdown-style .dropdown li i 
			{
			    float: right;
			    color: inherit;
			    
			    /* sweb 後で調整 */
			    line-height: 20px;
			}

/* Hover */

.dropdown-style .dropdown li:hover a { background: #eee; }

/* Active */

.dropdown-style.active .dropdown { opacity: 1; pointer-events: auto; }

/* No CSS3 support */

.no-opacity       .dropdown-style .dropdown,
.no-pointerevents .dropdown-style .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .dropdown-style.active .dropdown,
.no-pointerevents .dropdown-style.active .dropdown {
    display: block;
}

nav#global ul {
	width:100%;
	-webkit-box-shadow: 0 0px 12px #000000;
	-moz-box-shadow: 0 0px 12px #000000;
	box-shadow: 0 0px 12px #000000;

}
nav#global ul li {
	width:25%;
	float:left;
}
nav#global ul li a {
	width:100%;
	display:block;
}
nav#global ul li a img {
	width:100%;
}

/* ------------------------------------
 * CONTENTS
 * ------------------------------------ */
h2 {
	background: #000;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000));
	background-image: -webkit-linear-gradient(top, #333, #000);
	background-image: -moz-linear-gradient(top, #333, #000);
	background-image: -ms-linear-gradient(top, #333, #000);
	background-image: -o-linear-gradient(top, #333, #000);
	background-image: linear-gradient(top, #333, #000);
	text-align:center;
	font-weight: bold;
	padding:10px 5px;
	margin-top:2px;
}
h3 {
	position: relative;
	padding:10px;
	z-index: 1;
	background: url(/ximg/gekkan/web/photo/bg_blk.gif) repeat left top;
	text-align:center;
	color:#fff;
}
h4 {
	background-color:#eee;
	padding:5px 10px;
}
article {
	padding-bottom:5px;
	clear: both;
}

section {
	padding:10px;
	clear: both;
}
p {
	/*padding:10px;*/
	padding-top:5px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
}

p.left {
	padding:10px;
	text-align: left;
}

p.leftp {
	padding:5px;
	text-align: left;
}

p.right {
	padding:10px;
    	text-align: right;
}

/* BUTTON */

a.btn,
form input.btn,
a.back {
	padding: 10px;
	border-radius: 0.4em;
	line-height: 1.2;
	text-align: center;
}

a.btn,
a.back {
	display: block;
}

form input.btn {
	width: 100%;
}

a.btn,
form input.btn {
	margin: 10px 0 5px;
	border: solid 1px #c00;
	color: #fff;
	background: #c00;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#c00));
	background-image: -webkit-linear-gradient(top, #f00, #c00);
	background-image: -moz-linear-gradient(top, #f00, #c00);
	background-image: -ms-linear-gradient(top, #f00, #c00);
	background-image: -o-linear-gradient(top, #f00, #c00);
	background-image: linear-gradient(top, #f00, #c00);
	text-shadow: 0 -1px 1px #c00;
}

form li:first-child input.btn,
a.back {
	border: solid 1px #ccc;
	color: #777;
	background: #eee;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(95%,#d9d9d9), to(#afafaf));
	background-image: -webkit-linear-gradient(top, #fff, #d9d9d9 95%, #afafaf);
	background-image: -moz-linear-gradient(top, #fff, #d9d9d9 95%, #afafaf);
	background-image: -ms-linear-gradient(top, #fff, #d9d9d9 95%, #afafaf);
	background-image: -o-linear-gradient(top, #fff, #d9d9d9 95%, #afafaf);
	background-image: linear-gradient(top, #fff, #d9d9d9 95%, #afafaf);
	text-shadow: 0 1px 1px #fff;
}

a.back {
	margin: 20px 0 0;
}

form ul {
	zoom: 1;
}

form ul:after {
    content: ""; 
    display: block; 
    height: 0; 
    clear: both;
    visibility: hidden;
}

form li {
	display: inline;
	float: right;
	width: 49%;
}

form li:first-child {
	float: left;
}

form input {
	font-size: 100%;
}

form li input {
	margin: 0;
}

/* ------------------------------------
 * BUTTONS
 * ------------------------------------ */

a.more {
	margin-top: 4px;
	padding: 0.5em 0;
	border-radius: 0.4em;
	display: block;
	background-position: right center;
	background-repeat: no-repeat;
	text-align: center;
	font-weight: bold;
	color:#fff;
}

a.arrowGray {
	background-image: url(/ximg/gekkan/web/photo/arrowMoreGray.png);
	background-color: #333;
}

a.arrowWhite {
	color: #fff;
	background-image: url(/ximg/gekkan/web/photo/arrowMoreWhite.png);
	background-color: #333;
}

.controlgroup {
	margin: 0 10px 10px;
	border-radius: 0.4em;
	background: #000;
	zoom: 1;
}

.controlgroup:after {
    content: ""; 
    display: block; 
    height: 0; 
    clear: both;
    visibility: hidden;
}

.controlgroup li {
	display: inline;
	float: left;
	width: 33%;
}

.controlgroup li a {
	padding: 0.2em 0;
	display: block;
	color: #fff;
	background: url(/ximg/gekkan/web/photo/arrowListWhite.png) right center no-repeat;
	text-align: center;
}

.controlgroup li:nth-child(2) a {
	border-right: solid 1px #fff;
	border-left: solid 1px #fff;
}

/* ------------------------------------
 * FOOTER
 * ------------------------------------ */

footer {
	clear: both;
}

footer small {
	padding: 12px 0;
	display: block;
	width: 100%;
	height: 22px;
	line-height: 22px;
	vertical-align: middle;
	font-size: smaller;
}

/* ------------------------------------
 * HR
 * ------------------------------------ */

hr {
	border:none;
	border-top:solid 2px #777;
	height:2px;
	color:#777;
	margin:10px 0px 0px 0px;
}

/* ------------------------------------
 * btn2
 * ------------------------------------ */

a.btn2 {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

a.btn2 {
	padding: 10px;
	border-radius: 0.4em;
	line-height: 1.2;
	text-align: center;
	display: inline-block;
	width: 60%;
	box-sizing: border-box;
}

a.btn2 {
/*	margin-top: 10px;
	margin-bottom: 5px; */
	position: relative;
/*	margin-left: -25%;*/
/*	left: 20%; */
	border: solid 1px #c00;
	color: #fff;
	background: #c00;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#c00));
	background-image: -webkit-linear-gradient(top, #f00, #c00);
	background-image: -moz-linear-gradient(top, #f00, #c00);
	background-image: -ms-linear-gradient(top, #f00, #c00);
	background-image: -o-linear-gradient(top, #f00, #c00);
	background-image: linear-gradient(top, #f00, #c00);
	text-shadow: 0 -1px 1px #c00;
}

/* ------------------------------------
 * btn3
 * ------------------------------------ */

a.btn3 {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-weight:normal;
    font-size:14px;
    vertical-align:baseline;
    background:transparent;
    color: #000;
}

/* ------------------------------------
 * btn4 メルマガ
 * ------------------------------------ */

li.mail {
	display:inline;
	margin:0px 10px 0px 10px;
}

a.btn4 {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

a.btn4 {
	display: inline-block;
	padding: 10px;
	border-radius: 0.4em;
	line-height: 1.2;
	text-align: center;
	width: 25%;
	box-sizing: border-box;
}

a.btn4 {
	border: solid 1px #c00;
	color: #fff;
	background: #c00;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#c00));
	background-image: -webkit-linear-gradient(top, #f00, #c00);
	background-image: -moz-linear-gradient(top, #f00, #c00);
	background-image: -ms-linear-gradient(top, #f00, #c00);
	background-image: -o-linear-gradient(top, #f00, #c00);
	background-image: linear-gradient(top, #f00, #c00);
	text-shadow: 0 -1px 1px #c00;
}


/* ------------------------------------
 * btn5
 * ------------------------------------ */

a.btn5 {
	padding: 10px;
	border-radius: 0.4em;
	line-height: 1.2;
	text-align: center;
}

a.btn5 {
	display: block;
}

/*
a.btn5 {
	width: 100%;
}
*/

a.btn5 {
	margin: 10px 0 5px;
	border: solid 1px #00c;
	color: #fff;
	background: #00c;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#00c));
	background-image: -webkit-linear-gradient(top, #00f, #00c);
	background-image: -moz-linear-gradient(top, #00f, #00c);
	background-image: -ms-linear-gradient(top, #00f, #00c);
	background-image: -o-linear-gradient(top, #00f, #00c);
	background-image: linear-gradient(top, #00f, #00c);
	text-shadow: 0 -1px 1px #00c;
}

/* ------------------------------------
 * btn_blue
 * ------------------------------------ */

a.btn_b {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

a.btn_b {
	padding: 10px;
	border-radius: 0.4em;
	line-height: 1.2;
	text-align: center;
	display: block;
}

a.btn_b {
	margin: 10px 0 5px;
	border: solid 1px #00a;
	color: #fff;
	background: #00a;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#00e), to(#00a));
	background-image: -webkit-linear-gradient(top, #00e, #00a);
	background-image: -moz-linear-gradient(top, #00e, #00a);
	background-image: -ms-linear-gradient(top, #00e, #00a);
	background-image: -o-linear-gradient(top, #00e, #00a);
	background-image: linear-gradient(top, #00e, #00a);
	text-shadow: 0 -1px 1px #00a;
}

/* ------------------------------------
 * btn_green
 * ------------------------------------ */

a.btn_g {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

a.btn_g {
	padding: 10px;
	border-radius: 0.4em;
	line-height: 1.2;
	text-align: center;
	display: block;
}

a.btn_g {
	margin: 10px 0 5px;
	border: solid 1px #040;
	color: #fff;
	background: #040;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#080), to(#040));
	background-image: -webkit-linear-gradient(top, #080, #040);
	background-image: -moz-linear-gradient(top, #080, #040);
	background-image: -ms-linear-gradient(top, #0800, #040);
	background-image: -o-linear-gradient(top, #080, #040);
	background-image: linear-gradient(top, #080, #040);
	text-shadow: 0 -1px 1px #040;
}

/* ------------------------------------
 * btn_orange
 * ------------------------------------ */

a.btn_o {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

a.btn_o {
	padding: 10px;
	border-radius: 0.4em;
	line-height: 1.2;
	text-align: center;
	display: block;
}

a.btn_o {
	margin: 10px 0 5px;
	border: solid 1px #f60;
	color: #fff;
	background: #f60;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f90), to(#f60));
	background-image: -webkit-linear-gradient(top, #f90, #f60);
	background-image: -moz-linear-gradient(top, #f90, #f60);
	background-image: -ms-linear-gradient(top, #f90, #f60);
	background-image: -o-linear-gradient(top, #f90, #f60);
	background-image: linear-gradient(top, #f90, #f60);
	text-shadow: 0 -1px 1px #f60;
}
/* ------------------------------------
 * error
 * ------------------------------------ */

.error {
    font-weight: bold;
    color: #ff0000;
    background: #000000;
}
.error * {
    font-weight: bold;
}



/*
点滅
*/
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
	-moz-animation:blink 1.5s ease-in-out infinite alternate;
	animation:blink 1.5s ease-in-out infinite alternate;
	}

	@-webkit-keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}
	@-moz-keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}
	@keyframes blink{
		0% {opacity:0;}
		100% {opacity:1;}
	}