@charset "utf-8";
.sp{display:none !important;}

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	background:transparent;
	list-style-type:none;
	font-size: medium;
	color: #47425d;
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	line-height: 1.6;
	outline:none;
	letter-spacing:0.1em;
	font-size:14px;
	text-align: justify;
	font-feature-settings : "palt";
}

a{
	text-decoration:none;
	color:#000;
	display:block;
	-webkit-transition: 0.3s ease-out;
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
}
a[href^="tel:"] {
	pointer-events: none;
}
a:hover{
	color:#0f75c0;
}

body{
	background:#f6f6f6;
}

img{
	display:block;
	width:100%;
}
p{
	line-height:1.6;
	letter-spacing:0.01em;
}
header{
	overflow:hidden;
	background: linear-gradient(180deg, #fff 0px, #fff 40px, #f6f6f6 40px, #f6f6f6 100%);
	position:absolute;
	width:100%;
	z-index: 1;
}

.main_logo{
	margin:10px 0 0 30px;
	text-align:center;
	float:left;
	position:relative;
	z-index:100;
}

.main_logo svg{
	width:180px;
	height:auto;
	margin:0 auto;
}

.main_logo h1{
	text-align:center;
	margin:0 auto;
	font-size:9.75px;
}

.firstview{
	width:100%;
}


.firstview .inner{
	width:1080px;
	box-sizing:border-box;
	margin:0 auto;
	overflow:hidden;
}

.firstview .inner .left{
	float:left;
	width:540px;
	margin-left:30px;
	position:relative;
	overflow:hidden;
	z-index:2;

}
.firstview .inner .left:after{
	content:"";
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	background:linear-gradient(180deg, #fff 0px, #fff 40px, #f6f6f6 40px, #f6f6f6 100%);
	animation: slideIn1 1s cubic-bezier(0.895, 0.030, 0.685, 0.220) forwards;
}

.firstview .inner .left img{
	animation: slideIn2 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	position:relative;
	z-index:0;
	width:540px;
	height:700px;
}

.firstview .inner .left iframe{
	width:540px;
	height:700px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	z-index:1;
	animation: slideIn2 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.firstview .inner .left iframe:before{
	content:"";
	height:100px;
	width:100px;
	position:absolute;
	top:0;
	left:0;
	background:red;
}

.firstview .inner .right{
	float:right;
	width:470px;
	position:relative;
	z-index: 0;
}

.firstview .inner .right h2{
	margin:160px auto 0;
	width:83%;
	overflow:hidden;
	font-size:34px;
	font-family: "Libre Franklin", sans-serif;
	text-align:left;
	height:110px;
	letter-spacing: 0.06em;
}

.firstview .inner .right p{
	margin:30px auto;
	width:83%;
	text-align:left;
}

.firstview .overlay{
	width:0;
	position:relative;
	z-index:2;
}

.firstview .overlay{
	width:100%;
	height:180px;
	mix-blend-mode: multiply;
	margin-top:-50px;
	background:linear-gradient(90deg,#15b3c8 50%,#8ec436);
	background-size: 120% 100%;/*サイズを大きくひきのばす*/
	animation: slideIn 1.2s cubic-bezier(0.895, 0.030, 0.685, 0.220) 2.5s forwards;
    transform: translateX(-100%);
}


@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
  }
  70%,100% {
    opacity: 1;
  }
}

@keyframes slideIn1 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
  }
  70%,100% {
    opacity: 1;
  }
}

@keyframes slideIn2 {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}


.address p{
	text-align:center;
}

.address h2{
	text-align:center;
	font-size: 60px;
    letter-spacing: .12em;
    font-weight: 700;
    font-family: "Fjalla One", sans-serif;
	-webkit-text-stroke: 0.01px #fff;
	-webkit-text-fill-color: transparent;
}

.address h3{
    text-align: center;
    font-size: 18px;
    margin: 0 auto 50px;
}

address{
	background:#000;
	color:#fff;
	font-style:normal;
	text-align:center;
	padding:10px 0;
}

.content{
	width:1160px;
	margin:0 auto 100px;

}

#index_page .content ul{
	width:100%;
	margin:0 auto 100px;
	display:flex;
    flex-wrap: wrap;
}

#index_page .content ul li{
	width: 50%;
	box-sizing:border-box;
    padding: 5.25rem 4rem;
}

#index_page .content ul li:nth-child(2n) {
    transform: translateY(6.5rem);
}

h3 span{
	color: #8f95a1;
	display:block;
	margin: 15px auto 0;
	font-weight:normal;
}

h3{
	font-size: 30px;
	margin: 15px auto;
}

#index_page .content ul li dt{
	border-radius:20px;
	overflow:hidden;
}

.address{
	background:URL("../img/about_bk.webp") no-repeat;
	background-attachment: fixed;
    background-size: cover;
    background-position: center;
	padding:100px 0;
}

.address .inner{
	width:900px;
	margin:0 auto;
}

.address .inner *{
	color:#fff;
}

.address .inner table{
	width:62%;
	margin:0 auto 50px;
}

.address .inner table th{
	width:25%;
	padding:10px;
}

.address .inner table td{
	width:75%;
	padding:10px;
}

header ul{
	float:right;
	width:40%;
	overflow:hidden;
}

header ul li{
	width:20%;
	float:right;
	display:flex;
    align-items: center;
}

header ul li a{
	text-align:center;
	width:100%;
	padding:9px 0;
}

header ul li:first-child{
	width:30%;
	margin-left:4%;
}

header ul li:first-child a{
	background:#333;
	color:#fff;
}

header ul li:first-child a:hover{
	background:#0f75c0;
}

/* フォーム回り */
#contact_page{
	overflow:hidden;
	width:800px;
	margin:0 auto;
}

#contact_page .content_section{
	margin:120px auto 80px;
}

#contact_page .form_section{
	margin:0 auto 80px;
}

#contact_page  .form_section *{
	font-size: 103%;
}

#contact_page .form_section dt{
	font-weight:bold;
	margin-bottom:16px;
	letter-spacing: 0.2em;
}

#contact_page .form_section dt span{
	color:#BE3628;
	display:inline-block;
	margin:0 4px;
}

#contact_page .form_section dd{
	margin-bottom:56px;
	display:flex;
}

#contact_page .form_section dd select{
	border:none;
	border-top:1px solid #47425d;
	border-bottom:1px solid #47425d;
	color:#BEC5C6;
	width:100%;
	padding:16px 20px;
	background:none;
}

#contact_page .form_section dd select option{
	color:#47425d;
}

#contact_page .form_section dl:nth-child(3) input{
	width:calc(50% - 8px);
	display:inline-block;
}

#contact_page .form_section dl:nth-child(3) input:first-child{
	margin-right:16px;
}
#contact_page .form_section dd input{
	padding:15px;
	border:1px solid #404D501F;
	width:100%;
	background:#fff;
	border-radius:7px;
}

#contact_page .form_section ::placeholder{
	color:#BEC5C6;
}

#contact_page .form_section dd textarea{
	padding:15px;
	border:none;
	height:400px;
	width:99%;
	box-sizing:border-box;
	margin:0 auto 24px;
	border-radius:7px;
}

#contact_page .form_section .checkarea{
	text-align:center;
	background:#1087940d;
	margin-bottom:80px;
}

#contact_page .form_section .checkarea label{
	padding:20px 0;
	display: inline-block;
}

#contact_page .form_section .checkarea label a{
	border-bottom:1px dotted #0f75c0;
	color:#0f75c0;
	margin:0 7px;
}

#contact_page .form_section .checkarea label span{
	color:#BE3628;
}

#contact_page .form_section .sbmt_btn input{
	width:100%;
	height:56px;
	border:none;
	background:none;
}


.contact_confirm .form_section .sbmt_btn{
	width:100%;
}

.contact_confirm .form_section .sbmt_btn input{
	cursor:pointer;
}

.contact_confirm .form_section .right input{
	color:#fff;
	background:#0f75c0!important;
	margin-top:100px;
}

.contact_confirm .form_section .left input{
	background:#d6d7d7!important;
}


.contact_confirm .form_section dd{
	border-bottom:1px solid #47425d;
	padding:0 20px 20px;
}

.contact_confirm .form_section #form{
	margin-bottom:100px;
}

#contact_page .content_section p{
	margin:0 auto 40px;
}

#contact_page .content_section .required{
	margin:0 auto 40px;
	color:#BE3628;
}

#contact_page .content_section .to_top{
	width:50%;
	padding:20px;
	background:#333;
	color:#fff;
	text-align:center;
	margin:120px auto;
}

#recruit_page{
	overflow:hidden;
}

#recruit_page .content{
	margin:120px auto 80px;
}

#recruit_page h2{
	font-size: 60px;
	letter-spacing: .12em;
	text-align:center;
	color: #15b3c8;
    font-weight: 700;
    font-family: "Fjalla One", sans-serif;
}

#recruit_page h3{
	text-align:center;
	font-size:18px;
	margin:0 auto 15px;
}

#recruit_page h{
	text-align:center;
	display:block;
	margin:0 auto 40px;
}

#recruit_page ul{
	display:flex;
	margin:40px auto 130px;
    justify-content: center;
}

#recruit_page ul>li{
	margin:0;
	min-width:25%;
    transition: 0.5s ease;
}

#recruit_page ul>li dt{
	width:100%;
	height:350px;
	position:relative;
	overflow:hidden;
	display:block;
}

#recruit_page ul>li dt img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.5s ease;
}

#recruit_page ul>li dt img.line_img{
	opacity:1;
    transition: 0.5s ease;
}

#recruit_page ul>li dt img.color_img{
	opacity:0;
    transition: 0.5s ease;
}

#recruit_page ul>li:hover dt img.line_img{
	opacity:0;
}

#recruit_page ul>li:hover dt img.color_img{
	opacity:1;
}

#recruit_page ul>li:hover dt img{
	transform: translate(-50%, -50%) scale(1.2);
}

#recruit_page ul>li dd{
	padding:5px 10px
}

#recruit_page ul>li dd h4{
	font-size:22px;
	margin:15px auto 10px;
}

#recruit_page ul>li dd h4 span{
	font-size:12px;
	display:block;
	font-weight:normal;
}

#recruit_page ul>li dd p{
	margin:0 auto 20px;
}

#recruit_page ul>li dd ol{
	display:flex;
	margin:0 auto 15px;
}

#recruit_page ul>li dd ol li{
	padding:2px 5px 0;
	font-size:11px;
	margin:0 5px 0 0;
	border-radius:10px;
	border:1px solid #0f75c0;
	color:#0f75c0;
}

#recruit_page ul>li dd ol li.time{
	background:#0f75c0;
	border:none;
	color:#fff;
}

#recruit_page ul>li .more{
	border:2px solid #0f75c0;
	color:#0f75c0;
	font-weight:bold;
	border-radius:20px;
	text-align:center;
	padding:5px 0;
	width:80%;
	margin:0 auto 25px;
    transition: 0.8s ease;
}

#recruit_page ul>li:hover{
	background:#fff;
}

#recruit_page ul>li:hover .more{
	background:#0f75c0;
	color:#fff;
}


/*Scrollテキストの描写*/
.scrolldown{
	position: absolute;
	right:0;
	left:0;
	margin:auto;
	bottom:0;
	color: #fff;
	z-index:9;
}

.scrolldown a{
	color:#fff;
	padding-bottom:50px;
    text-align: center;
}

/* 線の描写 */
.scrolldown::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 20px;
	right:0;
	left:0;
	margin:auto;
    /*線の形状*/
  width: 1px;
  height: 30px;
  background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
  top: 20px;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:70px;
    opacity: 0;
  }
}

.recruit_page table{
	width:800px;
	margin:0 auto;
}

.recruit_page table th{
	background:#21b3c7;
	padding:20px;
	width:30%;
	color:#fff;
}

.recruit_page table td{
	background:#fff;
	padding:20px;
	width:70%;
}


#recruit_page .recruit_page .navi_list{
	width:800px;
	margin:40px auto 70px;
	overflow:hidden;
}

#recruit_page .recruit_page .navi_list li{
	float:left;
	min-width:auto;
	font-weight:bold;
}

#recruit_page .recruit_page .navi_list li a{
	text-decoration:underline;
}

#recruit_page .recruit_page .navi_list li:hover{
	background:none;
}

#recruit_page .recruit_page .navi_list li:last-child{
	padding-left:30px;
	position:relative;
}

#recruit_page .recruit_page .navi_list li:last-child:after{
	position: absolute;
	margin: auto;
	content: "";
	vertical-align: middle;
	top:0;
	bottom:0;
	left:12px;
	width:5px;
	height:5px;
	border-top: 1px solid #47425d;
	border-right: 1px solid #47425d;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#recruit_page .recruit_page iframe{
	width:800px;
	margin:40px auto;
	display:block;
}

.policy_content{
	padding:40px;
	background:#fff;
	box-sizing:border-box;
	margin:0 auto 120px;
}

.policy_content h4{
	margin:0 auto 10px;
	font-size:110%;
}

.policy_content p{
	margin:0 auto 20px;
}

.policy_content ul{
	margin:0 auto 40px;
}

.policy_content ul li{
	list-style: circle;
	width:95%;
	margin:0 auto;
}