@charset "UTF-8";

body {
  font-size: 16px;
}
/* h1 {
  font-size: 28px;
  font-weight: bold;
}
h2 {
  font-size: 20px;
  margin: 10px 0;
}
h3 {
  font-size: 18px;
} */

h1 {
    font-size:3rem;
}

h2 {
    font-size: 2rem;
    font-weight: bold;
}

h3 {
    font-size: 1.5rem;
}

#fixed-header {
  /* position: absolute; */
  position: fixed;
  top: 0;
  width: 100%;
  height: 4rem;
  background: transparent;
  /* transition: background 0.5s, top 0.5s; */
  /* transition: .5s; */
  display: flex;
  align-items: center;
  z-index: 100;
}

/* 黒背景＋固定表示 */
#fixed-header.scrolled {
  position: fixed;
  top: -10rem;
  background: rgba(0,0,0,0.3);
  animation: header-fadeIn 0.5s forwards;
}

@keyframes header-fadeIn {
  from {
    top: -10rem;
  }
  to {
    top: 0;
  }
}


.navbar {
  padding: 0;
  width: 100%;
  justify-content: space-between;
}

.navbar-brand {
  /* margin-top: 2rem; */
  margin-left: 2rem;
}


.navbar-brand .rexvirt-logo {
  height: 1rem !important;
  object-fit: contain;
  /* mix-blend-mode: multiply; */
}

.navbar-toggler{
  border-color: transparent;
  /* padding-top: 1.5rem; */
}

.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.offcanvas {
  padding-top: 2rem;
}

.main{
  font-size: 24px;
  font-weight: bold;
}

.nav-item a{
  color: black;
  background-image: linear-gradient(#bd3a03, #bd3a03);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 1px;
  transition: all 0.6s ease 0s;
}

.nav-item a:hover {
  cursor: pointer;
	color: #bd3a03;
  background-position: bottom left;
  background-size: 100% 1px;
}

/* .nav-item a{
  display: inline-block;
  color: black;
  transition: all 0.6s ease 0s;
}

.nav-item a:hover {
  cursor: pointer;
	color: #bd3a03;
  transform: scale(1.1);
}


.nav-item a::after{
  content: "";
  border-right:.3rem solid #bd3a03;
  padding-left: .3rem;
  opacity: 0;
}

.nav-item a:hover::after{
  opacity: 1;
  animation: blink-caret .7s step-end infinite;
}

@keyframes blink-caret {
  0%, 100% { border-color: #bd3a03; }
  50% { border-color: transparent; }
} */

.dropdown-item.sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 20px;
}

#content {
  background: url(images/pattern-diamond.png);
  padding-top: 20px;
  padding-bottom: 20px;
}

#content-wrap {
  margin: 0 auto;
  background-color: white;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}


.icon{
  margin: 0.5rem;
}

a {
  text-decoration: none;
}

footer {
  background-color: #00172C;
  padding: 2rem;
}

footer img{
  width: 30px;
  height: auto;
}

.sns {
  /* max-width: 980px;
  margin: 0 auto; */
  display: flex;
  justify-content: center;
  gap: 16px;
}

.footer-title {
  padding-top: 60px;
  color: white !important;
  text-align: center;
}

footer p {
  /* padding: 15px 0; */
  color: white;
  text-align: center;
}

/* フッターメニュー */

div#g_navi {
  /* overflow: hidden; */
  text-align: center;
}

.fmenu {
  padding: 0;
  margin: 2rem 1rem;
}

li {
  padding: 0 10px;
  display: inline; /* 横並びにさせる */
  border-left: 1px solid #fff; /* 区切り線 */
}

li:first-child {
  border-left: none;
}

li a {
  color: #ffffff;
}



@media screen and (max-width: 959px) {
    .my_loading img {
        width: 200px; /* ロゴのサイズ（スマホ） */
    }


/* 1. ロゴの出現アニメーション（消さずに止めておく） */
.my_loading img {
    opacity: 0;
    animation: my_logo_fadeIn 2s 0.2s ease-out forwards; /* 100%で表示状態で止まる */
    width: 250px;
}

/* 2. 読み込み完了後に背景と一緒に消す設定 */
.my_loading.is-loaded {
    opacity: 0;
    visibility: hidden;
    transition: opacity 2.0s, visibility 2.0s;
}

/* 出現用のキーフレーム（不透明度1で止める） */
@keyframes my_logo_fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 背景のフェードアウトアニメーション */
/* @keyframes my_fadeOutBackground {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes my_logo_fade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    60% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
    }
} */
}

/* ========================　レスポンシブ　========================= */

/* ========================　スマホ　========================= */
@media (max-width: 768px) {
  .row>* {
    width: auto;
  }
}
 .col-auto{
  width: 30px;
 }