@charset "utf-8";
/* CSS Document */
/***********************
    main
***********************/
.works_box {
    padding-top: 30px;
  }
#naishoku,#shisetsugai {
  padding-bottom: 60px;
  border-bottom: 2px dashed #492200;
}
@media screen and (max-width: 480px) { 
/*　画面サイズが480px以下はここを読み込む　*/
  /***********************
      main
  ***********************/
  .page_nav_container {
    background: #F9DCDC;
    padding: 0 20px 5px;
  }
  .page_nav ul {
    display: flex;
  }
  .page_nav ul li {
    text-align: center;
  }
  .page_nav ul li:nth-child(2) {
    flex-grow: 1;
  }
  .page_nav ul li a {
    text-decoration: none;
    font-weight: 600;
  }
  .works_box dl dt h3 {
    text-align: center;
    font-size: 1.125em;
    font-weight: 600;
  }
  .works_box dl dd {
    margin-top: 20px;
  }
}
@media screen and (min-width: 481px) { 
/*　画面サイズが481pxからはここを読み込む　*/
  /***********************
      header
  ***********************/
  .img_main_wrap img {
    max-height: 22vw;
  }
  /***********************
      main
  ***********************/
  .works_box dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 30px;
  }
  .works_box dl dt {
    grid-column-start: 2;
    grid-row-start: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .works_box dl dt h3 {
    text-align: center;
    font-size: clamp(16px , 1.5vw , 20px);
    font-weight: 600;
  }
  .works_img {
    grid-row: span 3 / span 3;
    grid-column-start: 1;
    grid-row-start: 1;
  }
  .works_txt {
    grid-row: span 2 / span 2;
    grid-column-start: 2;
  }
}
@media screen and (min-width: 768px) { 
/*　画面サイズが768pxからはここを読み込む　*/
}
@media screen and (min-width: 961px) { 
/*　画面サイズが961pxからはここを読み込む　*/
}
@media screen and (min-width: 1601px) { 
/*　画面サイズが1601pxからはここを読み込む　*/
}