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

@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;
}
/*カラム折り返し*/
.main_container {
  display: flex;
  flex-wrap: wrap; /* 子要素を折り返すように設定 */
}

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

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

.menu-item {
  cursor: pointer;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.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; /* コンテナを中央に配置 */
}

.menu-container {
    margin: 0 auto;
    width: 97%;
}
span.menu-link img {
    margin: 5px 10px 0 0;
}
/*リンクボタン色*/
.menu-link a {
  text-decoration: none;
  color: #ededed; /* リンクの色 */
}

.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-itemmos-green {
    background: linear-gradient(to bottom, #ffffff, #e6f0ed);
    box-shadow: 0px 1px 1px 1px #a7c3bd;
    border: 1px solid #c1ceca;
    border-radius: 4px;
    text-align: center;
    padding: 6px;
    color: #3a6f64;
    margin-bottom: 5px;
    display: block;
}


/* ネオンパープル */
.menu-itemneon-purple {
    background: linear-gradient(to bottom, #ffffff, #f2e6ff);
    box-shadow: 0px 1px 1px 1px #b9a7c3;
    border: 1px solid #d4c1ce;
    border-radius: 4px;
    text-align: center;
    padding: 6px;
    color: #581be2;
    margin-bottom: 5px;
    display: block; /* リンクをブロック要素として表示 */
}

/* スカイブルー */
.menu-itemsky-blue {
    background: linear-gradient(to bottom, #ffffff, #e6f4ff);
    box-shadow: 0px 1px 1px 1px #a7b8c3;
    border: 1px solid #c1d4e7;
    border-radius: 4px;
    text-align: center;
    padding: 6px;
    color: #2c56df;
    margin-bottom: 5px;
    display: block; /* リンクをブロック要素として表示 */
}

/* レッド */
.menu-itemred {
    background: linear-gradient(to bottom, #ffffff, #fff4f4);
    box-shadow: 0px 1px 1px 1px #c3a7a7;
    border: 1px solid #e7c1c1;
    border-radius: 4px;
    text-align: center;
    padding: 6px;
    color: #e12929;
    margin-bottom: 5px;
    display: block; /* リンクをブロック要素として表示 */
}

/* トロピカルグリーン */
.menu-itemtropical-green {
    background: linear-gradient(to bottom, #ffffff, #e6fff0);
    box-shadow: 0px 1px 1px 1px #a7c3b1;
    border: 1px solid #c1e7cf;
    border-radius: 4px;
    text-align: center;
    padding: 6px;
    color: #0b8b60;
    margin-bottom: 5px;
    display: block; /* リンクをブロック要素として表示 */
}

/* ピンク */
.menu-itempink {
    background: linear-gradient(to bottom, #ffffff, #ffe6f0);
    box-shadow: 0px 1px 1px 1px #c3a7b4;
    border: 1px solid #e7c1ce;
    border-radius: 4px;
    text-align: center;
    padding: 6px;
    color: #ed7c9b;
    margin-bottom: 5px;
    display: block; /* リンクをブロック要素として表示 */
}

/* オレンジ */
.menu-itemorange {
    background: linear-gradient(to bottom, #ffffff, #fff6f0);
    box-shadow: 0px 1px 1px 1px #c3b1a7;
    border: 1px solid #e7d4c1;
    border-radius: 4px;
    text-align: center;
    padding: 6px;
    color: #f34b4b;
    display: block;
    margin-bottom: 5px;
    display: block;
}

/* オールドペーパー */
.menu-itemold-paper {
    background: linear-gradient(to bottom, #ffffff, #f5efe6);
    box-shadow: 0px 1px 1px 1px #b8b3a7;
    border: 1px solid #d4cec1;
    border-radius: 4px;
    text-align: center;
    padding: 6px;
    color: #786345;
    display: block;
    margin-bottom: 5px;
    display: block; /* リンクをブロック要素として表示 */
}

/* ブルー */
.menu-itemblue {
    background: linear-gradient(to bottom, #ffffff, #e6eeff);
    box-shadow: 0px 1px 1px 1px #a7afc3;
    border: 1px solid #c1c9e7;
    border-radius: 4px;
    text-align: center;
    padding: 6px;
    color: #0544b4;
    margin-bottom: 5px;
    display: block; /* リンクをブロック要素として表示 */
}

/* ブラック */
.menu-itemblack {
    background: linear-gradient(to bottom, #ffffff, #f0f0f0);
    box-shadow: 0px 1px 1px 1px #b3b3b3;
    border: 1px solid #cccccc;
    border-radius: 4px;
    text-align: center;
    padding: 6px;
    color: #252525;
    margin-bottom: 5px;
    display: block; /* リンクをブロック要素として表示 */
}


/* ホバー効果（必要に応じて各クラスに追加） */
.menu-item:hover,
.menu-itemmos-green:hover,
.menu-itemneon-purple:hover,
.menu-itemsky-blue:hover,
.menu-itemred:hover,
.menu-itemtropical-green:hover,
.menu-itempink:hover,
.menu-itemorange:hover,
.menu-itemold-paper:hover,
.menu-itemblue:hover,
.menu-itemblack:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
/*リンクボックス用リンク色*/
/* モスグリーン */
.menu-itemmos-green a {
    color: #3a6f64;
}
.menu-itemmos-green a:hover {
    color: #75e154;
}

/* ネオンパープル */
.menu-itemneon-purple a {
    color: #581be2;
}
.menu-itemneon-purple a:hover {
    color: #9d1cc0;
}

/* スカイブルー */
.menu-itemsky-blue a {
    color: #2c56df;
}
.menu-itemsky-blue a:hover {
    color: #3369c2;
}

/* レッド */
.menu-itemred a {
    color: #e12929;
}
.menu-itemred a:hover {
    color: #ff3535;
}

/* トロピカルグリーン */
.menu-itemtropical-green a {
    color: #0b8b60;
}
.menu-itemtropical-green a:hover {
    color: #06531d;
}

/* ピンク */
.menu-itempink a {
    color: #c8617d;
}
.menu-itempink a:hover {
    color: #cd4f70;
}

/* オレンジ */
.menu-itemorange a {
    color: #b96d6d;
}
.menu-itemorange a:hover {
    color: #b96d6d;
}

/* オールドペーパー */
.menu-itemold-paper a {
    color: #786345;
}
.menu-itemold-paper a:hover {
    color: #614f26;
}

/* ブルー */
.menu-itemblue a {
    color: #0544b4;
}
.menu-itemblue a:hover {
    color: #0e3270;
}

/* ブラック */
.menu-itemblack a {
    color: #252525;
}
.menu-itemblack a:hover {
    color: #5f5f5f;
}

/* 共通のリンクスタイル */
.menu-itemmos-green a,
.menu-itemneon-purple a,
.menu-itemsky-blue a,
.menu-itemred a,
.menu-itemtropical-green a,
.menu-itempink a,
.menu-itemorange a,
.menu-itemold-paper a,
.menu-itemblue a,
.menu-itemblack a {
    text-decoration: none;
    transition: color 0.3s ease;
}