﻿/*======  内容  ========
=01 body general 810 774
=02 navi 
=03 navi・JQuery プルダウンメニュー
=04 TopSection
=05 Topのarticle:box
=06 Topのarticle:y-box
=07 branding・explain・profile:dl：680
=08 plans:dl
=09 option article:table :740
=10 explain article : table 
=11 explain article : appendix 
=12 explain article : supplement 
=13 profile
=14 renraku
=15 footer
====================*/
/*=01 body general ---------*/
@charset "utf-8";
*{margin:0;padding:0;vertical-align: baseline;}

html{color:#336633;
	font-size:13px;
	line-height:1.6;
	font-family:Helvetica,Arial,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,sans-serif;/* ベースフォント指定 */
	background:url("images/1600.jpg") 50% #FFDAB9 ;}

body{font-size:77%;}
body{width:800px;
	padding:0 1.8%;
	margin-left:auto;margin-right:auto;
	position:relative;
	text-align:center;}
header,section,article,aside,footer,{display:block;}
#branding,#option,#contract,#plans,#explain,#renraku{margin-top:70px;}

h1{margin-top:10px;
	background:url("images/h1.gif") no-repeat;
	text-align:left;text-indent:30px;
	font-size:110%;
	line-height:1.8;}

h2{font:bold 160%/2.4 Georgia,'Hiragino Mincho proN','MS PMincho',serif;}
.sub{font-size:118%;
	margin-top:0.4rem;}

li{list-style:none;}

a:link{text-decoration:none;
	font-weight:bold;
	color:#666633;}
a:visited{text-decoration:none;
	font-weight:bold;
	color:#666633;}
a:hover{background-color:#EBF0DC;}
/*=02 header naviG------------------*/

#naviG{position:absolute;top:28px;left:28px;z-index:1000;
	height:50px;
	margin-left:auto;margin-right:auto;}
#naviG ul li{float:left;
	position:relative;}
#naviG ul li a{display:block;
	padding:18px 8px 18px 10px;
	font-size:140%;
	color: #FFFFFF;
	background: url("images/navi00.jpg") no-repeat 0 0;
	overflow:hidden;}
#naviG ul li a:hover{background: url("images/navi01.jpg") no-repeat 0 0;}
#naviGutility{font-size:110%;text-align:right;
	position:absolute;right:8px;bottom:60px;}
.verticalT{vertical-align:text-bottom;border-style:none;}
/*=03 navi・JQuery プルダウンメニュー------------------*/
ul#sub{position:absolute;top:50px;left:4px;}
ul#sub li a {display:block;width:170px;text-align:left;
	padding:14px 10px 14px 40px;color:#141E17;
	background:url("images/sub00.png") 0 0 ;border:solid 1px #333333;}
ul#sub li a:hover{background:url("images/sub.png") ;}
/*-Javaが使えない時の回避策指定--*/
div.noscript ul li ul#sub {display:none;}

/*=04 topSection ---------------------*/
#topSection{background:url("images/topSection.jpg") no-repeat;
	margin-top:50px;min-height:408px;}
#topSection h2{width:370px;line-height:1.8;
	margin:0 0 8px 400px;
	padding:23px 10px 18px 10px;
	background:url("images/h2TopSection.png");}
#topSection p{text-align:left;
	font-size:130%;
	padding:0 28px 13px 400px;}

/*=05 top article:topPlan :box------------------*/
#topPlan {overflow:hidden;}
#topPlan .img{width:168x;border-radius:20px;background-color:#8fbc8f;
	padding:6px;margin:18px auto 6px auto;}

#topPlan h2{background:url("images/h2.gif") no-repeat left center;
	padding:8px 0 0 0;}
#topPlan .box {width:240px;min-height:360px;
	background:#faebd7;border-radius:20px;
	float:left;
	margin:16px 10px 16px 14px;}

#topPlan h3{font:bold 160% "ＭＳ Ｐ明朝","Hiragino Mincho Pro",serif;
	padding-top:8px;}

#topPlan .box p{padding:1em 10% 1em 14%;
	text-align:left;
	font-size:130%;}
/*=06 top article:topPlaBoxY ----------------*/

#topPlan .boxY{width:568px;min-height:148px;
	background:#faebd7;border-radius:30px;
	float:left;
	margin:10px 0 0 14px;}

#topPlan .boxY h3{font:bold 140% "ＭＳ Ｐ明朝","Hiragino Mincho Pro",serif;
	letter-spacing:0.4em;
	padding:10px 0 10px 0;}
.imgY{background:#8fbc8f;border-radius:20px;
	padding:8px;float:left;
	margin:10px auto auto 10px;}

#topPlan .boxY table{width:328px;display:inline_block;
	margin:0 auto 0 208px;}
#topPlan .boxY td{font-size:130%;text-align:left;
	border-bottom:dotted 2px #333333;}

.aside {width:218px;min-height:148px;
	float:right;
	margin:10px auto auto;}
.aside ul{text-align:left;
	font-size:130%;}
.aside li :before{content:"★";color:#666633;margin:3px;}
.aside li a:hover{color:#00cc99;}

#second{width:589px;padding:1em 1em 1em 2em;
	text-align:left;
	font-size:130%;
	border:double 4px #333333;border-radius:10px;
	margin:18px auto 8px auto;}

/*=07 branding・explain・profile:dl-------------------------*/

dl{width:680px;text-align:left;margin:20px auto 20px auto;}
dt{margin-top:28px;
	font:bold 160%/1.4 "ＭＳ Ｐ明朝","Hiragino Mincho Pro",serif;
	text-indent:48px;
	padding:14px 0 10px 0;
	background:url("images/dt.jpg") no-repeat left center;
	border:solid 1px #333333;
	border-radius:13px;}
dd{font:normal 158%/1.6 "ＭＳ Ｐ明朝","Hiragino Mincho Pro",serif;
	margin:1em 40px 1em 40px;}

.vertical{/*-ボタン-*/vertical-align:bottom;border-style:none;}

/*=08 plans:dl-------------------------*/
#plans{margin-top:70px;}

#plans h2{background:url("images/h2.gif") no-repeat;
	letter-spacing:3px;
	margin:50px auto 28px auto;}
#plans a{text-decoration:underline;color:#0088CC;}
#plans dt{padding:18px 0 10px 14px;
	background:url("images/profile.gif") no-repeat;
	border:none;}

.instance{padding-bottom:8px;}

#plans ul{margin:0 0 0 18px;}
.regulation{background:url("images/plan.gif") no-repeat left center;
	padding:0 0 0 28px;}
.ashiya{background:url("images/h1.gif") no-repeat left center;
	padding:0 0 0 28px;}
.example{background:url("images/case.gif") no-repeat left center;
	padding:0 0 0 28px;}
.attention{border:double 4px #333333;border-radius:10px;
	margin:4px 40px 8px 40px;
	padding:14px 24px;}

.redesign{background:url("images/liRedesign.gif") no-repeat left center;
	padding:0 0 0 28px;}

.reference{background:url("images/reference.gif") no-repeat left center;
	padding:30px 0 23px 80px;
	margin:18px auto 45px auto;}
.ref {background:url("images/profile.gif") no-repeat left center;
	padding:18px 0 10px 0;
	border:none;}
/*=09 optionの article:table ----------------------------------*/
#option table{width:740px;text-align:left;
	font-size:130%;
	table-layout:auto;
	margin:10px auto 10px auto;
	border:double 6px #888888;
	padding:10px;}

#option th{width:140px;padding-left:18px;}
#option td{line-height:1.6;padding:8px 13px 8px 13px;}
.short{width:40px;vertical-align:middle;}
.wide{width:68px;vertical-align:middle;}
.verticalM{vertical-align:middle;}
#option tr:nth-of-type(odd){background-color:#f0f8ff;}

/*=10 explain article : table ---------------------------------------*/
#explain h2{background:;}
#explain h3{font-size:160%;background-color:#AFEEEE;
	border-radius:13px;
	padding:10px ;
	margin:14px 20px;
	text-align:center;}
#explain p{text-align:left;
font-size:134%;}
.td1{width:774px;height:260px;
	background:url("images/pages.jpg") no-repeat;
	border:double 4px #333333;border-radius:13px;}

.placeTd1{padding:0 28px 0 400px;}
.td2 {width:270px;}
.placeTd2{padding:0 28px 10px 28px;}
.td3{margin:18px 0 8px 0 ;}
.placeTd3{padding:0 0 0 18px;}
.td4{width:480px;height:138px;background:url("images/upload.jpg") no-repeat;}
.placeTd4{padding:0 18px 0 178px;}
.td5{height:268px;background:url("images/place.jpg") no-repeat;}
.placeTd5{padding:0 14px 8px 278px;}
.td6{height:248px;background:url("images/td6.jpg") no-repeat;
	border:double 4px #333333;border-radius:13px;}
.placeTd6{padding:0 480px 0 80px;}
.placeTd6 p{margin-top:18px;}

/*=11 explain article : appendix ---------------------------------------*/
#appendix {padding:0 0 18px 118px;}
#appendix p{line-height:1.6em;margin:1em;}
#appendix ul{font-size:140%;
	text-align:left;line-height:1.3em;
	box-shadow:18px 18px 20px tan inset;
	-webkit-box-shadow:18px 18px 20px tan inset;
	border-radius:20px;
	padding:18px 0 14px 40px;
	margin:0 140px 0 0;}
#appendix li::before{content:"★";color:#666633;margin:3px;}
#appendix li a{display:inline-block;
	padding:7px 14px;color:#00cc99;
	text-decoration:underline;}
#appendix li a:hover{background-color:#EBF0DC;color:#00cc99;}

/*=12 explain article : supplement ---------------------------------------*/

#supplement {padding:14px 48px 18px 48px;}
#supplement p{line-height:1.6;margin:1;}

#supplement h2{background:url("images/h2Explain.jpg") no-repeat left center;}
#supplement .wow{width:540px;margin:28px auto;
	border:double 4px #333333;border-radius:13px;}
#supplement .wow h2{background:url("");
	margin:18px 0 18px 0;}
#supplement .wow p{font-size:130%;
	margin:0 1em 1em 4em;}

/*=13 profile --------------------------------------------------*/
#profile{margin-top:80px;}
#profile dt{padding:18px 0 10px 0;
	background:url("images/profile.gif") no-repeat center center;
	border:none;}
/*=14 renraku --------------------------------------------------*/
#formMail table{width:680px;margin:10px auto 10px auto;}
#formMail th{background:url("images/must.jpg") no-repeat 8px 50%;
	width:278px;
	font-size:140%;vertical-align:middle;
	border:solid 1px #333333;
	padding:13px 0 13px 38px;}
#formMail td {border:solid 1px #333333;}
#formMail input{padding:13px 0 13px 0;
	float:left; margin:0;font-size:140%;}

#formMail .center{margin:0 0 20px 300px;}
#formMail .btn {background:#f5deb3;padding:14px;font-weight:bold;
	font-size:140%;
	border-style:outset;border-radius:6px;
	margin:18px 80px 23px auto;}
#renraku p{font-size:140%;}
/*=15 footer --------------------------------------------------*/
.foot{clear:both;margin:28px auto 8px auto;
	font-size:130%;
	padding-top:23px;border-top:dotted 2px #333333;}
.foot a:hover{background:#ffffff;}

