/* CSS Document */
html{ height:100%;}
body{ background:#fff; height:100%; color:#676E78; position:relative;}
a{ color:#676E78;}
h1,h2,h3,p{ line-height:1.2em;}
img{ max-width:100%; vertical-align:bottom; -webkit-backface-visibility: hidden; image-rendering: -webkit-optimize-contrast;}
.sp{ display:none;}
.wrap{ width:1000px; max-width:100%; margin:0 auto; padding:20px 0 0; position:relative; border-left:1px solid #e3ddd1; border-right:1px solid #e3ddd1; text-align:left;}
p{ font-size:1.4rem; line-height:2em; margin:0 auto; padding:10px 0;}
a:hover img{ opacity:0.8;}

section{ width:860px; max-width:95%; margin:0 auto 30px;}

h1,header,#unifilled .sec1 dl dt,footer,h2,.form_btn,#privacy{font-family:'Noto Serif JP',"ヒラギノ明朝 ProN W3", Hiragino Mincho ProN , "游明朝", YuMincho, "MSP明朝","MS PMincho","MS 明朝",Times New Roman , serif;}
h1.title{ width:520px; max-width:100%; margin:60px auto 40px; color:#53AE74; font-size:2rem; line-height:1em; letter-spacing:0.05em; position:relative; text-align:center;}
h1.title span{ color:#676e78;  font-size:1.2rem; line-height:1em; display:inline-block; text-align:center; padding:6px 20px 0; background:#fff; position:relative; z-index:5;}
h1.title:before {
    content: "";
    display: block;
    border-top:4px dotted #53AE74;
    width: 100%;
    height: 1px;
    position: absolute;
    top:calc(50% + 0.38em + 3px);
    z-index: 1;
}


h1.title2,h2{ font-size:2.6rem; line-height:1.4em; color:#53AE74; margin:50px auto 30px; }

header{ position:relative; width:1000px; max-width:100%; margin:0 auto; font-size:1.4rem; line-height:1.4em; text-align:left;}
header .logo{ float:left;}
header .nav_wrap2{ position:absolute; right:10px; top:0px; border-left:1px solid #53AE74; padding:10px 0 0 20px; z-index:10;}
header .nav_wrap{ width:400px; margin:20px 0 0 auto; border-left:1px solid #53AE74; padding:10px 0 0 20px; z-index:10;}
header  li{ margin-bottom:3px;}
header  p{ font-size:1.2rem; line-height:1.4em; padding:20px 0 20px;}
header  span.tel{ font-size:2rem; color:#53AE74; display:inline-block; padding-bottom:10px;}
header ul li.red a,footer ul li.red a{ color:#CC3300;}


/*トグルボタン*/
#navi_toggle{ display:none; background:rgba(255,255,255,0.6); padding-left:20px; margin:0px 0 0 40px; z-index:1;}
#navi_toggle ul{ padding:20px 0 0 0;}

#navi_toggle ul li.souzoku_s,ul.nav li.souzoku_s,footer ul li.souzoku_s{ text-indent:3em;}
#navi_toggle ul li.akiya_s,ul.nav li.akiya_s,footer ul li.akiya_s{ text-indent:3em;}


#menubtn{
	width:40px;
	height:41px;
	display:none;
    position: absolute;
	cursor:pointer;
    top: 10px;
    right: 15px;
    z-index: 3;
	border:1px solid #7d8488;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	font-family:Arial, Helvetica, sans-serif;
	}
#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #7d8488;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}
#top .sec1,#top .sec2{ text-align:center;}

.col2{ display:flex; justify-content: space-between; flex-wrap:wrap; align-items: flex-start; margin-bottom:30px; }
.col2 div{ width:400px;}
.col2 img{ width:300px; height:auto; max-width:34%;}


#top .sec1 h1{ margin-bottom:0;}
#top .sec1 h2{ margin-bottom:10px; font-size:5rem; letter-spacing:0.2em; display:flex; justify-content: space-between; align-items: flex-end;}
#top .sec1 h2 img{ width:150px; max-width:50%; margin:0;}
#top .sec1 p{ text-align:left;}
#top .col2 div{ max-width:48%;}
#top .col2 img{ width:auto; max-width:80%;}

#top .sec2 ul.news_list { margin:0 auto 30px;}
#top .sec2 ul.news_list li{ width:220px; display:inline-block; margin:0 5px 10px 5px; padding:10px; border:1px solid #53AE74; border-radius: 3px; position:relative;
    -webkit-border-radius: 3px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 3px;   /* Firefox用 */
	overflow:hidden;
	vertical-align:top;
	height:100%;
}
#top .sec2 ul.news_list li img{ width:200px; height:150px; object-fit: cover;}
#top .sec2 ul.news_list li h1{ color:#53AE74; font-weight:bold; font-size:1.4rem; line-height:1.4em; margin-top:10px; height:2.8em; 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; }
#top .sec2 ul.news_list li p{ width:200px; text-align:left; line-height:1.6em;}
#top .sec2 ul.news_list li a{
    display: block;
    width: 100%;
}

#unifilled .sec1 p{ width:450px; float:left; }
#unifilled .sec1 img{ margin:0 10px;}
#unifilled .sec1 .qa{ padding:30px 0; clear:both;}
#unifilled .sec1 dl{ width:500px; float:left; max-width:90%;}
#unifilled .sec1 dl dt{font-size:2rem; line-height:1.2em; color:#53AE74; margin:10px auto 10px; text-indent:-2em; padding-left:2em;}
#unifilled .sec1 dl dd{ font-size:1.4rem; line-height:1.4em; padding-left:40px;}


#unifilled .sec2{ position:relative; clear:both; width:840px; max-width:80%; border:1px solid #999; padding:5%; overflow:hidden;}
#unifilled .sec2 ul li{ font-size:1.6rem; line-height:1.4em; padding:5px 0;}
#unifilled .sec2 ul  { width:400px; max-width:100%; float:left;}
#unifilled .sec2 h1{ margin:0px auto 20px; max-width:100%;}
#unifilled .sec2 img { position:absolute; margin:0 0 0 auto; bottom:20px; right:20px;}

#unifilled .sec4 img { margin:15px; float:right;}


#top .sec7 { width:1000px; max-width:100%; background:url(../images/image7.jpg) no-repeat; background-size:cover; background-position:center; color:#000; overflow:hidden; clear:both; padding:30px 0 45px;}
#top .sec7 h1 { font-size:2.2em;}
#top .sec7 h1 span { color:#54B778; padding:0 10px;}
#top .sec7 p{ line-height:1.2em; padding-left:15px}
#top .sec7 .left_box { float:left; padding:5%; width:35%;}
#top .sec7 .right_box{ width:45%; margin-left:35%; padding:60px 5% 20px;}
#top .sec7 .right_box .tel{ font-size:2.6rem; font-weight:bold; position:relative; padding-left:40px;}
#top .sec7 .right_box p{ padding-left:40px;}
#top .sec7 .right_box .tel:before{ content:""; background:url(../images/image8.png); width:32px; height:52px; background-size:contain; position:absolute; left:0; top:-30px;}


dl.mailform { width:590px; max-width:95%; margin:20px auto; font-size:14px; line-height:1.4em; text-align:left;}
dl.mailform dt{ width:140px; float:left; margin-bottom:10px; padding:5px; clear:left;}
dl.mailform dd{ margin-left:160px; margin-bottom:10px; padding:5px;}
dl.mailform dd a{ text-decoration:underline;}
dl.mailform dd input{ margin:0 5px; max-width:100%;}
dl.mailform dd textarea{ max-width:100%;}
dl.mailform dt.full,.mailform dl dd.full {
	float:none;
	width: 100%;
	padding:10px 0;
	margin:0;
	clear: both;
	text-align:left;
}
dl.mailforml dd label{ cursor:pointer;}
p.consultation{ width:590px; max-width:95%; margin:20px auto;}
p.consultation span{ display:inline-block; padding:5px; margin:0 20px 0 0;}
#top .sec8 .btn{ width:130px; margin:20px auto; text-align:center;}
#top .sec8 .btn input{padding:6px 25px; font-size:1.8rem; background:#53AE74; color:#fff; border:none; cursor:pointer;}


#refused .sec9 ul{ width:600px; max-width:90%; margin:50px auto;}
#refused .sec9 li{ font-size:1.6rem; line-height:1.4em; padding:8px 0;}




footer { background:#EFEDEC; padding:35px;}
footer h1{ float:left;}
footer ul { width:350px; margin:0 0 0 auto;}
footer ul li a{ color:#444648;}
footer ul li{ padding:5px 0 10px; font-size:1.4rem; line-height:1.2em; text-align:left;}

#couse .sec1{ width:720px; margin:0 auto; max-width:90%;}
#couse .sec1 ul{ padding:70px 0 100px;}
#couse .sec1 ul li{ font-size:1.4rem; line-height:2em; margin:0 auto; padding:10px 0; position:relative;}
#couse .sec1 ul li img{ position:absolute;}
#couse .sec1 ul li .image9{ right:80px; bottom:0px;}
#couse .sec1 ul li .image10{ right:0; top:10px;}
#couse .sec1 ul li .image11{ right:190px; top:10px;}
#couse .sec1 ul li .image12{ right:220px; top:0;}

#problem .image13{ float:left; margin:15px;}
#problem .image14{ margin: 30px 15px;}
#problem p.t_left{ width:450px; max-width:95%; float:left;}



#counter section{ width:700px; margin:0 auto 50px;}
#counter .sec1 h2{ width:450px; max-width:60%; margin:0 0 0 auto;}
#counter .sec1 p{ width:450px; max-width:60%; float:right;}
#counter .sec1 img{ margin:2%; max-width:36%;}
#counter .sec2 h2{ margin:50px auto 10px; clear:both;}
#counter .sec2 p{ width:450px; max-width:60%; float:left;}
#counter .sec2 img{ margin:2%; max-width:36%;}
#counter .sec3 h2{ margin:20px auto}
#counter .right_box{ width:450px; float:right; max-width:70%;}
#counter .sec3 img{ max-width:30%;}
#counter .sec4 img{ max-width:30%; float:right;}
#counter .sec5 img{width:250px; max-width:30%; float:left;}
#counter .sec6 p{width:450px; max-width:60%; float:left;}
#counter .sec6 img{ margin:2%; max-width:36%;}


#counter .form_btn {
  background: #53AE74;
  width: 600px;
  max-width:92%;
  position: relative;
  clear:both;
  font-size:2.4rem;
  line-height:1.4em;
  color:#fff;
  text-align:center;
  padding:4%;
  margin:20px auto;
}
#counter a:hover .form_btn {
  background: #6DBC88;
}
#counter .form_btn:before {
  height: 0;
  display: block;
  position: absolute;
  right: 0;
  bottom:0;
  content: "";
  border-bottom: solid 30px #fff;
  border-left: solid 30px transparent;
}
#counter .form_btn:after {
  height: 0;
  display: block;
  position: absolute;
  right: 0;
  bottom:0;
  content: "";
  border-top: solid 30px #87C89A;
  border-right: solid 30px transparent;
}

#news article{ width:800px; max-width:95%; margin:0 auto 40px; overflow:hidden;}
#news .news_list h1{ font-size:2.2rem; line-height:1.4em; color:#53AE74; text-align:left; margin:7px auto 15px;}
#news .news_list img{ width:390px; max-width:40%; height:auto; float:left; margin:10px 15px 10px 10px;}
#news .news_list p.time{ text-align:right; font-size:1em; margin-bottom:20px; clear:left;}
#news .news_list .text{
	width:370px;
	max-width:53%;
	padding-left:3%;
	margin:10px 0 10px 40%;
	text-align:left;
	font-size:1.4em; line-height:1.6em;
}
.page_navi { text-align:center; padding-bottom:30px;}
.page_navi .page-numbers{ font-size:1.4rem; padding:3px 5px;}
.page_navi .current{ font-weight:bold; text-decoration:underline;}

#privacy h2{ font-size:2rem; margin:40px auto 15px;}
#privacy h3{ font-size:1.6rem; line-height:1.6em; margin:15px auto 5px;}
#privacy .sec1 p{ padding:0 30px;}
#privacy p.date{ text-align:right;}

#about .prof{  width:800px; max-width:95%; margin:0px auto 40px; overflow:hidden; color:#444648;}
#about .prof img{ float:left; margin-right:20px;}
#about .prof dl { overflow:hidden; font-size:1.4rem; line-height:1.4em;}
#about .prof dl dt{ width:80px; float:left; padding:3px 0;}
#about .prof dl dd{ margin-left:90px; padding:3px 0;}



#before_inheritance .col2 div,#after_inheritance .col2 div{ width:500px; max-width:65%;}
#before_inheritance .col2 div p,#after_inheritance .col2 div p{ padding-top:0;}
#before_inheritance  h2,#after_inheritance h2{ font-size:2.4em; margin:0 auto 20px;}
#before_inheritance  h3{ font-size:1.8rem; line-height:1.2em; font-weight:bold; margin:10px auto 20px;}
#before_inheritance .col2 div p.main_text{font-size:2.4em; padding:30px 10px 0;}

#qa h3{font-size:2.6rem; color:#53AE74; margin:50px auto 30px;}
#qa .qes,#qa .talk{ width:860px; max-width:95%; margin:10px auto;}
#qa .qes p{ font-size:1.8em; line-height:1.6em; font-weight:400; padding:0px 10px 5px 45px; position:relative; margin:10px 0 10px;}
#qa .qes p:before{ font-size:2.2em; content:"Q."; font-family: 'Roboto', sans-serif; padding-right:5px; color:#53AE74; position:absolute; left:0; top:0;}
#qa .ans p{ font-size:1.6em; line-height:1.6em; padding:0px 10px 10px 45px; margin:10px 0 10px; position:relative;}
#qa .ans p:before{ font-size:2.2em; content:"A."; font-family: 'Roboto', sans-serif; padding-right:5px; color:#F28C8C; position:absolute; left:0; top:0;}
#qa section{ width:940px; max-width:100%; margin:0 auto; padding:30px 0;}
#qa .q1{ background:#ECF4E5;}
#qa .q2{ background:#D2E8F8;}
#qa .q3{ background:#FCE9D0;}
#qa .q4{ background:#EEF3CF;}
#qa .q5{ background:#FBE1E4;}
#qa .q6{ background:#FFFBD4;}
#qa .q7{ background:#E6EAFF;}
#qa .q8{ background:#ECF4E5;}
#qa .q9{ background:#D2E8F8;}
#qa ul.qa_nav{ margin:30px 0 10px;}
#qa ul.qa_nav > li{ font-size:1.6rem; line-height:1.4em; font-weight:bold;}
#qa ul.qa_nav li ul{ margin:5px 0 15px;}
#qa ul.qa_nav li ul li{ font-size:1.4rem; display:inline-block; padding:0 7px;}
#qa ul.qa_nav a{ text-decoration:underline; }
#qa ul.qa_nav a:hover{ color:#53AE74;}
.talk {
padding:5px 0;
}
.ans{ margin-bottom:30px;}
.talk img {
width: 100%;
height: 100%;
border-radius: 50%;
margin: 0;
}


p.talk-text:last-child {
margin-bottom: 0px;
}

/* 回り込み解除 */
.talk:after,.talk:before {
clear: both;
content: "";
display: block;
}

/* ----- 左の場合 ----- */

/* 左画像 */
.talk-Limg {
margin-left: 4px;
margin-top: -1px;
float: left;
width: 120px;
height: 120px;
}

/* 左からの吹き出しテキスト */
.talk-Ltxt {
color: #444;
position: relative;
margin-left: 140px;
padding: 1.2em 2em;
border: 3px solid;
background-color: #fff;
border-radius: 5px;

}

.qes .talk-Ltxt { border-color:#53AE74; margin-top:20px;}
.qes .talk-Ltxt:before{ border-right: 12px solid #53AE74;}
.ans .talk-Ltxt { border-color:#7fbaeb;}
.ans .talk-Ltxt:before{ border-right: 12px solid #7fbaeb;}


.talk-Ltxt p{font-size:1.8em;}
/* 左の三角形を作る */
.talk-Ltxt::before {
content: "";
position: absolute;
border: 12px solid transparent;
border-right: 12px solid #778899;
right: 100%;
top: 20%;
}
.talk-Ltxt::after {
content: "";
position: absolute;
border: 12px solid transparent;
border-right: 12px solid #fff;
margin-right: -4px;
right: 100%;
top: 20%;
}




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


}


@media screen and (max-width: 900px){
#menubtn{ display:block;}
header .nav_wrap2{ display:none;}
header .nav_wrap{ display:none;}

#unifilled .sec5 .left_box {padding:5%; width:40%;}
#unifilled .sec5 .right_box{ width:40%; margin-left:50%; padding:60px 5% 20px;}
header .logo{ max-width:calc(95% - 60px); padding-right:60px; float:none;}

}


@media screen and (max-width: 860px){
#unifilled .sec1 p{ width:auto; float:none; }
#unifilled .sec2 img { position:relative; margin:0 0 0 auto; bottom:auto; right:auto;}

}



/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
footer h1{ float:none;}
footer ul { width:350px; margin:30px 0 0 10px;}

#couse .sec1 ul{ padding:20px 0 20px; width:500px; max-width:100%; margin:0 auto;}
#couse .sec1 ul li img{ position:relative;}
#couse .sec1 ul li .image9,#couse .sec1 ul li .image10,#couse .sec1 ul li .image11,#couse .sec1 ul li .image12{ right:auto; bottom:auto; top:auto;}
#problem p.t_left{float:none;}

.sp_no{ display:none;}


	dl.mailform dt {
		float: none;
		width: auto;
		padding: 5px;
		text-align: left;
		 margin:0px;
	}
	dl.mailform dd {
		clear: both;
		border-top: none;
		padding: 5px 15px;
		line-height: 1.5em;
		margin:0 0 15px 0;
	}

.col2{ display:block;}
.col2 div{ width:500px; max-width:95%; margin:0;}
.col2 img{ width:500px; margin:20px 0 20px; max-width:95%;}

#before_inheritance .col2 div, #after_inheritance .col2 div{ max-width:95%; margin:0 auto;}
#top .col2 div{ max-width:95%; margin:0 auto;}
#top .col2 div img{ width:auto;}

#before_inheritance .main_text_img{ width:250px;}
#after_inheritance .image1{ width:300px;}
}



@media screen and (max-width: 650px){
#top .sec7 .left_box {padding:5%; width:90%; float:none;}
#top .sec7 .right_box{ width:90%; margin-left:0%; padding:20px 5% 20px;}

#counter .form_btn {font-size:2rem;}

#about .prof img{ float:none; margin-right:0;}
#about .prof dl { margin:20px auto;}
#about .prof dl dd:last-child{  margin-left:0px; margin-top:10px;}
}


/*560以下 */
@media screen and (max-width: 560px){
h1.title2,h2{ font-size:2.2rem; margin:40px auto 30px; }

#unifilled .sec4 img { float:none;}
.sp_no2{ display:none;}
#counter section{ text-align:center;}
#counter section p{ text-align:left;}
#counter .sec1 h2,#counter .sec1 p{ max-width:100%; margin:0 0 0 0; float:none;}
#counter .sec6 img,#counter .sec1 img,#counter .sec2 img{ margin:2%; max-width:50%;}
#counter .sec6 p,#counter .sec5 img,#counter .sec4 img,#counter .right_box,#counter .sec2 p{max-width:100%; float:none;}
#counter .form_btn {
  max-width:86%;
  font-size:1.8rem;
  padding:4% 7%;
}
#news .news_list{ text-align:center;}
#news .news_list img{ max-width:100%; float:none;}
#news .news_list .text{
	width:480px;
	max-width:100%;
	padding-left:0;
	margin:10px auto 10px auto;
	text-align:left;
}


}


@media screen and (max-width: 478px){
/* 左画像 */
.talk-Limg {
float: none;

}

/* 左からの吹き出しテキスト */
.talk-Ltxt {
margin-left: 10px;
margin-top:20px;
position: relative;
padding: 5px;

}
.qes .talk-Ltxt::before{ border-right:12px solid transparent;}
.ans .talk-Ltxt::before{ border-right:12px solid transparent;}
.qes .talk-Ltxt:before{ border-bottom: 12px solid #53AE74;}
.ans .talk-Ltxt:before{ border-bottom: 12px solid #7fbaeb;}

#qa .qes p,#qa .ans p{ font-size:1.6em;padding:0px 5px 5px 5px;}
#qa .qes p:before,#qa .ans p:before{position:relative; left:0; top:0; display:block; margin-bottom:5px;}

/* 左の三角形を作る */
.talk-Ltxt::before {
content: "";
position: absolute;
border: 12px solid transparent;
border-bottom: 12px solid #778899;
top: -24px;
left: 40px;
right:auto;
}
.talk-Ltxt::after {
content: "";
position: absolute;
border: 12px solid transparent;
border-bottom: 12px solid #fff;
top: -20px;
left: 40px;
right:auto;
}
}


/*414以下 iphone縦*/
@media screen and (max-width: 414px){
	#navi_toggle{  margin:0px 0 0 10px;}
	
#top .sec1 h2{ font-size:3.6rem;}
}