@charset "utf-8";
/* ===================================================================
   front-loading.css
   フロントローディング図解

   PC・タブレット（761px以上） … 従来どおり1枚画像を表示
   スマートフォン（760px以下） … パネルごとに分割した画像を縦に並べる

   ■ 通信量について
     HTML側の <picture> で、その画面幅で使わない画像には
     1×1の透明画像（blank.png）を割り当てています。
     表示しない画像はブラウザが読み込みません。

   ■ 背景色について
     スマホ用の画像は透過PNGのため、下記の --flow-bg で背景色を
     指定しています。色を変えたい場合はこの1行だけ書き換えてください。
   =================================================================== */

.flow {
  /* 図解の背景色（元図の背景に合わせています） */
  --flow-bg: #e3f0f6;
  /* 矢印の色 */
  --flow-arrow: #1f4e79;
  /* スマホ時のパネルの最大幅 */
  --flow-max: 420px;

  margin: 0;
  padding: 0;
  background: var(--flow-bg);
}

.flow picture {
  display: block;
}

.flow img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- PC・タブレット：1枚画像 --- */
.flow .flow__pc {
  width: 100%;
}

/* --- スマホ用のまとまりは、PCでは隠す --- */
.flow .flow__sp {
  display: none;
}

/* ===================================================
   スマートフォン（760px以下）
   =================================================== */
@media screen and (max-width: 760px) {

  /* 1枚画像を隠し、分割画像に切り替える
     （.flow img より詳細度を上げて確実に効かせる） */
  .flow .flow__pc {
    display: none;
  }

  .flow .flow__sp {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 透過PNGの背景として、パネルの外側にこの色が出ます */
    background: var(--flow-bg);
    padding: 16px 12px 20px;
  }

  /* タイトル */
  .flow .flow__title {
    width: 100%;
    max-width: var(--flow-max);
    margin-bottom: 14px;
  }

  /* 各パネル */
  .flow .flow__panel {
    width: 100%;
    max-width: var(--flow-max);
  }

  /* 工程をつなぐ下向きの矢印 */
  .flow__arrow {
    display: block;
    width: 0;
    height: 0;
    margin: 10px 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 17px solid var(--flow-arrow);
  }

  .frontloading__diagram img{
    box-shadow: none;
  }
}

/* ===================================================
   画面が非常に狭い場合（360px以下）
   左右の余白を切り詰めて表示領域を確保
   =================================================== */
@media screen and (max-width: 360px) {
  .flow .flow__sp {
    padding: 12px 8px 16px;
  }

  .flow__arrow {
    margin: 7px 0;
    border-left-width: 11px;
    border-right-width: 11px;
    border-top-width: 14px;
  }
}