﻿@charset "UTF-8";

/********************************************************************/

/* Initialize margin and padding */
body, form, h1, h2, h3, h4, h5, h6, pre, div, ul, p, br, table, img, input, label, script {
    margin: 0;
    padding: 0;
}

/* Firefoxのスクロールバーを常に表示 */
html {
    overflow-y: scroll;
}

/* Basic setting for whole body */
body {
    color: #000;		/* 文字の色 */
    background-color: #fff;	/* 背景の色 */
    text-align: center;		/* 古いIEでセンタリングする */
    line-height: 1.5em;		/* 行間 */
    letter-spacing: 0.em;	/* 文字間空け */
    font-size: 15px;		/* 文字サイズ */
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

ul {
    list-style-type: none;	/* リストマーカを消す（必要な箇所だけ付ける） */
}

	/* リンクの設定
------------------------------------------------------------ */
/* リンク */
a {
    text-decoration: none;		/* 装飾を施さない */
    outline: 0;				/* 点線を表示しない */
}

a:link { color: #00a; }			/* リンク未閲覧の文字の色*/
a:visited { color: #909; }		/* リンク閲覧済の文字の色*/

/* カーソルをリンクの上に置いている */
a:hover {
    color: #f00;			/* 文字の色 */
    text-decoration: underline;	        /* 下線 */
}

/* ユーザによってアクティブ状態にされた時 */
a:active { color: #c00; }		/* 文字の色 */

/* リンク画像の枠を表示しない */
a img {
    border-style: none important!;	/* 枠を非表示 */
    border-width: 0px;		        /* 枠の幅を0pxに設定 */
    text-decoration: none;		
    }

/* warps is specified only for layout size and location */
/* Color, font, etc will be specified for each item */

/* Overall warp: contains all warps below */
#warp {
    width: 800px;
    text-align: left;
    margin: 0 auto;
}

/* Warp on the page top: contains main-title, head menu, content-path */
#top-warp {
}

/* Warp on the page middle: contains main-warp, side-warp */
#mid-warp {
    margin-top: 15px;
}

/* Warp for main content */
#main-warp {
    width: 800px;
    float: left;
}

/* Warp for side menu */
#side-warp {
    width: 200px;
    float: left;
}

/* Warp on the page bottom: contains footer */
#bottom-warp {
}

/********************************************************************/

.clear {
    clear: both;
}

.clear hr {
    display: none;
}

/********************************************************************/

/* Main logo on the top */
#main-title {
    margin: 0px 0px;
    padding: 20px 0px;
    color: #333;	         	/* 文字の色 */
    text-align: center;	        	/* 古いIEでセンタリングする */
}

#main_title a:hover {
    text-decoration: none;
}

/********************************************************************/

#headMenu {
    width: 100%;
    height: 50px;
    margin: 2px 0px 5px 0px;
    padding: 0;
}

#headMenu ul {
    margin: 0;
    padding: 0;
}

#headMenu li {
    margin: 0px 2px 0px 0px;
    padding: 0;
    list-style: none;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    width: 158px;
    height: 30px;
    float: left;
}

#headMenu a {
    line-height: 1.9em;
    display: block;
}

#headMenu li a:link, #headMenu a:visited {
    color: #fffff0;
    text-decoration: none;
    background-image: url(image/headMenu.png);
    background-repeat: repeat-x;
}

#headMenu li a:hover, #headMenu a:active {
    color: #fffff0;
    text-decoration: none;
    background-image: url(image/headMenu-hover.png);
    background-repeat: repeat-x;
}

/********************************************************************/

/* Content path */
#content-path {
    margin: 5px 0px 5px 0px;
    text-align: left;	        	/* 古いIEでセンタリングする */
}

/********************************************************************/

/* Content */
#content {
    background-color: #fff;	        /* 背景の色 */
    text-align: left;	        	/* 古いIEでセンタリングする */
}

#content h2 {
    margin: 15px 0 15px 0;
    border-bottom: 1px solid #888;
    font-size: 20px;    		/* 文字サイズ */
    font-weight: bold;
    color: #000;
    line-height: 1.5em;
    vertical-align: middle;
}

#content h3 {
    margin: 15px 0 8px 0;
    font-size: 15px;    		/* 文字サイズ */
    font-weight: bold;
    color: #000;
    line-height: 1.25em;
    vertical-align: middle;
}

#content h4 {
    margin: 15px 0 8px 1em;
    font-size: 15px;    		/* 文字サイズ */
    font-weight: bold;
    color: #000;
    height: 1.25em;
}

#content h5 {
    margin: 5px 0 5px 2.5em;
    font-size: 15px;    		/* 文字サイズ */
    font-weight: normal;
    color: #000;
    height: 1.25em;
}

#content p {
    margin: 8px 0;
    text-indent: 1em;
    font-size: 15px;    	/* 文字サイズ */
    line-height: 1.8em;		/* 行間 */
    letter-spacing: 0.02em;	/* 文字間空け */
}

#content p.no-indent {
    text-indent: 0em;
}

#content p.left-space {
    margin: 8px 33px;
    text-indent: 0em;
    font-size: 15px;    	/* 文字サイズ */
    line-height: 1.8em;		/* 行間 */
    letter-spacing: 0.02em;	/* 文字間空け */
}

/********************************************************************/

/* Left menu */
#side-menu {
}

#side-menu .side-menu-title {
    background-image: url(image/leftMainMenu.png);
    background-repeat: repeat-y;
    vertical-align: middle;
}

#side-menu .side-menu-title h2 {
    padding-left: 7px;
    padding-top: 5px;
    padding-bottom: 4px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
}

#side-menu .side-menu-title a{
    padding-left: 7px;
    padding-top: 5px;
    padding-bottom: 4px;
    font-size: 15px;
    font-weight: bold;
    display: block;
    color: #fff;
}

#side-menu .side-menu-title a:hover{
    display: block;
    background-image: url(image/leftMainMenu-hover.png);
    background-repeat: repeat-y;
    text-decoration: none;		/* 装飾を表示しない */
}

#side-menu .side-menu-box {
    height: auto;
    margin: 0px 0px 1px 0px;
    padding-left: 3px;
    background-color: #cfc;
    border: 1px solid #7a7;
}

#side-menu .side-menu-box h3 {
    margin-left: 10px;
    padding: 10px 0 2px 0;
    border-style:solid;
    border-width:0 0 1px 0;
    border-color:#bdb;
    font-size: 15px;
    font-weight: bold;
    color: #080;
}
                
#side-menu .side-menu-box h3 a {
    color: #050;
}
                
#side-menu .side-menu-box h3 a:hover {
    color: #f00;
    display: block;
    text-decoration: none;		/* 装飾を表示しない */
}
                
#side-menu .side-menu-list {
    list-style: none;
    margin-bottom: 8px;
}

#side-menu .side-menu-list li a {
    padding: 6px 0 0 15px;
    margin: 0px 0 0 3px;
    height: 22px;
    background-image: url(image/arrow.png);
    background-repeat: no-repeat;
    background-position: left center;
    color: #00a;
    display: block;
    text-decoration: none;		/* 装飾を表示しない */
}

#side-menu .side-menu-list li a:hover {
    background-image: url(image/arrow-hover.png);
    color: #f00;
}

/********************************************************************/

/* Counter */
#counter {
    text-align: center;
}

#counter table {
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid #888;
    border-left: 1px solid #888;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-collapse: separate;
    border-spacing: 0px;
    cell-spacing: 0px;
    background-color: #333;
}

#counter td {
    color: #fff;
    background-color: #000;
    padding: 4px 2px 1px 2px;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    font-size: 15px;
}

/********************************************************************/

/* Footer */
#footer {
    text-align: left;
    font-size: 15px;
}

/********************************************************************/

/* Top left */
#top-left {
    height: 24px;
    text-align: left;
    color: #888;
}

#top-left h1 {
    font-size: 15px;
    font-weight: normal;
    line-height: 24px;
}

#top-right{
    height: 24px;
    text-align: right;
    color: #000;
}

#top-right h1 {
    font-size: 15px;
    font-weight: normal;
    line-height: 24px;
}

/********************************************************************/

div.footer {
    padding-top: 10px;
    text-align: left;
}

div.footer-top {
    text-align: center;
    padding-top: 10px;
}

/********************************************************************/

#storeLink {
    width: 100%;
    height: 100px;
    margin: 0px 10px 30px 10px;
    padding: 0;
    text-align: center;
}

#storeLink ul {
    margin: 0;
    padding: 0;
}

#storeLink li {
    margin: 0px 50px 0px 50px;
    padding: 0;
    text-align: center;
    width: 300px;
    height: 100px;
    float: left;
}

#storeLink img {
    padding: 10px;
}

/********************************************************************/

div.image {
    padding: 20px 0 10px 0;
    text-align: center;
}

div.caption {
    text-align: center;
    padding: 0px 0 20px 0;
}

figure.pic {
    float: left;
    margin: 0px 20px 20px 0px;
}

figcaption {
    font-size: 0.9em;        /* 文字サイズを90%に */
    text-align: center;      /* 中身をセンタリング */
}

div.label {
    font-size: 24px;
    text-align: left;
    padding: 60px 0 10px 0;
}

div.help-small-image {
    padding: 20px 0 10px 0;
    text-align: left;
}

div.help-image {
    padding: 40px 20px 40px 20px;
    text-align: center;
    position: relative;
    line-height: 16px;
}

/********************************************************************/

/* Tables */
.common-table,
.left-table {
    text-align: center;
    padding: 20px 0 20px 0;
}

.common-table table,
.left-table table {
    border: 3px solid #040;
    border-collapse: collapse;
    border-spacing: 2px;
    cell-spacing: 20px;
    font-size: 100%;
}

.common-table table {
    margin-left: auto;
    margin-right: auto;
}

.left-table th,
.common-table th {
    border: 1px solid #040;
    border-bottom: 3px double #040;
    background-color: #cfc;
    padding: 3px 10px;
}

.left-table td,
.common-table td {
    border: 1px solid #040;
    padding: 3px 10px;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

em {
    font-weight: bold;
}

.navi-next {
    padding-top: 5px;
    padding-right: 5px;
    text-align: right;
    float: right;
    width: 48%;
}

.navi-prev {
    padding-top: 5px;
    padding-left: 5px;
    text-align: left;
    float: left;
    width: 48%;
}

ul.list {
    margin-left: 20px;
    padding-left: 10px;
}

ul.list li {
    list-style-type: disc;
}


ul.help {
    margin-left: 0px;
    padding-left: 20px;
}

ul.help li {
    list-style-type: disc;
    margin-top: 20px;
    margin-right: 20px;
    width: 240px;
    float: left;
}

div #version {
    padding-top: 20px;
    text-align: left;
}

