@charset "UTF-8";
/* CSS Document */

@charset "UTF-8";
@import url("normalize.css");

#top {
	background:url(../img/contents_bg.gif) repeat 0 0;
}

#wrapper {
	width:980px;
	margin:0 auto;
}

#header {
	width:100%;
	padding:35px 0 0 0;
	z-index:1;
	position:relative;
	background:#fff url(../img/top/main_bg.jpg) no-repeat 50% 0;
	background-size:cover;
}

#header_wrapper {
	width:980px;
	margin:0 auto;
	position:relative;
	height:460px;
}

#summary {
	font-size:90%;
}

#header h1 {
	position:absolute;
	top:42px;
	left:0;
	background:url(../img/logo.png) no-repeat 0 0;
	padding:100px 0 0 0;
	height:0;
	overflow:hidden;
}


#inquiry {
	position:absolute;
	top:49px;
	right:0;
	width:445px;
}

#inquiry li {
	float:left;
}

#inquiry li a,
#tel  {
	padding:70px 0 0 0;
	background-repeat:no-repeat;
	height:0;
	overflow:hidden;
	display:block;
}

#tel {
	width:53%;
	background-image:url(../img/telephone.png);
	background-position:0 0;
}

#inquiry_btn {
	width:47%;
}

#inquiry_btn a{
	background-image:url(../img/inquiry.png);
	background-position:100% 0;
}

#main {
	margin:-288px 0 0 0;
	z-index:2;
	position:relative;
}

#navigation {
	background:url(../img/nav_bg.png) repeat 0 0;
}

#navigation a  {
	padding:68px 0 0 189px;
	background-repeat:no-repeat;
	height:0;
	overflow:hidden;
	display:block;
}

#navigation a,
#inquiry_btn a,
#sns_banner a,
#pagetop a,
#inquiry_body a,
#melit a,
#voices a {
-o-transition:opacity 0.3s linear;
-ms-transition:opacity 0.3s linear;
-moz-transition:opacity 0.3s linear;
-webkit-transition:opacity 0.3s linear;
transition:opacity 0.3s linear;
}

#navigation a:hover,
#inquiry_btn a:hover,
#pagetop a:hover,
#inquiry_body a:hover,
#melit a:hover,
#voices a:hover {
opacity:0.5;
filter: alpha( opacity=50 );
-ms-filter: "alpha( opacity=50 )";
}

#sns_banner a:hover  {
opacity:0.7;
filter: alpha( opacity=70 );
-ms-filter: "alpha( opacity=70 )";
}

#navigation ul {
	background:url(../img/nav_line.gif) repeat-x 0 100%;
	height:70px;
	padding:0 20px;
}

#navigation ul li {
	float:left;
	width:20%;
}

#home a {
	background-image:url(../img/nav_01.png);
}

#cost a {
	background-image:url(../img/nav_03.png);
}

#office a {
	background-image:url(../img/nav_06.png);
}

#access a {
	background-image:url(../img/nav_04.png);
}

#contact a {
	background-image:url(../img/nav_05.png);
}


#footer {
	clear:both;
	width:100%;
	background:#caedab url(../img/f_bg.gif) repeat-x 0 0;
}

#f_body {
	width:980px;
	margin:0 auto;
	position:relative;
}

#f_body li {
	float:left;
}

#f_body li a {
	text-decoration:none;
	padding:15px 30px;
	border-right:#caedab 1px solid;
	display:block;
}

#f_body .l_border{
	border-left:#caedab 1px solid;
}

#f_body ul {
	margin:0 0 30px 0;
}

#f_body address {
	clear:both;
	background:url(../img/f_logo.gif) no-repeat 0 0;
	padding:60px 0 0 0 ;
	margin:0 0 30px 0;
}

#pagetop {
	position:absolute;
	top:0;
	right:0;
	clear:both;
}

#pagetop a {
	overflow:hidden;
	height:0;
	display:block;
	background:url(../img/pagetop.png) no-repeat left top;
	padding:60px 70px 0 0;
}

#f_body small {
	clear:both;
	padding:0 0 20px 0;
	text-align:right;
	display:block;
}

/*-------------------------------------------------
clearfix
-------------------------------------------------*/
#sub_navigation:before,
#sub_navigation:after,
.service_body:before,
.service_body:after,
#sudcontents:before,
#sudcontents:after,
.listBox:before,
.listBox:after  {
content:"";
display:table;
}
#sub_navigation:after,
.service_body:after,
#sudcontents:after,
.listBox:after {
clear:both;
}
#sub_navigation,
.service_body,
#sudcontents,
.listBox {
display:inline-block;
}
#sub_navigation,
.service_body,
#sudcontents,
.listBox  {
display:block;
}
/*-------------------------------------------------
jscroll
-------------------------------------------------*/
.jspContainer{
width:100% !important;
overflow: hidden;
position: relative;
outline:0 none !important;
}
.jspPane{
position: absolute;
width:100% !important;
outline:0 none !important;
}
.jspVerticalBar{
position: absolute;
top: 0;
right: -1px;
width: 8px;
height: 100%;
background:#fff;
}
.jspHorizontalBar{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height:8px;
background:#fff;
}
.jspVerticalBar *,
.jspHorizontalBar *{
margin:0;
padding:0;
}
.jspCap{
display:none;
}
.jspHorizontalBar .jspCap{
float:left;
}
.jspTrack{
background:#eee;
position:relative;
}
.jspDrag{
background:#ff9333;
position:relative;
top:0;
left:0;
cursor:pointer;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag{
float: left;
height: 100%;
}
.jspArrow{
background:transparent;
text-indent: -20000px;
display: block;
cursor: pointer;
}
.jspArrow.jspDisabled{
cursor: default;
background:transparent;
}
.jspVerticalBar .jspArrow{
height: 8px;
}
.jspHorizontalBar .jspArrow{
width: 8px;
float: left;
height: 100%;
}
.jspVerticalBar .jspArrow:focus{
outline: none;
}
.jspCorner{
background:transparent;
float: left;
height: 100%;
}

/*-------------------------------------------------
page
-------------------------------------------------*/


#melit {
	clear:both;
	background:#fff url(../img/top/melit.jpg) no-repeat 95% 20px;
	padding:40px 365px 20px 40px ;
	position:relative;
}

#melit .catch {
	height:0;
	overflow:hidden;
	padding:80px 0 0 0;
	display:block;
	background:url(../img/top/ttl.gif) no-repeat 0 0;
}

#melit #office_btn a{
	padding:34px 0 0 0;
	height:0;
	width:244px;
	overflow:hidden;
	display:block;
	background-image:url(../img/top/btn01.gif);
	background-position:100% 0;
	background-repeat:no-repeat;
	position:absolute;
	bottom:10px;
	right:60px;
}

#service01,
#service02,
#service03 {
	margin:30px 0 30px 0;
	position:relative;
	clear:both;
}
#service01:before,
#service02:before,
#service03:before{
	content:"";
	display:block;
	width:200px;
	height:185px;
	background-position:100% 100%;
	background-repeat:no-repeat;
	position:absolute;
	top:-18px;
	right:20px;
	z-index:100;
}
#service01:before{
	background-image:url(../img/top/img_01.png);
}
#service02:before{
	background-image:url(../img/top/img_02.png);
}
#service03:before{
	background-image:url(../img/top/img_03.png);
}
.service_body {
	background-color:#fff;
	padding:15px 20px 20px 20px;
	border-right:#ddd 1px solid;
	border-bottom:#ddd 2px solid;
	overflow:hidden;
}

#service01 h2,
#service02 h2,
#service03 h2 {
	height:0;
	overflow:hidden;
	padding:50px 0 0 0;
	width:100%;
	background-repeat:no-repeat;
	background-position:50% 0;
}

#service01 h2 {
	background-image:url(../img/top/h2_01.gif);
}

#service02 h2 {
	background-image:url(../img/top/h2_02.gif);
}

#service03 h2 {
	background-image:url(../img/top/h2_03.gif);
}

#service01 .s_ttl,
#service02 .s_ttl,
#service03 .s_ttl {
	font-weight:bold;
	position:absolute;
	top:15px;
	left:350px;
}

#service01 .m0,
#service02 .m0,
#service03 .m0  {
	margin:0 ;
}

#service01 em,
#service02 em,
#service03 em {
	color:#f32323;
	font-size:18px;
}

#service01 .explanation,
#service02 .explanation,
#service03 .explanation  {
	background-color:#fffdf1;
	border:#f1ecc6 1px solid;
	padding:10px 50px 10px 10px;
	margin:0 150px 14px 0;
	font-size:90%;
	line-height:20px;
	height:66px;
}

.service01 {
	float:left;
	width:181px;
	margin:0 8px 5px 0;
	}
.service02{
	float:left;
	width:228px;
	margin:0 8px 5px 0;
	}
	
.service03 {
	float:left;
	width:228px;
	margin:0 8px 0 0;
	}

.service01 ul,
.service02 ul,
.service03 ul {
	padding:5px 5px 8px 5px;
}

.service01 ul {
	background-color:#f3ffea;
	min-height:260px;
}

.service02 ul {
	background-color:#eefeff;
	min-height:280px;
}

.service03 .listBox{
	background-color:#fff4ec;
	min-height:250px;
}
.service01 h3,
.service02 h3,
.service03 h3 {
	background-repeat:no-repeat;
	background-position:0 0;
	padding:5px 0 6px 30px;
	line-height:35px;
}

.service01 li,
.service02 li,
.service03 li {
	min-width:100px;
	font-size:85%;
	line-height:28px;
	margin:0 0 0 5px;
}

.service01 li a,
.service02 li a,
.service03 li a {
	background:url(../img/top/arrow_01.png) no-repeat 0 50%;
	padding:0 0 0 15px;
	display:block;
}

.service01 h3 {
	background-image:url(../img/top/h3_02bg.jpg);
	color:#3e8900;
}

.service02 h3 {
	background-image:url(../img/top/h3_01bg.jpg);
	color:#008f9f;
}

.service03 h3 {
	background-image:url(../img/top/h3_03bg.jpg);
	color:#f16600;
}
#service03 .duble_line {
	line-height:18px;
}
.notice{
	clear:both;
	padding:10px 0 0 0;
}
.notice h4{
	font-size:18px;
	font-weight:bold;
	text-align:center;
}
.notice .present{
	font-size:18px;
	padding-left:165px;
}
.notice .p_txt{
	padding:18px 90px 0;
}
#box01{
	background:url(../img/top/box01.gif) no-repeat center top;
	height:105px;
}
#box01 h4,
#box01 span{
	color:#2a852e;
	margin-bottom:20px;
}
#box01 em{
	color:#4da703 !important;
}
#box02{
	background:url(../img/top/box02.gif) no-repeat center top;
	height:167px;
}
#box02 h4,
#box02 span{
	color:#00879a;
	margin-bottom:28px;
}
#box02 em{
	color:#0091a2 !important;
}
#reasons {
	background:#fff url(../img/top/bg_reasons.gif) no-repeat 50% 50%;
	border:solid 5px #ff9446;
	box-shadow:rgba(7, 0, 2, 0.298039) 0px 3px 2px -2px;
　-webkit-box-shadow:rgba(7, 0, 2, 0.298039) 0px 3px 2px -2px;
　-moz-box-shadow:rgba(7, 0, 2, 0.298039) 0px 3px 2px -2px;
   margin-bottom:45px;
   min-height:541px;
   padding:20px 35px; 
   position:relative;
}
#reasons #r01{
	position:absolute;
	top:55px;
	left:35px;
}
#reasons #r02{
	position:absolute;
	top:260px;
	left:35px;
}
#reasons #r03{
	position:absolute;
	top:55px;
	right:33px;
	width:305px;
}
#reasons h2{
	overflow:hidden;
	height:0;
	padding-top:174px;
	background:url(../img/top/h2_06.gif) no-repeat 48% 30px;
}
#reasons .reason{
	width:270px;
}
#reasons .reason h3{
	font-size:18px;
	font-weight:bold;
	color:#f32323;
	height:31px;
	padding:5px 0 0 105px;
}
#reasons #r01 h3{
	background:url(../img/top/r01.gif) no-repeat;
}
#reasons #r02 h3{
	background:url(../img/top/r02.gif) no-repeat;
}
#reasons #r03 h3{
	background:url(../img/top/r03.gif) no-repeat;
}
#reasons .reason p{
	font-size:13px;
	width:250px;
	margin:5px 10px 0 10px;
}
#reasons .reason dl{
	font-size:13px;
	margin-top:25px;
}
#reasons .reason dl dt{
	font-size:16px;
	font-weight:bold;
	margin-bottom:5px;
}
#reasons .reason dl dd{
	padding-left:1.2em;
	margin-bottom:30px;
}
.orange{
	color:#f16600;
}
#voices{
	background:url(../img/top/bg_voices.gif) no-repeat;
	position:absolute;
	bottom:25px;
	right:5px;
}
#voices a{
	overflow:hidden;
	display:block;
	height:0;
	background:url(../img/top/btn02.png) no-repeat 0 58px;
	padding-top:140px;
}
/*リンク先できたら、下記スタイルと行106、119のコメント外す*/
#voices a:hover{
/*	background:url(../img/top/btn02_on.png) no-repeat 0 58px;*/
}
#sudcontents {
	width:100%;
	margin:0 0 30px 0;
}

#sns_banner {
	float:left;
	width:240px;
}

#sns_banner h2 {
	height:0;
	overflow:hidden;
	background-position: 0 0;
	background-repeat: no-repeat;
}

#sns_banner h2 {
	padding:35px 0 0 0;
	background-image:url(../img/top/h2_05.jpg);
	margin:0 0 10px 0;
}

#sns_banner li {
	margin:0 0 10px 0;
}

#sns_banner a {
	height:0;
	overflow:hidden;
	padding:61px 0 0 0;
	background-position: 0 0;
	background-repeat: no-repeat;
	display:block;
}

#sns_01 a {
	background-image:url(../img/top/bn_01.jpg);
}

#sns_02 a {
	background-image:url(../img/top/bn_02.jpg);
}

#sns_03 a {
	background-image:url(../img/top/bn_03.jpg);
}

#news {
	background-color:#fff;
	border:#ddd 1px solid;
	width:650px;
	padding:30px;
	float:right;
}

#scroll{
	height:150px;
	overflow:auto;
	outline:0;
}

#scroll a{
	color: #539202;
}
#news h2 {
	height:0;
	overflow:hidden;
	padding:30px 0 0 0;
	background:url(../img/top/h2_04.gif) no-repeat  0 0 ;
}

#news dt {
	float:left;
	clear:left;
	color:#da0101;
	padding:2px 20px 0 0 ;
	display:block;
}

#news dd {
	width:530px;
	padding:0 0 10px 7em;
	margin:10px 20px 10px 0;
	border-bottom:#333 1px dotted;
}

#sub_inquiry {
	background:#4da703  url(../img/h2_06.gif) no-repeat 20px 50%;
	padding:10px 0 5px 270px;
	margin:0 0 60px 0;
}

#inquiry_body {
	background:url(../img/inquiry_bg.gif) no-repeat 0 0;
	padding:15px 20px;
}

#inquiry_body p {
	height:0;
	overflow:hidden;
	padding:20px 0 0 0;
	background:url(../img/inquiry_ttl.png) no-repeat 0 0;
	margin:0 0 15px 0;
}

#inquiry_body .f_tel {
	float:left;
	height:0;
	overflow:hidden;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-image:url(../img/f_telephone.png);
	padding:58px 0 0 0;
	margin:0 25px 0 0;
}

#inquiry_body a {
	height:0;
	overflow:hidden;
	background-position: 0 0;
	background-repeat: no-repeat;
	padding:58px 0 0 0;
	display:block;
}

#inquiry_body .f_btn a {
	background-image:url(../img/f_inquiry.png);
}

#main .duble_line  {
	line-height:17px ;
}



/* ========================================= */
/* 2016/10追加分 */
/* ========================================= */

/* お知らせ */
#news h2{
  height:60px;
  padding:0;
  text-align:center;
  background-image:none;
}
#news h2 img{
  padding-top:8px;
}
#news{
  max-width:980px;
  width:100%;
  box-sizing:border-box;
  border:none !important;
  margin:25px 0 40px;
  padding-top:0;
  padding-right:5px;
  padding-left:5px;
  padding-bottom:5px;
  background-color:#f16600;
  border-radius:10px 10px 0 0;
  box-shadow: 0px 2px 2px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 2px 2px 1px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 2px 2px 1px rgba(0,0,0,0.3);
}
#news dd{
  width:auto;
}
.jspDrag{
 background-color:#f16600; 
}
#scroll{
  background-color:white;
  height:260px;
  padding:15px 20px !important;
  box-sizing:border-box;
  width:auto !important;
}
.jspContainer{
  height:200px !important;
}

/* ページ下部のブログ部分 */
#sub_inquiry{
  margin-bottom:40px;
}
#sns_banner{
  float:none;
  width:100%;
  max-width:980px;
  border:1px solid red;
}
#sudcontents{
  margin-bottom:60px;
}
#sns_bnr ul{
  overflow:hidden;
  max-width:980px;
  margin:0 auto;
}
#sns_bnr li{
  width:33%;
  float:left;
  margin-right:0.5%
}
#sns_bnr li:last-of-type{
  margin-right:0;
}
#sns_bnr li a{
  transition:all ease 0.5s;
}
#sns_bnr li a:hover{
/*  opacity:0.6;*/
}
#sns_bnr li img{
  max-width:100%;
}

/*  */
.note{
  border:4px solid #f1ecc6;
  padding:10px;
  background:url(../img/note_bg.gif) repeat 0;
  font-size:13px;
  width:618px;
  margin-bottom:20px;
}
.msg{
  font-weight:bold;
  padding:10px 10px 5px;
}
.msg em{
  font-size:20px;
  color:red;
}
.warning{
  text-indent:-1em;
  padding-left:1em;
}


#no01,
#no02,
#no03{
  clear:both;
  position:relative;
  margin-bottom:45px;
}
#no01 h2,
#no02 h2,
#no03 h2{
  position:absolute;
  top:-3px;
  left:20px;
}
#no01 h2 img,
#no02 h2 img,
#no03 h2 img{
  width:100%;
}
#no01 > div,
#no02 > div,
#no03 > div{
  background-color:white;
  border-top:5px solid #4da703;
  box-shadow: 0px 2px 2px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 2px 2px 1px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 2px 2px 1px rgba(0,0,0,0.3);
  padding:15px 18px;
  background-image:url(../img/no1_bg.jpg);
  background-repeat:no-repeat;
  background-position:682px 13px;
  padding-top:50px;
}

#no02 > div{
  border-top:5px solid #07a7ba;
  background-image:url(../img/no02_bg.jpg);
}
#no03 > div{
  border-top:5px solid #f16600;
  background-image:url(../img/no03_bg.jpg);
  overflow:hidden;
}


#no01 section{
  width:32%;
  margin-right:2%;
  float:left;
  box-sizing:border-box;
  margin-bottom:13px;
}
#no01 section:nth-of-type(3n){
  margin-right:0;
}
#no01 section:nth-of-type(4){
  clear:both;
}
#no01 section:last-of-type{
  margin-bottom:25px;
}

#no02 .note{
  min-height:90px;
}
#no02 section,
#no03 section{
  width:24%;
  margin-right:1.3333%;
  float:left;
  box-sizing:border-box;
  margin-bottom:13px;
}
#no02 section:nth-of-type(4),
#no03 section:nth-of-type(4){
  margin-right:0;
}
#no02 section:last-of-type,
#no03 section:last-of-type{
  margin-bottom:25px;
}

#no01 section ul,
#no02 section ul,
#no03 section ul{
  display:none;
  background-color:#f3ffea;
  padding:10px;
}
#no02 section ul{
  background-color:#eefeff;
}
#no03 section ul{
  background-color:#fff4ec;
}
#no01 section li,
#no02 section li,
#no03 section li{
  margin-bottom:10px;
}
#no01 section h3,
#no02 section h3,
#no03 section h3{
  border:4px solid #f2f2f2;
  border-radius:2px;
  box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.1);
  cursor:pointer;
  transition:all ease 0.5s;
}
#no01 section h3:hover,
#no02 section h3:hover,
#no03 section h3:hover{
  opacity:0.6;
}
#no01 section h3 span,
#no02 section h3 span,
#no03 section h3 span{
  font-size:18px;
  color:#3e8900;
  padding-left:18px;
  border:1px solid #dedede;
  display:block;
  height:65px;
  padding-top:10px;
  box-shadow: 0px -35px 30px -5px rgba(0, 0, 0, 0.15) inset;
  -webkit-box-shadow: 0px -35px 30px -5px rgba(0, 0, 0, 0.15) inset;
  -moz-box-shadow: 0px -35px 30px -5px rgba(0, 0, 0, 0.15) inset;
  background:url(../img/no01_arrow.png) no-repeat 50% 90%;
}
#no02 section h3 span{
  color:#07a7ba;
  background:url(../img/no02_arrow.png) no-repeat 50% 90%;
  line-height:1.2em;
}
#no03 section h3 span{
  color:#f36500;
  background:url(../img/no03_arrow.png) no-repeat 50% 90%;
  line-height:1.2em;
}
.js_menu + ul li{
background:url(../img/top/arrow_01.png) no-repeat 0 50%;
padding-left:17px;
}

.no01_01{
  background:url(../img/no01_h3_bg.png) no-repeat 5px 9px, url(../img/no01_img01.png) no-repeat 97% 3px;
}
.no01_02{
  background:url(../img/no01_h3_bg.png) no-repeat 5px 9px, url(../img/no01_img02.png) no-repeat 97% 3px;
}
.no01_03{
  background:url(../img/no01_h3_bg.png) no-repeat 5px 9px, url(../img/no01_img03.png) no-repeat 97% 3px;
}
.no01_04{
  background:url(../img/no01_h3_bg.png) no-repeat 5px 9px, url(../img/no01_img04.png) no-repeat 97% 3px;
}
.no01_04 span{
  font-size:17px !important;
}

.no01_05{
  background:url(../img/no01_h3_bg.png) no-repeat 5px 9px, url(../img/no01_img05.png) no-repeat 97% 3px;
}
.no01_06{
  background:url(../img/no01_h3_bg.png) no-repeat 5px 9px, url(../img/no01_img06.png) no-repeat 97% 3px;
}
.no02_01{
  background:url(../img/no02_h3_bg.png) no-repeat 5px 9px, url(../img/no02_img01.png) no-repeat 97% 3px;
}
.no02_02{
  background:url(../img/no02_h3_bg.png) no-repeat 5px 9px, url(../img/no02_img02.png) no-repeat 97% 3px;
}
.no02_03{
  background:url(../img/no02_h3_bg.png) no-repeat 5px 9px, url(../img/no02_img03.png) no-repeat 97% 3px;
}
.no02_04{
  background:url(../img/no02_h3_bg.png) no-repeat 5px 9px, url(../img/no02_img04.png) no-repeat 97% 3px;
}
.no03_01{
  background:url(../img/no03_h3_bg.png) no-repeat 5px 9px, url(../img/no03_img01.png) no-repeat 97% 3px;
}
.no03_02{
  background:url(../img/no03_h3_bg.png) no-repeat 5px 9px, url(../img/no03_img02.png) no-repeat 97% 3px;
}
.no03_03{
  background:url(../img/no03_h3_bg.png) no-repeat 5px 9px, url(../img/no03_img03.png) no-repeat 97% 3px;
}
.no03_04{
  background:url(../img/no03_h3_bg.png) no-repeat 5px 9px, url(../img/no03_img04.png) no-repeat 97% 3px;
}

#no01 section h3.open span{
  background:url(../img/no01_arrow02.png) no-repeat 50% 90%;
}
#no02 section h3.open span{
  background:url(../img/no02_arrow02.png) no-repeat 50% 90%;
}
#no03 section h3.open span{
  background:url(../img/no03_arrow02.png) no-repeat 50% 90%;
}


/* 相談部分 */
.soudan{
  clear:both;
  position:relative;
  padding-top:20px;
}
#no01 .soudan div{
  background:url(../img/no1_soudan_bg.gif) repeat;
  padding:7px;
}
#no01 .soudan div p{
  padding-bottom:20px;
  padding-top:37px;
  background:url(../img/soudan_underline.png) no-repeat 170px 60px, url(../img/soudan_note_bg.gif) repeat;
  font-size:17px;
  text-align:center;
  color:#333;
}
#no01 .soudan div p span{
  color:#4da703;
}
#no01 .soudan h4{
  font-size:23px;
  color:#2a852e;
  background-color:#f2ffe9;
  position:absolute;
  border:3px solid #82cd44;
  border-radius:7px;
  padding:1px 30px;
  left:0;
  right:0;
  top:0;
  margin:0 auto;
  width:100%;
  max-width:445px;
}
.soudan div p span em{
  font-size:22px;
}
.balloon{
  position:absolute;
  top:0;
  z-index:2;
}
#no02 .soudan div{
  background:url(../img/no2_soudan_bg.gif) repeat;
  padding:7px;
}
#no02 .soudan div p{
  padding:37px 30px 10px;
  background:url(../img/soudan_underline2.png) no-repeat 100px 60px, url(../img/soudan_note_bg.gif) repeat;
  font-size:17px;
}
#no02 .soudan h4{
  font-size:23px;
  color:#00879a;
  background-color:#eefeff;
  position:absolute;
  border:3px solid #83d3dc;
  border-radius:7px;
  padding:1px 30px;
  left:0;
  right:0;
  top:0;
  margin:0 auto;
  width:100%;
  max-width:800px;
  text-align:center;
  letter-spacing:-0.05em;
}
.soudan_msg{
  font-size:13px;
  display:block;
  padding-top:20px;
  color:#333;
}
#no02 .soudan div p span span{
  color:#0091a2;
  padding-left:80px;
}
#s_inquiry,
#s_inq{
display:none;
}
.drawer{
display:none;
}
.pc_view{
display:block;
}
.sp_view{
display:none;
}
/* 当事務所が選ばれる３つの理由(スマホ用) */
.reasons_s{
  display:none;
  text-align:center;
}


@media screen and (max-width:980px){
#wrapper{
  width:98%;
  margin:0 auto;
}

#no01 > div,
#no02 > div,
#no03 > div{
  background-image:none;
}
.note{
  width:100%;
  box-sizing:border-box;
}
  
#no01 section{
  width:49%;
  margin-right:2%;
}
#no01 section:nth-of-type(3n){
  margin-right:2%;
}
#no01 section:nth-of-type(4){
  clear:none;
}
#no01 section:last-of-type{
  margin-bottom:25px;
}
#no01 section:nth-of-type(2n){
  margin-right:0;
}


#no02 section,
#no03 section{
  width:49%;
  margin-right:2%;
}
#no02 section:nth-of-type(4),
#no03 section:nth-of-type(4){
  margin-right:2%;
}
#no02 section:last-of-type,
#no03 section:last-of-type{
  margin-bottom:25px;
}
#no02 section:nth-of-type(2n),
#no03 section:nth-of-type(2n){
  margin-right:0;
}
 
 .soudan h4{
  position:relative !important;
  max-width:none !important;
  box-sizing:border-box !important;
  border-radius:0 !important;
 }
 .soudan div p{
  height:auto !important;
  padding-bottom:20px;
 }
 .balloon{
  top:auto;
 }
.balloon img{
  zoom:0.5;
}
.balloon{
  top:-15px;
}
.soudan h4{
  text-align:left !important;
  border:none !important;
}
#no01 .soudan div p,
#no02 .soudan div p {
  background: url(../img/soudan_note_bg.gif) repeat;
  text-align:left;
  padding-top:10px;
  padding-left:30px;
}
#no02 .soudan div p span span {
   padding-left: 0;
}
.soudan_msg {
  padding-top: 10px;
}

#melit {
    clear: both;
    background: #fff url(../img/top/melit.jpg) no-repeat 50% 86%;
    padding: 40px 40px 300px 40px;
    position: relative;
}
#header_wrapper,
#f_body{
  width:auto;
}
#navigation,
#inquiry{
  display:none;
}
#sub_inquiry{
display:none;
}
#s_inquiry{
display:block;
text-align:center;
margin-bottom:40px;
}
#s_inquiry img{
  max-width:100%;
}

/* スマホ用のヘッダー部分の電話と問い合わせ */
#s_inq{
  display:block;
  position:fixed;
  z-index:9;
  right:50px;
  top:5px;
}
#s_inq li{
  display:inline-block;
}
#s_inq li img{
  width:56px;
}
#s_inq{
  position:fixed;
}

/* ハンバーガーメニュー */
.drawer{
display:block;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after{
background-color:#f16600 !important;
}
.drawer-open .drawer-hamburger-icon{
background-color:transparent !important;
}
nav.drawer-nav li{
border-bottom:1px solid #f16600 !important;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  background-color:#77c334 !important;
  height:4px !important;
}
.drawer-hamburger-icon:before{
  top:-15px !important;
}
.drawer-hamburger-icon:after{
  top:15px !important;
}
.drawer-open .drawer-hamburger-icon:before{
  top:0 !important;
}
.drawer-open .drawer-hamburger-icon:after{
  top:0 !important;
}
.drawer--right .drawer-nav{
  right:-50% !important;
}
.drawer--right.drawer-open .drawer-nav{
  right:0px !important;
}
.drawer--right.drawer-open .drawer-hamburger{
  right:330px !important;
  right:50% !important;
}
.drawer--right .drawer-hamburger, 
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger{
}
.drawer-nav{
  width:330px !important;
  width:50% !important;
}
.drawer-nav ul{
  width:100% !important;
  float:none !important;
  padding-top:0 !important;
}
.drawer-nav li{
  float:none !important;
  margin-right:0 !important;
  border-bottom:1px solid #eb6100 !important;
}
nav.drawer-nav li a{
  font-size:22px !important;
  display:block !important;
  padding-right:30px !important;
  color:#333;
}
.drawer-dropdown{
  background:url(../sp/img/memu_bg.png) no-repeat 95% 25px !important;
}
.drawer-dropdown a{
  text-decoration:none !important;  
}
.drawer-dropdown.open{
  background:url(../sp/img/memu_bg01.png) no-repeat 95% 25px !important;
}
.cat_no1 a{ /* くらしの手続き */
  color:#4da703 !important;
}
.cat_no2 a{ /* 会社法人・事業に関する手続き */
  color:#07a7ba !important;
}
.cat_no3 a{ /* くらしのトラブルに関する手続き */
  color:#f16600 !important;
}

nav.drawer-nav li a{
  font-size:16px !important;
}
#s_inq li img{
  width:45px !important;
}
.drawer-hamburger{
  padding-top:14px !important;
}

} /*980px*/

@media screen and (max-width:880px){
#reasons #r01,
#reasons #r02,
#reasons #r03,
#reasons #voices{
  position:static;
  margin-bottom:20px;
  width:auto;
}
#reasons .reason{
  width:auto;
}
#reasons .reason p{
  width:auto;
}
#reasons .reason dl{
  margin-top:5px;
}
#reasons .reason dl dd{
  margin-bottom:10px;
  width:auto;
}
#reasons h2{
  background:url(../img/top/h2_06_s.gif) no-repeat 48% 10px;
  height:140px;
  color:white;
  font-size:6px;
  text-align:right;
  padding-top:0;
  margin-bottom:320px;
}
#reasons{
  background:url(../img/top/bg_reasons_s.gif) no-repeat 50% 170px white;
}
#voices{
  background-position:50% 0;
}
#voices a{
  background-position:50% bottom;
}
#voices a:hover{
  background-position:50% bottom;
}

} /* 880px */

@media screen and (max-width:768px){
#summary{
  display:none;
}
#header h1{
  background-size:75% auto;
  top:0;
}
#main{
margin-top:-350px;
}
#sns_bnr li{
  width:98%;
  text-align:center;
  margin-bottom:10px;
}
#no01 .soudan div p,
#no02 .soudan div p {
  padding-left:10px;
}
#sub_navigation{
visibility: hidden;
}
#f_body ul{
  margin-bottom:0 !important;
}
#f_body li{
  line-height:0 !important;
}
#f_body address{
  padding:60px 20px 0;
  margin-bottom:10px;
}
#f_body small{
  padding-bottom:10px;
}

#melit #office_btn a{
  right:0;
  left:0;
  margin-left:auto;
  margin-right:auto;
}

} /* 768px */

@media screen and (max-width:640px){
#news dd{
  clear:both;
  padding-left:0;
}
#scroll{
  padding-left:10px !important;
  padding-right:5px !important;
}
#no01 section,
#no02 section,
#no03 section{
  width:100%;
  margin-right:0;
}
.soudan h4{
  padding:10px !important;
}
#reasons .reason h3{
  padding:4px 0 2px 105px;
  line-height:31px;
}
#reasons h2{
  background:none;
  height:0;
  margin-bottom:20px;
  text-align:center;
  display:none;
}
#reasons{
  background:white;
}
.reasons_s{
  display:block;  
  margin-bottom:15px;
}
} /* 640px */

@media screen and (max-width:600px){
.pc_view{
  display:none;
}
.sp_view{
  display:block;
}
#no01 h2, #no02 h2, #no03 h2{
  left:0;
  width:100%;
  text-align:center;
}
#melit .catch{
  background:none;
  height:auto;
  padding:0 0 20px;
  font-size:20px;
}
#melit .catch .red{
  color:red;
}
} /* 600px */