@charset "UTF-8";
/* 変数 */
:root {
	--primary-color: #333;
	--main-color: #0068b7;
	--background-business:  rgba(191, 217, 237, .85);
	--back-first: rgba(3, 54, 90, 0.3);
	--welfare-hover: rgb(0, 104, 183);
	--background-people: #e4f1fa;
	--border-color: #6fd9ed;
}
/* 共通項 開始---------------------------------------- */
html {
	font-size: 62.5%;
	box-sizing: border-box;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
body {
  font-family:
  'Noto Sans JP', sans-serif,
  'Roboto', sans-serif,
  "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  "Yu Gothic Medium",
  "游ゴシック Medium",
  YuGothic,
  "游ゴシック体",
  "ヒラギノ角ゴ Pro W3",
  Meiryo,
  sans-serif;
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  letter-spacing: 0.25rem;
  line-height: 2.0;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	object-fit: cover
}
ul {
	padding-left: 0;
	margin: 0;
}
li {
	list-style: none;
}
a {
	color: var(--primary-color);
	text-decoration: none;
}
p,h1,h2,h3,h4,h5,h6 {
	margin: 0;
}
.toUpper {
	text-transform: uppercase;
}
p {
  font-size: 1.6rem;
}
@media(max-width: 499px) {
  p {
    font-size: 1.4rem;
  }
}

/* 共通項 終了 */
/* header 開始------------------------------------------------- */
.header {
	max-width: 1920px;
	width: 100%;
	position: fixed;
	display: flex;
  top: 0;
	justify-content: space-between;
	align-items: center;
	padding: 1.6em 2em;
	background-color: #fff;
	z-index: 10000;
  border-bottom: 1px solid #bfd9ed;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.1);
}
.header .ul {
	display: flex;
	align-items: center;
}
.header .ul .logo {
	width: 12em;
	height: 100%;
}
.header .global-nav .ul li {
	margin-left: 0.8em;
	font-size: 1.6rem;
}
.header .ul-left li:nth-child(2) {
	margin-left: 1em;
	font-size: 1.6rem;
}
.header .global-nav .ul li:first-child {
	margin-left: 0;
}
.header .ul li a {
	display: block;
  padding: 0 8px;
  letter-spacing: 0.2rem;
}
.global-nav ul li a:hover {
	background-color: #0067b6;
  color: #fff;
  border-radius: 20px;
}
.global-nav ul li span {
  display: none;
}
.header .global-nav .ul li:last-child {
		display: none;
}
/* header 終了 */
/* mobile 開始------------------------------------------- */
#mobile {
  display: none;
  height: 70%;
  aspect-ratio: 1/1;
  position: absolute;
	top: 50%;
	right: 6%;
	transform: translateY(-50%);
  cursor: pointer;
}
#mobile::before,
#mobile::after {
  content: "";
  display: block;
  height: 2px;
  width: 75%;
  background-color: var(--primary-color);
  position: absolute;
  transition: 0.2s ease-out;
}
#mobile::before {
  top: 35%;
  right: 5%;
}
#mobile::after {
  bottom: 35%;
  right: 5%;
}
#mobile:hover::before {
  right: 12.5%;
}
#mobile:hover::after {
  left: 12.5%;
}
#mobile.mobileOpen::before {
  top: 50%;
  right: 13%;
  transform: rotate(45deg);
}
#mobile.mobileOpen::after {
  bottom: 49%;
  right: 12.5%;
  transform: rotate(-45deg);
} 
/* mobile 終了 */
/* first view 開始------------------------------------------- */
.first-view {
	width: 100%;
	height: 100vh;
	background-color: #E4F1FA;
	position: relative;
}
.first-view::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--back-first);
}
.first-view #video {
	max-width: 1980px;
	width: 100%;
	height: 100%;
}
.first-view video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#first-img {
	padding-left: 5%;
	width: 40%;
	height: 24%;
	aspect-ratio: 10/3;
	position: absolute;
	top: 55%;
	left: 0;
	transform: translateY(-50%);
	z-index: 10;
}
#first-img p {
	width: 100%;
	color: #fff;
	font-size: clamp(1.6rem, calc(-0.18rem + 1.9vw), 3.6rem);
	font-weight: normal;
	margin-top: .6em;
	white-space: nowrap;
  text-shadow: 3px 3px 5px rgba(0,0,0, 0.4);
}
@media(max-width: 500px){
 .first-view {
	width: 100%;
	height: 80vh;
}
  #first-img {
	padding-left: 0;
	width: 40%;
	height: 24%;
	aspect-ratio: 10/3;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}
#first-img p {
	width: 100%;
	color: #fff;
  text-align: center;
	font-size: clamp(1.6rem, calc(-0.18rem + 1.9vw), 3.6rem);
	font-weight: normal;
	margin-top: .6em;
	white-space: nowrap;
}
}
/* first view 終了 */
/* story 開始------------------------------------------- */
#story-wrapper {
	padding: 12em 0;
	background-color: #fff;
	position: relative;
	overflow: hidden;
}
#story-background1 {
	width: 40%;
	height: 50%;
	position: absolute;
	top: 0;
	right: -13%;
	opacity: .5;
	overflow: hidden;
}
#background1-img {
	background-image: url(../images/awaji.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}
#story-background2 {
	width: 40%;
	height: 40%;
	position: absolute;
	left: -12%;
	bottom: 5%;
}
#background2-img {
	background-image: url(../images/akashi_bridge.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}
#story-container {
	display: grid;
	place-items: center;
	text-align: center;
	position: relative;
	z-index: 1;
}
#story-container p {
	color: var(--primary-color);
	font-size: clamp(1.2rem, calc(-0.18rem + 2vw), 1.8rem);
	margin-bottom: 1.6em;
	line-height: 1.8;
}
#story-container h2 {
	color: var(--primary-color);
	font-size: clamp(1.8rem, calc(-0.18rem + 2.5vw), 3.0rem);
	font-weight: normal;
}
/* story 終了 */
/* company 開始------------------------------------------------- */
#company-wrapper {
	width: 100%;
	height: auto;
	padding: 12em 6%;
	display: flex;
	justify-content: center;
	gap: 3%;
	background-image: url(../images/business_bg.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}
#company-wrapper::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background-color: var(--background-business);
	backdrop-filter: blur(3px);
}
.flex-items {
  width: 330px;
  height: 460px;
	padding: 4em 1.6em;
	position: relative;
	z-index: 3;
	background-color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: 2s;
	perspective: 2000px;
	transform: translate3d(0, 30%, 1000px);
  box-shadow: 3px 3px 5px rgba(0,0,0, 0.1);
}
.flex-items.slideIn {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
}
.flex-items:nth-child(2).slideIn {
	transition-delay: .1s;
}
.flex-items:last-child.slideIn {
	transition-delay: .2s;
}
.flex-items::before {
	content: "";
	height: 6em;
	aspect-ratio: 1/1;
	background-size: contain;
	position: absolute;
	top: -6%;
	left: 50%;
	transform: translateX(-50%);
}
.flex-items:first-child::before {
	content: "";
	background-image: url(../images/about.png);
}
.flex-items:nth-child(2)::before {
	content: "";
	height: 5em;
	background-image: url(../images/business.png);
}
.flex-items:nth-child(3)::before {
	content: "";
	background-image: url(../images/greeting.png);
}
.flex-items .items-img {
	display: block;
	margin-bottom: 30px;
}
.flex-items .items-img img {
	width: 100%;
  transition: 1s;
}
.flex-items .items-text {
	color: var(--main-color);
	text-align: center;
}
.flex-items .items-text p {
	font-size: 1.8rem;
	margin: 0;
}
.flex-items .items-text h3 {
	font-size: 3.2rem;
	margin: 0;
}
.btn {
	display: block;
	width: 50%;
	height: 60px;
	background-color: var(--main-color);
	border: none;
	position: absolute;
	right: -3%;
	bottom: -4%;
	border-radius: 32px;
	overflow: hidden;
  color: #fff;
  font-size: 1.6rem;
  line-height: 60px;
  text-align: center;
  box-shadow: 3px 3px 5px rgba(0,0,0, 0.1);
}
.btn:hover {
  background-color: #bfd9ed;
  color: var(--main-color);
}
/* company 終了 */
/* profiles 開始------------------------------------------------ */
#profile {
	width: 100%;
	height: auto;
	padding: 16em 10% 10em;
	display: flex;
  max-width: 1440px;
  margin: auto;
}
#profile #profile-title {
	writing-mode: vertical-lr;
	font-size:  clamp(2rem, calc(-0.18rem + 2.5vw), 3.2rem);
	margin: 0;
	position: relative;
	transform: translateY(-4%);
  color: #333;
}
#profile #profile-title::after {
	content: "";
	width: 1px;
	height: 36%;
	background-color: var(--primary-color);
	position: absolute;
	left: 50%;
	bottom: 20%;
	transform: translateX(-50%);
}
#profile #profile-wrapper {
	display: flex;
	justify-content: center;
	flex-wrap: wrap-reverse;
	gap: 5em;
}
#profile-wrapper .profile-container {
	width: 100%;
  max-width: 280px;
	flex: 0 0 28%;
	display: flex;
	position: relative;
  margin-bottom: 40px;
}
.profile-container:first-child {
	order: 4;
}
.profile-container:nth-child(2) {
	order: 5;
}
.profile-container:nth-child(3) {
	order: 1;
}
.profile-container:nth-child(4) {
	order: 2;
}
.profile-container:last-child {
	order: 3;
}
.profile-container .profile-number {
	height:19%;
	aspect-ratio: 1/1;
	border: 1px solid var(--primary-color);
	border-radius: 50%;
	position: absolute;
	top: -12%;
	right: 1%;
}
.profile-container .profile-number span {
	font-size: clamp(1.0rem, calc(-0.18rem + 1.6vw), 1.4rem);
	display: block;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
  color: #000;
}
.profile-container .profile-one-word {
	font-size: clamp(1.4rem, calc(-0.18rem + 1.6vw), 2.0rem);
	writing-mode: vertical-lr;
	white-space: nowrap;
  margin-top: 1em;
  letter-spacing: 0.2em;
}
.profile-container .profile-items .profile-img {
	width: 90%;
	margin: 0 auto 1em;
  position: relative;
  box-shadow: 3px 3px 5px #ccc;
}
.profile-container .profile-items .profile-img a {
	display: block;
}
.profile-container .profile-items .profile-img img {
	width: 100%;
}
.profile-img .hover-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
.profile-img:hover .hover-img {
	opacity: 1;
	visibility: visible;
}
.profile-items .profile-texts {
	color: var(--primary-color);
}
.profile-items .profile-texts .profile-job {
	font-size: clamp(1.2rem, calc(-0.18rem + 1.6vw), 1.6rem);
	width: 90%;
	margin: 0 0 0 auto;
}
.profile-items .profile-texts .profile-name {
	font-size: clamp(1.2rem, calc(-0.18rem + 1.6vw), 1.6rem);
	text-align: center;
	margin: 0;
}
/* profiles 終了 */
/* environment 開始---------------------------------------- */
#environment-wrapper {
	position: relative;
	width: 100%;
	height: 80vh;
}
#en-text-box {
	color: var(--primary-color);
	background-color: #fff;
	width: 40%;
  height: 400px;
	padding: 4em 1.6%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
}
#en-text-box #en-title {
	font-size: clamp(1.2rem, calc(-0.18rem + 2vw), 2.0rem);
	position: relative;
	
}
#en-text-box #en-title::after {
	content: "";
	width: 60%;
	height: 1px;
	background-color: #000;
	position: absolute;
	left: 50%;
	bottom: -.2em;
	transform: translateX(-50%);
}
#en-text-box #en-text {
	font-size:  clamp(1.4rem, calc(-0.18rem + 2.5vw), 3.0rem);
	line-height: 1.8;
	font-weight: normal;
  margin: 60px 0;
}
#en-text-box .en-btn {
  max-width: 260px;
	height: 60px;
	left: 50%;
	bottom: 10%;
	transform: translateX(-50%);
}
.en-text-content {
  display: flex;
  width: 100%;
  justify-content: center;
}
.en-text-content .works-w3 {
  width: 10%;
  transform: rotate(180deg);
  opacity: 0.6;
  object-fit: contain;
  margin: -60px 0 0;
}
.en-text-content .works-w4 {
  width: 10%;
  margin: 60px 0 0;
  opacity: 0.6;
  object-fit: contain;
}
/* swiper---------------------------------------------- */
.swiper {
	width: 100%;
  height: 50%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.swiper:last-child {
	top: 50%;
}
.swiper-wrapper {
	width: 100%;
	height: 100%;
	transition-timing-function: linear !important;
}
.swiper-slide {
	width: 100%;
  height: 100%;
}
.swiper-slide img {
	width: 100%;
  height: 100%;
	object-fit: cover;
}
/* environment 終了 */
/* welfare 開始-------------------------------------- */
#welfare-wrapper {
	padding: 12em 8%;
  height: auto;
}
#welfare-wrapper #welfare-container {
	display: flex;
	justify-content: center;
	gap: 0 5%;
}
.welfare-items-button {
  box-shadow: 3px 3px 5px #ccc;
  margin: 4em;
}
.welfare-items-button:hover {
  transform: translateY(-3%);
  background-color: #e4f1fa;
}
.welfare-items {
	width: 100vw;
  max-width: 400px;
	height: 28em;
}
.welfare-items2{
	padding: 4em 6%;
}
.welfare-text {
  text-align: center;
  font-size:  clamp(1.4rem, calc(-0.18rem + 2.5vw), 1.8rem);
	line-height: 1.5;
  padding: 1em 0 0;
}
.welfare-img1 {
  width: 100%;
  height: 280px;
}
.welfare-img2 {
  width: 160px;
  margin: auto;
  display: block;
}
#welfare-btn-items {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 19.5em;
	margin-top: 10em;
}
#welfare-btn-items .welfare-btn {
	display: inline-block;
	padding: 0;
	border: 1px solid var(--primary-color);
	background-color: transparent;
	/* width: 20em; */
	height: 6em;
	gap: 20em;
	aspect-ratio: 3.4/1;
	position: relative;
	overflow: hidden;
}
.welfare-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--welfare-hover);
	transform: translateX(-140%);
	transition: .1s;
	z-index: -1;
}
.welfare-btn:hover::before {
	content: "";
	transform: translateX(0);
}
#welfare-btn-items .welfare-btn:hover a {
	color: #fff;
}
#welfare-btn-items .welfare-btn a {
	font-size: clamp(1.4rem, calc(-0.18rem + 1.4vw), 1.8rem);
	color: var(--primary-color);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .4em;
	width: 100%;
	height: 100%;
	transition: color .3s;
}
#welfare-btn-items .welfare-btn a span {
	margin-left: .4em;
}
/* welfare 終了 */
/* footer 開始----------------------------------------- */
#footer {
	width: 100%;
	padding: 3.6em 12em;
	background-color: var(--main-color);
	background-image: url(../images/footer.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}
#footer #footer-logo-wrapper {
	width: 100%;
	height: 8em;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}
#footer-logo-wrapper #footer-logo {
	width: 12em;
	height: 5em;
	flex: 0 0 50%;
}
#footer-logo-wrapper li {
	font-size: 1.4rem;
	letter-spacing: .2rem;
	color: #fff;
}
#footer #footer-nav-wrapper {
	display: flex;
	/* gap: 1em; */
}
#footer-nav-wrapper .footer-nav-container {
	width: 24%;
  margin-top: 40px;
}
#footer-nav-wrapper .footer-nav-container li {
	font-size: clamp(1.4rem, calc(-0.18rem + 1.4vw), 1.6rem);
	margin-bottom: 1em;
	position: relative;
}
#footer-nav-wrapper .footer-nav-container li a {
	color: #fff;
  line-height: 1.4;
  padding: 5px 10px;
}
#footer-nav-wrapper .footer-nav-container li a:hover {
	background-color: #fff;
  color: #0067b6;
  border-radius: 20px;
}
#footer #copy-right {
	font-size:clamp(1rem, calc(-0.18rem + 1.6vw), 1.6rem);
	letter-spacing: .2rem;
	color: #fff;
	position: absolute;
	bottom: 2%;
	left: 50%;
	transform: translateX(-50%);
}
/* footer 終了 */
/* メディアクエリ 1040px------------------------------------ */
@media (max-width: 1039px) {
	/* header 開始------------------------------------------ */
	.header {
		padding: 1em 3%;
	}
  .header .logo img {
    width: 100%;
  }
	.header .global-nav {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		transform: translateX(100%);
		transition: .3s;
		z-index: -1;
	}
	.header .global-nav .ul {
		padding: 40px 5%;
    display: block;
	}
	.header .global-nav .ul li {
		font-size: 2rem;
		margin: 0 0 10px;
    border-bottom: solid 1px #bfd9ed;
    padding: 0 3% 10px;
	}
	.header .global-nav .ul li:last-child {
    border: solid 1px #0067b6;
    background-color: #0067b6;
    max-width: 500px;
    display: block;
    text-align: center;
    margin: 30px auto;
    line-height: 80px;
    padding: 0;
    box-shadow: 3px 3px 5px #ccc;
	}
  .header .global-nav .ul li:last-child a {
    color: #fff;
    background-color: #0067b6;
    font-weight: bold;
    padding: 15px;
  }
	.header .ul-left li:nth-child(2) {
		margin-left: 1em;
		font-size: 1.2rem;
	}
  .header .ul li a {
    line-height: 1.4;
    font-size: 1.6rem;
    color: #000;
    display: block;
}
  .global-nav ul li span {
  display: block;
    font-size: 1.0rem;
    color: #0067b6;
    font-weight: bold;
}
  .global-nav ul li a:hover {
	background-color: #fff;
  color: #000;
  border-radius: 0;
}
	/* header 終了 */
	/* mobile 開始 */
	#mobile {
		display: block;
	}
	#nav.mobileOpen {
		visibility: visible;
		opacity: 1;
		transform: translateX(0);
	}
	/* mobile 終了 */
	/* first view 開始------------------------------ */
	#first-img {
		width: 74%;
    max-width: 570px;
	}
	/* first view 終了 */
	/* story 開始--------------------------------- */
  #background1-img {
    background-position: right;
  }
  #background2-img {
    background-position: left;
  }
	#story-wrapper {
		padding: 8em 0;
	}
	#story-background1 {
		width: 40%;
		height: 50%;
		top: -6%;
		right: -1%;
	}
	#story-background2 {
		width: 50%;
		height: 40%;
		position: absolute;
		left: -4%;
		bottom: 0;
	}
	/* story 終了 */
	/* company 開始----------------------------------- */
	#company-wrapper {
		padding: 8em 6%;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
  .flex-items .items-text p {
	font-size: 1.6rem;
    margin-top: 0;
  }
.flex-items .items-text h3 {
	font-size: 2.8rem;
  }
	.flex-items::before {
		height: 5em;
	}
	.flex-items:nth-child(2)::before {
		height: 4em;
	}
	.flex-items {
		padding: 4em 1.6em 6em;
		margin-bottom: 8em;
    width: 90%;
    max-width: 360px;
	}
	.flex-items:last-child {
		margin-bottom: 0;
	}
	.flex-items .items-img {
		margin-bottom: 20%;
	}
	.flex-items .items-text {
		color: var(--main-color);
		text-align: center;
		margin: 40px auto 1em;
	}
	.btn {
		width: 60%;
	}
	/* company 終了 */
	/* profiles 開始-------------------------------------------- */
	#profile {
		padding: 6em 6%;
    margin: 0;
    display: block;
	}
  #profile #profile-title {
    writing-mode: horizontal-tb;
    margin: 0 0 80px;
    text-align: center;
  } 
 #profile #profile-title::after {
   display: none;
  }
	#profile #profile-wrapper {
		justify-content: center;
		flex-wrap: wrap;
		gap: 0 1em;
	}
	#profile #profile-title::after {
		height: 30%;
		left: 50%;
		bottom: 34%;
	}
	#profile-wrapper .profile-container {
		flex: 0 0 45%;
	}
	.profile-container:first-child {
		order: 1;
	}
	.profile-container:nth-child(2) {
		order: 2;
	}
	.profile-container:nth-child(3) {
		order: 3;
	}
	.profile-container:nth-child(4) {
		order: 4;
	}
	.profile-container:last-child {
		order: 5;
	}
	.profile-container .profile-items .profile-img {
		margin: 0 auto .6em;
	}
	/* profiles 終了 */
	/* environment 開始----------------------------------- */
	#environment-wrapper {
		position: relative;
		width: 100%;
		height: 50vh;
	}
  #en-text-box #en-text {
    line-height: 2;
    margin: 20px 0 10px;
  }
	#en-text-box {
		width: 50%;
    height: 320px;
	}
	#en-text-box .en-btn {
		width: 140px;
	  height: 40px;
    line-height: 40px;
    font-size: 1.4rem;
  }
	/* environment 終了 */
	/* welfare 開始------------------------------------ */
  #welfare-container {
    flex-wrap: wrap;
  }
  .welfare-items {
	width: 90vw;
  max-width: 400px;
	height: 26em;
  }
	/* welfare 終了 */
	/* footer 開始------------------------------------- */
	#footer {
		padding: 3.6em 6%;
	}
	#footer #footer-nav-wrapper {
		margin: auto;
  }
	#footer-nav-wrapper .footer-nav-container {
		width: 40%;
    margin-top: 40px;
	}
	#footer-nav-wrapper .footer-nav-container li {
		margin-bottom: 1em;
	}
	/* footer 終了 */
  }
  /* メディアクエリ 500px */
@media (max-width: 499px) {
  .header .logo img {
    max-width: 80px;
  }
  .header .ul-left li:nth-child(2) {
    margin-left: -24px;
  }
  .flex-items {
    height: 420px;
  }
 #profile #profile-title {
    margin: 0 0 40px;
  } 
  #en-text-box {
    width: 70%;
    height: 190px;
    padding: 20px 3%;
	}
  #footer {
    background-image: none;
	}
  #footer-nav-wrapper {
    justify-content: space-around;
  }
  #footer-nav-wrapper .footer-nav-container {
    width: auto;
    margin: 40px 0;
  }
  }
/* subpage-main開始-------------------------------------------------------------- */
.subpage-container {
  position: relative;
	/* その場で */
	animation-name: fadeInAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
	}
	@keyframes fadeInAnime{
		from {
			opacity: 0;
		}
	
		to {
			opacity: 1;
		}
	}
.subpage-topimage-filter {
  width: 100%;
	height: 76vh;
  background-color: rgba(0,103,182, 0.4); /* カラーフィルタ効果の色を指定 */
  display: inline-block;  /* (任意：インラインブロック化したい場合) */
}
.subpage-topimage {
  opacity: 0.7;    /* カラーフィルタ効果の度合いを指定(※) */
  display: block;
}
.subpage-topimage {
	width: 100%;
	height: 76vh;
  object-position: top;
}
.subpage-toptitle {
  width: 70%;
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(255, 255, 255, .3);
  font-family: 'Roboto', sans-serif;
  font-weight: bold; 
}
.subpage-toptitle2 {
  width: 80%;
	font-size: 4.2rem;
  color: #fff;
	margin-bottom: 1em;
  text-align: center;
  position: absolute;
  top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
  letter-spacing: 0.4em;
  text-shadow: 4px 4px 6px rgba(85,85,85, 0.8);
}
.subpage-toptitle2::after, .subpage-toptitle2::before {
  content: "";
  display: block;
  border-bottom: solid 3px #fff;
  width: 80px;
  margin: 10px;
  text-shadow: 4px 4px 6px rgba(85,85,85, 0.3);
}
.subpage-toptitle2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.subpage-text01 {
  text-align: center;
  margin-bottom: 100px;
}
.subpage-text {
  margin: 60px auto;
	font-size: 2.0rem;
  text-align: center;
}
/* その場で */
.subpage-text {
	animation-name:fadeInAnime;
	animation-duration: 2s;
	animation-fill-mode:forwards;
	opacity:0;
	animation-delay: 0.5s;
	}
	@keyframes fadeInAnime{
		from {
			opacity: 0;
		}
	
		to {
			opacity: 1;
		}
	}
@media(max-width: 880px){
  .subpage-toptitle {
    width: 90%;
  }
  .subpage-toptitle2 {
	font-size: 3.0rem;
  position: absolute;
  top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
  letter-spacing: 0.2em;
  text-shadow: 4px 4px 6px rgba(85,85,85, 0.3);
}
.subpage-toptitle2::after, .subpage-toptitle2::before {
  content: "";
  display: block;
  border-bottom: solid 3px #fff;
  width: 20px;
  margin: 5px;
  text-shadow: 4px 4px 6px rgba(85,85,85, 0.3);
}
  .subpage-text {
  margin: 40px auto;
	font-size: 1.6rem;
}
}
/* subpage-main終了-------------------------------------------------------------- */
/* 会社を知るページ開始-------------------------------------------------------------- */
/* 空洞をつくるための砂型開始 */
#company01{
	text-align: center;
	padding: 4em 0;
}
#company01 img{
	width: 20%;
  max-width: 140px;
	animation-name: fadeInAnime;
	animation-duration: 2s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
	}
	@keyframes fadeInAnime{
		from {
			opacity: 0;
		}
	
		to {
			opacity: 1;
		}
	}
.company-infotext {
	margin: .5em auto 1em;
	font-size: clamp(1.6rem, calc(-0.18rem + 2.5vw), 2.4rem);
	letter-spacing: 0.1rem;
	line-height: 2.2;
	text-align: center;
	color: #0068b7;
	font-weight: bold;
	animation-name:fadeInAnime;
	animation-duration: 2s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
	}
	
	@keyframes fadeInAnime{
		from {
			opacity: 0;
		}
	
		to {
			opacity: 1;
		}
	}
.company-infotext2{
	font-size: clamp(1.6rem, calc(-0.18rem + 2.5vw), 2.4rem);
	letter-spacing: 0.1rem;
	line-height: 2.2;
	text-align: center;
	color: #0068b7;
	font-weight: bold;
}

.company-span{
	font-size: clamp(1.8rem, calc(-0.18rem + 2.5vw), 3.2rem);
}
.company-span2{
	margin:2em auto;
}
.company-sunagata{
	display: block;
	margin: auto;
}
/* 空洞をつくるってどういうこと開始 */
#company-story{
	position: relative;
}
.company-container::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background-color: rgba(255, 255, 255, .5);
	backdrop-filter: blur(3px);
}
.company-story-wrapper{
	padding: 8rem 0;
}
#company-story {
  width: 100%;
  height: auto;
  background: url(../images/company/sunagata-bg1.jpg) top right 25% /cover no-repeat;
  z-index: 0;
}
.company-story__inner {
  width: 68%;
  margin: auto;
  padding: 2em 1em;
  color: #002B3C;
  background: rgba(255, 255, 255, .85);
  font-size: 1.8rem;
}
.company-story-text h2{
	text-align: center;
}
.company-story-text h2{
	padding-bottom: 1em ;
}
.company-story__inner p + p {
  margin-top: 1em;
}
@media screen and (min-width: 768px) {
  .company-story {
  /* height: 46.55vw;
  min-height: 40rem; */
  background-position: top 25% center;
  }
  .company-story__inner {
    padding: 3em 6%;
    text-align: left;
    font-size: 2.4rem;
  }
}
/* storyギャラリー 開始 */
	.company-gallery-wrapper{
		width: 100%;
		margin: auto;
		text-align: center;
		background-image: url(../images/company/bg-hougan.jpg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.company-gallery-wrapper p{
		font-family: 'Yusei Magic','sans-serif';
		font-size: clamp(1.6rem, calc(-0.18rem + 2.5vw), 2.4rem);
    color: #333;
		padding-bottom: 2em;
	}
	.company-gallery-inner{
		width: 70%;
		margin: auto;
		font-size: large;
		padding: 100px 0;
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		position: relative;
	}
	.company-yajirushi{
		position: absolute;
		top: 65%;
		left: 52%;
		transform: translate(-50%,-50%)
	}
	.company-gallery-wrapper img
	{
		width: 200px;
		height: auto;
		margin: 0 2em;
	}

	.company-gallery-inner{
		position: relative;
	}
	@media(max-width: 880px) {
  .company-gallery-inner{
    padding: 4em 0;
  }
  .company-flex{
    display: block;
  }
  .company-gallery-inner{
  width: 100%;
  }
  .company-gallery-wrapper img
  {
  width: 100px;
  height: auto;
  margin: 0 1em;
  }
}
/* つくりかた開始 */
/* company-flow 開始 */
.company-flow-wrapper {
	padding: 100px 0;
}
.company-flow-wrapper h2 {
  margin-bottom: 60px;
  font-weight: lighter;
  font-size: 2rem;
}
.company-flow-wrapper h2 span, .recruitinfo-wrapper h2 span {
  font-weight: bold;
  color: rgb(0, 104, 183);
}
.company-flow-container {
	margin: auto;
  height: 350px;
	width: 80%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.company-flow-items {
	height: 100%;
	padding: 2em 2% 1em;
	border: 5px solid #e4f1fa;
	border-radius: 20px;
	text-align: center;
	position: relative;
  box-shadow: 3px 3px 5px rgba(0,0,0, 0.1);
}
.company-flow-img{
	position: absolute;
	bottom: 10px;
	right:0px;
}
#company-flow-step1 a {
  color: #fff;
  border-radius: 30px;
  line-height: 30px;
  padding: 10px;
  font-size: 1.4rem;
  width: 200px;
  display: block;
  margin: auto;
}
#company-flow-step1 a:hover {
  opacity: 0.6;
}
#company-flow-step1 span, #company-flow-step3 span {
  background-color: mistyrose;
}
.company-flow-step-text {
  /* width: 80%; */
  padding: 0;
}
.company-flow-title {
  font-size: clamp(1.2rem, calc(-0.18rem + 2.5vw), 1.4rem);
  width: 100px;
  margin: auto auto 1em;
}
.company-flow-title::after {
	content: "";
  display: block;
  border-bottom: 1px solid #000;
  padding-top: 5px;
}
.company-flow-container .triangle {
	width: 2em;
	height: 2em;
	border-top: 2em solid transparent;
  border-bottom: 2em solid transparent;
  border-left: 2em solid rgb(0, 104, 183);
  margin: 0 10px;
}
.company-flow-text-title {
	font-size: clamp(1.6rem, calc(-0.18rem + 2.5vw), 1.8rem);
	font-weight: bold;
}
.company-flow-text-sub-title {
	font-size: 1.4rem;
}
@media(max-width: 1264px) {
  .company-flow-wrapper {
	padding: 60px 0;
}
  .company-flow-wrapper h2, .recruitinfo-wrapper h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.0rem;
}
  .company-flow-container {
	display: block;
    height: auto;
    width: 80%;
}
  .company-flow-container .triangle {
  transform: rotate(90deg);
    margin: auto;
} 
	.company-pc-only{
		display: none;
}
.company-flow-img {
	position: relative;
	bottom: 0px;
	width: 200px;
	height: auto;
}
}
/* company-flow 終了 */
/* ２カラムQandA 開始 */
#companyQA{
	background-color: #e4f1fa;
}
.companyQA-wrapper{
	max-width: 1260px;
	margin: auto;
	padding: 80px 0;
}
.companyQA-inner h2{
	text-align: center;
	padding: 2%;
	/* font-size: clamp(2rem, calc(-0.18rem + 2.5vw), 3rem) ; */
	font-size: clamp(1.8rem, 1.5rem + 1.2vw, 3rem);
	color: #0068b7;
}
.companyQA-inner p{
	font-size: clamp(1.4rem, calc(-0.18rem + 2.5vw), 1.6rem) ;
  text-align: justify;
}
.companyQA-inner{
	background-color: #fff;
	padding:2em 5% 4em;
	margin: 5em 3% 2.5em;
  box-shadow: 3px 3px 5px #ccc;
  position: relative;
}
.company-flex{
	display: flex;
	justify-content: center;
}
.company-line{
	text-align: center;
	width: 100%;
}
.company-line h2 {
	display: flex;
  align-items: center;
  justify-content: center;
	color: #0068b7;
	font-weight: bold;
	font-size: clamp(2.0rem, calc(-0.18rem + 2.5vw), 3.2rem);
}
.company-line h2::before,
.company-line h2::after{
	content: "";
	display: block;
	width: 15%;
	height: 1px;
  background-color: #0068b7;
}
.company-line h2::before{
  margin-right: 1em;
}
.company-line h2::after{
  margin-left: 1em;
}
.company-QAIllust{
	width: 150px;
	position: absolute;
	right: -50px;
	bottom: -37px;
}
@media(max-width: 880px) {
	.company-flex{
		display: block;
  }
	.companyQA-inner{
		background-color: #fff;
		padding:2em 3% 4em;
		margin: 30px 3%;
  }
	.companyQA-wrapper {
		padding: 60px 2em;
  }
  .company-QAIllust{
    width: 100px;
    right: 0;
    bottom: -24px;
  }
  .company-story__inner {
    width: 90%;
  }
  .company-line h2::before,
  .company-line h2::after{
    width: 10%;
  }
  .company-line h2::before{
    margin-right: 1em;
  }
  .company-line h2::after{
    margin-left: 1em;
  }
}
/* 数字で知る開始 */
#company-number{
	padding: 80px 0;
}
.company-grid-parent {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, 1fr);
	gap: 20px;
	align-items: stretch;
	padding: 4em 12%;
	}
	.company-graph{
		border: #bfd9ed solid 5px;
		border-radius: 20px;
	}
	.company-item1 { 
		grid-area: 1 / 1 / 3 / 7; 
	}
	.company-item2 { 
		grid-area: 3 / 1 / 5 / 3;	
	} 
	.company-item3 { 
		grid-area: 3 / 3 / 5 / 5;
  }
	.company-item4 {
		grid-area: 3 / 5 / 5 / 7;
  }
	.company-item5 { 
		grid-area: 5 / 1 / 7 / 4; 
	}
	.company-item6 {
		 grid-area: 5 / 4 / 7 / 7; 
	}
	.company-graph-title{
		text-align: center;
    margin-bottom: 1em;
	}
.company-graph-title h2 {
   font-size: 2.0rem;
  }
	.company-graph{
		padding: 4em 6%;
    box-shadow: 3px 3px 5px #ccc;
	}
	.company-graph-number{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.company-graph-number p{
		font-size: clamp(1.4rem, calc(-0.18rem + 1.4vw), 1.6rem);
		margin-bottom: 0em;
	}
	.company-graph-number span{
		font-size: clamp(5rem, calc(-0.18rem + 1.4vw), 6rem);
		font-family: 'Tilt Warp', cursive;
		color: #333;
	}
	.company-number-flex{
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	.company-number-flex img{
		max-width: clamp(10rem, calc(-0.18rem + 1.4vw), 16rem);
	}
	.company-world-caption{
		font-size: clamp(1.2rem, calc(-0.18rem + 1.4vw), 1.6rem);
	}
@media(max-width: 880px) {
	.company-grid-parent {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(6, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		}
		.company-item1 { grid-area: 1 / 1 / 2 / 7; }
		.company-item2 { grid-area: 2 / 1 / 3 / 7; }
		.company-item3 { grid-area: 3 / 1 / 4 / 7; }
		.company-item4 { grid-area: 4 / 1 / 5 / 7; }
		.company-item5 { grid-area: 5 / 1 / 6 / 7; }
		.company-item6 { grid-area: 6 / 1 / 7 / 7; }

		.company-graph{
			margin-bottom: 20px;
		padding: 3em 6% 0;
	}
    .company-grid-parent .company-graph:first-child {
		padding: 3em 6%;
	}
		.company-number-flex img {
			max-width: clamp(7rem, calc(-0.18rem + 1.4vw), 14rem);
	}
	.company-world-sponly{
		flex: 0 0 30%;
		flex-wrap: wrap;
	}
}
/* 会社を知るページ終了-------------------------------------------------------------- */
/* 仕事を知るページ開始-------------------------------------------------------------- */
/* worksintroduction 開始 */
.works-introduction {
	background-color: var(--main-color);
	color: #fff;
}
.works-w {
  display: flex;
  justify-content: center;
}
.works-w1 {
  width: 5%;
  margin: -30px 20px 0;
  transform: rotate(180deg);
  opacity: 0.6;
  object-fit: contain;
}
.works-w2 {
  width: 5%;
  margin: 30px 20px 0;
  opacity: 0.6;
   object-fit: contain;
}
.works-introduction02 {
	color: var(--main-color);
}
.works-introduction h2, .works-introduction02 h2 {
	font-size: clamp(1.8rem, calc(-0.18rem + 2.5vw), 3.2rem);
	text-align: center;
	padding: 60px 0;
  letter-spacing: 0.2em;
}
.works-flex {
	display: flex;
	flex-direction: row-reverse;
	border-top: 1px solid #fff;
}
.works-flex02 {
	display: flex;
	flex-direction: row-reverse;
	border-top: 1px solid var(--main-color);
}
.works-flex-left {
	flex: 2;
	border-right: 1px solid #fff;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: repeat(2,1fr);
	padding: 60px;
	gap: 20px;
	align-items: stretch;
}
.works-flex-left02 {
	flex: 2;
	border-right: 1px solid var(--main-color);
	display: grid;
	grid-template-columns: repeat(2,1fr);
	padding: 6%;
	grid-template-rows: repeat(2,1fr);
	padding: 60px;
	gap: 20px;
	align-items: stretch;
}
.works-img01 {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
}
.works-img02 {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
.works-img03 {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}
.works-img04 {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
.works-img05 {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}
.works-img06 {
	grid-column: 2 / 3;
	grid-row: 1 / 3;
}
.works-flex-left-kanrika {
	border-right: 1px solid var(--main-color);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2,1fr);
	padding: 6%;
	flex: 2;
}
.works-flex-right {
	padding: 60px;
	flex: 1;
}
.works-flex-right p {
  text-align: justify;
}
.works-flex-right h3 {
	font-size:  clamp(2rem, calc(-0.18rem + 2.5vw), 3.0rem);
	text-align: center;
	padding-bottom: 30px;
  letter-spacing: 0.2em;
}
.works-flex-right h4 {
	font-size: clamp(1.2rem, calc(-0.18rem + 1.6vw), 1.4rem);
	text-align: center;
	padding: 60px 0 20px;
}
.works-people {
	display: flex;
  flex-wrap: wrap;
	justify-content: space-around;
}
.works-people img {
  width: 85%;
}
.works-introduction .works-people::after {
  content: "↑インタビューはこちら";
  display: block;
  font-size: 1.0rem;
  color: #fff;
  width: 100%;
  text-align: center;
  margin-top: 1em;
}
.works-introduction02 .works-people::after {
  content: "↑インタビューはこちら";
  display: block;
  font-size: 1.2rem;
  color: var(--main-color);
  width: 100%;
  text-align: center;
  margin-top: 1em;
}
.works-interview {
	position: relative;
}
.works-profile {
	filter: drop-shadow(20px -5px rgba(255,255,255, 0.9));
	display: block;
}
.works-profile:hover, .works-profile02:hover {
  transform: translateY(-5%);
}
.works-profile02 {
	filter: drop-shadow(20px -5px rgba(0,103,182, 0.4));
	display: block;
}
.works-profile:hover, .works-profile02:hover {
	opacity: 0.7;
}
.works-interview p {
	font-size: clamp(0.6rem, calc(-0.18rem + 1.6vw), 0.8rem);
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	right: 0;
}
@media (max-width: 1039px) {
  .works-flex {
	flex-direction: column-reverse;
}
.works-flex02 {
	flex-direction: column-reverse;
}
.works-introduction h2, .works-introduction02 h2 {
    padding: 40px 0;
}
  .works-flex-left, .works-flex-left02 {
    border-right: none;
    padding: 0;
    gap: 10px;
	align-items: stretch !important;
}
.works-flex-right {
    padding: 40px 6% 60px;
}
  .works-people {
    justify-content: center;
}
  .works-people img {
    width: 65%;
    margin: auto;
}
 .works-flex, .works-flex02 {
	border-top: none;
}
  .works-w {
    margin: 0 5%;
  }
  .works-w1 {
    width: 8%;
  margin: -40px 10px 0;
}
.works-w2 {
  width: 8%;
  margin: 40px 10px 0;
}
}
/* 仕事を知るページ終了-------------------------------------------------------------- */
/* メッセージページ開始-------------------------------------------------------------- */
.emd-container {
  position: relative;
	animation-name: fadeInAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
	overflow: hidden;
	}
	@keyframes fadeInAnime{
		from {
			opacity: 0;
		}
	
		to {
			opacity: 1;
		}
	}
.emd-topimage-filter {
	display: flex;
  width: 100%; 
	height: 80vh;
  margin-top: 40px;
}
.color-topimage {
	width: 100%;
	height: inherit;
}
.emd-topimage {
	width: 80%;
  max-width: 560px;
  max-height: 75vh;
  object-position: top;
  object-fit: contain;
  position: absolute;
  bottom: 0;
  right: 5%;
}
.emd-toptitle {
  width: 50%;
  max-width: 600px;
	position: absolute;
	top: 45%;
	left: 8%;
	transform: translate(-50%, -50%);
	color: rgba(255, 255, 255, .3);
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
	animation-name: fadeRightAnime;
	animation-duration: 1.5s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
	opacity:0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(50px);
  }
  to {
    opacity: 1;
  transform: translateX(0);
  }
}
.emd-toptitle2 {
  color: #fff;
  text-align: center;
  position: absolute;
  top: 70%;
	left: 9%;
  letter-spacing: 0.4em;
}
.emd-toptitle2 {
  display: flex;
  align-items: center; 
  font-size: clamp(1.4rem, calc(-0.18rem + 2.5vw), 2.0rem);
  animation-name: fadeInAnime;
	animation-duration: 1s;
	animation-delay: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
	}
	@keyframes fadeInAnime{
		from {
			opacity: 0;
		}
	
		to {
			opacity: 1;
		}
	}
.emd-toptitle3 {
  font-size: clamp(1.0rem, calc(-0.18rem + 2.5vw), 1.2rem);
  color: #fff;
  text-align: center;
  position: absolute;
  bottom: 3%;
	right: 3%;
  letter-spacing: 0.4em;
  background-color: #0067b6;
  padding: 0 10px;
}
/* main 終了 */
/* chapter開始 */
.message-wrap {
  margin-top: 140px;
}
.message-wrap-last {
  margin-bottom: 180px;
}
.message-titlewrap01 {
	display: flex;
	align-items: center;
  width: 40%;
}
.message-chapter {
	display: flex;
	font-size: 2.4rem;
  align-items: center;
  width: 80%;
}
.message-chapter::before {
	content: "";
  display: block;
  border-bottom: solid 1px #000;
  width: 50%;
  margin: 0 5% 0 0;
}
.message-title {
	font-size:  clamp(2.0rem, calc(-0.18rem + 2.5vw), 3.0rem);
	margin: -1.8em auto 1em;
  text-align: center;
}
.message-box {
	width: 64%;
	padding: 60px;
	background-color: #fff;
	box-shadow: 4px 4px 6px rgba(85,85,85, 0.3);
	margin: -100px auto 0;
}
.message-subtitle {
	font-size:  clamp(1.6rem, calc(-0.18rem + 2.5vw), 2.6rem);
	text-align: center;
  margin: 0 0 20px;
}
.message-text {
	font-size:  clamp(1.4rem, calc(-0.18rem + 2.5vw), 1.6rem);
	text-align: justify;
}
.message-plofile {
	display: flex;
  align-items: center;
  margin: 0 6% 100px;
}
.message-plofile-img {
  max-height: 500px;
  object-position: top;
  width: 40%;
}
.message-name p {
	font-size: clamp(1.6rem, calc(-0.18rem + 2.5vw), 2.0rem);
  text-align: left;
}
.message-plofile-text {
	background-color: rgba(255, 255, 255, .7);
	text-align: center;
	margin: auto;
}
.message-awaji-wrapper {
  margin: 100px 0 200px;
}
.message-title2 {
  font-size: 2.4rem;
      display: flex;
    align-items: center;
}
.message-title2::before,
.message-title2::after {
    content: "";
    height: 0.5px;
    flex-grow: 1;
    background-color: #333;
}
.message-title2:before {
    margin-right: 3rem;
}
.message-title2:after {
    margin-left: 3rem;
}
.message-text-awaji {
  display: block;
  width: 50%;
  font-size: 1.6rem;
  text-align: justify;
  margin: 20px auto;
}
table {
	font-size: 1.6rem;
	padding: 20px 0 0;
}
th, td {
	text-align: start;
}
td {
	padding: 5px 0 5px 15px;}
.message-imgbox {
	display: flex;
	justify-content: space-evenly;
	margin-top: 50px;
	margin-bottom: 80px;
}
.message-imgbox img {
	width: 33%;
  max-width: 400px;
	height: auto;
}
/* メディアクエリ 1040px */
@media (max-width: 1039px) {
	.message-titlewrap01 {
		width: 80%;
	}
	.message-chapter {
		font-size: 1.4rem;
		width: 80%;
	}
	.message-chapter::before {
		width: 50%;
	}
	.message-title {
    margin-top: 5px;
	}
		.message-wrap {
    display: block;
  }
		.message-box {
    width: 70%;
    padding: 40px 6%;
	}
		.message-plofile-img {
    padding: 0;
    margin: auto;
    width: 100%;
    max-width: 400px;
	}
  .emd-toptitle {
    width: 70%;
    max-width: 400px;
	}
  .emd-toptitle2 {
    width: 100%;
  }
}
	/* メディアクエリ 880px */
	@media(max-width: 880px){
  .message-wrap {
    margin-top: 80px;
}
  .message-wrap-last {
    margin-bottom: 80px;
}
  .emd-topimage-filter {
    height: 60vh;
    max-height: 460px;
}
    .emd-topimage {
    width: 90%;
    max-width: 500px;
    max-height: 400px;
    object-position: top;
    object-fit: contain;
    position: absolute;
    bottom: 0;
    right: 0;
}
	.emd-toptitle2::after, .emd-toptitle2::before {
		display:none;
	}
	.message-plofile{
		display: block;
		margin: 0 auto 50px;
	}
	.message-img {
		height: 35vh;
	}
	.message-box {
		width: 100%;
		box-shadow: none;
    margin-top: 0;
	}
	.sp_br {
		display: block;
	}
	.message-plofile-text {
		margin: 8% auto;
			width: 90%;
	}
	.message-plofile-img {
		display: block;
		margin: auto;
		width: 90%;
		max-width: 400px;
    height: 280px;
    object-position: top;
	}
	.message-text-awaji br {
		display: none;
	}
  .message-text-awaji {
  text-align: justify;
  display: block;
  width: 90%;
  font-size: 1.4rem;
  margin: 20px auto;
}
	.emd-toptitle {
    position: absolute;
    top: 60%;
    left: 5%;
	}
  .emd-toptitle2 {
    position: absolute;
    top: 80%;
    left: 7%;
  }
  .message-name p {
    text-align: center;
  }
}
/* メッセージページ終了-------------------------------------------------------------- */
/* はたらく人ページ開始------------------------------------------------------------- */
/* main_people 開始 */
#people-wrapper {
	width: 100%;
	padding-top: 8em;
} 
#people-container {
  overflow: hidden;
}
#people-container h2 {
	writing-mode: vertical-lr;
	font-size: clamp(2rem, calc(0.82rem + 2.5vw), 4.0rem);
	margin: 4em 1em 0;
  font-weight: lighter;
	flex-grow: 1;
	letter-spacing: 1rem;
    color: #fff;
}
.people-toppic-flex {
	background: linear-gradient(180deg, #fff 0%,#fff 20%, var(--main-color) 20%,var(--main-color) 100%);
	display: flex;
	justify-content: center;
	padding: 0 6%;
}
.people-toppic-img{
	height: 100%;
	margin: 0 2em;
	width: 100%;
  object-fit: contain;
  object-position: bottom;
}
.people-toppic-flex-right {
	padding: 10em 6% 5em;
	flex-grow: 3;
	width: 60%;
	text-align: center;
}
.people-toppic-flex-right p {
	color: #fff;
	text-align: center;
}
.sponly {
	display: none;
}
.people-toppic-flex-left {
	flex-grow: 2;
}
.people-title {
	margin: 8em 0 2em;
	width: 70%;
}
.people-toppic-title {
	margin-bottom: 2em;
}
.people-underline {
	filter: invert(1);
	width: 80%;
}
.people-toppic-flex-right p {
	font-size: clamp(1.3rem, calc(-0.18rem + 1.6vw), 2rem);
	padding: 1em 0;
	bottom: 10em;
}
.people-title02 {
	margin: 15em 0 2em;
	filter: invert(1);
}
.people-underline02 {
	filter: invert(1);
}
/*main_people 終了 */
/*-- interview 開始 --*/
.interview-wrapper {
	width: 100%;
	padding: 120px 6% 200px;
}
.interview-wrapper img{
	box-shadow: -160px 70px 2px 8px var(--background-people);
	object-fit: cover;
	z-index: -10;
  width: 46%;
}
.interview-textbox{
	flex: 1;
}
.interview-textbox div p {
  color: var(--main-color);
  display: flex;
  align-items: center;
  font-size: 1.4rem;
}
.interview-textbox div p::before {
  content: "";
  display: block;
  height: 1px;
  width: 10%;
  background-color: rgb(0, 104, 183);
  margin-right: 1em;
}
.interview-textbox h2{
	color: var(--main-color);
	font-size:  clamp(2.0rem, calc(-0.18rem + 2.5vw), 3.0rem);
	padding: 0 0 1em;
	text-align: center
}
.interview-textbox p{
	font-size: clamp(1.4rem, calc(-0.18rem + 1.6vw), 1.6rem);
	line-height: 1.8;
  text-align: justify;
}
.interview-flex{
	display: flex;
	margin-bottom: 160px;
	align-items: center;
	gap: 10em 5em;
}
.interview-flex-rr{
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 10em 5em;
}
.interview-flex-rr img {
	box-shadow: 160px 70px 2px -8px var(--background-people);	
	object-fit: cover;
	z-index: -10;
	flex-direction: row-reverse;
}
/*-- interview 終了 --*/
/*-- schedule 開始 --*/
.timeline{
  width:100%;
	padding:0 0 0 4em;
}
.timeline li{
	position: relative;
  list-style: none;
  padding:0 0 20px 0;
}
.timeline dl{
	display: flex;
  margin:0 0 1em 3em;
	font-size: clamp(1.4rem, calc(-0.18rem + 1.6vw), 1.6rem);
}
.timeline dd {
	font-size: clamp(1.4rem, calc(-0.18rem + 1.6vw), 1.6rem);
}
.timeline dt {
	font-size: clamp(1.6rem, calc(-0.18rem + 1.6vw), 1.8rem);
  font-weight: bold;
}
.timeline dd strong{
  display: block;
  padding-bottom: 5px;
  font-size: clamp(1.6rem, calc(-0.18rem + 1.6vw), 1.8rem);
}
.border-line {
  position: absolute;
  left:8.5px;
  top:0;
  width: 3px;
  height:0;
  background: #fff;
}
.timeline li::after{
  content:'';
  position: absolute;
  top:0;
  left:0;
  width:20px;
	height: 20px;
	border-radius: 50%;
  background:#fff;
}
.people-timeline {
	background-color: var(--main-color);
}
.people-flex {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	padding: 5em 6% 10em;
}
.people-flex-right {
	width: 55%;
}
.people-flex-left {
	flex: 1;
	display: grid;
}
.people-timeline h2{
	font-size: clamp(2rem, calc(0.82rem + 2.5vw), 5rem);
	text-align: end;
  margin-top: 2em;
  color: #fff;
  display: inline-block;
  border-bottom: 1px solid #fff;
	width: 35%;
}
.people-timeline h2 span {
  font-size: clamp(1.0rem, calc(0.82rem + 2.5vw), 1.4rem);
  font-weight: lighter;
  margin-top: 0;
}
.people-timeline p, .people-timeline ul{
	color: #fff; 
}
.people-timeline a{
	color: #fff;
}
/*-- schedule 終了 --*/
/*-- AWAJIcolumn 開始 --*/
/* bg-stripe */
.column-wrapper{
	background: repeating-linear-gradient(138deg, rgba(185, 228, 255, 0.5), rgba(185, 228, 255, 0.5) 21px, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 35px);
 margin: 20em 12% 5em;
 position: relative;
}
.column-container{
  width: 100%;
	max-width: 440px;
	height: 52px;
	margin: auto;
	text-align: center;
}
#column-title {
	filter: invert(1);
  margin: -60px auto 0;
}
.column-subtitle {
	padding-top: 1.5em;
	font-size: clamp(1.4rem, calc(-0.18rem + 1.6vw), 1.8rem);
}
.column-flex{
	display: flex;
	padding: 80px 6% 40px;
	justify-content: space-between;
  align-items: center;
	gap: 5em;
}
.column-images {
    width: 44%;
    height: 33vh;
    max-height: 330px;
}
.column-flex-rr{
	display: flex;
	flex-direction: row-reverse;
	padding: 30px 6% 60px;
	justify-content: space-between;
	gap: 5em;
}
.column-textbox {
	display: grid;
  place-items: center;
	align-content: center;
}
.column-textbox h3 {
	font-size:  clamp(2rem, calc(-0.18rem + 2.5vw), 2.4rem);
	padding: 0 0 1em;
	color: var(--main-color);
}
.column-textbox p {
	font-size: clamp(1.4rem, calc(-0.18rem + 1.6vw), 1.6rem);
	line-height: 1.8;
}
/*-- AWAJIcolumn 終了 --*/
/* otherprofiles 開始 */
#people-profile {
	width: 100%;
	height: auto;
	padding: 10em 12%;
}
.people-profile-sun { 
  width: 20%;
  max-width: 120px;
  margin: auto;
  display: block;
}
#people-profile-title {
	font-size:  clamp(1.8rem, calc(-0.18rem + 2.5vw), 2.4rem);
	margin: 0.5em 0 0;
	position: relative;
	transform: translateY(-4%);
	text-align: center;
	color: var(--main-color);
}
#people-profile #people-profile-wrapper {
	width: 100%;
	margin: 40px auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2em;
}
#people-profile-wrapper .people-profile-container {
  width: 50%;
	max-width: 200px;
  height: auto;
}
.people-profile-container .people-profile-img {
	width: 80%;
  height: 100%;
  margin: auto;
  display: block;
  position: relative;
}
.people-profile-container .people-profile-img img {
	box-shadow: 3px 3px 5px #ccc;
}
.people-profile-img .hover-img {
  position: absolute;
  top: 0;
  left: 0;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
.people-profile-img:hover .hover-img {
	opacity: 1;
	visibility: visible;
}
.people-profile-texts {
	font-size: clamp(1.4rem, calc(-0.18rem + 1.6vw), 1.8rem);
	position: relative;
	padding: 10px;
	margin: 1em auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #bfd9ed;
  width: 100%;
}
.people-profile-texts::before {
	position: absolute;
	bottom: -1px;
	right: 9px;
	z-index: -1;
	transform: rotate(5deg);
	width: 70%;
	height: 50%;
	background-color: #d0d0d0;
	content: "";
	filter: blur(4px);
}
@media (max-width: 1039px) {
	.people-toppic-flex {
		flex-direction: column;
		position: relative;
		height: 45vh;
    min-height: 400px;
	}
	#people-container h2 {
		writing-mode: horizontal-tb;
		text-align: right;
		color: var(--main-color);
    margin: 0 1em 0 0;
    font-weight: bold;
	}
	.people-toppic-flex-left {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.people-toppic-flex-right {
		position: absolute;
		padding: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		text-align: right;
	}
	.people-toppic-img{
		margin: 0;
		width: 65%;
    max-height: 600px;
	}
	.people-title {
		padding: 0 6% 0 0;
		width: 55%;
    max-height: 160px;
    object-fit: contain;
	}
	.people-toppic-title {
    margin: 0 5% 0 auto;
    max-width: 800px;
  }
  .people-title02 {
    padding: 0 1em 0 0;
    width: 60%;
    margin: 15em 0 1em;
  }
  .people-underline02 {
    width: 60%;
    padding: 0 1em 0 0;
  }
	.sponly {
    display: initial;
		}
	.people-underline {
		width: 50%;
		padding: 0 6% 0 0;
	}
	.people-toppic-flex-right p {
		padding: 1em 6%;
		text-align: right;
	}
	.interview-wrapper {
		padding: 1em 6% 5em;
	}
	.interview-wrapper img, .interview-flex-rr img {
		box-shadow: none;	
    margin-top: 1em;
	}
	.interview-textbox{
		padding: 5em 0 2em;
	}
	.interview-textbox h2{
		padding: 1em 0;
	}
	.interview-flex{
		flex-direction: column;
		margin-bottom: 0;
		gap: 0;
	}
	.interview-flex-rr {
		flex-direction: column;
		margin-bottom: 5em;
		gap: 0;
	}
	.interview-wrapper img {
		width: 100%;
	}
	.people-flex {
		flex-direction: column-reverse;
		padding: 1em 6% 5em;
	}
	.people-flex-right {
		padding-top: 5em;
	  width: 100%;
  }
	.column-wrapper{
	 margin: 10em 0 3em;
	 padding: 0 6%;
	}
	.column-flex{
		flex-direction: column-reverse;
		padding: 6em 0 2em;
		gap: 0;
	}
	.column-flex-rr{
		flex-direction: column-reverse;
		padding: 2em 0 60px;
		gap: 0;
	}
	.people-timeline h2{
		width: 50%;
		margin: 2em 0 1em;
	}
	.timeline {
		padding: 0;
	}
  .timeline dl {
    display: block;
  }
  .timeline dd {
    margin: 0;
  }
	#column-title {
		width: 80%;
	}
	.column-textbox {
		margin: auto;
    width: 100%;
     max-width: 500px;
	} 
  .column-textbox p {
    margin-bottom: 20px;
  }
   .column-images {
    width: 100%;
     max-width: 500px;
    height: 35vh;
    max-height: 360px;
     margin: auto;
}
	#people-profile {
		padding: 60px 6%;
  }
	#people-profile-title {
		margin: 10px 0 40px;
	}
	#people-profile-wrapper {
    flex-wrap: wrap;
		gap:4em 1em;
	}
	#people-profile-wrapper .people-profile-container {
		flex: 0 0 45%;
	}
	.people-profile-texts {
		margin: 0em auto;
	}
}
/* otherprofiles 終了 */
/* 人を知るページ 終了-------------------------------------------------------------- */
/* はたらく人ページ終了-------------------------------------------------------------- */
/* はたらく環境ページ開始-------------------------------------------------------------- */
/* enviromentのみtext01 */
.subpage-text01 {
	font-size: 2.0rem;
  text-align: center;
  margin: -40px auto 80px;
}
.sp_br {
display: none;
}
/* /enviromentのみtext01 */
.enviroment-content {
	width: 80%;
	text-align: center;
	padding-top: 80px;
	border-top: thin solid rgb(202, 199, 199);
  margin: 0 auto;
	margin-bottom: 80px;
}
.enviroment-title {
	font-size: 2.4rem;
  text-align: center;
	font-weight: bold;
	color: #fff;
  background: #0068b7;
  display: inline-block;
  font-style: normal;
  margin-bottom: 30px;
  padding: 5px 40px;
}
.enviroment-title02 {
	font-size: 2.4rem;
	color: #0068b7;
  font-weight: bold;
}
.enviroment-text {
	font-size: 1.6rem;
	text-align: center;
	margin-bottom: 30px;
	margin-top: 10px;
}
.dai2pic {
	width: 80%;
	margin: 0 auto;
}
.dai2-sub {
	display: flex;
	justify-content:center;
	margin-top: 50px;
}
.dai2-subimg {
	margin: 0 5px;
}
.dai2-subimg img {
	width: 260px;
}
/* 休憩室 */
.cafe-topic02img {
	display: flex;
	justify-content:center;
	padding: 10px;
}
.cafe-img {
	margin: 0 5px;
}
.cafe-img img {
	width: 260px;
}
@media(max-width: 880px){
.enviroment-content {
	width: 90%;
	text-align: center;
	padding-top: 30px;
	border-top: thin solid rgb(202, 199, 199);
	margin: 0 auto;
	margin-bottom: 60px;
}
  .enviroment-title {
	font-size: 1.8rem;
  width: 100%;
  padding: 5px 15px;
}
  .enviroment-title02 {
	font-size: 1.8rem;
}
  .dai2pic {
	width: 100%;
}
  .dai2-sub {
	display: flex;
	margin-top: 20px;
}
  .dai2-subimg img {
	width: 260px;
}
  .cafe-img img {
	width: 260px;
}
  .enviroment-text {
	text-align: justify;
	font-size: 1.4rem;
	padding: 0 1rem
}
.enviroment-text br{
	display: none;
}
.subpage-text01 {
	font-size: 1.5rem;
  margin: 0 auto 4rem;
}
.cafe-topic02img {
	padding: 0;
}
.sp_br {
	display: block;
}
}
/* はたらく環境ページ終了-------------------------------------------------------------- */
/* 福利厚生ページ開始-------------------------------------------------------------- */
/* card 開始 */
.card-wrapper {
	width: 100%;
	padding: 0 6% 12em;
}
#card-container {
  padding: 0 6%;
	margin: auto;
	width: 100%;
	height: 100%;
	display: flex;
  flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	max-width: 1440px;
}
.card-items {
  border: solid 3px #bfd9ed;
  width: 300px;
  height: 400px;
  margin: 20px 10px;
  text-align: center;
  position: relative;
  background-color: #fff;
  box-shadow: 3px 3px 5px #ccc; 
  background-image: linear-gradient(
  135deg
  , #bfd9ed 30px, transparent 0);
}
.card-title {
  font-size: 2.4rem;
  margin: 40px auto 0;
}
.card-text {
  font-size: 1.4rem;
  margin: 20px 20px 0;
}
.card-tag {
  position: absolute;
  top: -40px;
  left: -10%;
  transform: rotate(-15deg);
}
.card-tag h3 {
  position: relative;
  display: inline-block;
  height: 48px;
  margin-left: 30px;
  padding: 1rem 2rem 1rem 3rem;
  color: #fff;
  background: #0068b7;
}
.card-tag h3 span {
  font-size: 1.6rem;
}
.card-tag h3:before {
  position: absolute;
  top: 0;
  left: -30px;
  content: '';
  border-width: 24px 30px 24px 0;
  border-style: solid;
  border-color: transparent #0068b7 transparent transparent;
}
.card-tag h3:after {
  position: absolute;
  top: calc(50% - 7px);
  left: -10px;
  width: 10px;
  height: 10px;
  content: '';
  border-radius: 50%;
  background: #fff;
}
@media(max-width: 880px) {
  .card-items {
  height: 380px;
  margin: 20px 10px;
}
.card-title {
  font-size: 2.0rem;
}
}
/* card 終了 */
/* 福利厚生ページ終了-------------------------------------------------------------- */
/* 採用情報ページ終了-------------------------------------------------------------- */
/* flow 開始 */
.flow-wrapper {
	padding: 0 6%;
}
.flow-wrapper h2, .recruitinfo-wrapper h2 {
  margin-bottom: 60px;
  color: #333;
  font-weight: normal;
  font-size: 2.4rem;
}
.flow-wrapper h2 span, .recruitinfo-wrapper h2 span {
  font-weight: bold;
  color: rgb(0, 104, 183);
}
.flow-container {
	margin: auto;
  	height: 340px;
	width: 100%;
	display: flex;
	align-items: center;
}
.flow-items {
	width: calc((100% - 120px) / 4);
	height: 100%;
	padding: 2em 0.5em;
	border: 4px solid rgb(0, 104, 183);
	border-radius: 20px;
	text-align: center;
	position: relative;
}
.flow-image {
  width: 100px;
}
#flow-step1 a {
  background-color: darkorange;
  color: #fff;
  border-radius: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 1.4rem;
  width: 200px;
  display: block;
  margin: auto;
  box-shadow: 3px 3px 5px #ccc;
  border: solid 3px darkorange;
}
#flow-step1 a:hover {
  opacity: 0.6;
}
#flow-step1 span, #flow-step3 span {
  background-color: mistyrose;
}
#step2-text {
  width: 120px;
  margin: 0 auto 1em;
}
.flow-title {
  font-size: 1.4rem;
  width: 100px;
  margin: auto auto 4em;
}
.flow-title::after {
	content: "";
  display: block;
  border-bottom: 1px solid #000;
  padding-top: 5px;
}
.flow-container .triangle {
	width: 2em;
	height: 2em;
	border-top: 2em solid transparent;
  border-bottom: 2em solid transparent;
  border-left: 2em solid rgb(0, 104, 183);
  margin: 0 10px;
}
.flow-text-title {
	font-size: 2rem;
	margin-bottom: 1em;
	font-weight: bold;
}
.flow-text-sub-title {
	font-size: 1.4rem;
}
@media(max-width: 880px) {
  .flow-wrapper h2, .recruitinfo-wrapper h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.0rem;
}
  .flow-container {
	display: block;
    height: auto;
    width: 80%;
} 
  .flow-container .triangle {
    transform: rotate(90deg);
    margin: auto;
}
  .flow-title {
    margin: auto auto 2em;
}
	.flow-items {
		width: 100%;
		max-width: 400px;
		height: auto;
		margin: 0 auto;
		padding: 2em;
	}
}
/* flow 終了 */
/* recruitinfo 開始 */
.recruitinfo-wrapper {
	width: 100%;
	padding: 0 6% 4em;
  margin-top: 100px;
}
.recruitinfo-content {
  background-color: #E4F1FA;
  padding: 80px 6% 60px;
  margin-bottom: 100px;
}
.recruitinfo-contentflex {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
}
.recruitinfo-text {
  width: 300px;
  display: block;
  margin: 0 5%;
}
.recruitinfo-image {
  display: flex;
  width: 60%;
}
.recruitinfo-image div:last-child {
  margin-left: 10px;
}
.recruitinfo-wrapper h3 {
  font-size: 3.0rem;
  writing-mode: vertical-rl;
  font-weight: normal;
  letter-spacing: 0.5em;
  color: #333;
}
.recruitinfo-content-icon {
  margin-top: 20px;
  width: 60px;
}

/* ボタン追加---------------------------------------- */
#button001 a {
    background: #eee;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width:600px;
    padding: 10px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    font-size: 2.5rem;
}

#button001 a:after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  font-size: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
#button001 a:hover {
  background: #6bb6ff;
  color: #FFF;
}
#button001 a:hover:after {
  right: 1.4rem;
}


@media (max-width: 1039px) {
  .recruitinfo-wrapper {
    padding: 6em 0;
  }
  .recruitinfo-wrapper h2 {padding-left: 6%;
}
  .recruitinfo-content {
    padding: 40px 5%;
    margin-bottom: 60px;
}
  .recruitinfo-contentflex {
    display: block;
  }
  .recruitinfo-content-title {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .recruitinfo-content-icon {
    width: 30px;
    margin: 0 0 0 1em;
  }
  .recruitinfo-text {
    width: 100%;
    margin: 2em 0;
  }
  .recruitinfo-wrapper h3 {
  font-size: 2.0rem;
  writing-mode: horizontal-tb;
  letter-spacing: 0.3em;
}
  .recruitinfo-image {
  width: 100%;
}

}
/*アコーディオン*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 1020px;
    margin: 0 auto;
  box-shadow: 3px 3px 5px #ccc;
}
.accordion-area li{
    margin: 10px 0;
}
.accordion-area-title {
  font-weight: bold;
  border-top: dotted 1px #333;
  padding: 20px 20px 0;
}
.accordion-area p {
  padding: 10px 5px 10px;
}
.accordion-area-flame {
  background-color: #fff;
}
.accordion-area a{
  width: 260px;
  display: block;
  background-color: darkorange;
  color: #fff;
  border-radius: 30px;
  line-height: 60px;
  text-align: center;
  margin: 40px auto 0;
  border: solid 3px darkorange;
  box-shadow: 3px 3px 5px #ccc;
}
.accordion-area a:hover{
  opacity: 0.6;
}
/*アコーディオンタイトル*/
.title {
  position: relative;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: normal;
  text-align: center;
  padding: 3%;
  transition: all .5s ease;
}
.title:hover {
  opacity: 0.6;
}
/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;   
}
.title::before{
    top:48%;
    left: 40%;
    transform: rotate(0deg);   
}
.title::after{    
    top:48%;
    left: 40%;
    transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
.title.close::before{
	transform: rotate(45deg);
}
.title.close::after{
	transform: rotate(-45deg);
}
/*アコーディオンで現れるエリア*/
.box-a {
    display: none;
    background: #fff;
	  margin:0 3% 3% 3%;
    padding-bottom: 40px;
}
.entry-button {
  font-size: 1.6rem;
}



@media (max-width: 1039px) {
  .title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;   
}
.title::before{
    top:48%;
    left: 10%;
    transform: rotate(0deg);   
}
.title::after{    
    top:48%;
    left: 10%;
    transform: rotate(90deg);
}
}
/* recruitinfo 終了 */
/* リクルートページ 終了 */
/* 採用情報ページ終了-------------------------------------------------------------- */
.box{
	opacity: 0;
}
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}
@media(max-width: 499px) {
  .fadeUp {
    animation-name: none;
    opacity: 1;
  }
}
/* Fade-in---------------------------------- */
.fade-in {
  opacity: 0;
  transition-duration: 2s;
  transition-property: opacity, transform;
}
.fade-in-up {
  transform: translate(0, 50px);
}
.fade-in-down {
  transform: translate(0, -50px);
}
.fade-in-left {
  transform: translate(-50px, 0);
}
.fade-in-right {
  transform: translate(50px, 0);
}
.fade-in-fade {
  transform: translate(0, 20px);
}
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}