@charset "shift_jis";

/* -------------------------------------------------------------
一括で全ての要素の余白をゼロ（削除不可）
------------------------------------------------------------- */
* {
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

/*--- フッター画面下にくっつけるためにbodyとhtmlのheight100%を足した---*/
body , html {
	height: 100%;
}
	
	
/* -------------------------------------------------------------
全てに共通するマウスオーバー
------------------------------------------------------------- */

a:link, a:visited, a:hover, a:active {
	text-decoration: none;
}
a:link {
	color: #00C;
}
a:visited {
	color: #009;
}
a:hover {
	color: #f00;
	text-decoration: underline;
}
a:active {
	color: #333;
	text-decoration: underline;
}
/* -------------------------------------------------------------
[0] 画面全体に反映する基本テキスト設定
------------------------------------------------------------- */

body {
	font-size: 13px;
	text-align: center;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", sans-serif;
	padding: 0;
	margin: 0;
	color: #333;
	line-height: 25px;
}
/* -------------------------------------------------------------
[1] 基本レイアウトに関する指定（div要素）
------------------------------------------------------------- */

#container {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
}

#container_640 {
	width: 640px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 50px;
	margin-bottom: 50px;
	text-align: left;
	font-size: 16px;
	line-height: 30px;
}

#header-in-b {
	width: 150px;
	float: right;
	text-align: right;
	margin-top: 110px;
}

#billboard {
	width: 940px;
	float: left;
	margin-bottom: 10px;
	margin-right: 10px;
	margin-left: 10px;
}



/*--- 上部未使用要素 ---*/

/*--- フッター画面下にくっつけるためにpositionからmin-heightまでの2行を足した---*/
#wrapper {
	background-image: url(../images/color_pen.png);
	background-position: center top;
	background-repeat: no-repeat;
	width: 100%;
    position: relative;
    height:auto !important; /*IE6対策*/
    height: 100%; /*IE6対策*/
    min-height: 100%;
}

#header {
	width: 960px;
	color: #333;
	padding-top: 40px;
	padding-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

/*--- body指定にフッター画面を縮めたときにかぶさらないようにためにpadding-bottomサイズをフッターと同じ高さに指定するとかぶさらない（笑）---*/
#body {
	width: 960px;
	padding-bottom: 200px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	overflow: hidden;
}

#body-center {
	width: 640px;
	padding-bottom: 50px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	overflow: visible;
	text-align: center;
	padding-top: 30px;
}

#body-left {
	width: 620px;
	float: left;
	margin: 10px;
	background-color: #FFF;
}

#body-right {
	width: 300px;
	text-align: left;
	float: right;
	margin: 10px;
}

/*--- フッター画面下にくっつけるためにposition:absolute;とbottom: 0; の2行を足した---*/
#footer {
	font-size: 80%;
	width: 100%;
	color: #333;
	float: none;
	clear: both;
	background-color: #cccccc;
	padding-top: 50px;
	line-height: 1.6em;
	padding-bottom: 40px;
	position:absolute;
	bottom: 0;
}

#footer-in {
	width: 940px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	letter-spacing: 1px;
	overflow: hidden;
}

#footer-in-a {
	width: 450px;
	float: left;
	clear: left;
}

#footer-in-b {
	width: 450px;
	float: right;
	text-align: right;
}

#footer-in-c {
	width: 220px;
	float: right;
	margin-right: 30px;
	padding-left: 9px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #999;
}


/* -------------------------------------------------------------
   [2] div要素への個別設定（クラス）：ヘッダー内設定
------------------------------------------------------------- */

h1 {
	color: #FFF;
}
/* -------------------------------------------------------------
　余白マージン設定
-------------------------------------------------------------*/

.margin-b-30 {
	margin-bottom: 30px;
}

.margin-b-15 {
	margin-bottom: 15px;
}

.margin-b-05 {
	margin-bottom: 5px;
}

.margin-t-10 {
	margin-top: 10px;
}



.margin-t-30 {
	margin-top: 30px;
}

.margin-r-20 {
	margin-right: 20px;
}

.margin-r-10 {
	margin-right: 10px;
}

.margin-r-5 {
	margin-right: 5px;
}

.margin-t10-b10 {
	margin-top: 10px;
	margin-bottom: 10px;
}

.margin-t15-b15 {
	margin-top: 15px;
	margin-bottom: 15px;
}

.margin-begin {
	margin-top: 5px;
	margin-bottom: 20px;
}

.begin-mail-icon {
	margin-left: 10px;
	position: absolute;
	margin-top: -12px;
	z-index: 50;
}

.margin-triangle {
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 263px;
}

.marc {
	margin-right: 15px;
	margin-bottom: 15px;
	float: left;
	clear: none;
}
/* -------------------------------------------------------------
　テキストの装飾設定
-------------------------------------------------------------*/

.text-small {
	font-size: 80%;
	line-height: 1.6em;
	color: #333;
}

.text-midashi {
	font-size: 22px;
	color: #000;
	font-weight: bold;
	margin-bottom: 20px;
	font-family: "MS Serif", "New York", serif;
	display: block;
}

.header-font {
	font-size: 15px;
	color: #000;
	font-weight: bold;
	margin-top: 70px;
	font-family: "MS Serif", "New York", serif;
}


/* -------------------------------------------------------------
　テキストのサイズやカラーの設定
-------------------------------------------------------------*/

.text-orenge {
	color: #F30;
}



/* -------------------------------------------------------------
　navi設定
-------------------------------------------------------------*/


.localnavi {
	list-style-type: none;
}
.localnavi li {
	display: inline;
}
.localnavi a {
	text-decoration: none;
	width: 180px;
	display: block;
	padding-left: 5px;
	color: #FFF;
	font-weight: bolder;
	letter-spacing: 1px;	/* ←この3行が文字前のアイコン位置　*/
	font-family: "MS Serif", "New York", serif;
	margin-bottom: 15px;
	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #FFF;
	padding-top: 2px;
	padding-bottom: 2px;
}
.localnavi a:hover {
	text-decoration: none;
	background-color: #37c8ef;
	color: #FFF;
	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #1587bc;
}
/* -------------------------------------------------------------
　テーブル設定
------------------------------------------------------------- */

#table {
	border: 1px #E3E3E3 solid;
	border-collapse: collapse;
	border-spacing: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 18px;
}
#table th {
	padding: 6px;
	border: #E3E3E3 solid;
	border-width: 0 0 1px 1px;
	line-height: 1.5em;
	text-align: left;
	background-color: #d8d0aa;
}
#table td {
	padding: 6px;
	border: 1px #E3E3E3 solid;
	border-width: 0 0 1px 1px;
	background: #FFF;
	text-align: left;
}
/* -------------------------------------------------------------
かどまるの設定
-------------------------------------------------------------*/

div.kadomaru {
	border-radius: 3px;         /* CSS3 */
	-moz-border-radius: 3px;    /* Firefox */
	-webkit-border-radius: 3px; /* Safari,Chrome */
	border: 1px solid #CCC;     /* 枠線の装飾 */
	background-color: #DCDCDC;
	padding: 1px;
	margin-top: 50px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 120px;
	float: right;
	text-align: center;
	font-size: 90%;
}
.kadomaru {
	float: right;
	text-align: right;
	font-size: 100%;
	letter-spacing: 3pt;
	font-weight: bold;
	border-top-width: 10px;
	border-top-style: solid;
	border-top-color: #F90;
	margin-right: 50px;
	margin-top: 0px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}
/* -------------------------------------------------------------
　header部分のenglushボタン位置設定
-------------------------------------------------------------*/

.english {
	position: absolute;
	width: 156px;
	height: 71;
	left: 702px;
	top: 50px;
}

/* -------------------------------------------------------------
画像マウスオーバーの透かし設定
-------------------------------------------------------------*/

.mouse-on:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
}

/* -------------------------------------------------------------
トップページのブロック割　設定
------------------------------------------------------------- */

.box {
	display: block;
	height: 300px;
	width: 300px;
	text-align: left;
	float: left;
	margin: 10px;
	background-color: #FFF;
}

.box-wide {
	display: block;
	height: 620px;
	width: 300px;
	text-align: left;
	float: left;
	margin: 10px;
	background-color: #FFF;
}


.box-text-title {
	display: block;
	width: 260px;
	margin-top: 15px;
	margin-right: 20px;
	margin-left: 20px;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	line-height: 21px;
	color: #000;
}

.box-text-body {
	display: block;
	width: 260px;
	margin-top: 8px;
	margin-right: 20px;
	margin-left: 20px;
	text-align: left;
	line-height: 21px;
}

/* -------------------------------------------------------------
View Templatesページのブロック割　設定
------------------------------------------------------------- */

.view-text-title {
	display: block;
	width: 450px;
	text-align: left;
	font-size: 20px;
	font-weight: bold;
	line-height: 35px;
	float: right;
	margin-bottom: 20px;
	color: #000;
}

.view-text-body {
	display: block;
	width: 450px;
	text-align: left;
	float: right;
	margin-bottom: 30px;
}

.view-box-text-title {
	display: block;
	width: 280px;
	text-align: left;
	float: right;
	font-weight: bold;
	font-size: 15px;
	color: #000;
}

.view-box-text-body {
	display: block;
	width: 280px;
	margin-top: 8px;
	text-align: left;
	float: right;
}

/* ----DIV要素　設定--- */

#view-box {
	width: 580px;
	text-align: left;
	float: left;
	margin: 20px;
}

#view-explain {
	width: 550px;
	text-align: left;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 35px;
	float: left;
	background-color: #dadada;
	padding: 15px;
	margin-bottom: 5px;
}

#view-mail {
	width: 580px;
	text-align: left;
	float: left;
	color: #FFF;
	background-color: #000;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	line-height: 20px;
	font-size: 12px;
	margin-top: 5px;
}

.view-process-a {
	display: block;
	width: 75px;
	color: #FFF;
	background-image: url(../images/process_a.png);
	background-repeat: no-repeat;
	height: 25px;
	padding-left: 3px;
	margin-top: 5px;
	float: left;
	font-size: 12px;
	margin-bottom: 5px;
}

.view-process-b {
	display: block;
	width: 75px;
	color: #FFF;
	background-image: url(../images/process_b.png);
	background-repeat: no-repeat;
	height: 25px;
	padding-left: 3px;
	margin-top: 5px;
	float: left;
	font-size: 12px;
	margin-bottom: 5px;
}

/* -------------------------------------------------------------
3D制作画像（800×600サイズ）プレゼン用
------------------------------------------------------------- */

.header-font-narc {
	font-size: 15px;
	color: #000;
	font-weight: bold;
	font-family: "MS Serif", "New York", serif;
}

#width-800 {
	width: 800px;
	margin-bottom: 50px;
	padding: 0px;
	margin-top: 50px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}

.3d-title {
	display: block;
	width: 275px;
	margin-bottom: 5px;
	background-color: #000;
	font-size: 18px;
	color: #FFF;
	padding: 5px;
	text-align: center;
}


.marc-title {
	display: block;
	width: 630px;
	margin-bottom: 30px;
	background-color: #000;
	font-size: 18px;
	color: #FFF;
	padding: 5px;
	text-align: center;
}

.marc-buttan {
	display: block;
	background-color: #CCC;
	padding: 3px;
}

.coming-soon {
	font-family: "Times New Roman", Times, serif;
	font-size: 50px;
	margin-top: 50px;
	margin-bottom: 20px;
	display: block;
	line-height: normal;
}

/* -------------------------------------------------------------
（幅960pxサイズ）プレゼン用
------------------------------------------------------------- */

.title-black {
	display: block;
	width: 435px;
	margin-bottom: 5px;
	background-color: #000;
	font-size: 18px;
	color: #FFF;
	padding: 5px;
	text-align: center;
}

/* -------------------------------------------------------------
スイコー後援会用　基本レイアウト指定（スマホ480px幅）
------------------------------------------------------------- */

#container_480 {
	width: 460px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	margin-bottom: 30px;
	text-align: left;
	font-size: 20px;
	line-height: 35px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding-right: 20px;
	padding-left: 20px;
}

.title_480 {
	display: block;
	width: 460px;
	margin-bottom: 30px;
	background-color: #65bf97;
	font-size: 25px;
	color: #FFF;
	padding: 5px;
	text-align: center;
}

.p_news_box {
	width: 460px;
}
 
.p_news_box img {
	float: left;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
}
 
.p_news_box p {
	overflow: auto;	/* for modern browser */
	zoom: 1;
	margin-bottom: 10px;
	margin-top: 10px;
}