.sample-component-bold-style { font-weight: bold; } .sample-component-italic-style { font-style: italic; } /* 矢印 */ .under_arrow{ padding: 20px; background-color: #EBEDF0; container: layout_box / inline-size; } .under_arrow>dd{ display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 15px; } .under_arrow>dd>a{ background-color: rgb(255, 255, 255); flex-grow: 1; font-size: clamp(1.2rem, 1.1vw, 1.5rem); font-weight: normal; min-height: 60px; padding-top: 10px; padding-bottom: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; } .under_arrow>dd>a>p{ margin-bottom: 0; text-align: center; } @container layout_box (width < 780px){ .under_arrow>dd{ flex-wrap: wrap; } .under_arrow>dd>a{ width: calc(50% - 15px); } } .under_arrow .arrow{ text-align: center; } .under_arrow .arrow>.arrow-bottom { position: relative; display: inline-block; padding: 15px; padding-bottom: 5px; } .under_arrow .arrow-bottom::before { content: ''; width: 10px; height: 10px; border-top: solid 1px #333; border-right: solid 1px #333; position: absolute; left: 10px; top: 8px; transform: rotate(135deg); }