    <style>
        /* 基本設定 */
        body {
            margin: 0;
            padding: 0;
/*            font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;	*/
			font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
            font-size:16px;
            color:#696969;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

		input,textarea,tel,select{
			font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Arial", "メイリオ", Meiryo, sans-serif;
		}

		* {
		    box-sizing: border-box;
		}

        .font-red {
            color:#ff0000;
		}

        .font-blue {
            color:#0000ff;
		}

        .font-navy {
            color:#000080;
		}

        .font-s {
            font-size: 0.8rem;
		}

        .font-b {
            font-weight: bold;
		}

        .font-u {
            text-decoration: underline;
		}

        .font-11 {
            font-size: 1.1rem;
		}

        .font-13 {
            font-size: 1.3rem;
		}

		/* 共通の左右余白設定（最大800pxで中央配置） */
		.container {
		    max-width: 800px;    /* 1. 最大幅を800pxに制限 */
		    width: 90%;          /* 2. 画面が800pxより小さい時は、画面幅の90%にする（左右に5%ずつの余白） */
		    margin-left: auto;   /* 3. 左側の余白を自動調整 */
		    margin-right: auto;  /* 4. 右側の余白を自動調整 */
		}
        /* 1. ロゴと進捗バーのエリア */
        .logo-section {
            padding: 1rem 0;
            display: flex;
            justify-content: space-between; /* 両端に振り分け */
            align-items: center; /* 垂直方向中央 */
        }

        .logo-box {
            width: 20%;
            min-width: 100px;
            background-color: #f0f0f0;
            padding: 8px;
            text-align: center;
            border: 1px solid #ccc;
            font-weight: bold;
            box-sizing: border-box;
        }

        /* 進捗バーのスタイル */
        .progress-container {
            width: 40%; /* 進捗バーの全体の幅 */
            text-align: right;
        }

        .progress-bar-bg {
            background-color: #e9ecef;
		    border: 1px solid #cccccc; /* 1pxの太さ、実線、薄いグレー */
            border-radius: 4px;
            height: 24px;
            width: 100%;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        .progress-bar-fill {
            background-color: #A8BBFF; /* 進捗の色（緑） */
            height: 100%;
            width: 65%; /* 進捗率：ここを自由に変更 */
            transition: width 0.5s ease;
        }

        /* バーの中央に黒い文字を固定 */
        .progress-text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #696969;
            font-size: 0.95rem;
            font-weight: bold;
            z-index: 5; /* バーよりも上に配置 */
            pointer-events: none;
        }

        /* 2. タイトルバー（青色帯） */
        header {
            background-color: #0C4DAB;
            color: #ffffff;
            padding: 0.5rem 1rem;
            box-sizing: border-box;
            border-radius: 4px;
        }

        header h1 {
            margin: 0;
            font-size: 20px;
        }

		.bg-ylw {
            background-color: #FFE600;
            color: #000000;
		}

        /* 3. メインコンテンツ（行スタイル） */
        main {
            flex: 1;
/*            padding: 1rem 0;	*/
		    border: 1px solid #dee2e6; /* 1pxの太さ、実線、薄いグレー */
/*		    border-radius: 8px;	*/        /* 角を少し丸くすると今風になります */
		    padding: 0;           /* 枠線と中身の間にゆとりを作る */
		    background-color: #fff;    /* 背景を白にすると枠線が際立ちます */
		    margin-top: 10px;          /* ヘッダーとの間に少し隙間を作る */
		    margin-bottom: 20px;       /* フッターとの間に隙間を作る */
            color: #696969;
        }

        /* 行の基本スタイル */
        .row-item {
            border-radius: 0px;
            margin-bottom: 0.1rem; /* 行同士の隙間 */
            display: flex;
            align-items: center; /* 垂直中央 */
            flex-wrap: wrap;
        }

        /* 青色の行 */
        .row-deep-blue {
            background-color: #0C4DAB;
            padding: 0.5rem; /* 行の内側の余白 */
            color: #ffffff;
        }

        /* 水色の行 */
        .row-light-blue {
            background-color: #C0D6F0;
            padding: 0.5rem; /* 行の内側の余白 */
        }

        /* 薄い水色の行 */
        .row-pale-blue {
            background-color: #E9F9FF;
            padding: 0.5rem; /* 行の内側の余白 */
        }

        /* 白色の行（コメント行） */
        .row-com {
            background-color: #ffffff;
            padding: 0.5rem; /* 行の内側の余白*/
        }

        /* 白色の行（選択肢行） */
        .row-white {
            background-color: #ffffff;
            padding: 0 0.5rem 1rem 1rem; /* 行の内側の余白 上右下左*/	*/
        }

        /* 白色の行（エラーメッセージ表示行） */
        .row-err {
            background-color: #ffffff;
/*            padding-left: 1rem;	*/
/*            padding-bottom: 1rem;	*/
            padding: 0 0 0 1rem; /* 行の内側の余白 上右下左*/
        }

        /* 黄色の行 */
        .row-yellow {
            background-color: #FFFF99;
            padding: 0.5rem; /* 行の内側の余白*/
			margin-top: 0.5rem;
			margin-bottom: 0;
        }

        /* 山吹色の行 */
        .row-ylw {
            background-color: #FFE600;
            color: #000000;
            padding: 0.5rem; /* 行の内側の余白*/
			margin-top: 0.5rem;
			margin-bottom: 0;
        }

        /* ピンクの行 */
        .row-pink {
            background-color: #fce4ec;
        }

        /* 行の中の行１ */
        .row-clr1 {
            padding: 1rem 0 0 0; /* 行の内側の余白 上右下左*/
        }

        /* 行の中の行２ */
        .row-clr2 {
            padding: 0.5rem 0 0 0.5rem; /* 行の内側の余白 上右下左*/
        }

        /* 行の中の行３ */
        .row-clr3 {
            padding: 1rem; /* 行の内側の余白 上右下左*/
        }

        .row-label {
            font-weight: bold;
/*            margin-right: 0.5rem;	*/
            min-width: 200px;
        }

		.mb0 {
			margin-bottom: 0;
		}

		.ml1 {
			margin-left:1rem;
		}

		.ml2 {
			margin-left:2rem;
		}

		/* 全てのリンクの色を青に指定 */
		a {
		    color: #397dd0;
		}

		/* リンクの上にカーソルを乗せた時の色（ホバー時） */
		a:hover {
		    color: #0000ff;
		}

        /* 画像をレスポンシブにする設定 */
        .responsive-img {
            max-width: 100%;    /* 横幅が親要素を超えないようにする */
            height: auto;       /* 比率を維持 */
            display: block;     /* 画像の下に隙間ができるのを防ぐ */
            margin-top: 10px;   /* テキストとの間隔 */
            border-radius: 4px; /* 角を少し丸く（お好みで） */
        }

        /* テキストと画像をまとめるコンテナ（レイアウト調整用） */
        .row-content {
            flex: 1;            /* 残りの幅をすべて使う */
            min-width: 250px;   /* スマホで狭くなりすぎないように調整 */
        }

		ul {
		    margin-top: 0;
		    margin-bottom: 0.5rem;
		    padding-left: 1.5rem;  /* もし左側の隙間も詰めたい場合はここを調整 */
			line-height:1.2em;
		}

		ul li {
			padding-top:0.5em;
		}

		ol {
			position: relative;
		    margin-top: 0;
		    margin-bottom: 0;
		    padding-left: 0.5rem;  /* もし左側の隙間も詰めたい場合はここを調整 */
			line-height:1.2em;
		}

		ol li  {
			list-style: none;
			list-style-position: outside;
			margin: 0;
			padding-top:0.5em;
			padding-left: 1em
		}

		ol li .maru {
			position: absolute;
			left: 0;
			margin: 0
		}

        input[type="date"] {
            padding: 0.2rem;
            font-size: 1rem;
            border: 1px solid #999;
            border-radius: 2px;
            font-family: inherit;
        }

        /* --- 日付入力欄のどこをタップしてもカレンダーを開く設定 --- */
        input[type="date"] {
            position: relative;
            cursor: pointer;
            -webkit-appearance: none;  /* iOS対策 */
            min-height: 1.5rem;
		    width: 120px;
        }

        /* カレンダーを呼び出すアイコン部分を透明にして枠全体に広げる */
        input[type="date"]::-webkit-calendar-picker-indicator {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            background: transparent;
            color: transparent;
        }

        /* どこをタップしてもカレンダーが開くように設定 */
        input[type="date"]::-webkit-calendar-picker-indicator {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            background: transparent;
            color: transparent;
            z-index: 3;
        }

        textarea {
            field-sizing: content;
		    width: 100% !important;
		    max-width: 100% !important; /* 横幅の限界を親要素に固定 */

		    min-height: 4.5em !important; /* 最低3行分（1.5em × 3）の高さ */
		    padding: 10px !important;    /* PCでも上下に余白を設ける */
		    line-height: 1.5;

		    box-sizing: border-box;      /* 余白を含めて100%にする */
		    
		    /* ↓ここが重要：長い数字や英単語を強制的に折り返す設定 */
		    overflow-wrap: break-word;   
		    word-break: break-all;       
		    
		    display: block;
		    resize: none;
        }

		/* 親であるテーブルも「固定レイアウト」にして暴走を止める */
		.row-white TABLE {
		    table-layout: fixed !important;
/*		    width: 95% !important;	*/
		}


        /* エラー時の入力枠 */
        .input-error { border: 2px solid #dc3545 !important; }

        /* エラーテキスト */
		.error-text {
		    color: #ff0000;
		    font-size: 0.9em;
		    margin-top: 5px;
		    font-weight: bold;
		}

		/* PC向けのスタイル（デフォルト） */
		.pc-only {
		  display: block; /* または inline, flex など */
		}

		figure {
		  float: right;
		  margin: 0;
		  width: 20%;
		}
		figure img {
		  max-width: 100%;
		}

        /* 4. フッター */
        footer {
            padding: 0.5rem 0;
            text-align: center;
/*            border-top: 1px solid #dee2e6;	*/
            color: #696969;
        }

		.ft-border {
            border-top: 1px solid #dee2e6;
		}

		.button-group {
		    display: flex;
		    justify-content: center; /* ボタンを中央に寄せる */
		    gap: 12px;               /* ボタン同士の間隔 */
		    margin-top: 20px;
		}

		.submit-button {
		    background-color: #0C4DAB;
		    color: white;
		    border: none;
		    padding: 10px 0;         /* 左右のパディングは width で制御するため 0 に */
		    font-size: 1rem;
		    border-radius: 4px;
		    cursor: pointer;
		    /* PCでのボタンの幅を固定する */
		    width: 200px; 
		    text-align: center;
            text-decoration: none;
		}

		.submit-button:link, 
		.submit-button:visited, 
		.submit-button:hover, 
		.submit-button:active {
		    color: white;
            text-decoration: none;
        }

        .link-button {
            background-color: #C6D9F1;
            color: 397dd0;
            border: 1px solid #ccc;
			padding: 10px 20px;
			margin: 4px 6px;
        	text-align: center;
	        font-weight: bold;;
            font-size: 1rem;
            border-radius: 4px;
            cursor: pointer;
            min-width: 300px;
        }

        .link-button a {
            text-decoration: none;
        }

	/* レスポンシブ調整（スマホ用） */
/*	@media (max-width: 600px) {*/
    @media screen and (max-width: 768px) {
		.pc-only {
		    display: none; /* 非表示にする */
		}

	    .container {
	        width: 98%;          /* スマホの時は画面の98%まで広げる */
	        margin: 0 auto;      /* 念のため auto を再指定して中央を維持 */
	    }

        body {
			font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Arial", "メイリオ", Meiryo, sans-serif;
		}

		/* すべての入力項目を16px以上に固定 */
		input[type="text"],
		input[type="number"],
		input[type="email"],
		input[type="tel"],
		textarea,
		select {
		    font-size: 16px !important;
		}

		textarea, 
		input[type="text"],
		input[type="number"],
		input[type="email"],
		input[type="tel"] {
		    /* iOS特有のデフォルトスタイルをリセット（これで枠線がハッキリします） */
		    -webkit-appearance: none;
		    appearance: none;
		    
		    /* 枠線をハッキリさせる（太さと色を指定） */
		    border: 1px solid #999 !important; 
		    border-radius: 4px; /* 少し角を丸くして今風に */
		    background-color: #fff;
		    color: #333;
		    opacity: 1; /* iOSでdisabledの時に薄くなりすぎるのを防ぐ */
		}

		/* 1.2倍の大きさを実現（paddingとfont-sizeで調整） */
	    input[type="text"] {
	        padding: 2px 12px !important; /* 上下を広げて高さを出す */
	        font-size: 16px !important;    /* 1.2倍相当の読みやすさ＋ズーム防止 */
/*	        line-height: 1.2;	*/
	    }
	    textarea {
	        padding: 10px !important;
	        font-size: 16px !important;
	        min-height: 100px; /* textareaも少し高めに確保 */
	    }
		    /* プレースホルダー（入力ヒント）も見やすくする場合 */
	    ::placeholder {
	        color: #999;
	    }

	    .srv-table {
	      /* 隣接するセルの境界線を離す設定 */
	      border-collapse: separate;
	      /* 左右の空きは0、上下の行間を5pxに設定 */
	      border-spacing: 0 5px;
	      width: 100%;
	    }
	  
	    .srv-table tbody tr {
	        background-image: linear-gradient(to bottom, #ffffff, #f0f0f0);
	    }
	  
	    /* ホバー時の効果 */
	    .srv-table tbody tr:hover td {
	        background-image: linear-gradient(to bottom, #E9F9FF, #D8F5FF) !important;
	    }
	  
	    .srv-table tr td {
	      /* 上下の線を引く */
	      border-top: 1px solid #ccc;
	      border-bottom: 1px solid #ccc;
	      padding: 10px;
	    }
	  
	    /* 左端のセルの左側に線を引く */
	    .srv-table tr td:first-child {
	      border-left: 1px solid #ccc;
	    }
	  
	    /* 右端のセルの右側に線を引く */
	    .srv-table tr td:last-child {
	      border-right: 1px solid #ccc;
	    }

	  /* labelを行全体（セル内いっぱい）に広げる */
	    .srv-table label {
	      display: block;
	      padding: 0;
	      cursor: pointer;
	      width: 100%;
	      height: 100%;
	    }

        footer {
        	text-align: left;
		}

		.button-group {
		    flex-direction: column-reverse; /* 上下反転（送信が上） */
		    align-items: center;
		}

/*		.submit-button {
/*		    width: 100%;*/    /* 画面幅いっぱいに広げる */
/*		    max-width: 100%;*/ /* もし他で制限していても解除 */
/*		    margin: 4px 0;*/  /* 左右の余白をリセットして上下のみに */
/*		}
*/
        .submit-button {
		    display: block;     /* ブロック要素にすることで横幅いっぱいに広がる準備をする */
		    width: 98%;        /* 横幅を指定 */
		    box-sizing: border-box; /* パディングやボーダーを含めて指定横幅にする */
		    max-width: 100%; /* もし他で制限していても解除 */
		    margin: 2px 0;  /* 左右の余白をリセットして上下のみに */
        }

        .link-button {
		    display: block;     /* ブロック要素にすることで横幅いっぱいに広がる準備をする */
		    width: 98%;        /* 横幅を指定 */
		    box-sizing: border-box; /* パディングやボーダーを含めて指定横幅にする */
        }

	}
    </style>
