@charset "utf-8";
/*

Theme Name: Theme ver0.3
Theme URI: http://sun-moon.ne.jp/
Description: 
Version: 1.0
Tags: 
Author: sun-moon
Author URI: http://sun-moon.ne.jp/

*/

/* browser style clear
   --------------------------------------------- */			
html { margin-bottom:1px; height:100%; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
	padding: 0;
	display: block;
}
div { >text-align: left;
	display: block;
}
table { border-collapse: separate; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; margin: 0px; padding: 0px; }
code { font:120% "Courier New", "Lucida Console", Arial; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { line-height: 1; font-weight: bold; margin-bottom: 0em; display: block; padding: 0px; margin-top: 0px; }
h1, h2, h3, h4, h5, h6 { font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
*+html h1, *+html h2, *+html h3, *+html h4, *+html h5, *+html h6 { font-family:"メイリオ", "Meiryo"; }
q:before, q:after { content: ''; }
blockquote { background:#EFF8FB; border:1px solid #ccc; margin:10px 0; padding:5px 15px; }
.smallfont { font-size: 90%; line-height: 1.35; }
* + .smallfont { font-size: 88%;/*IE7*/ }
* .smallfont { font-size: 90%;/*IE6-5*/ }
.xsmallfont { font-size: 75%; }
* + .xsmallfont { font-size: 75%;/*IE7*/ }
* .xsmallfont { font-size: 75%;/*IE6-5*/ }
p {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 1em;
	margin-left: 0px;
}
/* element,class
   --------------------------------------------- */			
body { margin: 0px; padding: 0px; font-family: "メイリオ", Meiryo, Osaka, sans-serif; font-size: 90%; line-height: 1.7; background-image: url(/kanoncalendar/img/bg.jpg); background-position: center; }
a { color: #FFF; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; color: #091346; }
a:active { text-decoration: underline; }
img { border: 0; }
img, input { vertical-align: bottom; }
table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }
em { color: #ECD61E; font-weight: normal; font-style: normal; }
sup, sub { font-size: 83%; line-height: 1; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
input { vertical-align: middle; }
input:hover { }
input:focus { }
hr { padding: 0px; border-style: none; height: 1px; color: #000; }
/* new clearfix　*/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.fClear { clear: both; height: 1px; }
/* section */
div.section { margin-bottom: 8em; clear: both; }
div.section:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/*--------------------------------------------------- */
/* 	STRUCTURE																																									*/
/*--------------------------------------------------- */
#header { background-image: url(/kanoncalendar/img/hdr_bg.png); background-position: center; height: 45px; }
#wrapper { width: 980px; margin-right: auto; margin-left: auto; margin-bottom: 10em; color: #FFF; position: relative; clear: both; }
#content { font-size:15px; line-height:2; text-align: justify; padding-bottom: 1em; color: #333; }
#footer { clear: both; }
#BgImg01 { position: absolute; width: 162px; height: 165px; left: 232px; top: 584px; z-index: 7; }
#BgImg05 { position: absolute; width: 231px; height: 255px; left: 784px; top: 608px; z-index: 1; }
#BgImg07 { position: absolute; width: 265px; height: 317px; left: 484px; z-index: 10; top: -66px; }
#BgImg02 { position: absolute; z-index: 10; left: 684px; top: -318px; }
#BgImg06 { position: absolute; width: 175px; height: 400px; left: -33px; top: 23px; z-index: 10; }

/* HEADER	
   --------------------------------------------- */
#header #nav { width: 980px; margin-right: auto; margin-left: auto; height: 45px; position: relative; }
#header ul#navList { width: 980px; margin-right: auto; margin-left: auto; }
#header ul#navList li { display: block; float: left; }
#header #translate {
	height: 37px;
	width: 77px;
	float: right;
	position: absolute;
	right: 61px;
	overflow: visible;
	z-index: 6;
	top: 0px;
}
#header #navList { margin-right: auto; margin-left: auto; display: block; }
#header #navList li { display: block; float: left; }

/* H
   --------------------------------------------- */
h1.title { height: 23px; width: 74px; margin-top: 54px; margin-bottom: 55px; }
h2.title { height: 228px; width: 348px; margin-bottom: 70px; margin-left: -5px; padding-top: 0px; }
h3.title { width: 314px; margin-bottom: 10px; }
h3.title span { margin-top: 10px; display: block; }
h4.title { margin-bottom: 14px; width: 195px; }
h5.title { margin-bottom: 2.5em; }
div.h7 { margin-bottom: 0.5em; line-height: 1; }
/* common
   --------------------------------------------- */
.appStore { width: 113px; margin-bottom: 10px; height: 39px; display: block; }
#design .appStore { float: left; }
.sharebox {

}
.sharebox ul{}
.sharebox ul li{
	display: block;
	float: left;
	margin-right: 5px;
}
/* MainVisual
   --------------------------------------------- */
#MainVisual { margin-bottom: 340px; }
#MainVisual .KeyVisual {
	height: 650px;
	width: 613px;
	position: absolute;
	left: 357px;
	top: -47px;
	overflow: hidden;
	z-index: 5;
}
#MainVisual .KeyVisual .img01{ padding-left: 30px; }
#price {
	width: 152px;
	margin-bottom: 24px;
}
/* Design is changing the world.
   --------------------------------------------- */
#design { background-image: url(img/ima01.png); background-position: left top; background-repeat: no-repeat; margin-left: -40px; margin-bottom: 100px; }
#design .box { width: 440px; float: right; }
#design .subTitle { margin-bottom: 1.5em; }
#design .Txt {
	margin-bottom: 1.5em;
}
#design .Txt p { margin-bottom: 1em; }
#design .icon { height: 64px; width: 258px; float: left; display: block; margin-right: 30px; }
/* YouTube
   --------------------------------------------- */
#YouTube{ margin-bottom: 160px; text-align: center; }
/* Profile
   --------------------------------------------- */
.urlbox {
	height: 11px;
}
.urlbox ul{}
.urlbox ul li{
	float: left;
	margin-right: 8px;
	display: block;
}
#ProfileOsamu { margin-bottom: 3em; position: relative; }
#ProfileInoue { width: 460px; float: left; margin-bottom: 4em; position: relative; }
#ProfileHirokaz { width: 460px; float: right; margin-bottom: 4em; }
#ProfileOsamu .name { margin-bottom: 1.5em; }
#ProfileOsamu .photo { width: 104px; margin-right: 30px; float: left; display: block; }
#ProfileOsamu .comment { float: left; width: 400px; margin-bottom: 4em; }
#ProfileOsamu .works { width: 520px; float: left; height: 800px; position: relative; }
#ProfileOsamu .worksTxt { width: 430px; float: right; }
#ProfileOsamu .urlbox { font-family: Tahoma, Geneva, sans-serif; margin-bottom: 1.5em; }
#ProfileOsamu img.works01 { display: block; position: absolute; left: -11px; top: 41px; z-index: 3; }
#ProfileOsamu img.works02 { display: block; position: absolute; left: 13px; top: 356px; z-index: 7; }
#ProfileOsamu img.works03 { display: block; position: absolute; left: 66px; top: 600px; z-index: 8; }
#ProfileOsamu img.works04 { display: block; position: absolute; left: 260px; top: 359px; z-index: 9; }
#ProfileOsamu ul.workslist { display: block; margin-bottom: 4em; }
#ProfileInoue .name, #ProfileHirokaz .name { margin-bottom: 1.5em; }
#ProfileInoue .photo, #ProfileHirokaz .photo { width: 85px; float: left; display: block; }
#ProfileInoue .comment, #ProfileHirokaz .comment { float: right; width: 350px; margin-bottom: 0em; }
#ProfileInoue .urlbox, #ProfileHirokaz .urlbox {
	margin-bottom: 1.5em;
}
#ProfileInoue #bnr { margin-top: 1em; }
#ProfileHirokaz ul.workslist li{ line-height: 1; }

/* Facebook
   --------------------------------------------- */
#likebox{ background: #50BD2B; width: 480px; float: right; position: relative; }
#comments{ width: 480px; position: relative; margin-bottom: 1em; float: left; }

/* FOOTER 		
   --------------------------------------------- */
#footer { position: relative; }
#footer #UNICEF{ margin-right: auto; margin-left: auto; text-align: center; margin-bottom: 80px; }
#footer #UNICEF span{ color: #74E285; }
#footer #logo { width: 188px; margin-right: auto; margin-bottom: 80px; margin-left: auto; }
#footer ul#navList { margin-right: auto; margin-left: auto; display: block; width: 320px; height: 18px; padding-left: 30px; }
#footer ul#navList li { display: block; float: left; }