/*
  =====================================================================
   File:     real_dx_service.css
   Author:   株式会社リアル (https://www.j-real.com/)
   Created:  2025-11-06
   Updated:  2025-11-06
   Description:
     リアル IT/DX導入推進サービス 用スタイルシート。
     本スタイルシートおよび関連画像・レイアウトの著作権は
     株式会社リアルに帰属します。無断転載・複製を禁じます。

   Copyright (C) 2025 株式会社リアル. All Rights Reserved.
  =====================================================================
*/

.myDiv {
    margin-left: auto;
    margin-right: auto;
}

.title_7 {
    background-color: lightblue;
    text-align: left;
    color: white;
    padding-left: 10%;
    padding-right: 0%;
    text-align: left;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    background-color:#fffdef;
}

.content {
    width: 80%;
    margin: 0 auto;
    padding: 40px 0;
    background-color: #fffdef;
    /* text-align: center; */
}

img {
    max-width: 100%;
    height: auto;
    /* display: block; */
    margin-top: 20px;
    text-align: center;
}

h1 {
    font-size: clamp(1.8rem, calc(1vw + 1.5rem), 5rem);
}
h2 {
    padding: 0.5rem 0;
    margin-bottom: 0.2rem;
    border-bottom: 6px double black;
    color: #353533;
    font-weight: bold;
    font-size: clamp(1.5rem, calc(0.8vw + 1.5rem), 4rem);
}
h3 {
    padding: 0.5rem 0;
    margin-bottom: 0.2rem;
    border-bottom: 2px solid black;
    color: #353533;
    font-weight: bold;
    font-size: clamp(1.2rem, calc(1.25vw + 1.5rem), 3rem);  
}
p {
    font-size: clamp(0.5rem, calc(0.4vw + 1rem), 2rem);
    line-height: 200%;
}
.p2 {
    font-size: clamp(0.5rem, calc(0.6vw + 0.6rem), 2rem);
    line-height: 175%; 
}

.pStrong {
    font-size: clamp(1.0rem, calc(1.5rem), 5rem);
    font-weight: bold;
}

.image-text {
    font-size: clamp(0.1rem, calc(0.5vw + 0.7rem), 1rem);
    line-height: 100%;
}

/* 記事内文章 */

/* ネガティブ吹き出し１ */
.negative_1 {
    position: relative;
    padding: 1rem 2rem 1rem 2rem;
    border-radius: 150px;
    border-bottom: 10px solid #333;
    background-color: white;
    color: #333;
    font-weight: bold;
    text-align: center;
}

/* ネガティブイメージ２ */
.imgNegative_2 {
    padding-left: 3%;
    margin-left: 5%; 
    width: 27%; 
    height: 15%; 
    display: inline-block;
}

/* ネガティブ吹き出し２ */
.negative_2 {
    /* display: inline-block; */
    position:relative;
    padding: 1em 1em;
    border-radius: 45px;
    /* border-bottom: 10px solid #333; */
    background-color: #5093af;
    color: white;
    /* font-weight: bold; */
    vertical-align: middle;
    width: 75%; margin-left: 5%;
}

/* ポジティブ吹き出し１ */
.positive_1 {
    position: relative;
    padding: 1rem;
    border-radius: 100px;
    border-bottom: 10px solid #b63d01;
    background-color: #ff5400;
    color: white;
    font-weight: bold;
    text-align: center;
}

/* ポジティブイメージ２ */
.imgPositive_2 {
    margin-left: 5%; width: 27%; height:15%; display: inline-block;
}

/* ポジティブ吹き出し２*/
.positive_2 {
    position: relative;
    /* padding: 1rem; */
    border-radius: 45px;
    /* border-bottom: 10px solid #333; */
    background-color: #ff5400;
    color: white;
    /* font-weight: bold; */
    /* text-align: center; */
    padding-left: 3%;
    padding-right: 3%;
    /* padding: -10rem; */
    /* margin-left: 15%; */
    width: 65%;
}
/* ポジティブ吹き出し３*/
.positive_3 {
    position: relative;
    border-radius: 25px;
    background-color: #ff5400;
    color: white;
    /* font-weight: bold; */
    padding-left: 3%;
    text-align: center;
}
/* タイトル(機能外) */
.title_other {
    position: relative;
    padding: 1rem;
    border-radius: 20px;
    /* border-bottom: 10px solid #333; */
    background-color: #077626;
    color: white;
    font-weight: bold;
    padding-left: 5%;
    margin-top: 5%;
}
/* サービス紹介 */
.service {
    position:relative;
    padding: 1rem;
    border-radius: 40px;
    color: white;
    /* font-weight: bold; */
}

/* 文中強調 */
.highlight_1 {
    color: #077626;
    background: linear-gradient(transparent 80%, yellow 0%);
}

/* 金額の変動通知 */
.price-note {
  font-size: 0.9em;
  color: #444;
  margin-left: 1em;
}

/* 価格表 */
table {
    width: 80%;
    border-collapse: collapse;
    margin-bottom: 1em;
    margin-left: 10%;
    margin-right: 10%;
}
th {
    padding: 0.5em;
    border: 3px solid black;
    text-align: left;
    background-color: white;
    text-align: center;
}
td {
    padding: 0.5em;
    border: 3px solid black;
    text-align: left;
    background-color: white;
}

/* 問い合わせ移動ボタン */
.fixed_btn {
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 6px 40px;
    z-index: 99999;

    border-radius: 100px; 
    /* border-bottom: 10px solid #b63d01; */ 
    background-color: #ff5400;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: clamp(0.5rem, calc(0.7vw + 0.7rem), 1rem);
    line-height: 200%;
}
button:hover {
  background-color: #f05101;; /* ホバー時の背景色 */
  box-shadow: 0px 10px 10px #dfddd1;  /* ホバー時の影 */
  transform: translateY(-7px); /* ホバー時に少し上に移動 */
}
button:active {
  transform: translateY(2px); /* クリック時に下に移動 */
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1); /* クリック時に影を消す */
  /* background-color: #f05101;  背景色も変える場合はコメントを外す */
}

/* 2x2 グリッドにするコンテナ */
.box-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 3列 */
  gap: 16px; /* ボックス間の余白 */
  max-width: 900px;
  margin-left: 10%;
  margin-right: 10%;
}

/* 四角（カード） */
.box {
/*  background-color: #0078d4; *//* お好みで色変更 */
  color: #fff;
  border-radius: 36px;
  padding: 20px;
  box-sizing: border-box;
  height: 200px; /* ← 高さ調整したい場合ここを変更 */
  display: flex;
  flex-direction: column;
  justify-content: first baseline;
}

/* 見出し（大きめ） */
.box-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 12px;
  text-align: center;
}

/* 説明（小さめ） */
.box-text {
  font-size: 1.0rem;
  line-height: 1.4;
  text-align: center;
}

/* 画面が狭い場合 → 1列表示に切り替え */
@media (max-width: 600px) {
  .box-container {
    grid-template-columns: 1fr; /* 1列 */
  }
}

/* 導入事例リンク用ボタン */
.positive_link {
    position: relative;
    /* padding: 1rem;*/
    border-radius: 100px;
    /* border-bottom: 10px solid #b63d01;*/
    background-color: #ff6410;
    color: white;
    font-weight: bold;
    text-align: center;
}


/* 間をあけるためのスペーサー */
.spanSpacer {
    width: 1px;
    height: 40px;
}