@charset "UTF-8";
body {
  background: rgba(2, 11, 37, 1.00);
  line-height: 1.7;
  font-size: 0.875rem;
  font-family: "M PLUS 1p", sans-serif;
  color: #000000;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}
body {
  word-break: break-all;
}
html {
  scroll-behavior: smooth;
}
/*------------------------------
	共通
------------------------------*/
/*------------------------------
	文字
------------------------------*/
.min {
  font-family: "Noto Serif JP", serif;
}
.big12 {
  font-size: 120% !important;
}
.big16 {
  font-size: 160% !important;
}
.big20 {
  font-size: 200% !important;
}
.big24 {
  font-size: 240% !important;
}
.small {
  font-size: small !important;
}
.lin1 {
  line-height: 1.2 !important;
}
.b6 {
  font-weight: bold;
}
.b8 {
  font-weight: 800;
}
.red {
  color: rgba(200, 0, 83, 1.00);
}
h2.ttl, h3.ttl {
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 1px;
}
.sub_ttl {
  font-size: 1.8em;
  font-weight: bold;
  padding-bottom: 0.5em;
}
.image img {
  width: 100%;
  height: auto;
}
.em {
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: rgba(249, 142, 75, 0.3);
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
}
@media (min-width:1100px) {
  .sm_onry {
    display: none;
  }
}
@media (min-width:576px) {
  .md_onry {
    display: none;
  }
}
@media (max-width:1999.98px) {
  .big20 {
    font-size: 180% !important;
  }
}
@media (max-width:1099.98px) {
  .big20 {
    font-size: 160% !important;
  }
  .big16 {
    font-size: 130% !important;
  }
  .pc_onry {
    display: none;
  }
  .ttl img {
    width: 60px;
  }
}
@media (max-width:767.98px) {
  .big20 {
    font-size: 150% !important;
  }
  .big24 {
    font-size: 190% !important;
  }
}
@media (max-width:575.98px) {
  .smmin_onry {
    display: none;
  }
  h2.ttl, h3.ttl {
    font-size: 30px;
  }
  .ttl img {
    width: 50px;
  }
  .big12 {
    font-size: 105% !important;
  }
  .big16 {
    font-size: 110% !important;
  }
  .big20 {
    font-size: 120% !important;
  }
  .big24 {
    font-size: 170% !important;
  }
}
@media (max-width:500px) {
  .sub_ttl {
    font-size: 20px;
  }
}
@media (max-width:400px) {
  h2.ttl, h3.ttl {
    font-size: 26px;
  }
}
/*------------------------------
	Links
------------------------------*/
a {
  color: rgba(0, 0, 0, 1.00);
}
a:hover {
  text-decoration: none;
  transition: all 0.6s ease;
  color: rgba(0, 215, 187, 1.00);
}
#main a[target="_blank"] {
  text-decoration: underline;
}
#main a[target="_blank"]:after {
  font: var(--fa-font-solid);
  content: "\f35d";
  padding-left: 5px;
  padding-right: 5px;
}
#main .post_body a[target="_blank"]:after {
  font: var(--fa-font-solid);
  content: "";
  padding-left: 0px;
  padding-right: 0px;
}
/* orignal botan */
.linkbt a {
  font-size: 2.8em;
  font-weight: bold;
  position: relative;
  z-index: 1;
  display: block;
  width: 180px;
  padding: 0;
  line-height: 1.4;
  user-select: none;
  transition: transform 0.3s;
  color: rgba(0, 0, 0, 1.00);
  border: 0;
  margin: 10px auto 0;
}
.linkbt a:before {
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 20%;
  width: 60%;
  height: 10px;
  content: '';
  transition: transform 0.3s, opacity 0.3s;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 70%);
}
.linkbt a:hover {
  transition: all 0.6s ease;
  color: rgba(0, 215, 187, 1.00);
  transform: translateY(-6px);
  animation: upfrfr 1.5s linear infinite alternate 0.3s;
}
.linkbt a:hover:before {
  transform: translateY(6px);
  animation: upfrfr_shadow 1.5s linear infinite alternate 0.3s;
  opacity: 0.4;
}
@keyframes upfrfr {
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(-6px);
  }
}
@keyframes upfrfr_shadow {
  0% {
    transform: translateY(6px);
    opacity: 0.4;
  }
  50% {
    transform: translateY(3px);
    opacity: 1;
  }
  100% {
    transform: translateY(6px);
    opacity: 0.4;
  }
}
.link_box {
  margin: 3em;
}
.link_box p {
  padding: 0.5em;
  margin: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 1.00);
  display: inline-block;
}
.txl a {
  display: inline-block;
  position: relative;
  color: rgba(0, 215, 187, 1.00);
}
.txl a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 100%;
  height: 1px;
  background-color: rgba(2, 240, 209, 1.00);
  transition: all .3s;
  transform: scale(0, 1);
  transform-origin: left top;
}
.txl a:hover::after {
  transform: scale(1, 1);
  color: rgba(0, 0, 0, 1.00);
}
.txa a {
  padding-right: 8px;
}
.txa a:after {
  font: var(--fa-font-solid);
  content: "\f138"
}
.popupbt {
  margin: 2em auto;
  width: 50%;
}
.popupbt a {
  background-color: rgba(0, 0, 0, 1.00);
  color: rgba(255, 255, 255, 1.00);
  padding: 1.5em 3em;
  display: block;
}
.popupbt a:hover {
  background-color: rgba(0, 0, 0, 0.80);
}
@media screen and (max-width:991.98px) {
  .popupbt {
    width: 90%;
  }
}
@media screen and (max-width:575.98px) {
  .link_box p {
    font-size: 13px;
  }
  .linkbt a {
    font-size: 22px;
  }
}
/*------------------------------
	フェードイン
------------------------------*/
/*----- ゆっくりふわっと -----*/
.ffade {
  animation: ffade 3s ease 10s forwards;
}
@keyframes ffade {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
/*----- 順番にフェードイン -----*/
.f_img img:last-child {
  margin: 0;
}
.elem {
  opacity: 0;
}
/* 下からフェードイン */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.inviewUp {
  opacity: 0;
}
/* 下からフェードイン */
.fadeUp2 {
  animation-name: fadeUpAnime2;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime2 {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.inviewUp2 {
  opacity: 0;
}
/*----- 順番にフェードイン -----*/
.fade_image img:last-child {
  margin: 0;
}
.imgBox {
  opacity: 0;
}
.element {
  opacity: 0;
}
/*----- 文字を順番にフェードイン -----*/
.fadetxt {
  opacity: 0;
  animation: fadein 2s ease forwards;
}
@keyframes fadein {
  100% {
    opacity: 1;
  }
}
/*以下遅延の指定*/
.txt01 {
  animation-delay: 0.5s;
}
.txt02 {
  animation-delay: 1s;
}
.txt03 {
  animation-delay: 1.5s;
}
.txt04 {
  animation-delay: 2s;
}
.txt05 {
  animation-delay: 2.5s;
}
.txt06 {
  animation-delay: 3s;
}
.txt07 {
  animation-delay: 3.5s;
}
/*------------------------------
Pagetop
------------------------------*/
#pageTop {
  position: fixed;
  bottom: 50px;
  right: 15px;
  z-index: 9999;
}
#pageTop a {
  display: block;
  width: 30px;
  padding-top: 2px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  background-color: rgba(2, 11, 37, 1.00);
}
#pageTop a i {
  font-size: 26px;
}
#pageTop a:hover {
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(0, 215, 187, 1.00);
}
@media (max-width:575.98px) {
  #pageTop {
    bottom: 50px;
    right: 10px;
  }
  #pageTop a {
    width: 26px;
  }
  #pageTop a i {
    font-size: 18px;
  }
}
/*------------------------------
Footer
------------------------------*/
#footer_logo {
  text-align: center;
}
#footer_logo #logotxt {
  width: 100%;
  max-width: 1600px;
  margin: 10vh auto;
}
#footer_logo #logotxt img {
  mix-blend-mode: multiply;
}
#footer_logo img {
  width: 100%;
  height: auto;
}
#footer {
  width: 100%;
  clear: both;
  color: rgba(255, 255, 255, 1.00);
}
#footer_cont {
  background-image: url(../img/common/triangle_h_bl.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 13vh;
  padding-top: 12vh;
  width: 100%;
}
#footer .container-fluid {
  background: rgba(2, 11, 37, 1.00);
}
#footer .container-fluid > .row {
  max-width: 1400px;
  margin: auto;
  padding: 0 3em 3em;
  border-bottom: 1px solid rgba(255, 255, 255, 1.00);
}
#footer_link {
  padding: 2em 0em 0em;
  display: inline-block;
}
#footer_link li {
  list-style: none;
  display: inline-block;
  color: rgba(255, 255, 255, 1.00);
  text-align: center;
  margin: 0;
}
#footer_link li + li {
  border-left: 1px solid rgba(255, 255, 255, 1.00);
}
#footer_link li:first-child {
  border-left: 1px solid rgba(255, 255, 255, 1.00);
}
#footer_link li:last-child {
  border-right: 1px solid rgba(255, 255, 255, 1.00);
}
#footer_link li a {
  text-align: center;
  padding: 0;
  margin: 0 10px;
}
#footer a {
  color: rgba(255, 255, 255, 1.00);
}
#footer a:hover {
  color: rgba(0, 215, 187, 1.00);
}
#footer_txt p {
  font-size: 1.3em;
  margin: 1em 0;
}
#footer iframe {
  max-width: 900px;
  width: 90%;
  height: 400px;
  margin: auto;
}
#copy {
  clear: both;
  font-size: small;
  text-align: center;
  padding: 3em;
}
@media (max-width:991.98px) {
  #footer_logo #logotxt {
    width: 100%;
    margin: 30vh auto;
  }
}
@media (max-width:575.98px) {
  #footer .container-fluid > .row {
    padding: 0 0em 3em;
  }
  #footer_hed {
    background-size: 150% auto;
    height: 800px;
  }
  #footer_hed img {
    width: 50%;
    max-width: 200px;
  }
  #footer_cont {
    text-align: center;
    background-size: 100% 10vh;
    padding-top: 10vh;
  }
  #footer_logo #logotxt {
    width: 100%;
    margin: 30vh auto;
  }
  #footer_cont .ttle {
    font-size: 20px;
  }
  #footer_txt p {
    font-size: 14px;
  }
  #footer iframe {
    height: 300px;
  }
  #footer_link li {
    display: block;
    list-style: square;
    padding: 0.5em;
  }
  #footer_link li:after {
    font: var(--fa-font-solid);
    content: "\f138"
  }
  #footer_link li + li {
    border-left: 0px solid rgba(255, 255, 255, 1.00);
  }
  #footer_link li:first-child {
    border-left: 0px solid rgba(255, 255, 255, 1.00);
  }
  #footer_link li:last-child {
    border-right: 0px solid rgba(255, 255, 255, 1.00);
  }
  #copy {
    font-size: 11px;
  }
}
/*------------------------------
　　page_common
------------------------------*/
article section {
  clear: both;
}
.aida {
  display: block;
}
.aida img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
/*contactbox
------------------------------*/
.contactbox {
  padding-bottom: 2em;
}
.contactbox .fuki {
  width: 170px;
  background-image: url(../img/common/sq_r.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
  margin: auto;
}
.contactbox .fuki p {
  font-size: 1.2em;
  line-height: 1.5;
  padding: 10px 20px;
  text-align: left;
}
.contactbox a {
  font-size: 1.4em;
  display: block;
  height: 20px;
}
.contactbox a:hover {
  color: rgba(0, 215, 187, 1.00) !important;
}
.contactbox a i {
  font-size: 1.6em;
  vertical-align: middle;
  padding-right: 5px;
}
@media (max-width:575.98px) {
  .contactbox .fuki {
    width: 130px;
    background-image: url(../img/common/sq_b.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
    margin: 0 auto 10px;
  }
  .contactbox .fuki p {
    font-size: 12px;
    padding: 10px 5px 15px;
    text-align: center;
  }
  .contactbox a {
    font-size: 16px;
    height: 10px;
  }
  .contactbox a i {
    font-size: 18px;
  }
}
/*man_img
------------------------------*/
#main_img {
  overflow: hidden;
  position: relative; /*h1の中央寄せ配置の起点とするためのrelative*/
}
#main-shdw {
  position: fixed;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  z-index: -1;
  background-image: url(../img/common/main_sdw.png);
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 15vh;
}
#main-area {
  position: fixed;
  z-index: -2; /*最背面に設定*/
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}
#main-area video, #main-area img {
  position: absolute;
  z-index: -2;
  left: 50%;
  transform: translateX(-50%);
}
/* メイン画像・loding
---------------------*/
#main_img .head_wrp {
  width: 100%;
  height: 100vh;
  overflow: hidden; /* はみ出た部分を隠す */
  position: relative;
}
.head_wrp .center_txt {
  position: absolute;
  top: 46%;
  left: 50%;
  text-align: center;
  display: block;
  transform: translate(-50%, -46%);
  max-width: 440px;
  z-index: 9999;
}
.head_wrp img {
  width: 100%;
  height: auto;
}
video, #main-area img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 背景画像の cover と同じ効果を img タグに与える */
  object-position: center;
  z-index: 0;
}
/*#head_wrp p {
  color: #FFFFFF;
  font-family: "Noto Serif JP", serif;
  font-size: 1.6rem;
  position: absolute;
  letter-spacing: 4px;
  top: 50%;
  left: 50%;
  text-align: center;
  width: 100%;
  display: block;
  transform: translate(-50%, -50%);
}*/
@media (min-width:992px) {
  #videoSm {
    display: none;
  }
}
@media (max-width:991.98px) {
  #videoPc {
    display: none;
  }
}
@media (max-width:576.98px) {
  .head_wrp .center_txt {
    width: 80%;
    max-width: 350px;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -44%);
  }
  /*  #head_wrp p {
    font-size: clamp(0.8rem, 0.298rem + 2.51vw, 1.2rem);
    top: 44%;
    left: 50%;
    transform: translate(-50%, -44%);
  }*/
}
/* loding
---------------------*/
#loading {
  background-color: rgba(2, 11, 37, 1.0);
  width: 100%;
  height: 100vh;
  overflow: hidden; /* はみ出た部分を隠す */
  z-index: 100000; /* ヘッダー（z-index: 10000）より前面に表示 */
  position: fixed;
}
#loading .logo {
  position: absolute;
  left: 10px;
  top: 8px;
  width: 26%;
}
#loading .logo img {
  width: 100%;
  height: auto;
  max-width: 310px;
  display: block;
  top: auto;
}
@media (max-width:991.98px) {
  #loading .logo {
    width: 50%;
  }
  #loading .logo img {
    max-width: 200px;
  }
  }
.fade-ffy {
  opacity: 0;
  animation: fadeIn 3s ease-in-out forwards, fluffy 2s ease-in-out infinite alternate;
  animation-delay: 0s, 3s;
}
/* ふわっと現れる（フェードイン）キーフレーム */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* 上下にふわふわ浮遊するキーフレーム */
@keyframes fluffy {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15px); /* 上に15px動かす */
  }
}
/* readEria
---------------------*/
#readEria {
  margin: auto;
  padding: 120px 0em 0em;
  width: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 1.00);
  background-image: url(../img/common/triangle_t_bl.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 120px;
}
#readEria #atlsmask {
  background: linear-gradient(90deg, rgba(2, 11, 37, 1) 0%, rgba(2, 11, 37, 1) 12%, rgba(255, 255, 255, 0.2) 12%, rgba(255, 255, 255, 0.2) 88%, rgba(2, 11, 37, 1) 88%, rgba(2, 11, 37, 1) 100%);
  width: 100%;
}
#readEria #atlsmask img {
  width: 80%;
  height: auto;
  vertical-align: top;
}
#readEria #atlsmask p {
  display: block;
  font-size: clamp(20px, 2.4vw, 40px);
  padding: 0;
  margin: 0;
  background-color: rgba(2, 11, 37, 1.00);
}
#readEria #readtxt {
  background-color: rgba(2, 11, 37, 1.00);
}
#readEria a {
  color: rgba(255, 255, 255, 1.00);
}
#readEria #readtxt p {
  font-size: clamp(11px, 1.8vw, 20px);
  padding: 2em;
}
#readEria .read .txt p {
  font-size: 1.3em;
  padding: 2em;
}
#readEria #readtxt .big {
  font-size: clamp(22px, 2.4vw, 40px);
  font-weight: bold;
  padding: 1em;
}
@media (max-width:767.98px) {
  #readEria {
    padding: 50px 0em 0em;
    background-size: 100% 50px;
  }
  #readEria #atlsmask {
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
  }
  #readEria #atlsmask img {
    width: 100%;
    height: auto;
  }
  #readEria .read .txt p {
    font-size: 1.2em;
    text-align: left;
    padding: 0 2em;
  }
}
@media (max-width:575.98px) {
  #readEria {
    padding: 80px 0em 0em;
    background-size: 100% 80px;
    background-image: url("../img/common/triangle_t_bl_sm.png");
  }
  #readEria #atlsmask p {
    padding: 1em;
  }
  #readEria #readtxt .big {
    padding: 0em;
  }
  #readEria .read .txt p {
    font-size: 13px;
  }
  #readEria .read .txt p br {
    display: none;
  }
  #readEria #readtxt p {
    padding: 1em;
  }
}