/* 共通スタイル */
body {
    width: 100%; /* 修正: 固定幅を削除し、100%に設定 */
    max-width: 1000px; /* 修正: 最大幅を設定 */
    margin: 0 auto; /* 修正: 中央寄せ */
    font-family: Arial, sans-serif;
    color: #696969;
    font-size: 16px;
    padding: 0 20px; /* 修正: パディングを追加して余白を調整 */
}

h1, h2, h3, h4, h5, h6 {
    color: #004098;
}

hr {
    border: 1px solid #808080;
}

a {
    text-decoration: none;
    display: inline-block;
    transition: transform 0.3s ease;
  }

  a:hover {
    transform: scale(1.1);
  }



/* メインタイトル */
.main-title h1 {
    font-size: 32px;
    text-align: center;
}

/* サブタイトル */
.sub-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.sub-title img {
    width: 10px;
    height: 35px;
    margin: 5px 10px 0 0;
}

/* メインテキスト */
.main-text p {
    text-align: center;
    margin: 10px;
}

/**/
.box1 {
      display: flex; /* Flexboxを使用して横並びに配置 */
      width: 918px;
      border: 1px solid #808080; /* 外枠 */
      border-radius: 10px; /* 四つ角丸める */
      overflow: hidden; /* 角丸を適用するために必要 */
      margin: 0 20px;
    }

    .box1-img {
      width: 100%; /* 左側のエリア比率 1:1 */
      height: auto;
      object-fit: cover; /* 画像の表示エリアをボックス内に収める */
      margin: 0; /* 余白なし */
    }










/* Box_Left_A */
.box-left-a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 10px;
    border: 1px solid #808080;
    border-radius: 10px;
    flex-wrap: wrap; /* 修正: フレックスラップを追加して画面サイズに応じて折り返す */
}

.box-left-a img {
    flex: 2;
    margin: 30px;
    max-width: 90%; /* 修正: 最大幅を設定 */
    height: auto; /* 修正: 高さを自動に */
}

.box-left-a .text {
    flex: 8;
    margin: 30px 40px 20px 20px;
}

/* Box_Left_B */
.box-left-b {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 10px;
    flex-wrap: wrap; /* 修正: フレックスラップを追加 */
}

.box-left-b img {
    flex: 4;
    margin: 10px;
    max-width: 100%; /* 修正: 最大幅を設定 */
    height: auto; /* 修正: 高さを自動に */
}

.box-left-b .text {
    flex: 6;
    margin: 10px;
}

/* Box_Left_T */
.box-left-t {
    margin: 10px;
    padding: 10px;
    border: 1px solid #808080;
    border-radius: 10px;
}

.box-left-t .sub-title {
    display: block;
}

.box-left-t .text {
    margin-left: 30px;

}

.box-left-t ul {
    margin-left: 10px;

}

.box-left-t li {
    list-style-type: decimal;
    color: #004098;
    font-size: 19px;
    font-weight: 700;
}



}









/* Box_Left_Tn */
.box-left-tn {
    display: flex;
    justify-content: flex-start;
    margin: 10px;
    flex-wrap: wrap; /* 修正: フレックスラップを追加 */
}

.box-left-tn .sub-title {
    margin-right: 10px;
}

.box-left-tn .text {
    margin: 10px;
}

/* Box_Left_Tn2 */
.box-left-tn2 {
    display: flex;
    justify-content: flex-start;
    margin: 10px auto; /* 中央揃え */
    flex-wrap: wrap; /* 修正: フレックスラップを追加 */
}

.box-left-tn2 .sub-title {
    flex: 3;
    text-align: left;
}

.box-left-tn2 .text {
    flex: 7;
    text-align: left;
}

.box-left-tnh hr {
    width: 100%; /* 修正: 幅を100%に */
    margin: 0 auto; /* 中央揃え */
    border: 1px solid #000; /* 例として黒い線 */
}

/* 3Box */
.box-3 {
    display: flex;
    justify-content: space-between;
    margin: 10px;
    flex-wrap: wrap; /* 修正: フレックスラップを追加 */
}

.box-3 .box {
    flex: 1;
    margin: 10px;
    padding: 10px;
    border: 1px solid #808080;
    border-radius: 10px;
}

.box-3 .box .sub-title {
    justify-content: center; /* 修正: 中央寄せ */
    color: #004098;
}

/* 3Box_non */
.box-3-non {
    display: flex;
    justify-content: space-between;
    margin: 10px;
    flex-wrap: wrap; /* 修正: フレックスラップを追加 */
}

.box-3-non .box {
    flex: 1;
    margin: 10px;
}

.box-3-non img {
    cursor: pointer;
}

/* 3Box_non_ba */
.box-3-non-ba {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* 修正: フレックスラップを追加 */
}

.box-3-non-ba .box {
    flex: 1;
    margin: 10px;
}

.box-3-non-ba img {
    object-fit: contain;
    cursor: pointer;
}

/* 4Box_non */
.box-4-non {
    display: flex;
    justify-content: flex-start;
    margin: 10px;
    flex-wrap: wrap; /* 修正: フレックスラップを追加 */
}

.box-4-non img {
    width: 90px;
    height: auto;
    flex: 4;
    margin: 10px 50px 30px;
}

.box-4-non .text {
    flex: 6;
    display: flex;
    justify-content: space-between;
    margin: 10px 50px 10px;
}

.box-4-non b {
    color: #004098;
}

.box-4-non ul {
    list-style-type:circle;
}


/* テーブル */
.table-area {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table_design01 {
    margin: 10px auto;
    text-align: left;
    border-collapse: collapse;
    width: 100%;
    max-width: 900px;
}

.table_design01 th, .table_design01 td {
    border-bottom: 1px solid #808080;
    padding: 1em;
}

.table_design01 th {
    border-bottom: 1px solid #808080;
    font-weight: bold;
    color: #004098;
    text-align: center;
    width: 20%;
    min-width: 4em;
}


.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px; /* 画像間の隙間 */
    margin: 20px 10px;
}

.image-grid img {
    width: 100%;
    height: auto;
    object-fit: cover; /* 画像をボックスに収めるためのプロパティ */
    border-radius: 15px; /* 画像の四つ角を丸める */
}



/* メディアクエリ */
@media (max-width: 768px) {
    .box-left-a, .box-left-b, .box-left-tn, .box-left-tn2, .box-3-non, .box-3-non-ba {
        flex-direction: column; /* 修正: 小さい画面では縦並びに */
        font-size: 0.8em;
    }
    
    .box1 {
    	width: auto;
    }
    
    .box1 img {
    	width: 100%;
    	height: auto;
    }
    
    .box-3 {
        flex-direction: column; /* 修正: 小さい画面では縦並びに */
        font-size: 1.0em;


    }
    
    .box-left-a img {
        width: 120px;
    }
    .box-3-non-ba img {
        width: 90%;
        margin: 0px 30px;
    }
    
    
    .box-4-non img {
        padding: 0 1em;
    }

    .box-4-non .text ul {
        margin-top: -20px;
        margin-left: -30px;
        margin-right: 15px;
        font-size: 0.8rem;
    }

    .table-area {
        font-size: 0.8em;
    }

    .main-text, .box-left-a img, .box-left-b img, .box-left-tn2 .sub-title, .box-left-tn2 .text, .box-3-non .box {
        margin: 5px 0; /* 修正: マージンを調整 */
        font-size: 0.8em;
    }
}

@media (max-width: 412px) {
	body {
    max-width: 402px; /* 修正: 最大幅を設定 */
    margin: 0 auto; /* 修正: 中央寄せ */

}
	.box-3-non-ba img {
        width: 85%;
        margin: 0px 30px 0px 20px;
    }
    
	
	.box-4-non {
		text-aling:center;
		margin-left: 0;
	}
	
	.box-4-non img {
		padding: 0 0.7em;

    }
	
	.box-4-non .text {
		padding-left: 0;
		margin: 5px 25px 5px;
    }
    
	.box-4-non ul {
		margin-left: -10;
    }
	
	
}