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

/* ==========================================================
 
     !SP

========================================================== */

body#page section { margin: 0 0 70px; }
body#page section > section { margin: 0 0 40px; }

/* page h1 */
body#page div.page_header {
	padding: 70px 0;
	
	/* 背景画像・背景グラデーション */
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1ea8d8+20,7b5ec3+80 */
	background: url(../img/common/bg.png), #1ea8d8; /* Old browsers */
	background: url(../img/common/bg.png),-moz-linear-gradient(left,  #1ea8d8 20%, #187fc3 80%); /* FF3.6-15 */
	background: url(../img/common/bg.png),-webkit-linear-gradient(left,  #1ea8d8 20%,#187fc3 80%); /* Chrome10-25,Safari5.1-6 */
	background: url(../img/common/bg.png),linear-gradient(to right,  #1ea8d8 20%,#187fc3 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ea8d8', endColorstr='#187fc3',GradientType=1 ); /* IE6-9 */
	
	/* 背景画像乗算 */
	background-blend-mode: multiply;

}

body#page div.page_header h1 {
	width: 80%;
	margin: 0 auto;
}

/* contents */
body#page div.contents {
	width: 90%;
	max-width: 1000px;
	margin: 70px auto;
}


/* page h2 */
body#page div.contents h2 {
	max-width: 500px;
	margin: 0 auto 40px;
}

/* page h3 */
body#page div.contents h3 {
	background: url(../img/common/bg_h3.png),#1ea8d8;
	background-blend-mode: multiply;
	min-height: 50px;
	color: #fff;
	font-size: 115%;
	font-weight: bold;
	text-align: center;
	padding: 13px 5%;
	margin: 0 0 30px;
}

body#page div.contents h3 i { margin: 0 0.5em 0 0; }

body#page div.contents h3.green {
	background: url(../img/common/bg.png), #187fc3;
	background-blend-mode: multiply;
	color: #fff;
}

body#page div.contents h3.yellow {
	background: url(../img/common/bg_yellow.png), #ffda00;
	background-blend-mode: multiply;
	color: #187fc3;
}

/* downroad dl */
div.reader p.banner {
	width: 50%;
	margin: 0 auto 20px;
}

section.download dl {
	text-align: center;
	padding: 0 0 30px;
	margin: 0 0 30px;
	border-bottom: 1px dotted #187fc3;
}

section.download dl dt {
	font-weight: bold;
	margin: 0 0 20px;
	font-size: 125%;
}

section.download dl dt span.red {
    display: block;
	font-size: 80%;
	color: #c30d23;
	white-space: nowrap;
}

section.download dl dd.description {
	margin: 0 0 20px;
}

section.download dl dd.download img {
	width: 45%;
	max-width: 200px;
}

section.download dl dd.description span.red {
	color: #c30d23;
}

/* PDF reader link */
div.reader {
	margin: 40px 0 0;
	padding: 30px;
	border: 1px solid #000;
}


/* ==========================================================
 
     !PC

========================================================== */

@media only print, screen and (min-width: 769px) {

body#page section { margin: 0 0 100px; }
body#page section > section { margin: 0 0 50px; }

/* contents */
body#page div.contents {
	margin: 100px auto;
}

/* page h3 */
body#page div.contents h3 {
	font-size: 145%;
	padding: 10px 0;
}

/* downroad dl */
section.download dl {
	display: -webkit-box;/* Android4.3以前ブラウザ用 */
	display: -webkit-flex;/* iOS8以前Safari用 */
	display: flex;
	-webkit-box-pack: space-between;/* Android4.3以前ブラウザ用 */
	-webkit-justify-content: space-between;/* iOS8以前Safari用 */
	justify-content: space-between;
	-webkit-flex-flow: row wrap;/*--- safari（PC）用 ---*/
    flex-flow: row wrap;
}

section.download dl dt {
	width: 30%;
	float:left;
	font-weight: bold;
	margin: 0 3%;
	order: 1;
}

section.download dl dd.description {
	width: 47%;
	margin: 0 2.5%;
	text-align: left;
	order: 3;
}

section.download dl dd.download {
	width: 12%;
	order: 2;
}

section.download dl dd.download img {
	width: 100%;
}

/* PDF reader link */
div.reader {
	display: -webkit-box;/* Android4.3以前ブラウザ用 */
	display: -webkit-flex;/* iOS8以前Safari用 */
	display: flex;
	-webkit-flex-flow: row wrap;/*--- safari（PC）用 ---*/
    flex-flow: row wrap;
	-webkit-box-align: center;/* Android4.3以前ブラウザ用 */
	-webkit-align-items: center;/* iOS8以前Safari用 */
	align-items: center;
}

div.reader p { width: 75%; }

div.reader p.banner {
	width: 20%;
	margin: 0 5% 0 0;
}

/* PCの時リンク無効に */
p.img_link { pointer-events: none; }


}