li{ list-style: none; } a { color: #333; text-decoration: none; padding-bottom: 1px; transition: 0.5; } .section-title{ margin-top: 110px; } .bd-bottom:hover{ border-bottom: #333 solid 1px; } img { max-width: 100%; } .wrapper { max-width: 1200px; padding: 0 16px; margin: 0 auto; } #container { display: flex; justify-content: space-between; margin-bottom: 60px; } main { width: 70%; background-color: white; border-radius: 20px; } main article { margin-bottom: 30px; } main .article-title { font-size: 1.5rem; margin: 10px 0 15px 0; } .meta { display: flex; justify-content: flex-start; margin-bottom: 10px; } .meta li { font-size: 0.875rem; margin-right: 20px; } main .active-text-box { padding: 10px 40px 30px 40px; font-family: Arial, Helvetica, sans-serif; font-weight: 500; color: #333; } main .active-text-box .text{ text-indent: 1em; font-family: Arial, Helvetica, sans-serif; font-weight: 500; color: #333; } main .active-text-box ul li{ list-style: disc; font-family: Arial, Helvetica, sans-serif; font-weight: 500; color: #333; } #sidebar { width: 33%; padding: 20px; margin-top: 85px; } #sidebar .side-title { font-size: 1.125rem; font-weight: bold; margin-bottom: 30px; } .archive { text-align: center; margin-bottom: 60px; /*position: sticky; top: 0;*/ padding-top: 70px; } .archive ul { border-bottom: solid 1px #777; } .archive li { font-size: 0.875rem; border-top: solid 1px #777; padding: 20px; text-align: left; } .article-title-area{ display: flex; padding-top: 70px; } .article-title-area:nth-child(1){ padding-top: 40px; } .article-title-area figure{ width: 80px; margin-right: 30px; margin-left: 30px; } .article-title-area figure img{ width: 100%; height: auto; } .meta{ margin-left: 100px; } .meta li{ font-size: 1.2rem; } .sidebarbox { padding: 2em 1em; margin: 2em 0 4em 0; color: #232323; background: #fff8e8; border-left: solid 10px #ffdd6e; } .sidebarbox-orange{ background: #fff8e8; border-left: solid 10px #ffdd6e; } .sidebarbox p { margin: 0; padding: 0; text-decoration: underline; } /*------------------------------------------- SP -------------------------------------------*/ @media screen and (max-width: 767px) { #container { flex-direction: column; } main { width: 100%; } #sidebar { width: 100%; padding: 0; margin: 0; } .archive { padding-top: 0; } main .article-title { font-size: 1.3rem; margin: 10px 0 15px 0; } .article-title-area{ padding-top: 50px; } .article-title-area figure{ width: 70px; margin-right: 15px; } .meta{ margin-left: 80px; } .meta li{ font-size: 0.7rem; } } .a_color{ color: blue; } .a_color:hover{ opacity: 0.7; }