@charset "utf-8";

*{margin:0;padding:0;}

/*********************
　フォント、文字色
*********************/
body{
font: 16px/1.4 "メイリオ","Meiryo",arial,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
color:#252525;
}

/********************* 
　文字色・サイズ指定
**********************/
/** 赤字 */
.redChara1 {color: #ff0000;}

/** 赤字 太文字1 */
.redChara1Bold {
color: #ff0000;
font-weight: bold;
}

/** 赤字 太文字2 */
.redChara2Bold{
color: #ff0000;
font-size: 17px;
font-weight: bold;
}

/** 赤字 太文字3 */
.redChara3Bold{
color: #ff0000;
font-size: 21px;
font-weight: bold;
}

/** オレンジ */
.orangeChara {color: #FF6D00;}

/** 文字サイズ1 */
.fontSize1{font-size: 17px;}

/** 文字サイズ2 太字 */
.fontSize1Bold{
font-size: 14px;
font-weight: bold;
}

/** 文字サイズ2 太字 */
.fontSize2Bold{
font-size: 18px;
font-weight: bold;
}

/** 文字サイズ3 太字 */
.fontSize3Bold{
font-size: 20px;
font-weight: bold;
}

/**************
　文章の位置
***************/

/** 位置：右　*/
.rightSet{text-align: right;}

/** 位置：中央　*/
.centerSet{text-align: center;}

/** 位置：左　*/
.leftSet{text-align: left;}

/** 位置：上　*/
.topSet{vertical-align: top;}


/************
　背景指定
*************/
/****** 白地に色枠　********/
/** オレンジ枠　*/
.orangeBorder {
border: 3px #FF6D00 solid;
background: #ffffff;
}

/** 薄黄色枠　*/
.lightyellowBorder {
border: 3px #ffb366 solid;
background: #ffffff;
}

/** 薄黄色枠2　*/
.lightyellowBorder2 {border: 3px #FFF1A7 solid;}

/** 青枠　*/
.blueBorder {
border: 3px #00A0B2 solid;
background: #ffffff;
}

/** 白地に紫枠　*/
.violetBorder {
border: 3px #ffaaff solid;
background: #ffffff;
}

/*************
　画像関連
**************/

/** 回り込み解除 **/
.clear{clear:both;}

/** タイトルバー　*/
.line {
width: 100%;
height: 5px;
vertical-align: top;
}

/** タイトルバー（小）*/
.line_s {
width: 100%;
height: 3px;
vertical-align: top;
}


/*************
　リスト
**************/

.list{margin: 0 0 0 2%;}
.list li{margin: 0 2% 2.5%;}

/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	.list{margin: 0 0 0 5%;}
}
@media only screen and (max-width: 326px){
	.list{margin: 0 0 0 5%;}
}

/*************
　全体
*************/
/** 背景画像 */
#backgroundColor {background: url(../image/backImage.gif) ; }

/** 幅 */
#wrapper{
margin: 0 auto;
width: 880px;
}

.description{
margin: 0 2.5%;
width: 96%;
}

/** 例文の場合 */
.example{
margin: 0 4%;
width: 90%;
}

/** 文章内の改行切り替え */
.msg {
color: #ff0000;
font-size: 21px;
font-weight: bold;
margin: 1% 0;
text-align: center;
}
.msg div{
display: inline;
padding: 0;
}

/** 注釈の場合 */
.notes{text-align: right;}


/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	#wrapper{
		margin: 0 auto;
		width: 100%;
	}
	.msg {font-size: 19px;}
	.msg div{display: inline-block;}
	.notes{font-size: 13px;}
}
@media only screen and (max-width: 326px){
	#wrapper{
		margin: 0 auto;
		width: 100%;
	}
	.msg {font-size: 19px;}
	.msg div{display: inline-block;}
	.notes{font-size: 13px;}
}

/*************
 トップタイトル
*************/
#topTitle {
width: 89.5%;
margin: 0 auto;
padding: 0 2%;
font-size: 16px;
background-color: #9F6E28;
color: #ffffff;
font-weight: normal;
text-align: right;
}
#topTitle span {display: inline;}

/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	#topTitle{
		font-size: 14px;
		font-weight: bold;
		text-align: center;
	}
	#topTitle span {display: inline-block;}
}

/*************
　ヘッダー
*************/
#header{
margin: 0 3.2%;
padding: 0.1% 2% 0;
background: #ffffff;
}

#header p {
width: 48%;
margin: 1% 0;
font-weight: normal;
background: url(../image/head.png) ;
font-size: 17px;
text-align: center;
}

/** トップ画像 */
#header .co_logo {
width: 277px;
height: 98px;
background-image: url(../image/company1.png) ;
background-size: 100% auto;
background-repeat: no-repeat;
margin: 0;
float: right;
}

#header .top_photo {
width: 620px;
height: 302px;
background-image: url(../image/top_img1.jpg) ;
background-size: 100% auto;
background-repeat: no-repeat;
margin: 1% 0 0 10%;
float: left;
}

/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	#header p {
		width: 100%;
		font-size: 13px;
	}
	#header .co_logo {
		float: none;
		height: 80px;
		background-image: url(../image/company2.png) ;
		margin: 0 auto;
	}
	#header .top_photo {
		width: 285px;
		height: 246px; 
		background-image: url(../image/top_img2.jpg) ;
		background-size: 95% auto;
		background-repeat: no-repeat;
		margin: 0 4%;
		float: none;
	}
}
@media only screen and (max-width: 326px){
	#header p {
		width: 100%;
		font-size: 13px;
	}
	#header .co_logo {
		float: none;
		width: 277px;
		height: 80px;
		background-image: url(../image/company2.png) ;
		margin: 0 auto;
	}
	#header .top_photo {
		width: 285px;
		height: 246px; 
		background-image: url(../image/top_img2.jpg) ;
		background-size: 95% auto;
		background-repeat: no-repeat;
		margin: 0 4%;
		float: none;
	}
}
/** 印刷用設定　*/
@media print{
#header .co_logo {
		display: list-item;
		list-style-image: url(../image/company1.png) ;
		list-style-position: inside;
	}
	#header .top_photo {
		height: 340px;
		display: list-item;
		list-style-image: url(../image/top_img1.jpg) ;
		list-style-position: inside;
	}
}

/******************
 トップメニュー
******************/

ul#topMenu{
margin: 0 3.1%;
height: 46px;
}

ul#topMenu li{
float:left;
list-style:none;
width: 24.7%;
padding: 2% 0;
border: 1px #ffb366 solid;
background-color: #f08e3e;
text-align: center;
}

/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	ul#topMenu li{width: 49.5%;}
}
@media only screen and (max-width: 326px){
	ul#topMenu li{width: 49.5%;}
}

ul#topMenu a{color:#000000;text-decoration:none;}
ul#topMenu a:hover{color:#ffffcc;}
ul#topMenu a:active, a:focus {outline: 0;}


/*********
　メイン
*********/
.main {
margin: 3%;
padding: 1.5% 2%;
}

/*********
　ご挨拶
*********/
.name div {
display: inline;
padding: 0 1% 0 1%;
}

/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	.name div {
		display: inline-block;
		padding: 0 2% 0 2%;
	}
}
@media only screen and (max-width: 326px){
	.name div {
		display: inline-block;
		padding: 0 2% 0 2%;
	}
}


/**************************
　相続手続きスケジュール
**************************/

/** スケジュール表用テーブル */
#scheduleBox{
margin: 1.5% auto;
}
#scheduleBox .scheduleTitleImg{
width: 582px;
height: 50px;
background-image:url(../image/title1.png);
background-size: 100% auto;
background-repeat: no-repeat;
}

#scheduleBox .arrowImg{
width: 205px;
height: 20px;
}

.scheduleTable{
width: 100%;
border: 1px #000000 solid;
}

.scheduleTable th{
padding: 0 auto;
border: 1px #000000 solid;
background-color: #00A0B2;
color:#ffffff
}
.scheduleTable td{
border: 1px #000000 solid;
padding: 0.8% 0.5%;
}
.scheduleTitle{
display: inline-block;
padding: 0;
}

/** セル幅 */
.scheduleTableWidth1{width: 7%;}
.scheduleTableWidth2{width: 20%;}
.scheduleTableWidth3{width: 42%;}
.scheduleTableWidth4{width: 62%;}


/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	#scheduleBox .scheduleTitleImg{
		width: 282px;
		height: 40px;
		margin: 0 auto;
		background-image:url(../image/title2.png);
	}
	.scheduleTable{font-size: 13px;}
	.scheduleTitle{display: inline;}
}
@media only screen and (max-width: 326px){
	#scheduleBox .scheduleTitleImg{
		width: 282px;
		height: 40px;
		margin: 0 auto;
		background-image:url(../image/title2.png);
	}
	.scheduleTable{font-size: 13px;}
	.scheduleTitle{display: inline;}
}
/** 印刷用設定　*/
@media print{
	#scheduleBox .scheduleTitleImg{
		display: list-item;
		list-style-image: url(../image/title1.png);
		list-style-position: inside;
	}
	.scheduleTable{border: 1px #000000 solid;}
	.scheduleTable th{
		border: 1px #000000 solid;
		color:#000000
	}
	.scheduleTable td{border: 1px #000000 solid;}
}

/**************************
　ご自身で手続きすると
**************************/

/** 注意（画像） */
#attention {
width: 633px;
height: 286px;
margin: 0 10%;
background-image: url(../image/at1.png);
background-size: 100% auto;
background-repeat: no-repeat;
}

/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	#attention{
		width: 287px;
		height: 275px;
		margin: 0 auto;
		background-image: url(../image/at2.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
}
@media only screen and (max-width: 326px){
	#attention{
		width: 287px;
		height: 275px;
		margin: 0 auto;
		background-image: url(../image/at2.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
}
/** 印刷用設定　*/
@media print{
	#attention{
		display: list-item;
		list-style-image: url(../image/at1.png);
		list-style-position: inside;
	}
}

/********************
　精度の高い検証
********************/
/** 画像回り込み */
.check{
float: right;
width: 252px;
height: 180px;
margin: 0 2%;
}


/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	.check{
		float: none;
		margin: 0 0 3% 11%;
	}
}
@media only screen and (max-width: 326px){
	.check{
		float: none;
		width: 255px;
		margin: 0 0 3% 5%;
	}
}


/**********************
　事前登録のメリット
**********************/

.advantageList{margin: 0 0 0 2%;}
.advantageList li{margin: 0 0 2.5%;}

/** 割引サービス用テーブル */
.serve {
width: 70%;
margin: 0.5% 15%;
border: 1px #000000 solid;
background-color: #ffffff;
text-align: center;
}
.serve th{
width: 25%;
padding: 1% 0;
border: 1px #000000 solid;
background-color: #ffd700;
font-size: 15px;
font-weight: normal;
}
.serve td{
width: 25%;
padding: 1% 0;
border: 1px #000000 solid;
}

.serve tr td:nth-of-type(2){
color: #ff0000;
font-weight: bold;
}

/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	.serve {
		width: 100%;
		margin: 0.5%;
	}
	.serve tr td:nth-of-type(2){font-weight: normal;}
	.advantageList{margin: 0 5%;}
}
@media only screen and (max-width: 326px){
	.serve {
		width: 100%;
		margin: 0.5%;
	}
	.serve tr td:nth-of-type(2){font-weight: normal;}
	.advantageList{margin: 0 5%;}
}
/** 印刷用設定　*/
@media print{
	.serve {border: 1px #000000 solid;}
	.serve th{
		border: 1px #000000 solid;
		font-weight: bold;
	}
	.serve td{border: 1px #000000 solid;}
}

/***************
　報酬規程
***************/

/** 基本・加算報酬表　*/
.costTable1{
width: 45%;
margin: 0 1% 0 3%;
float: left;
}
.costTable2{
width: 100%;
border: 1px #000000 solid;
}
.costTable2 th{
padding: 1% 1.7%;
border: 1px #000000 solid;
background-color: #00A0B2;
color:#ffffff
}
.costTable2 td{
padding: 1% 2%;
border: 1px #000000 solid;
}

.costTable2 tr td:nth-of-type(2) {text-align: center;}


/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	.costTable1{
		width: 100%;
		margin: 0;
		float: none;
	}
	.costTable2 td {font-size: 13px;}
	.costTable2 tr td:nth-of-type(1) {width: 55%;}
}
@media only screen and (max-width: 326px){
	.costTable1{
		width: 100%;
		float: none;
	}
	.costTable2 td {font-size: 13px;}
	.costTable2 tr td:nth-of-type(1) {width: 53%;}
}
/** 印刷用設定　*/
@media print{
	.costTable2{border: 1px #000000 solid;}
	.costTable2 th{
		border: 1px #000000 solid;
		color:#000000;
	}
	.costTable2 td{border: 1px #000000 solid;}
}


/***************
　無料事前登録
***************/

/** ボタン */
.button a{
display:block;
margin: 0 auto;
width:287px;
height:63px;
text-indent:-9999px;
}
/** メール用 */
.button a.mailButton1{background-image:url(../image/mail1.png);}
.button a.mailButton1:hover{background-position:left bottom;}

.button a.mailButton2{background-image:url(../image/mail2.png);}
.button a.mailButton2:hover{background-position:left bottom;}

/** フリーダイヤル用 */
.phoneButton1{
display:block;
margin: 0 auto;
width:285px;
height:63px;
text-indent:-9999px;
background-image:url(../image/phone1.png);
}

/** 緊急問い合わせ用 */
.phoneButton2{
display:block;
margin: 0 auto;
width:285px;
height:63px;
text-indent:-9999px;
background-image:url(../image/phone2.png);
}



/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	.button a.phoneButton1:hover{background-position:left bottom;}
	.button a.phoneButton2{margin: 0 auto;}
	.button a.phoneButton2:hover{background-position:left bottom;}
}
@media only screen and (max-width: 326px){
	.button a.phoneButton1:hover{background-position:left bottom;}
	.button a.phoneButton2{margin: 0 auto;}
	.button a.phoneButton2:hover{background-position:left bottom;}
}
/** 印刷用設定　*/
@media print{
	.button a{
		display:list-item;
		text-indent:1px;
	}
	.button a.mailButton1{
		list-style-image: url(../image/mail1-2.png);
		list-style-position: inside;
	}
	.button a.mailButton2{
		list-style-image: url(../image/mail2-2.png);
		list-style-position: inside;
	}
	.phoneButton1{
		text-indent:1px;
		display: list-item;
		list-style-image: url(../image/phone1-2.png);
		list-style-position: inside;
	}
	.phoneButton2{
		text-indent:1px;
		display: list-item;
		list-style-image: url(../image/phone2-2.png);
		list-style-position: inside;
	}
}

/***会社概要ページ***********************************************************/
/** 社員情報 */
.staff div{
display: inline-block;
padding: 0 1.5% 0 1.5%;
}
.staff div:nth-of-type(2){padding: 0 1.5% 0 5%;}
.staff div:nth-of-type(5){padding: 0 1.5% 0 5%;}
.staff div:nth-of-type(8){padding: 0 1.5% 0 14.5%;}

/** 事務所情報 */
.office div{
display: inline-block;
padding: 0 1.5% 1.5% 27%;
}
.office div:nth-of-type(1){padding: 0 1.5% 0 5%;}
.office div:nth-of-type(2){padding: 0 1.5% 0 8.3%;}
.office div:nth-of-type(3){padding: 0 1.5% 0 0;}
.office div:nth-of-type(4){padding: 0 1.5% 0 27%;}
.office div:nth-of-type(6){padding: 0 1.5% 0 5%;}
.office div:nth-of-type(7){padding: 0 1.5% 0 6.5%;}
.office div:nth-of-type(9){padding: 0 1.5% 0 5%;}
.office div:nth-of-type(10){padding: 0 1.5% 0 2.5%;}

#area li{margin: 0 8%;}

/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	/** 社員情報 */
	.staff div {padding: 0 0 0 15%;}
	.staff div:nth-of-type(1) {padding: 0;}
	.staff div:nth-of-type(2) {padding: 0 0 0 7%;}
	.staff div:nth-of-type(5) {padding: 0 0 0 7%;}
	.staff div:nth-of-type(8) {padding: 0 70% 0 7%;}
	/** 会社情報 */
	.office div {padding: 0 0 0 15%;}
	.office div:nth-of-type(1) {padding: 0 20% 0 0;}
	.office div:nth-of-type(2) {padding: 0 0 0 10%;}
	.office div:nth-of-type(3) {padding: 0 0 0 25%;}
	.office div:nth-of-type(4) {padding: 0 0 0 15%;}
	.office div:nth-of-type(6) {padding: 0;}
	.office div:nth-of-type(7) {padding: 0 0 0 10%;}
	.office div:nth-of-type(7) {padding: 0 0 0 10%;}
	.office div:nth-of-type(9) {padding: 0;}
	.office div:nth-of-type(10) {padding: 0 0 0 10%;}
}
@media only screen and (max-width: 326px){
	/** 社員情報 */
	.staff div {padding: 0 0 0 15%;}
	.staff div:nth-of-type(1) {padding: 0;}
	.staff div:nth-of-type(2) {padding: 0 0 0 7%;}
	.staff div:nth-of-type(5) {padding: 0 0 0 7%;}
	.staff div:nth-of-type(8) {padding: 0 0 0 7%;}
	/** 会社情報 */
	.office div {padding: 0 0 0 15%;}
	.office div:nth-of-type(1) {padding: 0 20% 0 0;}
	.office div:nth-of-type(2) {padding: 0 0 0 10%;}
	.office div:nth-of-type(3) {padding: 0 0 0 25%;}
	.office div:nth-of-type(4) {padding: 0 0 0 15%;}
	.office div:nth-of-type(6) {padding: 0;}
	.office div:nth-of-type(7) {padding: 0 0 0 10%;}
	.office div:nth-of-type(9) {padding: 0;}
	.office div:nth-of-type(10) {padding: 0 0 0 10%;}
}



/***相続のしくみページ***********************************************************/

.system {
width: 469px;
height:520px;
margin: 0 auto;
background-image:url(../image/system1.png);
background-size: 100% auto;
background-repeat: no-repeat;
}

/***************
　法定相続分
***************/
.circleGraph {
width: 527px;
height:310px;
margin: 0 15%;
background-image:url(../image/circleGraph1.png);
background-size: 100% auto;
background-repeat: no-repeat;
}

/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	.system {
		width: 268px;
		height:528px;
		margin: 0 auto;
		background-image:url(../image/system2.png);
		background-size: 100% auto;
	}
	.circleGraph {
		width: 235px;
		height:360px;
		margin: 0 auto;
		background-image:url(../image/circleGraph2.png);
		background-size: 100% auto;
	}

}
@media only screen and (max-width: 326px){
	.system {
		width: 282px;
		height:560px;
		margin: 0 0 0 2.3%;
		background-image:url(../image/system2.png);
		background-size: 100% auto;
	}
	.circleGraph {
		width: 280px;
		height:435px;
		margin: 0;
		background-image:url(../image/circleGraph2.png);
		background-size: 100% auto;
	}
}
/** 印刷用設定　*/
@media print{
	.system {
		display: list-item;
		list-style-image: url(../image/system1.png);
		list-style-position: inside;
	}
	.circleGraph {
		display: list-item;
		list-style-image: url(../image/circleGraph1.png);
		list-style-position: inside;
	}
}



/***お問い合わせページ***********************************************************/
.formAria{
width: 70%;
margin: 0 auto;
}

#formTable{
width: 100%;
margin: 0 auto;
border: 1px #000000 solid;
font-size: 13px;
}
#formTable th{
width: 26%;
border: 1px #000000 solid;
padding: 1%;
background-color: #FFBF80;
text-align: left;
}
#formTable td{
height:30px;
border: 1px #000000 solid;
padding: 1%;
}

/** 問い合わせ種類 */
#inquiryData span{
display: inline-block;
width: 28%;
margin: 0 0 0 2%;
}

/** 名前 */
#name input{width: 40%;}

/** メールアドレス */
#email input{width: 70%;}

/** 電話 */
#tel input{width: 40%;}

/** 郵便番号 */
#yubin input:nth-of-type(1){width: 10%;}
#yubin input:nth-of-type(2){width: 10%;}

/** 住所 */
#address{width: 100%;}
#address input{width: 90%;}
#address tr td:nth-of-type(1){
width: 20%;
text-align: right;
}
#address td{
border: 0px;
margin: 1% auto;
padding: 0.1%;
}

/** 問い合わせ */
#msg textarea{
width: 93%;
height:130px;
}

#formTable input,select,textarea{
margin: 1% 2%;
padding: 1%;
font-size: 15px;
}

/** 送信・リセットボタン **/
#inputButton input{
width: 15%;
margin: 1% 1%;
padding: 1%;
font-size: 16px;
}


/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	.formAria{width: 100%;}
	#formTable{
		width: 100%;
		font-size: 12px;
	}
	#formTable th{width: 25%;}
	#formTable input,select,textarea{font-size: 10px;}
	/** 問い合わせ種類 */
	#inquiryData span{width: 90%;}
	/** 名前 */
	#name input{width: 90%;}
	/** メールアドレス */
	#email input{width: 90%;}
	/** 電話 */
	#tel input{width: 90%;}
	/** 郵便番号 */
	#yubin input:nth-of-type(1){width: 20%;}
	#yubin input:nth-of-type(2){width: 20%;}
	/** 住所 */
	#address input{width: 95%;}
	#address tr td:nth-of-type(1){width: 27%;}
	/** 問い合わせ */
	#msg textarea{width: 92%;}
	/** ボタン */
	#inputButton input{width: 40%;}
}
@media only screen and (max-width: 326px){
	.formAria{width: 100%;}
	#formTable{
		width: 100%;
		font-size: 12px;
	}
	#formTable th{width: 25%;}
	#formTable input,select,textarea{font-size: 10px;}
	/** 問い合わせ種類 */
	#inquiryData span{width: 90%;}
	/** 名前 */
	#name input{width: 90%;}
	/** メールアドレス */
	#email input{width: 90%;}
	/** 電話 */
	#tel input{width: 90%;}
	/** 郵便番号 */
	#yubin input:nth-of-type(1){width: 20%;}
	#yubin input:nth-of-type(2){width: 20%;}
	/** 住所 */
	#address input{width: 95%;}
	#address tr td:nth-of-type(1){width: 27%;}
	/** 問い合わせ */
	#msg textarea{width: 92%;}
	/** ボタン */
	#inputButton input{width: 40%;}
}
/** 印刷用設定　*/
@media print{
	#formTable{border: 1px #000000 solid;}
	#formTable th{border: 1px #000000 solid;}
	#formTable td{border: 1px #000000 solid;}
	#address td{border: 0px;}
}


/***用語集ページ***********************************************************/
#wordsIndex {
width: 78%;
margin: 0 auto 3%;
}
#wordsIndex li{
float:left;
list-style:none;
}
#wordsIndex a{text-decoration: none;}
#wordsIndex a:link{color: #0000ff;}
#wordsIndex a:visited{color: #0000ff;}
#wordsIndex a:hover{color: #ff0000;}

.words{
margin: 0 4%;
width: 90%;
}

/** モバイル用設定　*/
@media only screen and (max-width: 768px){
	#wordsIndex {width: 85%;}
	.words{
		margin: 0 6%;
		width: 95%;
	}
}


/***各用語ページ***********************************************************/
#wordsExp h1{font-size: 23px;}
#wordsExp h2{
margin: 3% 0 0;
font-size: 20px;
}
#wordsExp .h3indent{
margin: 2% 0 0 5%;
}
#wordsExp h3{
font-size: 17px;
}