.detaArea .columnlist {
  display: flex;
  flex-wrap: wrap;
  gap: 2%; }
  .detaArea .columnlist figure {
    border: 1px solid #000;
    width: 23%;
    transition: 0.4s; }
    .detaArea .columnlist figure:hover {
      transform: scale(1.05); }
    .detaArea .columnlist figure a {
      display: block;
      width: 100%;
      height: 100%; }
    .detaArea .columnlist figure img {
      width: 100%; }
    .detaArea .columnlist figure h2 {
      font-size: 18px; }
.detaArea .main-sentence {
  text-align: left; }
  .detaArea .main-sentence p {
    margin-bottom: 1.2em;
    font-size: 16px; }
    .detaArea .main-sentence p img {
      max-width: 60%; }
    .detaArea .main-sentence p strong {
      background: linear-gradient(transparent 60%, #ecff66 60%); }
    .detaArea .main-sentence p a {
      text-decoration: underline;
      color: #ee00ff; }
  .detaArea .main-sentence h1 {
    padding: 1rem 2rem;
    border-left: 6px double #000;
    background: #f4f4f4;
    margin-bottom: 0.5em; }
  .detaArea .main-sentence h2 {
    font-size: 18px;
    margin-bottom: 0.4em;
    position: relative;
    padding: 1rem .1rem; }
  .detaArea .main-sentence h2:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    content: '';
    border-radius: 3px;
    background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#009efd));
    background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%);
    background-image: linear-gradient(to left, #2af598 0%, #009efd 100%); }

@media screen and (max-width: 768px) {
  .detaArea .columnlist {
    flex-direction: column; }
    .detaArea .columnlist figure {
      width: 100%;
      text-align: left; }
      .detaArea .columnlist figure figcaption {
        padding: 0.5em; }
      .detaArea .columnlist figure h2 {
        font-size: 16px; }
  .detaArea .main-sentence p img {
    max-width: 100%; }
  .detaArea .main-sentence p br {
    display: none; }
  .detaArea .main-sentence p video {
    width: 100%; }
  .detaArea .main-sentence p:has(> iframe) {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden; }
  .detaArea .main-sentence p iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .detaArea .main-sentence h1 {
    font-size: 18px; }
  .detaArea .main-sentence h2 {
    font-size: 18px; } }