/*
    Theme Name: 便利屋ファミリー_WebSite
    Version: 1.0
*/
@import url("common/css/home.css");
@import url("common/css/page.css");
@import url("common/css/archive.css");
@import url("common/css/single.css");
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:900&display=swap');
/*********************************************
initialize
*********************************************/

*{
    padding:0;
    margin:0;
		/* max-width:100%; */
		box-sizing:border-box;
    }
h1 {
  font-size: 1rem;
}
body,html{
    font-size:14px;
    font-family: 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;  	color:#333;
    background: #fff799;
    }
a:hover img{
    opacity:0.8;
    }
img{
    border:none;
    outline:none !important;
    height:auto;
    display: block;
    width: 100%
    }
ul>li{
	list-style:none;
	}
p{
  margin: 0;
}
section {
  margin-bottom: 30px;
  padding: 0 5px;
}
@media (min-width:481px) {
  section {
    padding: 0;
  }
}
a {
  text-decoration: none;
}
/*********************************************
共通
*********************************************/
.flex {
  display: flex;
  flex-wrap: wrap;
}
.flex_btw {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
h1.nomal {
  font-family: 'M PLUS 1p', sans-serif;
  background-image: url(common/img/common/h1_bg.jpg);
  background-repeat: no-repeat;
  display: block;
  height: 50px;
  color: #fff;
  line-height: 50px;
  padding-left: 15px;
  margin-bottom: 15px;
}
h1.nomal span.sm {
  font-size: 0.6em;
}
h1.fsize-l {
  font-size: 40px;
}
@media (max-width:480px) {
  h1.fsize-l {
    font-size: 30px;
  }
}
h1.fsize-s {
  font-size: 28px;
}
@media (max-width:480px) {
  h1.fsize-s {
    font-size: 20px;
  }
}
.pageEnd {
  margin-bottom: 80px;
}
/*********************************************
デスクトップのみ表示
*********************************************/
@media (max-width:480px) {
  .desktop {
    display: none;
  }
  .pc_only {
  display: none;
  }
}
/*********************************************
モバイルのみ表示
*********************************************/
@media (min-width:481px) {
  .mobile {
    display: none;
  }
  .sp_only {
  display: none;
  }
}
/*********************************************
h2
*********************************************/
h2.nomal {
  font-family: 'M PLUS 1p', sans-serif;
  background-image: url(common/img/common/h2_bg.jpg);
  padding: 7px 15px;
  border: solid 5px #ffc25d;
  margin-bottom: 15px;
}
h2.u_line {
  font-family: 'M PLUS 1p', sans-serif;
  padding: 7px 0;
  border-bottom: dotted 2px;
  margin: 15px;
  color: #fd584d;
  font-size: 1.6em;
}
/*********************************************
header
*********************************************/
#header_bg {
  background-image: url(common/img/common/header/header_bg_sm.jpg);
  background-repeat: repeat-x;
}
header {
  width: 100%;
  height: 50px;
}
header .logoArea {
  width: 45%;
  max-width: 185px;
  padding-top: 7px;
}
header .logoArea .subTitle {
  font-size: 7px;
  font-weight: 600;
  color: #2c6ab4;
  height: 15px;
}
@media (max-width:480px) {
  header .logoArea .subTitle {
    display: none;
  }
}
header .logoArea .logo {
  height: 35px;
}
header .logoArea .Logo img {
  width: 100%;
  max-width: 180px;
}
header .telArea {
  width: 45%;
  max-width: 145px;
  padding-top: 7px;
  text-align: right;
}
header .menubtn {
  width: 10%;
}
@media (min-width:481px) {
  #header_bg {
    background-image: url(common/img/common/header/header_bg.jpg);
    background-repeat: repeat-x;
    width: 100%;
  }
  header {
    width: 100%;
    max-width :950px;
    height: 95px;
    margin: 0 auto;
  }
  header .logoArea {
    width: 50%;
    max-width: 435px;
    padding-top: 0;
  }
  header .logoArea .subTitle {
    font-size: 14px;
    height: 18px;
    display: block;
  }
  header .logoArea .logo {
    height: 80px;
  }
  header .logoArea .Logo img {
    max-width: 435px;
  }
  header .telArea {
    width: 45%;
    max-width: 340px;
    text-align: right;
    padding-top: 0;
    padding-top: 4px;
  }
  header .menubtn {
    display: none;
    font-size: 18px;
    color: #fff;
  }
}
/*********************************************
メニューバー デスクトップ
*********************************************/
nav.desktop {
  background: #cba8ce;
  height: 40px;
  width: 100%;
  font-size: 0.95em;
}
nav.desktop ul {
  display: block;
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  line-height: 40px;
}
nav.desktop ul li {
  display: inline-block;
  list-style: none;
  padding: 0 10px;;
  color: #fff;
  font-weight: 300;
  text-align: center;
}
@media (min-width:481px) {
  nav.desktop ul li {
    /* width: 13.855%; */
    width: 12%;
    padding: 0;
  }
}
nav.desktop ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
}
nav.desktop ul li a:hover {
  background: #b294b5;
}
/*********************************************
メニューバー モバイル
*********************************************/
nav.mobile {

}
nav.mobile .menu {
    width: 100%;
    height: 50px;
    margin: 0 auto;
}
nav.mobile .menu > li {
    height: 50px;
    line-height: 50px;
    background: rgb(29, 33, 19);
}
nav.mobile .menu > li a {
    display: block;
    color: #fff;
    text-align: center;
    text-decoration: none;
}
nav.mobile .menu > li a:hover {
    color: #999;
}
nav.mobile .menu > li.menu__single {
    position: relative;
    width: 100%;
}
nav.mobile li.menu__single ul.menu__second-level {
    position: absolute;
    top: 40px;
    width: 100%;
    background: #072A24;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    visibility: hidden;
    width: 100%;
    opacity: 0;
    z-index: 999;
}
nav.mobile li.menu__single:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
}
nav.mobile .menu > li:hover {
    background: #072A24;
    -webkit-transition: all .5s;
    transition: all .5s;
}
nav.mobile .menu__second-level li {
    border-top: 1px solid #111;
    width: 100%;
}
nav.mobile .menu__second-level li a:hover {
    background: #111;
}
/* 下矢印 */
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 0 15px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {
    clear: both;
}

.menu {
    *zoom: 1;
}
/*********************************************
ページbody
*********************************************/
.pagebody {
  width: 100%;
  margin: 0 auto;
}
@media (min-width:481px) {
  .pagebody {
    width: 100%;
    max-width: 950px;
  }
}
/*********************************************
2カラムレイアウト row-reverse
*********************************************/
.bodyWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: row-reverse;
  width: 100%;
  max-width: 950px;
  margin: 15px 0 0 0;
}
main {
  width: 735px;
}
/*サイドバーcssは下へ移動
.sidebar {
}
*/
/*********************************************
sidebar
*********************************************/
@media (max-width:480px) {
  .sidebar {
    display: none;
  }
}
@media (min-width:481px) {
  .sidebar {
    width: 100%;
    max-width: 200px;
  }
  .sidebar img {
    width: 100%;
    max-width: 200px;
    border: solid 1px #CCC;
  }
  .sidebar .banner,
  .sidebar .sideMenu {
    margin-bottom: 15px;
  }
  .sidebar ul li {
    margin: 5px 0;
  }
}
/*********************************************
footer
*********************************************/
footer {
  background-color: #7ecef4;
  height: 250px;
}
div.footerBody {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  position:relative;
}
div.footerLogo {
  position: absolute;
  top: 30px;
  width: 380px;
  height: auto;
}
footer .textLink {
  position: absolute;
  top: 50px;
  right: 0;
  text-align: right;
  font-weight: 400;
  color: #fff;
  font-size: 1.2rem;
}
footer .textLink a {
  color: #fff;
  text-decoration: none;
}
footer .telArea {
  position: absolute;
  top: 120px;
  right: 0;
  width: 340px;
  height: auto;
}
.footerbottom .dealer-number {
  font-size: 12px;
  color: #fff;
  display: block;
  text-align: center;
}
.footerbottom .copy-right {
  font-size: 12px;
  color: #fff;
  display: block;
  text-align: center;
}
div.footerbottom {
  clear: both;
  width: 100%;
  background: #7ecef4;
}
@media (max-width:480px) {
  footer {
    background-color: #7ecef4;
    height: 130px;
  }
  div.footerBody {
    width: 100%;
    margin: 0 auto;
    position:relative;
  }
  div.footerLogo {
    position: absolute;
    top: 10px;
    left: 5px;
    width: 48%;
    height: auto;
  }
  footer .textLink {
    display: none;
  }
  footer .telArea {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 48%;
    height: auto;
  }
  div.footerbottom{
  margin-top:-80px;
  }
  .footerbottom .dealer-number {
  font-size: 10px;
}
  .footerbottom .copy-right {
  font-size: 10px;
}
}
/*********************************************
モバイル画面下のメールフォーム、電話ボタン
*********************************************/
.btn_wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
}
@media (max-width:480px) {
  .btn_wrap {
    background-color: rgba(0, 0, 0, 0.7);
  }
}
@media (max-width:480px) {
  #mobContact {
    width: 82%;
    padding-top: 10px;
    bottom: 0;
    left: 0;
  }
  #mobContact .mailForm,
  #mobContact .callTell {
    width: 43%;
    margin: 0 10px;
    padding: 0;
  }
  #mobContact .mailForm img,
  #mobContact .callTell img {
    width: 100%;
    height: auto;
    display: block;
  }
}
@media (min-width:481px) {
  #mobContact {
    display: none;
  }
}
/*********************************************
ページトップボタン
*********************************************/
#pageTop {
  /* position: fixed; */
  bottom: 0;
  right: 0;
  padding: 20px;
}
@media (max-width:480px) {
  #pageTop {
    width: 18%;
    padding: 10px;
  }
}
@media (min-width:481px) {
  #pageTop {
    position: fixed;
  }
}
#pageTop a {
}
#pageTop a img {
  display: block;
}

/*********************************************
パンくずリスト
*********************************************/
.breadcrumb_list {
  padding: 3px 10px;
  margin-bottom: 15px;
  background: #fffac3;
  border: solid 1px #eeeac0;
  border-radius: 4px;
  font-size: 0.9em;
}
.breadcrumb_list a {
  text-decoration: none;
  color: #2aa6d4;
}
/*********************************************
ページネーション
*********************************************/
/* 共通 */
.pagenatin_box {
	display: block;
	width: 100%;
	clear: both;
}
.pagination {
    text-align: center;
    width: 100%;
    display: block
}
.pagination a {
    background: #fbde46;
    color: #000;
    text-decoration: none
}
/* スマホ　*/
@media only screen and (max-width: 480px) {
    .pagination .inner {
        width: 90%;
        margin: 0 5%;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        height: 46px
    }
    .pagination .page-of {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        order: 2;
        position: absolute;
        left: 37%;
        width: 26%;
        font-weight: bold;
        color: #fff;
        background: #ccab00;
        height: 46px;
        line-height: 46px;
        font-size: 1.3rem
    }
    .pagination .m-prev {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: 0;
        -webkit-order: 0;
        order: 0;
        width: 15%;
        position: absolute;
        left: 0%
    }
    .pagination .pn-prev {
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
        width: 22%;
        position: absolute;
        left: 15%
    }
    .pagination .pn-next {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 3;
        -webkit-order: 3;
        order: 3;
        width: 22%;
        position: absolute;
        left: 63%
    }
    .pagination .m-next {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 4;
        -webkit-order: 4;
        order: 4;
        width: 15%;
        position: absolute;
        left: 85%
    }
    .pagination .current, .pagination .pn-numbers {
        display: none
    }
    .pagination a {
        line-height: 46px;
        height: 46px;
        font-weight: bold;
        font-size: 1.3rem
    }
}
/* PC */
@media only screen and (min-width: 481px) {
    .pagination .page-of {
        display: block;
        width: 100%;
        font-size: 108%;
        color: #000;
        text-align: center;
        margin-bottom: 2em
    }
    .pagination a, .pagination .current {
        display: inline-block;
        padding: 0 1.5em;
        font-size: 116%;
        font-weight: bold;
        line-height: 50px;
        height: 50px
    }
    .pagination .current {
        background: #ccab00;
        color: #fff
    }
    .pagination a:hover {
        background: #ccab00;
        color: #fff
    }
}

 /*料金表*/
.table {
display:table;
}
.table .row {
display:table-row;
}
.table .cell-001 {
display:table-cell;
padding:10px; /*余白を指定*/
width:20%;
text-align:center;
color:#191970;
font-size:18px;
font-weight: bolder;
background-color: rgba(222,184,135,0.3);
background-image:
radial-gradient(#fffacd 30%, transparent 30%);
background-size: 5px 5px;
}
.table .cell-002 {
display:table-cell;
padding:10px; /*余白を指定*/
width:40%;
text-align:center;
color:#696969;
font-size:18px;
font-weight: bolder;
background-color: rgba(102,205,170,0.2);
background-image:
radial-gradient(#7bded9 30%, transparent 30%);
background-size: 5px 5px;
}
.table .cell-003 {
display:table-cell;
padding:10px; /*余白を指定*/
width:40%;
text-align:center;
color:red;
font-size:20px;
font-weight: bolder;
background-color: rgba(255,215,0,0.3);
background-image:
radial-gradient(#ffffe0 30%, transparent 30%);
background-size: 5px 5px;
}
.table, .cell-001, .cell-002, .cell-003{
border-collapse:collapse;
border:2px solid #ff8c00;
width:100%;
}

@media (max-width:480px) {
.table, .cell-001, .cell-002, .cell-003{
width:100%;
}
.table .cell-001 {
width:30%;
font-size:14px;
}
.table .cell-002 {
width:30%;
font-size:16px;
}
.table .cell-003 {
width:30%;
font-size:16px;
}
}