@charset "utf-8";body{margin:0;padding:0;font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif}.page{overflow:visible}main{height:100%}main h1{line-height:1.5;font-weight:700}main h1 small{font-size:24px;vertical-align:middle}main a{text-decoration:none}main a:hover{opacity:.8}main img{display:block;width:100%;margin:auto}.contents{width:100%;padding:60px 10px;align-content:center;text-align:center}.contents.tips{display:flex;justify-content:center;flex-wrap:wrap}.menu-container{width:100%;padding:10px}#side-menu{position:-webkit-sticky;position:sticky;top:10px;width:205px;margin:0 auto}#side-menu table{border:none}#side-menu table td{margin:0 0 10px;cursor:pointer}#side-menu table tr:nth-last-child(1) td{margin-bottom:0}.menu-container .tips-category{display:block;color:white;text-align:center;padding:0 20px;background-color:#bbbb22}.tips-category.all{background-color:#666666}.tips-category.tech-term{background-color:#88bb22}.tips-category.amarisoft{background-color:#2288bb}.tips-category.wireshark{background-color:#bb88bb}.tips-category:hover{opacity:.8}.tips-container{display:flex;flex-direction:row;flex-wrap:wrap}.tips-container .tips-box{width:380px;height:380px;min-height:355px;margin:10px;padding:0;position:relative}.tips-box>a{position:absolute;left:0;top:0;width:100%;height:100%}.tips-container .tips-box img{width:378px;height:228px;margin-top:45px;padding:0 10px}.tips-container .tips-box img.fit-contain{object-fit:contain;font-family:'object-fit:contain;'}.tips-container .tips-box img.fit-cover{object-fit:cover;object-position:0 0}.tips-container .tips-box h1.title{font-size:20px;font-weight:700;line-height:1.5;margin:19px 40px}.bg-image-01{background:url("../img/BG_1920x1080.jpg") white no-repeat center center/cover fixed;color:black}.bg-color-white{background-color:white;color:black}.bg-color-black{background-color:black;color:white}.bg-color-bddaea{background-color:#bddaea;color:black}.border-black{border:black solid 1px}.color-black{color:black}.color-2288bb{color:#2288bb}.tips-box>p{position:absolute;top:10px;font-size:70%}p.publication-date{left:10px;color:black;padding:5px;line-height:12px;border-bottom:gray dotted 1px;background-color:whitesmoke}p.tag{right:10px;color:white;padding:5px 15px 5px 10px;line-height:12px;background-color:#bbbb22}p.tag::before{content:'';position:absolute;left:-9.25px;top:0;border-top:12px solid transparent;border-right:5px solid #bbbb22;border-bottom:11px solid #bbbb22;border-left:5px solid transparent}p.tag.tech-term{background-color:#88bb22}p.tag.tech-term::before{border-right:5px solid #88bb22;border-bottom:10.5px solid #88bb22}p.tag.amarisoft{background-color:#2288bb}p.tag.amarisoft::before{border-right:5px solid #2288bb;border-bottom:10.5px solid #2288bb}p.tag.wireshark{background-color:#bb88bb}p.tag.wireshark::before{border-right:5px solid #bb88bb;border-bottom:10.5px solid #bb88bb}.tutorial{width:500px;padding:20px;margin:0 auto;text-align:center;background-color:#222222;border:gray solid 1px}.tutorial:hover{opacity:.8}.tutorial{color:white!important;font-size:20px}@media (max-width:859px){.contents{padding:30px 0}.tutorial{width:calc(100% - 60px);max-width:400px}.tutorial p{font-size:16px}}@media (max-width:399px){.tips-container{width:100%;justify-content:center}.tips-container .tips-box{width:calc(100vw - 20px);height:calc(100vw - 20px);min-height:auto}.tips-container .tips-box img{width:calc(100vw - 22px);height:auto}.tips-container .tips-box h1.title{font-size:18px;margin:15px auto}}@media (min-width:400px) and (max-width:819px){.tips-container{width:400px;justify-content:center}}@media (min-width:820px) and (max-width:1454px){.tips-container{width:800px;justify-content:left}}@media (min-width:1455px){.tips-container{width:1200px;justify-content:left}}@media (min-width:642px) and (max-width:819px),(min-width:1062px){.tips-container{order:1}.menu-container{order:2;width:225px}}