@charset "UTF-8";
@import url("global.css");
.intro {
  position: relative;
  margin-bottom: 150px; }
  .intro .image {
    position: absolute;
    width: 50%;
    left: 0;
    top: 0;
    bottom: 0; }
  .intro .text {
    width: 50%;
    margin-left: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 560px;
    padding: 30px 0 40px 70px; }
    .intro .text .catch {
      font-size: clamp(18px, 2.5vw, 26px);
      font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      margin-bottom: 40px; }
    .intro .text p:not([class]) {
      margin-top: 1em; }

ul.lineup li {
  margin-bottom: 80px;
  position: relative; }
  ul.lineup li .image {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc( 50% + 60px ); }
    ul.lineup li .image a {
      display: block;
      height: 100%; }
  ul.lineup li .main {
    width: calc( 50% - 60px );
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 640px;
    padding: 60px 0 40px; }
  ul.lineup li .title {
    margin-bottom: 40px;
    font-size: 18px;
    font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
    ul.lineup li .title strong {
      font-size: 24px;
      font-weight: 700;
      display: inline-block;
      padding-right: 5px; }
  ul.lineup li .lead {
    margin-bottom: 5px; }
    ul.lineup li .lead span {
      display: inline-block;
      padding: 0 10px;
      border: 1px solid #C1C1C1;
      border-radius: 3px;
      font-size: 16px; }
  ul.lineup li .text {
    font-size: 14px; }
  ul.lineup li dl.osusume {
    margin-top: 60px;
    border-top: #C1C1C1 1px solid; }
    ul.lineup li dl.osusume dt {
      font-weight: 700;
      width: fit-content;
      margin: -16px 0 15px;
      background-color: #fff; }
    ul.lineup li dl.osusume dd {
      padding-left: 16px;
      text-indent: -16px;
      line-height: 1.5;
      margin-top: 5px;
      font-size: 15px;
      font-weight: 500; }
      ul.lineup li dl.osusume dd::before {
        content: "";
        width: 8px;
        height: 8px;
        display: inline-block;
        text-indent: 0;
        border-radius: 50%;
        vertical-align: 2px;
        margin-right: 8px;
        background-color: #C1C1C1; }
  ul.lineup li .button {
    margin-top: 60px; }
    ul.lineup li .button a {
      display: block;
      padding: 12px 25px 14px;
      color: #fff;
      font-weight: 700;
      border-radius: 3px;
      background-color: #77846E; }
      ul.lineup li .button a .btnarrow {
        display: inline-block;
        margin-left: 20px;
        position: relative;
        width: 30px;
        vertical-align: -7px; }
  ul.lineup li:nth-of-type(odd) .image {
    right: 0; }
  ul.lineup li:nth-of-type(odd) .main {
    padding-right: 60px; }
  ul.lineup li:nth-of-type(odd) dl.osusume {
    margin-right: -60px;
    padding-right: 60px; }
    ul.lineup li:nth-of-type(odd) dl.osusume dt {
      padding-right: 20px; }
  ul.lineup li:nth-of-type(even) .image {
    left: 0; }
  ul.lineup li:nth-of-type(even) .main {
    margin-left: auto;
    padding-left: 60px; }
  ul.lineup li:nth-of-type(even) .title {
    text-align: right; }
  ul.lineup li:nth-of-type(even) .lead {
    text-align: right; }
  ul.lineup li:nth-of-type(even) dl.osusume {
    margin-left: -60px;
    padding-left: 60px; }
    ul.lineup li:nth-of-type(even) dl.osusume dt {
      margin-left: auto;
      padding-left: 20px; }
  ul.lineup li:nth-of-type(even) .button {
    text-align: right; }

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

 Responsive-Breakpoint-1 (1400px)

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

 Responsive-Breakpoint-2 ( 1300px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  .intro .text {
    padding: 30px 0 40px 5vw; }
    .intro .text br {
      display: none; }

  ul.lineup li .image {
    width: calc( 50% + 3vw ); }
  ul.lineup li .main {
    width: calc( 50% - 3vw ); }
  ul.lineup li .title strong {
    display: block;
    padding: 0; }
  ul.lineup li .text br {
    display: none; }
  ul.lineup li:nth-of-type(odd) .main {
    padding-right: 5vw; }
  ul.lineup li:nth-of-type(odd) dl.osusume {
    margin-right: -5vw;
    padding-right: 5vw; }
  ul.lineup li:nth-of-type(even) .main {
    padding-left: 5vw; }
  ul.lineup li:nth-of-type(even) dl.osusume {
    margin-left: -5vw;
    padding-left: 5vw; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 960px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  .intro {
    margin-bottom: 100px; }
    .intro .text {
      min-height: 480px;
      padding: 30px 0 40px 6vw; }
      .intro .text .catch {
        margin-bottom: 30px; }

  ul.lineup li {
    margin-bottom: 60px; }
    ul.lineup li .title strong {
      font-size: 25px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .intro {
    margin-bottom: 100px; }
    .intro .image {
      position: static;
      width: auto;
      aspect-ratio: 10 / 6; }
    .intro .text {
      width: auto;
      display: block;
      min-height: inherit;
      padding: 30px 0 0; }

  ul.lineup li {
    margin-bottom: 70px; }
    ul.lineup li .image {
      position: static;
      width: auto;
      aspect-ratio: 100 / 65; }
    ul.lineup li .main {
      width: auto;
      display: block;
      min-height: inherit;
      padding: 30px 0 0 !important; }
    ul.lineup li .title {
      font-size: 16px;
      margin: 0 -5vw 25px -3vw;
      text-align: center !important;
      letter-spacing: 0; }
      ul.lineup li .title strong {
        font-size: 21px;
        display: block;
        padding-right: 5px; }
    ul.lineup li .lead {
      text-align: center !important; }
      ul.lineup li .lead span {
        font-size: 14px; }
    ul.lineup li .text {
      font-size: 13px;
      padding: 0 10px; }
    ul.lineup li dl.osusume {
      margin: 35px 0 0 !important;
      padding: 0 10px !important; }
      ul.lineup li dl.osusume dt {
        margin: -12px 0 15px -10px !important;
        padding: 0 15px 0 0 !important; }
      ul.lineup li dl.osusume dd {
        margin-top: 6px;
        font-size: 14px; }
    ul.lineup li .button {
      margin-top: 30px; }
      ul.lineup li .button a {
        text-align: right; }
    ul.lineup li:nth-of-type(even) .button {
      text-align: left; } }