.background {
	width: 100%;
	height: 100vh;
	background-image: url(../img/handshake.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left;
	position: relative;
}

/** 採用のコンテンツ */
.bg-image{
	width: 100%;
	background-image: url(../img/hiring.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	backdrop-filter: blur(12px);
}
.bg-image:before{
	content: '';
	background: inherit;/*.bgImageで設定した背景画像を継承する*/
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	position: absolute;
	/*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	z-index: -1;/*重なり順序を一番下にしておく*/
}

.contact-button {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #007BFF; /* ボタンの背景色 (Bootstrapのデフォルトの青) */
    color: white; /* テキストの色 */
    border: none;
    padding: 12px 24px; /* パディング */
    font-size: 16px;
    border-radius: 5px; /* 角を丸く */
    cursor: pointer; /* マウスカーソルがボタン上にあるときのスタイル */
    transition: background-color 0.3s; /* アニメーション効果 */
}

.contact-button:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
}

.navbar-brand-original{
	background: url(../img/headerlogo.png) no-repeat left center;
	background-size: contain;
	height: 50px;
	width: 100px;
}

.background {
    display: flex;          /* フレックスボックスを使用 */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center;    /* 縦方向の中央揃え */
    height: 100vh;          /* viewportの高さを100%にする */
}

/** トップ画面の文字の配置位置を調整 */
.background .container {
    margin-left: 0;
}

/** 各タイトルの装飾 */
.created-title {
	border-bottom: solid 3px skyblue;
	position: relative;  
}
.created-title:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #ffc778;
	bottom: -3px;
	width: 30%;
}

/* トップに戻るボタン */
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
	background: rgba(255, 255, 255, 0.2);
	border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

.created-title-before{
	background-color: #000;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
}

.created-title-after{
	background-color: rgb(248, 157, 65);
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
}

/* table01 */
#table01 tr {
	border-bottom: 1px solid #b5b1b1;
}
#table01 th,
#table01 td {
	padding: 24px 0;
	border: none;
}
#table01 th {
	width: 30%;
}
/* sp */
@media only screen and (max-width: 480px) {
	#table01 th,
	#table01 td {
		width: 100%;
		display: block;
	}
	#table01 th {
		width: 100%;
	}
	#table01 td {
		padding-top: 0;
	}
}

.map {
	width: 100%;
	position: relative;
	padding-top: 56.25%;
  }
  
  .map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

a.btn--green {
	color: #fff;
	background-color: #094;
}
  
  a.btn--green:hover {
	color: #fff;
	background: #00a349;
  }
  
  a.btn--green.btn--cubic {
	border-bottom: 5px solid #00662d;
  }
  
  a.btn--green.btn--cubic:hover {
	margin-top: 3px;
	border-bottom: 2px solid #00662d;
  }
  
  a.btn-c {
	padding: 0.5rem 2rem 0.5rem 1rem;
  }
  
  a.btn-c i.fa {
	margin-right: 1rem;
  }

  /* スクロール促す */
  .scrolldown4{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  font-weight: bold;
  font-size: 1.5rem;
  padding: 12px 24px;
  bottom:10%;
  right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}
/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
	0%{bottom:1%;}
	50%{bottom:3%;}
   100%{bottom:1%;}
}
/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
  position: absolute;
  left:-20px;
  bottom:10px;
    /*テキストの形状*/
  color: #eee;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #eee;
    transform: skewX(-31deg);
}
.scrolldown4:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  right:0;
    /*矢印の形状*/
  width:1px;
  height: 80px;
  background:#eee;
}

@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color: #3293e7;
    }
}

@media screen and (min-width:925px) {
	/*　画面サイズが1024pxからはここを読み込む　*/
	.nav-item {
		margin-right: 20px;
	}
}

@media screen and (min-width:481px) and ( max-width:925px) {
	/*　画面サイズが481pxから1023pxまではここを読み込む　*/
	.hidden-v {
		display: none;
	}
}

@media screen and (max-width:480px) { 
	/*　画面サイズが480pxからはここを読み込む　*/
	.hidden-v {
		display: none;
	}
}