/* --------------------------------------------------
Contents
-------------------------------------------------- */
body { background: #F5F5F4; }
body #wrapper { padding: 0; }
body #wrapper .link-container { padding: 7.69% 0 0; }
body #wrapper .link-container .link-wrapper { position: relative; padding: 12.82% 0 0; }
body #wrapper .link-container .link-wrapper h1 { width: 46.41%; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; z-index: 2; }
body #wrapper .link-container .link-wrapper h1 img { aspect-ratio: 147 / 79; }
body #wrapper .link-container .link-wrapper .link-list .link-single { position: relative; }
body #wrapper .link-container .link-wrapper .link-list .link-single .imagearea img { aspect-ratio: 780 / 560; }
body #wrapper .link-container .link-wrapper .link-list .link-single .imagearea img.hover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity .4s ease 0s; }
body #wrapper .link-container .link-wrapper .link-list .link-single .imagearea img.hover.is-show { opacity: 1; }
body #wrapper .link-container .link-wrapper .link-list .link-single .textarea { color: #FFFFFF; font-weight: 600; font-size: 5.13vw; letter-spacing: .02em; position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); }
body #wrapper .link-container .link-wrapper .link-list .link-single .textarea p { display: flex; justify-content: center; align-items: baseline; column-gap: 3.59%; }
body #wrapper .link-container .link-wrapper .link-list .link-single .textarea p img { width: 2.31%; aspect-ratio: 15 / 23; }
body #wrapper footer { padding-top: 38px; }

@media screen and (orientation: landscape) { body #wrapper .link-container { padding: 3.8% 0 0; }
  body #wrapper .link-container .link-wrapper { padding: 5.57% 0 0; }
  body #wrapper .link-container .link-wrapper h1 { width: 19.79%; }
  body #wrapper .link-container .link-wrapper .link-list { display: flex; }
  body #wrapper .link-container .link-wrapper .link-list .link-single { width: 50%; }
  body #wrapper .link-container .link-wrapper .link-list .link-single a:hover img.hover { opacity: 1; }
  body #wrapper .link-container .link-wrapper .link-list .link-single .imagearea img { aspect-ratio: 720 / 675; }
  body #wrapper .link-container .link-wrapper .link-list .link-single .textarea { font-size: 1.67vw; }
  body #wrapper .link-container .link-wrapper .link-list .link-single .textarea p { column-gap: 2.08%; }
  body #wrapper .link-container .link-wrapper .link-list .link-single .textarea p img { width: 1.56%; }
  body #wrapper footer { padding-top: 40px; } }