@charset "UTF-8";

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

/* --------------------------------------------------------------------- */
/* 制作について */
/* --------------------------------------------------------------------- */

.feature {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 80px;

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

/* イラスト・デザインの特徴　1つ目 */
.creation-case-margin-top {
  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    margin-top: 20px;
  }
}

/* ボタン　制作について */
.feature .btn {
  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    margin-top: 50px;
  }
}

/* 使用ソフト
-------------------------------------------------------*/
.using-soft {
  background-color: var(--color-bg-pink);
  text-align: center;
  padding: 30px 0 70px 0;
}

/* タイトル */
.using-soft h1 {
  color: var(--color-pink);
}

/* 使用ソフトアイテム枠 */
.using-soft-contents {
  display: flex;
  justify-content: space-around;
  max-width: 1500px;
  margin: auto;
  margin: 60px auto auto auto;
  /* アイテム間の余白 */
  gap: 50px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    /* 縦並び */
    flex-direction: column;
  }
}

/* 使用ソフトアイテム */
.using-soft-item {
  background-color: var(--color-white);
  height: 262px;
  /* 親要素の幅に応じて広がる */
  width: 100%;
  /* 親要素に基準を設定 */
  position: relative;
  /* 子要素が横方向に中央揃え */
  display: flex;
  justify-content: center;
  /* 縦方向に中央揃え */
  align-items: center;
  width: 100%;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    height: 193px;
  }
}

/* デザイン・イラストレーション画像 */
.using-soft-item img {
  height: 64px;
  top: -30px;
  /* using-soft-itemの子要素 */
  position: absolute;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    height: 36px;
    top: -20px;
  }
}

/* ボーダー */
.using-soft-item .border {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* テキスト */
.using-soft-item-text {
  margin: 0 30px;
  width: 100%;
}

/* ご依頼から納品までの流れ
-------------------------------------------------------*/
.flow-order {
  padding: 100px 0;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    padding: 70px 0;
  }
}

/* タイトル */
.flow-order h1 {
  text-align: center;
}

/* 内容 */
.flow-order-contents {
  background-color: var(--color-bg-blue-light);
  /* 幅を広げたときに中央に配置されるようautoにする */
  margin: 40px auto 0 auto;
  max-width: 944px;
  padding: 50px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    padding: 40px 0;
  }
}

/* 内容アイテム */
.flow-order-item {
  /* 縦並びになるように左に余白 */
  margin: 10px 0 60px 64px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin: 10px 0 40px 32px;
  }
}

/* 内容アイテム　p */
.flow-order-item p {
  line-height: 27px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    line-height: 19.5px;
  }
}

.icon-container {
  /* 縦線をアイコンの中に配置するため */
  position: relative;
}

.icon-item {
  /* アイコンとテキスト間の余白 */
  margin: 0 15px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin: 0 30px;
  }
}

/* 内容アイテム h2 */
.icon-item h2 {
  color: var(--color-blue);
}

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

/* 白丸のアイコン */
.icon {
  /* アイコンのサイズ */
  width: 22px;
  height: 22px;
  /* アイコンの色 */
  background-color: var(--color-white);
  /* 丸くする */
  border-radius: 50%;
  /* アイコンとテキストの間の余白 */
  margin-right: 40px;
  /* アスペクト比を1:1にする */
  aspect-ratio: 1/1;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    /* アイコンのサイズ */
    width: 16px;
    height: 16px;
    /* アイコンとテキストの間の余白 */
    margin-right: 15px;
  }
}

/* 白縦線 */
.vertical-line {
  /* 縦線を絶対配置 */
  position: absolute;
  top: 17px;
  bottom: 50px;
  /* アイコンと被るように配置 */
  left: 23px;
  /* 縦線の幅 */
  width: 5px;
  /* 縦線の色  */
  background-color: var(--color-white);

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    /* アイコンと被るように配置 */
    left: 35.5px;
  }

  @media (max-width: 422px) {
    bottom: 60px;
  }
}

/* ご依頼にあたってのお願い
---------------------------------------------------- */
.attention {
  padding: 70px 0;
  margin-bottom: 80px;
}

/* 白枠 */
.white-container {
  background-color: var(--color-white);
  border-radius: 6px;
  padding: 35px 5%;
  /* 中央に配置 */
  max-width: 1500px;
  margin: auto;
}

.white-container h2 {
  margin-bottom: 15px;
}

/* 白枠の中身の要素の間隔を狭める */
.white-container:first-child {
  /* PCサイズ */
  @media (min-width: 768px) {
    margin-bottom: -50px;
  }

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin-bottom: 30px;
  }
}

/* リスト */
.white-container ul {
  padding-inline-start: 20px;
}

.white-container li {
  margin-bottom: 30px;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin-bottom: 20px;
  }
}