@charset "UTF-8";

/* フッター
   読み込み順は functions.php（後に読み込んだ指定が勝つので順番を変えない） */

/* フッター
------------------------------------------------ */
footer {
  background-color: var(--color-bg-pink);
  padding: 60px 10%;
}

/* フッター（リンク） */
.page-footer {
  /* 中の要素を横並び */
  display: flex;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    flex-direction: column-reverse;
  }
}

.footer-creation-case {
  padding: 0px 8%;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    padding: 0%;
  }
}

.footer-link {
  /* 中の要素を横並び */
  display: flex;
  flex: 1 0 0;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    margin-top: 10%;
    /* 両端に配置 */
    justify-content: space-between;
  }
}

.footer-list li {
  /* デフォルトの黒丸をなくす */
  list-style-type: none;
  /* relativeにして、アイコンの位置をabsoluteで調整 */
  position: relative;
  /* アイコンのスペースを確保 */
  padding-left: 27px;
  padding-bottom: 13px;
  font-weight: bold;
}

.footer-list li::before {
  /* SVGアイコン */
  content: url(../img/flower.svg);
  position: absolute;
  /* アイコンの水平方向の位置を調整 */
  left: 0;
  /* アイコンを縦方向の中央に配置 */
  top: 19%;
  /* 縦の中央揃えのために移動 */
  transform: translateY(-50%);
  /* アイコンの大きさ */
  width: 13px;
  height: 13px;
  background-size: contain;
}

.footer-link a {
  font-size: 15px;
}

.footer-link a:hover {
  color: var(--color-pink);
}

.footer-creation-case-sub {
  /* リストのデフォルトのマーカーを非表示にする */
  list-style-type: none;
  margin-left: 35px;
  margin-top: -10px;
}

.footer-creation-case-sub li {
  margin-bottom: -5px;
}

.footer-creation-case-sub a {
  font-size: 11px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-sp-small);
  }
}

/* フッター（SNS） */
.footer-sns {
  /* 中の要素を横並び */
  display: flex;
  /* 右端に配置 */
  margin-left: auto;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    /* 中央に配置 */
    margin: auto;
  }
}

/* SNSアイコン */
.sns-icon {
  width: 44px;
  height: 44px;
  margin: 0 10px;
  transition: background-image 0.3s ease;
  background-size: cover;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    height: 44px;
  }
}

/* インスタ */
.icon-instagram {
  background-image: url(../img/instagram01.png);
}

.icon-instagram:hover {
  background-image: url(../img/instagram02.png);
}

/* X */
.icon-x {
  background-image: url(../img/x01.png);
}

.icon-x:hover {
  background-image: url(../img/x02.png);
}

/* トップへ戻る */
.icon-top {
  background-image: url(../img/return_top01.png);
}

.icon-top:hover {
  background-image: url(../img/return_top02.png);
}

/* フッター（説明） */
.footer-info {
  text-align: center;
  margin-top: 130px;
  color: var(--color-text-footer-note);

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    margin-top: 100px;
  }
}

.footer-info p {
  font-size: 11px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    font-size: 8px;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    font-size: var(--font-sp-note);
  }
}

.footer-info p u {
  color: var(--color-text-footer-note);
}

/* お問い合わせを制作事例の直下に配置する */
.footer-phone-contact {
  /* 851px以上は非表示 */
  @media (min-width: 851px) {
    display: none;
  }

  /* 850px以下はお問い合わせの上に間隔を空ける */
  @media (max-width: 850px) {
    padding-top: 15px;
  }
}

/* お問い合わせを横並びに配置 */
.footer-contact {
  /* 850px以下は非表示 */
  @media (max-width: 850px) {
    display: none;
  }
}