@CHARSET "UTF-8";
/* ===================================================================
フォントの指定
=================================================================== */
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

/* ゴシック体 */
html body{
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 明朝体
html body{
  font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}*/
/* ================================================================ */

html body{ background: #fff;}
html body #container{ line-height: 1;}
html body #container article,
html body #container section,
html body #container footer{ line-height: 1.5; }
img{ display: block; }
header a,
footer a,
#wrapper a { text-decoration: none; }

/*
a:not(.button):hover{ color: red ! important; }
*/

/* ===================================================================
ベース
=================================================================== */
article { margin: 1rem auto 0;}

#container.area_flex{
  min-height: 100vh;
  -webkit-box-direction:normal;
  -moz-box-direction:normal;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;
}

#container .size {
  margin-left: auto;
  margin-right: auto;
}


#container{}


/* header */
header{ font-size: 18px !important; margin-top: .3rem;}
header a { color: #000;}
#container nav.area_pc{
  border-top: 1px rgba(0,0,0,.2) solid;
  border-bottom: 1px rgba(0,0,0,.2) solid;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cddbad+15,9bd425+100 */
  background: rgb(205,219,173); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(205,219,173,1) 15%, rgba(155,212,37,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(205,219,173,1) 15%,rgba(155,212,37,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(205,219,173,1) 15%,rgba(155,212,37,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cddbad', endColorstr='#9bd425',GradientType=0 ); /* IE6-9 */
}
  nav #main_menu{
    margin: 0 auto;
    text-align: center;
    border-right: 1px rgba(0,0,0,.2) solid;
  }
  nav #main_menu > .flex-item{
    color: #000;
    text-decoration: none;
    border-left: 1px rgba(0,0,0,.2) solid;
    padding: 1.3rem;
  }
  nav #main_menu .flex-item:hover{ background: rgba( 255,255,255,0.5); color: #000!important;}
.logo { width: 40%;}


/* footer */
footer {
  margin-top: 3rem;
  padding-top: 3rem;
  padding-right: .5rem;
  padding-left: .5rem;
  font-size: 16px !important;
  background-color: #dbc4a5;
  color: #542c0f;
}
footer a { color: #542c0f;}
footer #sitemap {
  margin-bottom: 2rem;
}
footer #sitemap ul li a:before {
  content: ">";
  padding-right: .2rem;
}


/* copyright */
#bsc-copyright{ font-size: .7em; text-align: right;}
#copyright {
  font-size: .9em;
  text-align: right;
}

/* ===================================================================
pc nav固定
=================================================================== */
.nav_is-fixed{
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* ===================================================================
見出し
=================================================================== */
h1{
  font-size: 1.5rem;
  margin: .7rem 0 1rem 0;
}
#sp_menu h1 { margin-left: .5em;}

#wrapper *+h2,
#wrapper *+h3,
#wrapper *+h4,
#wrapper *+h5{
  margin-top: 2rem;
}
h2{
  text-align: center;
  font-size: 2rem;
  background-color: #d3e8a3; /* 背景色 */
  color: #590c11; /* 文字色 */
  padding: 2rem 0;
}
h3{
  font-size: 1.2rem;
  color: #590c11;
  margin-bottom: .8rem;
  padding: .3rem .5rem .1rem;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ecf2de+1,ecf2de+56,ecf2de+56,e1f2ba+57,eff2e8+100 */
  background: rgb(236,242,222); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(236,242,222,1) 1%, rgba(236,242,222,1) 56%, rgba(236,242,222,1) 56%, rgba(225,242,186,1) 57%, rgba(239,242,232,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(236,242,222,1) 1%,rgba(236,242,222,1) 56%,rgba(236,242,222,1) 56%,rgba(225,242,186,1) 57%,rgba(239,242,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(236,242,222,1) 1%,rgba(236,242,222,1) 56%,rgba(236,242,222,1) 56%,rgba(225,242,186,1) 57%,rgba(239,242,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ecf2de', endColorstr='#eff2e8',GradientType=0 ); /* IE6-9 */
  border-bottom: 5px solid #9bd425;

}
h4{ }
h5{ }

/* ===================================================================
section
=================================================================== 
#wrapper section+section{ margin-top: 1rem; } */

/* ===================================================================
テキスト
=================================================================== */
.fc_red { color: #ff1d1d;}
.fc_gr { color: #7fbe25;}
.bold { font-weight: bold;}


/* ===================================================================
汎用
=================================================================== */
/* ページトップに戻る */
#totop {
  z-index:2147483647;
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

#totop a {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background: #333;
  text-align: center;
  color: #fff;
  text-decoration: none;
  line-height: 2.5rem;

  border-radius: 50%;            /* CSS3草案 */  
  -webkit-border-radius: 50%;    /* Safari,Google Chrome用 */
  -moz-border-radius: 50%;       /* Firefox用 */
  text-decoration: none ! important;
}

#totop a:hover{
  -webkit-filter: opacity(0.7);
  -moz-filter: opacity(0.7);
  -o-filter: opacity(0.7);
  -ms-filter: opacity(0.7);
  filter: opacity(0.7);
}

.conversion {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
}
.conversion img { width: 100%;}


/* ===================================================================
list
=================================================================== */


/* ===================================================================
area
==================================================================== */
/* .button */
ul.area_button{
  margin: 0 !important;
  text-align: center;
}
  ul.area_button > li{ display: inline-block !important; }
  ul.area_button > li{ margin: 1rem; }

.button{ /* 単体でも一応使える(左寄せになる) */
  margin: 1rem auto;
  padding: .75rem 1rem;
  display: inline-block;
  background: #d3e8a3;
  text-decoration: none;
  border: 2px solid #d3e8a3;
  border-radius: 25px;            /* CSS3草案 */  
  -webkit-border-radius: 25px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 25px;       /* Firefox用 */
  /* 文字と文字の間隔をあける */
  line-height: 1;
  letter-spacing: .2em;
  min-width: 10em;
  color: #000;
}
.button.back{
  background: #fff;
}
.button:hover{
  background: #fff;
  color: #50975d;
  cursor: pointer;
}


.float-left { float: left;}




/* フロントページ */
#front-page .list_btn { text-align: right; margin-top: 1rem;}
#front-page .list_btn a {
  background-color: #716052;
  color:#fff;
  padding: .3rem 1.5rem;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

  /* サービス */
#front-page #f_service ul li { width: 19%;}

  /* 実績(ブログ) */
#front-page #f_casestudy ul.blog-item {}
#front-page #f_casestudy ul.blog-item li {
  border: 1px solid #aaa;
  padding: .5rem;
}
#front-page #f_casestudy ul.blog-item li + li {
  margin-top: 1rem;
}
#front-page #f_casestudy ul.blog-item li h5{ margin-bottom: .4rem;}
#front-page #f_casestudy ul.blog-item li p a { color: #7ab304;}
#front-page #f_casestudy ul.blog-item .readmore {
  clear: both;
  text-align: center;
  margin-top: .5rem;
}
#front-page #f_casestudy ul.blog-item .readmore a {
  display: block;
  background-color: #dbc4a5;
  color: #542c0f;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#front-page #f_casestudy ul.blog-item h5 a { color: #7ab304;}

  /* よくある質問 */
#front-page #f_faq dl.area_faq > *{
  position: relative;
  padding: .2rem 0;
  padding-left: 2rem;
}
#front-page #f_faq dl.area_faq > *:before{
  display: inline-block;
  width: 1.5rem;
  position: absolute;
  left: 0;
  text-align: center;
  border-radius: 50%;\
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  margin-right: .5rem;
}
#front-page #f_faq dl.area_faq > dt:before{
  content: 'Q';
  color: #fff;
  background: #9bd425;
}
#front-page #f_faq dl.area_faq > dd:before{
  content: 'A';
  background: #dfdfdf;
}
#front-page #f_faq dl.area_faq > dt{ padding-top: .5rem; }
#front-page #f_faq dl.area_faq > dd{ padding-bottom: .5rem;}
#front-page #f_faq dl.area_faq > dd+dt{ border-top: dashed #bbb 2px;}



/* こだわり */
#commitment p { text-indent: 1rem;}
#commitment p + p { margin-top: 1rem;}

/* 代行の流れ */
#flow section {
  padding: 0;
  margin-top: 1.5rem;
  border: 1px solid #9bd425;
}
#flow h4 {
  background-color: #ecf2de;
  padding: .5rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid #9bd425;
}
#flow p {
  padding: .5rem;

}

/* サービス一覧 */
#service_list > div > div {
  width: 49%;
  border: 1px solid #aaa;
  margin-bottom: 1rem;
  padding: .5rem;
  background-color: #e0d2be;
}
#service_list > div > div a {
  color: #000;
}
#service #price table {
  width: 50%;
  border: 2px solid #aaa;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: .8rem;
}
#service #price table tr * {
  border-bottom: 1px solid #aaa;
  padding: .3rem;
}


/* 実績 */
#casestudy .date { color: #999; margin-bottom: .1rem;}
#casestudy .blog-item {
  margin: 1rem 0;
  border: 1px solid #aaa;
  padding: .7rem;
}
#casestudy .blog-item a { color: #7ab304;}


.nav-links{
   display:flex;
}
.pagination .page-numbers{
   display:inline-block;
   margin-right:10px;
   padding:15px 25px;
   color:#333;
   border-radius:3px;
   box-shadow:0 3px 3px #999;
   background:#fff;
}
.pagination .current{
   padding:15px 25px;
   background:#7ab304;
   color:#fff;
}
.pagination .prev,
.pagination .next{
   background:transparent;
   box-shadow:none;
   color:#7ab304;
}
.pagination .dots{
   background:transparent;
   box-shadow:none;
}


/* よくある質問 */
#faq dl.area_faq > *{
  position: relative;
  padding: .5rem 0;
  padding-left: 2rem;
}
#faq dl.area_faq > *:before{
  display: inline-block;
  width: 1.5rem;
  position: absolute;
  left: 0;
  text-align: center;
  border-radius: 50%;\
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  margin-right: .5rem;
}
#faq dl.area_faq > dt:before{
  content: 'Q';
  color: #fff;
  background: #9bd425;
}
#faq dl.area_faq > dd:before{
  content: 'A';
  background: #dfdfdf;
}
#faq dl.area_faq > dt{ padding-top: 1rem; }
#faq dl.area_faq > dd{ padding-bottom: 1rem;}
#faq dl.area_faq > dd+dt{ border-top: dashed #bbb 2px;}

/* 会社概要 */
#company #overview table { width: 100%;}
#company #overview table tr > * {
  border: 1px solid #aaa;
  padding: .5rem;
}
#company #overview table tr th {
  vertical-align: middle;
  background-color: #d3e8a3;
}

/* 個人情報保護方針 */
#privacy dl dt {
  display: inline-block;
  margin-top: 1.3rem;
  margin-bottom: .5rem;
  padding: 0 .3rem;
  border-bottom: 3px solid #9bd425;
}

/* お問い合わせ */
#contact table.formTable {
  width: 70%;
  margin-top: 1rem;
  margin-right: auto;
  margin-left: auto;
}
#contact table.formTable tr > * {
  border: 1px solid #aaa;
  padding: .3rem .5rem;
}
#contact table.formTable tr th {
  text-align: left;
  background-color: #d3e8a3;
}

table.formTable input[type="text"],
table.formTable input[type="password"],
table.formTable input[type="file"],
table.formTable input[type="tel"],
table.formTable input[type="url"],
table.formTable input[type="email"],
table.formTable input[type="number"],
table.formTable textarea{
  max-width: 100%;
}
table.formTable input[type="text"],
table.formTable input[type="password"],
table.formTable input[type="file"],
table.formTable input[type="tel"],
table.formTable input[type="email"],
table.formTable input[type="number"]{
  width: 95%;
}
table.formTable textarea{
  width: 95%;
}



input[type="submit"],
input[type="button"],
input[type="reset"] {
  -webkit-appearance: none;
}


/* ===================================================================
media screen
=================================================================== */
@media screen and (max-width: 370px){
  
}

/* スマホ */
@media screen and (max-width: 640px){
  #front-page #f_service ul li { width: 49%; margin: .3rem 0;}
  #front-page #f_casestudy > div:not(.list_btn) { display: inline;}
  #front-page #f_casestudy .blog-item { width: 100%; margin: .5rem 0;}
  footer { margin-bottom: 17%;}
  footer #sitemap ,footer #address { display: inline;}
  footer #address .comp_info { margin: 1rem 0;}
  #copyright { text-align:center;}
  .banner-img { width: 100%;}
  #commitment .kodawari > div { display: inline;}
  #service_list > div > div
  ,#service #price table { width: 100%;}
  .serv_img { width: 70%; margin: .7rem auto;}
  #casestudy .blog-item h5 { margin-top: .5rem;}
  #company #overview table tr,
  #company #overview table th,
  #company #overview table td {
    text-align: left !important;
    max-width: 100% !important;
    display: block;
  }
  table.formTable tr,
  table.formTable th,
  table.formTable td{
    text-align: left !important;
    max-width: 100% !important;
    display: block;
  }
  table.formTable td{
    max-width: 100%;
    min-height: 2.5em;
  }
  table.formTable{ width: 100% !important;}
  table.formTable tr > th { font-size: 1em;}
  #totop { bottom: 6rem;}
}

/* タブレット1 */
@media screen and (min-width: 641px){
  #commitment .kodawari_img { width: 30%;}
  #commitment .kodawari_txt { width: 70%;}
  .serv_details {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;

    -webkit-box-pack:justify;
    -moz-box-pack:justify;
    -webkit-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    -moz-justify-content:space-between;
    justify-content:space-between;
  }
  .serv_img { width: 30%;}
  .serv_txt { width: 70%;}
  #company #overview table th { width: 25%;}
  .conversion { display: none !important;}
}

/* タブレット2以下 */
@media screen and (max-width: 800px){
  
  
}


/* タブレット2以上 */
@media screen and (min-width: 801px){
  
}

/* ipad */
@media screen and (min-width: 801px) and (max-width: 1024px){
  
}

@media screen and (max-width: 1000px){
  body:not(#front-page) #wrapper
  ,.main-img_area { margin-top: 3.6em;}
}

/* ipad以下 */
@media screen and (max-width: 1024px){
   #container, .size {
    padding-left: .5rem;
    padding-right: .5rem;
    width: 100%;
  }
}

/* PC */
@media screen and (min-width: 1025px){
  .size{ width: 1000px; }
}