@charset "UTF-8";
main {
  padding: 0 0 160px;
  border-bottom: 1px solid #ccc; }

@media (max-width: 768px) {
  main {
    padding: 0 0 100px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  main {
    padding: 0 0 80px; } }
/*max-width:480px*/
* {
  outline: none !important; }

/**************************************/
.mv {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 10; }
  .mv p {
    color: #fff;
    width: fit-content;
    z-index: 10;
    text-align: center;
    font: 6.5vw/1em "Zen Old Mincho", serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    width: 100%;
    position: absolute;
    bottom: 70px;
    top: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    /* Safari用 */
    transform: translate(-50%, 0%); }
    .mv p span {
      letter-spacing: -40px; }
    .mv p small {
      padding: 55px 0 0;
      display: block;
      font: 3.2rem/1em "Zen Old Mincho", serif;
      font-weight: 500;
      letter-spacing: 0.15em; }
    .mv p:before {
      position: absolute;
      content: "";
      background: url("../images/index/mv_txt_pc.svg") center center no-repeat;
      background-size: contain;
      width: 1921px;
      height: 462px;
      top: -3%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      /* Safari用 */
      transform: translate(-50%, -50%); }
    .mv p br {
      display: none; }

.slider {
  height: 950px;
  overflow: hidden;
  max-width: 1880px;
  width: calc(100% - 40px);
  margin: 0 auto; }
  .slider.slider_sp {
    display: none !important; }

.slick-img {
  transition: .3s;
  position: relative;
  width: 1880px;
  max-width: 1880px;
  height: 950px !important; }

.slick-img img {
  width: 1880px;
  max-width: 1880px;
  height: 950px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

@keyframes zoomUp {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.15);
    /* 拡大率 */ } }
.add-animation {
  animation: zoomUp 10s linear 0s normal both; }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .mv p small {
    padding: 45px 0 0;
    display: block;
    font: 3vw/1em "Zen Old Mincho", serif;
    font-weight: 500;
    letter-spacing: 0.15em; }
  .mv p:before {
    width: 1280px;
    height: auto;
    aspect-ratio: 1921/462;
    top: -3%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    /* Safari用 */
    transform: translate(-50%, -50%); } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .mv {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 10; }
    .mv p {
      color: #fff;
      width: fit-content;
      z-index: 10;
      text-align: left;
      font: 5.7rem/1.4em "Zen Old Mincho", serif;
      font-weight: 400;
      letter-spacing: 0.08em;
      width: calc(100% - 40px);
      padding: 0 0 0 20px;
      position: absolute;
      bottom: 25px;
      top: auto;
      left: 50%;
      -webkit-transform: translate(-50%, 0%);
      /* Safari用 */
      transform: translate(-50%, 0%); }
      .mv p span {
        letter-spacing: -40px; }
      .mv p small {
        padding: 10px 0 0;
        display: block;
        font: 2.4rem/1.5em "Zen Old Mincho", serif;
        font-weight: 500;
        letter-spacing: 0.15em; }
      .mv p:before {
        background: url("../images/index/mv_txt_sp.svg") center center no-repeat;
        background-size: contain;
        width: 768px;
        height: auto;
        top: 25%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        /* Safari用 */
        transform: translate(-50%, -50%); }
      .mv p br {
        display: block; }

  .slider {
    height: 710px;
    overflow: hidden;
    max-width: 1160px;
    width: calc(100% - 40px);
    margin: 0 auto; }
    .slider.slider_pc {
      display: none !important; }
    .slider.slider_sp {
      display: block !important; }

  .slick-img {
    transition: .3s;
    position: relative;
    width: 1160px;
    max-width: 1160px;
    height: 710px !important; }

  .slick-img img {
    width: 710px;
    max-width: 710px;
    height: 1160px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .mv p {
    bottom: 40px;
    font: 4.2rem/1.4em "Zen Old Mincho", serif;
    font-weight: 400;
    letter-spacing: 0.08em;
    width: calc(100% - 20px); }
    .mv p small {
      font: 1.7rem/1.5em "Zen Old Mincho", serif;
      font-weight: 500;
      letter-spacing: 0.15em; }
    .mv p:before {
      width: 100%;
      max-width: 480px;
      height: auto;
      top: 25%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      /* Safari用 */
      transform: translate(-50%, -50%); }

  .slider {
    height: 580px;
    overflow: hidden;
    max-width: 1160px;
    width: calc(100% - 20px);
    margin: 0 auto; }

  .slick-img {
    transition: .3s;
    position: relative;
    width: 480px;
    max-width: 480px;
    height: 784px !important; }

  .slick-img img {
    width: 480px;
    max-width: 480px;
    height: 784px; } }
/*max-width:480px*/
@media (min-width: 1920px) {
  .mv p {
    font: 12rem/1em "Zen Old Mincho", serif;
    font-weight: 400;
    letter-spacing: 0.08em; }
    .mv p small {
      font: 3.2rem/1em "Zen Old Mincho", serif;
      font-weight: 500;
      letter-spacing: 0.15em; } }
/*max-width:1280px*/
/**************************************/
.about {
  padding: 160px 0 160px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  position: relative; }
  .about:before {
    position: absolute;
    content: "";
    display: block;
    width: 390px;
    height: 585px;
    background: #BAFC3B;
    left: 0;
    top: -220px; }
  .about .about_box {
    position: relative;
    z-index: 10;
    max-width: 1390px;
    margin: 0 auto;
    width: calc(100% - 100px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: flex-start; }
  .about h1 {
    width: fit-content;
    font: 7.5rem/1.5em "Zen Old Mincho", serif;
    font-weight: 400;
    width: 600px;
    letter-spacing: 0.08em; }
    .about h1 span {
      display: block;
      padding: 0 0 0 7.5rem; }
  .about .txt {
    width: calc(100% - 600px);
    max-width: 735px; }
  .about p {
    font: 2rem/2.4em "Noto Sans JP", serif;
    font-weight: 400;
    letter-spacing: 0.05em; }
  .about a {
    text-decoration: none;
    font: 1.7rem/63px "Noto Sans JP", serif;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin: 45px 0 0 auto;
    display: block;
    width: 340px;
    height: 65px;
    border: 1px solid #707070;
    text-align: center;
    padding: 0 45px 0 0;
    border-radius: 50px;
    position: relative;
    color: #252525;
    transition: .3s; }
    .about a:before {
      position: absolute;
      content: "";
      display: block;
      width: 40px;
      height: 1px;
      background-color: #252525;
      top: 34px;
      right: 28px; }
    .about a:after {
      position: absolute;
      content: "";
      display: block;
      width: 10px;
      height: 1px;
      background-color: #252525;
      top: 31px;
      right: 28px;
      transform: rotate(30deg); }

@media (hover: hover) {
  .about a:hover {
    background-color: #FFFFFF; } }
@media (max-width: 1280px) {
  .about .about_box {
    max-width: 1040px; }
  .about h1 {
    width: 100%;
    margin: 0 0 70px; }
  .about .txt {
    width: 100%;
    margin: 0 0 0 auto;
    max-width: 735px; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .about .about_box {
    max-width: 840px; }
  .about h1 {
    width: 100%;
    margin: 0 0 70px; }
  .about .txt {
    width: 100%;
    margin: 0;
    max-width: 735px; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .about {
    padding: 90px 0 160px; }
    .about:before {
      left: 0;
      top: -390px; }
    .about .about_box {
      max-width: 640px;
      width: 100%; }
    .about h1 {
      padding: 0 0 0 40px;
      width: fit-content;
      font: 5.8rem/1.46em "Zen Old Mincho", serif;
      font-weight: 400;
      max-width: 600px;
      letter-spacing: 0.08em;
      margin: 0 0 50px; }
      .about h1 span {
        display: block;
        padding: 0 0 0 5.8rem; }
    .about p {
      padding: 0 40px;
      font: 1.8rem/2.5em "Noto Sans JP", serif;
      font-weight: 500;
      letter-spacing: 0.05em; }
    .about a {
      margin: 45px 40px 0 auto; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .about {
    padding: 80px 0 100px; }
    .about:before {
      max-width: 215px;
      height: 315px;
      left: 0;
      top: -160px; }
    .about .about_box {
      max-width: 640px;
      width: 100%; }
    .about h1 {
      padding: 0;
      width: fit-content;
      font: 3.8rem/1.46em "Zen Old Mincho", serif;
      font-weight: 400;
      max-width: 325px;
      width: 100%;
      letter-spacing: 0.08em;
      margin: 0 auto 40px; }
      .about h1 span {
        display: block;
        padding: 0 0 0 3.8rem; }
    .about p {
      max-width: 325px;
      width: 100%;
      padding: 0 0;
      margin: 0 auto;
      font: 1.6rem/2.5em "Noto Sans JP", serif;
      font-weight: 500;
      letter-spacing: 0.05em; }
    .about a {
      font: 1.5rem/63px "Noto Sans JP", serif;
      font-weight: 500;
      max-width: 325px;
      width: 100%;
      margin: 30px auto 0; } }
/*max-width:480px*/
/**************************************/
.link_list {
  position: relative;
  z-index: 10;
  max-width: 1390px;
  margin: 0 auto 55px;
  width: calc(100% - 100px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start; }
  .link_list a {
    transition: .3s;
    text-decoration: none;
    border: 1px solid #B1AEAE;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: flex-start;
    width: calc((100% - 50px)/3);
    margin-bottom: 25px;
    height: 150px;
    text-align: left;
    padding: 0 0 0 130px;
    font: 2rem/1.8em "Noto Sans JP", serif;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #252525;
    background-position: center left 30px;
    background-repeat: no-repeat;
    background-color: #fff; }
    .link_list a br {
      display: block; }
    .link_list a br.two,
    .link_list a br.five {
      display: none; }
    .link_list a:before {
      position: absolute;
      content: "";
      display: block;
      background: url("../images/index/awwor.svg") center center no-repeat;
      background-size: contain;
      aspect-ratio: 51/7;
      width: 100%;
      max-width: 51px;
      height: auto;
      top: 50%;
      right: 25px; }
    .link_list a.link01 {
      background-image: url("../images/index/link01.svg"); }
    .link_list a.link02 {
      background-image: url("../images/index/link02.svg"); }
    .link_list a.link03 {
      background-image: url("../images/index/link03.svg"); }
    .link_list a.link04 {
      background-image: url("../images/index/link04.svg"); }
    .link_list a.link05 {
      background-image: url("../images/index/link05.svg"); }
    .link_list a.link06 {
      background-image: url("../images/index/link06.svg"); }

@media (hover: hover) {
  .link_list a:hover {
    background-color: #E2E2DC; } }
@media (min-width: 1920px) {
  .link_list a {
    font: 2rem/1.8em "Noto Sans JP", serif;
    font-weight: 500; } }
/*min-width:1920px*/
@media (max-width: 1280px) {
  .link_list {
    max-width: 920px;
    margin: 0 auto 55px;
    width: calc(100% - 100px); }
    .link_list a {
      width: calc((100% - 25px)/2); } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .link_list {
    max-width: 768px;
    margin: 0 auto 55px;
    width: calc(100% - 100px); }
    .link_list a {
      width: calc((100% - 25px)/2); }
      .link_list a br.two,
      .link_list a br.five {
        display: block; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .link_list {
    max-width: 920px;
    margin: 0 auto 55px;
    width: calc(100% - 80px); }
    .link_list a {
      max-width: 480px;
      width: 100%;
      margin: 0 auto 25px;
      font: 1.8rem/1.8em "Noto Sans JP", serif;
      font-weight: 500; }
      .link_list a br.two {
        display: none; }
      .link_list a:before {
        max-width: 40px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .link_list {
    max-width: 325px;
    margin: 0 auto 40px;
    width: calc(100% - 25px); }
    .link_list a {
      padding: 0 0 0 110px;
      height: 130px;
      margin: 0 auto 15px; }
      .link_list a br {
        display: block; }
      .link_list a br.two {
        display: block; }
      .link_list a.link01, .link_list a.link02, .link_list a.link03, .link_list a.link04, .link_list a.link05, .link_list a.link06 {
        background-size: 60px;
        background-position: center left 20px; }
      .link_list a:last-of-type {
        margin: 0 auto; } }
/*max-width:480px*/
/**************************************/
.regist {
  background-color: #E2E2DC;
  border-radius: 20px;
  padding: 80px 0;
  max-width: 1640px;
  width: calc(100% - 40px);
  margin: 0 auto; }
  .regist > p {
    text-align: center;
    font: 4rem/1.8em "Noto Serif JP", serif;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin: 0 auto 40px;
    color: #252525; }
    .regist > p br {
      display: none; }
  .regist > div {
    max-width: 1390px;
    width: calc(100% - 40px);
    margin: 0 auto; }
    .regist > div a {
      transition: .3s;
      text-decoration: none;
      position: relative;
      background-color: #fff; }
      .regist > div a br.block {
        display: none; }
      .regist > div a:before {
        position: absolute;
        content: "";
        display: block;
        background: url("../images/index/awwor.svg") center center no-repeat;
        background-size: contain;
        width: 51px;
        height: 7px; }
      .regist > div a:after {
        position: absolute;
        content: "";
        display: block; }
      .regist > div a.resist01:after {
        background: url("../images/index/resist01.svg") center center no-repeat;
        background-size: contain;
        aspect-ratio: 70/70;
        width: 100%;
        max-width: 70px;
        height: auto;
        top: 30px;
        left: 50%;
        transform: translate(-50%, 0%); }
      .regist > div a.resist02:after {
        background: url("../images/index/resist02.svg") center center no-repeat;
        background-size: contain;
        aspect-ratio: 70/70;
        width: 100%;
        max-width: 70px;
        height: auto;
        top: 30px;
        left: 50%;
        transform: translate(-50%, 0%); }
      .regist > div a.resist03:after {
        background: url("../images/index/resist03.svg") center center no-repeat;
        background-size: contain;
        aspect-ratio: 70/70;
        width: 100%;
        max-width: 70px;
        height: auto;
        top: 30px;
        left: 50%;
        transform: translate(-50%, 0%); }
      .regist > div a.resist04:after {
        background: url("../images/index/resist04.svg") center center no-repeat;
        background-size: contain;
        aspect-ratio: 70/70;
        width: 100%;
        max-width: 70px;
        height: auto;
        top: 30px;
        left: 50%;
        transform: translate(-50%, 0%); }
      .regist > div a.resist05:after {
        background: url(../images/index/icon_payroll-deduction.svg) center center no-repeat;
        background-size: contain;
        aspect-ratio: 70/69;
        width: 100%;
        max-width: 68px;
        height: auto;
        top: 30px;
        left: 50%;
        transform: translate(-50%, 0%); }
      .regist > div a.resist06:after {
        background: url("../images/index/resist05.svg") center center no-repeat;
        background-size: contain;
        aspect-ratio: 68/71;
        width: 100%;
        max-width: 68px;
        height: auto;
        top: 50%;
        left: 30px;
        transform: translate(0, -50%); }
      .regist > div a.resist07:after {
        background: url("../images/index/resist06.svg") center center no-repeat;
        background-size: contain;
        aspect-ratio: 71/71;
        width: 100%;
        max-width: 71px;
        height: auto;
        top: 50%;
        left: 30px;
        transform: translate(0, -50%); }
      .regist > div a.resist08:after {
        background: url("../images/index/resist07.svg") center center no-repeat;
        background-size: contain;
        aspect-ratio: 71/71;
        width: 100%;
        max-width: 71px;
        height: auto;
        top: 50%;
        left: 30px;
        transform: translate(0, -50%); }
  .regist > div.flex {
    margin-bottom: 60px; }
    .regist > div.flex .top {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      margin: 0 auto 25px; }
      .regist > div.flex .top a {
        width: calc((100% - 50px)/2);
        margin: 0 15px; }
    .regist > div.flex .btm {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      max-width: 1020px;
      margin: 0 auto;
      align-items: flex-start; }
      .regist > div.flex .btm a {
        width: calc((100% - 60px)/3); }
    .regist > div.flex a {
      max-width: 328px;
      background-color: #fff;
      border-top: 15px solid #BAFC3B;
      position: relative;
      height: 270px;
      padding: 120px 0 0;
      display: block; }
      .regist > div.flex a p {
        text-align: center;
        font: 2rem/1.5em "Noto Sans JP", serif;
        font-weight: 500;
        letter-spacing: 0.05em;
        height: 75px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center; }
      .regist > div.flex a span {
        font: 1.9rem/1.5em "Noto Sans JP", serif;
        font-weight: 500;
        margin: 5px auto 0;
        padding: 3px;
        display: block;
        width: fit-content;
        border: 1px solid #707070; }
      .regist > div.flex a:before {
        top: auto;
        bottom: 28px;
        left: 50%;
        transform: translate(-50%, 0%); }
  .regist > div.flex_3 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start; }
    .regist > div.flex_3 a {
      width: calc((100% - 50px)/3);
      max-width: 445px;
      background-color: #fff;
      border-left: 15px solid #BAFC3B;
      position: relative;
      height: 150px;
      padding: 0 0 0 135px;
      font: 2rem/1.5em "Noto Sans JP", serif;
      font-weight: 500;
      letter-spacing: 0.05em;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start; }
      .regist > div.flex_3 a:before {
        top: 50%;
        left: auto;
        right: 30px;
        transform: translate(0%, -50%); }

@media (hover: hover) {
  .regist > div a:hover {
    background-color: #F4F4EE; } }
@media (max-width: 1280px) {
  .regist {
    max-width: 1040px; }
    .regist > div.flex {
      max-width: 680px;
      margin-bottom: 45px; }
      .regist > div.flex .top {
        margin: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start; }
        .regist > div.flex .top a {
          width: calc((100% - 25px)/2);
          max-width: 328px;
          margin: 0 0 25px; }
      .regist > div.flex .btm {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start; }
        .regist > div.flex .btm a {
          width: calc((100% - 25px)/2);
          max-width: 328px;
          margin: 0 0 25px; }
    .regist > div.flex_3 {
      max-width: 910px; }
      .regist > div.flex_3 a {
        width: calc((100% - 25px)/2);
        max-width: 445px;
        margin: 0 0 25px; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .regist > div.flex_3 {
    max-width: 540px; }
    .regist > div.flex_3 a {
      width: 100%;
      max-width: 540px;
      margin: 0 auto 25px; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .regist p {
    text-align: center;
    font: 3.2rem/1.5em "Noto Serif JP", serif;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin: 0 auto 25px; }
    .regist p br {
      display: block; }
  .regist > div.flex .top a,
  .regist > div.flex .btm a {
    width: 100%;
    margin: 0 auto 25px; }
  .regist > div.flex_3 a {
    width: 100%;
    margin: 0 auto 25px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .regist {
    padding: 40px 0;
    max-width: 325px;
    width: calc(100% - 40px);
    margin: 0 auto; }
    .regist p {
      text-align: center;
      font: 2.5rem/1.5em "Noto Serif JP", serif;
      font-weight: 500;
      letter-spacing: 0.08em;
      margin: 0 auto 25px; }
      .regist p br {
        display: block; }
    .regist > div a br.block {
      display: block; }
    .regist > div a.resist01:after, .regist > div a.resist02:after, .regist > div a.resist03:after, .regist > div a.resist04:after, .regist > div a.resist05:after {
      max-width: 60px;
      top: 20px; }
    .regist > div a.resist06:after, .regist > div a.resist07:after, .regist > div a.resist08:after {
      max-width: 57px;
      left: 20px; }
    .regist > div.flex {
      margin-bottom: 30px; }
      .regist > div.flex .top a,
      .regist > div.flex .btm a {
        margin: 0 auto 15px;
        width: 100%;
        max-width: 260px;
        height: 215px;
        padding: 92px 0 0; }
        .regist > div.flex .top a p,
        .regist > div.flex .btm a p {
          font: 1.8rem/1.5em "Noto Sans JP", serif;
          font-weight: 500;
          letter-spacing: 0.05em;
          height: 65px; }
        .regist > div.flex .top a span,
        .regist > div.flex .btm a span {
          font: 1.6rem/1.5em "Noto Sans JP", serif; }
        .regist > div.flex .top a:before,
        .regist > div.flex .btm a:before {
          bottom: 20px; }
    .regist > div.flex_3 a {
      max-width: 270px;
      height: 130px;
      padding: 0 0 0 100px;
      font: 1.8rem/1.5em "Noto Sans JP", serif;
      font-weight: 500;
      letter-spacing: 0.05em;
      margin: 0 auto 15px; }
      .regist > div.flex_3 a:before {
        right: 20px; } }
/*max-width:480px*/
/**************************************/
.topics {
  padding: 80px 0 0;
  max-width: 1390px;
  width: calc(100% - 40px);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start; }
  .topics h2 {
    font: 7rem/1em "EB Garamond", serif;
    font-weight: 400;
    letter-spacing: 0.02em; }
    .topics h2 span {
      margin: 15px 0 0;
      display: block;
      font: 1.9rem/1em "Noto Serif JP", serif;
      font-weight: 600;
      letter-spacing: 0.1em; }
  .topics > div {
    max-width: 905px;
    width: calc(100% - 340px); }
  .topics ul {
    margin: 0 0 60px; }
  .topics li {
    border-bottom: 1px solid #DBDBD8; }
    .topics li span.cat {
      width: 114px;
      height: 36px;
      background-color: #7B7B7B;
      display: block;
      text-align: center;
      color: #fff;
      font: 1.5rem/36px "Noto Sans JP", serif;
      font-weight: 400;
      letter-spacing: 0.05em; }
    .topics li a {
      transition: .3s;
      padding: 30px 0 15px;
      text-decoration: none;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      position: relative; }
    .topics li time {
      font: 1.7rem/36px "Noto Sans JP", serif;
      font-weight: 700;
      letter-spacing: 0.05em;
      display: block; }
    .topics li p {
      font: 1.7rem/1.6em "Noto Sans JP", serif;
      font-weight: 400;
      letter-spacing: 0.05em;
      position: relative;
      width: calc(100% - 130px);
      position: relative; }
      .topics li p span {
        padding: 0 70px 0 0;
        display: block;
        background: url("../images/index/awwor.svg") right 5px center no-repeat;
        background-size: 40px 6px; }
  .topics .list {
    transition: .3s;
    margin: 0 0 0 auto;
    display: block;
    width: 340px;
    height: 65px;
    border: 1px solid #707070;
    font: 1.7rem/64px "Noto Sans JP", serif;
    font-weight: 500;
    letter-spacing: 0.08em;
    background: url("../images/index/awwor.svg") right 25px center no-repeat;
    background-size: 40px 6px;
    text-decoration: none;
    border-radius: 50px;
    text-align: center;
    padding: 0 30px 0 0; }

@media (hover: hover) {
  .topics li a:hover {
    background-color: #F8F7F5; }
  .topics .list:hover {
    background-color: #F8F7F5; } }
@media (max-width: 1280px) {
  .topics {
    max-width: 1040px;
    display: block; }
    .topics h2 {
      margin: 0 0 30px; }
    .topics > div {
      max-width: 905px;
      width: 100%;
      margin: 0 0 0 auto; } }
/*max-width:1280px*/
@media (max-width: 768px) {
  .topics h2 {
    font: 6rem/1em "EB Garamond", serif;
    font-weight: 400; }
    .topics h2 span {
      font: 1.8rem/1em "Noto Serif JP", serif;
      font-weight: 600; }
  .topics li span.cat {
    width: 100px;
    height: 36px;
    font: 1.4rem/36px "Noto Sans JP", serif;
    font-weight: 400; }
  .topics li time {
    font: 1.6rem/36px "Noto Sans JP", serif;
    font-weight: 700; }
  .topics li p {
    font: 1.6rem/1.6em "Noto Sans JP", serif;
    font-weight: 400;
    width: calc(100% - 115px); } }
/*max-width:768px*/
@media (max-width: 480px) {
  .topics {
    padding: 60px 0 0;
    max-width: 325px; }
    .topics h2 {
      font: 4.8rem/1em "EB Garamond", serif;
      font-weight: 400;
      margin: 0 auto 20px; }
      .topics h2 span {
        font: 1.6rem/1em "Noto Serif JP", serif;
        font-weight: 600; }
    .topics li {
      display: block;
      position: relative; }
      .topics li a {
        padding: 20px 0; }
      .topics li span.cat {
        width: 100px;
        height: 26px;
        font: 1.4rem/26px "Noto Sans JP", serif;
        font-weight: 400; }
      .topics li time {
        position: absolute;
        top: -30px;
        left: 110px;
        font: 1.4rem/1em "Noto Sans JP", serif;
        font-weight: 700; }
      .topics li p {
        margin: 10px 0 0;
        font: 1.5rem/1.6em "Noto Sans JP", serif;
        font-weight: 400;
        width: 100%; }
        .topics li p span {
          padding: 0 50px 0 0;
          background-size: 30px; }
    .topics .list {
      margin: 0 auto;
      display: block;
      width: 320px;
      height: 65px;
      font: 1.5rem/64px "Noto Sans JP", serif;
      font-weight: 500;
      background-size: 30px;
      text-align: center;
      padding: 0  0 0; } }
/*max-width:480px*/