@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */

html {
  font-size: 62.5%;
}

object {
  pointer-events: none;
}

.sp,
.header_sp {
  display: none !important;
}

a[href^="tel:"] {
  pointer-events: none;
}

a {
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.img_r {
  overflow: hidden;
}

.img_r>img {
  float: right;
  width: 33%;
  margin-left: 15px;
  margin-bottom: 15px;
}


/* ---------------------------------------------------------------------------
  ★フォントファミリー
--------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
  ★LIST
--------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
  ★BASE
--------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
  ★テキスト
--------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
  ★インスタグラム
--------------------------------------------------------------------------- */

.instagramcont li {
  width: calc(100% / 4);
}

.instagramcont li a {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0 0 100%;
  background: #949494;
}

.instagramcont li a img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}


/* =======================================
	フローティングボタン pc_contents.cssに記載
========================================== */
#home {
  position: relative;
}

.f-Btn_wrap {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 15px;
  top: 20%;
  right: 0;
  z-index: 99;
}

.f-Btn01, .f-Btn02 {
  height: 9em;
  width: 60px;
  text-align: center;
}

.f-Btn01 a, .f-Btn02 a {
  display: inline-block;
  color: #fff;
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
  width: 100%;
  height: 100%;
  line-height: 4;
  background: #003278;
  box-shadow: 0 2px 0 0 #01204E;
}

.f-Btn01 a:hover {
  filter: brightness(140%);
}

.f-Btn02 a:hover {
  filter: brightness(120%);
}

.f-Btn02 {
  height: 7em;
}

.f-Btn02 a {
  background: #C72828;
  box-shadow: 0 2px 0 0 #600101;
}

/*====== 縦線が動いてスクロールを促す =======*/
.main {
  position: relative;
}

/*スクロールダウン全体の場所*/
.scrolldown1 {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  left: 10%;
  bottom: -25px;
  /*全体の高さ*/
  height: 120px;
}

/*Scrollテキストの描写*/
.scrolldown1 span {
  /*描画位置*/
  position: absolute;
  top: -15px;
  /*テキストの形状*/
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.05em;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
}

/* 線の描写 */
.scrolldown1::after {
  content: "";
  /*描画位置*/
  position: absolute;
  top: 0;
  left: 23px;
  /*線の形状*/
  width: 0.75px;
  height: 162px;
  /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 3s ease-in-out infinite;
  opacity: 0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
    background-color: white;
  }

  30% {
    height: 80px;
    opacity: 1;
  }

  100% {
    height: 0;
    top: 185px;
    opacity: 0;
    background-color: #141414;
  }
}