@import url("style.css");

  .header-wrap {
            margin: 0 auto;
	   background-color: #FFF;
        }

.header {
            max-width: 1200px; /* ページ全体の最大幅 */
            margin: 0 auto;
            padding: 10px; /* 全体的なパディング */
	   background-color: #FFF;
        }


.header img{
            max-width: 600px;
	        width:100%;
        }

   .page-wrapper {
            max-width: 1200px; /* ページ全体の最大幅 */
            margin: 0 auto;
            padding: 20px; /* 全体的なパディング */
        }


       .main {
            display: flex;
            flex-direction: row; /* デスクトップでは横並び */
            align-items: center;
            justify-content: center;
            /*min-height: 100vh;
            padding: 40px 20px;*/
            margin: 0 auto;
            position: relative; /* 子要素の配置のため */
            overflow: hidden; /* 画像がはみ出さないように */
        }

        /* Content Section */
        .main__content {
            flex: 1;
            padding-right: 30px; /* 画像との間隔 */
            max-width: 750px; /* テキストの最大幅 */
            z-index: 1; /* 画像より手前に表示 */
        }

        .main-tex {
            font-size:18px;
        }



        .main__title {
            font-size: 2.7em; /* 元画像に合わせて調整 */
            font-weight: 900;
            line-height: 1.4;
            color: #000;
            margin-bottom: 25px;
        }

        .main__date {
            color: #006837; /* 緑色のテキスト */
            font-size: 1.5em;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .main__description {
			color: #006837; 
            font-size: 1.2em;
            margin-bottom: 35px;
			font-weight: 700;
        }

        /* Button */
        .main__button {
            display: inline-flex; /* テキストに応じて幅を変え、要素を中央寄せ */
            align-items: center;
            justify-content: center;
            background-color: #0d6e8b; /* ボタンの背景色 */
            color: white;
            padding: 15px 30px;
            border-radius: 8px;
            text-decoration: none;
            font-size: 1.1em;
            font-weight: 700;
            min-width: 350px; /* 基本の横幅 */
            
            transition: background-color 0.3s ease, transform 0.2s ease;
            margin-bottom: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .main__button:hover {
            background-color: #0a5b71; /* ホバー時の色 */
            transform: translateY(-2px);
        }

        .main__button-icon {
            margin-left: 10px;
            width:24px;
            height: 24px;
            fill: white; /* アイコンの色 */
            transition: transform 0.2s ease;
        }

        .main__button:hover .main__button-icon {
            transform: translateX(3px); /* ホバー時にアイコンを少し移動 */
        }

        .main__warning {
            color: #dc3545; /* 赤色の警告テキスト */
            font-size: 1.5em;
            font-weight: 900;
            margin-top: 20px;
            line-height: 1.5;
        }

        /* Image Section (Placeholder) */
        .main__image-wrapper {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 400px; /* 最小高さを設定 */
            position: relative;
            z-index: 0; /* 背景のような配置 */
        }

        
        

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .main {
                flex-direction: column; /* タブレット・モバイルでは縦並び */
                /*padding: 30px 20px;*/
            }
			
			.main-tex{
				font-size:16px;
            }

            .main__content {
                padding-right: 0;
                padding-bottom: 40px; /* 画像との間隔 */
                max-width: 100%;
                text-align: center; /* 中央寄せ */
            }

            .main__title {
                font-size: 2em; /* フォントサイズを小さく */
                margin-bottom: 20px;
				text-align: left;
            }

            .main__date, .main__description{
                font-size: 1em;
				text-align: left;
            }
			
			.main__warning {
                font-size: 1em;
				text-align: left;
            }
            
            .main__button {
                width: 90%; /* 幅を広げる */
                max-width: 360px; /* 最大幅を設定 */
                margin-left: auto;
                margin-right: auto; /* ボタンを中央寄せ */
				word-break: normal;
            }

            .main__image-wrapper {
				display:block;
            }
            .main__image-wrapper img {
                width: 80%; /* 画像サイズを調整 */
				margin:0 auto;
            }
        }

        @media (max-width: 768px) {
            .main__title {
                font-size: 1.7em;
            }
            .main__button {
                font-size: 1em;
                padding: 12px 20px;
                min-width: unset; /* 必要に応じてmin-widthも解除 */
            }
        }




        /* --- 追加コンテンツ (事業概要セクション) --- */
        .overview-section {
            padding: 60px 20px;
            margin-top: 40px; /* 上部コンテンツとの間隔 */
        }

        .ttl {
            font-size: 1.9em; /* デスクトップのフォントサイズ */
            font-weight: 700;
            color: #006837;
            margin-bottom: 15px;
            padding-left: 0px; /* 黒丸リストと位置を合わせるため */
        }
        
        .overview-list {
            list-style: none; /* デフォルトのリストスタイルを解除 */
            padding-left: 0;
            max-width: 1000px; /* コンテンツの最大幅 */
            margin: 0 auto; /* 中央寄せ */
        }

        .overview-list li {
            position: relative;
            margin-bottom: 30px;
            padding-left: 30px; /* 黒丸分のスペース */
        }

        .overview-list li::before {
            content: '●'; /* 黒丸アイコン */
            color:#000; /* 黒丸の色 */
            position: absolute;
            left: 0;
            top: 0;
            font-size: 21px; /* 黒丸のサイズ */
        }

        .overview-list__heading {
             font-size: 21px; /* デスクトップのフォントサイズ */
            font-weight: 700;
            color: #333;
            margin-bottom: 10px;
        }

        .overview-list__description {
             font-size: 16px; /* デスクトップのフォントサイズ */
            color: #555;
            line-height: 1.8;
			font-weight: 700;
        }

/* 事業概要セクションのレスポンシブ */
@media (max-width: 768px) {
	.ttl {
            font-size: 1.6em; 
        }
	
            .overview-section {
                padding: 40px 15px;
                margin-top: 30px;
            }

             .overview-list li {
                padding-left: 25px; /* 黒丸のスペース */
                margin-bottom: 25px;
            }
            .overview-list li::before {
                font-size:1.1em;
				font-weight: 700;
            }

            .overview-list__heading {
                font-size: 1.1em;
            }

            .overview-list__description {
                font-size: 0.95em;
            }
        }

/* --- (お知らせセクション) --- */
        .news {
            padding: 60px 20px;
            /* margin-topを overview-section の margin-bottom で調整 */
        }

        .news-item {
            background-color: #fff;
            padding: 25px 30px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 影を追加 */
            margin: 0 auto 40px auto; /* 中央寄せ & 下との間隔 */
            max-width: 1100px; /* 幅を制限 */
        }

        .news-item__header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap; /* スマホで折り返す可能性を考慮 */
            gap: 10px; /* 要素間の隙間 */
        }

        .news-item__date {
            font-size: 16px; /* フォントサイズ調整 */
            font-weight: 700;
            color: #555;
            flex-shrink: 0; /* 日付が縮まないように */
        }

        .news-item__tags {
            display: flex;
            padding-left: 0;
            margin: 0;
            flex-wrap: wrap; /* 画面幅が狭いときに折り返す */
			font-weight:700;
			font-size:16px;
        }

        .news-item__tags li {
            color: #000;
            font-size: 0.9em; /* 黒丸のサイズ */
            line-height: 1; /* 黒丸の縦位置調整 */
            flex-shrink: 0; /* 黒丸が縮まないように */
        }

        .news-item__text {
            font-size: 1em;
            color: #333;
            line-height: 1.8;
        }


/* お知らせセクションのレスポンシブ */
@media (max-width: 768px) {
            .news {
                padding: 40px 15px;
            }

            .news-item {
                padding: 20px 25px;
                margin-bottom: 30px;
            }

            .news-item__header {
                flex-direction: column; /* 縦並びに変更 */
                align-items: flex-start; /* 左寄せ */
                margin-bottom: 10px;
            }

            .news-item__date {
                font-size: 1em;
                margin-bottom: 5px; /* 日付とタグの間隔 */
            }

            .news-item__tags {
                gap: 6px;
            }

            .news-item__tags li {
                font-size: 0.85em;
            }

            .news-item__text {
                font-size: 0.95em;
            }
        }


/* --- hojokin01セクション--- */
        .hojokin01 {
             padding: 40px 15px;
            }

         .hojokin01__subtitle {
            font-size: 1.1em;
            color: #555;
            margin-bottom: 40px; /* カードとの間隔 */
			  padding-left: 10px; 
        }

        .hojokin01-cards {
            display: flex;
            justify-content: center;
            gap: 30px; /* カード間の隙間 */
            flex-wrap: wrap; /* 画面幅が狭いときに折り返す */
            max-width: 1200px; /* カード群の最大幅 */
            margin: 0 auto; /* 中央寄せ */
        }

        .hojokin01-card {
			position: relative;
            flex: 0 0 300px; /* 基準幅300px、縮まず伸びない */
            background-color: #006b88; /* カードの背景色 */
            color: white;
            border-radius: 12px;
            padding:30px 20px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between; /* コンテンツを上下に配置 */
            min-height: 300px; /* カードの最低高さ */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

.hojokin01-card-overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* アイコンやテキストのz-indexよりも低いが、カード全体を覆う */
    /* background-color: rgba(255, 0, 0, 0.05); /* デバッグ用: リンク領域を一時的に可視化したい場合 */
    text-decoration: none; /* リンクの下線を非表示 */
}


        .hojokin01-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .hojokin01-card__icon-wrapper {
            width: 120px;
            height: 120px;
            /* background-color: rgba(255, 255, 255, 0.2); /* アイコン枠の背景、必要であれば */
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 25px;
        }
        .hojokin01-card__icon-wrapper img {
            width: 100%; /* 画像を枠いっぱいに表示 */
            height: 100%;
            object-fit: contain; /* アスペクト比を保ちつつ枠に収める */
            filter invert(100%) brightness(100%); /* 白のアイコンを想定 */
        }


        .hojokin01-card__title {
            font-size: 1.2em;
            font-weight: 700;
            margin-bottom: 5px;
            line-height: 1.4;
        }

        .hojokin01-card__subtitle {
            font-size: 1em;
            line-height: 1.5;
        }

        /* hojokin01セクションのレスポンシブ */

@media (max-width: 768px) {
            .hojokin01 {
                padding: 40px 15px;
                margin-bottom: 40px;
            }

            
            .hojokin01__subtitle {
                font-size: 1em;
                margin-bottom: 30px;
            }

            .hojokin01-cards {
                gap: 25px;
                justify-content: flex-start; /* ★変更: 左寄せに変更 */
            }

            .hojokin01-card {
                flex: 0 0 calc(50% - 12.5px); /* ★変更: gap 25pxに合わせて幅を調整 */
                max-width: 320px; /* カードの最大幅を制限 */
                padding: 25px 15px;
                min-height: 280px;
            }
            .hojokin01-card__icon-wrapper {
                width: 80px;
                height:80px;
                margin-bottom: 20px;
            }
            .hojokin01-card__title {
                font-size: 1.15em;
            }
            .hojokin01-card__subtitle {
                font-size: 0.95em;
            }
        }


/* PC版のスタイル記述 */
.process-flow-section {
    padding: 60px 0; /* 上下の余白 */
    position: relative; /* 縦線の配置基準 */
    overflow: hidden; /* 子要素がはみ出した場合に隠す */
}

/* プロセスフローの全体を貫く縦線 */
.process-flow-line {
    position: absolute;
    top: 0;
    left: 50%; /* 中央に配置 */
    /* transform: translateX(-50%); */ /* レスポンシブで要素幅が変わる可能性があるので、left:50%;とwidth:2px;の組み合わせで中央揃え*/
    width: 2px; /* 線の太さ */
    background-color: #a5d6a7; /* 縦線の色 */
    height: 100%; /* 全体の高さに合わせる */
    z-index: 0; /* ステップブロックより背面に */
}

.process-flow-wrapper {
    max-width: 1280px; /* コンテンツの最大幅 */
    margin: 0 auto; /* 中央揃え */
    padding: 0 20px; /* 左右の余白 */
    display: grid; /* CSS Gridでレイアウトを定義 */
    /* 7カラム定義（ステップ4つと矢印3つ） */
    grid-template-columns: 1fr min-content 1fr min-content 1fr min-content 1fr;
    /* グリッドエリアを名前で定義し、視覚的なレイアウトを作成 */
    grid-template-areas:
        "s1 a1 s2 a2 s3 a3 s4" /* 1行目: ステップ1～4と矢印 */
        "s5 a4 s6 a5 s7 . .";   /* 2行目: ステップ5～7と矢印（先頭2列は空欄） */
    row-gap: 40px; /* 行間の垂直方向のギャップ */
    column-gap: 20px; /* 列間の水平方向のギャップ */
    align-items: stretch; /* グリッドアイテムをセル全体に引き伸ばし、高さを揃える */
}

/* 各ステップのカード共通スタイル */
.step {
    background-color: #fff; /* 背景色 */
    border-radius: 10px; /* 角の丸み */
    padding: 20px; /* 内側の余白 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影 */
    text-align: center; /* テキスト中央揃え */
    box-sizing: border-box; /* パディングを幅に含める */
    z-index: 1; /* 縦線の上に表示するために必要 */
    position: relative; /* z-indexの基準 */
    display: flex; /* コンテンツをflexboxで配置 */
    flex-direction: column; /* 縦方向に並べる */
    justify-content: space-between; /* コンテンツを上下に均等配置 */
    /* min-heightを十分に確保し、テキストの量で増減しないように調整 */
    min-height: 250px; /* 高さの不揃いを解消するための調整 */
    width: 100%; /* グリッドセル全体幅を使用 */
}

/* STEP.XX の見出しスタイル */
.step h3 {
    color: #006b88; /* 指定された色 */
    font-size: 1.5em; /* 見出しサイズ */
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: bold;
}

/* アイコン用のプレースホルダー */
.step-icon-placeholder {
    width: 60px; /* アイコンの幅 */
    height: 60px; /* アイコンの高さ */
    margin: 0 auto 15px auto; /* 中央揃えと下部の余白 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px dashed #999; /* 枠の確認用 */
    flex-shrink: 0; /* アイコンが縮まないように */
}

/* 説明文のスタイル */
.step-description {
    font-size: 0.95em;
    line-height: 1.6;
    color: #424242;
    margin-bottom: 0;
    margin-top: auto; /* 下部に寄せるためにflex-grow:1と組み合わせる場合は不要 */
    flex-grow: 1; /* 残りのスペースを埋めて、テキストを垂直中央に配置 */
    display: flex;
    align-items:flex-start; /* テキストを垂直中央に配置 */
    justify-content: center; /* テキストを水平中央に配置 */
	text-align: left;
}

/* 申請フォームボタンのスタイル (STEP.04) */
.step-icon-button {
    margin: 0 auto 15px auto;
    width: 100%;
    max-width: 200px; /* ボタンの最大幅 */
    flex-shrink: 0;
}

.apply-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #006b88;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    white-space: nowrap; /* ボタン内のテキストが改行されないように */
}

.apply-button:hover {
    background-color: #006b88;
}

.arrow-right-in-button {
    margin-left: 8px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid white; /* 右向きの矢印 */
}

/* 矢印アイコンのプレースホルダー */
.arrow-h {
    display: flex;
    align-items: center; /* 垂直中央に配置 */
    justify-content: center; /* 水平中央に配置 */
    width: 40px; /* 矢印の幅 */
    height: 100%; /* ステップの高さに合わせる */
    /* background-color: #cfd8dc; /* 仮の背景色 */
    /* border-radius: 5px; */
    /* border: 1px dashed #999; /* 枠の確認用 */
    flex-shrink: 0; /* 矢印が縮まないように */
}
/* 矢印画像が入る場所なので、枠だけにして背景色を削除 */
/* .arrow-h::after {
    content: '▶';
    font-size: 2em;
    color: #607d8b;
} */


/* グリッドエリアへの配置 */
.s1 { grid-area: s1; }
.a1 { grid-area: a1; }
.s2 { grid-area: s2; }
.a2 { grid-area: a2; }
.s3 { grid-area: s3; }
.a3 { grid-area: a3; }
.s4 { grid-area: s4; }
.s5 { grid-area: s5; }
.a4 { grid-area: a4; }
.s6 { grid-area: s6; }
.a5 { grid-area: a5; }
.s7 { grid-area: s7; }


/*●●セクションのレスポンシブ */
@media (max-width: 768px) {
    .process-flow-section {
        padding: 40px 0; /* モバイルでの上下余白 */
    }

    .process-flow-line {
        /* モバイルでも縦線は中央に維持し、ステップ間に見えるようにする */
        left: 50%;
        width: 2px;
    }

    .process-flow-wrapper {
        display: flex; /* Flexboxで縦並びにする */
        flex-direction: column;
        align-items: center; /* 中央揃え */
        gap: 0px; /* アイテム間の余白を統一 */
        padding: 0 15px; /* 左右の余白を調整 */
    }
	
    .step {
        width: calc(100% - 30px); /* 左右のpadding分を考慮 */
        max-width: 380px; /* 大きすぎる画面での表示を制限 */
        margin: 0; /* Flexアイテムなのでmargin-bottomで調整 */
        min-height: 250px; /* モバイルではコンテンツに応じて高さが可変で良い */
        padding: 15px; /* モバイル用のパディング */
    }
	
    .s5{
        margin-top:30px;
    }
	
    .step-description {
        font-size: 0.9em; /* モバイルでのフォントサイズ調整 */
    }

    /* 矢印（横向き）はモバイルでは非表示にするか縦向きに調整 */
    .arrow-h {
        width: 0; /* 横向きの矢印は幅を0にして見えなくする */
        height: 30px; /* 縦のスペースを確保 */
        margin: 0; /* 上下のマージンはflexboxのgapで対応 */
        display: flex; /* 縦線との関係を保つためにdisplay:flexは維持 */
        align-items: center;
        justify-content: center;
        /* モバイル用の縦向き矢印の枠 */
        /* background-color: #cfd8de; /* 仮の背景色 */
        /* border-radius: 5px; */
        /* border: 1px dashed #999; /* 枠の確認用 */
        position: relative; /* 縦線との位置調整用 */
        z-index: 1;
    }
    /* 縦線との位置関係を調整するため、矢印要素を少し重ねる */
    .arrow-h::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        /* background-color: #e8f5e9; /* 背景色で縦線を一時的に隠す */
        left: 0;
        top: 0;
        z-index: 2; 
        z-index: 3;
    } 

    /* 申請ボタンの修正 */
    .step-icon-button {
      max-width: none; /* 幅の制限を解除 */
      width: 100%;
    }
    .apply-button {
      width: 100%;
    }
}



/* ダウンロードセクション全体 */
.download-section {
    padding:60px 20px; /* 上下左右の余白 */
    text-align: center; /* タイトルを中央揃え */
}

/* セクションタイトル */
.download-section-title {
    font-size: 1.8em;
    color:#00a99d; /* イメージ通りの色 */
    margin-bottom: 40px;
    font-weight: bold;
	text-align: left;
}

/* ダウンロードカードのラッパー */
.dl-wrapper {
    display: grid; /* CSS Grid でレイアウト */
    grid-template-columns: repeat(4, 1fr); /* 4列均等配置 */
    gap: 20px; /* カード間の間隔 */
    max-width: 1200px; /* 最大幅 */
    margin: 0 auto; /* 中央揃え */
    align-items: stretch; /* カードの高さを揃える */
}

/* 各ダウンロードカードのスタイル */
.dl {
    background-color: #00a99d; /* 指定された背景色 */
    color: white; /* テキスト色を白に */
    border-radius: 10px; /* 角の丸み */
    padding: 25px; /* 内側の余白 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影 */
    text-align: center; /* テキストを中央揃え */
    display: flex; /* Flexbox で子要素を配置 */
    flex-direction: column; /* 縦方向に並べる */
    justify-content: space-between; /* タイトル、説明、ボタンを上下に配置 */
    min-height: 280px; /* PC版でのカードの最小高さ。コンテンツ量に合わせて調整してください */
    box-sizing: border-box; /* パディングを幅に含める */
}

/* カードタイトル */
.dl-title {
    font-size: 1.25em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 15px;
}

/* 説明文 */
.dl-description {
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 20px; /* ボタンとの間隔 */
    flex-grow: 1; /* 残りのスペースを埋めて、ボタンを常に下部に配置 */
    display: flex; /* 説明文を Flexアイテムとして扱い、中央揃え */
    align-items: center; /* 垂直方向中央 */
    justify-content: center; /* 水平方向中央 */
	text-align: left;
}

/* ダウンロードボタン */
.dl-button {
    
    color: #FFF; /* ボタンテキスト色を指定色に */
    padding: 12px 20px;
    text-decoration: none; /* 下線なし */
    font-weight: bold;
    font-size: 1em;
    margin-left: auto; /* 中央揃え */
    margin-right: auto; /* 中央揃え */
}

.dl-button:hover {
    background-color: #f0f0f0; /* ホバー時の背景色 */
    color: #008c80; /* ホバー時のテキスト色 */
}

/*●●セクションのレスポンシブ */
@media (max-width: 768px) {
    .download-section {
        padding: 40px 15px; /* モバイルでの上下左右の余白を調整 */
    }

    .download-section-title {
        font-size: 1.3em; /* モバイルでのタイトルサイズ */
        margin-bottom: 30px;
    }

    .dl-wrapper {
        grid-template-columns: 1fr; /* 1列レイアウト */
        gap: 25px; /* カード間の間隔を調整 */
    }

    .dl {
        padding:20px; /* モバイルでのパディング */
        min-height: 200px; /* モバイルでのカードの最小高さ。コンテンツ量に合わせて調整してください */
        width: 100%; /* カードの最大幅を設定し、広がりすぎないように */
        margin-left: auto; /* 中央揃え */
        margin-right: auto; /* 中央揃え */
    }

    .dl-title {
        font-size: 1.1em;
        margin-bottom: 10px;
    }

    .dl-description {
        font-size: 0.85em;
        margin-bottom: 15px;
    }

    .dl-button {
        padding: 10px 15px;
        font-size: 0.9em;
        width: 90%; /* モバイルでのボタン幅を調整 */
        max-width: 250px; /* ボタンの最大幅 */
    }
}


table.table-02 {
  width: 100%;
	max-width:1100px;
  /*border: 1px #ccc solid;*/
	
	margin:0 auto;
}
table.table-02 th {
  padding: 1em;
  font-weight: bold;
  color: #000;
  line-height: 120%;
  text-align: center;
  font-size: 16px;
  margin: 0px 0 5px 0px;
  vertical-align: middle;
  background-color: #F8F8F8;
  border: 1px #666 solid;
  border-width: 0 0px 1px 5px;
		width:15%;
}
table.table-02 td {
  padding: 1em;
  border: 1px #CCC solid;
  border-width: 0 0px 1px 1px;
  line-height: 130%;
  text-align: left;
  vertical-align: middle;
  font-size: 16px;
	background-color: #FFF;
}





@media (max-width: 768px) {
  table.table-02 {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

table.table-02 th {
  padding: 0.5em 0.3em;
  font-weight: bold;
  color: #000;
  line-height: 120%;
  text-align: center;
  font-size: 13px;
  margin: 0px 0 5px 0px;
  vertical-align: middle;
  background-color: #F8F8F8;
  border: 1px #666 solid;
  border-width: 0 0px 1px 5px;
	word-break : break-all;
}
table.table-02 td {
  padding: 0.5em;
  border: 1px #CCC solid;
  border-width: 0 0px 1px 1px;
  line-height: 130%;
  text-align: left;
  vertical-align: middle;
  font-size: 15px;
	word-break : break-all;
}
}