@charset "UTF-8";
/*----------------------------------------------------
基本設定
----------------------------------------------------*/
/*----------------------------------------------------
.inner 余白 設定
----------------------------------------------------*/
/*----------------------------------------------------
//ベースフォントサイズ
----------------------------------------------------*/
/*----------------------------------------------------
transition
----------------------------------------------------*/
/* ホバー変更はやさ*/
/*----------------------------------------------------
mixinで、cssアニメーションを変数で指定できるようにするのに使う
----------------------------------------------------*/
/* インクルードする際はこんなふうに使う */
/* アニメーション名を指定する */
/*----------------------------------------------------
中央寄せ
----------------------------------------------------*/
/* 上下左右中央寄せ */
/* 上下中央寄せ */
/* 左右中央寄せ */
/*----------------------------------------------------
ホバーすると画像が拡大される( 擬似要素でカバーされている )
aタグに、mixinをつけてあげて、hoverアクションをつける

サンプル例：
<a href="">
  <div class="wrapImg">
    <span><img src="<?php echo get_template_directory_uri(); ?>/assets/images/top/mainvisual_pc.jpg" alt=""></span>
  </div>
</a>
----------------------------------------------------*/
/*----------------------------------------------------
リストマーカー
----------------------------------------------------*/
/*----------------------------------------------------
よく使う小技
----------------------------------------------------*/
/* ボックス影 */
/* 反転*/
/* 文字幅が指定幅を超えたときに「...」を表示する */
/* 親要素よりも幅を超えて画面いっぱいに表示するとき */
/* iconを横にぐるっと回転 */
/*----------------------------------------------------
======================================================
mixin-疑似要素
======================================================
----------------------------------------------------*/
/*----------------------------------------------------
======================================================
mixin-テキストホバー
======================================================
----------------------------------------------------*/
/*----------------------------------------------------
テキストホバーで線を表示する

//html例：<p>テキスト<a href="" class="link_text"><span>こちら</span></a>テキス</p>
spanタグにhoverしたときに線画出るようにしている。

----------------------------------------------------*/
/* ホバーで下線が左に消える */
/* ホバーで左から右に線が出る */
/* ホバーで中央から線が出る */
/* ホバーで中央の線がきえる */
/*----------------------------------------------------
フェードイン
----------------------------------------------------*/
/*----------------------------------------------------
上下左右に消える
----------------------------------------------------*/
/* 下にスッと消える*/
/* 上にスッと消える*/
/*----------------------------------------------------
======================================================
mixin-font
======================================================
----------------------------------------------------*/
/*----------------------------------------------------
フォント設定
----------------------------------------------------*/
/*----------------------------------------------------
フォント
----------------------------------------------------*/
/*----------------------------------------------------
google font
----------------------------------------------------*/
.footer_section {
  margin-top: 50px;
  margin-bottom: 100px;
}

/*----------------------------------------------------
footer
----------------------------------------------------*/
#footer .copyright {
  text-align: center;
  padding: 22px 0;
  background-color: #E7EDD9;
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  /* 751- */
}
@media all and (min-width: 751px) {
  #footer .copyright {
    padding: 29px 0;
    font-size: 12px;
    letter-spacing: 0.06em;
    line-height: 1.6667;
  }
}

body {
  /* for iOS スマホを横向きにした際に文字が大きくならなくする https://qiita.com/Sen-Din/items/3553de9cf34358f3e2e0*/
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 14px;
  letter-spacing: 0.05em;
  font-weight: 400;
  color: #363636;
  background-color: #FCF4D5;
  font-family: "Noto Sans JP", "Helvetica Neue", "Arial", YuGothic, "游ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  /* 751- */
}
@media all and (min-width: 751px) {
  body {
    font-size: 16px;
  }
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

a img {
  border: none;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

figure {
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

ul, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

input, label, select, textarea {
  vertical-align: middle;
}

/*----------------------------------------------------
フッター
----------------------------------------------------*/
.footConts {
  text-align: center;
  max-width: 50%;
  margin: 0 auto;
  padding-top: 84px;
  padding-bottom: 30px;
  /* 751- */
}
.footConts p {
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 1.6667;
  padding-top: 38px;
  color: #000;
}
@media all and (min-width: 751px) {
  .footConts {
    max-width: 193px;
  }
}

/*----------------------------------------------------
js スクロール時の動き
----------------------------------------------------*/
.boxOpacity {
  opacity: 0;
}

/* 下からフワッと出てくる */
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/*----------------------------------------------------
inner
----------------------------------------------------*/
/* ベース */
.inner {
  padding: 0 20px;
  /* 751- */
  /* innerの幅 */
}
@media all and (min-width: 751px) {
  .inner {
    padding: 0 70px;
  }
}
@media all and (min-width: 1081px) {
  .inner {
    margin: 0 auto;
    max-width: 1080px;
    padding: 0;
  }
}

/*----------------------------------------------------
クリック無効化と透過
----------------------------------------------------*/
.is_opacity {
  pointer-events: none;
  opacity: 0;
}

/*----------------------------------------------------
表示 非表示
----------------------------------------------------*/
.hide {
  display: none;
}

.opacity {
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.forSP {
  /* -750 */
  /* 751- */
}
@media all and (max-width: 750px) {
  .forSP {
    display: block;
  }
}
@media all and (min-width: 751px) {
  .forSP {
    display: none;
  }
}

.forPC {
  /* -750 */
  /* 751- */
}
@media all and (max-width: 750px) {
  .forPC {
    display: none;
  }
}
@media all and (min-width: 751px) {
  .forPC {
    display: block;
  }
}

/*----------------------------------------------------
改行 表示非表示
----------------------------------------------------*/
.brsp {
  display: block;
  /* 751- */
}
@media all and (min-width: 751px) {
  .brsp {
    display: none;
  }
}

.brpc {
  display: none;
  /* 751- */
}
@media all and (min-width: 751px) {
  .brpc {
    display: block;
  }
}

/*----------------------------------------------------
section タイトル
----------------------------------------------------*/
.secTitle {
  margin-bottom: 50px;
}
.secTitle h2 {
  font-size: 30px;
  letter-spacing: 0.05em;
  line-height: 1.8;
  text-align: center;
  font-weight: bold;
  margin-bottom: 40px;
}
.secTitle h2 span {
  position: relative;
}
.secTitle h2 span::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 50%;
  background-color: #265DAA;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: -20px;
}
.secTitle p {
  text-align: center;
}

/*----------------------------------------------------
各ページタイトル
----------------------------------------------------*/
.pageTitle {
  margin-bottom: 50px;
  text-align: center;
  /* 751- */
}
@media all and (min-width: 751px) {
  .pageTitle {
    margin-bottom: 100px;
  }
}

/*----------------------------------------------------
404ページ
----------------------------------------------------*/
.noPage404 {
  text-align: center;
  padding: 80px 0px;
}
.noPage404 p {
  margin-bottom: 50px;
}
.noPage404 .btn {
  margin: 0 auto;
}
/*# sourceMappingURL=common.css.map */