/************ LIGHT VERSION  (DESIGN 2) **********/


/********** BASIC STYLING ******/


body {
	background: #eee;
	font-family: メイリオ,'meiryo';
}

#title {
	font: 42px 'meiryo', arial, serif;
	letter-spacing: 2px;
	margin: 40px 0;
	color: #666;
	text-align: center;
	text-shadow: 0 1px 0 #fff, 0 -1px 1px #000;
}

#serviceNavigation{
	margin-top:20px;
	margin-bottom:5px;
}

#kaishagaiyou{
	padding:30px 10px 30px 30px;
}

/*
#serviceRow img{
	margin-left:15px;
}*/


#serviceRow ul li {
	float:left;
	width:200px;
	margin-right:5px;
	margin-left:10px;
}

/*sixFeature*/
.sixFeature{
	width:938px;
	margin-bottom:30px;
}

.sixFeature img{
	display:block;
	margin:0 auto;
}

.sixFeatures{
	width:938px;
	margin-bottom:20px;
}

.sixFeatures img{
	display:block;
	margin:0 auto;
}

.clearPackGrid{
	clear:both;
}

#single .title{
position: relative;
margin-left: -30px;
display: block;
padding: 10px 15px;
font-size: 36px;
text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
color: #FFF;
background-color: #007AB7;
width: 700px;
margin-bottom: 30px;
}


/*タイトル部分のスタイリング*/

#pane1 .title, #pane2 .title{
    position: relative;
    margin-left: -30px;  /* はみ出させます */
    display: block;
    padding: 10px 15px;
    font-size: 36px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    color: #FFF;
    background-color: #007AB7;
    width:700px;
    margin-bottom: 30px;
}
#pane1 .title:after, #pane2 .title:after {
    position: absolute;
    left: 0px;
    bottom: -10px; /* border-bottomの高さと一致させる */
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border-right: 10px solid #9ACDE7; /* h3が親要素からはみ出した幅を指定 */
    border-bottom: 10px solid transparent;
}

#pane3 .title{
    position: relative;
    margin-left: -30px;  /* はみ出させます */
    display: block;
    padding: 10px 15px;
    font-size: 36px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    color: #FFF;
    background-color: #fba61c;
    width:740px;
    margin-bottom: 30px;
}
#pane3 .title:after {
    position: absolute;
    left: 0px;
    bottom: -10px; /* border-bottomの高さと一致させる */
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border-right: 10px solid #fcba4e; /* h3が親要素からはみ出した幅を指定 */
    border-bottom: 10px solid transparent;
}


#pane4 .title{
    position: relative;
    margin-left: -30px;  /* はみ出させます */
    display: block;
    padding: 10px 15px;
    font-size: 36px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    color: #FFF;
    background-color: #62b5e7;
    width:840px;
    margin-bottom: 30px;
}
#pane4 .title:after {
    position: absolute;
    left: 0px;
    bottom: -10px; /* border-bottomの高さと一致させる */
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border-right: 10px solid #a4d4f1; /* h3が親要素からはみ出した幅を指定 */
    border-bottom: 10px solid transparent;
}

/***********  STYLING THE RUSUTAKU CONTENTS ************/

.titleLead{
	font-size:24px !important;
	font-weight: bold;
	margin-bottom:30px;
}

.subLead{
	margin-bottom:10px;
}

#mainservice-menu{
	margin-top:40px;
}

#mainservice-menu .mainservice-menu-group:after {
clear: both;
content: "";
display: block;
}

#mainservice-menu .mainservice-menu-unit {
float: left;
margin-right: 20px;
width: 292px;
}

#mainservice-menu .mainservice-menu-unit:hover {
opacity: 0.8;
}

/*サービスTOP*/

.serviceFeature{
	clear:both;
	margin-top:40px;
}

.serviceFeature h2{
	border-left:8px solid #007FB1;
	padding-left:10px;
}

.serviceFeatureLast h2{
	border-left:8px solid #007FB1;
	padding-left:10px;
}

.serviceFeature ul li{
	clear:both;
	overflow:hidden;
	margin-bottom:10px;
    padding-bottom:10px;
    border-bottom: 1px dotted red;
}

.serviceFeature ul li:last-child {
    border: none;
}


.serviceFeature ul li img{
	float:left;
	width:300px;
	height:200px;
}

.serviceFeature ul li p{
	margin-left:10px;
	margin-bottom: 8px;
	padding-top:10px;
	font-size:16px;
}

.serviceFeature ul li p.btn{
	margin-top:0px;
}

/*あんしんプラン*/

.subLeadImg img{
	display: block;
	margin:30px auto;
}

.serviceTitleIcons{
	margin-right: 8px;
}


.anshinService ul li{
	float:left;
	width:215px;
	margin-right:10px;
	margin-bottom: 30px;
}

.anshinService ul li:last-child{
	margin-right:0px;
}

.anshinserviceTitle{
	font-size:16px;
	margin-bottom:3px;
	text-align: center;
}

.cleardrive{
	clear:both;
}

#shikiriGrid{
	margin-top:40px;
	border-top:3px solid #8E8E8E;
}

#shikiriGrid .anshinService{
	margin-top:30px;
}

/*個別プラン*/

.kobetsuMerit{
	border-top:1px dotted #999;
}

.kobetsuMerit img{
	display: block;
	margin:20px auto;
	margin-bottom: 10px;
}

/***********  STYLING THE TAB SYSTEM ************/

#tab-area {
    width: 980px;
    margin: 0px auto 0 auto;
}

.dummy{
    outline: none;  /* For IE */
}

/* Styles for the tabs */
.tabs {
    position: relative;
    list-style: none;
}

.tabs li {
    position: relative;
    width: 150px;
    height: 38px;
	float: left;
	cursor: pointer;
	font: bold 14px  メイリオ, "Meiryo", Myriad, Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;
	letter-spacing: 1px;
	border-right:  1px solid #aaa;
	-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    margin-right:20px;
}

.tabs li:first-child {
	margin-left: 30px;
	border-left: 1px solid #888;
	-moz-border-radius: 8px 0 0 0;
    -webkit-border-radius: 8px 0 0 0;
    border-radius: 8px 0 0 0;
}

.tabs li:last-child {
	border-right: 1px solid #888;
	-moz-border-radius: 0 8px 0 0;
    -webkit-border-radius: 0 8px 0 0;
    border-radius: 0 8px 0 0;
}


.tabs a {
    display: block;
    height: 38px;
    position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 2;
    color: #fff;
    text-decoration: none;
	text-align: center;
	line-height: 38px;
	outline: none;
}

/* Style for span tag that causes active/current tab highlighting */
.tabs li .active {/*クリックしたあとの色*/
    position: absolute;
	display: none;
    top: -10px;
	left: -3px;
	width: 160px;
	height: 48px;
    z-index: 1;
	-moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
	-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

/* Code to achieve inverted round corners at bottom of #active */
.tabs li .active:before {
	content: '';
	position: absolute;
	top: 40px;
	left: -10px;
	width: 10px;
	height: 8px;
	background: transparent;
	-moz-border-radius: 0 0 18px 0;
	-webkit-border-radius: 0 0 18px 0;
	border-radius: 0 0 18px 0;
}

.tabs li .active:after {
	content: '';
	position: absolute;
	top: 40px;
	left: 107px;
	width: 10px;
	height: 8px;
	background: transparent;
	-moz-border-radius: 0 0 0 18px;
	-webkit-border-radius: 0 0 0 18px;
	border-radius: 0 0 0 18px;
}

/* The strip between the tabs and the panes */
.tab-strip {/*ラインの部分*/
	content: '';
	position: relative;
	clear: both;
	z-index: 1;
	height: 10px;
	width: 980px;
	-moz-border-radius: 8px 8px 0 0;
	-webkit-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}


/* Styles for the panes and their parent wrapper */
.panes {/*コンテンツ*/
    width: 978px;
    border: 1px solid #aaa;
	border-top: none;
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}

.panes > div {
    padding: 20px;
	display:none;  /* This is important */
}


/******************** THE TAB SWITCHING FUNCTIONALITY **************/

/* On page load with no hash tag in url, display first pane and highlight first tab */
	.panes > div:first-of-type { display: block;}
	.tabs li:first-child .active { display: block;}


/* On url hash change first hide all panes and remove highlight from all tabs */
.dummy:target .panes > div { display:none;}
.dummy:target .tabs li .active { display: none;}


/* After the previous step now display the appropriate pane */
#first:target .panes > div:nth-of-type(1) ,
#second:target .panes > div:nth-of-type(2) ,
#third:target .panes > div:nth-of-type(3) ,
#fourth:target .panes > div:nth-of-type(4) {
	display:block;
}

/* And also highlight the appropriate tab */
#first:target .tabs li:nth-child(1) .active,
#second:target .tabs li:nth-child(2) .active,
#third:target .tabs li:nth-child(3) .active, 
#fourth:target .tabs li:nth-child(4) .active{
	display: block;
}


/* tab color Design */
/************ LIGHT VERSION **********/

.light .tabs li {
	background-color: #aaaaaa;
	background-image: -moz-linear-gradient(top, #aaaaaa, #444444); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #aaaaaa),color-stop(1, #444444)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#aaaaaa', EndColorStr='#444444'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#aaaaaa', EndColorStr='#444444')"; /* IE8 */
}

.light .tabs li .active {
	background-color: #45A1CF;
	background-image: -moz-linear-gradient(top, #0B2B61, #45A1CF); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0B2B61),color-stop(1, #45A1CF)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#0B2B61', EndColorStr='#45A1CF'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#0B2B61', EndColorStr='#45A1CF')"; /* IE8 */
}

.light .tabs li .active:before {
	border: 3px solid #45A1CF;
	border-top: none;
	border-left: none;
}

.light .tabs li .active:after {
	border: 3px solid #45A1CF;
	border-top: none;
	border-right: none;
}

.light .tab-strip {
	background: #45A1CF;
}

.light .panes, .light .panes-scroll, .light .no-bg > div {
	background-color: #ffffff;
}

.light .panes > div, .light .panes-scroll > div {
	color: #000;
}

.light .panes > div h2, .light .panes-scroll > div h2 {
	color: #000;
}



/************** DARK VERSION ***************/

.dark .tabs li {
	background-color: #222222;
	background-image: -moz-linear-gradient(top, #888888, #222222); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #888888),color-stop(1, #222222)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#888888', EndColorStr='#222222'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#888888', EndColorStr='#222222')"; /* IE8 */
}

.dark .tabs li .active {
	background-color: #09f;
	background-image: -moz-linear-gradient(top, #003355, #0099ff); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #003355),color-stop(1, #0099ff)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#003355', EndColorStr='#0099ff'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#003355', EndColorStr='#0099ff')"; /* IE8 */
}

.dark .tabs li .active:before {
	border: 3px solid #09f;
	border-top: none;
	border-left: none;
}

.dark .tabs li .active:after {
	border: 3px solid #09f;
	border-top: none;
	border-right: none;
}

.dark .tab-strip {
	background: #09f;
}

.dark .panes, .dark .panes-scroll, .dark .no-bg > div {
	background-color: #101010;
	background-image: -moz-linear-gradient(top, #777777, #101010); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #777777),color-stop(1, #101010)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#777777', EndColorStr='#101010'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#777777', EndColorStr='#101010')"; /* IE8 */
}

.dark .panes > div, .dark .panes-scroll > div {
	color: #f5f5f5;
}

.dark .panes > div h2, .dark .panes-scroll > div h2 {
	color: #0df;
}



/************** BROWN VERSION ***************/

.brown .tabs li {
	background-color: #7F5727;
	background-image: -moz-linear-gradient(top, #7F5727, #3F2B14); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7F5727),color-stop(1, #3F2B14)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#7F5727', EndColorStr='#3F2B14'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7F5727', EndColorStr='#3F2B14')"; /* IE8 */
}

.brown .tabs li .active {
	background-color: #CFAB81;
	background-image: -moz-linear-gradient(top, #7F694F, #CFAB81); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7F694F),color-stop(1, #CFAB81)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#7F694F', EndColorStr='#CFAB81'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7F694F', EndColorStr='#CFAB81')"; /* IE8 */
}

.brown .tabs li .active:before {
	border: 3px solid #CFAB81;
	border-top: none;
	border-left: none;
}

.brown .tabs li .active:after {
	border: 3px solid #CFAB81;
	border-top: none;
	border-right: none;
}

.brown .tab-strip {
	background: #CFAB81;
}

.brown .panes, .brown .panes-scroll, .brown .no-bg > div {
	background-color: #EFCCA4;
	background-image: -moz-linear-gradient(top, #EFCCA4, #9F6C31); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #EFCCA4),color-stop(1, #9F6C31)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#EFCCA4', EndColorStr='#9F6C31'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#EFCCA4', EndColorStr='#9F6C31')"; /* IE8 */
}

.brown .panes > div, .brown .panes-scroll > div {
	color: #242424;
}

.brown .panes > div h2, .brown .panes-scroll > div h2 {
	color: #242424;
}



/************** RED VERSION ***************/

.red .tabs li {
	background-color: #c7a199;
	background-image: -moz-linear-gradient(top, #c7a199, #a26559); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c7a199),color-stop(1, #a26559)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#c7a199', EndColorStr='#a26559'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#c7a199', EndColorStr='#a26559')"; /* IE8 */
}

.red .tabs li .active {
	background-color: #9F2A13;
	background-image: -moz-linear-gradient(top, #AF786D, #9F2A13); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #AF786D),color-stop(1, #9F2A13)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#AF786D', EndColorStr='#9F2A13'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#AF786D', EndColorStr='#9F2A13')"; /* IE8 */
}

.red .tabs li .active:before {
	border: 3px solid #9F2A13;
	border-top: none;
	border-left: none;
}

.red .tabs li .active:after {
	border: 3px solid #9F2A13;
	border-top: none;
	border-right: none;
}

.red .tab-strip {
	background: #9F2A13;
}

.red .panes, .red .panes-scroll, .red .no-bg > div {
	background-color: #ffffff;
	background-image: -moz-linear-gradient(top, #ffffff, #cccccc); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #cccccc)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#cccccc'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#cccccc')"; /* IE8 */
}

.red .panes > div, .red .panes-scroll > div {
	color: #000;
}

.red .panes > div h2, .red .panes-scroll > div h2 {
	color: #000;
}



/************** GREEN VERSION ***************/

.green .tabs li {
	background-color: #3cc436;
	background-image: -moz-linear-gradient(top, #a1e49d, #3cc436); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #a1e49d),color-stop(1, #3cc436)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#a1e49d', EndColorStr='#3cc436'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#a1e49d', EndColorStr='#3cc436')"; /* IE8 */
}

.green .tabs li .active {
	background-color: #34aa2e;
	background-image: -moz-linear-gradient(top, #174c15, #34aa2e); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #174c15),color-stop(1, #34aa2e)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#174c15', EndColorStr='#34aa2e'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#174c15', EndColorStr='#34aa2e')"; /* IE8 */
}

.green .tabs li .active:before {
	border: 3px solid #34aa2e;
	border-top: none;
	border-left: none;
}

.green .tabs li .active:after {
	border: 3px solid #34aa2e;
	border-top: none;
	border-right: none;
}

.green .tab-strip {
	background: #34aa2e;
}

.green .panes, .green .panes-scroll, .green .no-bg > div {
	background-color: #ffffff;
	background-image: -moz-linear-gradient(top, #ffffff, #cccccc); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffffff),color-stop(1, #cccccc)); /* Saf4+, Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#cccccc'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#cccccc')"; /* IE8 */
}

.green .panes > div, .green .panes-scroll > div {
	color: #000;
}

.green .panes > div h2, .green .panes-scroll > div h2 {
	color: #000;
}