@charset "UTF-8";
/* ==========================================================================
   bridge.css
   LP（bridge.html）専用スタイル。base.css の後に読み込む。
   旧 common.css / pc.css / sp.css を1ファイルに統合。

   ■ ブレークポイントについて
     旧構成は pc.css = min-width:900px / sp.css = max-width:900px で、
     ちょうど 900px のときに両方が適用される不具合がありました。
     ここでは SP 側の適用範囲（900px を含む）を維持したまま、
     PC 側を min-width:900.02px として重複を解消しています。

   ■ 構成
     1. 共通
     2. SP  @media (max-width: 900px)
     3. PC  @media (min-width: 900.02px)
   ========================================================================== */


/* ==========================================================================
   1. 共通
   ========================================================================== */

/* --------------------------------------------------------------
   背景色
   -------------------------------------------------------------- */

.container-color-1 { background-color: #E6F7FE; }
.container-color-2 { background-color: #FDF6F6; }
.container-color-3 { background-color: #00B0F0; }


/* --------------------------------------------------------------
   ヒーロー
   -------------------------------------------------------------- */

.hero-visual {
  /* 1行目は WebP 非対応ブラウザ向けのフォールバック */
  background-image: url("../images/background_hero.jpg");
  background-image: image-set(
    url("../images/background_hero.webp") type("image/webp"),
    url("../images/background_hero.jpg")  type("image/jpeg")
  );
  background-position: center;
  background-size: cover;
}
  .hero-visual .phrase-image { margin-bottom: 3vw; }
  .hero-visual .phrase-notes {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
  }


/* --------------------------------------------------------------
   見出し・本文
   -------------------------------------------------------------- */

.title-style-1,
.title-style-2 { text-align: center; }

.title-style-1 { color: #09739A; }
  .title-style-1 strong { color: #E67676; }

/* 旧 h3.title-style-2 を p に変更したため、見出し由来の
   行間（200%）と太字（bold）をここで補う */
.title-style-2 {
  font-weight: bold;
  line-height: 200%;
}

.paragraph-style-1 {
  line-height: 200%;
  text-align: center;
}


/* --------------------------------------------------------------
   アプリストアボタン（旧 menu 要素）
   -------------------------------------------------------------- */

.app-buttons { display: flex; }
  /* 旧ソースは <a> が flex アイテムで、SP では縮小して収まっていた。
     flex-shrink を殺すと横幅が溢れて余白が消えるため、既定の 0 1 auto を維持し
     min-width:0 で自動最小サイズによる縮小阻止も解除する。 */
  .app-buttons li { min-width: 0; }
  .app-buttons a { display: block; }
  .app-buttons img {
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 12px;
    transition: border-color .5s, box-shadow .5s;
  }
  .app-buttons a:hover img {
    border-color: rgba(255, 255, 255, .3);
    box-shadow: 0 0 50px rgba(255, 255, 255, .5),
                0 0 100px rgba(255, 255, 255, .1);
  }


/* --------------------------------------------------------------
   画像
   -------------------------------------------------------------- */

.insert-image {
  text-align: center;
  margin-bottom: 20px;
}

.image-style-1,
.image-style-2 { text-align: center; }


/* --------------------------------------------------------------
   ボックス
   -------------------------------------------------------------- */

.box-style-1 {
  position: relative;
  color: #FFF;
  background-color: #02668A;
  background-image: url("../images/background_flow.jpg");
  background-image: image-set(
    url("../images/background_flow.webp") type("image/webp"),
    url("../images/background_flow.jpg")  type("image/jpeg")
  );
  background-position: 0 0;
  padding-top: 40px;
}
  .box-style-1 .box-title { text-align: center; }

.box-style-2 { background-color: #F5DCDC; }
  .box-style-2 .flex-item {
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    padding: 40px;
  }

.box-style-3 { color: #FFF; }
  .box-style-3 .flex-item {
    border-radius: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    padding: 40px;
  }

.box-style-4 li img {
  width: auto;
  max-height: 30px;
  min-height: 10px;
}

.box-style-5 { background-color: #CCEFFC; }


/* --------------------------------------------------------------
   リスト・ユーザーの声
   -------------------------------------------------------------- */

.flex-list-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.list-style-1 li { margin-bottom: 20px; }
  .list-style-1 li:last-child { margin-bottom: 0; }

.insert-message p {
  position: relative;
  color: #00B0F0;
  font-weight: 500;
  text-align: left;
  background-color: #FFF;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 20px;
}
  .insert-message p::before {
    content: "";
    position: absolute;
    border: 10px solid transparent;
  }

/* 旧 aside を cite に変更。cite の既定（inline / italic）を打ち消す */
.insert-message cite {
  display: block;
  font-style: normal;
  text-align: right;
}


/* ==========================================================================
   2. SP  （max-width: 900px）
   ========================================================================== */

@media screen and (max-width: 900px) {

  /* base */
  body { font-size: 14px; }

  .title-style-1 { font-size: 24px; margin-bottom: 20px; }
  .title-style-2 { font-size: 16px; margin-bottom: 40px; }
  .box-title     { font-size: 14px; margin-bottom: 40px; }

  .app-buttons { justify-content: center; }
    .app-buttons li:first-child { margin-right: 10px; }
    .app-buttons img { border-radius: 6px; }

  .footer-nav li { margin-right: 1rem; }
    .footer-nav a { font-size: 11px; }

  /* container */
  .section-container { padding: 40px 30px; }
    .section-container.wide {
      text-align: center;
      padding: 40px 0 0;
    }
      .section-container.wide .title-style-1,
      .section-container.wide .title-style-2 {
        padding-right: 30px;
        padding-left: 30px;
      }
      .section-container.wide .flex-container { padding: 40px 30px; }

  .flex-container { flex-direction: column; }
    .flex-container.column-2 .flex-item,
    .flex-container.column-3 .flex-item {
      width: 100%;
      margin-bottom: 40px;
    }
    .flex-container.column-2 .flex-item:last-child,
    .flex-container.column-3 .flex-item:last-child { margin-bottom: 0; }

  /* hero */
  .hero-visual {
    background-position: center center;
    background-size: auto 100%;
    padding: 40px 30px;
  }
    .hero-visual .logo { margin-bottom: 50px; }
      .hero-visual .logo img {
        width: auto;
        height: 35px;
        margin-left: -10px;
      }
    .hero-visual .hero-images { margin-bottom: 20px; }
    .hero-visual .phrase-image { margin-bottom: 20px; }
    .hero-visual .phrase-notes {
      text-align: center;
      margin-bottom: 20px;
    }

  /* images */
  .image-style-1 img { width: 100%; }

  .image-style-2 { margin: -60px 0 20px; }
    .image-style-2 img { width: 30vw; min-width: 60px; }

  /* box */
  .box-style-1 { background-repeat: repeat-y; }
    .box-style-1 .box-title { font-size: 18px; margin-bottom: 0; }
    .box-style-1 img { width: 60%; margin-bottom: 10px; }

  .box-style-2 .box-title { margin-bottom: 20px; }
    .box-style-2 .flex-item { padding: 40px 30px; }

  .box-style-3 .box-title {
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
  }
  .box-style-3 .flex-item { padding: 40px 30px; }
    .box-style-3 .flex-item:nth-child(odd) {
      background: linear-gradient(-70deg, #09739A 0%, #09739A 20%, #4BC7F4 20%, #4BC7F4 100%);
    }
    .box-style-3 .flex-item:nth-child(even) {
      background: linear-gradient(-70deg, #E67676 0%, #E67676 20%, #ED9E9E 20%, #ED9E9E 100%);
    }
    .box-style-3 .left-box { text-align: center; }
      .box-style-3 .left-box img { width: 60%; margin-bottom: 20px; }
    .box-style-3 .right-box p { text-align: center; }

  .box-style-4 li { padding: 5px 10px; }
    .box-style-4 li img { height: 20px; }

  /* text */
  .paragraph-style-1 { padding: 0; }

  .insert-message { font-size: 13px; line-height: 180%; }
    .insert-message p::before {
      left: 47.5%;
      top: -5px;
      border-bottom: 20px solid #FFF;
      transform: translateY(-50%);
    }

  .insert-icon {
    text-align: center;
    margin-bottom: 10px;
  }
    .insert-icon img { width: 50%; }
}

@media screen and (min-width: 480px) and (max-width: 900px) {
  .hero-visual { background-position: -400px bottom; }
}


/* ==========================================================================
   3. PC  （min-width: 900.02px）
   ========================================================================== */

@media screen and (min-width: 900.02px) {

  /* base */
  body { font-size: 16px; }

  .title-style-1 { font-size: 40px; margin-bottom: 20px; }
  .title-style-2 { font-size: 18px; margin-bottom: 60px; }
  .box-title     { font-size: 16px; margin-bottom: 40px; }

  /* 旧ソースの PC は menu が block ＋ a が inline だったため、
     入りきらない場合は折り返していた。その挙動を維持する。 */
  .app-buttons { flex-wrap: wrap; }
    .app-buttons li:first-child { margin-right: 15px; }

  /* container */
  .section-container { padding: 100px 10%; }
    .section-container.wide {
      text-align: center;
      padding: 100px 0 0;
    }
      .section-container.wide .title-style-1,
      .section-container.wide .title-style-2 {
        padding-right: 10%;
        padding-left: 10%;
      }
      .section-container.wide .flex-container { padding: 100px 10% 80px; }
        .section-container.wide .flex-container img { margin-bottom: 20px; }

  .flex-container { flex-direction: row; }
    .flex-container.column-2 .flex-item { width: 48.44444%; margin: 0 3% 3% 0; }
    .flex-container.column-2 .flex-item:nth-child(even) { margin: 0 0 3% 0; }
    .flex-container.column-3 .flex-item { width: 31.33333%; margin-right: 3%; }
    .flex-container.column-3 .flex-item:last-child { margin-right: 0; }

  /* hero */
  .hero-visual {
    position: relative;
    width: 100%;
    height: 60vw;
    overflow: hidden;
  }
    .hero-visual .logo {
      position: absolute;
      top: 2vw;
      left: 10vw;
    }
      .hero-visual .logo img { width: 10vw; max-width: 180px; }

    .hero-visual .hero-images {
      position: absolute;
      top: 50%;
      right: -5vw;
      transform: translateY(-50%);
    }
      .hero-visual .hero-images img { width: 45vw; }

    .hero-visual .hero-contents {
      position: absolute;
      width: 45vw;
      top: 55%;
      left: 10vw;
      transform: translateY(-55%);
    }

  /* images */
  .image-style-1 { margin-bottom: 40px; }
    .image-style-1 img { width: 80%; max-width: 1000px; }

  .image-style-2 { margin: -80px 0 20px; }
    .image-style-2 img { width: 10vw; max-width: 200px; }

  /* box */
  .box-style-1 {
    background-size: cover;
    padding-top: 60px;
  }
    .box-style-1 .box-title { margin-bottom: 20px; }
    .box-style-1.flex-container.column-3 .flex-item { width: 29.33333%; margin-right: 5%; }
    .box-style-1.flex-container.column-3 .flex-item:last-child { margin-right: 0; }

  .box-style-2 .box-title { font-size: 18px; margin-bottom: 20px; }

  .box-style-3 .box-title { font-size: 18px; margin-bottom: 20px; }
  .box-style-3 .flex-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: linear-gradient(-70deg, #E67676 0%, #E67676 30%, #ED9E9E 30%, #ED9E9E 100%);
  }
    .box-style-3 .flex-item:first-child,
    .box-style-3 .flex-item:last-child {
      background: linear-gradient(-70deg, #09739A 0%, #09739A 30%, #4BC7F4 30%, #4BC7F4 100%);
    }
    .box-style-3 .flex-item .left-box { width: 40%; padding-right: 40px; }
      .box-style-3 .flex-item .left-box img { margin-bottom: -2vw; }
    .box-style-3 .flex-item .right-box { width: calc(60% - 40px); }

  .box-style-4 li { padding: 20px; }

  .box-style-5 { justify-content: center; align-items: flex-start; }
    .box-style-5 .left-box {
      width: 50%;
      text-align: center;
    }
      .box-style-5 .left-box .insert-image { margin-bottom: 10px; }
        .box-style-5 .left-box .insert-image img { width: 80%; }
    .box-style-5 .right-box { width: 50%; }
      .box-style-5 .right-box li {
        display: flex;
        flex-wrap: wrap;
        /* 旧 justify-content:left は実装差があるため flex-start に統一 */
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 10px;
      }
      .box-style-5 .right-box .insert-icon { width: 15%; padding-right: 20px; }
      .box-style-5 .right-box .insert-message { width: calc(85% - 20px); }

  /* text */
  .paragraph-style-1 { padding: 0 5%; }

  .insert-message { font-size: 13px; line-height: 150%; }
    .insert-message p::before {
      left: -20px;
      top: 50%;
      border-right: 20px solid #FFF;
      transform: translateY(-50%);
    }

  /* entry */
  .entry-box .insert-image { width: 50%; margin-right: 10%; }
  .entry-box .insert-menu { padding-top: 3vw; }
}


/* ==========================================================================
   4. ユーティリティ
   旧ソースでは h2{margin-bottom:20px}（要素セレクタ）に対して
   .title-margin-1（クラス）が詳細度で勝っていたが、
   h2 をクラス化したことで詳細度が並び、後勝ちで負けていた。
   メディアクエリより後ろに置いて元の優先順位を復元する。
   ========================================================================== */

.title-margin-1 { margin-bottom: 40px; }