@import url("//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://use.fontawesome.com/releases/v5.6.1/css/all.css");

/*--------------------------------------------------------------
フラット01 グリーン 2カラム左メイン
---------------------------------------------------------------*/
html{
  scroll-behavior: smooth;
}

body {
  font-size:17px;
  color: #222;
  line-height: 1.8;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*--------------------------------------------------------------
リンク
---------------------------------------------------------------*/
/*リンクカラー*/
a {
  color: #fd7318;
}
a:hover{
  color: #ef8323;
}
a.btn {
  font-size:1.1em;
  background: linear-gradient(to bottom,  #bbd945 0%, #aac737 100%);
}
.article a {
  font-size: 115%;
  font-weight: bold;
}

/*電話番号*/
a.tel-link {
  font-size: 1.1em;
  font-weight: 700;
  text-decoration: none;
}
a.tel-link::before {
  font-family: "Font Awesome 5 Free";
  content: "\f2a0";
  font-weight: bold;
  margin-right: 2px;
}
a img:hover {
  opacity: 0.8;
}

/*--------------------------------------------------------------
コンテンツ幅拡張
---------------------------------------------------------------*/
#title_outer, #topMenu_outer, #contents_outer, #footer_outer {
  width: 1200px;
}
#mainContents {
  width: 900px;
}

/*--------------------------------------------------------------
レイアウト .article等調整
---------------------------------------------------------------*/
#wrap_body #contents {
  background: #f2f7e7;
}
.article, .gallery, #mainTopics, #listTopics, #mainServices, #mainBlogComments, #mainBlogCommentForm {
  background: none;
}
#sideContents {
  width: 260px;
}
#listTopics {
  margin-top: 0;
}
#listTopics, #mainTopics, .article, .gallery {
  border-top: none;
}
.article .article_left .image, .article .article_right .image {
  max-width: 320px;
}
.article .article_right .image {
  margin-left: 4%;
}
.article .article_left .image {
  margin-right: 4%;
}
.article strong {
  font-size: 120%;
  color: #49aa11;
}

/*--------------------------------------------------------------
汎用クラス
---------------------------------------------------------------*/
/*キャッチコピー等*/
.leadText {
  font-size: 1.15em;
  font-weight: 600;
}
/*リスト マーカーなし インデントのみ*/
ul.simple-list {
  font-size: 87%;
  margin-bottom: 1.0em;
}
ul.simple-list li {
  margin-left: 1.0em;
  text-indent: -1.0em;
  line-height: 1.6;
}
/*白背景記事*/
.white_box .article_outer {
  background: #fff;
  padding: 1.0em 1.2em;
}
.white_box p:last-of-type {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
title
---------------------------------------------------------------*/
#title {
  display: flex;
  width: 100%;
  padding: 15px 0; 
}
#title h1 {
  display: block;
  width: 373px;
  height: 40px;
  margin: 0 0 0 0;
}
#title h1 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url("/materials/177208204845501.png") top left no-repeat;
  background-size: 100%;
  text-indent: -9000px;
  margin:0;
}
#title #title_outer {
  height: 70px;
  background: url("/materials/177208207630901.png") right center no-repeat;
  background-size: 329px;
}

/*--------------------------------------------------------------
footer
---------------------------------------------------------------*/
#footer {
  background: #49aa11;
}

/*--------------------------------------------------------------
Topics
---------------------------------------------------------------*/
#mainTopics .listview a {
  background: linear-gradient(to bottom,  #bbd945 0%, #aac737 100%);
}
ul.topics li {
  min-height: 138px;
  background: #fff;
  padding: 18px 15px 15px 22px;
  border-right: 1px solid #bbd945;
  border-bottom: 1px solid #bbd945;
}
ul.topics li:first-of-type {
  padding-top: 18px;
  min-height: 138px;
}
ul.topics li::before {
  content: "";
  width: 4px;
  height: 40px;
  background: #bbd945;
  position: absolute;
  top: 0;
  left: 0;
}
ul.topics li p.more {
  right: 15px;
}
p.more a {
  background: #c8ccc0;
}
p.more a:hover {
  background: #bcc1b1;
}

/* 1200px以下〜601px以上だけ調整（600以下はモバイル表示） */
@media (min-width: 601px) and (max-width: 1200px){
/*
  #wrap {
    width: 100%;
    max-width: 1024px;
  }
*/
  #title {
    padding: 15px 2%;
  }
  #title_outer, #topMenu_outer, #contents_outer, #footer_outer {
    width: 100%;
  }
  #wrap_body #contents {
    padding-left: 2%;
    padding-right: 2%;
    box-sizing: border-box;
  }
  #mainContents, #sideContents { box-sizing: border-box; }
  #sideContents{
    float: right;
    width: 240px;
    margin-left: 3.5%;
  }
  #mainContents{
    float: left;
    width: calc(100% - 240px - 3.5%);
    min-width: 0;
  }
}

/*--------------------------------------------------------------
見出し
---------------------------------------------------------------*/
#mainArticles h2, #listTopics h2 {
  color: #111;
  margin-top: 0.7em;
}
#mainArticles h2 {
  position: relative;
  margin-top: 0;
  margin-bottom: 0.5em;
  padding-top: 1.6em;
  padding-bottom: 0.9em;
  background: url("/materials/177226650364101.png") no-repeat top center;
  background-size: 30px auto;
}
#mainArticles h2::after {
  content: "";
  width: 30px;
  height:4px;
  border-radius: 999px;
  background: #49aa11;
  position: absolute;
  bottom: 0;
  left: calc(50% - 15px);
}
#mainArticles .article h2, .mainContents .article h3, #mainTopics h2,
#listTopics h2, .mainContents div.gallery h3, #mainServices h2 {
  font-size: 1.6em;
  font-weight: 600;
  color: #fff;
  background: #49aa11;
  margin: 0 -18px 40px -18px;
  padding: 16px 20px;
}
.article h4 {
  color: #507a06;
  margin-bottom: 0.5em;
}
.article h4.grass {
  display: flex;
  margin-top: 0.3em;
  margin-bottom: 1em;
  padding: 0 0 0.5em 0;
  position: relative;
}
.article h4.grass::before {
  content: "";
  position:absolute;
  left:0;
  right:52px;
  bottom:0;
  border-bottom:2px solid #49aa11;
}
.article h4.grass::after {
  content: "";
  width: 52px;
  height: 16px;
  position: absolute;
  bottom: 0;
  right: 0;
  background: url("/materials/177226065991601.png") no-repeat;
  background-size: cover;
}
.article h5 {
  margin-top: 0.5em;
}
.article h6 {
  background: #e3e3e3;
  margin-bottom: 15px;
}

/*--------------------------------------------------------------
freeHtml　会社概要
---------------------------------------------------------------*/
#sideContents {
  margin-top: 80px;
}
#sideContents .freeHtml_body {
  padding: 15px;
}
#sideCompany {
  display: block;
  width: 100%;
  margin: 0 0 30px 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.6;
}
#sideCompany h2.logomark {
  width: 210px;
  height: auto;
  background: url("/materials/177208204845501.png") no-repeat left top /contain;
  margin: 20px auto 10px;
  display: inline-block;
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
  padding: 0;
}
#sideCompany h2.logomark img {
  width: 100%;
  height: auto;
}
#sideCompany table.sideTbl {
  width: 100%;
}
#sideCompany table.sideTbl, #sideCompany table.sideTbl th, #sideCompany table.sideTbl td {
  border: none;
}
#sideCompany table.sideTbl th, #sideCompany table.sideTbl td {
  display: block;
  width: 100%;
}
#sideCompany table.sideTbl th {
  color: #fff;
  background: #49aa11;
}
#sideCompany table.sideTbl td {
  line-height: 1.6;
  padding: 12px 0 18px 0;
}
#sideCompany p.btn-wrap {
  margin: 0 auto;
  text-align: center;
}
#sideCompany a.link-btn {
  width: 100%;
  margin: 1em auto;
  padding: 8px;
  background: #fd7318;
  border-radius: 4px;
  display: block;
  color: #fff;
  letter-spacing: normal;
  text-decoration: none;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  box-shadow: 0 3px #eee;
}
#sideCompany a.link-btn:before {
  font-family: "Font Awesome 5 Free";
    content: "\f105";
    font-weight: bold;
    margin-right: 8px;
}
#sideCompany a.link-btn:hover {
  background: #ef8323;
  color: #fff;
  position: relative;
  top: 3px;
  box-shadow: none;
}
#sideCompany .envelope {
  font-size: 0.85em;
  margin: 20px auto;
    margin-bottom: 20px;
  background: #f6f6f6;
  padding: 10px;
}

/*--------------------------------------------------------------
GoogleMap
---------------------------------------------------------------*/
.gmap-wrap {
  height: 0;
  overflow: hidden;
  padding-bottom: 75%; /*4:3*/
  /*padding-bottom: 56.25%; 16:9*/
  position: relative;
}
.gmap-wrap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

/*--------------------------------------------------------------
リスト check
---------------------------------------------------------------*/
ul.check-plus {
  display: flex;
  flex-direction: column;
  padding: 0 0 1.0em 0;
  position: relative;
}
ul.check-plus li {
  font-size: 1.1em;
  font-weight: 500;
  line-height: 1.5;
  text-align: justify;
  margin-bottom: 1.0em;
  padding: 18px 25px 18px 50px;
  text-indent: -2em;
  background: rgba(255,255,255,0.9);
  position: relative;
}
ul.check-plus li span {
  font-size: 1.05em;
  font-weight: 600;
  color: #c3a131;
}
ul.check-plus li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  font-size: 28px;
  color: #aac737;
  font-weight: bold;
  line-height: 1.0;
  margin-right: 10px;
  vertical-align: -4px;
}

/*--------------------------------------------------------------
利用者の声
---------------------------------------------------------------*/
.article.voice {
  padding-top: 0;
}
.article.voice .article_outer {
  background: #fff;
  padding: 1.2em 1.5em;
  display: flow-root;
}
.article.voice p {
  font-size: 15px;
}
.article.voice p:last-of-type {
  margin-bottom: 0;
}
.article.voice .image, .article.voice .image img {
  max-width: 180px;
}
.article.voice .article_right .image {
  margin-left: 5%;
}
.article.voice .article_left .image {
  margin-right: 5%;
}

/*--------------------------------------------------------------
サイト案内
---------------------------------------------------------------*/
.gallery.guideBtn {
  margin-bottom:60px;
}
.guideBtn .galleryGrid_body .image a {
  display: block;
  padding-bottom: 45px;
}
.guideBtn .galleryGrid_body .comment {
  font-size: 1.1em;
  color: #fff;
  font-weight: 500;
  width: 100%;
  background: linear-gradient(to bottom,  #bbd945 0%, #aac737 100%);
  margin: -40px auto 0 auto;
  padding: 0.3em;
  border-radius: 50vh;
  pointer-events: none;
}
.guideBtn .galleryGrid_body .comment::after {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: bold;
  color: #fff;
  margin-left: 8px;
}

/*--------------------------------------------------------------
table simpleTbl
---------------------------------------------------------------*/
.article table.simpleTbl {
  width: 100%;
  margin-bottom: 30px;
}
.article table.simpleTbl th {
  width: 30%;
  background: #dbebbb;
}
.article table.simpleTbl td {
  background: #fff;
}

/*--------------------------------------------------------------
お問い合わせフォーム
---------------------------------------------------------------*/
#mainArticles table.contactTable, #mainBlogCommentForm_outer table.contactTable {
  background: #fff;
  border-collapse: separate;
  border-spacing: 0;
  border: 18px solid #fff;
}
#mainArticles p.contact-note, #mainBlogCommentForm_outer p.contact-note {
  color: #999;
}

/*--------------------------------------------------------------
ご利用案内
---------------------------------------------------------------*/
.article.guide-flow {
  padding: 20px 30px;
  background: #fff;
  border: 2px solid #49aa11;
  border-radius: 8px;
  position: relative;
}

/*--------------------------------------------------------------
ピクトグラム
---------------------------------------------------------------*/
#pictgram01 h4 {
  padding-top: 30px;
  padding-left: 80px;
  background: url("/materials/177311122468601.png") no-repeat left / 70px;
}
#pictgram02 h4 {
  padding-top: 30px;
  padding-left: 80px;
  background: url("/materials/177310978373901.png") no-repeat left / 70px;
}
#pictgram03 h4 {
  padding-top: 30px;
  padding-left: 80px;
  background: url("/materials/177311146142201.png") no-repeat left / 70px;
}
#pictgram04 h4 {
  padding-top: 30px;
  padding-left: 80px;
  background: url("/materials/177311039153101.png") no-repeat left / 70px;
}
#pictgram05 h4 {
  padding-top: 30px;
  padding-left: 80px;
  background: url("/materials/177311056094901.png") no-repeat left / 70px;
}
#pictgram06 h4 {
  padding-top: 30px;
  padding-left: 80px;
  background: url("/materials/177311390982501.png") no-repeat left / 70px;
}

/*--------------------------------------------------------------
お問い合わせアイコン
---------------------------------------------------------------*/
.article.contact-method .image {
  max-width: 150px;
}

/*-------------
バッジ非表示
---------------*/
.recaptcha_policy {
padding: 0;
margin: 0;
text-align: center;
font-size: 11px !important;
color: #444 !important;
}
.recaptcha_policy a {
font-size: 11px !important;
color: #111 !important;
}
.grecaptcha-badge { visibility: hidden; }
