@charset "UTF-8";

/* 制作事例（一覧・個別ページ）
   読み込み順は functions.php（後に読み込んだ指定が勝つので順番を変えない） */

/* --------------------------------------------------------------------- */
/* 制作事例 */
/* --------------------------------------------------------------------- */

.creation-case-page {
  margin-top: 70px;
  margin-bottom: 50px;
}

/* タブ アイテム */
.creation-case-page .tab-item {
  color: var(--color-text-button);
  margin-bottom: 15px;
}

/* タブ アイテム ホバー時 */
.tab-item.active {
  color: var(--color-white);
  background: var(--color-pink);
}

.tab-item-sub.active {
  color: var(--color-white);
  background: var(--color-blue);
}

/* タブ アイテム サブ */
.tab-item-sub {
  width: calc(20% - 10px);
}

/* タブ アイテム サブ 最後のアイテム */
.tab-item-sub-2nd .tab-item-sub:last-child {
  /* 最後のアイテムには右のマージンを無効化 */
  margin-right: 0;
}

/*ラジオボタンを全て消す*/
input[name='tab-item-sub'] {
  display: none;
}

/*選択されているタブのコンテンツのみを表示*/
#tab-design:checked ~ #tab-all {
  display: block;
}

/* ホバー時にコンテンツの文字を変更する */
.creation-case-page .news-item-a:hover {
  color: var(--color-pink);
}

/* ボタン 次のページへ */
.btn-next-page {
  width: 386px;
  height: 62px;
}

/* スマホサイズ以下 */
@media (max-width: 767px) {
  /* 2段にして表示 */
  .tab-item-sub-1st,
  .tab-item-sub-2nd {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  /* タブ　アイテム　サブ */
  .tab-item-sub {
    width: calc(35% - 10px);
    margin-bottom: 10px;
    font-size: var(--font-sp-small);
  }

  /* タブ アイテム メイン */
  .creation-case-page .tab-item {
    width: calc(33% - 6px);
    font-size: var(--font-sp-small);
  }
}

/* タブレットサイズ以上 */
@media (min-width: 768px) {
  .tab-item-sub {
    margin-right: 10px;
  }
}

/* --------------------------------------------------------------------- */
/* 制作事例　個別ページ */
/* --------------------------------------------------------------------- */

/* パンくずリスト */
.breadcrumb {
  font-size: 15px;
  color: var(--color-line);
  margin: 110px 7% 10px 7%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breadcrumb a {
  margin: 3px;
  color: var(--color-pink);
}

/* パンくずリスト　現在のアイテム */
.breadcrumb span {
  color: var(--color-text);
}

/* タイトル */
.cc-title {
  margin: 60px 0 5px 0;
}

/* 投稿日 */
.cc-post-date {
  color: var(--color-text-light);
  font-size: 16px;
}

/* アイキャッチ */
.cc-img {
  margin: 35px 0;
}

/* 概要 */
.cc-outline {
  margin-bottom: 70px;
}

/* 詳細　枠 */
.cc-detail-container {
  margin: 30px 0;
  gap: 8%;
}

/* 折り返ししない */
.cc-detail-container p {
  word-break: normal;
}

/* サブタイトル */
.cc-detail-container .sub-title {
  margin-bottom: 10px;
}

/* 制作の詳細 */
.cc-detail {
  width: 50%;
}

/* 制作データ */
.cc-data {
  width: 50%;
}

/* 表 */
.cc-data table {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  font-size: 18px;
}

/* 表　行 */
.cc-data table td {
  border: solid 1px var(--color-text);
  padding: 10px 10px;
}

/* 表　タグ */
.cc-data .tag {
  background-color: var(--color-bg-pink);
  width: 30%;
}

/* 制作データ　注意事項リスト */
.cc-data ul {
  margin: 30px 15px;
}

.cc-data li {
  font-size: 13px;
  line-height: 19.5px;
}

/* 制作事例　ボタン枠 */
.cc-button {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 100px;
  margin-top: 100px;
}

/* 制作事例　ボタン */
.cc-button a {
  border-radius: 40px;
  border: solid 1px var(--color-text);
  color: var(--color-text);
  font-size: 15px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* ボタンが非表示でもスペースを保持 */
.cc-button a.hidden {
  visibility: hidden;
}

/* 制作事例　ボタン ホバー時 */
.single-post .cc-button a:hover {
  background-color: var(--color-bg-pink);
  border: solid 1px var(--color-bg-pink);
}

/* ボタン　前のページへ */
.cc-button-before::after {
  content: '前のページへ';
}

/* ボタン　作品一覧に戻る */
.cc-button-return-list::after {
  content: '作品一覧に戻る';
}

/* ボタン　次のページへ */
.cc-button-after::after {
  content: '次のページへ';
}

/* タブレットサイズ以下 */
@media (max-width: 960px) {
  /* パンくずリスト */
  .breadcrumb {
    font-size: 10px;
  }

  /* 投稿日 */
  .cc-post-date {
    font-size: 11px;
  }

  /* 表 */
  .cc-data table {
    font-size: 13px;
  }

  /* 表　行 */
  .cc-data table td {
    padding: 8px 10px;
  }

  /* 制作データ　注意事項リスト */
  .cc-data ul {
    margin: 20px 10px;
  }

  .cc-data li {
    font-size: 10px;
    line-height: 15px;
  }

  /* 制作事例　ボタン */
  .cc-button button {
    height: 47px;
    font-size: 13px;
  }

  /* ボタン　前のページへ */
  .cc-button-before::after {
    content: '前へ';
  }

  /* ボタン　作品一覧に戻る */
  .cc-button-return-list::after {
    content: '作品一覧へ';
  }

  /* ボタン　次のページへ */
  .cc-button-after::after {
    content: '次へ';
  }
}

/* スマホサイズ以下 */
@media (max-width: 767px) {
  .breadcrumb,
  .cc-post-date,
  .cc-data li {
    font-size: var(--font-sp-small);
  }

  .cc-data table,
  .cc-button button {
    font-size: var(--font-sp-body);
  }

  .breadcrumb {
    margin-left: var(--sp-gutter);
    margin-right: var(--sp-gutter);
  }

  /* すでに .both-ends-space の中にあるときは二重にとらない */
  .both-ends-space .breadcrumb {
    margin-left: 0;
    margin-right: 0;
  }

  .breadcrumb span {
    margin: 1px;
  }

  /* タイトル */
  .cc-title {
    margin: 35px 0 5px 0;
  }

  /* アイキャッチ */
  .cc-img {
    margin: 20px 0;
  }

  /* 概要 */
  .cc-outline {
    margin-bottom: 45px;
  }

  /* 概要　テキスト */
  .cc-outline p {
    font-weight: bold;
  }

  /* 縦並びに変更 */
  .single-post .display-flex {
    flex-direction: column;
  }

  /* 制作の詳細 */
  .cc-detail {
    width: 100%;
  }

  /* 制作データ */
  .cc-data {
    width: 100%;
  }

  /* 詳細　枠 */
  .cc-detail-container {
    margin: 35px 0;
    gap: 40px;
  }
}

/* スマホサイズ　以下 */
@media (max-width: 428px) {
  .cc-button a {
    height: 55px;
  }

  /* ボタン　次へ　前へ */
  .cc-button-before,
  .cc-button-after {
    width: 100px !important;
  }

  /* ボタン　作品一覧 */
  a.cc-button-return-list {
    width: 150px;
  }
}