@charset "utf-8";
.header-group {
    display: flex;
}
header {
    flex: auto;
    display: flex;
}
nav {
    flex: 0.5;
    display: flex;
}

aside {
    float: left;
    width: 200px;
}

.menu {
    position: fixed;
    top: 0;
}

/*aside a:link, a:visited, a:hover, a:active {
    color:  darkblue;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
}*/

aside * {
    color:  darkblue;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
}
main {
    margin-left: 200px;
}
section {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-style: solid;
    border-width: 1px;
    border-color: gray;
    border-radius: 0.5rem;
}

footer {
    font-size: small;
    text-align: center;
}

.debug {
    color: red;
    font-weight: bold;
}

#text-button {
    font-size: 20px;
    color: darkblue;
    cursor: pointer;
}

#text-button:hover {
    text-decoration: underline;
}

#function0110-button {
    font-size: 20px;
    color: darkblue;
    cursor: pointer;
}

#function0110-button:hover {
    text-decoration: underline;
}

img {
    max-width: 100%; /* 親要素の幅を超えないようにする */
    height: auto;    /* 縦横比を維持する */
    display: block;  /* 必要に応じて、画像の下の余白などをなくす */
}

.resizeimage img { 
    max-width: 750px;
    height: auto;
}

.resizeimage_act img { 
    max-width: 750px;
    height: auto;
}

.resizeimage_task img { 
    max-width: 750px;
    height:auto;
}

.resizeimage_middle img { 
    max-width: 750px;
    height: auto;
}

.resizeimage_small img { 
    max-width: 200px;
    height: auto;
}

.hand_cursor img {
    border: 2px dashed #000000;
    width: 30px;
    height: 30px;
}

/* 2025-06-25  help_index.html側から移動 */
.btn-square {
  display: inline-block;
  padding: 0.3em 0.5em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}

.btn-square:hover {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

button {
  border-color:blue;
}

section{
  background-color: #ffffff;
}

table,th,td{
  border:1px solid #000;
}

table{
  margin-bottom:5px;
}

th,td{
  padding:5px;
}

table.border,
table.noborder{
  border-collapse: collapse;
}

table.noborder,
table.noborder th,
table.noborder td{
  border:0;
}

/* 2025-06-25 追加 */
input[type="button"] {
  display: inline-block;
  padding: 0.5rem 2rem 0.5rem 2rem;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  background: silver;/*ボタン色*/
  color: black;
  border-bottom: solid 4px #627295;
  border-radius: 5px;
}
input[type="button"]:hover {
  background-color: #e0e0e0;
  color: #000;  
}

.picon {
    display: inline-block; /* インラインブロック要素として表示 */
    width: 24px; /* アイコンの幅 */
    height: 24px; /* アイコンの高さ */
    margin-left: 4px; 
    margin-right: 4px; 
    vertical-align: middle; /* テキストとアイコンを中央揃え */
}

@media screen and (max-width: 800px) {
    aside {
        float: none; /* floatを解除して縦並びにする */
        width: 100%; /* 横幅を100%にする */
        position: static; /* fixed を解除（もし .menu クラスが適用されていないaside要素の場合）*/
        margin-bottom: 1rem; /* mainとの間に余白を追加 */
    }

    .menu { /* .menuクラスが適用されているaside要素の場合 */
        position: static; /* fixed を解除して通常のフローに戻す */
        width: 100%; /* 横幅を100%にする */
        margin-bottom: 1rem;
    }

    main {
        margin-left: 0; /* mainの左マージンを解除 */
    }

    /* .header-group や header, nav のFlexboxの挙動も必要に応じて調整できます */
    .header-group, header, nav {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* 中央寄せにする */
    }
}