@charset "utf-8";
.pc{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 50%, #f6f6f6 50%, #f6f6f6 100%);
	width:100%;
	z-index: 1;
	height:64px;
}

.main_logo{
	text-align:left;
	position:relative;
	z-index:100;
	min-height:64px;
}

.main_logo a{
	width:calc(100% - 74px);
	padding-left:10px;
	height:64px;
	overflow:hidden;
}

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

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

.firstview{
	width:100%;
}


.firstview .inner{
	width:100%;
	box-sizing:border-box;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}

.firstview .inner .left{
	width:100%;

	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:100%;
	height:130vw;
}

.firstview .inner .left iframe{
	width:100%;
	height:130vw;
	position:absolute;
	top:0;
	left:0;
	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{
	position:absolute;
	top:0;
	left:0;
	z-index: 3;
	width:100%;
	height:130vw;
    background: URL("../img/pattern_Black.png");
}

.firstview .inner .right h2{
	margin:40px auto 0;
	width:80%;
	overflow:hidden;
	color:#fff;
	font-size:30px;
	font-family: "Libre Franklin", sans-serif;
	text-align:center;
	height:40vw;
	letter-spacing: 0.06em;
}

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

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

.firstview .overlay{
	width:100%;
	height:150px;
	mix-blend-mode: multiply;
	margin-top:-20px;
	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: 1px #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:100%;
	margin:0 auto 100px;

}

#index_page .content ul{
	width:100%;
	margin:40px auto 100px;
}

#index_page .content ul li{
	width: 90%;
	box-sizing:border-box;
	margin:0 auto 80px;
}

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;
	height:50vw;
	display:flex;
    justify-content: center;
    align-items: center;
}

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

.address .inner{
	width:100%;
	margin:0 auto;
}

.address .inner *{
	color:#fff;
	text-align:center;
}

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

.address .inner table th{
	display:block;
	padding:0;
	margin:0 auto 10px;
}

.address .inner table td{
	display:block;
	padding:0;
	margin:0 auto 30px;
}

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

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

#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:50vw;
	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;
	font-size: 90%;
}

#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:60px auto;
	width:100%;
}

#recruit_page h2{
	font-size: 280%;
	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:left;
	display:block;
	margin:0 auto 40px;
	width:95%;
}

#recruit_page ul{
	margin:40px auto 80px;
}

#recruit_page ul>li{
	margin:0 auto 20px;
    transition: 0.5s ease;
	background:#fff;
	width:95%;
}

#recruit_page ul>li a{
	padding:20px 0;
}

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

#recruit_page ul>li dt img{
}

#recruit_page ul>li dt img.line_img{
	display:none;
}

#recruit_page ul>li dt img.color_img{
	width:50%;
	margin:0 auto;
}

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

#recruit_page ul>li dd h4{
	font-size:170%;
	text-align:center;
	margin:15px auto 10px;
}

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

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

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

#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{
	font-weight:bold;
	border-radius:20px;
	text-align:center;
	padding:5px 0;
	width:80%;
	margin:0 auto 25px;
    transition: 0.8s ease;
	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:95%;
	margin:0 auto;
}

.recruit_page table th{
	background:#21b3c7;
	padding:15px;
	width:100%;
	display:block;
	color:#fff;
	box-sizing:border-box;
}

.recruit_page table td{
	background:#fff;
	padding:15px;
	width:100%;
	display:block;
	box-sizing:border-box;
}


#recruit_page .recruit_page .navi_list{
	width:92%;
	margin:40px auto;
	overflow:hidden;
    display: flex;
    justify-content: center;
}

#recruit_page .recruit_page .navi_list li{
	width:auto;
	font-weight:bold;
	background:none;
	font-size:90%;
}

#recruit_page .recruit_page .navi_list li a{
	text-decoration:underline;
	padding:0;
	font-size:100%;
}


#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:100%;
	margin:40px auto;
	display:block;
	height: 800vw;
}


/* メニュー */
.menu_btn{
	position:fixed;
	width:100%;
	top:0;
    transition: 0.4s all;
	z-index:99999;
}

.menu_btn.active{
	top:0;
}

.menu_btn a{
	display:block;
}

#panel-btn{
	position:absolute;
	z-index:9999;
	top:0;
	right:0;
	width: 64px;
	height: 64px;
	padding:0;
	background:#000;
}

#panel-btn.active{
	background:#fff;
}

#panel-btn span {
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    height: 1px;
	right:0;
	left:0;
	margin:auto;
    border-radius: 2px;
	background: #fff;
  	width: 20px;
}

#panel-btn span:nth-of-type(1) {top:25px;}
#panel-btn span:nth-of-type(2) {top:31px;}
#panel-btn span:nth-of-type(3) {top:37px;}
#panel-btn.active span{background: #fff;}

#panel-btn.active span:nth-of-type(1) {
    top: 25px;
	left:0;
	right:0;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
	background: #000;
}

#panel-btn.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}

#panel-btn.active span:nth-of-type(3){
    top: 37px;
	left:0;
	right:0;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
	background: #000;
}

.global_menu{
	display:none;
	position: fixed;
	top:0;
	left:0;
	width:100%;
	overflow:hidden;
	z-index:1000;
	background:#000;
	height: 100svh;
}

.global_menu .inner{
	width:100%;
	margin:0 auto;
}

.global_menu .inner h2{
	padding:0 20px;
	height:64px;
	display:flex;
	align-items: center;
    justify-content: left;
	color:#fff;
	border-bottom:1px solid #fff;
}

.global_menu .inner ul{
	width:100%;
	margin:40px auto;
}

.global_menu .inner ul li a{
	padding:20px 0 20px 64px;
	color:#fff;
	position:relative;
}



.policy_content{
	padding:20px;
	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;
	width:95%;
}

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