@charset "utf-8";

/* ****************************************************************************************************
   * 共用
**************************************************************************************************** */

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * フォント設定
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* ゴシック体 */

@font-face {
  font-family: 'NotoSansCJKjp';
  font-style: normal;
  font-weight: normal;
  src: url('../font/NotoSans/NotoSansCJKjp-Light.woff') format('woff'),
       url('../font/NotoSans/NotoSansCJKjp-Light.ttf') format('opentype');
}

@font-face {
  font-family: 'NotoSansCJKjp';
  font-style: normal;
  font-weight: bold;
  src: url('../font/NotoSans/NotoSansCJKjp-Medium.woff') format('woff'),
       url('../font/NotoSans/NotoSansCJKjp-Medium.ttf') format('opentype');
}

@font-face {
  font-family: 'NotoSansCJKjp';
  font-style: normal;
  font-weight: 900;
  src: url('../font/NotoSans/NotoSansCJKjp-Black.woff') format('woff'),
       url('../font/NotoSans/NotoSansCJKjp-Black.ttf') format('opentype');
}

/* 明朝体 */

@font-face {
  font-family: 'NotoSerifCJKjp';
  font-style: normal;
  font-weight: normal;
  src: url('../font/NotoSerif/NotoSerifCJKjp-Light.woff') format('woff'),
       url('../font/NotoSerif/NotoSerifCJKjp-Light.ttf') format('opentype');
}

@font-face {
  font-family: 'NotoSerifCJKjp';
  font-style: normal;
  font-weight: bold;
  src: url('../font/NotoSerif/NotoSerifCJKjp-Medium.woff') format('woff'),
       url('../font/NotoSerif/NotoSerifCJKjp-Medium.ttf') format('opentype');
}

@font-face {
  font-family: 'NotoSerifCJKjp';
  font-style: normal;
  font-weight: 900;
  src: url('../font/NotoSerif/NotoSerifCJKjp-Black.woff') format('woff'),
       url('../font/NotoSerif/NotoSerifCJKjp-Black.ttf') format('opentype');
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 全体
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

body {
  min-width: 320px;
  color: #000;
  font: 12px/1.6 'NotoSansCJKjp', sans-serif;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

a[href] {
  transition: color 0.3s ease-in-out 0.0s;
  color: inherit;
}

a[href]:hover {
  text-decoration: none;
}

/* -------------------------------------------------------------------------------------------------
   * レイアウト用
/* ---------------------------------------------------------------------------------------------- */

div.body {
  padding-left: 10px;
  padding-right: 10px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (min-width:737px) {

  div.body {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

}

/* ****************************************************************************************************
   * ヘッダー
**************************************************************************************************** */

#header > div.body {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * ビジュアル
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#header .visual img {
  width: 100%;
}

/* ****************************************************************************************************
   * メイン
**************************************************************************************************** */

#main {
  font-size: 14px;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * セクショニング
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#main .section ~ .section {
  margin-top: 30px;
}

#main .column ~ .column {
  margin-top: 30px;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (min-width:737px) {

  #main .section ~ .section {
    margin-top: 60px;
  }

  #main .column ~ .column {
    margin-top: 40px;
  }

}

/* ****************************************************************************************************
   * フッター
**************************************************************************************************** */

#footer {
  padding: 20px 0;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (min-width:737px) {

  #footer {
    padding: 20px 0 50px;
  }

  #footer div.body {
    width: 100%;
    display: table;
    table-layout: fixed;
  }

}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * コピーライト
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#footer .copyright {
  text-align: center;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (min-width:737px) {

  #footer .copyright {
    text-align: left;
    vertical-align: middle;
    display: table-cell;
  }

}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * ナビ
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#footer .nav {
  text-align: center;
}

#footer .nav a {
  color: inherit;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (min-width:737px) {

  #footer .nav {
    text-align: right;
    vertical-align: top;
    display: table-cell;
  }

}

/* ****************************************************************************************************
   * 共用 お問い合わせ
**************************************************************************************************** */

#common-contact {
  width: 100%;
  padding: 10px 0;
  background-color: #71cfc1;
  position: fixed;
  z-index: 2;
  left: 0;
  transition:
    opacity 0.5s ease-in-out 0.0s,
    bottom 0.5s ease-in-out 0.0s;
  opacity: 1;
  bottom: 0;
}

/* スクロール中 */

body.scroll-active
#common-contact {
  transition:
    opacity 0.3s ease-in-out 0.0s,
    bottom 0.0s ease-in-out 0.3s;
  opacity: 0;
  bottom: -50%;
}

/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
   * 一覧
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#common-contact ul.list,
#common-contact ul.list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#common-contact ul.list {
  margin-bottom: -5px;
  letter-spacing: -0.4em;
  overflow: hidden;
}

#common-contact ul.list li {
  width: 33.333%;
  margin-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  letter-spacing: normal;
  vertical-align: top;
  display: inline-block;
}

#common-contact ul.list li.tel {
  width: 100%;
}

#common-contact ul.list li a {
  text-decoration: none;
  vertical-align: top;
  display: inline-block;
}

/* :::::::: ブレイクポイント :::::::: */

@media screen and (min-width:737px) {

  #common-contact ul.list li {
    width: 25%;
  }

  #common-contact ul.list li.tel {
    width: 25%;
  }

}