/* ▼▼▼▼▼http:/sumire-law.com / css / common.css
_______________________________________________________ */
/* asakaho luis ryuta 2016 */



/* ▼▼▼▼▼change 960px
_______________________________________________________ */

body {
width: 100%;
height: 100%;
background-color: #fff;
text-align: center;
}






/* ▼▼▼▼▼画像のリンクをホバー時に半透明にする
_______________________________________________________ */

a:active, a:hover {
text-decoration: none;
opacity:0.7;
filter: alpha(opacity=70);
-moz-opacity: 0.70;
opacity: 0.70;
}






/* ▼▼▼▼▼ヘッダー
_______________________________________________________ */

header {
width: 960px;
margin: 0px auto;
}

h1 {
width: 420px;
float: left;
}


.access {
width: 283px;
float: right;
}






/* ▼▼▼▼▼ナビゲーション
_______________________________________________________ */

#nav {
width: 100%;
height: 70px;
text-align: center;
margin: 0px auto;
background-color: #333;
}


#gnavi {
width: 960px;
height: 70px;
margin: 0px auto;
}


#gnavi li {
height: 70px;
line-height: 3.5em;
margin: 0px 43px;
float: left;
}


#gnavi li a {
height: 70px;
color: #fff;
font-size: 16px;
font-weight: 600;
text-decoration: none;
text-align: center;
padding-top: 10px;
box-sizing: border-box;
display: block;
}


#gnavi li a:hover {
opacity: 0.5;
}






/* ▼▼▼▼▼プロモパネル
_______________________________________________________ */

#container {
height: 600px;
width: 100%;
}


#container div.link {
width: 200px;
height: 50px;
margin: 450px auto 0px;
}








/* ▼▼▼▼▼h2のエリア（メインカラムとナビカラム）
_______________________________________________________ */

.h2_back {
width: 100%;
margin: 0px auto;
padding: 30px 0px;
background-color: #689f38;
}


#handling .h2_back { background-color: #5aa572; }
#step .h2_back { background-color: #49aad2; }
#fee .h2_back { background-color: #d1a561; }
#office .h2_back { background-color: #cf737a; }


.container {
width: 960px;
text-align: left;
margin: 50px auto;
}


h2 {
width: 400px;
text-align: left;
float: left;
}


.contents_right {
width: 530px;
color: #fff;
font-size: 20px;
line-height: 2em;
text-align: left;
float: right;
}


.border {
border:  5px solid #fff;
box-sizing: border-box;
}







/* ▼▼▼▼▼左右のカラム（メインカラムとナビカラム）
_______________________________________________________ */

#main {
width: 960px;
margin: 100px auto;
}


.container {
width: 960px;
text-align: left;
margin: 50px auto;
}


.f_left {
text-align: left;
float: left;
}


.f_right {
text-align: left;
float: right;
}






/* ▼▼▼▼▼見出し
_______________________________________________________ */

h3 {
height: 30px;
color: #000;
font-size: 1.2em;
font-weight: 500;
text-align: left;
margin: 10px 0px;
padding: 10px;
background-color: #EFEBDF;
border: 1px solid #AF9A50;
}


#top .intro_sub h3 {
text-align: center;
font-size: 1em;
font-weight: 600;
margin-bottom: 30px;
}


#privacy h3 {
margin-bottom: 50px;
}	


#handling h4 {
background-color: #cdE4d4;
padding: 3px 6px;
margin-bottom: 10px;
}







/* ▼▼▼▼▼フッター
_______________________________________________________ */

footer {
width: 100%;
font-size: 0.95em;
margin-top: 0px;
padding-top: 30px;
background-color: #ccc;
box-sizing: border-box;
}


footer .container {
margin: 0px auto;
padding: 0px;
padding-bottom: 10px;
background-color: #ccc;
}


footer p {
margin-bottom: 15px;
}


footer .container .f_left {
width: 300px;
}


footer .container .f_right {
width: 630px;
}


#credit {
width: 960px;
text-align: center;
margin: 0px auto;
margin-top:20px;
margin-bottom: 0px;
padding-top: 10px;
border-top: 1px solid #666;
}


footer hr {
border-top: 1px solid #666;
margin: 20px auto;
} 


#footer_gotop {
width: 100%;
text-align: center;
margin-bottom: -10px;
}







/* ▼▼▼▼▼各コンテンツ内
_______________________________________________________ */


/* ▼▼▼トップページ */

.intro_top {
width: 960px;
font-size: 1.4em;
line-height: 2.5em;
margin: 0px auto;
padding: 80px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
box-sizing: border-box;
}

.intro_top p {
margin: 0px auto 40px;
}


.intro_sub {
width: 310px;
height: 635px;
margin: 0px 15px 0px 0px;
padding: 20px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
box-sizing: border-box;
float: left;
}


.last {
margin: 0px 0px 0px 0px;
float: right;
}


.intro_sub p {
margin-bottom: 30px;
}


.em_step {
color: #49aad2;
font-weight: 400;
}


.em_fee {
color: #d7a861;
font-weight: 400;
}


.em_office {
color: #cf737a;
font-weight: 400;
}


.intro_sub p img {
margin-right: 20px;
margin-bottom: 10px;
float: left;
}


.kuwashiku {
width: 100%;
text-align: center;
text-size: 1.4em;
background-color: #eee;
margin: 0px auto;
padding: 20px 10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #ccc;
box-sizing: border-box;
}


.kuwashiku a {
display:block;
width: 100%;
}






/* ▼▼▼取扱内容のエリア */

.intro {
width: 960px;
margin: 20px auto;
padding: 50px 50px 20px 50px;
border: 5px solid #5aa572;
box-sizing: border-box;
}

.em_handling {
font-size: 1.1em;
font-weight: 600;
color: #5aa572;
}


.case {
width: 230px;
height: 200px;
font-size: 0.95em;
line-height: 2em;
border: 1px solid #ccc;
padding: 10px;
margin: 20px 10px 0px 0px;
float: left;
box-sizing: border-box;
}







/* ▼▼▼ご依頼の流れのエリア */

/* 個人情報保護方針と同サイズの1カラム */
#step #main .container, #privacy #main .container {
width: 760px;
margin: 30px auto;
}

	
#step #main .container .f_left {
width: 300px;
}


#step #main .container .f_right {
width: 430px;
}


.memo {
width: 100%;
background-color: #eee;
margin: 0px auto;
padding: 20px 10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #ccc;
box-sizing: border-box;
}


.yajirushi {
text-align: center;
margin: 5px auto;
}







/* ▼▼▼弁護士費用のご案内のエリア */

/* オフィスのプロフィールのテーブル兼用 */

table.price, table.profile {
width: 750px;
border-spacing: 5px;
border-collapse: separate;
}

table.profile { width: 630px; }


table.price th, table.profile th {
padding: 6px 10px;
font-weight: bold;
text-align: left;
vertical-align: top;
color: #333;
background-color: #ccc;
border-spacing: 5px;
}


table.price td, table.profile td {
padding: 6px 10px;
border-spacing: 5px;
background-color: #f3e5cf;
}


table.price td.item, table.profile td.item {
width: 350px;
background-color: #eee;
border-spacing: 5px;
}


table.price td.item_fee {
width: 150px;
background-color: #eee;
border-spacing: 5px;
}


table.price th.half {
background-color: #DCDCDC;
}


table.profile td.item { width: 200px; }






/* ▼▼▼オフィスのご案内のエリア */

#office .f_left {
width: 300px;
}


#office .f_right {
width: 630px;
}


#office .f_left img.border {
box-shadow: 0 0 5px #ccc;
border: 5px solid #fff;
box-sizing: border-box;
}


#img.border_none {
border: none;
box-sizing: border-box;
}




/* オフィスのライトボックス */

ul.office_photo {
width: 530px;
}


ul.office_photo li {
width: 160px;
height: 160px;
margin: 5px;
float: left;
}


ul.office_photo li img {
border: 5px solid #eee;
box-sizing: border-box;
}



/* オフィスのご案内のテーブル */

table.company {
width: 960px;
margin: 0px;
border-spacing: 0px 5px;
font-size: 15px;
}


table.company th,
table.company td {
padding: 10px;
border: 5px solid #fff;
}


table.company th {
background: #cf737a;
vertical-align: middle;
text-align: left;
width: 100px;
overflow: visible;
position: relative;
color: #fff;
font-weight: normal;
font-size: 15px;
}


table.company th:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(113, 114, 179, 0);
border-left-color: #cf737a;
border-width: 10px;
margin-top: -10px;
}


/* firefox */
@-moz-document url-prefix() {
table.company th::after {
float: right;
padding: 0;
left: 30px;
top: 10px;
content: " ";
height: 0;
width: 0;
position: relative;
pointer-events: none;
border: 10px solid transparent;
border-left: #295890 10px solid;
margin-top: -10px;
}
}


table.company td {
background: #f8f8f8;
width: 300px;
padding-left: 20px;

#info .f_right {
width: 420px;
padding-left: 40px;
box-sizing: border-box;
}