@charset "UTF-8";
/*usual*/
.tx_right {
	text-align: right;
}
.tx_center {
	text-align: center;
}
.bold {
	font-weight: bold;
}
.red {
	color: #f00;
}
/*usual_end*/
* {
	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333;
}
html {
	scroll-behavior: smooth;
}
body {
	background-color: #fff;
}
#wrapper {
	max-width: 1080px;
	width: 100%;
	margin: 0 auto;
}
a {
	text-decoration: none;
}
a:hover {
	color: #ff6d02;
}
a img:hover {
	opacity: 0.6;
}
p {
	margin: 0;
	padding: 0;
}
.pagetop {
	height: 40px;
	width: 40px;
	position: fixed;
	right: 30px;
	bottom: 30px;
	background: #fff;
	border: solid 2px #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.pagetop:hover {
	opacity: 0.6;
}
.pagetop__arrow {
	height: 10px;
	width: 10px;
	border-top: 3px solid #000;
	border-right: 3px solid #000;
	transform: translateY(20%) rotate(-45deg);
}
header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 30px 0 0 0;
}
h1 {
	margin: 0;
}
h1 img{
	margin: 10px 0 0 40px;
}
header ul {
	margin: 0;
	padding: 0;
}
@media (max-width: 420px) {
	header {
		flex-direction: column;
	}
}
.content_theme_box {
	position: relative;
}
.content_theme_box img {
	margin: 15px 0;
}
#top_title_back {
	flex-grow: 1;
}
@media (max-width: 910px) {
	.content_theme_box {
		position: relative;
		padding: 0 0 40px 0;
	}
	#top_title_back img {
		max-width: 100%;
		left: auto;
	}
	#top_title img {
		max-width: 100%;
		left: auto;
	}
}
#top_title {
	position: absolute;
	top: 0;
	left: 0;
}
.section_title_back {
}
#joy_bk {
	position: relative;
	left: 220px;
	animation-name: slide01;
	animation-duration: 2s;
	transform: rotate(10deg);
}
@keyframes slide01 {
	from {
	    opacity: 0;
		transform: rotate(0deg) translateX(-90px);
	}
	to {
	    opacity: 1;
		transform: rotate(10deg) translateX(0);
	}
}
#joy {
	position: relative;
	left: 90px;
	animation-name: slide02;
	animation-duration: 2s;
	transform: rotate(-5deg);
}
@keyframes slide02 {
	from {
	    opacity: 0;
		transform: rotate(2deg) translateX(-60px);
	}
	to {
	    opacity: 1;
		transform: rotate(-5deg) translateX(0);
	}
}
#active_bk {
	position: relative;
	left: 100px;
	animation-name: slide03;
	animation-duration: 2s;
	transform: rotate(3deg);
}
@keyframes slide03 {
	from {
	    opacity: 0;
		transform: rotate(-3deg) translateX(-50px);
	}
	to {
	    opacity: 1;
		transform: rotate(3deg) translateX(0);
	}
}
#active {
	position: relative;
	left: 200px;
	animation-name: slide04;
	animation-duration: 2s;
	transform: rotate(-10deg);
}
@keyframes slide04 {
	from {
	    opacity: 0;
		transform: rotate(0deg) translateX(-90px);
	}
	to {
	    opacity: 1;
		transform: rotate(-10deg) translateX(0);
	}
}
#team_bk {
	position: relative;
	top: 10px;
	left: 110px;
	animation-name: slide05;
	animation-duration: 2s;
	transform: rotate(-2deg);
}
@keyframes slide05 {
	from {
	    opacity: 0;
		transform: rotate(3deg) translateX(-60px);
	}
	to {
	    opacity: 1;
		transform: rotate(-2deg) translateX(0);
	}
}
#team {
	position: relative;
	top: 30px;
	left: 0px;
	animation-name: slide06;
	animation-duration: 2s;
	transform: rotate(8deg);
}
@keyframes slide06 {
	from {
	    opacity: 0;
		transform: rotate(3deg) translateX(-50px);
	}
	to {
	    opacity: 1;
		transform: rotate(8deg) translateX(0);
	}
}
#action_bk {
	position: relative;
	top: 40px;
	left: 100px;
	animation-name: slide07;
	animation-duration: 2s;
	transform: rotate(3deg);
}
@keyframes slide07 {
	from {
	    opacity: 0;
		transform: rotate(-2deg) translateX(-50px);
	}
	to {
	    opacity: 1;
		transform: rotate(3deg) translateX(0);
	}
}
#action {
	position: relative;
	left: 250px;
	animation-name: slide08;
	animation-duration: 2s;
	transform: rotate(-20deg);
}
@keyframes slide08 {
	from {
	    opacity: 0;
		transform: rotate(-10deg) translateX(-100px);
	}
	to {
	    opacity: 1;
		transform: rotate(-20deg) translateX(0);
	}
}
.content_img_box {
	position: relative;
	padding: 20px 0;
}
.content_img_box img {
	box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.45);
}
@media (max-width: 910px) {
	.content_img_box {
		text-align: center;
	}
}
#top_image .content_img_box {
	animation-name: slide09;
	animation-duration: 2s;
}
@keyframes slide09 {
	from {
	    opacity: 0;
		transform: translateX(80px);
	}
	to {
	    opacity: 1;
		transform: translateX(0);
	}
}
section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 150px 10px;
}
@media (max-width: 910px) {
	section {
		flex-direction: column;
		justify-content: center;
		padding: 50px 10px;
	}
}
section#top_image {
	display: block;
}
section .section_title_block {
}
.section_content_block {
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
}
@media (max-width: 910px) {
	.section_content_block {
		flex-direction: column;
		justify-content: center;
	}
}
#top_copy_block p {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 3rem;
	text-align: center;
	margin: 100px 0 0 0;
	animation-name: slide10;
	animation-fill-mode: backwards;
	animation-delay: 1s;
	animation-duration: 2.5s;
}
@media (max-width: 355px) {
	#top_copy_block p {
		font-size: 2rem;
	}
}
@keyframes slide10 {
	from {
	    opacity: 0;
		transform: translateY(50px);
	}
	to {
	    opacity: 1;
		transform: translateY(0);
	}
}
@media (max-width: 350px) {
	#top_copy_block {
		font-size: 2rem;
	}
}
.scroll-wrap {
	--scroll-color: #111;
	color: var(--scroll-color);
	text-align: center;
}
.scroll-arrow {
	animation: arrow-move 1s ease infinite;
}
@keyframes arrow-move {
	0% { 
		transform: translateY(0); 
		opacity: 1; 
	}
	100% { 
		transform: translateY(15px);
		opacity: 0.5; 
	}
}
.scroll-icon {
	display: block;
	width: 1em;
	height: 1em;
	border: 1px solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: rotate(135deg);
	margin: 50px auto 0 auto;
}
.scroll-text {
	font-size: 12px;
	color: currentColor;
	letter-spacing: .2em;
	margin-top: 25px;
}
.link_block {
	text-align: right;
	padding: 50px 0 0 0;
}
.content_txt {
	max-width: 540px;
/*	word-break: keep-all;*/
/*	overflow-wrap: break-word;*/
	padding: 0 0 5px 0;
}
#about {
	border-top: solid 1px #ddd;
}
#about_title_bk {
	position: relative;
	left: 40px;
	transform: rotate(10deg);
}
#about_title {
	position: relative;
	left: 20px;
	bottom: 30px;
	transform: rotate(-5deg);
}
#works {
	border-top: solid 1px #ddd;
}
#works_title_bk {
	display: block;
	position: relative;
	margin-left: auto;
	transform: rotate(10deg);
}
#works_title {
	position: relative;
	margin-left: auto;
	bottom: 30px;
	transform: rotate(-5deg);
}
#works .content_img_box .photo01 {
	position: relative;
	z-index: 58;
}
#works .content_img_box .photo02 {
	position: relative;
	margin: -40px 0 0 110px;
	z-index: 4;
}
#works .content_img_box .photo03 {
	position: relative;
	margin: -20px 0 0 40px;
	z-index: 3;
}
#works .content_img_box img {
	border: 5px solid #fff;	
}
#recruit {
	border-top: solid 1px #ddd;
}
#recruit_title_bk {
	position: relative;
	left: 50px;
	transform: rotate(10deg);
}
#recruit_title {
	position: relative;
	left: 20px;
	bottom: 30px;
	transform: rotate(-5deg);
}
#recruit .content_txt {
	word-break: normal;
}
#access {
	border-top: solid 1px #ddd;
}
#access_title_bk {
	position: relative;
	margin-left: auto;
	transform: rotate(10deg);
}
#access_title {
	position: relative;
	margin-left: auto;
	bottom: 30px;
	transform: rotate(-5deg);
}
@media (max-width: 910px) {
	#access .content_img_box iframe {
		width: 100% !important;
		height: auto !important;
	}
}
.map {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	height: 0;
}
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media (max-width: 910px) {
	#about_title_bk {
		left: auto;
		margin: 0 auto;
	}
	#about_title {
		left: auto;
		margin: 0 auto;
	}
	#works {
		flex-direction: column-reverse;
	}
	#works_title_bk {
		margin: 0 auto;
	}
	#works_title {
		margin: 0 auto;
	}
	#recruit_title_bk {
		left: auto;
		margin: 0 auto;
	}
	#recruit_title {
		left: auto;
		margin: 0 auto;
	}
	#access {
		flex-direction: column-reverse;
	}
	#access_title_bk {
		margin: 0 auto;
	}
	#access_title {
		margin: 0 auto;
	}
}
.fadeIn {
	transition: 1s;
	opacity: 0;
}
.fadeIn.animated {
	opacity: 1;
}
.fadeIn_left {
	transform: translate3d(-50px, 0, 0);
	transition: 1s;
	opacity: 0;
}
.fadeIn_left.animated {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
.fadeIn_left_long {
	transform: translate3d(-100px, 0, 0);
	transition: 1s;
	opacity: 0;
}
.fadeIn_left_long.animated {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
.fadeIn_left_short {
	transform: translate3d(-25px, 0, 0);
	transition: 1s;
	opacity: 0;
}
.fadeIn_left_short.animated {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
.fadeIn_right {
	transform: translate3d(50px, 0, 0);
	transform-origin: top right;
	transition: 1s;
	opacity: 0;
}
.fadeIn_right.animated {
	transform: translate3d(0, 0, 0);
	transform-origin: top right;
	opacity: 1;
}
.fadeIn_right_long {
	transform: translate3d(100px, 0, 0);
	transform-origin: top right;
	transition: 1s;
	opacity: 0;
}
.fadeIn_right_long.animated {
	transform: translate3d(0px, 0, 0);
	transform-origin: top right;
	opacity: 1;
}
.fadeIn_right_middle {
	transform: translate3d(75px, 0, 0);
	transform-origin: top right;
	transition: 1s;
	opacity: 0;
}
.fadeIn_right_middle.animated {
	transform: translate3d(0px, 0, 0);
	transform-origin: top right;
	opacity: 1;
}
.content_title {
	font-size: 1.5rem;
	padding: 5px 0 10px 0;
}
.footer_icon_block {
	display: flex;
	justify-content: center;
	gap: 10px;
	align-items: center;
	padding: 20px 0;
}
.footer_center_block {
	text-align: center;
	padding: 20px 0;
}


#contents_main {
/*	width: 800px;*/
	margin: 0 auto;
	padding: 20px 0;
}
#contents_main h2 {
	background-image: url('../img/icon1.png');
	background-position: left 1px;
	background-repeat: no-repeat;
	color: #3A5C93;
	font-size: 18px;
	font-weight: bold;
	border-bottom: solid 2px #3A5C93;
	margin: 0 auto 10px 0;
	padding: 0 0 0 20px;
}
#contents_main .recruit_table {
	margin: 10px 5px;
}
#contents_main .recruit_table tr th {
	font-weight: normal;
	vertical-align: top;
	white-space: nowrap;
	text-align: left;
	line-height: 1.2rem;
	padding: 5px 0;
}
#contents_main .recruit_table tr td {
	line-height: 1.2rem;
	vertical-align: top;
	padding: 5px 0 5px 10px;
}
#contents_main .recruit_table tr td p {
	padding: 0 0 5px 0;
}
@media (max-width: 910px) {
	#contents_main .recruit_table tr th,
	#contents_main .recruit_table tr td {
		display: block;
	}
}
.input_flex {
	padding: 0 0 5px 0;
	display: flex;
	align-items: center;
	gap: 10px;
}
.input_inside_flex {
	display: flex;
	align-items: center;
	gap: 10px;
}
@media (max-width: 910px) {
	.input_flex {
		flex-direction: column;
		justify-content: left;
		align-items: inherit;
	}
	.input_inside_flex div {
	}
	.input_inside_flex input[type="text"] {
	}
}
#contents_main #no_job {
	text-align: center;
	margin: 100px 0 150px 0;
}
#contents_main .notice {
	text-align: center;
	margin: 0 0 10px 0;
}
#contents_main #textbox {
	width: 100%;
}
#contents_main .button {
	padding: 0 20px;
}
.button_box {
	display: flex;
	justify-content: center;
	gap: 20px;
}
@media (max-width: 910px) {
	.button_box {
		text-align: center;
		display: block;
	}
}
.button01 {
	width: 350px;
	background-color: #6f94eb;
	border: 2px solid #6f94eb;
	/*border-radius: 4px;*/
	color: #fff;
	line-height: 50px;
	margin: 10px 0 0 0;
	padding: 0 10px;
}
.button01:hover {
	background-color: #fff;
	border-color: #6f94eb;
	color: #6f94eb;
}
.button02 {
	width: 350px;
	background-color: #47b371;
	border: 2px solid #47b371;
	/*border-radius: 4px;*/
	color: #fff;
	line-height: 50px;
	margin: 10px 0 0 0;
	padding: 0 10px;
}
.button02:hover {
	background-color: #fff;
	border-color: #47b371;
	color: #47b371;
}