@charset "utf-8";
/*リセットCSS（ress.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/ress/dist/ress.min.css");
/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*全体の設定
---------------------------------------------------------------------------*/
html, body {
  font-size: 16px;
  /*基準となるフォントサイズ。下の方にある「画面幅800px以上」で基準を大きなサイズに変更しています。*/
}

body {
  overflow-x: hidden;
  font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  /*フォント種類*/
  -webkit-text-size-adjust: none;
  background: #fff;
  /*背景色*/
  color: #555;
  /*全体の文字色*/
  line-height: 2;
  /*行間*/
}

/*table全般の設定*/
table {
  border-collapse: collapse;
}

/*画像全般の設定*/
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*section全般の設定*/
section+section {
  padding-top: 30px;
  /*sectionの間に空けるスペース*/
}

/*フォームタグ全般の設定*/
input, textarea, select {
  border: 1px solid #999;
  /*枠線の幅、線種、色*/
  padding: 0 10px;
}

/*ress.cssでselectで矢印が消えてしまうのを戻す*/
select {
  -moz-appearance: menulist;
  -webkit-appearance: menulist;
  appearance: menulist;
}

select::-ms-expand {
  display: block;
  /*IE用*/
}

/*videoタグ*/
video {
  max-width: 100%;
}

/*iframeタグ*/
/*iframe {
  width: 100%;
}*/
/*ulタグ、olタグ*/
ul, ol {
  margin: 0 5px 30px 25px;
  /*上、右、下、左へ空けるスペース*/
}

/*opa1（透明から着色状態に）
---------------------------------------------------------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
  color: #333;
  /*文字色*/
}

a:hover {
  color: #33b50b;
  /*マウスオン時の文字色*/
}

/*container。サイト全体を囲むブロック。
---------------------------------------------------------------------------*/
#container {
  margin: 0 auto;
  max-width: 1280px;
  /*最大幅。これ以上幅が広がらないように。*/
  overflow-x: hidden;
}

/*header。ロゴなどが入った最上段のボックス。
---------------------------------------------------------------------------*/
header {
  /* position: fixed; */
  width: 100%;
  top: 0;
  z-index: 100;
  background: #fff;
  display: flex;
  /*flexボックスを使う指定*/
  flex-direction: column;
  /*子要素を縦並びにする*/
  text-align: center;
  /*テキストをセンタリング*/
  padding: 10px 0;
  /*上下、左右のボックス内の余白*/
}

/*logo画像*/
header #logo {
  width: 200px;
  /*画像の幅*/
  margin: 0 auto;
  /*左右中央に配置する*/
}

/*電話番号*/
header address {
  font-style: normal;
  /*addressタグがデフォルトで斜体なので、通常にする。*/
}

@media screen and (max-width:800px) {
  header address {
    margin: 0 auto;
  }
}

/*電話番号のアイコン（アイコンにはFont Awesomeを使用）*/
header i {
  padding-right: 10px;
  /*右側に空ける余白*/
}

/*address内のspanタグ。受付時間などの行です。*/
header address span {
  font-size: 0.7rem;
  /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

#header-container {
  width: auto;
}

#header-container:after {
  clear: both;
  content: '';
  display: block;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
  /*rem算出をしやすくするために*/
}

address {
  border: hidden;
  padding: 0px;
}

.header-btn {
  display: inline-block;
  float: left;
}

.btn,
a.btn,
button.btn {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 15px 10px 0 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0rem;
  height: 80px;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #e69e15;
  width: auto;
  margin: 0 0 0 auto;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #eebb5c;
}

.big-tel {
  font-size: x-large;
  transform: scale(1, 1.3);
  display: block;
  white-space: nowrap;
}

.small {
  font-size: small;
  float: left;
  white-space: nowrap;
}

.medium {
  font-size: large;
  transform: scale(1, 1.2);
  display: block;
  white-space: nowrap;
}

.btn--blue,
a.btn--blue {
  color: #fff;
  background-color: #0094c6;
  width: auto;
  margin: 0 0 0 auto;
}

.btn--blue:hover,
a.btn--blue:hover {
  color: #fff;
  background: #9addef;
}

.fa-position-left {
  position: absolute;
  top: calc(50% - .5em);
  left: 1rem;
}

/*右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
.btn i {
  padding: 5px 5px 8px 5px;
  /*アイコンとテキストの間に空ける余白*/
  transform: scale(1.5);
  /*アイコン画像を1.5倍にする*/
}

@media screen and (max-width:540px) {
  .big-tel {
    font-size: 18px;
    transform: none;
  }

  .btn,
  a.btn,
  button.btn {
    height: auto;
    padding: 5px 10px;
    display: flex;
  }

  .small {
    display: none;
  }

  .header-btn br {
    display: none;
  }

  .btn i {
    transform: none;
  }

  .medium {
    font-size: 18px;
    transform: none;
  }
}

@media screen and (max-width:360px) {
  .medium {
    display: none;
  }
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
  display: block;
  position: fixed;
  z-index: 100;
  top: 10px;
  /*上からの配置場所*/
  right: 10px;
  /*左からの配置場所*/
  width: 50px;
  /*幅*/
  height: 50px;
  /*高さ*/
  border-radius: 50%;
  background: #0094c6 url(../images/icon_menu.png) no-repeat center top/50px;
  /*背景色、背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
}

/*小さな端末用のメニューが開いた段階の３本バーの設定。×印が出ている状態の設定。*/
#menubar_hdr.close {
  background: #e69e15 url(../images/icon_menu.png) no-repeat center bottom/50px;
  /*背景色、背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
}

/*大きな端末用のメインメニューの設定
---------------------------------------------------------------------------*/
#menubar {
  display: none;
  /*非表示にしておく*/
}

/*小さな端末用のメインメニューの設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#menubar-s {
  display: none;
  /*デフォルトで非表示にしておく*/
  animation-name: opa1;
  /*keyframes.cssで使う@keyframesの指定*/
  animation-duration: 1S;
  /*アニメーションの実行時間*/
  animation-fill-mode: both;
  /*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
  background: #0094c6;
  /*背景色*/
  position: fixed;
  overflow: auto;
  z-index: 99;
  /*fixedはスクロールしても動かない為の指定*/
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding: 50px;
  /*ボックス内の余白。色がついた部分と、メニューがある白いブロックとの差です。*/
  text-align: center;
  /*テキストをセンタリング*/
}

/*nav要素*/
#menubar-s nav {
  height: 100%;
  background: #fff;
  /*背景色。下の「#menubar-s ul」と揃えておいて下さい。*/
  padding: 20px;
  /*ボックス内の余白。メニューにスクロールバーが出た場合に適度な余白をとる為です。*/
  border-radius: 30px;
  /*角を丸くする指定。直角がいいならこの１行を削除。*/
}

/*ul要素。メニュー１個１個を囲む親のボックス。*/
#menubar-s ul {
  margin: 0;
  height: 100%;
  list-style: none;
  padding: 20px;
  /*ボックス内の余白*/
  background: #fff;
  /*背景色。上の「#menubar-s nav」と揃えておいて下さい。*/
  overflow: auto;
  /*中身が高さを超える場合に自動でスクロールを出す設定*/
}

/*メニュー１個あたりの設定*/
#menubar-s li {
  margin-bottom: 20px;
  /*メニュー同士の余白。*/
}

/*リンクテキスト*/
#menubar-s a {
  text-decoration: none;
  display: block;
  color: #333;
  /*文字色*/
  padding: 10px 0;
  /*上下、左右への余白*/
  transition: 0.3s;
  /*0.3秒かけてアニメーションする設定。マウスオン時に影響します。*/
}

/*アイコン画像（アイコンにはFont Awesomeを使用）*/
#menubar-s i {
  display: block;
  /*改行が入るようにblock指定。もし横に並べたいならこの１行を削除し、下のpadding-bottomをpadding-rightに変更すればOK。*/
  padding-bottom: 10px;
  /*テキストとの余白調整*/
  color: #0094c6;
  /*文字色＝アイコン色になります。*/
}

/*英字の装飾テキスト*/
#menubar-s li span {
  display: block;
  font-size: 0.5rem;
  /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
  color: #ccc;
  /*文字色*/
  letter-spacing: 0.2em;
  /*文字間隔を少し広くとる指定。*/
}

/*スクロールバーのカスタマイズ（※対応しているブラウザは限られます）*/
#menubar-s ul::-webkit-scrollbar {
  width: 8px;
  /*スクロールバーの幅*/
}

/*スクロールバー本体（色のついた部分）*/
#menubar-s ul::-webkit-scrollbar-thumb {
  background: #33b50b;
}

/*スクロールバーの背景部分（グレー色の部分）*/
#menubar-s ul::-webkit-scrollbar-track {
  background: #eee;
}

/*共通設定。角を丸くする指定。直角がいいならブロックごと削除。*/
#menubar-s ul::-webkit-scrollbar-thumb,
#menubar-s ul::-webkit-scrollbar-track {
  border-radius: 50px;
  /*ある程度大きければ適当でOKです*/
}

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
  padding: 50px 0px 0px 0px;
  /*上、右、下、左へのボックス内の余白*/
}

/*mainブロック内のh2タグ*/
main h2 {
  padding: 25px 5px 0px 0px;
  /*ボックス内の余白*/
  margin-bottom: 0px;
  /*下に空けるスペース*/
  position: relative;
  /*アニメーションに必要な設定*/
  letter-spacing: 0.1em;
  /*文字間隔を少しだけ広くとる設定*/
  color: #0094c6;
}

/*h2タグのbefor（下線のデフォルトの状態の設定）*/
main h2::before {
  background: #d9d9d9;
  /*線となる背景の色*/
}

/*h2タグのbefor,after 共通設定*/
main h2::before, main h2::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 50%;
  height: 4px;
  /*ラインの高さ*/
}

/*h2タグのafter（アニメーションの初期設定）*/
main h2::after {
  background: #eebb5c;
  /*線となる背景の色*/
  transition: 1s 0.5s;
  /*1sはアニメーションの実行時間は1秒。0.5秒遅れてスタートする指定。*/
  transform: scaleX(0);
  /*幅。最初は0にして見えなくしておく。*/
  transform-origin: left top;
  /*線の出現起点が左からになるように。中央からの出現がよければこの１行削除。*/
}

/*h2タグのアニメーション結果。ライン幅が100%になる。*/
main h2.linestyle::after {
  transform: scaleX(1);
}

.mainNav {
  padding: 0 20px;
}

.mainNav p {
  color: #0094c6;
}

.service {
  height: 650px;
  background-color: rgba(0, 148, 198, 0.1);
  position: relative;
  padding: 0 20px 0 20px;
}

.mainNav-2 p {
  color: #0094c6;
}

.mainNav-3 {
  padding: 0 20px;
}

@media screen and (max-width: 600px) {
  main h3 {
    margin: 0;
    font-size: small;
  }

  .service {
    height: auto;
  }
}

  @media screen and (max-width: 540px) {
.mainNav {
          padding: 155px 20px 0 20px;
          margin-top: 14%
        }
    }
  }

  /*mainブロックのh3タグ*/
  main h3 {
    padding: 5px;
    /*ボックス内の余白*/
    margin-bottom: 30px;
    /*下に空けるスペース*/
    letter-spacing: 0.1em;
    /*文字間隔を少しだけ広くとる設定*/
    /*border-bottom: 1px solid #ccc;/	/*下線の幅、線種、色*/
  }

  @media screen and (max-width: 600px) {
    main h3 {
      margin: 0;
      font-size: small;
    }
  }

  /* トップページ
--------------------------------------------------------------- */
.company-image {
    position: relative;
  }

.company-image p {
    position: absolute;
    font-size: x-large;
    color: #fff;
    top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  }
}

.company-image img {
  width: 100%;
}

.about-txet {
  margin: 0 300px 0 0;
  /*上、左右、下へ空けるスペース*/
}

/*listボックスを囲むボックス*/
.list-container {
  display: ;
  /*flexボックスを使う指定*/
  flex-wrap: wrap;
  /*折り返す指定*/
  justify-content: space-between;
  /*並びかたの種類の指定*/
  padding: 0 5px;
  /*上下、左右へのボックス内の余白*/
  text-align: center;
  margin-top: 30px;
  font-size: xx-large;
  position: relative;
}

@media screen and (max-width: 800px) {
  .list-container {
    font-size: x-large;
  }
}

/*１個あたりのボックス*/
.list {
  width: 49%;
  /*ボックスの幅*/
  margin-bottom: 15px;
  /*ボックス同士の上下間の余白*/
  padding: 10px;
  /*ボックス内の余白*/
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  /*アニメーションにかける時間。0.3秒。*/
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  /*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%ついた状態。*/
  background: #fff;
  /*背景色*/
}

/*マウスオン時にボックスの影を少し濃くする*/
.list:hover {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}

/*リンクテキスト*/
.list a {
  text-decoration: none;
  color: #333;
  /*文字色*/
}

/*ボックス内のh4タグ*/
.list h4 {
  line-height: 1.5;
  /*行間を少し狭くする*/
  color: #0094c6;
  /*文字色*/
  margin: 5px 0;
  /*上下、左右に空けるスペース*/
}

/*ボックス内のpタグ。指定した行数までを表示。*/
.list p {
  margin: 0 !important;
  /*「main p」のマージンをリセットする*/
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /*表示させたい行数。変更する際は、下の「IE対策」の「height」も変更して下さい。*/
  font-size: 0.7rem;
  /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
  line-height: 1.5em;
  /*IE対策。行間。１行あたりの高さの事。1.5文字分。*/
  max-height: 4.5em;
  /*IE対策。最大の高さ。1.5emの3倍の4.5emになっているので、3行分という事。*/
}

/*about us_innner指定*/
.centering-block {
  text-align: left;
  margin-bottom: 20px;
}

.centering-block-inner {
  padding: 30px 0 0;
  background: url(../images/about_us.jpg) no-repeat center top;
  background-size: cover;
  background-position: 90%;
}

.centering-block .about-taxt {
  text-align: center;
  display: inline-block;
  padding-left: 10%;
  box-sizing: border-box;
  width: 60%;
  margin: 6% 0;
}

@media screen and (min-width: 950px) {
  .centering-block .about-taxt {
    font-size: large;
  }
}

@media screen and (max-width: 750px) {
  .centering-block .about-taxt {
    font-size: 14px;
  }
}

@media screen and (max-width: 600px) {
  .centering-block .about-taxt {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    padding: 90px 10px 0 10px;
  }
}

@media screen and (max-width: 400px) {
  .centering-block .about-taxt {
    font-size: 14px;
  }
}

.list-under {
  width: 90%;
  /*ボックスの幅*/
  margin-bottom: 15px;
  /*ボックス同士の上下間の余白*/
  padding: 10px;
  /*ボックス内の余白*/
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  /*アニメーションにかける時間。0.3秒。*/
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  /*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%ついた状態。*/
  background: #fff;
  /*背景色*/
  margin-left: auto;
  margin-right: auto;
  border: 4px solid;
  border-color: #0094c6;
}

.triangle {
  border-top: 30px solid #e69e15;
  border-right: 70px solid transparent;
  border-left: 70px solid transparent;
  width: 50px;
  height: 30px;
  margin: 10px auto;
}

#n1 {
  position: absolute;
  top: -5%;
  left: 75%;
  width: 9vw;
}

@media screen and (max-width: 800px) {
  #n1 {
    display: none
  }

  #n2 {
    display: none
  }

  #n3 {
    display: none
  }

  #n4 {
    display: none
  }

  #n5 {
    display: none
  }
}

#n2 {
  position: absolute;
  top: 20%;
  left: 16%;
  width: 15vw;
}

#n3 {
  position: absolute;
  top: 41%;
  left: 72%;
  width: 15vw;
}

#n4 {
  position: absolute;
  top: 60%;
  left: 13%;
  width: 16vw;
}

#n5 {
  position: absolute;
  top: 80%;
  left: 68%;
  width: 22vw;
}

/*NEW,UPアイコン
---------------------------------------------------------------------------*/
/*NEW,UPアイコン 共通*/
.newicon, .upicon {
  display: inline-block;
  text-align: center;
  padding: 0 5px;
  border-radius: 3px;
  transform: scale(0.7);
}

/*newiconへの追加指定。*/
.newicon {
  background: #f00;
  /*背景色*/
  color: #fff;
  /*文字色*/
}

/*upiconへの追加指定。*/
.upicon {
  background: #257dce;
  /*背景色*/
  color: #fff;
  /*文字色*/
}

/*option帯リボン
---------------------------------------------------------------------------*/
/*option1,option2 共通*/
.option1, .option2 {
  font-size: 0.7rem;
  /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
  display: inline-block;
  width: 200px;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 0px;
  transform: translate(-60px, 20px) rotate(-30deg);
  /*translateは配置場所の指定。rotateは回転。*/
  box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
  /*影*/
}

/*h2タグ内で使った場合のoption1,option2 共通（※CMS用）*/
h2 .option1, h2 .option2 {
  width: auto;
  position: relative;
  transform: translate(0px, -4px) rotate(0deg);
  padding: 5px 20px;
  margin-left: 10px;
}

/*option1への追加指定。*/
.option1 {
  background: #ff0000;
  /*背景色*/
  color: #fff;
  /*文字色*/
}

/*option2への追加指定。*/
.option2 {
  background: #ccc;
  /*背景色*/
  color: #888;
  /*文字色*/
}

/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
  background: #0094c6;
  /*背景色*/
  color: #fff;
  /*文字色*/
  font-size: 0.7rem;
  /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
  padding: 10px 25px;
  /*上下、左右へのボックス内の余白*/
  display: flex;
  /*flexボックスを使う指定*/
  justify-content: center;
  /*並びかたの種類の指定*/
}

/*ボックス内のリンクテキスト設定*/
#footermenu a {
  text-decoration: none;
  color: #fff;
  /*文字色*/
}

/*リンクテキストのマウスオン時*/
#footermenu a:hover {
  color: #ccc;
  /*文字色*/
}

/*ulタグ（列単位）*/
#footermenu ul {
  margin: 0;
  list-style: none;
  align-self: center;
  /*フッターメニューをブロックの上下中央に配置する。上によせたいならこの１行削除。*/
}

/*title*/
#footermenu .title {
  font-weight: bold;
  /*太字にする*/
  color: #ccc;
  /*文字色*/
  padding-bottom: 5px;
  /*下に空けるスペース*/
}

/*フッター右側の装飾画像*/
#footermenu .kazari {
  display: none;
  /*スペースが狭いので飾りを非表示にしておく*/
}

/*フッター設定
---------------------------------------------------------------------------*/
footer small {
  font-size: 100%;
}

footer {
  font-size: 0.6rem;
  /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
  background: #0094c6;
  /*背景色*/
  color: #fff;
  /*文字色*/
  text-align: center;
  /*内容をセンタリング*/
  padding: 20px;
  /*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {
  color: #fff;
  text-decoration: none;
}

/*リンクテキストのマウスオン時*/
footer a:hover {
  color: #fff;
}

/*著作部分*/
footer .pr {
  display: block;
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
  border-top: 1px solid #ccc;
  /*上の枠線の幅、線種、色*/
  font-weight: bold;
  /*太字に*/
  padding: 10px 5px;
  /*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
  background: #fafafa;
  /*背景色*/
}

/*ta1テーブルブロック設定*/
.ta1 {
  border-top: 1px solid #ccc;
  /*テーブルの一番上の線。幅、線種、色*/
  table-layout: fixed;
  width: calc(100% - 10px);
  /*テーブルの両サイドに合計10px（左右各5pxずつ）の余白を作った残りを幅にします*/
  margin: 50px 0 50px 0;
  /*最後の「30px」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
  border-bottom: 1px solid #ccc;
  /*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
  padding: 10px 5px;
  /*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
  word-break: break-all;
  /*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
  width: 30%;
  /*幅*/
  text-align: left;
  /*左よせにする*/
}

/*よく頂く質問
---------------------------------------------------------------------------*/
.faq {
  padding: 0 5px;
  /*上下、左右へのボックス内の余白*/
}

/*質問*/
.faq dt {
  border-radius: 10px;
  /*枠を角丸にする指定*/
  margin-bottom: 20px;
  /*下に空けるスペース*/
  background: linear-gradient(#fff, #f7f7f7);
  /*背景グラデーション*/
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態の事。*/
  text-indent: -54px;
  /*テキストのインデント。Qアイコンだけ左に飛び出るようにする指定。下のpaddingの一番最後の数字と合わせて下さい。※マイナスは取らないで。*/
  padding: 20px 20px 20px 54px;
  /*上、右、下、左への余白。最後の数字と上のtext-indentの数字と揃えておく。text-indentは必ずマイナスをつけた状態で。*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
  font-family: "Font Awesome 5 Free";
  /*Font Awesomeを使う指定*/
  content: "\f059";
  /*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
  color: #33b50b;
  /*アイコンの色*/
  padding: 0 20px;
  /*上下、左右への余白*/
}

/*回答*/
.faq dd {
  padding: 0 40px 30px;
  /*上、左右、下への余白*/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
  cursor: pointer;
  /*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
  display: block;
}

.pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  width: 50px;
  /*幅*/
  line-height: 50px;
  /*高さ*/
  position: fixed;
  right: 30px;
  /*右からの配置場所指定*/
  bottom: 30px;
  /*下からの配置場所指定*/
  color: #fff;
  /*文字色*/
  background: rgba(0, 0, 0, 0.4);
  /*背景色。0,0,0は黒色の指定で0.4は色が40%出た状態。*/
  border: 1px solid #fff;
  /*枠線の幅、線種、色*/
}

/*マウスオン時*/
.pagetop a:hover {
  background: rgba(0, 0, 0, 0.8);
  /*背景色。0,0,0は黒色の指定で0.8は色が80%出た状態。*/
}

/*btnの設定
---------------------------------------------------------------------------*/
/*ボタンを囲むブロック*/
.btn {
  text-align: center;
  /*内容をセンタリング*/
  font-size: 1.2rem;
  /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
  font-family: serif;
}

/*ボタン*/
.btn a,
.btn input {
  display: inline-block;
  text-decoration: none;
  border: none;
  background: #33b50b;
  /*背景色*/
  color: #fff;
  /*文字色*/
  border-radius: 5px;
  /*角丸のサイズ。ほんの少しだけ角が丸くなります。*/
  padding: 5px 10px;
  /*上下、左右へのボタン内の余白*/
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  /*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.2は色が20%ついた状態。*/
}

/*ボタンのマウスオン時*/
.btn a:hover,
.btn input:hover {
  opacity: 0.9;
  /*透明度。0.9は色が90%ついた状態のこと。*/
}

/*詳細ページの画像切り替え（imgchg_pack.js）※一般のhtmlテンプレートで利用。
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image {
  position: relative;
  margin: 0 auto 20px;
  text-align: center;
  width: 100%;
}

/*大きな画像の１行目*/
#item-image #item_image1 {
  z-index: 2;
  position: relative;
  overflow: hidden;
}

/*大きな画像の２行目*/
#item-image #item_image2 {
  z-index: 1;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
}

/*大きな画像のボックスの中の画像*/
#item-image img {
  width: 100%;
}

/*サムネイル画像*/
.thumbnail {
  width: 80px;
  /*画像の幅*/
  border: 1px solid #dcdcdc;
  /*枠線の幅、線種、色*/
  margin-bottom: 5px;
}

.thumbnail:hover {
  border: 1px solid #999;
  /*マウスオン時の枠線の幅、線種、色*/
}

/*こだわりアイコンブロックの設定（※CMS用）
---------------------------------------------------------------------------*/
.specialbox {
  display: inline-block;
}

.specialbox img {
  padding: 2px 0;
  ;
}

/*パノラマ画像のサイズ設定（※CMS用）
---------------------------------------------------------------------------*/
.panorama-img {
  width: 100% !important;
  height: 200px !important;
}

/*テーマカラーの背景色の「注目物件」ボックス
---------------------------------------------------------------------------*/
/*ボックスの設定*/
.bg1 {
  background: #33b50b;
  /*ボックスの背景色*/
  padding: 12px;
  /*ボックス内の余白*/
  border-radius: 5px;
  /*ほんの少し角を丸くする指定*/
  color: #fff;
  /*文字色*/
}

/*ボックス内のリンクテキスト*/
.bg1>a {
  color: #fff;
  /*文字色*/
}

/*ボックス内のh2タグ*/
.bg1 h2 {
  text-align: center;
  /*テキストをセンタリング*/
  margin: 0 !important;
}

/*ボックス内のh2タグのbefor（下線のデフォルトの状態の設定）*/
.bg1 h2::before {
  background: transparent;
  /*線となる背景の色。transparentは透明の事。*/
}

/*ボックス内のh2タグのafter（アニメーションの初期設定）*/
.bg1 h2::after {
  background: #fff;
  /*線となる背景の色*/
  transform-origin: center top;
  /*線の出現起点が中央からになるように。*/
}

/*pickupスライドショーコーナー（slickを使用）
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むボックス*/
.pickup {
  position: relative;
}

/*マウスオン時の設定。
マウスオンでスライドがストップしてしまうので、それがわかりやすいようにopacityを設定しました。
もしマウスオンでストップさせたくない場合は、slick.cssの「//pauseOnHover: false,」の行の冒頭の「//」を外して適用して下さい。*/
.pickup .list:hover figure {
  opacity: 0.8;
  /*透明度。色が80%出た状態。*/
}

/*１個あたりのボックス*/
.pickup .slick-slide {
  margin: 5px !important;
  width: auto;
}

/*ボックス内のh4タグ*/
.pickup .list h4 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /*表示させたい行数。変更する際は、下２行のIE対策も変更して下さい。*/
  line-height: 1.5em;
  /*IE対策。行間。１行あたりの高さの事。1.5文字分。*/
  height: 1.5em;
  /*IE対策。高さ。slick内で高さを統一できなかったので、応急措置でheightのみ指定。*/
}

/*ボックス内のpタグの最大の高さ。
max-heightにするとslick内で高さを統一できなかったので、応急措置でheightのみ指定。
3行分を確保したかったので、1.5emの3倍で本来なら「4.5em」なのですが、
なぜか画面幅によってほんの少しテキストのかけらが見えてしまったので「4.4em」にしました。*/
.pickup .list p {
  height: 4.4em;
}

/*ボックス内の画像*/
.pickup .list img {
  object-fit: cover;
  /*トリミングのタイプ*/
  height: 70px;
  /*画像の高さ。下の方で数カ所再設定があります。*/
  width: 100%;
  /*画像の幅*/
  font-family: 'object-fit: cover;';
  /*IE対策*/
}

/*左右の三角矢印の共通設定*/
.slick-arrow {
  position: absolute;
  bottom: 45%;
  /*下からの配置場所*/
}

/*左右の三角矢印の共通設定。マウスオン時。*/
.slick-arrow:hover {
  cursor: pointer;
  opacity: 0.8;
}

/*左右の三角矢印の形、色、サイズ*/
.slick-prev::after,
.slick-next::after {
  display: block;
  content: "▼";
  /*この形を出力する。このままだと下向き矢印になってしまうので、下の方の設定でそれぞれ90度回転させています。*/
  color: #fff;
  /*三角の色*/
  font-size: 0.8rem;
  /*三角のサイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}

/*左側の三角*/
.slick-prev {
  left: 5px;
  /*左からの配置場所*/
}

/*左側の三角を回転させる指定*/
.slick-prev::after {
  transform: rotate(90deg);
}

/*右側の三角*/
.slick-next {
  right: 5px;
  /*右からの配置場所*/
}

/*右側の三角を回転させる指定*/
.slick-next::after {
  transform: rotate(-90deg);
}

.list-1 {
  position: absolute;
  width: 30%;
  height: 170px;
  top: 5px;
  left: 0%;
  color: #0094c6;
  background-color: #fff;
  border: 4px solid;
  border-color: #0094c6;
  text-align: center;
  box-shadow: 2px 2px 4px gray;
  padding: 8px 10px;
}



.list-1 p {
  text-align: left;
}

.list-2 {
  position: absolute;
  width: 30%;
  height: 170px;
  top: 5px;
  left: 35%;
  color: #0094c6;
  background-color: #fff;
  border: 4px solid;
  border-color: #0094c6;
  text-align: center;
  box-shadow: 2px 2px 4px gray;
  padding: 8px 10px;
}

.list-2 p {
  text-align: left;
}

.list-3 {
  position: absolute;
  width: 30%;
  height: 170px;
  top: 5px;
  left: 70%;
  color: #0094c6;
  background-color: #fff;
  border: 4px solid;
  border-color: #0094c6;
  text-align: center;
  box-shadow: 2px 2px 4px gray;
  padding: 8px 10px;
}

.list-3 p {
  text-align: left;
}

.list-4 {
  position: absolute;
  width: 30%;
  height: 170px;
  top: 200px;
  left: 18%;
  color: #0094c6;
  background-color: #fff;
  border: 4px solid;
  border-color: #0094c6;
  text-align: center;
  box-shadow: 2px 2px 4px gray;
  padding: 8px 10px;
}

.list-4 p {
  text-align: left;
}

.list-5 {
  position: absolute;
  width: 30%;
  height: 170px;
  top: 200px;
  left: 53%;
  color: #0094c6;
  background-color: #fff;
  border: 4px solid;
  border-color: #0094c6;
  text-align: center;
  box-shadow: 2px 2px 4px gray;
  padding: 8px 10px;
}

.list-5 p {
  text-align: left;
}

.list-1 h4 {
  background: url(../images/塗装クロ.png) no-repeat left center;
  padding: 0 0 0 40%;
  text-align: left;
  background-size: auto;
  line-height: 30px;
  background-position: 29%;
}

.list-2 h4 {
  background: url(../images/リフォームクロ.png) no-repeat left center;
  padding: 0 0 0 40%;
  text-align: left;
  background-size: auto;
  line-height: 30px;
  background-position: 29%;
}

.list-3 h4 {
  background: url(../images/家具クロ.png) no-repeat left center;
  padding: 0 0 0 30%;
  text-align: left;
  background-size: auto;
  line-height: 30px;
  background-position: 17%;
}

.list-4 h4 {
  background: url(../images/オール電化クロ.png) no-repeat left center;
  padding: 0 0 0 30%;
  text-align: left;
  background-size: auto;
  line-height: 30px;
  background-position: 17%;
}

.list-5 h4 {
  background: url(../images/清掃クロ.png) no-repeat left center;
  padding: 0 0 0 45%;
  text-align: left;
  background-size: auto;
  line-height: 30px;
  background-position: 29%;
}

@media screen and (min-width: 1001px){
.list-1 img {
  display: none;
}
.list-2 img {
  display: none;
}
.list-3 img {
  display: none;
}
.list-4 img {
  display: none;
}
.list-5 img {
  display: none;
}
}
@media screen and (min-width:601px) and (max-width: 1000px){
.list-1{
  height: 210px;
}

.list-1 h4 {
  background: none;
text-align: center;
padding: 0;
}
.list-1 img {
  display: block;
  margin: 0 auto;
  width: 15%;
}
.list-2{
  height: 210px;
}

.list-2 h4 {
  background: none;
text-align: center;
padding: 0;
}
.list-2 img {
  display: block;
  margin: 0 auto;
  width: 15%;
}
.list-3{
  height: 210px;
}

.list-3 h4 {
  background: none;
text-align: center;
padding: 0;
}
.list-3 img {
  display: block;
  margin: 0 auto;
  width: 15%;
}
.list-4{
  height: 210px;
  top: 230px;
}

.list-4 h4 {
  background: none;
text-align: center;
padding: 0;
}
.list-4 img {
  display: block;
  margin: 0 auto;
  width: 15%;
}
.list-5{
  height: 210px;
  top: 230px;
}

.list-5 h4 {
  background: none;
text-align: center;
padding: 0;
}
.list-5 img {
  display: block;
  margin: 0 auto;
  width: 15%;
}
}

@media screen and (max-width: 800px) {
  .list-1 p {
    font-size: small;
  }

  .list-2 p {
    font-size: small;
  }

  .list-3 p {
    font-size: small;
  }

  .list-4 p {
    font-size: small;
  }

  .list-5 p {
    font-size: small;
  }
}

@media screen and (max-width: 700px) {
  .list-1 h4 {
    font-size: small;
  }

  .list-2 h4 {
    font-size: small;
  }

  .list-3 h4 {
    font-size: small;
  }

  .list-4 h4 {
    font-size: small;
  }

  .list-5 h4 {
    font-size: small;
  }
}

@media screen and (max-width: 600px) {
  .list-1 {
    position: static;
    width: 100%;
    height: auto;
    padding-left: 10px;
    padding: 0 15px;
    margin: 10px 0;
  }

  .list-2 {
    position: static;
    width: 100%;
    height: auto;
    padding-left: 10px;
    padding: 0 15px;
    margin: 10px 0;
  }

  .list-3 {
    position: static;
    width: 100%;
    height: auto;
    padding-left: 10px;
    padding: 0 15px;
    margin: 10px 0;
  }

  .list-4 {
    position: static;
    width: 100%;
    height: auto;
    padding-left: 10px;
    padding: 0 15px;
    margin: 10px 0;
  }

  .list-5 {
    position: static;
    width: 100%;
    height: auto;
    padding-left: 10px;
    padding: 0 15px;
    margin: 10px 0;
  }
  .list-1 img {
    display: none;
  }

  .list-2 img {
    display: none;
  }

  .list-3 img {
    display: none;
  }

  .list-4 img {
    display: none;
  }

  .list-5 img {
    display: none;
  }
}

/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/
.mainimg {
  position: relative;
  padding: 0 !important;
  height: 35vw;
}

#image-6 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: fadein-anim 2s linear forwards
}

#image-5 {
  position: absolute;
  top: 5%;
  left: 16%;
  width: 65%;
}

#image-4 {
  position: absolute;
  top: 10%;
  left: 37%;
  opacity: 0;
  width: 3.5vw;
  animation: fadein-anim 3s linear forwards
}

.small-4 {
  position: absolute;
  width: 17%;
  height: 29%;
  top: 47%;
  left: 10%;
  padding: 0.5em 1em;
  margin: 2em 0;
  color: #fff;
  background: rgba(0, 148, 198, 0.5);
  /*背景色*/
  text-align: center;
}

.small-4 p {
  margin-top: 6vw;
  padding: 0;
  font-size: 1.3vw;
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
}

#image-3 {
  position: absolute;
  top: 10%;
  left: 37%;
  opacity: 0;
  width: 3.5vw;
  animation: fadein-anim 3s linear forwards
}

.small-3 {
  position: absolute;
  width: 17%;
  height: 29%;
  top: 47%;
  left: 32%;
  padding: 0.5em 1em;
  margin: 2em 0;
  color: #fff;
  background: rgba(0, 148, 198, 0.5);
  /*背景色*/
  text-align: center;
}

.small-3 p {
  margin-top: 6vw;
  padding: 0;
  font-size: 1.3vw;
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
}

#image-2 {
  position: absolute;
  top: 10%;
  left: 37%;
  opacity: 0;
  width: 3.5vw;
  animation: fadein-anim 3s linear forwards
}

.small-2 {
  position: absolute;
  width: 17%;
  height: 29%;
  top: 47%;
  left: 53%;
  padding: 0.5em 1em;
  margin: 2em 0;
  color: #fff;
  background: rgba(0, 148, 198, 0.5);
  /*背景色*/
  text-align: center;
  line-height: 1.2
}

.small-2 p {
  margin-top: 6vw;
  padding: 0;
  font-size: 1.3vw;
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
}

#image-1 {
  position: absolute;
  top: 10%;
  left: 37%;
  opacity: 0;
  width: 3.5vw;
  animation: fadein-anim 3s linear forwards
}

.small-1 {
  position: absolute;
  width: 17%;
  height: 29%;
  top: 47%;
  left: 74%;
  padding: 0.5em 1em;
  margin: 2em 0;
  color: #fff;
  background: rgba(0, 148, 198, 0.5);
  /*背景色*/
  text-align: center;
}

.small-1 p {
  margin-top: 6vw;
  padding: 0;
  font-size: 1.3vw;
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
}

@media screen and (max-width: 660px) {
  .small-1 {
    width: 20%;
    height: 34%;
  }

  .small-2 {
    width: 20%;
    height: 34%;
  }

  .small-3 {
    width: 20%;
    height: 34%;
  }

  .small-4 {
    width: 20%;
    height: 34%;
  }
}

@keyframes fadein-anim {
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media screen and (max-width: 540px) {
  #image-5 {
    position: absolute;
    top: 30%;
    left: 10%;
    width: 80%;
  }

  #image-1 {
    width: 9vw;
  }

  #image-2 {
    width: 9vw;
  }

  #image-3 {
    width: 9vw;
  }

  #image-4 {
    width: 9vw;
  }

  .small-1 {
    width: 40%;
    height: 60%;
    background-color: #0094c6;
    top: 112%;
    left: 7%;
  }

  .small-2 {
    width: 40%;
    height: 60%;
    background-color: #0094c6;
    top: 112%;
    left: 55%;
  }

  .small-3 {
    width: 40%;
    height: 60%;
    background-color: #0094c6;
    top: 188%;
    left: 7%;
  }

  .small-4 {
    width: 40%;
    height: 60%;
    background-color: #0094c6;
    top: 188%;
    left: 55%;
  }

  .small-1 p {
    margin-top: 11vw;
    font-size: 3vw;
  }

  .small-2 p {
    margin-top: 11vw;
    font-size: 3vw;
  }

  .small-3 p {
    margin-top: 11vw;
    font-size: 3vw;
  }

  .small-4 p {
    margin-top: 11vw;
    font-size: 3vw;
  }
}

/*マウスオン時の設定。
マウスオンでスライドがストップしてしまうので、それがわかりやすいようにopacityを設定しました。
もしマウスオンでストップさせたくない場合は、slick.cssの「//pauseOnHover: false,」の行の冒頭の「//」を外して適用して下さい。*/
/* .mainimg:hover {
  opacity: 0.8;
  /*透明度。色が80%出た状態。*/
}

*/

/*丸いページナビボタン全体を囲むブロック*/
.slick-dots {
  text-align: center;
  width: 100%;
  margin: 0;
  line-height: 1;
  position: absolute;
  bottom: 10px;
  /*下からの配置場所指定*/
}

/*丸いページナビボタン１個あたりの設定*/
.slick-dots li {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
}

/*buttonタグ*/
.slick-dots li button {
  display: block;
  text-indent: -9999px;
  /*デフォルトで文字が出るので画面の外に追い出す指定*/
  width: 12px;
  /*ボタンの幅*/
  height: 12px;
  /*ボタンの高さ*/
  border-radius: 50%;
  /*丸くする指定*/
  cursor: pointer;
  /*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
  background: #fff;
  /*背景色。白。*/
}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
.slick-dots li.slick-active button {
  background: #0094c6;
  /*色*/
}

/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
#new {
  display: flex;
  /*flexボックスを使う指定*/
  flex-wrap: wrap;
  /*折り返す指定*/
  padding: 0 5px;
  /*上下、左右へのボックス内の余白*/
}

/*日付(dt)、記事(dd)共通設定*/
#new dt,
#new dd {
  border-bottom: 1px solid #ccc;
  /*下線の幅、線種、色*/
  padding: 5px 0;
  /*上下、左右へのボックス内の余白*/
}

/*日付(dt)設定*/
#new dt {
  width: 8em;
  /*幅。8文字(em)分。※下の「800px以上」の端末用の設定に再設定があります。*/
}

/*日付の横のマーク（共通設定）*/
#new dt span {
  display: none;
  /*小さな端末では非表示にしておく。*/
}

/*bg1設定。サンプルテンプレートでは「賃貸物件」と書いてあるマーク*/
#new dt span.icon-bg1 {
  background: #386091;
  /*背景色*/
}

/*bg2設定。サンプルテンプレートでは「売買物件」と書いてあるマーク*/
#new dt span.icon-bg2 {
  background: #91384d;
  /*背景色*/
}

/*記事(dd)設定*/
#new dd {
  width: calc(100% - 8em);
  /*「8em」は上の「#new dt」のwidthの値です。※下の「800px以上」の端末用の設定に再設定があります。*/
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.color-theme, .color-theme a {
  color: #33b50b !important;
}

.color-check, .color-check a {
  color: #f00 !important;
}

.c {
  text-align: center !important;
}

.ws {
  width: 95%;
  display: block;
}

.wl {
  width: 95%;
  display: block;
}

.large {
  font-size: 2rem;
}

.mb30 {
  margin-bottom: 30px !important;
}

.look {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 5px 20px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 5px;
  margin: 5px 0;
}

.ofx {
  overflow-x: hidden;
}

/*---------------------------------------------------------------------------
ここから下は画面幅480px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:480px) {

  /*ボックス内の画像*/
  .pickup .list img {
    height: 120px;
    /*画像の高さ*/
  }

  /*　※注意！　下の閉じカッコ　}　は480px以上の設定に必要なので、うっかり削除しないように。　*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {

  /*ボックス内の画像*/
  .pickup .list img {
    height: 160px;
    /*画像の高さ*/
  }

  /*　※注意！　下の閉じカッコ　}　は600px以上の設定に必要なので、うっかり削除しないように。　*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅800px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:800px) {

  /*全体の設定
---------------------------------------------------------------------------*/
  /* html, body {
    font-size: 18px;
    /*基準となるフォントサイズの上書き*/
  /* } */
  /*section全般の設定*/
  section+section {
    padding-top: 50px;
    /*sectionの間に空けるスペース*/
  }

  /*header。ロゴなどが入った最上段のボックス。
---------------------------------------------------------------------------*/
  header {
    flex-direction: row;
    /*子要素を横並びにする*/
    justify-content: space-between;
    /*並びかたの種類の指定*/
    align-items: center;
    /*垂直揃えの指定。上下中央に配置されるように。*/
    padding: 20px 40px 20px 20px;
    /*ボックス内の余白*/
  }

  /*logo画像*/
  header #logo {
    width: 300px;
    /*画像の幅*/
    margin: 0;
    /*中央から左に戻る為の設定*/
  }

  /*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
  /*３本バーブロック*/
  #menubar_hdr {
    display: none;
    /*非表示にする*/
  }

  /*大きな端末用のメインメニューの設定
---------------------------------------------------------------------------*/
  /*ボックス全体の設定*/
  #menubar {
    display: block;
    /*表示させる*/
  }

  /*ul要素。メニュー１個１個を囲む親のボックス。*/
  #menubar ul {
    margin: 0;
    list-style: none;
    display: flex;
    /*flexボックスを使う指定*/
    justify-content: space-around;
    /*並びかたの種類の指定*/
    line-height: 1.5;
    /*行間を少しだけ狭く*/
  }

  /*メニュー１個あたりの設定*/
  #menubar li {
    flex: 1;
    /*それぞれのメニューが幅一杯に広がるように*/
    text-align: center;
    /*テキストをセンタリング*/
    position: relative;
  }

  #menubar li {
    position: relative;
    float: left;
    width: calc(100% / 5);
    list-style-type: none;
    padding: 0px 0px;
    text-align: center;
  }

  #menubar li .line-right {
    display: block;
    position: absolute;
    top: 15px;
    right: 0;
    width: 1.5px;
    height: 45px;
    background-color: #fff;
  }

  /*ラインアニメーションの設定*/
  #menubar li::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 5px;
    background: #9addef;
    /*線となる背景の色*/
    transition: 0.3s;
    /*アニメーションの実行時間は0.3秒。*/
    transform: scaleX(0);
    /*幅。最初は0にして見えなくしておく。*/
    transform-origin: center top;
    /*線の出現起点が左からになるように。中央からの出現がよければこの１行削除。*/
  }

  /*アニメーション結果。ライン幅が100%になる。*/
  #menubar li:hover::before {
    transform: scaleX(1);
  }

  /*リンクテキスト*/
  #menubar li a {
    text-decoration: none;
    display: block;
    background: #0094c6;
    /*背景色*/
    color: #fff;
    /*文字色*/
    padding: 17px 0px 17px 0px;
    /*上、右、下、左への余白*/
  }

  /*マウスオン時*/
  #menubar li a:hover {
    background: #9addef;
    /*背景色*/
  }

  /*アイコン画像（アイコンにはFont Awesomeを使用）*/
  #menubar i {
    display: block;
    /*改行が入るようにblock指定。もし横に並べたいならこの１行を削除し、下のpadding-bottomをpadding-rightに変更すればOK。*/
    padding-bottom: 10px;
    /*アイコンの下に空ける余白*/
    color: #fff;
    /*文字色＝アイコン色になります。*/
    opacity: 0.7;
    /*透明度。0.7は色が70%出た状態の事。*/
  }

  /*アイコンのマウスオン時*/
  #menubar li:hover i {
    transition: 0.3s;
    /*アニメーション時間。0.3秒。*/
    transform: scale(1.15);
    /*サイズを1.15倍にする。*/
    opacity: 1;
    /*透明度。1は色が100%出た状態。*/
  }

  /*spanタグ（装飾用のテキスト）*/
  #menubar span {
    display: block;
    font-size: 0.5rem;
    /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
    opacity: 0.6;
    /*透明度。0.6は60%色が出た状態。*/
    letter-spacing: 0.2em;
    /*文字間隔を少しだけ広くとる指定*/
  }

  /* mainブロック設定
---------------------------------------------------------------------------*/
  /*mainブロックの設定*/
  /* main {
    padding: 50px; */
  /*ボックス内の余白 */
}

/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
  font-size: 0.8rem;
  /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
  padding: 20px 55px;
  /*上下、左右へのボックス内の余白*/
  box-sizing: border-box;
}

#footermenu .footermenu {
  display: flex;
  text-align: left;
}

@media screen and (max-width: 800px) {
  #footermenu .footermenu {
    display: block;
  }
}

/*フッター右側の装飾画像*/
#footermenu .footer_left {
  box-sizing: border-box;
  text-align: left;
  height: 300px;
  font-size: 16px;
}

@media screen and (max-width: 800px) {
  #footermenu .footer_left {
    text-align: center;
    height: 260px;
  }
}

#footermenu .kazari {
  display: block;
  /*非表示から表示に。*/
  max-width: 300px;
  /*画像の最大幅。これ以上大きくならないように。*/
  margin: 0 0 15PX 0;
}

@media screen and (max-width: 800px) {
  #footermenu .kazari {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

#footermenu .tel {
  font-size: 21px;
  font-weight: bold;
  border: solid 2px skyblue;
  padding: 2px 30px 0px 10px;
  transform: scale(1, 1.3);
}

@media screen and (max-width: 800px) {
  #footermenu .tel {
    font-size: 21px;
  }
}

#footermenu .telphone {
  margin: 0 0 15px 0;
  transform: scale(1, 1.3);
  white-space: nowrap
}

#footermenu .inquiry {
  white-space: nowrap
}

#footermenu .mail {
  font-size: 21px;
  font-weight: bold;
  border: solid 2px skyblue;
  padding: 5px 10px 5px 10px;
  margin: 10px 0 10px 0;
}

@media screen and (max-width: 800px) {
  #footermenu .mail {
    font-size: 21px;
  }
}

#footermenu .icoation {
  margin: 15px 0 0 0;
  font-size: larger;
  line-height: 1.5;
}

@media screen and (max-width: 800px) {
  #footermenu .icoation {
    font-size: 16px;
  }
}

#footermenu .line {
  margin: 0 7rem;
  width: 4px;
  background-color: #fff;
}

#footermenu .footer_right {
  box-sizing: border-box;
  text-align: right;
  margin: 0 auto;
  height: 300px:
}

@media screen and (max-width: 800px) {
  #footermenu .kazari {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

.fa-phone {
  padding: 5px 15px 5px 5px;
}

.fa-envelope {
  padding: 5px 15px 5px 5px;
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
  padding: 20px 15px;
  /*上下、左右へのボックス内の余白*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
  padding: 20px 15px;
  /*上下、左右へのボックス内の余白*/
}

/*th（左側）のみの設定*/
.ta1 th {
  width: 20%;
  /*幅*/
}

/*よく頂く質問
---------------------------------------------------------------------------*/
/*質問*/
.faq dt {
  text-indent: -58px;
  /*テキストのインデントの調整*/
  padding: 20px 20px 20px 58px;
  /*余白の調整*/
}

/*listブロック設定
---------------------------------------------------------------------------*/
/*１個あたりのボックス*/
.list {
  width: 23%;
  /*ボックスの幅*/
  margin-bottom: 25px;
  /*ボックス同士の上下間の余白*/
}

/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*日付(dt)設定*/
#new dt {
  width: 14em;
  /*幅。14文字(em)分。*/
  display: flex;
  /*flexボックスを使う指定*/
  justify-content: space-between;
  /*日付とアイコンをそれぞれ端に寄せる*/
}

/*日付の横のマーク（共通設定）*/
#new dt span {
  display: inline-block;
  /*表示させる、*/
  width: 6em;
  /*幅。6文字(em)分。*/
  background: #999;
  /*背景色*/
  color: #fff;
  /*文字色*/
  font-size: 0.9rem;
  /*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
  text-align: center;
  /*文字をセンタリング*/
  border-radius: 3px;
  /*角を少しだけ丸くする*/
  margin-right: 1.2em;
  /*アイコンの右側に空けるスペース*/
  align-self: flex-start;
  /*高さを間延びさせない指定*/
  line-height: 1.5;
  /*行間を少し狭く*/
  position: relative;
  top: 0.4em;
  /*上下の配置バランスの微調整*/
}

/*記事(dd)設定*/
#new dd {
  width: calc(100% - 14em);
  /*「14em」は上の「#new dt」のwidthの値です。*/
}

/*btnの設定
---------------------------------------------------------------------------*/
/*ボタン*/
.btn a {
  padding: 15px 40px;
  /*上下、左右へのボタン内の余白*/
  letter-spacing: 0.1em;
  /*文字間隔を少しだけ広く*/
}

/*右側の矢印アイコン（アイコンにはFont Awesomeを使用）*/
/* .btn i {
    padding-left: 20px; */
/*アイコンとテキストの間に空ける余白*/
}

/*詳細ページの画像切り替え（imgchg_pack.js）※一般のhtmlテンプレートで利用。
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image {
  width: 80%;
}

/*パノラマ画像のサイズ設定（※CMS用）
---------------------------------------------------------------------------*/
.panorama-img {
  height: 500px !important;
}

/*pickupスライドショーコーナー（slickを使用）
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むボックス*/
.pickup {
  padding: 20px;
  /*ボックス内の余白*/
}

/*１個あたりのボックス*/
.pickup .slick-slide {
  margin: 10px !important;
}

/*ボックス内の画像*/
.pickup .list img {
  height: 100px;
  /*画像の高さ*/
}

/*その他
---------------------------------------------------------------------------*/
.ws {
  width: 45%;
  display: inline-block;
}

/*　※注意！　下の閉じカッコ　}　は800px以上の設定に必要なので、うっかり削除しないように。　*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅1000px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1000px) {

  /*ボックス内の画像*/
  .pickup .list img {
    height: 150px;
    /*画像の高さ*/
  }

  html, body {
    font-size: 16px;
    /*基準となるフォントサイズの上書き*/
  }

  /*　※注意！　下の閉じカッコ　}　は1000px以上の設定に必要なので、うっかり削除しないように。　*/
}

/*会社概要
-------------------------------------------------------------------------*/
.icon-ma-ku:before {
  content: "\e900";
  color: #de9a20;
}

.company {
  background-color: rgba(0, 148, 198, 0.1);
  height: auto;
  padding: 0 20px 30px 20px;
}

.ta1 th, td {
  border: solid 2.5px;
  /* 枠線指定 */
  border-color: #0094c6;
}

.ta1 {
  border-collapse: collapse;
  /* セルの線を重ねる */
}

.ta1 th {
  width: 30%;
  /* 幅指定 */
  height: 80px;
  /* 高さ指定 */
  text-align: center;
}

.mark {
  text-align: center;
  display: block;
}

.mark .text {
  background: url(../images/ma-ku.png) no-repeat;
  padding: 30px 0 30px 250px;
  background-size: 30%;
  line-height: 40px;
  text-align: left;
  display: inline-block;
  font-size: 120%;
  width: 60%;
}


.mark  .text br {display: none;}

@media screen and (min-width: 1001px){
.px-mark img {
  display: none;
}
}
@media screen and (max-width: 1000px){
    .mark .text{
  background: none;
width: 80%;
padding: 10px;}
.px-mark img {
  display: block;
  margin: 0 auto;
  width: 20%;
}
}
@media screen and (max-width: 540px){
.px-mark img {
  width: 30%
}
.mark  .text{

}
.company-image img {
  height: 90px
}
}



/* 事業内容
---------------------------------------------------------------------- */
.syokai {
  text-align: center;
  display: block;
  padding: 0 0 50px 0;
}

.syokai .text {
  text-align: left;
  display: inline-block;
  font-size: larger;
  padding: 30px 0;
  width: 70%;
}

.kagu {
  background-color: rgba(0, 148, 198, 0.1);
  height: auto;
  padding: 0 20px;
}

.kagurinobe {
  background: url(../images/家具青.png) no-repeat left center;
  padding: 20px 0 20px 80px;
  background-size: contain;
  line-height: 40px;
  text-align: left;
  background-size: 50px;
  line-height: 30px;
}

.tosou {
  background-color: rgba(0, 148, 198, 0.1);
  height: auto;
  padding: 0 20px;
}

.tosoukouozi {
  background: url(../images/塗装青.png) no-repeat left center;
  padding: 20px 0 20px 80px;
  background-size: contain;
  line-height: 40px;
  text-align: left;
  background-size: 50px;
  line-height: 30px;
}

.seisou {
  background-color: rgba(0, 148, 198, 0.1);
  height: auto;
  padding: 0 20px;
}

.seisouh2 {
  background: url(../images/清掃青.png)no-repeat left center;
  padding: 20px 0 20px 80px;
  background-size: contain;
  line-height: 40px;
  text-align: left;
  background-size: 50px;
  line-height: 30px;
}

.white {
  padding: 0 20px;
}

.refome {
  background: url(../images/リフォーム青.png) no-repeat left center;
  padding: 20px 0 20px 80px;
  background-size: contain;
  line-height: 40px;
  text-align: left;
  background-size: 50px;
  line-height: 30px;
}

.alldenka {
  background: url(../images/オール電化青.png) no-repeat left center;
  padding: 20px 0 20px 80px;
  background-size: contain;
  line-height: 40px;
  text-align: left;
  background-size: 50px;
  line-height: 30px;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.flex p {
  margin: 10px;
  padding: 10px 10px 10px 70px;
  font-size: larger;
  width: 45%;
}

.flex .image {
  width: 500px;
  /*画像サイズ指定*/
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

.flex .image::before {
  content: "";
  display: block;
  padding-top: 58%;
}

.flex .image img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

@media screen and (max-width: 800px){
  .flex {display: block;
  text-align: center;
height: auto;
}
  .flex .image {margin:0 10px;
  width: auto;}
  .flex .image img {
  width: 80%;
  }
  .flex p {
    margin: 0 auto;
    padding: 10px 20px;
    width: 70%;
  }
}
@media screen and (max-width: 540px){
  .flex p{width: 90%;
  font-size: 16px;}
  .syokai .text{
    padding: 0;
  }
}