@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ,button{border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;box-sizing: border-box;}
h1, h2, h3, h4, h5, h6 {
	line-height: 140% !important;
}
ol,ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
img{height: auto;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;position: relative;}
html {-webkit-text-size-adjust: 100%}
@font-face {
	src: local('noto'),
    url('../font/noto.woff2') format('woff2');
    font-display: swap;
}
body{
	font-family: "noto","ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro"  ,"メイリオ" , Meiryo, "Meiryo UI" , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-size: 16px;
	line-height: 170%;
	color:#574d3b;
	-webkit-text-size-adjust:100%;
	background:url(../images/background.jpg) repeat center top;
	font-weight: normal;
	width: 100%;
	overflow-x: hidden;
}
@font-face {
  font-family: 'web-font';
  font-style: normal;
  font-weight: 400;
  src: local('mplus'),
       url('../font/UtsukushiFONT.woff2') format('woff2');
       font-display: swap;
}
 .web-font{font-family: "web-font",游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro";}
 @font-face {
  font-family: 'web-font-alphabet';
  font-style: normal;
  font-weight: 400;
  src: local('mplus'),
       url('../font/ROCK.woff2') format('woff2');
       font-display: swap;
}
 .web-font-number{font-family: "web-font-alphabet";}
 @font-face {
   font-family: 'font-hand';
   font-style: normal;
   font-weight: 400;
   src: local('mplus'),
		url('../font/mushin.woff2') format('woff2');
		font-display: swap;
 }
  .font-hand{font-family: "font-hand";}
 
 
/* リンク設定
------------------------------------------------------------*/
a{
	margin:0;
	padding:0;
	text-decoration:none;
	outline:0;
	vertical-align:baseline;
	background:transparent;
	font-size:100%;
	font-weight:normal;
	color:#5f422f;
	cursor: pointer !important;
}
a:hover, a:active{
	-webkit-transition:opacity 1s;
	-moz-transition:opacity 1s;
	-o-transition:opacity 1s; 
	outline: none;
	color:#8ebecf;
}
.link{
	font-weight: bold;
	text-decoration: underline;
	font-size: 1.1em;
}
.link-banner{
	display: block;
	margin: 10px auto;
}
.link-banner img{
	display: block;
	margin: 0 auto;
	padding: 0;
}
/* フォーム
------------------------------------------------------------*/
input[type="text"], textarea,input[type="tel"],input[type="email"],select,input[type="date"]{
	vertical-align:middle;
	max-width:99%;
	width: 99%;
	line-height:40px;
	height:40px;
	padding:1px 10px;
	border:1px solid #d4d4d7;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	font-size:100%;
	color:#555;
	background:#fcfcfc;
	box-sizing: border-box;
}
input[type="date"]{width: auto;}
textarea{
	height:auto;
	line-height:1.5;
}
input[type="submit"],input[type="reset"],input[type="button"],.button{
	position: relative;
	background: url(../images/back-button.jpg) repeat center center;
	padding: 20px 10px 18px 10px;
	border: 1px solid #f6ecd8;
	color: #5f422f;
	-webkit-transition: none;
	transition: none;
	display: inline-block;
	box-sizing: border-box;
	border-radius: 2px;
	font-size: 100%;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: .2s;
	box-shadow: 4px 4px 0px #b8a38c;
}
input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:hover{
	box-shadow: inset 0 0 1px #b8a38c;
    transform: translateY(2px);
	color: #5f422f;
	background: url(../images/back-button-h.jpg) repeat center center;

}
.arrow-green,.arrow{
	position: relative;
	padding-left: 26px;
	display: inline;
}
.arrow-green:after{
	content: '';
	display: block;
	position: absolute;
	background: url(../images/arrow-green.png) no-repeat center top;
	width: 20px;
	height: 19px;
	top: 0;
	bottom: 0;
	left: 0;
    margin: auto;
}
.arrow:after{
	content: '';
	display: block;
	position: absolute;
	background: url(../images/icon-arrow.png) no-repeat center top;
	width: 9px;
	height: 12px;
	top: 0;
	bottom: 0;
	left: 0;
    margin: auto;
}

.clear{clear: both;}
hr{
	clear: both;
	border: none;
	height: 5px;
}
nav.panel:after,#mainNav:after{clear: both;}
.overflow:after {
    content: " ";
    display: table;
    clear: both;
}
/* 共通レイアウト
------------------------------------------------------------*/
#container{position: relative;}
#home #header {align-items: stretch;}
#home .header-inner{
	width: 40%;
	padding-top: 90px;
	justify-content: flex-end;
	padding-right: 50px;
}
.wrapper{
	margin:0 auto;
	width:1024px;
}
#footer{
	clear:both;
	padding-top:80px;
	background: url(../images/back-pink.jpg) repeat center top;
	position: relative;
	text-align: center;
	z-index: 1100;
} 
#footer:after{
	content: '';
	display: block;
	width: 100%;
	height: 6px;
	background: url(../images/line-footer.jpg) no-repeat center top;
	background-size: 100% 6px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;zw
}
#page-cont{align-items: stretch;}
#page-cont #header{
	width: 27%;
	background: url(../images/background.jpg) repeat center top;
	position: relative;
	z-index: 1001;
}
#page-cont #container{
	width: 73%;
	background: url(../images/back-l-beige.jpg) repeat center top;
}
#page-cont #container-inner{max-width: 1040px;}
.flex-area{
	display: flex;
	justify-content:space-between;
	align-items: center;
}
.flex-area-center{
	display: flex;
	justify-content:center;
	align-items: center;
}
.flex-area-left{
	display: flex;
	justify-content:flex-start;
	align-items: center;
}

.cont-box{
	clear: both;
	margin: 0 auto 40px auto;
	display: block;
}
.section-box{
	box-sizing: border-box;
	border-radius: 6px;
	position: relative;
	padding: 50px 0 80px;
}
.wrap80{
	max-width: 80%;
	width: 100%;
	margin: 0 auto;
}
.page .section-box{padding:0 30px 50px;}
.round{border-radius: 2px;}
.back-beige{background: url(../images/background.jpg) repeat center top;}
.back-l-beige{background: url(../images/back-l-beige.jpg) repeat center top;}
.back-pink{background: url(../images/back-pink.jpg) repeat center top;}
.back-white{background:#fff;}
.back-blue{background: url(../images/back-q.jpg) repeat center bottom;}
.back-green{background: rgb(213 228 139 / 60%);}
.box-white{
	background:#fff;
	border: 3px solid #fbf8f0;
	padding: 10px 10px 10px;
	border-radius: 2px;
	position: relative;
}
.box-pink{
	background: url(../images/back-pink.jpg) repeat center top;
	border-radius: 2px;
}
.box-has-title{padding: 35px 25px 20px;}
.box-has-box{padding: 15px;}
.box-inner{padding: 35px 25px 20px;}
.section-title{
	background: url(../images/line-h2.png) no-repeat center bottom;
	padding-bottom: 13px;
	margin-bottom: 30px;
	text-align:left;
	justify-content: center;
}
/* タイポグラフィ
------------------------------------------------------------*/
h1,h2,h3,h4{font-family: "web-font",游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro";}
h2.title,.post h2{
	clear:both;
	margin-top: 30px;
	margin-bottom:40px;
	padding-bottom:15px;
	font-size:180%;
	color: #544436;
	font-weight: normal;
}
h2.section-title{
	font-size: 28px;
	justify-content: center;
}
h2.section-title .section-title-icon{margin-right: 10px;}
h3.title{
	font-size:140%;
	margin-top: 20px;
	margin-bottom: 15px;
	color: #4c3e2d;
	padding-bottom: 12px;
	font-weight: normal;
	background: url(../images/line-h3.png) no-repeat center bottom;
	background-size: 100% 8px;
}
h3.title-noline{background: none;}
h3.title-brown{
	background:url(../images/line-h2.png) no-repeat center bottom;
}
h3.title-noline{background: none;}

h4.title{
	margin: 15px 0;
    padding: 6px 0;
    font-size:110%;
    border-bottom: 2px #cec4ac dashed;
}
h5.title{padding: 0 0 10px 0;}
h2.first,h3.first,h4.first{	margin-top: 0;}
.post p{padding-bottom:15px;}
.post ul{
	margin-bottom: 20px;
	margin-left: 1em;
}
.post ul li{
	padding-left:5px;
	list-style-position: outside;
}
ul.list{margin-left: 20px;}
ul.list li{
	padding-left: 10px;
	display: block;
	position: relative;
}
ul.list li:before{
	content: '';
    display: block;
    background: url(../images/icon-list.png) no-repeat center top;
    background-size: 100% 100%;
    width: 12px;
    height: 13px;
    position: absolute;
    left: -10px;
    top: 7px;
}
.page-post dl dt{
	font-size:140%;
	margin-top: 20px;
	margin-bottom: 10px;
	color: #4c3e2d;
	padding-bottom: 12px;
	font-weight: normal;
	background: url(../images/line-h3.png) no-repeat center bottom;
	background-size: 100% 8px;
}
.page-post dl dd{margin: 0 15px 30px;}
.post ol{margin:0 0 10px 30px;}
.post ol li{list-style:decimal;}
table{
	width: 100%;
    border-collapse: separate !important;
    border-spacing: 1px !important;
    margin: 10px 0 20px;
    border: #f3eee9 solid !important;
    border-width: 1px !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
}
th{
	border: #f3eee9 solid !important;
    border-width: 0 0 0 0 !important;
	vertical-align: top;
	box-sizing:border-box;
	background: url(../images/back-pink.jpg) repeat center top !important;
	padding:17px 20px 15px !important; 
	min-width: 9em;
}
td{
	border: #f3eee9 solid !important;
    border-width: 0 0 0 1px !important;
    vertical-align: middle;
    box-sizing: border-box !important;
    padding: 17px 20px 15px !important;
    background: #fff ;
}
table th .th,table td .td{
	display: block;
	box-sizing:border-box;
}
.inline-img{
	display: inline;
	vertical-align: middle;
	padding: 0 5px 0 0;
}
.inline-p{
	display: inline;
	vertical-align: middle;
}
.title-area{
	position: relative;
	clear: both;
	margin-bottom: 5px;
}
.text-center{text-align: center;}
.text-right{text-align: right;}
.text-left{text-align: left;}
.relative{position: relative;}
.post-link{
	text-decoration: underline;
	font-weight: bold;
}
.marker{
	background: linear-gradient(transparent 60%, #ffeed1 60%);
	padding-bottom: 3px;
}
.marker-white{
	background: linear-gradient(transparent 60%, #fff 60%);
	padding-bottom:6px;
}

.icon-flex{
	flex-shrink: 0;
	margin-right: 10px;
}
.absolute-img{position: absolute;}
body .font150{font-size:150%;}
body .font140{font-size:140%;}
body .font130{font-size:130%;}
body .font120{font-size:120%;}
.min-p{font-size: 90%;}
br.br1024,br.br849,br.br789,br.br589,br.br489,br.br389{display: none;}
/* ---       ヘッダー
----------------------------------------------------------------------*/
#header-inner-box{padding-bottom: 50px;}
.page #header{
	padding-right: 40px;
	justify-content: flex-end;
}
.page .header-inner{
	position: fixed;
	top: 10px;
	padding-bottom: 30px;
}
.site-description {
    font-size: 12px;
    line-height: 130%;
    padding: 5px 0 ;
    font-weight: normal;
}
.page .site-description {font-size: 12px;}
.site-title{
	margin:0 auto;
	display: block;
	padding-top: 20px;
}
#home .site-title{
	margin: 0 auto 40px;
	padding-top: 0;
}
.site-title-h2{font-size: 24px;}
.page .site-title-h2 { font-size: 20px;}
#header-button{
	position: absolute;
    top: -5px;
    right: 20px;
    z-index: 100;
	align-items: stretch;
}
#header-mail{
	padding: 12px 20px 10px 12px;
	border: 1px solid #cfdb82;
	font-size: 110%;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
	flex-wrap: wrap;
	max-width: 260px;
}
#header-mail .header-button-top{
	width: 100%;
	
	text-align: center;
	font-size: 0.75em;
	color: #839706;
	font-weight: normal;
	padding-bottom: 5px;
	line-height: 1em;
}
header .contact-button{
	margin: 20px auto 0;
	width: 100%;
}
#header-button img{margin-right: 10px;}
.is-animation{position: fixed !important;}
.is-animation #header-mail{
	padding: 12px 20px 3px 12px;
	font-size: 100%;
}
.is-animation .icon-mail{
	width: 56px;
	height: auto;
}
/* ----------------------------トップページ -----------------------------------*/
/*--------------------　　メインイメージ　------------------*/
#mainimage{
	position: relative;
	z-index: 1;
	display: block;
	width: 60%;
	background: url(../images/mainimage.jpg) no-repeat right top;
	background-size: 1200px auto;
	padding-right:100px;
}
#mainimage .main-catch{
	color: #65422d;
    text-shadow: #fcf6f0 1px 1px 5px, #fcf6f0 -1px 1px 5px, #fcf6f0 1px -1px 5px, #fcf6f0 -1px -1px 5px;
    z-index: 10;
    display: block;
    position: relative;
    margin: auto;
    top: 40%;
    left: 60px;
}
#mainimage h2.main-h2{
	font-size: 280%;
    margin: 0 auto 30px;
    font-weight: bold;
}
#mainimage h3.main-h3{
	font-size: 120%;
	margin: 0 ;
}
/* --------------section youtube------------------*/
#movie-area{
	margin: 0 auto;
	position: relative;
	align-items: flex-start;
}
#movie-area .movie-box{
	width: 30%;
	margin: 0 1.5%;
	position: relative;
	height: auto;
	overflow: hidden;
}
#movie-area iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.movie-title{
	margin: 0 auto 20px;
	text-align: left;
	padding: 10px 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	line-height: 130%;
	font-size: 0.9em;
}
.movie-title .arrow-green:after {
	bottom: auto;
	top: 0;
}
/* --------------section1 お知らせ------------------*/
#news-area #news-right{
	width: 260px;
	margin-right: 30px;
}
#news-area .section-title{margin-bottom: 10px;}
#news-area .icon-news{
	display: block;
	margin: 0 auto 2px;
}
#top-section1 .button{
	width: 240px;
	margin: 20px auto 0;
	display: block;
	font-size: 100%;
}
#news-area #news-feed{
	flex: 2;-webkit-box-flex:2;-ms-flex:2;
	border: 3px solid #fbf8f0;
	border-radius: 2px;
	padding: 30px 35px 20px;
	position: relative;
	background: #fff;
}
#news-umekomi{background: #fff;}
#news-area #news-feed iframe {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: hidden;
	height: 100%;
	width: 100%;
	position: relative;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
.newsList li {
	font-size: 100%;
   background: url(../images/line-brown.png) no-repeat center bottom;
   background-size: 100% 2px;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 20px 0 18px;
}
.newsList .catName{
	background: url(../images/back-q.jpg) no-repeat center top;
	padding: 0 10px;
	margin: 0 10px 0 0;
	border-radius: 6px;
	word-break: keep-all;
}
.newsList .up_ymd{margin-right: 34px;}
.newsList a{font-weight:  normal !important;}
.newsList .title span{position: relative;}
.newsList .title span:after {
	content: '';
	display: block;
	position: absolute;
	background: url(../images/icon-arrow.png) no-repeat center top;
	width: 9px;
	height: 12px;
	top: 2px;
	left: -15px;
	margin: auto;
}
/* --------------section2 ブログ＆コラム------------------*/
#top-section2 .button{
	width: 240px;
	margin: 20px auto 0;
	display:block;
}
#column-umekomi{background: #fff;}
#column-feed{
	border: 3px solid #fbf8f0;
	border-radius: 2px;
	padding: 30px 35px 20px;
	position: relative;
	background: #fff;
	margin: 0 auto;
}
#column-feed iframe {
	width: 100%;
	max-width: 800px;
	height: auto !important;
	margin: 0 auto;
	display: block;
	box-sizing: border-box;
}
/* --------------section3 強み------------------*/
.icon-logo-brown{
	display: block;
	margin:0 auto 10px;
}
#point-area {
	align-items: stretch;
	margin: 60px auto 20px;
}
#point-area .point-box{
	border: 3px solid #fbf8f0;
	border-radius: 2px;
	padding: 120px 25px 30px;
	position: relative;
	background: #fff;
	width: 32%;
}
#point-area .point-box h3.title{
	background: url(../images/point-circle.png) no-repeat center top;
    width: 100%;
    height: 155px;
    background-size: 174px 100%;
    text-align: center;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: -53px;
    padding: 27px 0 0;
    line-height: 130% !important;
	align-items:center;
	justify-content:center;
}
.font-big #point-area .point-box{
	line-height: 170%;
}
.font-big #point-area .point-box h3.title{background-size: 162px 100%;}
.font-big #point-area #point2 h3.title{font-size: 120%;}
#point-area .point-box .icon-point{
	display: block;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 4px;
}
/* --------------section4 サービス一覧------------------*/
#service-area{align-items: stretch;}
#service-area .service-box{
	width: 48%;
	border: 1px solid #ede4d1;
	background: #fffefa;
	border-radius: 2px;
	transition: .2s;
	box-shadow: 4px 4px 0px #b8a38c;
	position: relative;
	padding: 15px 20px 74px;
}
#service-area .service-box:hover{
	box-shadow: inset 0 0 1px #b8a38c;
    transform: translateY(2px);
	color: #5f422f;
}
#service-area .service-photo{
	max-width: 400px;
	width: 100%;
}
#service-area .service-box h4{
	text-align: center;
	font-size: 120%;
	padding: 0 0 25px;
}
#service-area .service-box .button{
	box-shadow: none !important;
    width: 100%;
    position: absolute;
    bottom: 1px;
    left: 0;
    right: 0;
    padding: 15px 10px 12px;
    border: none;
}
#service-area .service-box .button p{display: inline;}
#service-area .service-box .title-area{
	height: 70px;
	justify-content: center;
	background: url(../images/line-h3.png) no-repeat center bottom;
	background-size: 100% 8px;
}
#service-area .service-box .title-area h3{
	margin: 0 auto;
	line-height: 130% !important;
	font-size: 140%;
	padding: 0;
}
#service-area #top-service2 .title-area h3{font-size: 110%;}
.font-big #service-area #top-service2 .title-area h3 br{display: none;}
#service-area .service-box .title-area h3 span{
	padding-left: 10px;
	display: block;
}
#service-area .service-box .title-area h3 span:before{
	content: '';
    display: block;
    background: url(../images/icon-list.png) no-repeat center top;
    width: 12px;
    height: 13px;
    position: absolute;
    left: -10px;
    top: 7px;
}
#service-area img.service-photo{
	display: block;
	margin: 8px auto 15px;
}
#service-area .service-box p{
	font-weight: normal;
	color: #333;
}
/* --------------section5 ごあいさつ------------------*/
#greeting-area{
	border: 3px solid #fbf8f0;
    border-radius: 2px;
    padding: 0;
    position: relative;
    background: #fff;
}
#greeting-area .text{
	flex: 2;-webkit-box-flex:2;-ms-flex:2;
	padding: 0 30px;
	order: 1;-webkit-order: 1;-ms-flex-order:1 ;
}
#greeting-area .greeting-photo-box{
	order: 2;
    width: auto;
	max-width: 520px;
    min-height: 370px;
	padding: 0;
    height: 100%;
	aspect-ratio: 3 / 2;
}
#greeting-area .greeting-photo{
	width: 100%;
	height: 100%;
	object-fit: cover;
	
	object-position: center -100px;
}


#greeting-button-area{margin-top: 20px;}
#greeting-button-area .button{width: 48%;}
#greeting-button-area .button span{display: inline;}
/* ----------------------------footer-----------------------------------*/
.footer-title{
	justify-content:center;
	margin-bottom: 20px;
	text-align: left;
}
.footer-title h2{
	font-weight: normal !important;
	margin: 0;
}
#footer .site-description{font-size: 14px;}
.footer-title .footer-logo{margin-right: 15px;}

.link-insta{
	background: #fff;
	border-radius: 100%;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 10px;
}
#link-insta img{
	width: 34px;
	height: auto;
}


#footer-info-area{  
	 margin-bottom: 50px;
	 text-align: center;
}
#footer .footer-box{border: 3px solid #fbe8e8;}
#footer-info .info-box{
	text-align: left;
	margin: 0 auto 20px;
	width:380px;
}
.font-big #footer-info .info-box{width: 380px;}
#footer-info .info-box p{padding-bottom: 5px;}
#footer-info .info-box dl{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding-left: 40px;
}
#footer-info .info-box dt{
	width: 6em;
	position: relative;
}
#footer-info .info-box dt:before{
	content: '';
	display: block;
	background: url(../images/icon-list.png) no-repeat center top;
	background-size: 100% 100%;
	width: 12px;
	height: 13px;
	position: absolute;
	left: -20px;
	top: 7px;
}

#footer-info .button{
	width:360px;
	font-size:1.3em;
	justify-content:center;
	flex-wrap: wrap;
	margin: 0 auto 50px;
	text-align: left;
	padding: 20px 10px 14px 10px;
}
#footer-mail .footer-button-top{
	width: 100%;
	text-align: center;
	font-size: 0.7em;
	color: #839706;
	font-weight: normal;
	padding-bottom: 10px;
	line-height: 1em;
}
#footer-info .button img{
	margin-right: 10px;
}
#footer .footer-box.map{
	max-width: 600px;
	height: auto;
	width: 100%;
}
#footer-nav{
	margin: 0 auto 20px;
}
#footer-nav a{
	margin: 0 20px;
}

#copyright{
	font-size: 80%;
	padding: 10px;
	line-height: 140%;
}

#footer-sp-area{display: none;}
#footer-sp-area-inner {
	position: fixed;
	margin: auto;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
	bottom: 0;
	opacity: 0.9;
	z-index: 10000;
	align-items: stretch;
	justify-content:space-around;
	background: #cadfe8;
	padding: 5px 0;
}
#footer-sp-area .button{
	width: 48%;
	padding:20px 20px;
	
}
#footer-sp-line {
	background: #fff;
}
#footer-sp-line .icon-line{
	margin-right: 20px;
}




/* 下層ページ共通
------------------------------------------------------------*/
/* -------------------------サイドボタン------------------------------*/
#side-button{
	position: fixed;
	left: -8px;
	top: 100px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	background: url(../images/back-button-blue.jpg) repeat center center;
	padding: 20px 8px 15px 10px;
	z-index: 1200;
}
.page #side-button{top: 200px;}
#side-button .button-change{
	border: 2px solid #f6ecd8;
	color: 	#59473d;
	background: url(../images/back-button.jpg) repeat center center;
	padding: 13px 4px 11px;
	height: 68px;
	text-align: center;
	cursor: pointer;
}
#side-button .active{
	color: 	#b49d82;
	background: url(../images/background.jpg) repeat center center;
}
#button-change1{
	font-size: 16px;
	margin: 11px 0;
}
#button-change2{font-size: 20px;}
.icon-font{
	width: 46px;
	height: auto;
	margin-bottom: 5px;
}
#side-button p{word-break: keep-all;}

#pagetop{
	position: absolute;
    right: 20px;
    bottom: 20px;
    background: url(../images/page-top.png) no-repeat center top;
    width: 85px;
    height: 80px;
    text-align: center;
    line-height: 120% !important;
    border-radius: 47%;
    box-shadow: 4px 4px 0px #b8a38c;
    transform: translateY(2px);
    opacity: 0.8;
}
#pagetop:active{
	box-shadow: inset 0 0 1px #b8a38c;
    transform: translateY(2px);
}
#pagetop a{
    padding-top: 17px;
	display: block;
	position: relative;
}
#pagetop a:after{
	content: '';
	display: block;
	position: absolute;
	width: 53px;
	height: 34px;
	background: url(../images/icon-bird.png) no-repeat center top;
	top: -10px;
	right: -10px;
	background-size: 100% 100%;
}
#pagetop .arrow-up{
	display: block;
	margin: 0 auto;
}
#page-title{
	position: relative;
    z-index: 1;
}
#page-title-inner{
    text-shadow: #372619 1px 1px 10px, #372619 -1px 1px 10px, #372619 1px -1px 10px, #372619 -1px -1px 10px;
    z-index: 10;
    display: block;
    margin: 0 auto;
    text-align: center;
}
#pan {
	font-size: 14px;
    margin: 3px 20px 50px 0;
    text-align: right;
}
#pan-inner > * {display:inline;}
#pan a{text-decoration: underline !important;}
#page-title{
	width: 100%;
	background-size:100% auto !important;
	height: auto;
}
#office #page-title{background: url(../../office/images/title-office.jpg) no-repeat right bottom;}
#about #page-title{background: url(../../about/images/title-about.jpg) no-repeat right bottom;}
#service #page-title{background: url(../../service/images/title-service.jpg) no-repeat right bottom;}
#service1 #page-title{background: url(../../service/images/title-service1.jpg) no-repeat right bottom;}
#service2 #page-title{background: url(../../service/images/title-service2.jpg) no-repeat right bottom;}
#privacy #page-title{background: url(../images/title-privacy.jpg) no-repeat right bottom;}
#contact #page-title{background: url(../../contact/images/title-contact.jpg) no-repeat right bottom;}
#news #page-title{background: url(../../news/images/title-news.jpg) no-repeat right bottom;}
#column #page-title{background: url(../../news/images/title-news.jpg) no-repeat right bottom;}
#flow #page-title{background: url(../../flow/images/title-flow.jpg) no-repeat right bottom;}
#qa #page-title{background: url(../../qa/images/title-qa.jpg) no-repeat right bottom;}
.page-title-h2{
	color: #594c39;
    text-shadow: #fff 1px 1px 10px, #fff -1px 1px 10px, #fff 1px -1px 10px, #fff -1px -1px 10px;
    z-index: 10;
    display: block;
    position: relative;
	font-size: 180%;
	padding: 90px 0 60px 50px;
} 
#privacy #container-inner .text-area{
	background: #fff;
	border-radius: 4px;
	padding: 30px 25px 20px;
}
#privacy #container-inner .inner-box{margin: 0 20px 10px;}
#news #detail,#news-feed-page,#column #detail{
	background: #fff;
	padding: 35px 30px 20px;
}
#news #detail .detailUpfile a,#column #detail .detailUpfile a{
	font-weight: bold;
	text-decoration: underline;
}
#back-home-button{
	display: block;
	width: 240px;
	margin: 50px auto;
}
#up_ymd{text-align: right;}
#up_ymd .date-inner{
    margin: 0 auto 20px;
    border-radius: 6px;
}
.catName{
	background: url(../images/back-q.jpg) no-repeat center top;
    padding: 2px 10px;
    margin-left: 10px;
	}
dl.qa-box{
	border: 3px solid #fbf8f0;
    border-radius: 2px;
    padding: 3px 3px 5px;
    position: relative;
    background: #fff;
    margin: 0 auto 10px;
}
.qa-box dt {
    background: url(../images/back-q.jpg) repeat center bottom;
    padding: 20px 25px 15px 70px;
    margin: 0 auto 2px;
    font-size: 1.2em;
    position: relative;
}
.qa-box dt:before {
    content: '';
    display: block;
    background: url(../images/icon-q.png) no-repeat center top;
    background-size: 100% 100%;
    width: 54px;
    height: 50px;
    position: absolute;
    left: 9px;
    top: 7px;
}
.qa-box dd {
    background: url(../images/line-brown.png) no-repeat center top;
    background-size: 100% 2px;
    padding: 20px 25px 15px;
    position: relative;
}
.qa-box .a-title{
	font-size: 120%;
    position: relative;
    padding: 0 0 0 8px;
    display: block;
    margin: 0 0 10px 10px;
}
.qa-box .a-title:before {
    content: '';
    display: block;
    background: url(../images/icon-list.png) no-repeat center top;
    background-size: 100% 100%;
    width: 12px;
    height: 13px;
    position: absolute;
    left: -10px;
    top: 7px;
}
#page-button-area{align-items:stretch;}
#page-button-area a{
	width: 48%;
	text-align: center;
	font-size: 120%;
	position: relative;
	background: #fff;
	border-radius: 4px;
	justify-content:center;
	padding: 15px 0 12px;
}
#page-button-area a:before{
	content: '';
	display: block;
	width: 12px;
	height: 9px;
	background: url(../images/arrow-down.png) no-repeat center top;
	background-size: 100% 100%;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 15px;
}
#page-button-area a:after{
	content: '';
	display: block;
	width: 40px;
	height: 30px;
	background: url(../images/icon-bird.png) no-repeat center top;
	background-size: 100% 100%;
	position: absolute;
	top: -12px;
	left: 40px;
}
#page-button-area a .min{font-size: 80%;}
/* ---------------------------サービス-----------------------------------*/
#service #service-area .service-box {
	width: 48%;
	padding: 25px 25px 74px;
	margin-bottom: 20px;
	font-size: 1em;
}
#service #service-area .service-photo{
	display: block;
	margin: 0 auto 10px;
}
#service1-lead h2 .section-title-icon{
	display: block;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: -30px;
}
.service1-image1{
	bottom: 0;
	left: -5px;
}
.service1-image2{
	bottom: 0;
	right: -5px;
}
.service-lead-h3{
	font-size: 130%;
	line-height: 150%;
	margin: 0 auto 15px;
	background: url(../images/line-double-white.png) no-repeat center bottom;
	background-size: 100% 7px;
	padding: 0 0 15px;
}
.service-pointlist-area h3.text-center{justify-content:center;}
.service-pointlist-area .service-pointlist{
	background: url(../images/background.jpg) repeat center top;
	padding: 25px 20px 15px;
	margin: 20px auto 0;
	border-radius: 4px;
}
.service-pointlist-area .service-pointlist h3{
	font-size: 130%;
	justify-content: flex-start; 
}	
.service-pointlist-area .service-pointlist .icon-check2{margin-right: 10px;}
.service-pointlist-area .service-pointlist .text{
	background: #fffcf5;
	padding: 20px 20px 15px;
	font-size: 90%;
	line-height: 150%;
	border-radius: 4px;
	margin-top: 10px;
}
#service1-2-sub{
	background: rgba(255, 255, 255, 0.6);
	padding: 25px 10px 20px;
	border-radius: 6px;
	margin: 0 auto 10px;
}
.service1-image3{
	position: absolute;
	right: 16px;
	bottom: -18px;
}
.service-coution-box{
	margin: 40px auto 0;
	border-bottom: dashed 2px #fffdfd;
	background: #fff;
	border-radius: 6px;
	padding: 20px 15px 14px;
	position: relative;
	width: 90%;
}
.service-coution-box img.icon-excla{
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: -20px;
	margin: auto;
}
#service-lead .main-inner .photo{margin-right: 20px;}
#service-lead .main-inner .min{padding-top: 15px;}
#service1-3-bottom{align-items:flex-start;}
#service1-3-bottom .left{
	flex: 2;
	margin-right: 20px;
	order: 1;
}
#service1-3-bottom .photo{
	flex-shrink: 0;
	order: 2;
}
.solution-area .service2-photo2{order: 3;}
.solution-area .example{
	font-size: 20px;
	background: url(../images/back-q.jpg) repeat center bottom;
	border-radius: 100%;
	width: 100px;
	height: 100px;
	order: 1;-webkit-order: 1;-ms-flex-order: 1;
	text-align: center;
	line-height: 104px;
	margin-left: 20px;
}
.solution-list .list-div{
	background: url(../images/line-brown.png) no-repeat center bottom;
	background-size: 100% 1px;
	padding: 15px 5px;
}
.solution-list .list-div h4{
	align-items: flex-start;
	font-size: 110%;
}
.icon-circle-big{
	margin-right: 10px;
	padding-top: 2px;
}
.solution-list .list-div .bottom{
	position: relative;
	margin: 10px auto 0 40px;
}

.service-contact .main-inner{padding: 35px 10px 10px;}
.service-contact .contact-inner{
	background: #fff;
	padding: 20px 15px;
}
.service-contact .right{flex: 2;}
.service-contact .left{
	padding-top: 15px;
	width: 300px;
	flex-shrink: 0;
	margin-right: 30px;
}
.contact-h3 {
	background: url(../images/line-h2.png) no-repeat center bottom;
	padding-bottom: 13px;
	margin-bottom: 5px;
	font-size: 140%;
}
.service-contact .logo-balloon{
	position: absolute;
	left: -75px;
	top: -47px;
}
.service-contact .button {
	width: 90%;
	font-size: 18px;
	justify-content: center;
	margin: 30px auto 0;
}
.service-price-area table th{background: rgb(255 255 255 / 50%) !important;}
.price-bottom{font-size: 110%;}
.price-big{font-size: 130%;}
.service-price-area .bottom .inner{
	max-width: 90%;
	margin: 0 auto 15px;
}
.service-price-area .bottom dl{padding: 20px 0 10px;}
.service-price-area .bottom dt{
	position: relative;
	padding: 0 0 0 20px;
}
.service-price-area .bottom dt:before {
	content: '';
	display: block;
	background: url(../images/icon-list.png) no-repeat center top;
	background-size: 100% 100%;
	width: 12px;
	height: 13px;
	position: absolute;
	left: 0;
	top: 7px;
}
.service-price-area .bottom dd{	padding:0 0 10px 40px;}
.flow-box{
	justify-content: flex-start;
	background: #fff;
	padding: 5px 20px 3px;
}
#service-flow .step{
	background: url(../../service/images/back-step.png) no-repeat center center;
	width: 70px;
	height: 64px;
	background-size: 100% auto;
	line-height: 68px;
	text-align: center;
	color: #8bbfd0;
	font-size: 28px;
	margin-right: 30px;
	flex-shrink: 0;
}
#service-flow h4{
	font-size: 120%;
	padding: 15px 0 ;
}
.flow-arrow{
	display: block;
	margin: 5px auto;
}
#service-flow .right{flex: 2;}
#service-flow .right h4.web-font{font-size: 120%;}
#service-flow .right .min{font-size: 90%;line-height: 140%;}
#service1-4 .main-inner{
	flex-wrap: wrap;
	align-items: self-start;
}
#service1-4 .left{
	flex-shrink: 0;
	margin-right: 30px;
	width: 200px;
}
#service1-4 .left .min-p{
	line-height: 120%;
	font-size: 13px;
	display: block;
	padding: 5px 0;
}
#service1-4 .bottom{
	width: 100%;
	margin-top: 20px;
	padding-top: 10px;
}
#service1-4 .bottom h3{background: url(../images/line-brown.png) no-repeat center bottom;}
.circle-pink{
	background: url(../images/point-circle.png) no-repeat center top;
	width: 100%;
	height: 150px;
	background-size: 160px 100%;
	justify-content: center;
	text-align: center;
	padding-top: 10px;
	font-size: 120%;
}
.text-area{flex: 2;}
.problem-list ul li{
	position: relative;
	padding: 5px 0 5px 30px;
}
.problem-list ul li:before{
	content: '';
	display: block;
	width: 23px;
	height: 21px;
	background: 100% 100%;
	background: url(../images/icon-check.png) no-repeat center top;
	position: absolute;
	left: 0;
	top: 8px;
}
.junction-area h3{margin-bottom: 10px;}
.junction-area .answer-p{
	padding: 0 0 30px 100px;
	position: relative;
}
.junction-area .answer-p:before{
	content: '';
	display: block;
	background: url(../images/icon-arrow2.png) no-repeat center top;
	background-size: 100% 100%;
	width: 48px;
	height: 32px;
	position: absolute;
	left: 30px;
	top: 0;
}
#service1-7-bottom{margin-top: 30px;}
#service1-7 .left{
	width: 200px;
	margin: 0 30px 0 0;
}
#sec1-7-bottom1,#sec1-7-bottom2{margin: 0 auto 30px;}
#sec1-7-bottom2 .text{background: none;}
#service1-7-bottom p{
	padding-bottom: 15px;
}
#service2-1 .photo{
	display: block;
	margin: 10px auto 30px;
}
#service2-1 .bottom h3.title{background-size: 500px 4px;}
#service2-1-bottom,#flow2-bottom{padding: 30px 0 15px;}
#service2-1 .text-area{margin-bottom: 15px;}

#service-voice .title-area{
	background: url(../images/back-l-blue.jpg) repeat center top;
	width: 400px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 40px;
	padding: 10px 0 0 0;
	border-radius: 2px;
}
#service-voice .title-area h2{
	margin: 0;
	width: 90%;
}
.voice-box{
	margin: 0 auto 30px;
}
.voice-box h3.voice-title{
	font-size: 22px;
	padding: 20px 10px 0 20px;
	
}
.voice-box .voice-info{
	line-height: 1em;
	padding: 0 0 10px;
}
.voice-bird {
	display: block;
	left: -25px;
	top: -35px;
}
.voice-box .font-hand{
	font-size: 18px;
	padding: 25px 25px 30px;
	line-height: 160%;
}



/* ----------------------------司法書士紹介 -----------------------------------*/
#about-1{align-items: flex-start;}
#about-1 .about-photo{margin-right: 25px;}
#about-1 .right{flex: 2;}
#about-1 .right h3.title{margin-top: 10px;}
#about-1 .right h3.title .min{font-size: 80%;}
#about-1 dl{margin: 0 20px}
#about-1 dt{
	background: url(../images/line-brown.png) no-repeat center bottom;
	background-size: 100% 2px;
	padding: 0 0 3px 20px;
	margin: 0 auto 10px;
	font-size: 1.2em;
	position: relative;
}
#about-1 dt:before{
	content: '';
	display: block;
	background: url(../images/icon-list-b.png) no-repeat center top;
	background-size: 100% 100%;
	width: 12px;
	height: 13px;
	position: absolute;
	left: 0;
	top: 7px;
}
#about-1 dd{margin-bottom: 20px;}
#about-1 dd ul{margin-bottom: 20px;}
.font-big ul.list li,.font-big #about-message .left,.font-big #about-message2 .right {line-height: 180%;}
#about-message{margin-bottom: 30px;}
.about-message{align-items: flex-start;}
#about-message .about-photo2{
	order: 2;
	margin-left: 20px;
}
#about-message .left{order: 1;}
#about-message2 .about-photo3{margin-right: 20px;}
#about-button-area{padding-bottom: 80px;}
#about-button-area a {
	display: block;
	margin: 0 auto;
	width: 240px;
	padding-left: 30px;
}
/* ----------------------------事務所案内 -----------------------------------*/
#office-section1{align-items: flex-start;}
#office-section1 .office-photo1{margin: 10px 25px 15px 0;}
#office-section1 .right{flex: 2;}
#office-section1 .right table{width: 100%;}
#office-section1 table th{padding-right: 10px;}
#office-section1 table th span{
	position: relative;
	padding-left: 18px;	
}
#office-section1 table th span:before{
	content: '';
	display: block;
	vertical-align: middle;
	background: url(../images/icon-list.png) no-repeat center top;
	width: 12px;
	height: 13px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
#office-section2 img.map{
	display: block;
	width: 100%;
	max-width: 800px;
	margin: 0 auto 20px ;
}
#office-section2 .text{
	background: #fff;
	border-radius: 4px;
	padding: 20px 25px 15px;
	width: 100%;
	margin: 0 auto;
}
#office-section2 .text h3.flex-area{justify-content:center;}
.icon-circle-big{margin-right: 10px;}
h3.office2-bototm{
	font-size: 120%;
	padding: 50px 0 15px 0;
}
#office-button-area a {
	display: block;
	margin: 0 auto 20px;
	width: 240px;
	padding-left: 30px;
}
/* ---------------------------ご依頼の流れ-----------------------------------*/
.flow-box{
	justify-content:flex-start;
	background: #fff;
	padding: 10px 25px 15px;
	margin: 0 auto;
}
.flow-photo{margin-right: 25px;}
.flow-box .text,.flow-box h3.flex-area .inner{flex: 2;}
.flow-box .step {
	background: url(../../service/images/back-step.png) no-repeat center center;
	width: 54px;
	height: 49px;
	background-size: 100% auto;
	line-height: 52px;
	text-align: center;
	color: #8bbfd0;
	font-size: 28px;
	margin-right: 20px;
}
.flow-box h3.flex-area{justify-content:flex-start;}
.flow-arrow{
	display: block;
	margin: 5px auto;
}
#flow-bottom{
	font-size: 120%;
	padding: 50px 0 0 0;
}
#page-button-area .main-inner{
	align-items: stretch;
	flex-wrap: wrap;
}
#page-button-area a{
	width: 48%;
	justify-content: flex-start;
	background: #fff;
	margin-bottom: 15px;
	box-shadow: 4px 4px 0px #b8a38c;
	transition: .2s;
	position: relative;
	padding: 5px 30px 5px 10px;
}
#page-button-area a:hover{
	box-shadow: inset 0 0 1px #b8a38c;
	transform: translateY(2px);
	color: #5f422f;
	background: url(../images/back-button-h.jpg) repeat center center;
}
#page-button-area a .qa-photo-nav{margin-right: 15px;}
#page-button-area a:before {
	content: '';
	display: block;
	width: 9px;
	height: 12px;
	background: url(../images/icon-arrow.png) no-repeat center top;
	background-size: 100% 100%;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 13px;
}
/* ----------------------------よくある質問 -----------------------------------*/
.service-qa .main-inner{
	background: #fff;
	padding: 50px 25px 20px;
	border-radius: 6px;
	position: relative;
}
.service-qa h2.section-title {
	margin: 0 10px 10px 50px;
	background-position: center bottom;
	background-size: 500px 10px;
	line-height: 125% !important;
}
.service-qa h2.section-title .section-title-icon {margin-left: -20px;}
#qa-3 h2.section-title{font-size: 24px;}
.qa-photo{
	display: block;
	position: absolute;
	left: 20px;
	bottom: -20px;
}
.qa1-inner{margin: 0 20px;}
.qa-button{
	width: 240px;
	margin: 0 auto;
	display: block;
}
.service-qa .post-link{
	font-weight: normal;
	text-align: center;
	display: block;
	margin: 0 auto;
	padding-top: 20px;
}
/* ----------------------------お問合せ-----------------------------------*/
#contact-line{
	padding: 35px;
	margin: 0 auto 40px;
	background: #f8ffd7 url(../images/back-l-green.png) repeat center top !important;
	
}
#contact-line h3{
	border-bottom: 4px dotted #fffcf5;
	max-width: 400px;
	margin: 0 auto;
	padding: 0 0 5px;
}
#nav-line-contact{
	background: #fff;
	width: 100% !important;
	max-width: 400px !important;
	padding: 20px 20px;
	height: auto !important;
	display: flex !important;
	justify-content: center;
	align-items: center;
}
#nav-line-contact .icon-line{
	margin: 0 20px 0 0;
}
.line-green{
	color: #06c755;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	padding: 0 5px 0 0;
}

/* ----------------------------特定商取引法に基づく表記 -----------------------------------*/
#tokushoho-table th {
	background: url(../images/back-q.jpg) repeat center top !important;
	line-height: 140%;
}
#tokushoho-table th span{
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
#tokushoho-table th span:before{
	content: '';
	display: block;
	background: url(../images/icon-list.png) no-repeat center top;
	width: 12px;
	height: 13px;
	position: relative;
	top: 4px;
	margin: 0 6px 0 0;
	flex-shrink: 0;
}
#tokushoho-table td {
	border-color: #f1f4f5 !important;
	border-width: 0 0 1px 1px !important;
}



/* --------------ブログ＆コラム------------------*/
#column .main-inner #up_ymd{
	margin-bottom: 20px;
}


@media only screen and (max-width:1320px){
	/*********下層ページ共通********/
	#mainimage {padding-right: 50px;}
	#mainimage .main-catch{left: 35px;}
	/*********サービス*********/
}
/* 1200px以下
------------------------------------------------------------*/
@media only screen and (max-width:1200px){
	#home .header-inner{
		padding-right: 30px;
		padding-top: 35px;
	}
	.page #header {	padding: 0 20px;}
	#home .header-inner .header-logo{
		width: 80px;
		height: auto;
	}
	#home .site-title-h2 { margin-bottom: 20px;}
	#mainimage {padding-right: 20px;}
	#mainimage .main-catch {left: 28px;}
	#mainimage h2.main-h2 {font-size: 250%;}
	#side-button{top: 200px;padding: 20px 4px 12px 9px;}

	/*********サービス*********/
	#service1-3-bottom{display: block;}
	#service1-3-bottom .photo{
		display: block;
		margin: 0 auto 20px;
	}

	

	/*********司法書士紹介*********/
	.about-photo,.about-photo2,.about-photo3{
		width: 300px;
		height: auto;
	}
	/*********事務所案内*********/
	#office-section1{display: block;}
	#office-section1 .office-photo1{
		display: block;
		margin: 0 auto 20px;
	}
	/*********よくある質問*********/
	.qa-photo {
		left: -15px;
		width: 150px;
	}
	.service-qa h2.section-title {
		margin: 0 20px 15px 140px;
		justify-content: flex-start;
	}
	.service-qa h2.section-title .section-title-icon {margin-left: 0;}
}
/* 1024px以下
------------------------------------------------------------*/
@media only screen and (max-width:1024px){
	br.br1024{display: inline;}
	.page #header {padding-right: 15px;}
	.page .header-inner{width: 210px !important;}
	#header-inner-box{width: 100%;}
	#home .header-inner {width: 36%;}
	#mainimage{width: 64%;}
	#home .header-inner {padding: 35px 20px 0;}
	.page .header-logo{width: 50px;height: auto;}
	.page .site-title-h2 {font-size: 18px;}
	#header-button {right: 10px;}
	#header-mail {
		padding: 12px 20px 3px 12px;
		font-size: 100%;
		line-height: 130%;
	}
	.icon-mail {
		width: 50px;
		height: auto;
	}
	#mainimage .main-catch{left: 20px;}
	.wrapper{width: auto;}
	.section-box {padding: 50px 40px 80px;}
	#point-area .point-box .icon-point { top: -9px;}
	#point-area .point-box p br{display: none;}
	#service-area .service-box .service-photo{
		width: 100%;
		height: auto;
		max-width:400px;
		margin: 10px auto;
		display: block;
	}
	#service-area .service-box .text{margin: 5px 20px auto;}
	#greeting-area{
		display: block;
		padding-top: 35px;
		padding-bottom: 15px;
	}
	#greeting-area .greeting-photo-box {
		width: 400px;
		height: auto;
		min-height: 50px;
		margin: 0 auto;
		display: block;
	}
	#greeting-button-area {
		max-width: 450px;
		margin: 20px auto;
	}
	#news-area #news-right {
		width: 259px;
		margin-right: 25px;
	}
	#footer{margin-top: 0;}
	#home .footer-title h2 {margin: 0;}
	.footer-title .footer-logo {
		width: 80px;
		height: auto;
	}
	#footer .footer-box {border: 3px solid #fbe8e8;}
	#side-button {top: auto !important;bottom: 50px;}
	.icon-font {width: 36px;height: auto;margin-bottom: 3px;}

	/*********サービス*********/
	#service #service-area{display: block;}
	#service #service-area .service-box {
		width:100%;
		max-width:600px;
		margin: 0 auto 40px;
		display: block;
		padding: 20px 10px 64px;
	}

	#service #service-area .service-box {padding: 25px 15px 74px;}
	.service1-image1{
		width: 80px;
		height: auto;
	}
	.service1-image2{
		width: 100px;
		height: auto;
	}
	#service1-4 .main-inner{
		display: block;
	}
	#service1-4 .left{
		margin: 0 auto 20px;
		display: block;
	}
	.circle-pink{margin: 0 auto 10px;}
	.service-contact .contact-inner{
		display: block;
		padding: 10px 15px 20px;
	}
	
	.service-contact .left {
		width: 280px;
		display: block;
		padding: 0 ;
		margin: 0 auto 20px;
	}
	.service-contact .right{
		text-align: center;
		width: 100%;
	}
	.service-contact .button {
		width: 360px;
		margin: 0 auto;
	}
	.service1-image3 {
		right: -30px;
		width: 90px;
		height: auto;
	}
	#service-flow .flow-box{display: flex;}
	#sec1-7-bottom1{display: block;}
	#service1-7 .left {margin: 0 auto 30px;}
	
	#service2-1 .bottom h3.title {
		background-size: 500px 3px;
		font-size: 120%;
	}
	/*********司法書士紹介*********/
	#about-1{display: block;}
	#about-1 .about-photo{
		display: block;
		margin: 0 auto;
	}
	#about-1 h3.title{text-align: center;}
	#about-1 .right h4.care{
		text-align: center;
		margin-top: 20px;
	}
	#about-message,#about-message2{display: block;}
	#about-message .about-photo2,#about-message2 .about-photo3{
		display: block;
		margin: 0 auto 15px;
	}
	/*********ご依頼の流れ*********/
	.flow-box{
		display: block;
		padding-bottom: 30px;
	}
	.flow-photo{
		display: block;
		margin: 0 auto;
	}
	.flow-box h3.flex-area{justify-content:center;}
	.flow-box h3.flex-area .inner {flex: initial;}
	#page-button-area a .qa-photo-nav {
		width: 80px;
		height: auto;
	}
	#page-button-area a {
		line-height: 140%;
		padding: 5px 30px 5px 5px;
	}
	/*********よくある質問*********/
	.service-qa .main-inner {padding: 35px 20px 15px;}
	.service-qa h2.section-title {font-size: 24px;}
	#qa-3 h2.section-title {font-size: 22px;}
	.service-qa h2.section-title br{display: none;}
}
/* メインメニュー　PC用
------------------------------------------------------------*/
@media only screen and (min-width:790px ){
	nav#mainnav{background: none;}
	nav#mainnav ul{margin: 0 auto;}
	nav#mainnav ul li{
		text-align: center;
		box-sizing: border-box;
		position: relative;
		background: url(../images/line-nav.png) no-repeat center bottom;
		width: 100%;
	}
	nav#mainnav ul li.none{display: none;}
	nav#mainnav ul li a{
		color: #3d2210;
	    vertical-align: middle;
	    position: relative;
	    display: block;
	    font-size: 100%;
	    font-weight: bold;
	    line-height: 120%;
	    font-weight: normal;
	    cursor: pointer;
	    box-sizing: border-box;
		padding: 18px 0 13px;    
	}
	nav#mainnav ul li a:hover{color: #8ebecf;}
	nav#mainnav ul li.current a{
		color: #92857c;
		background: url(../images/back-button-h.jpg) repeat center center;
	}
	nav#mainnav ul li a span{
		position: relative;
	    padding: 0 0 0 24px;
	    display: inline-block;
		/*
	    width: 120px;
		*/
	    text-align: left;	
	}
	.font-big nav#mainnav ul li a span {width: 150px;}
	.font-big nav#mainnav ul li.have-sub:hover ul.sub-nav{
		width: 320px;
		right: -320px;
	}
	nav#mainnav ul li ul li{text-align: left;}
	nav#mainnav ul li ul a{padding-left: 20px;}
	nav#mainnav ul li ul a span{width: auto !important;}
	nav#mainnav ul li a span:before{
		display: block;
		content: '';
		margin: auto;
		left: 0;
		top: 0;
		bottom: 0;
		width: 9px;
		height: 12px;
		position: absolute;
		background: url(../images/icon-arrow.png) no-repeat center top;
	}
	nav div.panel{display:block !important;}
	nav#mainnav ul.sub-nav{display: none;	}
	nav#mainnav ul li.have-sub:hover ul.sub-nav {
		display: block;
	    position: absolute;
	    right: -280px;
	    width: 280px;
	    top: 0;
	    margin: auto;
	    background: url(../images/back-button-h.jpg) repeat center center;
	    border: solid #fcfaf1 3px;
	    z-index: 100;
	    line-height: 150%;
	}
	#home nav#mainnav ul li.have-sub:hover ul.sub-nav{ right: -250px;}
	nav#mainnav ul li.have-sub:hover ul.sub-nav li.current-sub a,nav#mainnav ul li.have-sub:hover ul.sub-nav a:hover{background: #fff;}
	nav#mainnav ul li.have-sub:hover ul.sub-nav a{border-bottom: 2px solid #fff9ed;}
	a#menu,.nav-contact,#nav-button-area,#side-button-copy{display:none;}
	#header-inner-box .contact-button{
		width: 244px;
		margin: 10px auto 0;
		font-size: 18px;
	}
	.page #header .contact-button{font-size: 110%;}
	#header .sidenav-button-top{
		width: 100%;
		text-align: center;
		display: block;
		font-size: 0.75em;
		color: #839706;
		font-weight: normal;
		padding-bottom: 5px;
		line-height: 1em;
	}
}
/* 幅789px以下から 
------------------------------------------------------------*/
@media only screen and (max-width: 789px){
	br.br789{display: inline;}
	.box-has-title{padding: 35px 15px 20px;}
	#header,#page-cont #header{z-index: 2000;}
	#page-cont{display: block;}
	#page-cont #header{
		width: 100%;
		display: block;
		padding:0;
	}
	#page-cont #container{
		width: 100%;
		display: block;
		position: initial;
	}
	.page .header-inner{
		display: block;
		position:initial;
		width: 100% !important;
		padding-bottom: 10px;
	}
	.page header .site-description br ,.page .site-title-h2 br{display: none !important;}
	.page .contact-button-side  {display: none;	}
	#header .pnav ul{display:none;}
	nav div.panel .contact-button{display: flex;}
	.height100{height: 100% !important;}
	a#menu{
		display: inline-block;
	    position: fixed;
	    font-size: 110%;
	    text-align: center;
	    top: -10px;
	    right: 10px;
	    width: 120px;
	    padding: 20px 10px 18px 22px;
	    transition: .2s;
	    background: url(../images/back-button-blue.jpg) repeat center top;
	    z-index: 3000;
	    margin-bottom: 20px;
	}
	#menuBtn:before, #menuBtn:after{
		display:block;
		content:"";
		position:absolute;
		top:57%;
		left:5px;
		width:14px;
		height:2px;
		background: #544436;
		transition:.3s;
	}
	#menuBtn:before{margin-top:-7px;}
	#menuBtn:after{margin-top:5px;}
	#menuWrap a.close{
		box-shadow: 4px 4px 0px #b8a38c;
		transform: translateY(2px);
	}
	a#menu .close{background:transparent;}
	.open-nav a#menu{background: #feebf1;}
	a#menu .close:before, a#menu .close:after{margin-top:0;}
	a#menu .close:before{transform:rotate(-45deg);}
	a#menu .close:after{transform:rotate(-135deg);}
	.panel{
		width: 96%;
    	display: none;
    	position: relative;
    	top: 60px;
    	z-index: 1002;
    	right: 0;
    	margin: auto;
    	border-radius: 6px;
    	background: url(../images/back-button-blue.jpg) repeat center top;
    	overflow-y: scroll !important;
    	max-height: calc(100% - 66px);
    	padding: 20px 0 15px;
	}
	.panel[display:block;]{background: #000;}
	.panel::-webkit-scrollbar{overflow:hidden;width:7px;background:#eee;-webkit-border-radius:3px;border-radius:3px;}
    .panel::-webkit-scrollbar:horizontal{height:7px;}
	.panel::-webkit-scrollbar-button{display:none;}
	.panel::-webkit-scrollbar-piece{background:#eee;}
   .panel::-webkit-scrollbar-piece:start{background:#eee;}
	.panel::-webkit-scrollbar-thumb{overflow:hidden;border-radius:3px;background:#375b7b;}
	.panel::-webkit-scrollbar-corner{overflow:hidden;border-radius:3px;background:#5F8CB3;}
	#mainnav{width:100%;position: fixed;top: 0;left: 0;right: 0;margin: auto;z-index: 1002;height: auto;text-align: right;}
	.sp-tel-button{width: 53%;}

	#nav-button-area{
		align-items:stretch;
		margin: 0 15px 20px;
	}
	#nav-button-area a{
		width: 48% !important;
		justify-content: center;
		height: 80px;
		font-size: 120%;
		padding: 20px 5px;
	}
	#nav-line{
		background: #fff; 
	}
	
	#nav-button-area a .icon-mail{margin-right: 10px;}
	#nav-button-area a .icon-line{margin-right: 20px;}
	
	.icon-mail {width: 45px;}
	#mainnav ul{
	    text-align: left;
	    background: url(../images/background.jpg) repeat center top;
	    margin: 0 15px;
	    padding-top: 10px;
	    border-radius: 3px;
	}
	#mainnav ul ul{margin: 0;padding-top: 0;}
	nav#mainnav ul li {width: auto !important; margin: 0 15px !important;}
	nav#mainnav ul li.current,nav#mainnav ul li.current-sub{color: #92857c; background: #fbf9f5;}
	nav#mainnav ul li ul li{margin: 0  !important;}
	#mainnav li a{
		position: relative;
	    display: block;
	    padding: 13px 25px;
	    font-weight: normal;
	    background: url(../images/line-brown.png) no-repeat center bottom;
	    background-size: 100% 2px;
	}
	nav#mainnav ul li a {font-size: 16px !important;}
	#mainnav li ul li a{
		padding-left: 45px;
		padding-right: 10px;
	}
	#mainnav li ul li a br{display: none;}
	#mainnav li a span{position: relative;}
	#mainnav li a span:after {
    	content: '';
    	display: block;
    	position: absolute;
    	background: url(../images/icon-arrow.png) no-repeat center top;
    	width: 9px;
    	height: 12px;
    	top: 2px;
    	left: -15px;
    	margin: auto;
	}
	#header-button{display: none;}
	#home .header-inner {padding-top: 80px;}
	.page-cont #header{
		justify-content: center;
		padding: 0 5px;
	}
	#header-inner-box {
		display: block;
		margin: 0 auto;
	}
	#header-inner-box .contact-button{width: 170px;}
	.contact-button-side{
		margin: 20px auto;
		padding: 20px 5px 18px 5px;
	}
	#mainimage {
		padding-right: 15px;
		background-size: auto 115%;
	}
	#mainimage .main-catch {
		position: initial;
		padding: 127px 0 50px 15px;
	}
	#mainimage h2.main-h2 {font-size: 180%;font-weight: bold;}
	#mainimage h3.main-h3 {font-size: 110%;}
	.section-box {padding: 40px 20px 30px;}
	#youtube-main .section-title{
		display: block;
		text-align: center;
	}
	#youtube-main .icon-youtube{
		display: block;
		margin: 0 auto 2px;
	}
	#movie-area{display: block;}
	#movie-area .movie-box {
		max-width: 400px;
		width: 70%;
		margin: 0 auto 15px;
	}
	.movie-title{font-size: 0.8em;}
	
	
	#point-area{display: block;}
	#point-area .point-box{
		display: flex;
		justify-content:flex-start;
		align-items: center;
		padding: 12px 15px 10px 11px;
		margin: 0 auto 15px;
		width: 100%;
	}
	#point-area .point-box h3.title{
		font-size: 120%;
		position: relative;
		width: 151px;
		height: 140px;
		background-size: 100% 100%;
		margin-right: 16px;
		padding: 14px 0 0;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	#point-area .point-box .icon-point {
		margin: 0 auto 4px;
		width: 46px;
		height: auto;
	}

	#point-area .point-box p{
		flex: 2;
		text-align: left;
		line-height: 140%;
	}
	#service-area{display: block;}
	#service-area .service-box {
		width: 100%;
		max-width: 600px;
		margin: 0 auto 40px;
		display: block;
		margin-bottom: 40px;
	}
	#service-area .service-box .text {margin: 5px 10px auto;}
	#service-area .service-box .title-area h3 {font-size: 130%;}
	#news-area{display: block;}
	#news-area #news-right {
		width: auto;
		margin: 0 auto 20px;
	}
	#pagetop{
		position: fixed;
		bottom:85px;
		right: 7px;
		background-size: 100% 100%;
		width: 78px;
		height: 75px;
	}
	#pagetop a:after {
		width: 42px;
		height: 27px;
		top: 1px;
		right: -1px;
	}
	#footer {padding: 70px 25px 100px;}
	.footer-title {margin-bottom: 14px;}
	#footer .footer-box.map{max-width: 100%;}
	#footer-sp-area{display: block;}
	
	/*********下層ページ共通*********/
	.page-title-h2 {
		font-size: 170%;
		padding: 73px 0 46px 32px;
	}
	#page-button-area a {
		font-size: 16px;
		padding: 28px 0 12px;
	}
	#page-button-area a:before {
		top: 13px;
		bottom: auto;
		right: 0;
		left: 0;
	}
	
	
	#side-button-copy{justify-content: center;-webkit-box-pack:center;-ms-flex-pack:center; -webkit-justify-content: center;margin-bottom: 14px;}
	.icon-font {margin-right: 10px;}
	#side-button-copy .button-change {border: 2px solid #f6ecd8;color: #59473d;background: url(../images/back-button.jpg) repeat center center;padding: 8px 0 6px;width: 100px;margin-left: 16px;text-align: center;cursor: pointer;}
	#side-button-copy .active {color: #b49d82;background: url(../images/background.jpg) repeat center center;}
	#header-button,#side-button{display: none;}

	
	/*********サービス*********/
	#service1-lead h2{font-size: 120%;}
	#service1-lead h2 .marker{font-size: 120%;}
	.service1-image1 {width: 70px;}
	.service1-image2 {width: 90px;}
	.service-pointlist-area .service-pointlist h3 {font-size: 110%;}
	.junction-area .answer-p:before {
		width: 32px;
		height: 25px;
		left: 10px;
	}
	.junction-area .answer-p {padding: 0 0 24px 50px;}
	.service-contact .contact-inner {padding: 15px 5px 20px;}
	.service-contact .logo-balloon {
		left: 0;
		top: -76px;
		right: 0;
	}
	.service-contact .left {
		font-size: 0.9em;
		line-height: 150%;
	}
	.service-contact .button {width: 310px;}
	.service1-image3 {
		right: 0;
		width: auto;
		height: 80px;
	}
	.service-coution-box{
		width: 100%;
		margin: 30px auto 0;
	}
	.service-pointlist-area .service-pointlist {padding: 20px 10px 10px;}
	#service-voice .title-area {height: 90px;}
	
	.voice-box h3.voice-title {
		font-size: 20px;
		padding: 15px 10px 0 12px;
	}
	.voice-box .voice-info {font-size: 0.9em;}
	.voice-bird {
		width: 80px;
		height: auto;
		left: -28px;
		top: -32px;
	}
	
	/*********事務所案内*********/
	#office-section2 img.map{
		width: 100%;
		height: auto;
		max-width: 500px;
	}
	#office-section2 .text {width: 100%;}
	/*********ご依頼の流れ*********/
	#page-button-area a {
		display: initial;
		text-align: center;
		padding: 5px;
	}
	#page-button-area a .qa-photo-nav {
		width: 60px;
		display: block;
		margin: 0 auto 5px;
	}
	/*********よくある質問*********/
	.qa-photo {
		left: 0;
		top: -30px;
		width: 100px;
		right: 0;
		margin: auto;
		display: block;
		bottom: auto;
	}
	.service-qa{position: relative;}
	.service-qa .main-inner {padding: 77px 15px 15px;}
	.qa-title-area{position: initial;}
	.service-qa h2.section-title {margin: 0 auto 25px;}
	#qa-3 h2.section-title{font-size: 20px;}
}
/* 幅589px以下から 
------------------------------------------------------------*/
@media only screen and (max-width: 589px){
	br.br589{display: inline;}
	#page-cont #header {z-index: 2000;}
	.site-description {
		font-size: 10px;
		line-height: 110% !important;
		margin-bottom: 3px;
	}
	.site-title-h2 {font-size: 20px;font-weight: bold;}
	h2.section-title {font-size: 24px;}
	.contact-button-side{display: none;}
	#nav-contact .icon-mail{ 
		margin-right: 2px;
		width: auto;
		height: 30px;
	}
	#nav-button-area #nav-contact{
		font-size: 110%;    
		padding: 8px 5px 6px;
	}
	#nav-line {
		font-size: 15px !important;
	}
	#mainimage h2.main-h2 {font-size: 150%;}
	#mainimage h3.main-h3 {font-size: 100%;}
	#point-area{margin: 0 auto;}
	#service-area .service-box .text {margin: 5px 5px auto;}
	#greeting-area .greeting-photo-box {width: 300px;}
	#greeting-area .greeting-photo {object-position: center -50px;}
	#greeting-area .text h3.title{text-align: center;}
	
	#footer-info-area{margin: 0 20px;}
	#footer .icon-mail {margin-right: 10px;}
	#footer .footer-box.map {margin-bottom: 25px;}
	#link-insta img{
		width: 30px;
		height: auto;
	}
	#footer-nav{
		display: block;
		margin: 0 auto 20px;
	}
	#footer-nav a {
		margin: 0 auto 12px;
		width: 100%;
		display: block;
		font-size: 14px;
	}
	#footer-sp-area .button {
		padding: 15px 10px 15px 20px;
		font-size: 15px;
		text-align: left;
		line-height:130%;
	}
	#footer-sp-mail{
		padding: 0 5px !important;
	}
	#footer-sp-area .big,
	#footer-sp-area .line-green{
		display: block;
		
		font-size: 1.2em;
	}
	/****下層ページ*****/
	.section-box {padding: 40px 12px 30px;}
	h2.title, .post h2{font-size: 160%;}
	h3.title {font-size: 130%;}
	.page-title-h2 {
		font-size: 160%;
		padding: 60px 10px 40px 10px;
		text-align: center;
	}
	.page .section-box {padding: 0 20px 50px;}
	.box-has-box {padding: 8px;}

	/*********サービス*********/
	#service1-lead h2 {font-size: 108%;}
	.service1-image1 {width: 60px;}
	.service1-image2 {width: 78px;}
	#service1 .photo,#service2 .photo{
		width: 240px;
		height: auto;
	}
	table.price-table th,table.price-table td{
		display: block;
		width: 100%;
	}
	table.price-table td{border-width: 1px 0 0 0px;}
	#service-flow .flow-box {
		display: block;
		padding: 25px 30px 28px;
	}
	#service-flow .step {
		width: 54px;
		height: 49px;
		line-height: 53px;
		margin:0 auto 5px;
	}
	#service-flow h4 {
		font-size: 110%;
		padding: 10px 0 20px;
	}
	#service-voice .title-area h2 img{
		width: 50px;
		height: auto;
	}
	.voice-box h3.voice-title {padding: 15px 10px 8px 12px;}
	#service-voice .box-inner {
		padding: 20px 15px 20px;
	}
	/*********特商法********/
	#tokushoho-table th,
	#tokushoho-table td{
		display: block;
		width: 100%;
	}
	#tokushoho-table td {
		border-width: 1px 0 1px 0 !important;
	}
	
	
	
	
}
/* 幅489px以下から 
------------------------------------------------------------*/
@media only screen and (max-width: 489px){
	br.br489{display: inline !important;}
	.box-has-title {padding: 30px 15px 15px;}
	#home #header{display: block;}
	.header-inner { 
		width: 100% !important;
		padding-top: 20px !important;
	}
	#home #header .site-title-h2 br,#header .site-description br{display: none;}
	#header-inner-box {padding-bottom: 0;}
	a#menu {
		font-size:15px!important;
		width: 90px;
		padding: 22px 5px 12px 19px;
	}
	.font-big a#menu{font-size: 15px !important;}
	a#menu {right: 5px;}
	#menuBtn:before, #menuBtn:after {left:5px;width: 9px;}
	#nav-button-area {
		margin: 0 12px 13px;
		display: block;
	}
	#nav-button-area a {
		width: 100% !important;
		max-width: 340px;
	}
	#mainnav ul {margin: 0 12px;}
	#nav-button-area #nav-contact{padding: 18px 5px 14px;}
	.panel {top:46px;max-height: calc(100% - 82px);}
	#mainimage {
		width: 100%;
		padding-right: 0;
		background-size: 150% auto;
		background-position: right -50px;
	}
	#mainimage .main-catch {padding: 120px 15px 23px 20px;}
	#mainimage h2.main-h2 {font-size: 180%;}
	#mainimage h3.main-h3{text-shadow: #ffffff 1px 1px 2px, #ffffff -1px 1px 2px, #ffffff 1px -1px 2px, #ffffff -1px -1px 2px;}
	.icon-logo-brown {
		margin: 0 auto 5px;
		width: 50px;
		height: auto;
	}
	h2.section-title {
		font-size: 22px;
		display: block;
		text-align: center;
	}
	h2.section-title .section-title-icon,
	#news-area .icon-news{
		display: block;
		width: auto;
		height: 36px;
		margin: 0 auto 5px;
	}
	
	#movie-area .movie-box {
		width: 85%;
		margin: 0 auto 10px;
	}
	.movie-title {
		font-size: 0.7em;
	}
	

	#point-area .point-box{
		display: block;
		position: relative;
		padding: 94px 20px 25px;
		margin-top: 36px;
	}
	#point-area .point-box h3.title {
		display: flex;
		width: 100%;
		background-size: 124px 116px;
		height: 116px;
		margin: auto;
		padding: 5px 0 0;
		position: absolute;
		left: 0;
		right: 0;
		top: -35px;
		bottom: auto;
	}
	.font-big #point-area .point-box h3.title {height: 126px;}
	#point-area .point-box .icon-point {width: 35px;}
	#service-area .service-box {
		width: 100%;
		padding: 20px 10px 64px;
	}
	#service-area .service-box .title-area {height: auto;}
	#service-area .service-box .title-area h3 {
		padding: 15px 0 17px;
		font-size: 140%;
		margin: 0 0 0 20px;
	}
	#service-area #top-service2 .title-area h3 {font-size: 126%;}
	#service-area .service-box .text {line-height: 150%;}
	#greeting-area {padding-top: 24px;}
    #greeting-area .greeting-photo-box {width: 240px;}
	#greeting-area .text {padding: 0 15px;}
	#greeting-button-area{display: block;}
	#greeting-button-area .button {
		width: 240px;
		display: block;
		margin: 15px auto 0;
	}
	#news-area #news-feed {padding: 23px 18px 13px;}
	.newsList li{
		display: block;
		padding: 12px 0;
		line-height: 140%;
	}
	.newsList .up_ymd {
		margin-right:0;
		display: inline-block;
		font-size: 90%;
		margin-bottom: 10px;
	}
	.newsList .title,.newsList a{display: block;}
	.newsList .title{padding-left: 30px;}
	#footer { padding: 40px 14px 90px;}
	.footer-title{
		display: block;
		text-align: center;
	}
	.footer-title .footer-logo {
		width: 60px;
		height: auto;
		display: block;
		margin: 0 auto 3px;
	}
	#footer-info-area {margin: 0 auto;}
	#footer-info .button {
		width: auto;
		font-size: 110%;
	}
	.footer-link{font-size: 90%;}
	#pagetop {
		right: 5px;
		width: 67px;
		height: 67px;
		font-size: 90%;
		line-height: 110% !important;
	}
	#pagetop a {padding-top: 15px;}
	#pagetop a:after {
		width: 32px;
		height: 21px;
		top: 5px;
	}
	#footer-sp-area .button {
		font-size: 14px;
	}

	#copyright {
		font-size: 70%;
		padding: 10px 0;
	}
	.page .header-inner{padding-top: 0 !important;}
	#pan {
		font-size: 0.8em;
		line-height: 140%; 
		margin: 3px 10px 30px 10px;
	}
	.page .section-box {padding: 0 13px 40px;}
	#privacy #container-inner .text-area {padding: 20px 15px 15px;}
	.page-post dl dd {margin: 0 10px 30px;}
	#privacy #container-inner .inner-box {margin: 0 0 10px 15px;}
	.page-post dl dt {font-size: 120%;}
	.page-post dl dd {margin: 0 3px 30px;}
	#news #detail, #news-feed-page {padding: 20px 12px 15px;}
	.qa-box .a-title {font-size: 110%;margin: 0 0 10px 3px;}
	dl.qa-box {margin: 0 auto 20px;}
	.qa-box dt {
		padding: 20px 10px 9px 10px;
		font-size: 110%;
	}
	.qa-box dt:before {
		width: 40px;
		height: 39px;
		left: 0; 
		top: -21px; 
		bottom: auto;
		margin: auto; 
		right: 0;
	}
	.qa-box dd {padding: 15px 12px 11px 16px;}
	.page-title-h2 {
		text-shadow: #fff 1px 1px 5px, #fff -1px 1px 5px, #fff 1px -1px 5px, #fff -1px -1px 5px;
		font-weight: bold;
	}
	input[type="submit"], input[type="reset"], input[type="button"], .button{font-size: 110%;}
	#footer-info .button {
		font-size: 120%;
		margin: 0 auto 20px;
		line-height: 120%;
		
	}
	#side-button-copy{display: none;}
	/*********下層ページ共通*********/
	.box-inner {
		padding: 28px 20px 20px;
	}
	.wrap80 {max-width: 100%;}
	#page-button-area{
		padding-bottom: 20px;
		margin-bottom: 50px;
	}
	#page-button-area a:after {
		width: 30px;
		height: 21px;
		top: -4px;
		left: 12px;
	}
	#page-button-area a {
		padding: 20px 20px 11px 15px;
		width:48%; 
		margin: 0 auto 15px;
		text-align: center;
		display: block;
	}
	#page-button-area a br{display: none;}
	#page-button-area a:before {
		top: 0;
		bottom: 0;
		right: 8px;
		left: auto;
	}

	/*********サービス*********/
	h3.flex-area-center.title{
		display: block;
		text-align: center;
	}
	h3.flex-area-center.title .icon-flex{
		display: block;
		margin: 0 auto 10px;
		width: auto ;
		height: 46px;
	}
	#service1-lead h2 {font-size: 100%;}
	#service1-lead .box-inner{padding-bottom: 100px;}
	.service1-image1 {
		width: 50px;
		right: 52%;
		left: auto;
	}
	.service1-image2 {
		left: 52%;
		right: auto;
		width: 63px;
	}
	.service-lead-h3 {font-size: 120%;}
	#service2-1 .bottom h3.title {font-size: 110%;}
	#service2-1 .bottom h3.title .icon-flex{height: 20px;	}
	.service-pointlist-area h3.text-center {
		display: block;
		text-align: center;
	}
	.service-pointlist-area h3.text-center img{
		display: block;
		margin: 0 auto 5px;
		width: auto;
		height: 34px;
	}
	.service-pointlist-area .service-pointlist h3 {
		display: block;
		text-align: center;
	}
	.service-pointlist-area .service-pointlist .icon-check2{
		display: block;
		margin: 0 auto 3px;
	}
	.solution-area h3.flex-area{display: block;text-align: center;}
	.solution-area h3.flex-area .section-title-icon{
		display: block;
		width: auto;
		height: 36px;
		margin: 0 auto 5px;
	}

	.service-contact .contact-h3 span.relative{display: block;}
	.service-contact .button {
		width: 240px;
		display: block;
		text-align: center; 
		padding: 10px 5px 10px 10px;
	}
	.service-contact .icon-mail{
		display: block;
		margin: 0 auto 3px;
	}
	#service1-4 .bottom h3 {font-size: 110%;}
	.junction-area h3{
		display: block;
		text-align: center;
		
	}
	.junction-area h3 .icon-flex{
		display: block;
		margin: 0 auto 5px;
		width: 26px;
		height: auto;
	}
	
	
	#service-voice .title-area {
		height: auto;
		width: auto;
		padding: 12px 10px 10px;
		margin: 0 auto 27px;
	}
	#service-voice .title-area h2 img {width: 45px;}
	.voice-box .font-hand{
		font-size: 17px;
		line-height: 160%;
	}

	.voice-bird {
		width: 74px;
		left: -16px;
	}
	
	
	
	/*********司法書士紹介*********/
	#about-1 dl {margin: 0 10px;}
	.about-photo, .about-photo2, .about-photo3 {width: 240px;}
	#about-1 .right h3.title .min{display: block;margin: 0 auto;}
	/*********事務所案内*********/
	.photo {width: 240px;}
	#office-section1 table th,#office-section1 table td{
		display: block;
		width: 100%;
	}
	#office-section1 table td{
		border-width: 1px 0 0 0px;
		margin-top: 1px;
	}
	/*********ご依頼の流れ*********/
	#page-button-area a:before { 
		top: 39px;
		bottom: auto;
		right: 10px;
	}
	.flow-box {padding: 20px 10px 25px;}
	.flow-photo {width: 150px;height: auto;}
	.flow-box .step {margin-right: 14px;}
	/*********よくある質問*********/
	#qa-4 table th,#qa-4 table td{
		display: block;
		width: 100%;
	}
	#qa-4 table td{border-width: 1px 0 0 0;margin-top: 1px;}
	.service-qa h2.section-title{text-align: center;}
	.service-qa h2.section-title .section-title-icon{display: none;}
	.service-qa .main-inner {padding: 77px 10px 10px;}
	.qa1-inner {margin: 0 5px;}
	.qa-button {width: 210px;}
	/*********お問合せ*********/
	#contact-line{
		padding: 20px;
	}
	#contact-line h3{
		margin: 0 auto 10px;
	}
	#contact-line h3 .icon-flex{
		width: 30px;
		height: auto;
	}
	#nav-line-contact {
		margin: 0 auto !important;
	}
	
	
}
/* 幅389px以下から 
------------------------------------------------------------*/
@media only screen and (max-width: 389px){
	br.br389{display: inline !important;}
	nav#mainnav ul li a {font-size: 15px !important;}
	#home .header-inner .header-logo {width: 69px;}
	#header .site-description br.br-sp{display: inline !important;}
	#home .site-title {margin-bottom: 12px;}
	.newsList .title{padding-left: 18px;}
	#mainimage{
		background-size: auto 110%;
		background-position: right top;
	}
	#mainimage h2.main-h2 {font-size: 150%;}
	#footer-info .info-box {
		max-width: 300px;
		width: 100%;
	}
	#footer-info .info-box dl{
		padding-left: 20px;
		display: block;
		font-size: 15px;
	}
	#footer-info .info-box dd p br{display: none;}
	#footer-info .button{
		display: block;
		text-align: center;
		padding: 13px 10px 10px 10px;
	}
	#footer-info .button .icon-mail{
		display: block;
		margin: 0 auto 2px;
		width: auto;
		height: 40px;
	}
	#footer-sp-area .button {
		font-size: 13px;
	}

	/*****下層ページ***/
	#page-title {background-size: 120% auto !important;}
	.box-inner {padding: 25px 15px 20px;}
	#page-button-area a {
		font-size: 14px;
	}

	/*********サービス*********/
	#service-flow .flow-box {padding: 20px ;}
	.service-coution-box {
		width:100%;
		padding: 20px 5px 14px;
	}
	.junction-area .answer-p {padding: 0 0 24px 30px;}
	.junction-area .answer-p:before {left: -10px;}
	.voice-box .font-hand{font-size: 16px;}

	/*********事務所案内*********/
	#office-section2 .text {
		background: #fff;
		padding: 10px 10px 10px;
	}
	/*********お問合せ********/
	#contact-line{
		position: relative;
		margin-top: 30px;
	}
	#contact-line h3 .icon-flex{
		width: 30px;
		position: absolute;
		left: 0;
		right: 0;
		top: -20px;
		margin: auto;
	}
	
	
	
}