@charset "UTF-8";




@media screen and (min-width : 768px) {

  /*---------
  discover_link
  ---------*/

  .discover_link{
    border-top: 1px solid #000000;
    padding: var(--px-64) 0 var(--px-210) 0;
  }
  .discover_link .discover_link_ttl{
    font-family: "Lato", serif;
    font-size: var(--px-16);
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1;
    margin: 0 0 var(--px-48) 0;
  }

  .discover_link ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-90);
  }
  .discover_link li{
    width: calc((100% - var(--px-90)) / 2);
    max-width: var(--px-540);
    position: relative;
  }
  .discover_link li::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background-repeat: no-repeat;
    background-size: contain;
    width: var(--px-50);
    height: var(--px-50);
    transition: background-image 0.6s;
    z-index: 1;
    pointer-events: none;
  }
  .discover_link li[data-type="knowledge"]::before{
    left: var(--px-54);
    background-image: url("/discover/img/icon_knowledge.svg");
  }
  .discover_link li[data-type="enjoy"]::before{
    left: var(--px-48);
    background-image: url("/discover/img/icon_enjoy.svg");
  }

  .discover_link li[data-type="knowledge"]:hover::before{
    background-image: url("/discover/img/icon_knowledge_white.svg");
  }
  .discover_link li[data-type="enjoy"]:hover::before{
    background-image: url("/discover/img/icon_enjoy_white.svg");
  }

  .discover_link .btn{
    padding: 0 0 0 var(--px-130);
    width: 100%;
    height: var(--px-130);
  }

  .discover_link .btn p{
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
    padding: 0 var(--px-30) 0 0;
    position: static;
    z-index: 1;
  }
  .discover_link .btn::after{
    content: "";
    aspect-ratio: 1/1;
    display: block;
    position: absolute;
    top: var(--px-12);
    right: var(--px-12);
    width: var(--px-10);
    height: var(--px-10);
    background-image: url("/common/img/icon_arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
  }
  .discover_link .btn:hover::after{
    background-image: url("/common/img/icon_arrow_white.svg");
  }

  .discover_link .btn p span[data-type="jp"]{
    font-size: var(--px-25);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.4;
  }
  .discover_link .btn p span[data-type="en"]{
    font-family: "Vollkorn", serif;
    font-size: var(--px-16);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }



}

@media screen and (max-width : 767px) {

  /*---------
  discover_link
  ---------*/

  .discover_link{
    border-top: 1px solid #000000;
    padding: var(--px-64) 0 var(--px-220) 0;
  }
  .discover_link .discover_link_ttl{
    font-family: "Lato", serif;
    font-size: var(--px-16);
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 1;
    margin: 0 0 var(--px-42) 0;
    padding: 0 var(--px-30);
  }

  .discover_link ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--px-30);
    padding: 0 var(--px-30);
  }
  .discover_link li{
    width: 100%;
    position: relative;
  }
  .discover_link li::before{
    content: "";
    display: block;
    position: absolute;
    left: var(--px-24);
    margin: auto;
    background-repeat: no-repeat;
    background-size: contain;
    width: var(--px-50);
    height: var(--px-50);
    /* transition: background-image 0.6s; */
    z-index: 1;
    pointer-events: none;
  }
  .discover_link li[data-type="knowledge"]::before{
    aspect-ratio: 1 / 1;
    top: var(--px-20);
    width: var(--px-40);
    height: var(--px-40);
    background-image: url("/discover/img/icon_knowledge.svg");
  }
  .discover_link li[data-type="enjoy"]::before{
    aspect-ratio: 1 / 1;
    top: var(--px-20);
    width: var(--px-40);
    height: var(--px-40);
    background-image: url("/discover/img/icon_enjoy.svg");
  }
  .discover_link li[data-type="knowledge"]:hover::before{
    background-image: url("/discover/img/icon_knowledge_white.svg");
  }
  .discover_link li[data-type="enjoy"]:hover::before{
    background-image: url("/discover/img/icon_enjoy_white.svg");
  }
  .discover_link .btn{
    padding: 0 0 0 var(--px-20);
    width: 100%;
    height: var(--px-180);
  }

  .discover_link .btn p{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--px-20);
    height: 100%;
    position: static;
    z-index: 1;
  }
  .discover_link li[data-type="knowledge"] .btn p{
    padding: var(--px-70) 0 0 0;
  }
  .discover_link li[data-type="enjoy"] .btn p{
    padding: var(--px-70) 0 0 0;
  }

  .discover_link .btn::after{
    content: "";
    aspect-ratio: 1/1;
    display: block;
    position: absolute;
    top: var(--px-12);
    right: var(--px-12);
    width: var(--px-8);
    height: var(--px-8);
    background-image: url("/common/img/icon_arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    /* transition: background-image 0.6s; */
  }
  .discover_link .btn:hover::after{
    background-image: url("/common/img/icon_arrow_white.svg");
  }
  .discover_link .btn p span[data-type="jp"]{
    font-size: var(--px-20);
    font-weight: 400;
    letter-spacing: 0.18em;
    line-height: 1.45;
  }
  .discover_link .btn p span[data-type="en"]{
    font-family: "Vollkorn", serif;
    font-size: var(--px-14);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.9;
  }



}