.blog h1 {margin-bottom: 3.5rem; font-family: "HelveticaNeueETW01-45Lt", sans-serif; font-size: 4.6rem; line-height: 5rem; color: #1055BD; text-shadow: 4px 2px 4px rgba(13, 0, 255, 0.2); } .blog section.main {margin-left: auto; margin-right: auto; padding-top: 4rem; max-width: 140rem; } .blog .item {display: flex; margin-bottom: 1rem; box-sizing: border-box; padding: 2rem 1rem; border-radius: 2rem; background-color: #ececec; } .blog .imgbox {flex-shrink: 0; aspect-ratio: 16/9; border-radius: 1.2rem; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); overflow: hidden; } .blog img {display: block; width: 100%; height: 100%; object-fit: cover; } .blog .textbox h2 {margin-bottom: 1rem; font-family: "Proxima Nova W01 Regular", sans-serif; font-size: 2rem; line-height: 2.4rem; color: #000000; text-shadow: none; } .blog .textbox p {color: #000000; } .blog .latest .imgbox {margin-right: 2rem; width: 40%; max-width: 44rem; } .blog .latest .textbox h2 {font-size: 3rem; line-height: 3.4rem; } .blog .list {display: flex; flex-wrap: wrap; } .blog .list .itembox {display: flex; box-sizing: border-box; padding: 0 1rem 1rem 0; width: 33.33%; } .blog .list .itembox:nth-child(3n) {padding-right: 0; } .blog .list a { display: flex; } .blog .list .item {flex-direction: column; margin-bottom: 0; } .blog .list .imgbox {margin-bottom: 1rem; } .blogitem section.main > img {display: block; margin-bottom: 3rem; width: 100%; height: auto; } .blogitem #backbtn {display: flex; justify-content: center; margin-bottom: 1.5rem; box-sizing: border-box; padding: 2rem 1rem 1.5rem 1rem; } .blogitem #backbtn .pastille {display: flex; align-items: center; margin: 0; padding: 1.5rem; } .blogitem #backbtn .arrow {position: relative; margin-right: 1.5rem; width: 2rem; transform: rotate(90deg); } .blogitem #backbtn .arrow::before {content: ''; display: block; padding-top: 162%; } .blogitem #backbtn .str {position: relative; font-family: "Proxima Nova W01 Regular", sans-serif; font-size: 1.4rem; line-height: 1.6rem; } @media all and (max-width: 800px) {.blog .textbox h2 { font-size: 1.8rem; } } @media all and (max-width: 600px) {.blog .latest { display: block; } .blog .latest .imgbox { margin-right: 0; margin-bottom: 2rem; width: auto; max-width: none; } .blog .latest .textbox h2 { font-size: 2.5rem; line-height: 3rem; } .blog .list .itembox { width: 50%; } .blog .list .itembox:nth-child(3n) { padding-right: 1rem; } .blog .list .itembox:nth-child(2n) { padding-right: 0; } }