// ブレイクポイントを指定 $tab: 960px; $sp: 767px; @mixin tab { @media screen and (max-width: ($tab)) { @content; } } @mixin ttab { @media screen and (max-width: ($ttab)) { @content; } } @mixin sp { @media screen and (max-width: ($sp)) { @content; } } .news_wrap { margin-top: 80px; max-width: 960px; border-bottom: 1px solid; padding: 0px 0 60px; @include tab { width: 90%; } .heading_box { margin-bottom: 40px; .news_info { display: flex; gap: 24px; align-items: center; margin-bottom: 16px; } .news_date { font-size: 16px; color: #0F0143; font-family: "Inter", sans-serif; @include sp { font-size: 14px; } } .news_category { background: #1A007C; color: #fff; padding: 4px 20px; font-size: 12px; @include sp { font-size: 10px; } } h2 { font-size: 24px; border-bottom: 1px solid; padding-bottom: 40px; font-weight: 500; @include sp { font-size: 18px; padding-bottom: 14px; } } } .news_box { max-width: 880px; h3 { background: #0F0143; color: #fff; font-size: 20px; font-weight: 500; padding: 10px; text-decoration: underline; width: fit-content; margin-bottom: 24px; } h4 { padding: 4px 0 4px 16px; font-size: 18px; font-weight: 500; position: relative; margin-bottom: 24px; &:before { position: absolute; content: ""; width: 8px; height: 100%; left: 0; top: 0; background: #0F0143; } } h5 { font-size: 16px; padding-left: 21px; font-weight: 500; margin-bottom: 16px; position: relative; &:before { position: absolute; content: ""; width: 13px; height: 2px; left: 0; top: 50%; transform: translateY(-50%); background: #0F0143; } } } } .link_btn { margin: 60px auto 0; }