@charset "UTF-8";
/*
 * 05-common.css … 共通のクラス
 * css/ のファイルは番号の順に全ページで読み込む（functions.php）。後のファイルが優先されるので、番号（順番）を変えないこと
 */

/* ---------------------------------------

	Common setting

--------------------------------------- */
/* Clearfix */
.cf {
  *zoom: 1;
}
.cf:after {
  content: "";
  display: table;
  clear: both;
}

/* スマホ時のみTELリンククリック可能に */
[href^=tel] {
  cursor: default;
  pointer-events: none;
}

@media screen and (max-width: 800px) {
  [href^=tel] {
    pointer-events: auto;
  }
}
/* Swiper スライダー設定 */
.swiper-slide {
  background-position: center;
  background-size: cover;
}

/* ---------------------------------------
	テキスト装飾
--------------------------------------- */
/* リンク */
a:link,
a:visited,
a:active {
  color: var(--cl-main);
}

/* 中央寄せ */
.tac {
  text-align: center !important;
}

/* ちょっと目立たせる必要のある短いテキストに使う */
p.desc-sr {
  text-align: center;
  background: #eee;
  font-size: 1.2em;
  border-radius: 10px;
  margin: 0.5em 0;
  padding: 0.3em 0;
  color: forestgreen;
}
@media screen and (max-width: 800px) {
  p.desc-sr {
    font-size: 0.9em;
  }
}

/* ---------------------------------------
	リスト
--------------------------------------- */
ul.list_s {
  margin: 2em;
  text-align: left;
}
ul.list_s li {
  color: #000;
  text-indent: -1.3em;
  margin-left: 1.5em;
}
ul.list_s li:before {
  font-family: "fontello";
  content: "\f14a";
  margin-right: 0.5em;
  color: var(--cl-main);
}
@media screen and (max-width: 800px) {
  ul.list_s {
    margin: 1em 0;
  }
  ul.list_s li {
    margin-bottom: 0.5em;
    line-height: 1.2;
  }
}

/* ---------------------------------------
	テーブル
--------------------------------------- */
table.link {
  text-align: left;
  border-collapse: collapse;
  border-spacing: 0;
}
table.link th,
table.link td {
  border: 1px solid #999;
}
table.link th {
  background: #eee;
  text-align: center;
}
table.link td {
  font-size: 12px;
}
@media screen and (max-width: 800px) {
  table.link th,
  table.link td {
    font-size: 10px;
    padding: 0.3em;
  }
}

/* テーブルスマホ横スクロール */
@media screen and (max-width: 800px) {
  .wrap_scroll_table {
    overflow-x: scroll;
  }
  .wrap_scroll_table:before, .wrap_scroll_table:after {
    content: "← 横スクロールできます →";
    color: #666;
    font-size: 14px;
  }
  .wrap_scroll_table table {
    width: 180%;
  }
  .wrap_scroll_table table.nowrap td {
    white-space: nowrap;
  }
}

/* ---------------------------------------
	幅設定
--------------------------------------- */
.w55 {
  width: 55% !important;
}
@media screen and (max-width: 800px) {
  .w55 {
    width: 100%;
  }
}

.w20 {
  width: 20% !important;
}
@media screen and (max-width: 800px) {
  .w20 {
    width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.w24 {
  width: 24% !important;
}
@media screen and (max-width: 800px) {
  .w24 {
    width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.w35 {
  width: 35% !important;
}
@media screen and (max-width: 800px) {
  .w35 {
    width: 60% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.w56 {
  width: 56% !important;
}
@media screen and (max-width: 800px) {
  .w56 {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------------------------------------
	画像加工
--------------------------------------- */
img.bright10 {
  filter: brightness(110%);
}
img.bright20 {
  filter: brightness(120%);
}
img.bright30 {
  filter: brightness(130%);
}

/* ---------------------------------------
	マージン
--------------------------------------- */
.mt0 {
  margin-top: 0 !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

/* ---------------------------------------
	Youtube
--------------------------------------- */
/* 動画を囲うdiv */
.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 高さを指定(16:9) */
}
.video p.caption {
  font-size: 14px;
  text-align: center;
}

/* YouTube埋め込み用のiframe */
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 電話番号のリンク（a href="tel:…"）は、マウスで操作する端末（PC）では押せないようにする。
   画面幅ではなく入力方法で判定するので、スマホ・iPad などタッチ操作の端末ではタップで電話できる */
@media (hover: hover) and (pointer: fine) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}