@charset "utf-8";

/* =====================================================
    調整
===================================================== */
html {
	background-color: transparent !important;
}

.h_bar, 
#beltbnr {
	display: none;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.clearfix:before {
  content: "";
  display: block;
  clear: both;
}

.clearfix {
  display: block;
}

#specialty {
  overflow: hidden;
}

#specialty a {
  text-decoration: none;
}

#specialty figure {
  margin: 0;
}

#specialty a:hover {
  color: #000000 !important;
}

#specialty a:hover img {
  opacity: 1 !important;
}

/*--sticky用--*/
html, body, div.wrapper_ {
  overflow: visible !important;
}

/*--SPのみ表示用--*/
@media only screen and (max-width: 429px) {
  .sp {
    display: block;
  }

  .pc {
    display: none;
  }
}

@media only screen and (min-width: 430px) and (max-width: 767px) {
  .sp {
    display: none;
  }

  .pc {
    display: none;
  }
}

/*--PCのみ表示用--*/
@media only screen and (min-width: 768px) {
  .sp {
    display: none;
  }

  .pc {
    display: block;
  }
}

/* =====================================================
    FONT
===================================================== */
:root {
  --leading-trim: calc((1em - 1lh) / 2);
}

@supports not (top: 1lh) {
  :root {
    --leading-trim: 0px;
  }
}

.noto-sans-cjk-jp-400 {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.noto-sans-cjk-jp-500 {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.noto-sans-cjk-jp-700 {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.archivo-expanded-400 {
  font-family: "archivo-expanded", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.itc-avant-garde-gothic-pro-500 {
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  font-weight: 500;
  font-style: normal;
}


/* =====================================================
    ANIMATION
===================================================== */
/* hover */
.underline {
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #666666;
  transition: width 0.3s ease-in-out;
}

.underline:hover::after {
  width: 100%;
}

/* fade - opening */
.op-fade1, 
.op-fade2, 
.op-fade3 {
  opacity: 0;
}

.op-fade1.is-active {
  animation: op-fade 1s ease forwards;
}

.op-fade2.is-active {
  animation: op-fade 1s ease forwards;
  animation-delay: 1s;
}

.op-fade3.is-active {
  animation: op-fade 1s ease forwards;
  animation-delay: 2s;
}

@media only screen and (min-width: 768px) {
  .op-fade3.is-active {
    animation-delay: 1s;
  }
}

@keyframes op-fade {
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* fade - scroll */
.js-fade {
  opacity: 0;
  transition: opacity 1s ease;
}

.js-fade.is-active {
  opacity: 1;
}