h1{
    color: #3e62a5;
    margin: 20px 0 0 0;
}

h2::before {
    content: "◆ "; /* 追加したい記号（ここでは★を例に） */
    display: inline; /* インライン表示 */
}

h2{
    color: #484848;
    font-size: 22px;
}

p{
    color: #b8b8b8;
    font-size: 15px;
}


.link{
    display: inline-block; /* インラインブロックにして横幅をテキストに合わせる */
    text-decoration: none; /* 下線を削除（必要に応じて） */
    color: #000; /* テキストの色を指定 */
}

ul{
    padding-left:0;
    list-style:none;
}
  
li{
    list-style:none;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
}

body{
    display: flex;
    flex-direction: column;
}

main {
   max-width: 1400px; /* 必要に応じて最大幅を設定 */
   width: 80%;
   margin: 0 auto; /* 左右の余白を自動にして中央揃え */
    flex: 1;
}

footer{
    max-width: 1400px; /* 必要に応じて最大幅を設定 */
    width: 80%;
    margin: 0 auto; /* 左右の余白を自動にして中央揃え */
    text-align: right;
    box-sizing: border-box;
    margin-top: auto; /* フッターを最下部に押し下げる */
    padding-top: 20px;
}

.device {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 列の幅を設定 */
    gap: 12px; /* アイテム間のスペースを調整 */
}

.item img {
    width: 100%; /* 親要素に対して100% */
}


.manual{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 列の幅を設定 */
    gap: 30px; /* アイテム間のスペースを調整 */
}

.manual video{
    width: 100%;
}