*, 
*:before, *:after { 
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -o-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
    }

/* === RESET ======================================= */
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th { font-size: 1em; font-weight: normal; font-style: normal; }
ul, ol { list-style: none; }
fieldset, img { border: none; }
caption, th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

/* === TYPE ======================================= */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* 基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

 h1{
	color: #666666;
	font-size: 150%;
    font-weight: bold;
	margin-bottom: 0px; 
 }

/*font 色 span class="" */
/*font 色 緑*/
.font_G1{
  color: #042818;
  font-weight: bold;
}


/* ロゴエリア */
.logo-area {
    padding: 20px;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
}

.logo-area img{
    width: 250px;
    height:80px;
}
.logo {
   /* height: 60px;  ロゴの大きさに合わせて調整 */
}

/* ナビゲーションバー（帯） */
.main-nav {
    background-color: #1AA16C; /* 指定色 */
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-list {
    display: flex;
    justify-content: center;
    list-style: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 0 0;
}

/* メニュー項目 */
.nav-list > li {
    position: relative;
    margin: 0 60px 0 0; /* 左右に30pxずつ、合計60pxの間隔を作ります。ここを増減して調整してください */
}

.nav-list > li > a {
    display: block;
    padding: 15px 25px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

/* ホバー時の色変更 */
.nav-list > li > a:hover {
    background-color: #148558; /* 少し暗めのグリーン */
}

/* 下矢印のスタイル */
.arrow {
    font-size: 0.8em;
    margin-left: 5px;
}

/* 下層メニュー（ドロップダウン） */
.sub-menu {
    display: none; /* 初期状態は非表示 */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    min-width: 350px;
    list-style: none;
}

/* 親メニューホバーで子メニューを表示 */
.has-child:hover .sub-menu {
    display: block;
}

.sub-menu li {
    border-bottom: 1px solid #eee;
}

.sub-menu li a {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    font-size: 0.95em;
    transition: background-color 0.3s, color 0.3s;
}

/* 子メニューのホバー時 */
.sub-menu li a:hover {
    background-color: #f4f4f4;
    color: #1AA16C;
}

/* レスポンシブ対応（スマホ表示） */
@media screen and (max-width: 768px) {
    .nav-list {
        flex-direction: column;
    }
    
    .nav-list > li {
        width: 100%;
    }

    .sub-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        background-color: #f9f9f9;
    }

    .has-child:hover .sub-menu {
        display: block;
    }
}

/* --- コンテンツエリア全体の共通設定 --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    color: #1AA16C; /* 会社指定色 */
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}

/* タイトルの下の線 */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #1AA16C;
}

/* --- 1. メインビジュアルエリア --- */
.main-visual {
    width: 100%;
    height: 80vh; /* 画面高さの80%を使う大きなエリア */
    background-image: url('../img/j_1.png'); /* ★ここに大きな画像のパスを指定 */
    background-size: cover; /* 画像を全体に広げる */
    background-position: center; /* 画像の中央を表示 */
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center; /* 文字を上下中央に */
    justify-content: center; /* 文字を左右中央に */
    color: #ffffff; /* 画像の上の文字は白 */
}

/* 画像の上に薄い膜を張って文字を読みやすくする */
.main-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 黒い透明な膜（0.4は濃さ） */
    z-index: 1;
}

.main-visual-content {
    position: relative;
    z-index: 2; /* 膜より上に表示 */
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
}

.main-visual-content h2 {
    font-size: 2.5rem; /* 大きな文字 */
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 文字に影をつけて可読性アップ */
}

.main-visual-content p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* お問い合わせボタン */
.btn-primary {
    display: inline-block;
    padding: 15px 40px;
    background-color: #1AA16C; /* 会社指定色 */
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 30px;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-primary:hover {
    background-color: #148558; /* ホバーで少し暗く */
    transform: translateY(-3px); /* 少し上に浮くアニメーション */
}

/* --- 2. 事業内容4項目エリア --- */
.services-section {
    padding: 100px 0;
    background-color: #f9f9f9; /* 薄いグレーの背景 */
}

/* 4項目を並べるグリッド設定 */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列に均等配置 */
    gap: 30px; /* 項目間の隙間 */
}

/* 各項目（カード全体がリンク） */
.service-item {
    background-color: #ffffff;
    padding: 40px 30px;
    border-radius: 8px;
    text-decoration: none; /* リンクの下線を消す */
    color: #333;
    text-align: center;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05); /* 軽い影 */
    transition: box-shadow 0.3s, transform 0.3s;
    display: flex;
    flex-direction: column; /* 中身を縦並びに */
    align-items: center;
}

/* ホバー時の効果 */
.service-item:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* 影を濃く */
    transform: translateY(-5px); /* 上に浮かす */
}

/* アイコンエリア */
.service-icon {
    width: 230px;
    height: 200px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon img {
    max-width: 100%;
    height: auto;
}

.service-item h4 {
    font-size: 1.2rem;
    color: #1AA16C; /* 会社指定色 */
    margin-bottom: 15px;
    line-height: 1.4;
    font-weight: bold;
}

.service-item p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #666;
    flex-grow: 1; /* テキスト量に関わらず高さを揃える */
}

/* 「詳しく見る」テキスト */
.more-text {
    font-size: 0.9rem;
    font-weight: bold;
    color: #1AA16C;
}

/* --- レスポンシブ対応 --- */

/* タブレット（960px以下） */
@media screen and (max-width: 960px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2列×2行にする */
    }
    
    .main-visual-content h2 {
        font-size: 2.2rem; /* 文字を少し小さく */
    }
}

/* スマホ（600px以下） */
@media screen and (max-width: 600px) {
    .main-visual {
        height: 60vh; /* 画像エリアを少し低く */
    }

    .main-visual-content h2 {
        font-size: 1.8rem;
    }

    .services-grid {
        grid-template-columns: 1fr; /* 1列（縦並び）にする */
    }
    
    .services-section {
        padding: 60px 0; /* 上下余白を狭く */
    }
}

/* 事業内容セクション全体の背景 */
.services-section {
    padding: 100px 0;
    background-color: #f4f7f5;
}

/* 2カラムまたは4カラムのグリッド（文章量が多いのでPCでも2カラムが見やすい場合があります） */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 文章を読ませるため2列構成を推奨 */
    gap: 40px;
}

/* 個別ブロック（白背景のカード） */
.service-block {
    background: #ffffff;
    padding: 40px; /* 画像を端まで寄せるため一時的に0に */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;

}

.service-block:nth-child(5) {
    grid-column: 1 / -1; /* PC時、1列目から最後まで繋げる */
    /* flex-direction: row; 横長に見せるため、画像と文字を横並びに（スマホ時は縦に戻る） */
}

/*.service-block:nth-child(5) .service-image-wrapper {
    width: 100%;
    height: auto;
}


/* ★画像エリアの設定（指定サイズ） */
.service-image-wrapper {
    width: 200px;
    height: 180px; /* ★ご指定の高さ */
    overflow: hidden; /* 指定サイズからはみ出た部分を隠す */
    position: relative;
}

.service-image-wrapper img {
    width: 100%;
 
    object-fit: cover; /* ★重要/
    */
}


/* ヘッダー部分（番号とタイトル） */
.service-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #1AA16C;
    padding-bottom: 15px;
}

.num {
    font-size: 2rem;
    font-weight: bold;
    color: #1AA16C;
    margin-right: 15px;
    opacity: 0.3;
}

.service-block h4 {
    font-size: 1.4rem;
    color: #333;
    line-height: 1.4;
    flex: 1;
}

/* リード文（太字のキャッチコピー） */
.service-lead {
    font-weight: bold;
    color: #1AA16C;
    margin-bottom: 15px;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* 説明文 */
.service-desc {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.7;
}

/* リスト部分（グレーの背景で区別） */
.service-details {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    flex-grow: 1; /* 高さを揃える */
}

.service-details h5 {
    font-size: 0.9rem;
    color: #1AA16C;
    margin-bottom: 10px;
    font-weight: bold;
}

.service-details ul {
    list-style: none;
    padding-left: 0;
}

.service-details ul li {
    font-size: 0.85rem;
    position: relative;
    padding-left: 15px;
    margin-bottom: 8px;
    color: #444;
}

/* リストの「・」をデザイン */
.service-details ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: #1AA16C;
    border-radius: 50%;
}

/* リンクボタン */
.more-link {
    display: inline-block;
    margin-top: 10px;
    color: #1AA16C;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s;
}

.more-link:hover {
    transform: translateX(5px);
}

/* スマホ対応：1カラムにする */
@media screen and (max-width: 850px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-block {
        padding: 30px 20px;
    }
}

/* --- 3. 導入支援ソリューション（改訂版） --- */
.app-service-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.solution-card {
    /*display: flex;*/
    align-items: center;
    justify-content: space-between;
    background-color: #f0f7f4; /* 会社指定色の薄い版 */
    padding: 40px;
    border-radius: 12px;
    border-left: 8px solid #1AA16C;
}

.solution-info h4 {
    font-size: 1.6rem;
    color: #333;
    margin-bottom: 20px;
}

.solution-info p {
    color: #555;
    max-width: 1100px;
    margin-bottom: 25px;
    line-height: 1.8;
}

/* 実績タグ（バッジ）のスタイル */
.solution-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.solution-tags span {

    background-color: #ffffff;
    color: #1AA16C;
    border: 1px solid #1AA16C;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
}

/* ボタンの調整（以前の btn-secondary を流用） */
.btn-secondary {
    display: inline-block;
    padding: 18px 30px;
    background-color: #1AA16C; /* 注目させるため反転 */
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s;
    text-align: center;
    min-width: 240px;
}

.btn-secondary:hover {
    background-color: #148558;
}

/* スマホ対応 */
@media screen and (max-width: 900px) {
    .solution-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    .solution-info {
        margin-bottom: 30px;
    }
    .solution-tags {
        justify-content: center;
    }
}

/* --- フッターエリア --- */
.main-footer {
    background-color: #333; /* 濃いグレーで引き締め */
    color: #ffffff;
    padding: 60px 0 20px;
}

.footer-cta {
    text-align: center;
    margin-bottom: 40px;
}

.footer-cta p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* 連絡先まとめボックス */
.footer-contact-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #444;
    padding: 30px;
    border-radius: 8px;
    flex-wrap: wrap; /* スマホ対応 */
    gap: 20px;
}

.footer-logo img {
    height: 50px;
    /*filter: brightness(0) invert(1); /* 黒ロゴを白抜きにする処理 */
}

.footer-tel {
    text-align: left;
}

.tel-label {
    display: block;
    font-size: 0.8rem;
    color: #ccc;
}

.tel-number {
    font-size: 1.8rem;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

/* フッターのコピーライト */
.footer-bottom {
    border-top: 1px solid #555;
    margin-top: 40px;
    padding-top: 20px;
    text-align: center;
    font-size: 0.8rem;
    color: #aaa;
}

/* --- レスポンシブ対応 --- */
@media screen and (max-width: 768px) {
    .app-card {
        flex-direction: column;
        text-align: center;
    }
    .app-info {
        margin-bottom: 25px;
    }
    .footer-contact-box {
        flex-direction: column;
        text-align: center;
    }
    .footer-tel {
        text-align: center;
    }
}

/*=====プライバシーポリシー======*/
.policy {
text-align: right;
}

  /*-----<<リンク設定>>------*/
.policy_link1 {
    color: #33775f;
    text-decoration: none;
  }
  .policy_link1:hover {
    text-decoration: underline;
    text-decoration-color: #33775f;
  }
  .policy_link1:visited {
    color: #33775f;
  }

    /* 概要 */
  /* ページヘッダー */
.page-header {
    background-color: #f4f7f5;
    padding: 60px 0;
    text-align: center;
}

.page-header h2 {
    font-size: 2rem;
    color: #1AA16C;
    letter-spacing: 0.1em;
}

/* ご挨拶セクション */
.message-section {
    padding: 100px 0;
    background-color: #ffffff;
}

.message-content {
    max-width: 800px;
    margin: 0 auto;
}

.message-subtitle {
    color: #1AA16C;
    font-size: 1rem;
    margin-bottom: 10px;
}

.message-title {
    font-size: 1.8rem;
    line-height: 1.5;
    margin-bottom: 40px;
    color: #333;
}

.message-text p {
    margin-bottom: 25px;
    line-height: 1.9;
    color: #555;
}

.highlight-text {
    font-weight: bold;
    font-size: 1.2rem;
    color: #1AA16C !important;
    text-align: center;
    padding: 20px 0;
}

.representative-name {
    text-align: right;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 40px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

/* 会社概要テーブル */
.company-info-section {
    padding-bottom: 100px;
}

.company-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 40px;
}

.company-table th {
    width: 25%;
    text-align: left;
    padding: 25px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
    color: #1AA16C;
    vertical-align: top;
}

.company-table td {
    padding: 25px;
    border-bottom: 1px solid #eee;
    line-height: 1.7;
}

.work-list {
    list-style: none;
    padding: 0;
}

.work-list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}

.work-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #1AA16C;
}

/* レスポンシブ */
@media screen and (max-width: 600px) {
    .company-table th, .company-table td {
        display: block;
        width: 100%;
    }
    .company-table th {
        padding-bottom: 5px;
    }
    .message-title {
        font-size: 1.5rem;
    }
}

/* --- コンテンツ　IT基盤ネットワーク--- */
/* --- 下層ページ共通スタイル --- */
.lower-hero {
    background-color: #1AA16C;
    padding: 80px 0;
    color: #fff;
}

.service-cat {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    opacity: 0.8;
}

.lower-hero h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

/* 詳細コンテンツ */
.detail-content-section {
    padding: 80px 0;
}

.detail-flex-row {
    display: flex;
    align-items: center;
    gap: 50px;
}

.detail-text-area {
    flex: 1;
}

.detail-sub-title {
    color: #1AA16C;
    margin-bottom: 10px;
}

.detail-text-area h4 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.detail-text-area p {
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

/* 強みボックス */
.strength-box {
    background-color: #f0f7f4;
    padding: 25px;
    border-left: 5px solid #1AA16C;
}

.strength-box h5 {
    color: #1AA16C;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 画像エリア（Concept用） */
.detail-image-area {
    flex: 1;
}

.image-placeholder img {
    width: 100%;
    height: auto;

    border-radius: 8px;
    /*box-shadow: 0 10px 30px rgba(0,0,0,0.1);*/
}

/* リストセクション */
.content-box-light {
    background: #fff;
    border: 1px solid #eee;
    padding: 40px;
    border-radius: 12px;
}

.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.check-list {
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #1AA16C;
    font-weight: bold;
}

/* ワークフロー */
.workflow-section {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.workflow-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.workflow-step {
    background: #fff;
    padding: 30px 20px;
    text-align: center;
    border-radius: 8px;
    position: relative;
}

.step-num {
    display: block;
    color: #1AA16C;
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.workflow-step h5 {
    margin-bottom: 10px;
    font-size: 1rem;
}

.workflow-step p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

/* ワークフロー画像 */
.workflow-image img {
    width: 100%;
    height: auto;

}

/* noteバナー */
.note-banner {
    background: #222;
    color: #fff;
    padding: 40px;
    text-align: center;
    border-radius: 12px;
}

.btn-note {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    background-color: #fff;
    color: #222;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
}

/* レスポンシブ */
@media screen and (max-width: 900px) {
    .detail-flex-row, .grid-2col, .workflow-container {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
}

/* --- プログラム・セミナー表 セクション --- */
.program-section {
    padding: 80px 0;
    background-color: #fff;
}

.section-lead-text {
    text-align: center;
    margin-bottom: 40px;
    color: #666;
}

/* テーブル全体のレスポンシブ対応（スマホで横スクロール） */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.program-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px; /* PCでの最小幅を確保 */
    background: #fff;
}

/* ヘッダー */
.program-table th {
    background-color: #1AA16C; /* 会社指定色 */
    color: #fff;
    padding: 10px;
    text-align: left;
    font-size: 1rem;
    border: 1px solid #1AA16C;
}

/* 各セル */
.program-table td {
    padding: 10px;
    border: 1px solid #eee;
    line-height: 1.1;
    vertical-align: middle;
}

/* ターゲットラベルの装飾 */
.target-label {
    font-weight: bold;
    color: #333;
    width: 20%;
    text-align: center !important;
    background-color: #f9fcfb;
}


.program-title {
    font-weight: bold;
    width: 30%;
    color: #1AA16C;
}

/* ホバーで色を変える */
.program-table tr:hover td {
    background-color: #f0f7f4;
    transition: 0.3s;
}

/* --- スマホ表示の調整 --- */
@media screen and (max-width: 768px) {
    .program-table {
        min-width: 100%; /* 横スクロールさせたくない場合は解除 */
    }
    
    /* スマホで縦に並べたい場合（お好みで） */
    /*
    .program-table thead { display: none; }
    .program-table tr { display: block; margin-bottom: 20px; border: 1px solid #1AA16C; }
    .program-table td { display: block; width: 100% !important; border: none; padding: 10px 20px; }
    .target-label { background: #1AA16C; color: #fff; border: none; }
    */
}

/* --- レスポンシブ対応：スマホ画面（768px以下）での設定 --- */
@media screen and (max-width: 768px) {
    /* コンセプトエリアの画像を非表示にする */
    .detail-image-area {
        display: none;
    }

    /* ワークフローの下にある大きな画像を非表示にする */
    .workflow-image {
        display: none;
    }

    /* 画像が消えた分、テキストエリアの幅を100%に調整 */
    .detail-flex-row {
        display: block; /* フレックス解除 */
    }
    
    .detail-text-area {
        width: 100%;
        padding-right: 0;
    }
}

/* --- 導入支援ソリューション リスト --- */
.solution-list-section {
    padding: 80px 0;
    background-color: #fff;
}

/* 項目ごとの枠組み（PC時は横並び） */
.solution-item {
    display: flex;
    align-items: center;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 30px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.solution-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* 画像エリア */
.solution-img {
    /*flex: 0 0 300px;  PC時は幅300pxに固定 */
    height: 200px;
}

.solution-img img {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: cover;
}

/* テキストエリア */
.solution-text {
    flex: 1;
    padding: 30px 40px;
}

.solution-text h3 {
    font-size: 1.4rem;
    color: #1AA16C;
    margin-bottom: 15px;
}

.solution-text p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}

/* --- スマホ表示（768px以下） --- */
@media screen and (max-width: 768px) {
    .solution-item {
        flex-direction: column; /* 縦並びに変更 */
    }

    .solution-img {
        flex: none;
        width: 100%;
        height: 180px;
    }

    /* 前回の指示通り、特定の画像を非表示にしたい場合の設定（任意） */
    /* .solution-img { display: none; } */

    .solution-text {
        padding: 20px;
    }

    .solution-text h3 {
        font-size: 1.2rem;
    }
}