.wrapper1{ max-width: 1500px; margin: 0 auto; padding: 0 2%; text-align: center; } .page-title1 { font-size: 1.3rem; font-family: 'Philosopher', serif; text-transform: uppercase; font-weight: normal; } label { font-size: 1.25rem; margin-bottom: 10px; display: grid; } .flex-table { display: flex; flex-direction: column; background: #fff; } .flex-table thead { background: #e8abdf82; } .flex-table thead tr, .flex-table tbody tr { display: flex; } .flex-table tbody tr+tr { border-top: 1px solid #ccc; } .flex-table thead tr th, .flex-table tbody tr td { flex: 1; padding: .5em; } @media screen and (max-width: 640px) { .flex-table { border: 0; } .flex-table thead { display: none; } .flex-table tbody tr { flex-direction: column; margin: 1em; border: 1px solid #ccc; } .flex-table tbody tr td { flex-direction: column; } .flex-table tbody tr td+td { border-top: 1px solid #ccc; } .flex-table tbody tr td:before { display: flex; align-items: center; margin: -.5em -.5em .75em -.5em; padding: .5em; content: attr(data-label); color: #fff; background: #efc1e663; } } .flex-fixhead-table tbody { overflow: auto; height: 50vh; } .flex-table tbody tr td[colspan]{ background: #ff6; } .flex-table tbody tr td[colspan="2"]{ flex: 2; padding-right: 1.5em; } .flex-table tbody tr td[colspan="3"]{ flex: 3; padding-right: 2.5em; } .flex-table tbody tr td[colspan="4"]{ flex: 4; padding-right: 3.5em; } @media screen and (max-width: 640px) { .flex-table tbody tr td[colspan]{ padding-right: .5em; } } h2 { font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'Hiragino Mincho ProN', 'HGS明朝E', 'MS P明朝', serif; position: relative; padding: 1.5rem 2rem; -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1); box-shadow: 0 2px 14px rgba(0, 0, 0, .1); } h2:before, h2:after { position: absolute; left: 0; width: 100%; height: 4px; content: ''; background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); } h2:before { top: 0; } h2:after { bottom: 0; } .articles_wrap { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr; grid-gap: 32px 5vw; } .articles_head { grid-column: 1 / -1; grid-row: 1; } .article { grid-column: span 6; } @media screen and ( min-width: 600px ) { .articles_wrap { grid-gap: 32px 3.125vw; } .article { grid-column: span 3; } } /*================================================== ふわっ ===================================*/ .fadeUp { animation-name:fadeUpAnime; animation-duration:3s; animation-fill-mode:forwards; opacity:0; } @keyframes fadeUpAnime{ from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } }