@charset "UTF-8";
@import url("global.css");
.sec_intro {
  margin-bottom: 70px; }
  .sec_intro p + p {
    margin-top: 1em; }

.list_menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px 120px;
  padding-inline: 150px; }
  .list_menu li a {
    display: block; }
  .list_menu li figure {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden; }
  .list_menu li .text_area {
    padding-inline: 1em; }
    .list_menu li .text_area .title {
      margin-bottom: 20px;
      line-height: 1.4;
      position: relative;
      padding-left: 3em;
      font-size: clamp(16px, 2.6vw, 26px);
      font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
      .list_menu li .text_area .title .num {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 2em;
        color: #1A1A3F;
        border-left: 1px solid #A2A2A2;
        border-right: 1px solid #A2A2A2;
        text-align: center;
        font-family: "Jost", "Zen Kaku Gothic New", sans-serif; }
    .list_menu li .text_area p:not([class]) {
      line-height: 1.5; }
    .list_menu li .text_area .morebtn {
      margin-left: auto;
      margin-top: 20px; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1300px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .list_menu {
    gap: 100px 80px;
    padding-inline: 0; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 959px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .list_menu {
    gap: 60px 50px; }
    .list_menu li figure {
      margin-bottom: 20px; }
    .list_menu li .text_area .title {
      margin-bottom: 20px; }
    .list_menu li .text_area p:not([class]) {
      font-size: 13px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .sec_intro {
    margin-bottom: 40px; }

  .list_menu {
    display: block; }
    .list_menu li {
      margin-bottom: 40px; }
      .list_menu li figure {
        aspect-ratio: 3 / 2;
        margin-bottom: 15px; }
      .list_menu li .text_area .title {
        margin-bottom: 10px; }
      .list_menu li .text_area .morebtn {
        margin-top: 10px; } }