/* ★★外部データ読み込み★★ */

/* アニメーション */
@import url("animate.css");

/* 共通テキスト */

h1 {
	font-family: 'Noto Sans JP', sans-serif;
  	font-size: 1.6rem;
	font-weight: 400;
	line-height: 70px;
	color: #000000;
	margin-left: 30px;
}

h2 {
  	font-family: 'Noto Sans JP', sans-serif;
  	font-size: 3.6rem;
	font-weight: 300;
	line-height: 1.2;
	color: #000000;
	margin-top: 3px;
}

h3 {
	font-family: 'Noto Sans JP', sans-serif;
  	font-size: 3rem;
	font-weight: 300;
	line-height: 1.2;
	color: #6fb92c;
	margin-top: 5px;
}

.h3title{
	margin-bottom: 10px;
}

.h3title:before {
    content: url(../images/mark.png);
}

h4 {
  	font-size: 2rem;
	font-weight: 400;
	line-height: 1.4;
	color: #000000;
	margin-top: 10px;
}

h5 {
  	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.4;
	color: #000000;
	margin-top: 10px;
}

p {
  	font-size: 1.6rem;
	font-weight: 300;
	line-height: 2;
	color: #000000;
	/*margin-top: 20px;*/
}



@media screen and (max-width:1200px) {

h2 {
	font-size: 3rem;
}		
	
h3 {
  	font-size: 2.4rem;
}	
	
h4 {
  	font-size: 1.8rem;
}	
	
}

@media screen and (max-width:768px) {
	
h1 {
	margin-left: 10px;
}
	
h2 {
	font-size: 2.6rem;
}
	
h3 {
  	font-size: 2rem;
}
	
h4 {
  	font-size: 1.6rem;
}	
	
p {
  	font-size: 1.4rem;
}
	
}

@media screen and (max-width:568px) {

}


/* 個別テキスト */
.intro{
	font-size: 3rem;
	font-weight: 400;
}
.intro span{
	color: #6fb92c;
}

.trouble-sub{
	margin-bottom: 40px;
}
.trouble-co{
	font-size: 2.6rem;
	font-weight: 400;
}

.trouble-co span{
	color: #6fb92c;
	font-family: 'Fjalla One', sans-serif;
}

.h2mb{
	margin-bottom: 70px;
}

.lawyer-name{
	font-size: 2.4rem; 
}

@media screen and (max-width:768px) {	
.intro{
	font-size: 2.2rem;
	font-weight: 300;
}
.trouble-co{
	font-size: 2rem;
	font-weight: 300;
}
.lawyer-name{
	font-size: 2rem; 
}
	
	
}



/* 取扱業務項目 */
.works-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  background:rgba(255,255,255,0.75);
  border-radius: 50%;
  width: 200px;
  height: 200px;
  color: #000000;
  font-size: 2.0rem;
	margin: 10px;
}

@media screen and (max-width:1200px) {

.circle {
  width: 160px;
  height: 160px;
  font-size: 1.8rem;
}	
}


@media screen and (max-width:768px) {
.circle {
  width: 130px;
  height: 130px;
  font-size: 1.6rem;
	margin: 5px;
}
}




/* ★★メニューエリア★★ */

.menu-area {
	width: 100%;
	height: 155px;
	display: block;
  	font-size: 0;
	background-color: #fff;
	position:fixed;
	z-index: 10000;
}

.top-title {
	width:100%;
	position: absolute;
	top: 50%;
	left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
	color: #ffffff;
	font-size: 3.6rem;
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	font-weight: 600;
}


.main-t {
	width: 350px;
	display: inline-block;
	float: left;
	margin-top: 5px;
}

.title{
	font-size: 1.2rem;
	margin-left: 30px;
	margin-top: 5px;
}

.main-wrap{
	display: flex;
}
.main-left{
	width:70%;
}
.main-tel{
	width: 30%;
	margin-top: 25px;
	text-align: right;
}

.main-tel i{
	margin-right: 8px;
	font-size: 3.5rem;
}

.main-tel span.tel{
	font-size: 3.0rem;
	font-family: 'Fjalla One', sans-serif;
	color: #6fb92c;
}

.main-tel span.time{
	font-size: 1.4rem;
}



/* ★★トップメインビジュアル★★ */

.top-slide {
	width: 100%;
	height: 85vh;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	display: block;
	background-image: url(../images/topimg.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
}



/* トップ　相続・交通事故エリア　*/
.trouble-wrap{
  display: flex;
}

.trouble-left,
.trouble-right{
	width: 50%;
	padding: 50px 2%;
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	color: #ffffff;
}

.trouble-left{	
	background-image: url(../images/inheritance-back.jpg);
}
.trouble-right{
	background-image: url(../images/traffic-back.jpg);
}

.trouble-left::after,
.trouble-right::after {
  content: '';
  background-color: rgba(0,0,0,0.1);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}	
.tb-h2,.trouble-wrap2,.trouble-sub,.btn1{
	position: relative;
	z-index: 1;
}	
	

.trouble-wrap2{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
}

.square {
  display: flex;
  align-items: center;
  justify-content: center;
  background:rgba(0,0,0,0.3);
  border:solid #ffffff 1px;
  width: 200px;
  height: 76px;
  color: #ffffff;
  font-size: 2.0rem;
	margin: 10px;
}


@media screen and (max-width:1200px) {
	
.square {
  width: 180px;
  font-size: 1.8rem;
}			
}



/* 事例紹介 */
.example-wrap{
	display: flex;
}
.example-left,.example-right{
	width: 50%;
}
.example-left{
	padding-right: 7%;
}
.example-right{
	padding-left: 7%;
}

/* Googleマップ レスポンシブ対応*/
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 40%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}


@media screen and (max-width:992px) {
.top-title {
  	font-size: 3.0rem;
}

.menu-area {
	width: 100%;
	height: 50px;
}
	
.main-t {
	width: 200px;
	display: inline-block;
	float: left;
	margin-top: 12px;
}

.title,.main-tel{
	display: none;	
}	
	
	
.trouble-wrap{
  display:block;
}	
	
.trouble-left,
.trouble-right{
	width: 100%;
}	
/*	
.trouble-left::after,
.trouble-right::after {
  background-color: rgba(0,0,0,0.1);
}
*/	
	
	
.example-wrap{
	display: block;
}
.example-left,.example-right{
	width: 100%;
}
.example-left{
	padding-right: 0;
}
.example-right{
	padding-left: 0;
}		
.emb{
	margin-bottom: 40px;
}	
	
}

@media screen and (max-width:768px) {
.top-title{
	font-size:2.8rem;
}	
	
.square {
  width: 160px;
  font-size: 1.6rem;
}		
	
}

@media screen and (max-width:568px) {
.top-title{
	font-size:2.6rem;
}
		
.square {
	width: 45%;
	margin: 0.5%;
}	
}

@media screen and (max-width:400px) {
.top-title{
	font-size:2.2rem;
}
}	



/* 共通エリア */

.ts-back01,.ts-back03,.ts-back04{
	display: block;
	width: 100%;
	height: auto;
	padding-top: 100px !important;
	padding-bottom: 100px !important;
	background-color: #ffffff;
}

.ts-back02{
	width: 100%;
	height: auto;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
}

.ts-back03{
	background-image: url(../images/work-back.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	color: #ffffff;
}

.ts-back04{
	background-image: url(../images/lawyer-back.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
	color: #ffffff;
}


footer {
	position: relative;
	width: 100%;
	background-color: #6fb92c;
	padding-top: 30px !important;
	padding-bottom: 20px !important;
}

footer p {
	color: #ffffff;
	font-size: 1.2rem;
	letter-spacing: 1px;
}

footer a{
	color: #ffffff;
	font-weight: 300;
}

.foo-wrap{
	display: flex;
}

.foo-left {
	width: 70%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0;
	margin-bottom: 30px;
	font-size: 1.4rem;
}
.foo-left img{
	width: 380px;
	margin-bottom: 25px;
}

.foo-right{
	width: 30%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0;
	margin-bottom: 30px;
	text-align: right;
	color: #ffffff;
}
.foo-right span.tel{
	font-size: 3.4rem;
	font-family: 'Fjalla One', sans-serif;
}
.foo-right span.tel i{
	margin-right:8px;
	font-size: 3.6rem;
}

.foo-right .foo-wrap2 i{
	margin-left:6px;
}
.foo-right a:hover {
  color: #e3e699!important;
  opacity: 1;
	transition: .7s;
	border :none;
}

.foo-wrap2{
	display: flex;
}
.link-l{
	width:50%;
	text-align: right;
}
.link-r{
	width:50%;
	text-align: right;
}
.foo2 {
	position: absolute;
	width: 100%;
	color: #000000 !important;
	background-color: #ffffff;
	text-align: center;
	bottom: 0;
	font-size: 1.2rem;
}


@media screen and (max-width:1200px) {

.ts-back01,.ts-back03,.ts-back04{
	padding-top: 50px !important;
	padding-bottom: 50px !important;
}
	
}

@media screen and (max-width:992px) {

.ts-back01{
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

.h2mb{
	margin-bottom: 35px;
}	
	
	
footer {
	padding-top: 10px !important;
	padding-bottom: 15px !important;
}
			
.foo-left {
	width: 200px;
	margin-top: 30px;
	}

.foo-wrap{
	display: block;
}	

.foo-left {
	width: 100%;
	text-align: center;
}	
.foo-left img{
	width: 280px;
    margin-right: auto;
    margin-left: auto;
}
	
	
.foo-right{
	width: 100%;
	text-align: center;
}	
	
.link-l{
	margin-right: 15px;
}
.link-r{
	text-align: left;
	margin-left: 15px;
}	

}

@media screen and (max-width: 768px){

.foo-left {
	margin-bottom: 15px;
}		
.foo-right span.tel{
	font-size: 3rem;
}
.foo-right span.tel i{
	font-size: 3.2rem;
}
}

@media screen and (max-width:568px) {
.link-l,.link-r{
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
	
.foo2 {
	font-size: 1rem;
}	
	
}



/* ボタン */

a.btn1 {
	font-family: 'Noto Sans JP', sans-serif;
	display: inline-block;
	color: #ffffff;
	text-decoration: none;
	font-size: 1.6rem;
	font-weight: 300;
	position: relative;
	width: 230px;
	line-height: 1;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	background-color: transparent;
	margin-top: 30px;
	margin-bottom: 30px;
	border : solid 1px #ffffff ;
}

a.btn1:hover {
  color: #000000!important;
  background:#ffffff;
  opacity: 1;
	transition: .7s;
	border : solid 1px #ffffff ;
}

a.btn1 i{
	margin-left: 15px;
}


@media screen and (max-width:992px) {
	
a.btn1 {
	width: 200px;
	margin-right: 10px;
	margin-left: 10px;
}
	
}

@media screen and (max-width:568px) {

a.btn1 {
	font-size: 1.4rem;
}

}

/*リンク位置調整*/
#works,#example,#lawyer,#access,#fee{
	margin-top:-150px;
    padding-top:150px;
}
@media screen and (max-width: 992px){
#works,#example,#lawyer,#access,#fee{
	margin-top:-50px;
    padding-top:50px;
}
}


/* セカンドページ */
.se-top {
	width: 100%;
	height: 155px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	display: block;
}


.se-title,.se-title2{
	width: 100%;
	padding: 100px 0;
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;	
}
.se-title{
	background-image: url(../images/second-back01.jpg);
}

.se-title2{
	background-image: url(../images/second-back02.jpg);
}

.ts-back05{
	display: block;
	width: 100%;
	height: auto;
	padding-top: 100px !important;
	padding-bottom: 100px !important;
	background-color: #edf3e2;
}

.se-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
}

.se-square{
	display: inline-block;
	align-items: center;
	justify-content: center;
	border: solid 4px #edf3e2;
	width: 357px;
	margin: 10px;
	padding: 20px 5px;
}

.se-square img,.se-square-2row img{
	width:auto;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
}

.con-text{
	font-size: 2.0rem;
	font-weight: 400;
	line-height: 1.8;
	margin-top: 15px;
}

.se-square-2row{
	display: inline-block;
	align-items: center;
	justify-content: center;
	border: solid 4px #edf3e2;
	width: 545px;
	margin: 10px;
	padding: 20px;
}

.wh-inner{
	background-color:#ffffff;
	padding: 40px 70px;
	position: relative;
}

.wh-inner-mb{
	margin-bottom: 100px;
}
.wh-inner-mb2{
	margin-bottom: 50px;
}

.se-mb{
	margin-bottom: 50px;
}

.se-mb2{
	margin-bottom: 80px;
}

.h2-se{
	margin-bottom: 70px;
}

.h2se-mb{
	margin-bottom: 100px;
}

.number{
	font-size: 3.4rem;
	font-family: 'Roboto', sans-serif;
	font-weight: 1,100;		
    width: 86px;
    height: 86px;
    line-height: 86px;
	color: #6fb92c;
    background: #fff;
    border-radius: 50%;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: -43px;
    margin: auto;
}

.arrow-down i{
	color: #6fb92c;
	font-size:3.0rem;
}

.emphasis,.emphasis2{
	font-size: 2.0rem;
	font-weight: 400;
	line-height: 1.2;
	padding: 30px 0;
}

.emphasis i,.emphasis2 i{
	color: #6fb92c;
	margin-right: 6px;
}

.flame,.flame2{
	border: solid 4px #edf3e2;
}

.flame2{
	padding: 10px 50px 40px 50px;
}


.se-traffic-row-left,.se-traffic-row-right{
	display: inline-block;
	align-items: center;
	justify-content: center;
	border: solid 4px #edf3e2;
	margin-top: 20px;
	width:49%;
}

.se-traffic-row-left{
	margin-right: 1%;
}
.se-traffic-row-right{
	margin-left: 1%;
}

.se-traffic-inner-top{
	background-color: #f5ffeb;
	padding:15px 0;
}

.se-traffic-inner-top img{
	margin-left: auto;
	margin-right: auto;
	width:auto;
	height: 45px;
}


.se-traffic-inner-bottom{
	padding:15px;
}

.se-traffic-inner-bottom2{
	padding: 20px 50px 50px 50px;
}

.se-bg{
	display: inline-block;
	align-items: center;
	justify-content: center;
	background-color: #f5ffeb;
	padding: 15px 5px;
	margin: 50px 0 15px;
	width:26.6%;
}

.se-bg img{
	margin-left: auto;
	margin-right: auto;
	width:auto;
	height: 130px;
}

.se-inner{
	display: inline-block;
	align-items: center;
	justify-content: center;
	margin: 50px 0 15px;
	padding-top: 75px;
	width:10%;
}
.se-inner i{
	font-size:6.0rem;
	color: #6fb92c;
}

.se-traffic-inner{
	background-color: #f5ffeb;
	padding:30px 0;
	margin: 20px 0;
}

.se-traffic-inner img{
	margin-left: auto;
	margin-right: auto;
	width:605px;
	height: auto;
}


.money,.h3prep,.h5merit{
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.4;
	color: #000000;
	margin-top: 10px;
}



/*リスト*/
ul li {
  position: relative;
  padding: 0 0 0 1.2em;
  margin: 0;
  text-align: left;
}
ul li::before {
  position: absolute;
  left: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f14a';
  color: #6fb92c;
}

.list1{
	font-size:2.0rem;
	font-weight: 400;
}

.list2{
	font-size:1.6rem;
}



@media screen and (max-width:1200px) {

.ts-back05{
	padding-top: 50px !important;
	padding-bottom: 50px !important;
}

.money,.h3prep,.h5merit,.list1{
	font-size: 1.8rem;
}
		
	
}

@media screen and (max-width:992px) {	
.se-top {
	height: 50px;
}
.se-title,.se-title2{
	padding: 80px 0;	
}	
	
.ts-back05{
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}
	
.wh-inner{
	padding: 30px 30px;
}	

.wh-inner-mb{
	margin-bottom: 80px;
}
.wh-inner-mb2{
	margin-bottom: 30px;
}		

.se-mb{
	margin-bottom: 30px;
}
	
.se-mb2{
	margin-bottom: 50px;
}
	
.h2-se{
	margin-bottom: 20px;
}	
	
.h2se-mb{
	margin-bottom: 80px;
}	
	
.number{
	font-size: 3.0rem;
    width: 80px;
    height: 80px;
    line-height: 80px;
}	
	
.se-traffic-inner-bottom2{
	padding: 20px 35px 35px 35px;
}		
	
}

@media screen and (max-width: 768px){	
.se-title,.se-title2{
	padding: 50px 0;	
}		
.wh-inner{
	padding: 30px 15px;
}	

.se-mb{
	margin-bottom: 15px;	
}	

.h2-se{
	font-size: 2.2rem;
}	
	
.h2se-mb{
	font-size: 2.2rem;
	margin-bottom: 60px;
}	
	
.number{
	font-size: 2.6rem;
    width: 74px;
    height: 74px;
    line-height: 74px;
	top: -37px;
}	
	
.se-square,.se-square-2row{
	width: 100%;
	margin: 5px;
}	

.emphasis,.emphasis2{
	padding: 20px 0;
}	
.con-text,.emphasis,.emphasis2{
	font-size: 1.8rem;
}	

.flame2{
	padding:0 20px 20px 20px;
}	
	
.se-traffic-inner{
	padding:20px 0;
	margin: 15px 0;
}	
.se-traffic-inner img{
	width:95%;
}	

.se-traffic-row-left,.se-traffic-row-right{
	margin-top: 15px;
	width:100%;
}
.se-traffic-row-left{
	margin-right: 0%;
}
.se-traffic-row-right{
	margin-left: 0%;
}	
	
.se-traffic-inner-bottom2{
	padding: 20px 20px 20px 20px;
}	
	
.se-inner{
	padding-top: 100px;
}	
.se-inner i{
	font-size:3.5rem;
}	
	
.money,.h3prep,.h5merit,.list1{
	font-size: 1.6rem;
}		
	
}

@media screen and (max-width:568px) {
	
.se-bg{
	width:28%;
}	
.se-inner{
	width:8%;
}
.se-inner i{
	font-size:3rem;
}	
.money{
	font-size: 1.4rem;
	}	
	
.emphasis2{
	font-size:1.6rem;
}
}

/*------改行設定------*/
.br-tb{
	display: none; 
}
.br-sp{
	display: none; 
}

@media screen and (max-width: 768px){
.br-tb {
	display: block; 
	}
}
@media screen and (max-width:568px) {
.br-sp{
	display: block; 
}
	
}


/* 自作アニメーションのまとめ */

.animated {
    opacity: 0;
}

.anime1-img {
    opacity: 0;
  /* アニメcssの名前 */
  animation-name: anime1_img;
  /* アニメーションにかける秒数 */
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@keyframes anime1_img {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

.top-logo-anime {
  /* アニメーションにかける秒数 */
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  /* アニメーションに入る遅延 */
  animation-delay: 500ms;
  /* アニメcssの名前 */
  animation-name: anime_top1;
	position: relative;
	animation-timing-function: ease-out;
}

.top-logo-anime2 {
  /* アニメーションにかける秒数 */
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  /* アニメーションに入る遅延 */
  animation-delay: 500ms;
  /* アニメcssの名前 */
  animation-name: anime_top1;
	position: relative;
	animation-timing-function: ease-out;
}

@keyframes anime_top1 {
from {
    opacity: 0;
	top: -50px;
	right: 0;
}
to {
    opacity: 1;
	top: 0;
	right: 0;
}
}

.top-logo-anime2 {
  /* アニメーションにかける秒数 */
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  /* アニメーションに入る遅延 */
  animation-delay: 1000ms;
  /* アニメcssの名前 */
  animation-name: anime_top2;
	position: relative;
	animation-timing-function: ease-out;
}

@keyframes anime_top2 {
from {
    opacity: 0;
	top: 0px;
	left: -50px;
}
to {
    opacity: 1;
	top: 0;
	left: 0;
}
}

.anime2-txt {
  /* アニメーションにかける秒数 */
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  /* アニメーションに入る遅延 */
  animation-delay: 1s;
  /* アニメcssの名前 */
  animation-name: anime2_txt;
    opacity: 0;
}

@keyframes anime2_txt {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

.anime3-txt {
  /* アニメーションにかける秒数 */
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  /* アニメcssの名前 */
  animation-name: anime3_txt;
    opacity: 0;
	position: relative;
	animation-timing-function: ease-out;
}

@keyframes anime3_txt {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

.anime4-area {
  /* アニメーションにかける秒数 */
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  /* アニメcssの名前 */
  animation-name: anime4-area;
    opacity: 0;
	position: relative;
	animation-timing-function: ease-out;
}

@keyframes anime4-area {
from {
    opacity: 0;
	top: 100px;
}
to {
    opacity: 1;
	top: 0;
}
}

.anime5-info {
  /* アニメーションにかける秒数 */
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  /* アニメcssの名前 */
  animation-name: anime5-info;
    opacity: 0;
}

@keyframes anime5-info {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}