/*
        スタイルシート　ファイル
                       takumiwaza.css
                       http://calc.but.jp/　用
                       C:\Users\user\Documents\homepage\public\takumiwaza.css
*/


html  {
  background-color: lightblue;
}


body  {
  background-color:#e8d3d1;
/*  width:800px;  */
  width:90%;
  margin-left:auto;
  margin-right:auto;
  padding:1em;
  line-height:1.5em;
}

p  {
  text-indent:1em;
}

/*  上に戻る       */
span.return_top  {
  text-align: right;
  background-color:yellow;
}

/*  ナビ　メニュー  */
nav a {
  text-decoration: none; /* 下線を消す */
  padding: 5px 10px; /* リンクの余白（見やすくするため） */
}

nav a:hover {
  background-color: yellow; /* マウスオーバーで背景色を黄色に */
}

/* 箇条書きでのリンク先の下線を消す、マウスオーバで背景色を変える */
ol li a {
  text-decoration: none; /* 下線を消す */
  padding: 5px; /* リンクの余白（見やすくするため） */
}

ol li a:hover {
  background-color: lightblue; /* マウスオーバーで背景色を水色に */
}


nav.table-of-contents {
  margin-left: 40px;
  border: 3px double blue; /* 青色の二重枠線 */
  padding-left: 20px; /* 左から20pxずらす（調整可能） */
  background-color: white;
  }

nav.table-of-contents ul li a{
  color:maroon;
}


blockquote  {
  color:maroon;
  border-style:ridge;
  border-color:yellow;
  border-radius:10px;
}





/* ---- TOPペイジの目次 ---- */






/*--  スマートフォン対策     --*/
@media (max-width: 1000px) {
  ul.top-page-menu{
      column-count: 1;
   }
}



/*-- 強調関係 --*/

strong  {
  font-weight:bold;
  color:red;
}


em  {
  text-decoration-line:underline;
  text-decoration-color:maroon;
  text-decoration-style:double;
}


 /* Flexboxコンテナのスタイル */
        .flex-container {
            display: flex; /* これがFlexboxコンテナです */
            gap: 20px; /* アイテム間の隙間 */
            padding: 20px;
            border: 1px solid #ccc; /* コンテナの枠線 */
            flex-wrap: wrap; /* 画面幅が狭くなった場合に折り返す */
        }

        /* Flexアイテム (各ボックス) のスタイル */
        .flex-item {
            flex: 1; /* 利用可能な空間を均等に分配 */
            min-width: 250px; /* アイテムの最小幅を設定（狭すぎになるのを防ぐ）*/
            border: 1px solid #007bff; /* ボックスの枠線 */
            padding: 15px;
            background-color: #e9f5ff; /* ボックスの背景色 */
            border-radius: 8px; /* 角を丸く */
            box-sizing: border-box; /* paddingとborderを要素の幅・高さに含める */
        }

        .flex-item h3 {
            margin-top: 0; /* タイトルの上部余白をなくす */
            color: #0056b3; /* タイトルの色 */
            border-bottom: 1px dashed #007bff; /* タイトルの下線 */
            padding-bottom: 5px;
        }

        .flex-item ul,
        .flex-item ol {
            margin-bottom: 0; /* リストの下部余白をなくす */
            padding-left: 25px; /* リスト左側の余白 */
        }

        .flex-item li {
            margin-bottom: 8px; /* リスト項目の下部余白 */
        }

        .flex-item li a {
            text-decoration: none; /* リンクの下線を削除 */
            color: #333; /* リンクの色 */
        }

        .flex-item li a:hover {
            text-decoration: underline; /* ホバー時に下線を表示 */
            color: #000;
        }

/* ---- Tipsページのスタイル ---- */
.tips-item {
  margin-bottom: 2em;
  padding: 1em;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-radius: 5px;
}
.tips-item h3 {
  color: #333;
  border-bottom: 2px solid #555;
  padding-bottom: 0.5em;
}