@charset "UTF-8";
/* #topomg
****************************************** */
#topimg { width: 100%; height: 100vh; position: relative; background-image: url("../images/mainimg.jpg"); background-repeat: no-repeat; background-position: center center; background-size: 80%; }
#topimg:before { position: absolute; content: ""; display: block; top: 0; left: 0; width: 100%; height: 100%; background: url(../../common/images/bg-dot-wh@2x.png) repeat top left; background-size: 2px 2px; background-color: transparent; opacity: 1; }
@media only screen and (max-width: 991px) { #topimg { background-size: 100%; background-position: center center; } }
#topimg canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; }

.message-wrap { text-align: center; position: absolute; top: 50%; width: 100%; padding: 0 8%; margin: -4rem auto; }
@media only screen and (max-width: 991px) { .message-wrap { text-align: center; margin: -3rem auto; } }

#message { font-size: 4.2rem; font-family: "Poppins",sans-serif; letter-spacing: .1em; line-height: 1.1; color: rgba(0, 0, 0, 0.85); text-transform: uppercase; font-weight: 700; }
#message svg { max-width: 100%; height: auto; }
@media only screen and (max-width: 991px) { #message { font-size: 7vw; } }
@media only screen and (max-width: 575px) { #message { font-size: 9.2vw; } }

#message-jp { letter-spacing: .1em; font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif; font-size: 1.1rem; line-height: 1.8; color: rgba(0, 0, 0, 0.85); margin-top: 1rem; }
@media only screen and (max-width: 991px) { #message-jp { font-size: 1.8vw; } }
@media only screen and (max-width: 575px) { #message-jp { font-size: 2.6vw; } }

.btn-scroll-wrap { position: absolute; z-index: 1; bottom: 0; width: 100%; }

a.btn-scroll { display: block; margin: auto; font-size: 0.9rem; text-align: center; width: 50px; height: 70px; position: relative; color: #D51410 !important; cursor: pointer; letter-spacing: 0.1em; }
a.btn-scroll span { position: absolute; display: block; top: 20px; left: 50%; width: 2px; height: 50px; margin-left: -1px; background-color: rgba(0, 0, 0, 0.05); overflow: hidden; }
a.btn-scroll span:before { content: ""; display: block; width: 2px; height: 50px; position: absolute; top: 0; left: 0; background-color: #D51410; -webkit-animation: sdb 2s infinite; animation: sdb 2s infinite; }

@-webkit-keyframes sdb { 0% { top: -50px; }
  100% { top: 50px; } }
@keyframes sdb { 0% { top: -50px; }
  100% { top: 50px; } }
/* #sec-recent
****************************************** */
#sec-recent { position: relative; background: url(../../images/bg-sec-recent.jpg) no-repeat center center; background-size: cover; position: relative; }
#sec-recent:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.container-recent { margin: auto; max-width: 1280px; }

#recent-news ul { margin: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 15px 2rem; position: relative; z-index: 1; }
#recent-news ul li { -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 0 20px; min-width: 300px; }
#recent-news ul li a { display: block; height: 100%; color: inherit; text-decoration: none; line-height: 1.6; position: relative; }
#recent-news ul li a .news-img-wrap { overflow: hidden; position: relative; margin-bottom: 1rem; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 10px; background-color: #fff; }
#recent-news ul li a .news-img { padding-top: 52%; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; transition: 0.8s; }
#recent-news ul li a .news-date { font-size: 0.9rem; text-align: right; color: rgba(0, 0, 0, 0.3); font-weight: 400; margin-bottom: 1rem; position: relative; }
#recent-news ul li a .news-date:before { font-size: 0.8rem; float: left; }
#recent-news ul li a .news-date:after { content: ""; display: table; clear: both; }
#recent-news ul li a .news-title { color: rgba(0, 0, 0, 0.85); font-size: 1rem; line-height: 1.8; }
#recent-news ul li a:hover .news-img { transform: scale(1.1); }
#recent-news ul li a:hover .news-title { color: #0275d6; text-decoration: underline; }
#recent-news ul li a[href^="/news/release"] .news-date:before { content: "ニュースリリース"; background-color: #D51410; color: #fff; padding: 0 1em; min-width: 8em; text-align: center; line-height: 1.8; font-size: 11px; letter-spacing: normal; border-radius: 2px; vertical-align: middle; position: absolute; top: 0; left: 0; }
#recent-news ul li a:not([href^="/news/release"]) .news-date:before { content: "お知らせ"; background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.45); font-weight: 600; padding: 0 1em; min-width: 8em; text-align: center; line-height: 1.8; font-size: 11px; letter-spacing: normal; border-radius: 2px; vertical-align: middle; position: absolute; top: 0; left: 0; }
#recent-news ul li a.pickup .news-date:before { content: "ピックアップ"; color: #0275d6; }
@media only screen and (max-width: 767px) { #recent-news ul li { min-width: 260px; padding: 0 10px; }
  #recent-news ul li a .news-title { font-size: 0.9rem; } }

/* #sec-about
****************************************** */
.sec-about { padding: 0 4%; overflow: hidden; }

.sec-grad { background: -moz-linear-gradient(to right bottom, #fff, #eee); /* Firefox */ background: -webkit-linear-gradient(to right bottom, #fff, #eee); /* safari Chrome */ background: -ms-linear-gradient(to right bottom, #fff, #eee); /* IE */ background: linear-gradient(to right bottom, #fff, #eee); }

.about-text { height: 680px; padding-top: 160px; max-width: 480px; line-height: 1.8; }

.about-img { position: relative; }
.about-img img { height: auto; width: 100%; max-width: 860px; position: absolute; bottom: 0; right: 0; }

.about-title { font-size: .9rem; font-weight: 400; padding-bottom: 1.5rem; margin-bottom: 1.5rem; position: relative; color: rgba(0, 0, 0, 0.3); /*&:after { content: ""; display: block; width: 20px; height: 2px; background-color: $red; position: absolute; bottom: 0; left: 0;
}*/ }
.about-title span { color: rgba(0, 0, 0, 0.85); margin-top: 1rem; display: block; font-weight: normal; font-size: 2.4rem; letter-spacing: 0.05em; }
.about-title.white span { color: #fff; }

@media only screen and (max-width: 1200px) { .about-title span { font-size: 2rem; }
  .about-text { padding-top: 80px; padding-bottom: 40px; height: auto; max-width: none; } }
@media only screen and (max-width: 767px) { .about-title span { font-size: 2rem; }
  .about-text { padding-top: 5rem; height: auto; }
  .about-text.float-right { float: none !important; }
  .about-img { height: 80vw; } }