@charset "UTF-8";

body {
font-family: "メイリオ", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
	font-size: 15px;
	margin:0px auto;
	padding: 0;
	background-color: #eeeeee;
	line-height:1.5;
}

a{
}

pre{
	line-height:100%;
	clear:both;
	background:#CCC;
	padding:5px 10px;
	margin:5px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
}

img{
}

div{
	display:block;
	overflow:hidden;
}

header {
	margin: 0px;
	padding:0px;
	margin-bottom:30px;
	text-align:center;
	width:100%;
	box-shadow: 0 1px 3px #9e9e9e;
	background:#FFF;
	overflow:hidden;
	display:block;
}

header nav {
	width:100%;
	text-align:center;
	background-color:#333;
	color:#FFF;
}

header ul {
	margin: 0px;
	padding:0px;
	list-style:none;
}

header li {
	display:inline-block;
	min-width:60px;
}

header li a {
	width:100%;
	display:block;
	color:#FFF;
	padding: 5px 10px;
}

footer{
	text-align:center;
	background-color:#333;
	color:#FFF;
	display:block;
}

footer{
	clear:both;
	background-color:#333;
	margin:10px auto 0px;
	width:100%;
}

a{
	text-decoration:none;
}


h1{
margin:15px;
}

h1 a{color:#000;}
h1 a:focus,
h1 a:active,
h1 a:hover {
    color:#09F;
	text-decoration: none;
}

nav a,
footer a{
	color:#FFF;
	display:inline-block;
	padding:2px 5px;
}

nav a:hover,
footer a:hover{
	background:#CCC;
}

.container h1{
margin: 10px;
padding: 5px 20px;
border-left: 4px solid rgb(57, 187, 255);
display:block;
}

h2{
font-size: 18px;
margin: 10px;
padding:5px;
font-weight: bold;
background-color: rgb(225, 233, 242);
display:block;
}

h3{
font-size: 15px;
margin: 10px 15px;
padding:3px;
border-left:#63F solid 5px;
padding-left:10px;
display:block;
background:#FAFAFA;
}

h4{
margin:3px;
padding:3px;
background:url(check.png) no-repeat;
background-position:left center;
padding-left:20px;
}

h5{
	font-size: 17px;
margin: 10px;
padding:5px;
border-left:#63F solid 7px;
padding-left:10px;
display:block;
background:#FAFAFA;
}

.container{
	padding:0px auto;
	margin:0px auto;
	text-align:left;
	width:90%;
	overflow:hidden;
	max-width:1000px;
}

.left{
	float:left;
	width:50%;
}

.right{
	float:right;
	width:50%;
}

.halfleft{
	float:left;
	width:50%;
}

.full{
	width:100%;
}

.box{
	padding:20px;
	margin: 10px;
	border: 1px solid #FFF;
	border-radius: 10px;
	background-color: #FFF;
	box-shadow:#000 1px 1px 2px;
}

.css{
	clear:both;
	background:#CCC;
	padding:10px;
	margin:5px;
}

.nextlink{
	background-color:#666;
	padding:15px;
	color:#fff;
	font-size:18px;
	font-weight: bold;
	border-radius:5px;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	border:0;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
   -o-transition: 0.3s;
	display:block;
	margin:auto;
}

.nextlink:hover {
	background-color: #000;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
}


/* --------- Forms --------- */

input[type=text] {
	border:1px solid #dcdcdc;
	background-color: #f6f6f6;
	width:80%;
	padding:3px;
	border-radius:5px;
	display:block;
	margin:auto;
 }
 
select {
	border:1px solid #dcdcdc;
	background-color: #f6f6f6;
	padding:3px;
	border-radius:5px;
	display:inline-block;
	text-align:center;
 }

textarea {
	border:1px solid #dcdcdc;
	background-color: #f6f6f6;
	width:80%;
	min-height:100px;
	padding:3px;
	border-radius:5px;
	display:block;
	margin:auto;
}

.textcenter{
	text-align:center;
}

label {
	display:inline-block;
    border:1px solid #dcdcdc;
	background-color:#f6f6f6;
	margin:1px;
	padding:1px;
	min-width:100px;
}

input[type=submit] {
	background-color: #DF4E33;
	padding:16px 50px;
	cursor: pointer;
	color:#fff;
	font-size:16px;
	font-weight: bold;
	border-radius:5px;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	border:0;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
   -o-transition: 0.3s;
	display:block;
	margin:auto;
}

input[type=submit]:hover {
	background-color: #a63925;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
}


#SEL1{
	width:30%;
	display:inline-block;
 }
#SEL2{
	width:30%;
	display:inline-block;
 }


/* 基本設定（共通） */

.az a,.az div{
  display:block;
  overflow:hidden;
}

.az img{
  max-width:100%;
  weight:auto;
  border:none;
  vertical-align:bottom;
}

/* 四角枠 */

.k{text-align:center;}

.k .az{
	margin:5px;
	display:inline-block;
	width:250px;
	border:#9CF solid 3px;
}

/* 赤価格 */

.k .azprice{
	color:#F00;
}

/* オンマウス［透明度］ */

.k .az:hover{
	opacity:0.7;
}

/* オンマウス［位置変化］ */

.k .az:hover{
	position:relative;
	top:1px;
	left:1px;
}


/* 黒帯タイトル */

.o{text-align:center;}

.o .az{
	display:inline-block;
	margin:5px;
	width:300px;
	position:relative;
}

.o .aztitle{
	position:absolute;
	bottom:0px;
	left:0px;
	background:rgb(0, 0, 0);
	width:100%;
}

.o .aztitle a{
	color:#fff;
	padding:5px;
}

/* 丸枠ランキング */

.r1{text-align:center;}

.r1 .az{
	display:inline-block;
	margin:5px;
	width:170px;
	position:relative;
	border:solid 1px rgba(56, 58, 154, 0.9);
}

.r1 .azrank{
	position:absolute;
	top:10px;
	right:10px;
	z-index:10;
	background:rgba(56, 58, 154, 0.9);
	color:#fff;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	border:0px;
	border-radius:80px;
}

/* 角枠ランキング */

.r2{text-align:center;}

.r2 .az{
	display:inline-block;
	margin:5px;
	width:170px;
	position:relative;
	border:solid 1px rgba(199, 145, 43, 0.9);
}

.r2 .azrank{
	position: absolute;
	top:0px;
	left:0px;
	z-index:10;
	background:rgba(199, 145, 43, 0.9);
	color:#fff;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
}

/* 交互画像 */

.f .az {
  background:#fff;
  margin:10px;
  display:flex;
}

.f .az:nth-child(2n) {
  flex-direction: row-reverse;
}

.f .aztitle{
  width:100%;
}

.f .az a{
  background:rgba(233, 30, 99, 0.3);
  display:flex;
  -webkit-align-items: center;/*上下中央（Safari用） */
  -webkit-justify-content: center;/*左右中央（Safari用）*/
  align-items: center; /*上下中央*/
  justify-content: center; /*左右中央*/
  height:250px;
}

/* モザイク */

.g{text-align:center;}

.g .az{
	margin:5px;
	display:inline-block;
	width:200px;
	border:rgba(0, 0, 0, 0.3) solid 3px;
}

/* 赤価格 */

.g .azprice{
	color:#F00;
}

.g .az img {
-webkit-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}

.g .az img:hover{
-webkit-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}

/* モザイク */

.h{text-align:center;}

.h .az{
	margin:10px;
	display:inline-block;
	width:200px;
	border:rgba(0, 0, 0, 0.3) solid 3px;
}

/* 赤価格 */

.h .azprice{
	color:#F00;
}