@charset "utf-8";
/* ぱたぱたアニメ館 */

/*######################################

  MIN 1000

######################################*/

@media screen and (min-width:1000px) {

/*-------------- wrapper -------------*/

#wrapper {
	width:1024px;
	margin:0 auto;
	padding:10px 0px;
	-moz-border-radius:1em;
	-webkit-border-radius:1em;
	border-radius:1em;
	background-color:#3366cc;
	background:url("../layout_image/denim.jpg");
}

/*----------  contents_box  ----------*/

.contents_box {
	width:930px;
	height:58px;
	margin:0 auto;
	padding:0;
}

/*------------  columns  ------------*/

.gif_box ul {columns: 6;}
.contents_box ul {columns: 6;}
}

/*######################################

  MAX 1000

######################################*/

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

/*-------------- wrapper -------------*/

#wrapper {
	width:100%;
	margin:0 auto;
	padding:10px 0px;
	-moz-border-radius:1em;
	-webkit-border-radius:1em;
	border-radius:1em;
	background-color:#3366cc;
	background:url("../layout_image/denim.jpg");
}

/*----------  contents_box  ----------*/

.contents_box {
	width:575px;
	height:118px;
	margin:0 auto;
	padding:0;
}

/*------------  columns  ------------*/

.gif_box ul {columns: 5;}
.contents_box ul {columns: 5;}
}

/*######################################

  MAX 768

######################################*/

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

/*-------------- wrapper -------------*/

#wrapper {
	width:100%;
	margin:0 auto;
	padding:10px 0px;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border-radius:0;
	background-color:#3366cc;
	background:url("../layout_image/denim.jpg");
}

/*----------  contents_box  ----------*/

.contents_box {
	width:230px;
	height:240px;
	margin:0 auto;
	padding:0;
}

/*------------  columns  ------------*/

.gif_box  ul {columns: 4;}
.contents_box ul {columns: 4;}

/*---------  table box td  ----------*/

.table_box td {
    display: block;
    width: 100%;
}
}

/*######################################

  MAX 540

######################################*/

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

/*------------  columns  ------------*/

.gif_box ul {columns: 3;}
.contents_box ul {columns: 3;}
}

/*######################################

  MAX 320-539

######################################*/

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

/*-------------- wrapper -------------*/

#wrapper {
	width:100%;
	margin:0 auto;
	padding:10px 0px;
	background-color:#3366cc;
	background:url("../layout_image/denim.jpg");
}

/*----------  contents_box  ----------*/

.contents_box {
	width:230px;
	height:240px;
	margin:0 auto;
	padding:0;
}

/*------------  columns  ------------*/

.gif_box ul {columns: 2;}
.contents_box ul {columns: 2;}

/*---------  extra box2 td  ---------*/

.extra_box2 td {
    display: block;
    width: 100%;
}

/*---------  footer small  ---------*/

.small{font-size:10pt;}
}

/*######################################

  ALL

######################################*/

html,body {
	margin:0;
	padding:0;
}
body{
	color:#000000;
	font-size:12pt;
	background-color:#6699ff;
	background-image:url(../layout_image/03.jpg);
	background-attachment:fixed;
	-webkit-text-size-adjust:none;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  LINK
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

a {text-decoration:none;}
a:link {color:#0000CC;}
a:visited {color:#0000CC;}
a:hover {background-color:#75a2ff;}
a:active {color:#00ffff;}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  header / container
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

#header {
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:left;
}
#container {
	clear:both;
	width:100%;
	margin:0 auto;
	background-color:#ffffff;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  footer
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

#footer {
	clear:both;
	width:100%;
	padding:10px 0;
	text-align:center;
	vertical-align:middle;
	border-top:1px #ffffff solid;
}
#footer a {color:#ffffff;}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  color
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.white{color:#ffffff;}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  h1 sitename
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.sitename {
	margin:0 0 10px 0;	
	font-size:24pt;
	font-weight:normal;
	font-family:HG創英角ﾎﾟｯﾌﾟ体,"Hiragino Kaku Gothic ProN",メイリオ,sans-serif;
}
.sitename img {margin:0 5px;}
.sitename a {color:#ffffff;}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  h2
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

h2 {
	margin:0;
	text-indent:7px;
	border-left:5px solid #0033CC;
	color:#0033CC;
	}
	
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  gif menu
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.gif_menu {
	width:100%;
	margin:0 auto;
	text-align:left;
	list-style-image:url("../layout_image/list20_2.gif");
}
.gif_menu li a {padding:5px 0;}
.gif_menu li a:hover {color:#0000cc;}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  flex
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.menu_flex {
	display: flex;
	padding:10px 0;
}
  
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  extra
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

#extra {
	clear:both;
	width:98%;
  	margin:0 auto;
	padding:0;
}
.extra_box1 {
	width:100%;
	margin:0 auto;
	padding:5px 0px;
	text-align:center;
}
.extra_box2 {
	width:100%;
	margin:0 auto;
	padding:5px 0px;
  	border-top:1px solid #808080;
  	border-bottom:1px solid #808080;
	background-color:#eeeeee;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  gif box
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.gif_box {
	width:95%;
	margin:0 auto;
	padding:10px 0;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  menu box
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.menu_box {
	width:100%;
	margin:0 auto;
	padding:0 0 10px 0;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  contents menu
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.contents_menu {
	width:100%;
	margin:0 auto;
	padding-top:10px;
	padding-bottom:5px;
	text-align:left;
	list-style-image:url("../layout_image/s_pig.gif");
  	border-top:1px solid #aaaaaa;
  	border-bottom:1px solid #aaaaaa;
}
.contents_menu li a {padding:5px 0;}
.contents_menu li a:hover {color:#0000cc;}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  copyright
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

#copyright {
	width:95%;
	margin:0 auto;
	padding:5px 0;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  img
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

img {
	max-width:100%;
	height: auto;
	margin-left:auto;
	margin-right:auto;
	border:none;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  table_box
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.table_box {
	width:95%;
	margin:0 auto;
	padding:0;
}
.table_box table {width:100%;}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  page_top
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

#page_top {
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:999;
	opacity: 0.6;
}
#page_top img {
	vertical-align:bottom;
}

#page_top a:hover {
	background-color:transparent;
}