:root{ --app-article-width:860px; } body{ margin: 0; font-family: 'Noto Sans JP', sans-serif; } article h1{ font-size: 1.8rem; font-weight: normal; } article h2{ font-size: 1.5rem; width: 100%; border-bottom: 2px solid #e3e3e3; display: inline-block; } article h3{ font-size: 1.2rem; width: 100%; border-left: 5px solid #e3e3e3; display: inline-block; padding: 0 0 0 10px; margin-bottom: 0px; } .fig-img{ text-align: center; } .blog-img{ max-width: 700px; object-fit: cover; opacity: 1; width: 100%; border-radius: 5px; } #table-of-contents { background-color: #f9f9f9; padding: 10px; border-radius: 5px; margin-bottom: 20px; border-radius: 10px; } #table-of-contents a { color: white; text-decoration: none; } #table-of-contents a.active { font-weight: bold; } #table-of-contents a:hover { text-decoration: underline; } #table-of-contents ul { list-style-type: none; padding-left: 20px; } #table-of-contents li { margin-bottom: 5px; } #table-of-contents ul li a { color: #414141; } #table-of-contents ul li a.active { font-weight: normal; } #table-of-contents ul li a:hover { text-decoration: underline; } .bg_title { animation:slide_title_vertical 1s ease-in-out infinite alternate; color: #0556fb; } @keyframes slide_title { 0% { transform:translateX(-5%); } 100% { transform:translateX(5%); } } @keyframes slide_title_vertical { 0% { transform:translateY(-25%); } 100% { transform:translateY(25%); } } .guide-ol, .guide-ul { padding-inline-start: 20px } .guide-ol>li { color: #000; background: #f1f8ff; line-height: 1.6; padding: .5em; margin-bottom: 10px; list-style-type: decimal; border-radius: 5px; } .guide-ul>li { color: #000; background: #f1f8ff; line-height: 1.6; padding: .5em; margin-bottom: 10px; list-style-type: none; border-radius: 5px; } .li-sub-block{ padding-left: 40px; padding-bottom: 0!important; } .wrapper { display: flex; justify-content: center } main { flex: 1; max-width: var(--app-article-width); margin: 0 } aside { min-width: 0; max-width: 300px; margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; min-width: 210px; } .container_l .child_1 { order: 1 } .container_l .child_2 { order: 2 } @media screen and (max-width:1024px) { .wrapper { display: block; margin: 10px; padding: 0; max-width: 100%; min-width: initial } main { margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto } aside { max-width: 100%; margin-top: 10px; margin-bottom: 10px; margin-left: 0; margin-right: 0 } .container_l img { max-width: 100% } .container_l .child_1 { order: 2 } .container_l .child_2 { order: 1 } .youtube iframe { max-height: 315px } } .container_l { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 10px; margin-bottom: 50px; margin-left: auto; margin-right: auto; justify-items: center; align-items: center } .container_l .mat-title { text-align: center } .card_1 { width: 100%; height: 100%; background: 0 0; border-radius: 0 } .card_1 div { padding: 10px } .card_1_title { color: #fff; background-color: #0556fb; padding: 10px; border-radius: 5px } .inner-card { width: 100% } .icon_container { position: relative } .icon_container img { animation: spin 20s linear infinite } .youtube { text-align: center } .youtube iframe { width: 100%; height: 500px; max-width: 860px } .bg_title_static { max-width: var(--app-article-width); color: #0556fb } .guide-image-block{ text-align: center; } .guide-image { margin-top: 5px; max-height: 800px; width: auto; max-width: 100%; border-radius: 5px; } .window-name { color: #0556fb; background-color: #fff; width: max-content; border-radius: 0; padding: 0 5px 0 5px; border: 1px solid #d6d6ff; margin: 0 2px 0 2px; } .panel-name { color: #0556fb; width: max-content; padding: 0 5px 0 5px; border: solid 1px #0556fb; margin: 0 2px 0 2px; } .important-word { color: #fff; background-color: #0556fb; width: max-content; border-radius: 5px; margin-left: 5px; margin-right: 5px; padding: 0 10px 0 10px; display: inline; line-height: 1.5; } .important-label { color: #000; background-color: #fff; padding: 0 5px 0 5px; width: max-content; border-radius: 5px; border: solid 3px #0556fb } .btn-name { color: #0556fb; background-color: #fff; width: max-content; border-radius: 15px; padding: 0 10px 0 10px; border: solid 1px #d6d6ff; margin: 0 2px 0 2px; } .empha-word { font-weight: 700 } a { text-decoration: none; color: #0556fb; font-weight: 400 !important } a:hover { color: #3f51b5 } code { background-color: #fff; color: #000; border-radius: 5px; font-family: inherit; padding: 0 5px; margin: 0 5px; border: 1px solid darkgray; word-break: break-all; font-size: 0.95em; } .imp-item{ background-color: #f7fafc; color: #2a2f45; border-radius: 5px; font-family: inherit; border: 1px solid rgba(0,0,0,.05); word-break: break-all; font-size: 0.95em; padding: 0 5px; margin: 0 5px; } .toc { overflow-y: auto } .toc>.toc-list { overflow: hidden; position: relative } .toc>.toc-list li { list-style: none !important; line-height: 2 !important; margin: 0 !important; padding: 0 !important; background: 0 0 !important; border: none !important } .toc-list { margin: 0; padding-left: 10px } .is-collapsible { max-height: 100%; overflow: hidden; transition: all .3s ease-in-out } .is-collapsed { max-height: 0 } .is-position-fixed { position: fixed !important; top: 100 } .is-active-link { color: #0556fb !important } .is-active-link::before { background-color: #0556fb !important } a.toc-link { color: currentColor; height: 100% } .toc-link::before { background-color: #f1f8ff; content: ' '; display: inline-block; height: inherit; left: 0; margin-top: -1px; position: absolute; width: 4px } .js-toc>.toc-list::before { content: 'Table of Contents'; display: inline-block; font-size: large; margin-bottom: 15px; margin-top: 10px; } em{ font-style: normal; background:linear-gradient(transparent 75%, rgb(192 234 255) 60%); } .start-btn{ background-color: #0556fb; border-radius: 10px; color: white; padding: 20px; text-align: center; cursor: pointer; } .start-btn:hover{ background-color: #1865ff; } .next-btn{ border-radius: 5px; color: #0556fb; padding: 5px; text-align: center; cursor: pointer; max-width: 200px; margin-left: auto !important; box-shadow: 0 1px 2px -1px rgba(50,50,93,.25),0 1px 2px -1px rgba(0,0,0,.3); background: #fff; border: 1px solid #d4d4d4; } .next-btn:hover{ opacity: 0.8; } .code-input{ width: 98%;border-radius: 5px;padding: 3px; } .def-block{ border-radius: 5px; margin: 5px; padding: 5px; border: 1px solid #c0c5cf; background: white; }