h2 {
    font-size: 2.4rem; /* 下層ページのフォントサイズ調整 */
    line-height: 1.5; /* 下層ページの行間設定 */
}

h3 {
    font-size: 2rem; /* 下層ページのフォントサイズ調整 */
}


h4 { /* 下層ページのフォントサイズ調整と装飾 */
    padding-left:10px;
	padding-bottom:3px;
	border-bottom:1px dotted #999;
	color:#15417b;
	margin-top:20px;
	font-size:1.5rem;
}

#main a {
  color: ##0062AC !important; /* 制作事例の中にあるURLを青色にしたい */
  text-decoration: none;
}

.ex_pamphlet li img {
  border:1px solid #ccc; /* 実績の画像に線をつけたい */
}

.post-20 ul.ex_pamphlet {
  grid-template-columns: repeat(2, 1fr); /* カラー印刷は２列 */
}

.post-5 ul.ex_pamphlet {
  grid-template-columns: repeat(3, 1fr); /* 会社案内の画像にも流用 */
}

.post-5 div { /* 直書きCSS無視の余白の調整用 */
    margin: 0 !important;
    padding: 3em !important;
}

.post-5 div.map { /* 上CSSのリセット */
    margin: 0 !important;
    padding: 0 !important;
}

.masking-catalog li { /* マスキングテープのすぐ使えるシリーズのところ */
    list-style: none;
    float: left;
    margin: 30px 6px 15px;
}

.bl_example h3{
    font-size: 1.4rem;
	padding: 0.25em;
    margin-top: 3em;
    border-bottom: 0.125rem solid #0062AC;
    background: #f7f7f7;
}

.img_right {
	float:right;
	margin-left:15px;
}

.img_ex {
	border:1px solid #ccc;
}

.clear {
	clear:both; /* ないと崩れる所あり */
}

.memoldar-products {
    overflow: hidden;
    zoom: 1;
}

.memoldar-product {
    float: left;
    width: 50%;
    text-align: center;
    margin-bottom: 20px;
}

.memoldar-flow-branch {
    overflow: hidden;
    zoom: 1;
}

.memoldar-flow-branch > div {
    float: left;
    width: 46%;
    margin: 0 2%;
}

.memoldar-flow-branch h3 {
    width: auto !important;
}

.memoldar-price .price {
    text-align: right;
}

table.memoldar-price td{
    padding: 5px;
}

@media screen and (max-width: 767px) {
  /* スマホ用のスタイル */
    h2 {
        font-size: 1.6rem; /* 下層ページのフォントサイズ調整 */
        line-height: 1.5; /* 下層ページの行間設定 */
        text-align: left !important;
    }
    h3 {
        font-size: 1.4rem; /* 下層ページのフォントサイズ調整 */
        line-height: 1.5; /* 下層ページの行間設定 */
    }
    h4 { /* 下層ページのフォントサイズ調整と装飾 */
        font-size:1.2rem;
    }

    .post-5 div { /* 直書きCSS無視の余白の調整用 */
        margin: 0 !important;
        padding: 1em !important;
    }

    /* テーブルの各要素をブロック表示にする */
    .post-5 table, 
    .post-5 thead, 
    .post-5 tbody, 
    .post-5 th, 
    .post-5 td, 
    .post-5 tr {
        display: block;
    }

    /* 行の間に余白と境界線を追加 */
    .post-5 tr {
        margin-bottom: 15px;
        border-bottom: 1px solid #ccc;
    }

    /* 見出し（<th>）とデータ（<td>）をブロック表示にして縦並びにする */
    .post-5 th, 
    .post-5 td {
        border: none;
        padding: 10px;
    }

    /* セルごとに見出しを疑似要素で表示 */
    .post-5 td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
    }
}


/* --- 親要素 --- */
#envelope-campaign {
    width: 100%;
    max-width: 800px; /* 全体が広がりすぎないように制限 */
    margin: 40px auto;
    padding: 20px 0; /* 左右の余白を削除、上下のみ */
    
    /* 背景・枠線を削除 */
    background-color: transparent;
    border: none;
    
    color: #333;
    box-sizing: border-box;
    font-family: inherit; 
}

/* レイアウト崩れ防止のリセット */
#envelope-campaign * {
    box-sizing: border-box;
}

/* --- 見出しエリア --- */
#envelope-campaign > div:first-child {
    text-align: center;
    margin-bottom: 30px;
}

/* タイトル (h3) */
#envelope-campaign h3 {
    color: #333;
    margin: 0 0 15px 0;
    line-height: 1.4;
    border: none;
}

/* タイトル上の小さい文字 */
#envelope-campaign h3 span {
    font-size: 18px;
    font-weight: normal;
    display: inline-block;
    margin-bottom: 5px;
    color: #666;
}

/* --- 仕上がり満足バッジ (シンプルテキスト) --- */
#envelope-campaign aside {
    display: block;
    text-align: center;
    margin: 0 auto;
    color: #C80852;
}

#envelope-campaign aside p:first-child {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0 0 5px 0;
    display: inline-block;
    border-bottom: 2px solid #C80852;
    padding-bottom: 2px;
}
#envelope-campaign aside p:last-child {
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
    color: #333;
}

/* --- リスト (ul) --- */
#envelope-campaign ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* リスト項目 (li) */
#envelope-campaign ul li {
    background: #f9f9f9; /* リスト自体の背景は薄いグレーで残す */
    color: #333;
    margin-bottom: 12px;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid #ddd; /* リスト項目の枠線 */
    
    /* 横並びの設定 */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左詰め */
}
#envelope-campaign ul li:last-child {
    margin-bottom: 0;
}

/* リスト内の数字 (.num) */
#envelope-campaign ul li .num {
    background: #0062AC;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0; /* 縮小しない */
}

/* リスト内のテキスト (.text) */
#envelope-campaign ul li .text {
    font-size: 16px;
    font-weight: 500;
    flex-grow: 1; /* 余白を埋める */
}
#envelope-campaign ul li strong {
    color: #C80852;
    font-size: 18px;
    background: linear-gradient(transparent 70%, #ffcccc 70%);
}

/* --- 追加した画像 (.icon-envelope) --- */
#envelope-campaign .icon-envelope {
    width: 40px;  /* 画像の幅 */
    height: auto;
    margin-left: 15px; /* テキストとの間隔 */
    opacity: 0.8;
    flex-shrink: 0; /* 画像が潰れないようにする */
}

/* --- ボタンエリア --- */
#envelope-campaign > div:last-child {
    text-align: center;
    margin-top: 35px;
}

/* ボタン (aタグ) */
#envelope-campaign > div:last-child a {
    display: inline-block;
    background: #C80852;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    padding: 18px 40px;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s, background 0.2s;
}

#envelope-campaign > div:last-child a:hover {
    transform: translateY(-2px);
    background: #0062AC;
    box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}

/* --- スマホ用調整 --- */
@media (max-width: 768px) {
    #envelope-campaign { padding: 0 15px; }
    
    #envelope-campaign h2 { font-size: 22px; }
    #envelope-campaign h2 span { font-size: 14px; }
    
    #envelope-campaign ul li {
        padding: 15px;
    }
    
    /* スマホで画像サイズ調整 */
    #envelope-campaign .icon-envelope {
        width: 30px;
        margin-left: 10px;
    }
    
    #envelope-campaign > div:last-child a {
        width: 100%;
        padding: 15px;
        font-size: 16px;
    }
}

.list_result_top {
  display: flex;          /* 横並びにする */
  list-style: none;       /* ・（黒丸）を消す */
  padding: 0;             /* デフォルトの余白をリセット */
  margin: 0;              /* デフォルトの余白をリセット */
  gap: 10px;              /* 画像同士の間隔（任意で調整してください） */
  flex-wrap: wrap;        /* 画面幅が狭い時に折り返す設定（折り返さないなら nowrap） */
}

.list_result_top li {
  /* 必要に応じてliの調整 */
  line-height: 1;         /* 画像の下に隙間ができないようにする調整 */
}