@charset "UTF-8";
@import url("grid.css?1");
@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";

img {max-width:100%;height: auto;}
*,*:before,*:after {-webkit-box-sizing: inherit;box-sizing: inherit;}
html {scroll-padding-top: 300px;scroll-behavior: smooth;}

h2.square {
    position: relative;
    display: block;
    font-size: 2.9rem;
    padding: 0 0 0 35px;
    margin: 20px 0;
}

h2.square::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    display: block;
    width: 0.8em;
    height: 0.8em;
    background: #000;
    content: "";
}

h2.title {
    color: #364e96;/*文字色*/
    padding: 0.4em 0;/*上下の余白*/
    margin: 70px auto 40px auto;
    border-top: solid 3px #364e96;/*上線*/
    border-bottom: solid 3px #364e96;/*下線*/
    font-size: 3.0rem;
    width: 70%;
    text-align: center;
}

.main_text {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    font-size: 2.7rem;
    font-weight: 600;
}
.bol {font-weight: 600;}

/**********     タイトル     **********/
div.sum_tit {
  width: 90%;
    margin: 50px auto 40px;
    font-size: 2.9rem;
}

.text_wrap {
  font-weight: 600;
}

.sum_point {
    display: flex;
    align-items: center; /* アイコンとテキストを縦中央で揃える */
    gap: 10px; /* アイコンとテキストの間の隙間（お好みで調整してください） */
}

.sum_point::before { 
    content: '';
    display: block;
    flex-shrink: 0; /* テキストが2行以上になってもアイコンが潰れないようにする */
    width: 4em;
    height: 4em;
    background-image: url(../img/aicon1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.blue_back {
  width: 85%;
  margin: 25px auto;
  border-radius: 25px;
  font-size: 3.0rem;
  font-weight: 600;
  padding: 10px 2%;
  background-color: #155693;
  color: #fff;
  text-align: center;
}


/********************     ファーストビュー     ********************/
.main_img {max-width: 1200px;margin: 0 auto;}
img.pc_img {max-width: 1200px;}
.toi_box {
    width: 50%;
    margin: 50px auto;
}

.f_text {
    width: 90%;
    margin: 25px auto 15px;
    text-align: center;
    font-size: 2.7rem;
    font-weight: 600;
    color: #ED7D31;
}

/**********     メイン画像の下のフレックスボックス     **********/
/* ベースのコンテナ設定 */
.flex-container {
  width: 92%;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;         /* 要素が枠を超える場合に折り返す */
  justify-content: center; /* 要素を中央に配置（下の段の2つも中央に揃います） */
  gap: 16px;               /* 要素間のスペース（お好みで変更してください） */
  padding: 16px;           /* コンテナの外側の余白 */
}

/* 1つ1つの要素（角丸・センタリング） */
.flex-item {
  display: flex;
  justify-content: center; /* テキストの水平（左右）中央揃え */
  align-items: center;     /* テキストの垂直（上下）中央揃え */
  border: 2px solid #aaa;  /* 枠線の太さと色 */
  border-radius: 30px;     /* 枠線の角丸具合 */
  padding: 16px 0;         /* 内側の上下余白 */
  box-sizing: border-box;
  background-color: #fff;  /* 背景色（必要に応じて変更） */
  color: #555;
  font-size: 1.9rem;
}

/* =========================================
   768px以上（PC・タブレット）：5つ横並び
========================================= */
@media (min-width: 768px) {
  .flex-item {
    /* gap(16px) × 4つの隙間 = 64px を100%から引いて5等分 */
    width: calc((100% - 64px) / 5);
  }
}

/* =========================================
   767px以下（スマホ）：上段に3個、下段に2個
========================================= */
@media (max-width: 767px) {
  .flex-container {width: 99%;}
  /* まず全体の基本幅を3等分に設定（上段の3つに適用されます） */
  .flex-item {
    /* gap(16px) × 2つの隙間 = 32px を100%から引いて3等分 */
    width: calc((100% - 32px) / 3);
    font-size: 1.4rem;
  }

  /* 4番目以降の要素（下段の2つ）だけ横幅を広げる */
  .flex-item:nth-child(n+4) {
    /* gap(16px) × 1つの隙間 = 16px を100%から引いて2等分 */
    width: calc((100% - 16px) / 2);
  }
}

/**********     オンライン・オフライン外枠のコンテナ     **********/
  .last-mile-container {
    width: 80%;
    margin: 20px auto 80px;
  }

  /* フロー部分のラッパー（Flexboxで横並び・縦並びを制御） */
  .last-mile-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  /* 各ステップのボックス */
  .step-box {
    border: 2px solid #155693;
    background-color: #d6dce5;
    border-radius: 8px;
    padding: 20px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 80px;
    box-sizing: border-box;
    position: relative;
  }

  /* 3つ目のボックスの特別スタイル（オレンジ） */
  .step-box.offline-box {
    border: 2px solid #e38404;
    background-color: #fbe5d6;
  }

  /* ONLINE / OFFLINE のラベル */
  .step-type {
    text-align: center;
    font-size: 2.4rem;
    color: #155693;
    margin-bottom: 8px;
    font-weight: bold;
  }

  .step-type.offline-type {
    color: #fd9304;
  }

  /* 作業内容のテキスト */
  .step-name {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #1a202c;
  }

  /* 3つ目のボックスと注釈をまとめるラッパー */
  .step-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    align-self: stretch; /* 他のボックスと高さを揃えるベース */
  }

  /* ボックス外の注釈テキスト */
  .step-note {
    color: #fd9304;
    font-size: 2.0rem;
    font-weight: 600;
    position: absolute;
    bottom: -33px;
    right: 0;
    white-space: nowrap;
  }

  /* 矢印（CSSで描画） */
  .flow-arrow {
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
  }

  .flow-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    /* デフォルトは右向き矢印 */
    transform: translate(-50%, -50%) rotate(45deg);
    transition: transform 0.3s ease;
  }

  /* --- スマホ表示用（レスポンシブ対応） --- */
  @media (max-width: 768px) {
    .last-mile-flow {
      flex-direction: column; /* 縦並びに変更 */
      align-items: stretch;
    }

    .flow-arrow {
      align-self: center;
      margin: 8px 0;
    }

    .flow-arrow::after {
      /* スマホ時は下向き矢印に変更 */
      transform: translate(-50%, -50%) rotate(135deg);
    }

    .step-wrapper {
      margin-bottom: 24px; /* 注釈テキスト用の余白を確保 */
    }

    .step-type {font-size: 1.8rem;}
    .step-name {font-size: 1.9rem;}
    .step-note {
      right: auto;
      left: 50%;
      transform: translateX(-50%); /* スマホでは中央寄せ */
      bottom: -38px;
      font-size: 1.6rem;
    }
  }

/**********     グレイバックフレックス     **********/

.gray_flex {
  width: 90%;
  margin: 20px auto;
  display: flex;
}

.gray_item {
  width: 30%;
  margin: 20px 1.5%;
  border: solid 2px #2b3a7e ;
  background-color: #dbdbdb;
  display: flex;
  flex-direction: column;
}

.gray_tit {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 600;
  margin: 20px 5%;
}

.gray_text {
  font-size: 2.2rem;
  margin: 10px 5% 20px;
}

/********************      セクション　2      ********************/
/* 全体のコンテナ */
.bpo-container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  max-width: 900px;
  margin: 20px auto 40px;
}

/* 各ボックスの共通スタイル */
.bpo-box {
  flex: 1;
  border-radius: 12px;
  padding: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 貴社（左）ボックスのスタイル */
.client-box {
  background-color: #d6dce5;
  border: 2px solid #155693;
}

/* T-Local（右）ボックスのスタイル */
.tlocal-box {
  background-color: #fbe5d6;
  border: 2px solid #fc9204;
}

/* --- 追加・修正箇所：ラベルとタイトルを横並びにする --- */
.box-header {
  display: flex;
  align-items: baseline; /* テキストの下端を揃える */
  gap: 12px; /* ラベルとタイトルの間の余白 */
  margin-bottom: 20px;
}

/* 左上の小さなラベル */
.box-label {
  font-size: 18px;
  font-weight: 600;
}

/* ボックスのタイトル (h3からdivに変更) */
.box-title {
  font-size: 22px;
  font-weight: bold;
  color: #155693 ;
}

/* 右側ボックスのタイトル色 */
.tlocal-title {
  color: #fc9204;
}
/* --------------------------------------------------- */

/* 画像スタイル */
.box-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
  object-fit: cover;
}

/* リストの共通スタイル */
.box-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.box-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: 2.0rem;
  color: #1a202c;
  line-height: 1.3;
}

.box-list li:last-child {
  margin-bottom: 0;
}

/* リストのドット（疑似要素で作成） */
.box-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* 左側リストのドット色 */
.client-list li::before {
  background-color: #1c3659;
}

/* 右側リストのドット色 */
.tlocal-list li::before {
  background-color: #1c3659;
}

/* 矢印を囲むラッパー */
.bpo-arrow-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

/* 矢印画像のスタイル（通常時は右向き） */
.bpo-arrow-img {
  width: 40px; /* 画像のサイズに合わせて数値を調整してください */
  height: auto;
  /* 回転を滑らかにする場合は以下のtransitionを入れます */
  transition: transform 0.3s ease; 
}

/* --- レスポンシブ対応 (767px以下) --- */
@media (max-width: 767px) {
  .bpo-container {
    flex-direction: column; /* 縦並びに変更 */
    width: 85%;
    //margin: 20px auto;
  }

  .bpo-arrow-wrapper {
    margin: 20px 0; /* ボックスが縦並びになった際の上下の余白 */
  }

  /* 右向きの画像を時計回りに90度回転させて下向きにする */
  .bpo-arrow-img {
    transform: rotate(90deg);
  }
  .box-label {font-size: 1.6rem;}
  .box-title {font-size: 1.8rem;}
  .box-list li {font-size: 1.6rem;}
}

/*********     左右3分割ボックス     **********/
.process-container {
  display: flex;
  gap: 16px;
  max-width: 900px;
  margin: 30px auto 60px;
}

/* 左右の各グループ */
.process-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 3つのボックスを囲むコンテナ（PCでは横並び） */
.box-container {
  display: flex;
  gap: 8px;
  flex: 1;
}

/* 個別の角丸ボックス */
.process-box {
  flex: 1;
  border-radius: 12px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

/* 数字のスタイル */
.step-num {
  font-size: 28px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 24px;
}

/* タイトルのスタイル */
.step-title {
  font-size: 19px;
  font-weight: bold;
  color: #333333;
  text-align: center;
}

/* 下部の横長ラベル */
.process-label {
  text-align: center;
  padding: 12px;
  border-radius: 6px;
  font-size: 19px;
  //font-weight: bold;
}

/* --- 左グループの配色 --- */
.left-group .process-box {
  background-color: #dce3ec;
  border: 2px solid #1c4578;
}
.left-group .process-label {
  background-color: #dce3ec;
  color: #1c4578;
}

/* --- 右グループの配色 --- */
.right-group .process-box {
  background-color: #fbe6d5;
  border: 2px solid #ea8519;
}
.right-group .process-label {
  background-color: #fbe6d5;
  color: #ea8519;
}

/* --- レスポンシブ対応 (767px以下) --- */
@media (max-width: 767px) {
  /* グループ自体（青い領域とオレンジの領域）は縦に並べる */
  .process-container {
    flex-direction: column;
    gap: 32px;
    width: 95%;
  }
  
  /* 左3つ・右3つはそれぞれ【横並び】を維持する */
  .box-container {
    flex-direction: row; 
  }
  
  .step-num {
    font-size: 22px; /* スマホ用に数字を少し小さく */
    margin-bottom: 16px;
  }
  
  .process-label {
    font-size: 14px;
    padding: 10px;
  }
}

@media (max-width: 767px) {
    /* コンテナの左右余白を狭くする */
    .container {
        padding: 0 10px;
    }
    
    /* 3連ボックスの余白と文字サイズを縮小して収める */
    .box-container {
        gap: 4px;
    }
    .process-box {
        padding: 10px 4px;
    }
    .step-title {
        font-size: 16px;
    }

    /* 注釈テキストの改行を許可して幅を制御する */
    .step-note {
        white-space: normal;
        width: 100%;
        text-align: center;
    }
}

/********************     セクション2     ********************/

/* コンテナ全体（PC用：2列グリッド） */
.tasks-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 32px; /* 縦方向の余白を多めに確保（タイトルがはみ出るため） */
  max-width: 900px;
  margin: 40px auto;
}

/* 個別のカード（角丸ボックス） */
.task-card {
  position: relative;
  border: 1.5px solid #f38f00; /* オレンジ色のボーダー */
  border-radius: 12px;
  padding: 40px 24px 24px 32px;
  background-color: #ffffff;
  box-sizing: border-box;
}

/* ボーダーに重なるタイトル */
.task-title {
  position: absolute;
  top: -18px; /* 上にはみ出させる */
  left: -1.5px; /* ボーダーの位置に左端を合わせる */
  background-color: #f38f00;
  color: #ffffff;
  margin: 0;
  padding: 8px 32px;
  font-size: 19px;
  font-weight: bold;
  border-radius: 8px; /* タイトルの角丸 */
}

/* リストのスタイル */
.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.task-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 14px;
  color: #333333;
  font-size: 18px;
  line-height: 1.1;
}

.task-list li:last-child {
  margin-bottom: 0;
}

/* カスタムのリストマーカー（黒寄りのグレーのドット） */
.task-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #555555;
  font-size: 16px;
}

/* --- レスポンシブ対応 (767px以下) --- */
@media (max-width: 767px) {
  .tasks-container {
    grid-template-columns: 1fr; /* 1列にして縦に5つ並べる */
    gap: 48px; 
    padding: 0 16px;
    //width: 98%;
    margin: 30px auto;
  }
  .task-card {padding: 38px 10px 20px 20px;}
  .task-title {font-size: 1.7rem;}
  .task-list li {font-size: 1.5rem;}
}

/**********     ポスイラスト     **********/
/* 全体のコンテナ（PC用：横並び） */
.pos-container {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: center;
  gap: 56px;
  max-width: 800px;
  margin: 40px auto 70px;
}

/* 画像ラッパー */
.pos-image-wrapper {
  flex: 0 0 40%; /* 幅の比率調整 */
  text-align: center;
}

/* 画像本体 */
.pos-image {
  width: 100%;
  max-width: 250px;
  height: auto;
}

/* テキストラッパー */
.pos-text-wrapper {
  flex: 1;
}

/* 見出しのスタイル（下線付き） */
.pos-title {
  font-size: 24px;
  font-weight: normal;
  color: #333333;
  margin: 0 0 24px 0;
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 1px;
  text-underline-offset: 4px; /* 下線と文字の隙間 */
}

/* リストのスタイル */
.pos-list {
  padding-left: 28px; /* 数字とテキストの余白 */
  margin: 0;
  color: #333333;
}

/* リストアイテムのスタイル */
.pos-list li {
  font-size: 19px;
  margin-bottom: 16px;
  line-height: 1.4;
}

.pos-list li:last-child {
  margin-bottom: 0;
}

/* --- レスポンシブ対応 (767px以下) --- */
@media (max-width: 767px) {
  .pos-container {
    /* 画像をテキストの下にするため、並び順を反転 */
    flex-direction: column-reverse;
    gap: 32px;
    padding: 0 20px;
  }

  .pos-title {
    font-size: 1.6rem;
  }

  .pos-list li {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

/********************     セクション3     ********************/

/**********     日本地図部分     **********/

/* 全体のコンテナ設定 */
    .flow-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 900px;
        margin: 0 auto 60px;
        padding: 20px;
    }

    /* 左側のリスト部分 */
    .flow-list {
        flex: 1;
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .flow-item {
        display: flex;
        align-items: flex-start;
    }

    .flow-number {
        width: 48px;
        height: 48px;
        background-color: #f38f1d;
        color: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        margin-right: 20px;
        flex-shrink: 0;
    }

    .flow-text h3 {
        margin: 0 0 10px 0;
        font-size: 22px;
        font-weight: 600;
        color: #333333;
        line-height: 1.2;
    }

    .flow-text p {
        margin: 0;
        font-size: 19px;
        color: #444444;
        padding-left: 1em; /* 説明文を少し字下げ */
    }

    /* 右側の画像部分 */
    .flow-image {
        flex: 1;
        display: flex;
        justify-content: center;
        padding-left: 40px;
    }

    .flow-image img {
        max-width: 100%;
        height: auto;
    }

    /* レスポンシブ対応（767px以下） */
    @media (max-width: 767px) {
        .flow-container {
            flex-direction: column; /* 縦並びに変更 */
            padding: 20px;
        }

        .flow-image {
            padding-left: 0;
            margin-top: 10px; /* テキストとの間隔を確保 */
            width: 60%;
        }
    }

/**********     黄色バックボックス     **********/

/* 全体のコンテナ（PC用：2列グリッド） */
.benefits-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px; /* ボックス間の余白 */
  max-width: 900px;
  margin: 40px auto 60px;
}

/* 個別のカード（角丸ボックス） */
.benefit-card {
  background-color: #fdf5d3; /* 薄い黄色の背景 */
  border-radius: 12px;
  padding: 32px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 見出しのスタイル */
.benefit-title {
  font-size: 22px;
  color: #111111;
  font-weight: bold;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  position: relative;
}

/* 見出しの下の緑色の線（疑似要素で作成） */
.benefit-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background-color: #66cc00; /* 緑色 */
  border-radius: 3px;
}

/* 説明文のスタイル */
.benefit-text {
  font-size: 18px;
  color: #333333;
  line-height: 1.6;
  margin: 0;
  /* 画像のインデントを再現するために左に余白を設ける */
  padding-left: 20px; 
}

/* --- レスポンシブ対応 (767px以下) --- */

@media (max-width: 767px) {
  .benefits-container {
    grid-template-columns: 1fr;
    gap: 24px;
    width: 85%;
  }
  
  .benefit-card {
    padding: 10px 3%;
  }
  .benefit-title {font-size: 1.8rem;}
  .benefit-text  {font-size: 1.6rem;}
}

/********************     セクション4     ********************/

.target-list-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.target-item {
    display: flex;
    align-items: center;
    gap: 30px;
}

.target-badge {
    flex: 0 0 auto;
    width: 320px;
    border: 1.5px solid #a0a0a0;
    border-radius: 40px; /* 角を丸くする */
    padding: 16px 20px;
    text-align: center;
    box-sizing: border-box;
}

.target-badge-text {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    margin: 0;
    text-align: center;
}

.target-description {
    flex: 1;
}

.target-description-text {
    font-size: 20px;
    color: #333333;
    margin: 0;
}

/* レスポンシブ対応 (767px以下) */
@media (max-width: 767px) {
    .target-list-container {
        gap: 40px; /* アイテム間の余白を少し広げる */
        width: 85%;
        margin: 20px auto;
    }

    .target-item {
        flex-direction: column; /* 縦並び（2行）にする */
        align-items: flex-start; /* 左寄せ */
        gap: 15px; /* バッジと説明文の間の余白 */
    }

    .target-badge {
        width: 100%; /* 横幅いっぱいに広げる */
        max-width: 400px; /* 最大幅を制限 */
    }
    .target-badge-text {font-size: 1.6rem;}
    .target-description-text {font-size: 1.4rem;}
}

/**********     last_text     **********/
.last_text {
  width: 85%;
  margin: 40px auto;
}

.last_blue {
  font-size: 3.1rem;
  margin: 0 auto 30px;
  color: #155693;
  font-weight: 600;
}

.last_desc {
  font-size: 2.5rem;
}

@media (max-width: 767px) {
  .last_text {width: 98%;}
  .last_blue {font-size: 1.9rem;}
  .last_desc {font-size: 1.6rem;}
}
/**********     CTA     **********/

a.non {
    text-decoration: none;
}

.button-28 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 70%;
    margin:40px auto 0;
    padding: 0.5em 2em;
    overflow: hidden;
    border-radius: 15px;
    background-color: #404040;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 600;
}

.button-28:hover {
    background-color: transparent;
    color: #000;
}

.button-28::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #fff;
    content: '';
    transition: width .3s ease;
}

.button-28:hover::before {
    width: 100%;
}


/*問い合わせ-------------------------------------*/

.note {
    max-width: 1000px;
    margin: 20px auto 0;
    font-size: 1.7rem;
    line-height: 2.1;
}

@media screen and (min-width:769px){
    br.spbr {display: none;}
}

@media screen and (max-width:768px){
    .main_img   {margin: 20px 0 0 0;}
    h2.title    {font-size: 2.2rem;}
    h2.work     {font-size: 1.9rem;}
    h4          {font-size: 2.2rem;}
    .note       {font-size: 1.5rem;line-height:1.8;}
    .main       {margin-top: 20px;}
    .main_text  {font-size: 1.7rem;}
    h2.square   {font-size: 1.9rem;padding: 0 0 0 22px;}
    .button-28 {width: 95%;font-size: 1.5rem;padding: 0.8em 0.5rem;}
    .blue_back {width: 98%;font-size: 1.6rem;}
    .f_text     {font-size: 1.7rem;}
    .gray_flex {display: block;width: 98%;}
    .gray_item {width: 90%;margin: 20px auto;}
    .gray_tit {font-size: 1.7rem;}
    .gray_text {font-size: 1.5rem;}

    div.sum_tit {
      width: 98%;
      margin: 50px auto 40px;
      font-size: 1.8rem;
      line-height: 1.1;
    }
    .sum_point::before {
      width: 2.5em;
      height: 2.5em;
    }
}