@charset "UTF-8";

/* 共通部分：色・文字サイズ・余白の変数、タグの初期設定、ボタン、線、背景、配置、ページタイトル
   読み込み順は functions.php（後に読み込んだ指定が勝つので順番を変えない） */

/* 画面幅の区切り（ブレイクポイント）
   @media には変数が使えないので、値をそのまま書く。各要素の指定の中に @media を入れて書く

   基本の2つ
   - 960px 以下：タブレットサイズ以下（ヘッダーがハンバーガーメニューに、横並びが縦並びに）
   - 767px 以下：スマホサイズ以下（文字サイズ --font-sp-*、左右の余白 --sp-gutter）
   - 961px 以上 / 768px 以上：上の逆（PCだけ・タブレット以上だけに効かせるとき）

   部品ごとの細かい調整（値を変えると、その幅の間で見た目が変わるのでまとめない）
   - 1600px：最新情報の左右の余白（sections.css）
   - 1227px：ヘッダーのメニューの間隔（header.css）
   - 1200px：FAQ の折りたたみの幅（page-faq.css）
   - 850px / 851px：フッターのお問い合わせの位置（footer.css）
   - 844px：資料ダウンロードの吹き出しの線（sections.css）
   - 630px：お問い合わせの日付欄の幅（page-contact.css）
   - 600px：資料ダウンロードの「Tap here」画像（sections.css）
   - 438px：ボタンの大きさ・お問い合わせ案内の上下の余白（sections.css）
   - 428px：見出しの花アイコン（base.css）・制作事例詳細のボタン（page-creation-case.css）・「その他」の入力欄（page-contact.css）
   - 422px：制作についての流れの縦線（page-about-creation.css）
*/

/* 共通部分
-------------------------------- */
html {
  /* ユーザの設定した文字サイズを正しく反映 */
  font-size: 100%;
}

/* 色
   サイト全体の色はここで決める。色を変えるときはこの値だけ直す
   （値が近い色も、今の見た目を1pxも変えないため別々に残している）
--------------------------------------------------------- */
:root {
  /* メインの色 */
  --color-pink: #eb7684;
  --color-blue: #51abff;
  --color-white: #ffffff;

  /* 文字 */
  --color-text: #757575; /* 本文 */
  --color-text-link: #7a7676; /* リンク・ヘッダーのメニュー */
  --color-text-button: #797676; /* グレーのボタン・制作事例のタブ */
  --color-text-light: #a9a9a9; /* 日付・タグなど薄い文字 */
  --color-text-dots: #d9d9d9; /* ページ送りの「…」 */
  --color-text-footer-note: #f6cbd0; /* フッターの注意書き */
  --color-error: #dc3232; /* フォームのエラー */

  /* 背景 */
  --color-bg-pink: #fff0ee;
  --color-bg-blue: #e6f6ff;
  --color-bg-blue-light: #f0f9ff;
  --color-bg-gray: #eeeeee;
  --color-overlay: rgba(0, 0, 0, 0.5); /* メニューを開いたときの暗幕 */

  /* 線 */
  --color-line: #e6e6e6;
  --color-line-stripe: #e4e4e4; /* しましまの区切り線 */
}

/* スマホの文字サイズ（767px以下）
   PC・タブレットは各要素の指定のまま。新しく要素を足すときもスマホ幅はこの基準に合わせる
--------------------------------------------------------- */
:root {
  --font-sp-heading: 21px; /* 見出し（h1・h2） */
  --font-sp-heading-s: 17px; /* 小見出し（お問い合わせの見出し・FAQの質問） */
  --font-sp-body: 15px; /* 本文 */
  --font-sp-small: 12px; /* 補足（日付・タグ・パンくず・注釈） */
  --font-sp-note: 11px; /* フッターの注意書き */
  --font-input: 16px; /* 入力欄（16px未満だと iPhone で入力時に画面が勝手に拡大する） */
}

/* スマホの左右余白（767px以下）
   画面の左右の余白を 16px にそろえる。幅を変えるときは --sp-gutter だけ直す。
   新しいセクションも外側の余白はこれに合わせ、色付きの枠やカードの中だけ内側に余白をとる
--------------------------------------------------------- */
:root {
  --sp-gutter: 16px;
}

/* タグ
--------------------------------------------------------- */
body {
  font-family: tsukushimarugothic, meiryo, ヒラギノ角ゴ pro w3,
    hiragino kaku gothic pro, sans-serif;
  /* TODO　行の高さの指定 */
  line-height: 1.7;
  color: var(--color-text);
  margin-top: 115px;
  margin-left: 0;
  margin-right: 0;
  background-color: var(--color-white);
  /* 自動的に折り返しを行う */
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* Chromeでは自動的に折り返しを行う */
  word-break: auto-phrase;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    /* ヘッダーとカルーセルの間をなくす */
    margin-top: 70px;
  }
}

a {
  /* aタグの傍線の指定 */
  text-decoration: none;
  color: var(--color-text-link);
}

a:hover {
  /* マウスオーバー時の動き */
  transition: all 0.2s ease;
}

img {
  /* 画像の大きさの指定 */
  max-width: 100%;
  /* 縦横比を制御する */
  object-fit: cover;
  height: auto;
}

.wrapper {
  /* 横幅最大1440pxの指定 */
  max-width: 1440px;
  /* 中央に配置 */
  margin: 0 auto;
  /* スマホ向け余白の指定 */
  padding: 0 4%;
}

h1 {
  font-size: 30px;

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

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

h2 {
  font-size: 25px;

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

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

p {
  font-size: 18px;
  margin: 0;

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

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

li {
  font-size: 18px;

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

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

label {
  font-size: 18px;

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

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

/* ボタン（ページ移動は a.btn、フォームの送信は input） */
.btn,
input.wpcf7-form-control.wpcf7-submit.has-spinner {
  font-size: 18px;
  height: 58px;
  width: 291px;
  /* 角を丸くする */
  border-radius: 3px;
  /* テキストを1行に収め、改行しない */
  white-space: nowrap;
  font-weight: bold;
  /* 0.3秒かけて変化 */
  transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;

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

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

/* a をボタンと同じ形にする（文字を上下左右の中央に置く） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* マウスを乗せたときも、上の a:hover ではなくボタンの変化（0.3秒）を使う */
.btn:hover {
  transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;
}

/* 日付 */
time {
  /* 折り返さない */
  white-space: nowrap;
}

/* 文字
----------------------------------------------------------------- */
.color-pink {
  color: var(--color-pink) !important;
}

.color-blue {
  color: var(--color-blue) !important;
}

.font-weight-normal {
  font-weight: normal;
}

/* リンク */
.link,
.cc-detail a,
.blog-explain a {
  color: var(--color-blue);
  text-decoration: underline;
}

/* ボタン
----------------------------------------------------------------- */

/* 白 → ピンク */
.btn-white-pink {
  color: var(--color-pink);
  background: var(--color-white);
  border: 2px solid var(--color-pink);
}

.btn-white-pink:hover {
  color: var(--color-white);
  background: var(--color-pink);
}

/* ピンク → グレー */
.btn-pink-gray {
  color: var(--color-white);
  background: var(--color-pink);
  border: none;
}

.btn-pink-gray:hover {
  background: var(--color-bg-gray);
}

/* 薄ビンク → 濃ピンク*/
.btn-pink-pink {
  color: var(--color-pink);
  background: var(--color-bg-pink);
}

.btn-pink-pink:hover {
  color: var(--color-white) !important;
  background: var(--color-pink);
}

/* 白 → 水色 */
.btn-white-blue {
  color: var(--color-blue);
  background: var(--color-white);
}

.btn-white-blue:hover {
  color: var(--color-white);
  background: var(--color-blue);
}

/* 薄水色 → 濃水色 */
.btn-blue-blue {
  color: var(--color-blue);
  background: var(--color-bg-blue);
}

.btn-blue-blue:hover {
  color: var(--color-white) !important;
  background: var(--color-blue);
}

/* 濃水色 → ピンク */
.btn-blue-pink {
  color: var(--color-white);
  background: var(--color-blue);
  border: none;
}

.btn-blue-pink:hover {
  color: var(--color-white);
  background: var(--color-pink);
}

/* 濃水色 → グレー */
.btn-blue-gray {
  color: var(--color-white);
  background: var(--color-blue);
  border: none;
}

.btn-blue-gray:hover {
  background: var(--color-bg-gray);
}

/* ピンク → 水色 */
.btn-pink-blue {
  color: var(--color-white);
  background: var(--color-pink);
  border: none;
}

.btn-pink-blue:hover {
  background: var(--color-blue);
}

/* ブラック → ピンク */
.btn-black-pink {
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-text);
}

.btn-black-pink:hover {
  background-color: var(--color-bg-pink);
  border: 1px solid var(--color-bg-pink);
}

/* グレー → 水色 */
.btn-gray-blue {
  color: var(--color-text-button);
  background-color: var(--color-bg-gray);
  border: none;
}

.btn-gray-blue:hover {
  color: var(--color-white);
  background-color: var(--color-blue);
}

/* ボーダー */
.border {
  /* デフォルトのボーダーを消す */
  border: 0;
}

/* ボーダー（横） */
.horizontal {
  /* 背景で破線を描画 */
  background: repeating-linear-gradient(
    to right,
    /* 線の色 */ var(--color-line-stripe),
    /* 線の幅 */ var(--color-line-stripe) 10px,
    /* 線間の透明な部分 */ transparent 10px,
    /* 線の間隔 */ transparent 15px
  );
  /* ボーダーの高さ */
  height: 3px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    background: repeating-linear-gradient(
      to right,
      var(--color-line-stripe),
      var(--color-line-stripe) 10px,
      transparent 10px,
      transparent 15px
    );
    /* 高さをスマホサイズに調整 */
    height: 2px;
  }
}

/* ボーダー（縦） */
.vertical {
  /* 縦の線の幅を指定 */
  width: 3px;
  height: 300px;
  background: repeating-linear-gradient(
    to bottom,
    /* 線の色 */ var(--color-line-stripe),
    /* 線の幅 */ var(--color-line-stripe) 15px,
    /* 線間の透明な部分 */ transparent 15px,
    /* 線の間隔 */ transparent 20px
  );
}

/* 背景
---------------------------------- */
/* 背景（ピンク） */
.background-pink {
  background-color: var(--color-bg-pink);
}

/* 背景（水色） */
.background-blue {
  background-color: var(--color-bg-blue-light);
}

/* 背景（水色ドット） */
.background-blue-dot {
  background-image: url(../img/dot_blue.jpg);
  background-repeat: repeat;
}

/* 背景（ピンクドット） */
.background-pink-dot {
  background-image: url(../img/dot_pink.jpg);
  background-repeat: repeat;
}

/* 配置
---------------------------------- */

/* 両端に間隔を空ける */
.both-ends-space {
  margin: 0px 7%;

  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin-left: var(--sp-gutter);
    margin-right: var(--sp-gutter);
  }
}

/* 入れ子になった .both-ends-space は二重に余白をとらない */
.both-ends-space .both-ends-space {
  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin-left: 0;
    margin-right: 0;
  }
}

/* 横並び */
.display-flex {
  display: flex;
}

/* 縦並び */
.display-flex-colum {
  display: flex;
  flex-direction: column;
}

/* 横方向　中央に配置 */
.text-align-center {
  text-align: center;
}

/* 横方向　中央揃え */
.align-item-center {
  align-items: center;
}

/* 要素同士の間隔　30px */
.gap-30 {
  display: flex;
  gap: 30px;
}

/* ボトムに間隔を作る(大) */
.bottom-space-l {
  margin-bottom: 75px;

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

/* ボトムに間隔を作る(小) */
.bottom-space-s {
  margin-bottom: 50px;

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

/* スマホサイズのみボトムに間隔を作る(小) */
/* タブレットサイズ以下 */
@media (max-width: 960px) {
  .bottom-space-phone-s {
    margin-bottom: 30px;
  }
}

/* 改行
------------------------------- */

/* 改行される画面サイズ(タブレットサイズ以下) */
.break-tablet {
  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    /* 最低タブレットサイズ以下の場合改行 */
    display: inline;
  }

  @media (min-width: 768px) {
    /* 最低タブレットサイズ以上の場合改行を無効化 */
    display: none;
  }
}

/* 改行　行間高さ */
.line-height {
  line-height: 20px;
}

/* 行間
-------------------------------- */

/* 行間(小)（p） */
.line-spacing-s p {
  line-height: 2;
}

/* 各ページタイトル
--------------------------------　*/
.title {
  color: var(--color-pink);
  text-align: center;
  margin: 115px 0 10px 0;

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

/* すでに .both-ends-space の中にあるときは二重にとらない */
.both-ends-space .title {
  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    padding: 0;
  }
}

/* サブタイトル
-------------------------------- */
.sub-title {
  background-image: url(../img/flower.svg);
  background-repeat: no-repeat;
  background-position: left;
  background-size: 29px;
  padding-left: 40px;

  @media (max-width: 428px) {
    background-size: 17px;
    padding-left: 25px;
  }
}

/* 最大幅を固定
-------------------------------  */
.max-width-fixed {
  /* 幅を広げたときに中央に配置されるようautoにする */
  margin: 0 auto 0 auto;
  /* 幅1280以上の場合は中央に固定 */
  max-width: 1280px;
}

/* .both-ends-space と一緒に使うときは、スマホでは左右の余白（16px）を優先する */
.max-width-fixed.both-ends-space {
  /* スマホサイズ以下 */
  @media (max-width: 767px) {
    margin-left: var(--sp-gutter);
    margin-right: var(--sp-gutter);
  }
}