/* --------------------------------------------------
Contents
-------------------------------------------------- */
body #wrapper #top { position: relative; overflow: hidden; margin: 0 0 110px; }
body #wrapper #top .iframe_wrapper { position: relative; left: 50%; transform: translate(-50%, 0); }
body #wrapper #top .iframe_wrapper iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
body #wrapper #top h1 { position: absolute; width: 107px; top: 24px; left: 0; right: 0; margin: 0 auto; }
body #wrapper #top .onward { display: none; }
body #wrapper #contents { margin: 0 0 100px; }
body #wrapper #contents .lead { text-align: center; margin: 0 0 125px; }
body #wrapper #contents .lead h2 { font-family: minion-pro, serif; font-size: 3.4rem; margin-bottom: 35px; opacity: 0; transform: translate(0, 20px); }
body #wrapper #contents .lead p { font-size: 1.3rem; line-height: 2; opacity: 0; }
body #wrapper #contents .lead.is-show h2 { opacity: 1; transform: none; transition: all 1s ease 0s; }
body #wrapper #contents .lead.is-show p { opacity: 1; transition: opacity 1s ease 0s; }
body #wrapper #contents .links .head { position: relative; margin: 0 0 135px; opacity: 0; }
body #wrapper #contents .links .head .imagearea img { width: 100%; }
body #wrapper #contents .links .head .textarea { position: absolute; top: -30px; right: 0; bottom: 0; left: 0; text-align: center; }
body #wrapper #contents .links .head .textarea h2 { font-size: 1.1rem; }
body #wrapper #contents .links .head .textarea h2 span { font-family: minion-pro, serif; font-size: 2rem; letter-spacing: .08em; display: block; margin: 0 0 10px; }
body #wrapper #contents .links .head.is-show { opacity: 1; transition: opacity 1s ease 0s; }
body #wrapper #contents .links ul li { position: relative; opacity: 0; transform: translate(0, 20px); }
body #wrapper #contents .links ul li a { display: block; width: 250px; margin: 0 auto; position: relative; }
body #wrapper #contents .links ul li a .inner .textarea { color: #fff; font-family: minion-pro, serif; text-align: center; }
body #wrapper #contents .links ul li a .inner .textarea .center { position: absolute; top: 50%; left: 0; right: 0; transform: translate(0, -50%); z-index: 3; }
body #wrapper #contents .links ul li a .inner .textarea .center .num { font-size: 1.8rem; letter-spacing: .16em; margin: 0 0 15px; }
body #wrapper #contents .links ul li a .inner .textarea .center h3 { font-size: 2.5rem; letter-spacing: .06em; margin-bottom: 15px; padding: 0 .5em; }
body #wrapper #contents .links ul li a .inner .textarea .center h3::after { background: #fff; }
body #wrapper #contents .links ul li a .inner .textarea .center .catch { font-family: a-otf-ud-reimin-pr6n, sans-serif; font-size: 1.1rem; line-height: 1.2; }
body #wrapper #contents .links ul li a .inner .textarea .arrow { position: absolute; bottom: 40px; left: 0; right: 0; z-index: 3; }
body #wrapper #contents .links ul li a .inner .textarea .arrow img { width: 22px; }
body #wrapper #contents .links ul li a .inner .textarea .arrow span { display: block; margin: 4px 0 0; font-size: 1rem; transform: scale(0.5); transform-origin: top center; letter-spacing: .16em; }
body #wrapper #contents .links ul li a .inner::before, body #wrapper #contents .links ul li a .inner::after { display: block; content: ""; position: absolute; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .4s ease 0s; }
body #wrapper #contents .links ul li a .inner::before { top: 8px; left: 8px; right: 8px; bottom: 8px; border: solid 1px #fff; }
body #wrapper #contents .links ul li a .inner::after { width: 181px; height: 181px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(133, 128, 125, 0.6); }
body #wrapper #contents .links ul li a:hover .inner::before, body #wrapper #contents .links ul li a:hover .inner::after { opacity: 1; }
body #wrapper #contents .links ul li::after { display: block; content: ""; position: absolute; left: 0; bottom: 0; width: calc((100% - 250px) * .5); height: 1px; background: #7b4931; }
body #wrapper #contents .links ul li + li { margin: 95px 0 0; }
body #wrapper #contents .links ul li:nth-child(2)::after { left: auto; right: 0; }
body #wrapper #contents .links ul li.is-show { opacity: 1; transform: none; transition: all 1s ease 0s; }

@media screen and (min-width: 768px) { body #wrapper #top { margin: 0 0 170px; height: 100vh; position: relative; text-align: center; }
  body #wrapper #top .iframe_wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  body #wrapper #top h1 { width: 214px; top: 39px; }
  body #wrapper #top .onward { display: block; position: absolute; top: 0; right: 0; width: 145px; }
  body #wrapper #contents { margin: 0 0 235px; }
  body #wrapper #contents .lead { margin: 0 0 240px; }
  body #wrapper #contents .lead h2 { font-size: 6.8rem; margin-bottom: 70px; }
  body #wrapper #contents .lead p { font-size: 1.6rem; line-height: 2.25; }
  body #wrapper #contents .links .head { margin: 0 0 230px; }
  body #wrapper #contents .links .head .textarea { top: -75px; }
  body #wrapper #contents .links .head .textarea h2 { font-size: 2.9rem; }
  body #wrapper #contents .links .head .textarea h2 span { font-size: 5.4rem; margin: 0 0 25px; }
  body #wrapper #contents .links ul li a { width: 500px; }
  body #wrapper #contents .links ul li a .inner .textarea .center .num { font-size: 3.7rem; margin: 0 0 35px; }
  body #wrapper #contents .links ul li a .inner .textarea .center h3 { font-size: 5.1rem; margin-bottom: 30px; }
  body #wrapper #contents .links ul li a .inner .textarea .center .catch { font-size: 2.2rem; }
  body #wrapper #contents .links ul li a .inner .textarea .arrow { bottom: 85px; }
  body #wrapper #contents .links ul li a .inner .textarea .arrow img { width: 44px; }
  body #wrapper #contents .links ul li a .inner .textarea .arrow span { margin: 10px 0 0; font-size: 1.3rem; transform: none; }
  body #wrapper #contents .links ul li a .inner::before { top: 15px; left: 15px; right: 15px; bottom: 15px; }
  body #wrapper #contents .links ul li a .inner::after { width: 362px; height: 362px; }
  body #wrapper #contents .links ul li::after { width: calc((100% - 500px) * .5); }
  body #wrapper #contents .links ul li + li { margin: 113px 0 0; }
  body #wrapper #contents .links ul li:nth-child(3) a .inner .textarea .center h3 { padding: 0; } }