テンプレート:メインページ/styles.css

/*カラム折り返し*/
.main_container {
  display: flex;
  flex-wrap: wrap; /* 子要素を折り返すように設定 */
}

.left_column, .right_column {
  flex: 1; /* 幅を均等に分ける */
  min-width: 300px; /* 最小幅を設定してレイアウト崩れを防ぐ */
}

@media (max-width: 768px) { /* 画面幅が768px以下の場合 */
  .left_column, .right_column {
    flex: 100%; /* 横幅を100%にして縦に並べる */
  }
}

div.menu-container > p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.menu-item {
    background: linear-gradient(to bottom, #ffffff, #f3f9fc);
    box-shadow: 0px 1px 1px 1px #ebebeb;
    border: 2px solid #adbbcb;
    border-radius: 4px;
    text-align: center;
    padding: 6px;
    color: #214b76;
    display: block;
    margin-bottom: 5px;
}

.menu-item {
  cursor: pointer;
}
.menu-link a {
  text-decoration: none;
  color: #214b76; /* リンクの色 */
}
.menu-link > a:hover {
  text-decoration: none;
  color: #2f6cbf; /* ホバー時の背景色変更 */
}


span.menu-item-row-5 { width: calc(20% - 2px); }/*5列*/
span.menu-item-row-4 { width: calc(25% - 2px); }/*4列*/
span.menu-item-row-3 { width: calc(33% - 2px); }/*3列*/
span.menu-item-row-2 { width: calc(50% - 2px); }/*2列*/
span.menu-item-row-1 { width: calc(100% - 2px); }/*1列*/

span.menu-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 5px;
}
span.menu-item-text {
  flex-grow: 1;
  text-align: center;
}
.left_column, .right_column {
  flex: 1; /* 両カラムを均等な幅で表示 */
  min-width: 300px; /* 各カラムの最小幅 */
}
.main_container {
  display: flex;
  justify-content: space-between; /* コンテナ間のスペースを均等に配置 */
  align-items: flex-start; /* コンテンツの上部を揃える */
  gap: 20px; /* 左右のカラム間のスペース */
  width: 100%;
  margin: 0 auto; /* コンテナを中央に配置 */
}
h3.h3_heading {
    background: linear-gradient(to bottom, #000a30, #002559);
    padding: 10px 15px;
    color: white;
    display: block;
    margin: 3rem 0 15px 0;
    font-weight: bold;
    font-size: 120%;
    border: 2px solid #977837;
    /* border-image: linear-gradient(to top, #c5a869, #efdea7) 1; */
    box-shadow: 0px 0px 0px 1px #968a5f;
    border: solid 2px;
    border-image: linear-gradient(to right bottom, #f0a1b3, #f2f3a6, #ccdf7c, #b9e0c4, #5de4f2, #c20784, #d4a0c7) 1 / 1 / 0;
}

.menu-container {
    margin: 0 auto;
    width: 97%;
}
span.menu-link img {
    margin: 5px 10px 0 0;
}