@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600&family=Noto+Serif+JP:wght@300;500;600&display=swap");
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

nav ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

.clearfix:before, .clearfix:after { content: " "; display: table; }

.clearfix:after { clear: both; }

img { vertical-align: bottom; max-width: 100%; }

li { list-style: none; }

body { font-family: "Manrope", sans-serif; -webkit-text-size-adjust: 100%; font-feature-settings: "palt"; letter-spacing: 0.06em; background: #e1e1eb; color: #000; }

html { font-size: calc(100vw / 32); }
@media only screen and (min-width: 901px) { html { font-size: 16px; } }

a { text-decoration: none; color: #000; }

h1, h2, h3, h4, h5 { font-weight: 300; }

template { display: none; }

#wrapper { overflow: hidden; }

@media only screen and (min-width: 901px) { .sp { display: none; } }
@media only screen and (max-width: 900px) { .pc { display: none; } }
@-webkit-keyframes curtain1 { 0% { width: 100%; -webkit-transform: skewX(0); -moz-transform: skewX(0); -ms-transform: skewX(0); -o-transform: skewX(0); transform: skewX(0); }
  40% { -webkit-transform: skewX(-2deg); -moz-transform: skewX(-2deg); -ms-transform: skewX(-2deg); -o-transform: skewX(-2deg); transform: skewX(-2deg); }
  100% { width: 0; -webkit-transform: skewX(-12deg); -moz-transform: skewX(-12deg); -ms-transform: skewX(-12deg); -o-transform: skewX(-12deg); transform: skewX(-12deg); } }
@-o-keyframes curtain1 { 0% { width: 100%; -webkit-transform: skewX(0); -moz-transform: skewX(0); -ms-transform: skewX(0); -o-transform: skewX(0); transform: skewX(0); }
  40% { -webkit-transform: skewX(-2deg); -moz-transform: skewX(-2deg); -ms-transform: skewX(-2deg); -o-transform: skewX(-2deg); transform: skewX(-2deg); }
  100% { width: 0; -webkit-transform: skewX(-12deg); -moz-transform: skewX(-12deg); -ms-transform: skewX(-12deg); -o-transform: skewX(-12deg); transform: skewX(-12deg); } }
@-moz-keyframes curtain1 { 0% { width: 100%; -webkit-transform: skewX(0); -moz-transform: skewX(0); -ms-transform: skewX(0); -o-transform: skewX(0); transform: skewX(0); }
  40% { -webkit-transform: skewX(-2deg); -moz-transform: skewX(-2deg); -ms-transform: skewX(-2deg); -o-transform: skewX(-2deg); transform: skewX(-2deg); }
  100% { width: 0; -webkit-transform: skewX(-12deg); -moz-transform: skewX(-12deg); -ms-transform: skewX(-12deg); -o-transform: skewX(-12deg); transform: skewX(-12deg); } }
@keyframes curtain1 { 0% { width: 100%; -webkit-transform: skewX(0); -moz-transform: skewX(0); -ms-transform: skewX(0); -o-transform: skewX(0); transform: skewX(0); }
  40% { -webkit-transform: skewX(-2deg); -moz-transform: skewX(-2deg); -ms-transform: skewX(-2deg); -o-transform: skewX(-2deg); transform: skewX(-2deg); }
  100% { width: 0; -webkit-transform: skewX(-12deg); -moz-transform: skewX(-12deg); -ms-transform: skewX(-12deg); -o-transform: skewX(-12deg); transform: skewX(-12deg); } }
@-webkit-keyframes curtain2 { 0% { left: auto; right: 0; background-position: right center; width: 100%; -webkit-transform: skewX(0); -moz-transform: skewX(0); -ms-transform: skewX(0); -o-transform: skewX(0); transform: skewX(0); }
  40% { -webkit-transform: skewX(2deg); -moz-transform: skewX(2deg); -ms-transform: skewX(2deg); -o-transform: skewX(2deg); transform: skewX(2deg); }
  100% { left: auto; right: 0; width: 0; background-position: right center; -webkit-transform: skewX(12deg); -moz-transform: skewX(12deg); -ms-transform: skewX(12deg); -o-transform: skewX(12deg); transform: skewX(12deg); } }
@-o-keyframes curtain2 { 0% { left: auto; right: 0; background-position: right center; width: 100%; -webkit-transform: skewX(0); -moz-transform: skewX(0); -ms-transform: skewX(0); -o-transform: skewX(0); transform: skewX(0); }
  40% { -webkit-transform: skewX(2deg); -moz-transform: skewX(2deg); -ms-transform: skewX(2deg); -o-transform: skewX(2deg); transform: skewX(2deg); }
  100% { left: auto; right: 0; width: 0; background-position: right center; -webkit-transform: skewX(12deg); -moz-transform: skewX(12deg); -ms-transform: skewX(12deg); -o-transform: skewX(12deg); transform: skewX(12deg); } }
@-moz-keyframes curtain2 { 0% { left: auto; right: 0; background-position: right center; width: 100%; -webkit-transform: skewX(0); -moz-transform: skewX(0); -ms-transform: skewX(0); -o-transform: skewX(0); transform: skewX(0); }
  40% { -webkit-transform: skewX(2deg); -moz-transform: skewX(2deg); -ms-transform: skewX(2deg); -o-transform: skewX(2deg); transform: skewX(2deg); }
  100% { left: auto; right: 0; width: 0; background-position: right center; -webkit-transform: skewX(12deg); -moz-transform: skewX(12deg); -ms-transform: skewX(12deg); -o-transform: skewX(12deg); transform: skewX(12deg); } }
@keyframes curtain2 { 0% { left: auto; right: 0; background-position: right center; width: 100%; -webkit-transform: skewX(0); -moz-transform: skewX(0); -ms-transform: skewX(0); -o-transform: skewX(0); transform: skewX(0); }
  40% { -webkit-transform: skewX(2deg); -moz-transform: skewX(2deg); -ms-transform: skewX(2deg); -o-transform: skewX(2deg); transform: skewX(2deg); }
  100% { left: auto; right: 0; width: 0; background-position: right center; -webkit-transform: skewX(12deg); -moz-transform: skewX(12deg); -ms-transform: skewX(12deg); -o-transform: skewX(12deg); transform: skewX(12deg); } }
@-webkit-keyframes leave_text { 0% { opacity: 1; }
  100% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } }
@-o-keyframes leave_text { 0% { opacity: 1; }
  100% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } }
@-moz-keyframes leave_text { 0% { opacity: 1; }
  100% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } }
@keyframes leave_text { 0% { opacity: 1; }
  100% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } }
.loading { position: fixed; width: 100%; height: 100%; top: 0; right: 0; z-index: 100; }
.loading .page_deco { position: fixed; width: 0; height: 100%; top: 0; left: 0; opacity: 0; background: fixed no-repeat left center; -webkit-background-size: 100vw; -o-background-size: 100vw; background-size: 100vw; }
.loading:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; right: 0; background: #d7cdf0; -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; }
.loading:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #ffabb0; -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; }
.loading .load_text { position: absolute; z-index: 2; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.loading.is_start { opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-out 4.5s; -moz-transition: all 0.2s ease-out 4.5s; -ms-transition: all 0.2s ease-out 4.5s; -o-transition: all 0.2s ease-out 4.5s; transition: all 0.2s ease-out 4.5s; }
.loading.is_start .load_text { opacity: 1; -webkit-transition: opacity 0.8s cubic-bezier(0.5, 1, 0.89, 1) 2s; -moz-transition: opacity 0.8s cubic-bezier(0.5, 1, 0.89, 1) 2s; -ms-transition: opacity 0.8s cubic-bezier(0.5, 1, 0.89, 1) 2s; -o-transition: opacity 0.8s cubic-bezier(0.5, 1, 0.89, 1) 2s; transition: opacity 0.8s cubic-bezier(0.5, 1, 0.89, 1) 2s; -webkit-animation: leave_text 1s ease-out 3.4s forwards; -moz-animation: leave_text 1s ease-out 3.4s forwards; -o-animation: leave_text 1s ease-out 3.4s forwards; animation: leave_text 1s ease-out 3.4s forwards; }
.loading.is_start:after { -webkit-animation: curtain1 0.6s cubic-bezier(0.33, 1, 0.68, 1) 0.3s forwards; -moz-animation: curtain1 0.6s cubic-bezier(0.33, 1, 0.68, 1) 0.3s forwards; -o-animation: curtain1 0.6s cubic-bezier(0.33, 1, 0.68, 1) 0.3s forwards; animation: curtain1 0.6s cubic-bezier(0.33, 1, 0.68, 1) 0.3s forwards; }
.loading.is_start .page_deco { width: 100%; opacity: 1; -webkit-transition: opacity 0.6s cubic-bezier(0.5, 1, 0.89, 1) 1s, width 0.6s cubic-bezier(0.45, 0, 0.55, 1) 1s; -moz-transition: opacity 0.6s cubic-bezier(0.5, 1, 0.89, 1) 1s, width 0.6s cubic-bezier(0.45, 0, 0.55, 1) 1s; -ms-transition: opacity 0.6s cubic-bezier(0.5, 1, 0.89, 1) 1s, width 0.6s cubic-bezier(0.45, 0, 0.55, 1) 1s; -o-transition: opacity 0.6s cubic-bezier(0.5, 1, 0.89, 1) 1s, width 0.6s cubic-bezier(0.45, 0, 0.55, 1) 1s; transition: opacity 0.6s cubic-bezier(0.5, 1, 0.89, 1) 1s, width 0.6s cubic-bezier(0.45, 0, 0.55, 1) 1s; -webkit-animation: curtain2 0.55s ease-out 3.4s forwards; -moz-animation: curtain2 0.55s ease-out 3.4s forwards; -o-animation: curtain2 0.55s ease-out 3.4s forwards; animation: curtain2 0.55s ease-out 3.4s forwards; }
.loading.is_start:before { -webkit-animation: curtain2 0.6s ease-out 3.4s forwards; -moz-animation: curtain2 0.6s ease-out 3.4s forwards; -o-animation: curtain2 0.6s ease-out 3.4s forwards; animation: curtain2 0.6s ease-out 3.4s forwards; }
@media only screen and (min-width: 901px) { .loading .page_deco { background-image: url("../img/bg_txt_2x_pc.png"); }
  .loading .load_text { width: 550px; } }
@media only screen and (max-width: 900px) { .loading .page_deco { background-image: url("../img/bg_txt_sp.png"); }
  .loading .load_text { width: 73.33vw; } }

@-webkit-keyframes op_contents { 0% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); }
  100% { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); } }
@-o-keyframes op_contents { 0% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); }
  100% { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); } }
@-moz-keyframes op_contents { 0% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); }
  100% { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); } }
@keyframes op_contents { 0% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); }
  100% { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); } }
@-webkit-keyframes op_contents_anime { 0% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); }
  100% { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }
@-o-keyframes op_contents_anime { 0% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); }
  100% { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }
@-moz-keyframes op_contents_anime { 0% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); }
  100% { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }
@keyframes op_contents_anime { 0% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); }
  100% { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }
@-webkit-keyframes op_contents_game { 0% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); }
  100% { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }
@-o-keyframes op_contents_game { 0% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); }
  100% { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }
@-moz-keyframes op_contents_game { 0% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); }
  100% { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }
@keyframes op_contents_game { 0% { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); }
  100% { opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }
.bg .bg_text { opacity: 0; }

#wrapper .catch_text { opacity: 0; }
#wrapper .main_text { opacity: 0; }
#wrapper .top_banner { opacity: 0; }
#wrapper .main_cast { opacity: 0; }
#wrapper .deco_text { opacity: 0; }
#wrapper .countdonw { opacity: 0; }
#wrapper .share_area { opacity: 0; }

.is_open .bg .bg_text { -webkit-animation: op_contents 3s cubic-bezier(0.5, 1, 0.89, 1) 2.5s forwards; -moz-animation: op_contents 3s cubic-bezier(0.5, 1, 0.89, 1) 2.5s forwards; -o-animation: op_contents 3s cubic-bezier(0.5, 1, 0.89, 1) 2.5s forwards; animation: op_contents 3s cubic-bezier(0.5, 1, 0.89, 1) 2.5s forwards; }
.is_open #wrapper .top_banner.-anime { -webkit-animation: op_contents_anime 1s ease-out forwards; -moz-animation: op_contents_anime 1s ease-out forwards; -o-animation: op_contents_anime 1s ease-out forwards; animation: op_contents_anime 1s ease-out forwards; }
.is_open #wrapper .top_banner.-game { -webkit-animation: op_contents_game 1s ease-out forwards; -moz-animation: op_contents_game 1s ease-out forwards; -o-animation: op_contents_game 1s ease-out forwards; animation: op_contents_game 1s ease-out forwards; }
.is_open #wrapper .btn_aj { -webkit-animation-delay: 0.45s; -moz-animation-delay: 0.45s; -o-animation-delay: 0.45s; animation-delay: 0.45s; }
.is_open #wrapper .main_cast { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; animation-delay: 0.9s; }
.is_open #wrapper .catch_text, .is_open #wrapper .deco_text, .is_open #wrapper .share_area { opacity: 1; -webkit-transition: opacity 0.8s ease-out 2s; -moz-transition: opacity 0.8s ease-out 2s; -ms-transition: opacity 0.8s ease-out 2s; -o-transition: opacity 0.8s ease-out 2s; transition: opacity 0.8s ease-out 2s; }
.is_open #wrapper .countdonw { -webkit-animation: op_contents 3s cubic-bezier(0.5, 1, 0.89, 1) 2.5s forwards; -moz-animation: op_contents 3s cubic-bezier(0.5, 1, 0.89, 1) 2.5s forwards; -o-animation: op_contents 3s cubic-bezier(0.5, 1, 0.89, 1) 2.5s forwards; animation: op_contents 3s cubic-bezier(0.5, 1, 0.89, 1) 2.5s forwards; }

@-webkit-keyframes bg_pc { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -webkit-transform: translate(100vw, -50vh); -moz-transform: translate(100vw, -50vh); -ms-transform: translate(100vw, -50vh); -o-transform: translate(100vw, -50vh); transform: translate(100vw, -50vh); } }
@-o-keyframes bg_pc { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -webkit-transform: translate(100vw, -50vh); -moz-transform: translate(100vw, -50vh); -ms-transform: translate(100vw, -50vh); -o-transform: translate(100vw, -50vh); transform: translate(100vw, -50vh); } }
@-moz-keyframes bg_pc { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -webkit-transform: translate(100vw, -50vh); -moz-transform: translate(100vw, -50vh); -ms-transform: translate(100vw, -50vh); -o-transform: translate(100vw, -50vh); transform: translate(100vw, -50vh); } }
@keyframes bg_pc { 0% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); }
  100% { -webkit-transform: translate(100vw, -50vh); -moz-transform: translate(100vw, -50vh); -ms-transform: translate(100vw, -50vh); -o-transform: translate(100vw, -50vh); transform: translate(100vw, -50vh); } }
.bg { position: fixed; width: 100%; height: 100%; z-index: 0; }
@media only screen and (min-width: 901px) { .bg { background: url("../img/bg_grange-2x_pc.png") no-repeat center; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; }
  .bg .bg_text { position: absolute; width: 100%; bottom: -10px; } }
@media only screen and (max-width: 900px) { .bg { background: url("../img/bg_grange_sp.png") no-repeat center; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; }
  .bg .bg_text { position: absolute; width: 90.13vw; left: 0; top: 4vw; } }

#wrapper { position: relative; z-index: 5; width: 100%; }
#wrapper .deco_text { line-height: 1.4; }
#wrapper .share_area { display: flex; -webkit-align-items: center; align-items: center; }
#wrapper .share_area .share_cap { font-weight: 600; }
#wrapper .share_area ul { display: flex; -webkit-align-items: center; align-items: center; }
#wrapper .share_area ul li { position: relative; }
#wrapper .share_area ul li a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#wrapper .share_area .svg_icon { fill: #000; clip-rule: evenodd; fill-rule: evenodd; }
#wrapper .main_area .top_banner { position: relative; overflow: hidden; }
#wrapper .main_area .top_banner span { overflow: hidden; }
#wrapper .main_area .top_banner span img { width: 100%; }
#wrapper .main_area .top_banner a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; }
@media only screen and (min-width: 901px) { #wrapper .main_contents { padding-bottom: 150px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height: 100vh; }
  #wrapper .main_area { width: 100%; display: flex; flex-direction: row-reverse; }
  #wrapper .main_area .top_banner { width: 50%; min-height: 50vw; }
  #wrapper .main_area .top_banner span { display: block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
  #wrapper .main_area .top_banner span img { filter: grayscale(0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
  #wrapper .main_area .top_banner span:before { pointer-events: none; content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffabb0; opacity: 0; z-index: 2; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
  #wrapper .main_area .top_banner.-anime span:hover img { filter: grayscale(100%); }
  #wrapper .main_area .top_banner.-anime span:hover:before { opacity: 0; }
  #wrapper .catch_text { position: absolute; bottom: 36px; left: 40px; width: 564px; width: 44.06%; }
  #wrapper .share_area { position: absolute; bottom: 80px; right: 40px; }
  #wrapper .share_area .share_cap { font-size: 12px; margin-right: 22px -16; }
  #wrapper .share_area li { width: 22px; margin-left: 16px; }
  #wrapper .share_area li .svg_icon { -webkit-transition: all 0.3s cubic-bezier(0.5, 1, 0.89, 1); -moz-transition: all 0.3s cubic-bezier(0.5, 1, 0.89, 1); -ms-transition: all 0.3s cubic-bezier(0.5, 1, 0.89, 1); -o-transition: all 0.3s cubic-bezier(0.5, 1, 0.89, 1); transition: all 0.3s cubic-bezier(0.5, 1, 0.89, 1); }
  #wrapper .share_area li:hover .svg_icon { fill: #fff; }
  #wrapper .deco_text { position: absolute; font-size: 10px; right: 40px; bottom: 36px; text-align: right; } }
@media only screen and (max-width: 900px) { #wrapper { padding-bottom: 9.33vw; }
  #wrapper .main_contents { position: relative; }
  #wrapper .main_contents .main_area { margin-bottom: 12vw; }
  #wrapper .main_contents .main_area .top_banner { width: 100%; height: 100vw; }
  #wrapper .catch_text { width: 73.33vw; margin: 0 auto 9.33vw; }
  #wrapper .main_text { width: 70.13vw; margin: 0 auto 6.13vw; }
  #wrapper .deco_text { text-align: center; font-size: 10px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); }
  #wrapper .share_area { width: 100%; -webkit-justify-content: center; justify-content: center; margin-bottom: 9.33vw; }
  #wrapper .share_area li { width: 5.33vw; margin-left: 4vw; } }