@charset "UTF-8";
@font-face { font-family: YuGothicM; src: local("Yu Gothic Medium"); }
/*Animate */
/*縦書き*/
/* -----------------------------------------------------------
	.con-mailvisual
----------------------------------------------------------- */
.con-mailvisual { position: fixed; top: 0; left: 0; height: 100vh; width: calc(100% - 500px); }
.con-mailvisual figure { overflow: hidden; height: 100%; margin: 0; padding: 0; position: relative; }
.con-mailvisual figure:before { content: ""; background-color: #000; opacity: 0.7; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.con-mailvisual figure img { object-fit: cover; width: 100%; height: 100%; filter: blur(5px); }
.con-mailvisual .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 320px; }

/* -----------------------------------------------------------
	main
----------------------------------------------------------- */
main { width: 500px; height: 100vh; overflow: hidden; position: relative; z-index: 1; margin-left: auto; }
@media only screen and (max-width: 767px) { main { overflow: inherit; width: 100%; } }
main .box-movie { overflow: hidden; max-width: 500px; aspect-ratio: 9/16; position: relative; }
@media only screen and (min-width: 1025px) { main .box-movie:before { content: "\f04b"; font-weight: 900; color: #fff; font-size: 40px; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); }
  main .box-movie.noplay:before { content: ""; animation: removing 1s both; } }
@media print { main .box-movie:before { content: "\f04b"; font-weight: 900; color: #fff; font-size: 40px; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); }
  main .box-movie.noplay:before { content: ""; animation: removing 1s both; } }
.ie8 main .box-movie:before { content: "\f04b"; font-weight: 900; color: #fff; font-size: 40px; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); }
.ie8 main .box-movie.noplay:before { content: ""; animation: removing 1s both; }
main .box-movie video { object-fit: cover; width: 100%; height: 100%; }
main .button-cv { position: absolute; bottom: 4vh; margin: 0 auto; left: 0; right: 0; width: 80%; }
@media only screen and (max-width: 767px) { main .button-cv { position: fixed; } }
main .button-cv a { display: block; background-color: #333; color: #fff; -moz-border-radius: 9999px; -webkit-border-radius: 9999px; border-radius: 9999px; text-align: center; padding: 16px 40px; }

@keyframes removing { from { content: "\f04c"; } }
.fas { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; font-family: "Font Awesome 5 Free",sans-serif; font-weight: 900; }

@font-face { font-family: "Font Awesome 5 Free"; font-style: normal; font-weight: 900; font-display: swap; src: url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.eot"); src: url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.woff2") format("woff2"), url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.woff") format("woff"), url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.ttf") format("truetype"), url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }