@charset "UTF-8";

/* Table of Content
==================================================
1.  Global Styles
2.  Typography
3.  Common styles
4.  Header area
5.  Slideshow
6.  Intro area
7.  Services
8.  Practice area
9.  Content
10. Facts
11. Content bottom
12. Clients
13. Footer
14. Copyright
15. Home 2
16. Banner area
17. Testimonials Page
18. Attorneys
19. Our Firm
20. Action
21. News Listing
22. Sidebar
23. Contact page
24. Features
25. Style Switcher (you can delete the css)
*/

@import url(http://fonts.googleapis.com/css?family=Fira+Sans:300,400);

@font-face {
  font-family: 'ElegantIcons';
  src:url('fonts/ElegantIcons.eot');
  src:url('fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
    url('fonts/ElegantIcons.woff') format('woff'),
    url('fonts/ElegantIcons.ttf') format('truetype'),
    url('fonts/ElegantIcons.svg#ElegantIcons') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Global styles
================================================== */
html{
  overflow-x: hidden !important;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body{
  border: 0;
  margin: 0;
  padding: 0;
  color: #28262c;
  font-size: 14px;
  background: #fff;
  position: relative;
}

a{
  color: #004679;
}

a:link,
a:visited{
    text-decoration: none;
}

a:hover{
  color: #14C28C;
  text-decoration: none;
  cursor: pointer;
}
a:focus{
  outline: 0;
}

section{
  position: relative;
}

.gap-80 {
  clear: both;
  height: 80px;
}

.gap-40 {
  clear: both;
  height: 40px;
}

.gap-30 {
  clear: both;
  height: 30px;
}
.gap-20 {
  clear: both;
  height: 20px;
}

ul{
  list-style-type: none;
}
.m20{
  margin: 20px 0px;
}
.m30{
  margin: 30px 0px;
}
.m40{
  margin: 40px 0px;
}
.ml{
  margin-left: 40px;
}

/*override Bootstrap
=========================*/
.no-padding-container{/* .containerのパディングを消す */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Typography
================================================== */

body, p{
  font-family: 'Fira Sans', "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 400; 
  font-size: 14px;
  line-height: 1.8;
}
/*
h1, h2, h3, h4, h5, h6 {
   見出しごとのfont-size:line-height:font-weight: 必要になったらここに書く　
}*/

/* Button
=========================*/
.btn-main {
  /* ボタンの基本スタイル: 必要になったらここに書く　*/
}

.btn-primary{
  width: 100%;
  border: 1px solid #004679;
  padding: 12px 32px;
  font-weight: 700;
  border-radius: 0px;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease ;
  transition: all .3s ease-in-out ;
  margin: 10px 0px;
  text-transform: capitalize;
  background: transparent;
  color: #004679;
  font-size: 16px;
}
.btn-primary:hover{
  background: #14C28C;
  color: #fff;
  border: 1px solid#fff;
}

.btn-colorname{
  /* ボタンの色違い: 必要になったらここに書く　*/
}


/* Picture frame imgの縁取り
=========================*/
.picture-frame {
  padding: 3px;
  border: 1px solid #ddd;  
}


/* Common styles 
================================================== */
/* セクション間のpaddingを統一 */
#principle,#service,#infomation{
  padding-bottom: 70px;
}


/* Table
=========================*/
.table-normal {
  width: 100%;
  background: #f5f5f5;  
  border: 1px solid #d9d9d9;
}

.table-normal dt:first-child {
  border-top: none;
}

.table-normal dt {
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;  
  background-color: #f5f5f5;
  float: left;
  clear: both;
  width: 30%;
  padding: 19px;
  border-top: 1px dotted #a19a93;
  font-weight: bold;  
}

.table-normal dd {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  float: right;
  width: 70%;
  padding: 19px;
  border-top: 1px dotted #a19a93;
  border-left: 1px solid #d9d9d9;
  background: #fff;
}

.table-history {
  margin-top: 20px;
}

.table-normal dt:first-child + dd{
  border-top: none;
}

.table-inner dt {
  width: 20%;
  padding: 8px;
  background-color: initial;
  border-top: none;
  font-weight: 400;
}

.table-inner dd {
  width: 80%;
  padding: 8px;
  border-top: none;
  border-left: none;
}

/*header title
=========================*/

.header-desc{
  margin-bottom: 60px;
}
.big-title{
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  text-transform: uppercase;
  border-right: 1px solid #004679;
  border-left: 1px solid #004679;
  width: 35%;
  margin:0 auto;
  padding: 40px 0px;
}
.sub-title{
  text-transform: uppercase;
  font-weight: 700;
  padding-top: 10px;
  margin-bottom: 25px;
  position: relative;
}
.sub-title:before{
  position: absolute;
  width: 40px;
  height: 2px;
  background: #444;
  left: 0px;
  top: 0px;
  content:"";
}
.header-content {
  border-bottom: 1px solid #004679;
  margin-bottom: 30px;
}
.header-content span{
  color: #555;
  display: none;
}

/*header middle
=========================*/
.header-middle{
  margin: 20px auto;
  margin-bottom: 30px;
}
.middle-title{
  font-size: 25px;
  line-height: 40px;
  font-weight: 700;  
}
.header-middle .line{ 
  width: 50px;
  height: 3px;
  margin: 0 auto;
  background: #004679;
}
.middle-subtitle{
  margin: 20px 0;
}

/*MENU
======================================*/
#nav-wrap{
  background-color: rgba(0,0,0,0);
  position: fixed;
  left: 0;
  right: 0;
  height: 110px;
  z-index: 1000;
}

.have-lower-nav #nav-wrap{
  background-color: rgba(0,0,0,0.5);
}  

.navbar{
  margin-bottom: 0px;
}

.navbar-header {
  padding-right: 20px;
  border-right: 1px solid#ccc;
  z-index: 1;    position: relative;
}

#tf-menu {
  padding: 15px;
  transition: all 0.8s;
}
#tf-menu.navbar-default {
  background-color: rgba(248, 248, 248, 0);
  border-color: rgba(231, 231, 231, 0);
  border-bottom: 1px solid#ccc;
}

#tf-menu .navbar-brand {
  background:  url(/common/img/logo.png) no-repeat left center;
  display: block;
  background-size: contain;
  height: 0;
  width: 220px;
  padding-top: 50px;
  font-weight: 900;
}

#tf-menu.navbar-default .navbar-nav > li > a {
  text-transform: uppercase;
  color: #FFF;
  font-size: 13px;
  letter-spacing: 1px;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 700;
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;  
}

#tf-menu.navbar-default .navbar-nav > li > a:hover,
.company-page .nav-company,
.mission-page .nav-mission,
.service-page .nav-service,
.contact-page .nav-contact
 {
  background: #14C28C;
}

.navbar-collapse{
  position: relative;
  max-height: 100% !important;
}

.navbar-nav > li {
  position: static;
}

.on,
.lower-page .navbar-lower-page
{
  background-color: #28262C !important;
  padding: 0px !important;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
  background-color: transparent;
}
.on.navbar-default .navbar-brand,
.navbar-lower-page.navbar-default .navbar-brand
{
  /*padding-left: 90px;*/
}

.lower-nav{
  display: none;
  position: absolute;
  right: 0;
  bottom: -30px;
}

.company-page .company-lower-nav,
.service-page .service-lower-nav
{
  display: block;
}



.lower-nav > li {
  display: block;
  float: left;
}

.lower-nav > li a{
  padding: 10px;
  color: #FFF;
  font-size: 13px;
  letter-spacing: 1px;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 700;  
}


/* Header area
================================================== */

/*-- Header solid fixed --*/

/*topimg
=========================*/

#topimg{
  padding: 0px;
  height: 700px;
  overflow: hidden;
  background: url(/common/img/topimg-sky.jpg) fixed;
  background-size: cover;
}

.overlay {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(/common/img/overaly.png);
  content:"";
}

.slider-content{
  top: 40%;
  margin-top: -70px;
  left: 0px;
  padding: 0px;
  text-align: center;
  position: absolute;
  width: 100%;
  color: #FFF;
  z-index: 2;
}
.slider-content h3{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;   
  font-size: 45px;
  line-height: 45px;
}
.slider-content h3 span{
  font-weight: 100;
}
.slider-content h2{
  font-family: 'Fira Sans', "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 300;   
  font-size: 48px;
  line-height: 48px;
  /* text-transform: uppercase; */
}
.slider-content h5{
  font-family: 'Fira Sans', "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  position: relative;
  margin: 200px auto 0px;
  font-size: 18px;
  font-weight: 300;
  line-height: 24px;
}

.slider-content a{
  color: #fff;
  font-size: 30px;
  line-height: 50px;
  padding: 9px 13px 5px;
  border: 1px solid#fff;
  border-radius: 50%!important;
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  margin-top: 20px;
}
.slider-content a i{
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  margin-top: 20px;
}

.slider-content a:hover {
  cursor: pointer;
  background-color: #14C28C;
}


/* Footer top
=========================*/
#footer-top {
  background: #fff;
}

/*-- Bread list --*/
.bread-list-area {
  border-bottom: 1px solid #004679;
  border-top: 1px solid #ccc;  
}

.bread-list {
  margin: 0;
  padding: 0;
}

.bread-list-item{
  display: inline-block;
  line-height: 50px;
  color: #999999;
}

.bread-list-item a{
  color: #004679;
}

.bread-list-item a:hover{
  color: #14C28C;
  -webkit-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;   
}

.bread-list-item i{
  font-size: 20px;
  vertical-align: -2px;
}

.bread-list-item span{
  padding: 0 10px;
}

/*-- Footer top list --*/
.footer-top-listarea{
  padding: 30px 0;
}

.footer-top-listbox a{
  color: #28262c;
}

.footer-top-listbox a:hover{
  color: #14C28C;
}

.footer-top-listhead{
  font-size: 16px;
}

.footer-top-listhead i {
  display: inline-block;
  width: 25px;
  height: 22px;
  margin-right: 10px;
  text-align: center;
  padding-top: 3px;
  font-size: 14px;
  color: #fff;
  background: #004679;
  border-radius: 15px;
}

.footer-top-listitem{
  margin: 15px 0;
  line-height: 1;
}



/*FOOTER
==========================*/
#footer{
  padding: 40px 0px;
  background: #28262c url(/common/img/bg-footer.png) no-repeat right top;
  border-top: 10px solid #434650;
}

.footer-nav{
  text-align: center;
}
.footer-nav li{
  display: inline-block;
  margin: 0 14px;
}
.footer-nav li a{
  color: #fff;
}

.copyright-info{
  color: #fff;
  margin: 50px 0 0;
}


/* Lower pages 下層ページの共通スタイル
================================================== */
/*-- Lower topimg --*/
#lower-topimg{
  height: 340px;
  overflow: hidden;
  background-size: cover; 
  background-repeat: no-repeat;  
}

.lower-topimg-header {
  z-index: 2;
  position: relative;
  margin-top: 150px;
  text-align: center;
}


#lower-topimg.lower-topimg-short {/* サブタイトルが無い場合 */
  height: 260px;
}

.lower-topimg-short .lower-topimg-header{/* サブタイトルが無い場合 */
  margin-top: 120px;
}

.lower-topimg-title {
  font-size: 40px;
  color: #fff;
  font-weight: bold;
}

.lower-topimg-line {
  width: 50px;
  height: 3px;
  margin: 0 auto;
  background: #004679;  
}

.lower-topimg-text {
  margin-top: 20px;
  color: #fff;
} 

.lower-topimg-title-noimg {/* ページ上部に背景画像が無い場合 */
  color: #28262c;
}

.lower-topimg-text-noimg {/* ページ上部に背景画像が無い場合 */
  color: #28262c;  
}

/*-- Thumnail & Caption --*/
.thumbnail{
  margin-bottom: 10px;
  border-radius: 0px;
  padding: 3px;
}

.caption{
  color: #28262c;
}

.caption-title-box {
  display: table;
  margin: 10px 0; 
}

.caption-icon,.caption-title{
  display: table-cell;
  vertical-align: middle;
}

.caption-icon{
  height: 50px;
  width: 36px;
  padding-right: 10px;
  color: #004679;  
}
.caption-icon i{
  background: none;
  color: #004679;
  text-align: center;
  line-height: 32px;
  width: 36px;
  height: 36px;
  border: 1px solid #004679;
  border-radius: 100%;
  font-size: 30px;
  vertical-align: -3px;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

a:hover .caption-icon i{
  background: #14C28C;
  color: #fff;
  border-color: #14C28C;  
}

.caption-title{
  font-weight: bold;
  font-size: 20px;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;  
}

a:hover .caption-title{
  color: #14C28C;
}


/* Responsive styles
================================================== */

/* Large Devices, Wide Screens */
@media (min-width : 1200px) {

}


/* Medium Devices, Desktops */
@media (min-width : 992px) and (max-width: 1200px) {

/*MENU
======================================*/ 
.navbar-nav {
  margin-right: 5px;
}
.navbar-nav > li> a {
    margin-right: -20px;
}
#tf-menu a.navbar-brand {
    font-size: 14px;
    bottom: 0px!important;
}
#tf-menu.navbar-default .navbar-nav > li > a {
    font-size: 14px
}


/*Topimg
==========================================================*/
#topimg{
  padding-top: 80px;
  height: 650px;
}
.slider-content h2 {
    font-size: 42px;
    line-height: 42px;
}

}

/* Small Devices, Tablets */
@media (min-width : 768px) and (max-width: 991px) {


/*MENU
======================================*/
#tf-menu.navbar-default {
    background-color: #28262C;
}
.navbar-nav {
  margin-right: 5px;
}
.navbar-nav > li> a {
    margin-right: -20px;
}
#tf-menu a.navbar-brand {
    font-size: 14px;
    bottom: 0px!important;
}
#tf-menu.navbar-default .navbar-nav > li > a {
    font-size: 12px
}


/*Topimg
===========================*/

#topimg{
  margin-top: 80px;
  height: 350px;
}

.slider-content {
  padding-bottom: 20px;
  /* top: 30%; */
}
.slider-content h2 {
    font-size: 30px;
    line-height: 30px;
}
.slider-content h3{
  font-size: 25px;
  line-height: 25px;
}
.slider-content h5{
  margin-top: 70px;
}
.slider-content a {
    color: #FFF;
    font-size: 20px;
    line-height: 25px;
    padding: 5px 9px;
    margin-bottom: 20px;
} 

.slider-content h5:before,.slider-content h5:after{
  display: none;
}

/*Title HEADING
============================*/
.big-title {
    font-size: 25px;
    font-weight: 700;
    line-height: 50px;
    width: 50%;
    padding: 15px 0px;
}


}


/* Custom, iPhone Retina */ 
@media (min-width : 320px) and (max-width: 767px)  {

/* Common styles 
================================================== */
/* Table
=========================*/
.table-normal dt{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;  
  box-sizing: border-box;
  float: none;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: #efefef;
}

.table-normal dd{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  float: none;
  width: 100%;
  padding: 12px 14px;
  border: none;
}

.table-history {
  margin-top: 15px;
  background: #fff;
}

.table-history dd {
  float: right;
}

.table-normal dt:first-child + dd{
  border-top: none;
}

.table-inner dt {
  float: left;
  width: 32%;
  padding: 8px;
  background-color: initial;
  border-top: none;
  font-weight: 400;
}

.table-inner dd {
  float: right;
  width: 68%;
  padding: 8px;
  border-top: none;
  border-left: none;
}

/*MENU
======================================*/
.have-lower-nav #nav-wrap{
  background-color: rgba(0,0,0,0.0);
}

.navbar-header {
  padding-right: 0;
  border-right: none;
}
#tf-menu.navbar-default {
    background-color: #333;
}
.on.navbar-default .navbar-brand {

}

.lower-nav {
  position: static;
  background: #666;
}

.lower-nav > li {
  width: 50%;
}


.lower-nav > li a {
  display: block;
}


/*Topimg
===============================*/

#topimg{
  margin-top: 80px;
  height: 260px;
}

.slider-content {
  padding-bottom: 20px;
}
.slider-content h2 {
    font-size: 24px;
    line-height: 24px;
}
.slider-content h3{
  font-size: 18px;
  line-height: 16px;
  margin-top: 10px;
}


.slider-content h5 {
  font-size: 10px;
  line-height: 15px;
  width: 100%;
  margin-top: 30px;
}
.slider-content a {
    color: #FFF;
    font-size: 20px;
    line-height: 25px;
    padding: 5px 10px;
    margin-bottom: 20px;
}
.slider-content a i{
  margin-top: 15px;
} 

.slider-content h5:before,.slider-content h5:after{
  display: none;
}

/*Title HEADING
============================*/
.big-title {
    font-size: 25px;
    font-weight: 700;
    line-height: 50px;
    width: 70%;
    padding: 15px 0px;
}



/* Infomation section
=====================================*/
 
.news-content .date,
.news-content .text
{
  float: none;
  width: 100%;
}

/*FOOTER
==========================*/
#footer-top {
  display: none;
}

#footer{
  padding: 20px 0px;

}

.footer-nav {
  padding: 0;
}

.footer-nav li{
  display: block;
  margin: 20px 14px;
  font-size: 16px;
}


.copyright-info{
  margin: 20px 0 0;
}


/* Lower pages 下層ページの共通スタイル
================================================== */
/*-- Lower topimg --*/
#lower-topimg{
  height: 200px;
}

.lower-topimg-header {
  margin-top: 80px;
}


#lower-topimg.lower-topimg-short {/* サブタイトルが無い場合 */
  height: 200px;
}

.lower-topimg-short .lower-topimg-header{/* サブタイトルが無い場合 */
  margin-top: 80px;
}

.lower-topimg-text {
  display: none;
} 
}

/* company-info
=====================================*/
.dd-title {
  margin-top: 0;
  font-size: 16px;
  font-weight: bold;
}
.mt30 {
  margin-top: 30px;
}