@charset "utf-8";


/* --------------------------------------------------------------------------------
html & body
-------------------------------------------------------------------------------- */
html {
}
body {
	margin: 0;
	padding: 0;
	line-height: 1.5;
	font-weight: 400;
	font-size: 44px;
}


/* --------------------------------------------------------------------------------
共通 リセット タグ等
-------------------------------------------------------------------------------- */
.common * {
	margin: 0;
	padding: 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	box-sizing: border-box;
}

.common h1,
.common h2,
.common h3,
.common h4,
.common h5,
.common h6 {
	font-size: 1em;
}
.common ol,
.common ul {
	list-style: none;
}
.common table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 1em;
}
.common a,
.common a:link,
.common a:visited {
	text-decoration: none;
	color: #333;
	-webkit-tap-highlight-color:rgba(0,0,0,0.1);
	tap-highlight-color:rgba(0,0,0,0.8);
}
.common a:hover,
.common a:active {
	text-decoration: none;
}
.common input,
.common select,
.common textarea{
	outline: none !important;
	box-shadow: none !important;
}
.common small {
	font-size: 1em;
}
.common img {
	display: block;
	max-width: 100%;
	height: auto;
}
.common address {
	font-style: normal;
}


/* --------------------------------------------------------------------------------
共通クラス
-------------------------------------------------------------------------------- */
.clear {
	clear: both;
}
br.clear {
	display: block;
	margin: 0;
	padding: 0;
	clear: both;
	height: 0;
	border: none;
	visibility: hidden;
	font-size: 0;
}
.clearfix::after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1%;
}
* html .clearfix {
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/********** プレースホルダー **********/
::-webkit-input-placeholder,
::placeholder {
	color: #333;
}


/* --------------------------------------------------------------------------------
container
-------------------------------------------------------------------------------- */
#container {
	max-width: 1000px;
	margin: 0 auto;
}


/* --------------------------------------------------------------------------------
header
-------------------------------------------------------------------------------- */
#header{
	padding: 0 0 60px;
}


/********** h-contents **********/
#header .h-contents {
	display: flex;
	justify-content: space-between;
	
	width: 100%;
	padding: 30px 30px;
}

/********** txt-logo **********/
#header .txt-logo {
	position: relative;
	z-index: 101;
	
	width: 77%;
	font-size: 30px;
}

/********** h1 **********/
#header .h-txt h1 {
	line-height: 1.2;
	font-size: 30px;
}

/********** ロゴ **********/
#header .h-logo {
	width: 46%;
}
#header .h-logo a {
	display: block;
}

/********** メニュー **********/
#header .h-btn-menu {
	position: fixed;
	top: 30px;
	left: calc(50% + 330px);
	z-index: 10;
	
	width: 140px;
}
@media screen and (min-width: 769px) and (max-width: 999px){
	#header .h-btn-menu {
	right:30px;
	left: auto;
	}
}
#header .h-btn-menu .h-btn-menu-box {
	/*display: flex;
	justify-content: flex-end;
	
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 30px 0 0;*/
	box-sizing: border-box;
}
#header .h-btn-menu .h-btn-menu-box img {
	cursor: pointer;
}
#header .h-menu-btns-box{
	display: flex;
	align-items: flex-end;
}
#header .h-menu-btns-box .h-btn-tel{
	width: 52%;
}
#header .h-menu-btns-box .h-btn-line-mail{
	width: 48%;
}
#header .h-menu-btns-box .h-btn-line-mail .txt{
	font-size: 30px;
	color: #333;
	text-align: center;
	margin: 0 0 7px;
}

/* ----------------------------------------
h-nav
---------------------------------------- */
/********** h-nav **********/
#header .h-nav {
	background: #F9F6E1;
}

/* h-nav */
#header .h-nav nav > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
}
#header .h-nav nav > ul.h-nav-box1{
	margin: 0 0 10px;
	padding: 10px 0;
}
#header .h-nav nav > ul.h-nav-box2{
	padding: 0 0 10px;
}
#header .h-nav nav > ul.h-nav-box1 > li {
	width: calc(100% / 5);
	text-align: center;
	border-right: 2px solid #AAAAAC;
	line-height: 1;
	padding: 10px 0;
}
#header .h-nav nav > ul.h-nav-box1 > li:nth-child(5n) {
	border: none;
}
#header .h-nav nav > ul.h-nav-box2 > li{
	width: auto;
	border-left: 2px solid #AAAAAC;
	border-right: 2px solid #AAAAAC;
	padding: 10px 20px;
	line-height: 1;
}
#header .h-nav nav > ul > li > a{
	font-size: 35px;
	font-weight: bold;
	color: #333;
	display: block;
}
#header .h-nav ul li.h-nav-list{
	position: relative;
}
#header .h-nav ul li.h-nav-list .h-btn-nav-list-box{
	font-size: 35px;
	font-weight: bold;
	color: #333;
}
#header .h-nav ul li.h-nav-list .h-nav-list-box{
	display: none;
}
/*アクティブ時*/
#header .h-nav ul li.h-nav-list.h-nav-list-active .h-nav-list-box{
	display: block;
	position: absolute;
	top: 64px;
	left: 0;
	width: 300px;
}
#header .h-nav ul li.h-nav-list .h-nav-list-box li{
	background: #006446;
	color: #ffffff;
	font-size: 34px;
	padding: 22px 25px;
	border-bottom: 2px dotted #ffffff;
	line-height: 1;
}
#header .h-nav ul li.h-nav-list .h-nav-list-box li:last-child{
	border-bottom:none;
}
#header .h-nav ul li.h-nav-list .h-nav-list-box li a{
	color: #ffffff;
}

/* ----------------------------------------
h-menu
---------------------------------------- */
#header .h-menu {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	
	z-index: 300;
	
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	
	
	display: none;
}
	
#header .h-menu .h-menu-wrapper {
	position: relative;
	z-index: 100;
	background: #f9f9f9;
}

#header .h-menu .h-menu-box {
	
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px 0;
}

/********** 閉じる **********/
#header .h-menu .h-btn-close {
	display: flex;
	justify-content: flex-end;
	
	width: 100%;
	padding: 0 4% 5% 0;
}
#header .h-menu .h-btn-close img {
	cursor: pointer;
}

/********** ボタン **********/
#header .h-menu .h-menu-btns{
	padding: 0 1.35% 4%;
}
#header .h-menu .h-menu-btns ul {
	display: flex;
}
#header .h-menu .h-menu-btns ul li {
	padding: 0 0.2%;
}
#header .h-menu .h-menu-btns ul li a {
	display: block;
}

/********** h-menu-list **********/
#header .h-menu .h-menu-list{
	padding: 0 0 9%;
}
#header .h-menu .h-menu-list ul{
	display: flex;
	flex-wrap: wrap;
	
	width: 100%;
	border-top: solid 2px #ccc;
}
#header .h-menu .h-menu-list ul li{
	width: 50%;
	border-bottom: solid 2px #ccc;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
}
#header .h-menu .h-menu-list ul li:nth-of-type(2n + 1){
	border-left: none;
}
#header .h-menu .h-menu-list ul li:nth-of-type(2n){
	border-right: none;
}
#header .h-menu .h-menu-list ul li a{
	display: block;
	padding: 5.8% 10%;
	font-size: 40px;
	background: url("../images/common/h-icon-arr.svg") no-repeat 20px 1.2em;
	background-size: 24px;
}
#header .h-menu .h-menu-list ul li span{
	display: block;
	padding: 5.8% 5%;
	font-size: 40px;
}



@media screen and (min-width: 768px) and (max-width: 899px){
	#header .h-menu .h-menu-list ul li a{
		padding-left: 15%;
		background-position: 15px 1em;
	}
}



/* ----------------------------------------
ついてくる
メニューボタンを消す
※開いた状態で
メニューを開くボタンが存在
しないようにするため
---------------------------------------- */
body.h-menu-active #header .h-btn-menu {
	visibility: hidden;
}



/* ----------------------------------------
overlay
---------------------------------------- */
/* overlay */
.overlay {
	visibility: hidden;
	
	position: fixed;
	z-index: 99;
	
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	background: rgba(0,0,0,0.5);
}
body.h-menu-active .overlay {
	visibility: visible;
}




/* --------------------------------------------------------------------------------
footer
-------------------------------------------------------------------------------- */
#footer .contact{
	margin: 0 0 10%;
	padding: 8% 0 0;
	background: #fff5c8;
}


/* ----------------------------------------
まずは無料お見積
---------------------------------------- */
#footer .contact .f-txt-mazuha{
	padding: 0 4% 3%;
	text-align: center;
	font-size: 56px;
	font-weight: bold;
	background: #fff5c8;
}
#footer .contact .f-txt-mazuha .f-txt-mazuha-1{
	font-size: 80px;
	color: #ff6600;
}
#footer .contact .f-txt-mazuha .f-txt-mazuha-2{
	color: #333;
}
#footer .contact .img-btn-tel{
	display: flex;
	justify-content: center;
	padding: 0 4% 2%;
}
#footer .contact .img-btn-tel a{
	display: block;
}

/* LINE */
#footer .contact .img-btn-linel{
	display: flex;
	justify-content: center;
	padding: 0 4% 2%;
}
#footer .contact .img-btn-linel a{
	display: block;
}

/* メール */
#footer .contact .img-btn-maill{
	display: flex;
	justify-content: center;
	padding: 0 4% 9%;
}
#footer .contact .img-btn-maill a{
	display: block;
}


/* ----------------------------------------
対応エリア
---------------------------------------- */
#footer .area{
	padding: 0 4% 15.5%;
}
#footer .area .title-area{
	display: flex;
	justify-content: center;
	padding: 0 0 6.5%;
}
#footer .area .txt-area{
	padding: 0 0 7%;
	font-size: 44px;
}
#footer .area .btn-details{
	padding: 0 6%;
}
#footer .area .btn-details a{
	display: block;
	border-radius: 100px;
	padding: 5% 18% 5% 19%;
	font-weight: bold;
	font-size: 48px;
	
	color: #fff;
	background: #00a082 url("../images/common/btn-icon-arr.svg") no-repeat calc(100% - 10%) 50%;
	background-size: 44px auto;
}


/* ----------------------------------------
安心して
---------------------------------------- */
#footer .anshin{
	margin: 0 0 10%;
	padding: 13.5% 5% 5%;
	background: #e6faec;
}
#footer .anshin .heading{
	padding: 0 0 7%;
	text-align: center;
	line-height: 1.4;
	font-size: 80px;
	font-weight: bold;
	color: #006446;
}

/********** 見出し **********/
#footer .anshin .ihin-seirishi .sheading{
	padding: 0 0 5%;
}

/********** 公福舎は、遺品整理士が在籍する企業です。 **********/
#footer .anshin .ihin-seirishi{
	margin: 0 0 5%;
	padding: 9% 4%;
	border-radius: 30px;
	background: #fff;
	line-height: 1.6;
	font-size: 48px;
}

/********** 遺品整理士協会から認められている優良事業所です。 **********/
#footer .anshin .yuryo-jigyosyo{
	margin: 0 0 5%;
	padding: 8% 4%;
	border-radius: 30px;
	background: #fff;
	line-height: 1.6;
	font-size: 48px;
}
#footer .anshin .yuryo-jigyosyo .sheading{
	padding: 0 0 35px;
	line-height: 1.4;
	text-align: center;
	font-weight: bold;
}
#footer .anshin .yuryo-jigyosyo .sheading .mark-1{
	font-size: 56px;
	color: #ff6600;
}
#footer .anshin .img-nintei img{
	display: block;
	margin: 0 auto;
}
#footer .anshin .img-haiki{
	padding: 0 0 7.5%;
}
#footer .anshin p{
	padding: 0 0 7.5%;
	font-size: 40px;
}


/* ----------------------------------------
公福舎コラム
---------------------------------------- */
#footer .column{
	padding: 0 0 15%;
}
#footer .column .heading{
	margin: 0 0 2%;
	padding: 1.75% 0;
	text-align: center;
	font-weight: bold;
	font-size: 56px;
	color: #fff;
	background: #00a082;
}
#footer .column .column-box{
}
#footer .column ul{
	height: 11em;
	overflow: auto;
	padding: 0 2%;
}
#footer .column ul li{
	display: flex;
	flex-wrap: wrap;
	
	padding:0.2em 0.2em 0.2em 18%;
	border-bottom:dotted 2px #999;
	background:url(/images/common/icon-oshirase.png) no-repeat 2% 50%;
	font-size: 40px;
}
#footer .column ul li.list1{
	background-image:url(/images/common/icon-new.png);
}
#footer .column ul li .date{
	width: 40%;
	background: none;
}
#footer .column ul li .title{
	width: 60%;
}

@media screen and (min-width: 768px) and (max-width: 899px){
	#footer .column ul li{
		padding-left: 25%;
	}
	#footer .column ul li .date{
		width: 100%;
	}
	#footer .column ul li .title{
		width: 100%;
	}
}


/********** 公福舎ロゴ **********/
#footer .f-logo{
	display: flex;
	justify-content: center;
	
	padding: 0 0 6%;
}



/* ----------------------------------------
f-menu
---------------------------------------- */
#footer .f-menu {
}
	
#footer .f-menu .f-menu-wrapper {
	background: #f9f9f9;
}

#footer .f-menu .f-menu-box {
	
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 0 5%;
}


/********** f-menu-list **********/
#footer .f-menu .f-menu-list{
}
#footer .f-menu .f-menu-list ul{
	display: flex;
	flex-wrap: wrap;
	
	width: 100%;
	border-top: solid 2px #ccc;
}
#footer .f-menu .f-menu-list ul li{
	width: 50%;
	border-bottom: solid 2px #ccc;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
}
#footer .f-menu .f-menu-list ul li:nth-of-type(2n + 1){
	border-left: none;
}
#footer .f-menu .f-menu-list ul li:nth-of-type(2n){
	border-right: none;
}
#footer .f-menu .f-menu-list ul li a{
	display: block;
	padding: 5.8% 10%;
	font-size: 40px;
	background: url("../images/common/h-icon-arr.svg") no-repeat 20px 1.2em;
	background-size: 24px;
}
#footer .f-menu .f-menu-list ul li span{
	display: block;
	padding: 5.8% 5%;
	font-size: 40px;
}


@media screen and (min-width: 768px) and (max-width: 899px){
	#footer .f-menu .f-menu-list ul li a{
		padding-left: 15%;
		background-position: 15px 1em;
	}
}



/* ----------------------------------------
バナー
---------------------------------------- */
#footer .bnrs{
	padding: 0 0 5%;
	background: #f9f9f9;
}
#footer .bnrs ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
	width: 100%;
	padding: 0 2.5%;
}
#footer .bnrs ul li {
	width: 49%;
	padding: 0 0 2%;
}
#footer .bnrs ul li a {
	display: block;
}

/* ----------------------------------------
sns & copyright
---------------------------------------- */
#footer .sns-copyright{
	padding: 0 0 2.3%;
	background: #006446;
}

/********** SNS **********/
#footer .f-sns{
}
#footer .f-sns ul{
	display: flex;
	justify-content: center;
	
	width: 100%;
	padding: 7% 4% 5%;
}
#footer .f-sns ul li{
	width: 100px;
	height: auto;
	margin: 0 3%;
}

/********** コピーライト **********/
#footer .copyright{
	text-align: center;
	font-size: 25px;
	color: #fff;
}

/* ----------------------------------------
フッター固定
---------------------------------------- */
#footer .f-fix{
	/*position: fixed;*/
	right: 0;
	bottom: 0;
	left: 0;
	
	z-index: 10;
	width: 100%;
}
#footer .f-fix .f-fix-box{
	max-width: 1000px;
	margin: 0 auto;
	padding: 7px 0 0;
	background: #00a082;
}
#footer .f-fix .f-fix-btn-box{
	display: flex;
	align-items: flex-end;
	max-width: 960px;
	margin: 0 auto;
}
#footer .f-fix .f-fix-btn-box .f-btn-tel{
	width: 52%;
}
#footer .f-fix .f-fix-btn-box .f-btn-line-mail{
	width: 48%;
}
#footer .f-fix .f-fix-btn-box .f-btn-line-mail .txt{
	font-size: 30px;
	color: #fff;
	text-align: center;
	margin: 0 0 7px;
}
#footer .f-fix ul{
	display: flex;
	justify-content: center;
	
	width: 100%;
}


/****上部へ戻るボタン****/
#pagetop{
	position: fixed;
	bottom:70px;
	right:0;
	width:90px;
	z-index: 60;
}
#pagetop img{
	margin: 0 0 0 auto;
}