@charset "UTF-8";


/*
# =================================================================
# テーマの基本色
# =================================================================
*/
/*基本色1*/
.color01{
	color: #004ea2;
}

/*基本色2*/
.color02{
	color: #fff100;
}



/*
# =================================================================
# Webフォント
# =================================================================
*/

/*
# "Oswald" is lisenced under the SIL Open Font License 1.1
# https://fonts.google.com/specimen/Oswald
# http://scripts.sil.org/OFL_web
*/
.toc-area_inner li::before,
.widget .cast-box_sub .cast-box_sub_title span{
	font-family: 'Oswald', serif;
}

.site-title{
	font-family: 'Roboto', YakuHanJP_Noto, 'Noto Sans JP', "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
}

@font-face {
	font-family: 'rp8-icons';
	src: url('../fonts/rp8-icons.eot?ds3ffr');
	src: url('../fonts/rp8-icons.eot?ds3ffr#iefix') format('embedded-opentype'),
		url('../fonts/rp8-icons.ttf?ds3ffr') format('truetype'),
		url('../fonts/rp8-icons.woff?ds3ffr') format('woff'),
		url('../fonts/rp8-icons.svg?ds3ffr#rp8-icons') format('svg');
	font-weight: normal;
	font-style: normal;
}

blockquote::before,
blockquote::after,
.recruit-gnav_cont .recruit-gnav-child_btn_icon-open > .recruit-gnav-child_btn::before,
.recruit-gnav_cont .recruit-gnav-child_btn_icon-close > .recruit-gnav-child_btn::before,
.recruit-slider-pager_prev::before,
.recruit-slider-pager_next::before,
.recruit-breadcrumb-list li:first-child::before,
.recruit-breadcrumb-list li::after,
.toc-area_btn_open::before,
.toc-area_btn_close::before,
.check-list li::before,
.accordion-list dt::after,
.link-next a::before,
.link-back a::before,
.page-nav .page-nav_next a::after,
.page-nav .page-nav_prev a::before,
.commentlist .children li::before,
.form-login .form-login_title::before,

.page-top a::before,
.tagcloud a::before{
	font-family: 'rp8-icons' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/*
# =================================================================
# 基本設定
# =================================================================
*/

html{
	font-size: 62.5%;
}

a,
button{
	-webkit-transition: 0.3s;
	transition: 0.3s;
}

address,caption,cite,code,dfn,var,h1,h2,h3,h4,h5,h6{
	font-style: normal;
	font-weight: normal;
}

q{
	quotes: none;
	background: #d1eff0;
}

q::before,q::after{
	content: '';
	content: none;
}

div{
	word-wrap: break-word;
}

pre{
	overflow: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

form{
	margin: 0;
}

caption{
	text-align: left;
}

p{
	margin: 0 0 1.85em;
    line-height: 2.0;
}

figure{
	margin: 1em 0;
}

input,
select,
textarea{
	margin: 0;
	max-width: 100%;
	padding: .2em;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fff;
	font-size: 1em;
}

textarea{
	width: 100%;
}

button,
input,
select,
textarea,
optgroup,
option{
	vertical-align: baseline;
}

textarea{
	min-height: 100px;
	vertical-align: top;
}

caption{
	text-align: left;
}

body{
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 1.6em;
}

body,
input,
textarea{
	font-family: 'Roboto', YakuHanJP_Noto, 'Noto Sans JP', "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
}


/*埋め込み要素のはみ出しを防止*/
img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

embed, iframe, object, video{
	max-width: 100%;
}


/*
# リストの基本設定
*/
ul,ol{
	margin: 1em 0 1.5em 1.5em;
	padding-left: 0;
}

ul > li,
ol > li{
	margin-bottom: .5em;
}

ul > li:last-child,
ol > li:last-child{
	margin-bottom: 0;
}

dd{
	margin-left: 0;
	padding-left: 1em;
}


/*横並びリスト*/
.inline{
	margin: 1em 0; padding: 0;
}

.inline li{
	display: inline;
	list-style-type: none;
}


/*マーカー無しのリスト*/
.none{
	margin: 1em 0; padding: 0;
}

.none li{
	list-style-type: none;
}




/*
# =================================================================
# フォントの色
# =================================================================
*/

/*フォントの基本色*/
body{
	color: #000;
}


/*リンクの基本色
a{
	color: #0329ce;
}

/*

a:hover,
a:active,
a:focus{
	color: #00858a;
}
*/

/*
# =================================================================
# レイアウト
# =================================================================
*/

body{
	background-color: #fff; /*サイトの背景色*/
}


@media screen and (min-width: 769px) {
    .recruit-contents01 {
        width: 1000px;
        margin: 0 auto 100px auto;
        padding: 0;
    }
}


@media screen and (min-width: 769px) {
    .recruit-contents02 {
        width: 1000px;
        margin: 0 auto 0px auto;
        padding: 0;
    }
}

.recruit-container,
.recruit-mv_wrap{
	overflow: hidden;
}

.recruit-sub,
.recruit-footer_outer{
	padding: 20px 0;
}

.recruit-section_wrap{
	margin: 0;
	padding: 50px 30px 50px;
	background: #fff;
}

.recruit-section_outer{
	margin: 10px 0;
	padding: 20px;
	background-color: #fff;
}

.recruit-section_outer .recruit-section_wrap{
	margin: 0;
}

.recruit-sub ,

.recruit-sub .widget,


.section_wrap-wide{
	padding: 14.49vw 0 12.08vw;
	background: transparent;
}

.section_wrap-wide .recruit-section{
	padding: 0 3.62vw;
}



/*メインコンテンツとサブコンテンツの背景色*/


.recruit-sub{
	background: transparent;
}



.recruit-sep-conts_wrap{
	margin-bottom: 10px;
}

.recruit-sep-conts{
	padding: 10px;
}


/*
# =================================================================
# エリアごとのデザイン
# =================================================================
*/


/*
# ヘッダー
*/

.fixed{
	position: fixed;
	top: 0;
	z-index: 60;
	width: 100%;
}

.no-gn .recruit-header{
	padding-right: 0;
}




/*
# サブコンテンツの文字サイズや行間の設定
*/
 .free-area,
.recruit-sub{
	font-size: 1.4rem;
	line-height: 1.8em;
}



/*
# =================================================================
# フッター【1】
# =================================================================
*/

ul, ol {
    list-style: none;
}


    .site-menu ul {
        display: block;
        text-align: center;


    }

    /*横幅768px以上*/

    @media (min-width : 768px) {
        .site-menu ul { display: flex;}

	}




.site-menu ul li {
    margin-left: 20px;
    margin-right: 20px;
}

.site-menu ul li a {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}


a {
    color: inherit;
    text-decoration: none;
}


.footer {
    color: #ffffff;
    background-color: #24211b;
    padding-top: 30px;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    display: block;
    width: 235px;
    margin-top: 20px;
   
}


.footer-tel {
    font-size: 26px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 10px;
}

.footer-text {
    font-size: 15px;
    margin-top: 0px;
    text-align: center;
}

.sns-btn {
    display: flex;
    margin-top: 20px;
}


.sns-btn li {
    width: 30px;
    margin-left: 10px;
    margin-right: 10px;
}

.copyright {
    font-size: 15px;
    font-weight: bold;
    margin-top: 0px;
}



/* 各 SNS ボタンのボックス */
.sns-btn li  {
    display: inline-block; 
    margin: 5px;
    padding: px 0px;
    border-radius: 4px;
 
    width: 70px;
    height: 70px;
    line-hight: 70px;
  }

/* アイコン */
.sns-btn i {
    text-align:center;
    font-size: 50px;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    color: #fff;
  }




/*
# =================================================================
# 見出しのデザイン
# =================================================================
*/

h1,
h2,
h3,
h4,
h5,
h6{
	margin: 0;
	font-weight: bold;
	font-size: 100%;
	font-family: inherit;
}

h1{
	font-size: 2.8rem;
    line-height: 1.4;
    font-feature-settings: "palt";
    letter-spacing: 0;
}

h2{
	font-size: 2.6rem;
    line-height: 1.4;
    font-feature-settings: "palt";
    letter-spacing: 0;
}

h3{
	font-size: 2.4rem;
    line-height: 1.4;
    font-feature-settings: "palt";
    letter-spacing: 0;
}

h4{
	font-size: 2.0rem;
    line-height: 1.4;
    font-feature-settings: "palt";
    letter-spacing: 0;
}

h5{
	font-size: 1.8rem;
    line-height: 1.4;
    font-feature-settings: "palt";
    letter-spacing: 0;
}

h6{
	font-size: 1.6rem;
    line-height: 1.4;
    font-feature-settings: "palt";
    letter-spacing: 0;
}

/*見出しのリンク色*/
.recruit-section h1 a,
.recruit-section h3 a,
.recruit-section h4 a,
.recruit-section h5 a,
.recruit-section h6 a{
	color: #505050;
}

.recruit-section h1 a:hover,
.recruit-section h1 a:active,
.recruit-section h1 a:focus,
.recruit-section h3 a:hover,
.recruit-section h3 a:active,
.recruit-section h3 a:focus,
.recruit-section h4 a:hover,
.recruit-section h4 a:active,
.recruit-section h4 a:focus,
.recruit-section h5 a:hover,
.recruit-section h5 a:active,
.recruit-section h5 a:focus,
.recruit-section h6 a:hover,
.recruit-section h6 a:active,
.recruit-section h6 a:focus{
	color: #00858a;
}

.recruit-section h2 a{
	color: #fff;
}

.recruit-section h2 a:hover,
.recruit-section h2 a:active,
.recruit-section h2 a:focus{
	color: #505050;
}




/*回り込みの解除*/
.recruit-header_inner::after,
.recruit-gnav_inner::after,
.page-nav::after,
.nav-links::after,
.btn-area::after,
.item-box::after,
.item-box02::after,
.item-box03_col_wrap::after,
.btn-detail_wrap::after,
.clearfix::after,



/*
# =================================================================
# カスタマイズ
# =================================================================
*/


/*　スマホとパソコンで改行を分ける【開始】　*/


/* 768pxより小さい画面（スマホ）*/
.sp{
    display: block!important;
}

.pc{
    display: none!important;
}



/* 769pxより大きい画面（タブレット・PC） */
@media only screen and (min-width: 769px) { 
    .sp {
        display: none!important;
     }
    .pc {
        display: block!important;
     }
    }

/*　スマホとパソコンで改行を分ける【終】　*/


    
    


.flex-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-box.content-fs {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.flex-box.content-fe {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
    
.flex-box.align-fs {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.flex-box.align-c {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex-box.row-r {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
     -ms-flex-direction: row-reverse;
         flex-direction: row-reverse;
}

.recruit-header{
    background: #004ea2;
    height: 0;
    margin: 0 auto;
    text-align: center;
    padding-bottom: calc(100%*1090/767);
}

.recruit-header_inner{
    height: 0;
    margin: 0 auto;
    text-align: center;
    padding-bottom: calc(100%*1090/767);
    position: relative;
}

.main-catch{
    position: absolute;
    top: 8.87vw;
    left: 0;
    right: 0;
    width: 87.74vw;
    margin: auto;
    line-height: 1;
}

.mv-img{
    position: absolute;
    bottom: 8.34vw;
    left: 0;
    right: 0;
    width: 83.44vw; 
    margin: auto;
    line-height: 1;
}

.section_wrap-wide.entry-conts{
    padding: 7.25vw 0;
    background-color: #000;
    background-image: url(../images/shattered-dark.png);
}

.entry-conts .entry-btn{
    line-height: 1;
    margin: 0;
    filter: drop-shadow(0.48vw 0.48vw 0 rgba(0,0,0,0.2));
}

.entry-conts .entry-btn a:hover,
.entry-conts .entry-btn a:active,
.entry-conts .entry-btn a:focus{
    filter: brightness(1.1);
}

h2.sec-title{
    font-size: 6.76vw;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 7.25vw;
}

h2.sec-title .title-l{
    font-size: 9.18vw;
    font-weight: 900;
}





.recruit-footer_outer{
	padding: 0;
}

.recruit-footer_inner{
    padding: 6.04vw 3.62vw 0;
}

.footer-menu{
    margin: 0 auto;
    text-align: center;
}

.footer-menu li{
    list-style: none;
    font-size: 3.38vw;
    margin: 0 auto 1.93vw;
    padding: 0;
    line-height: 1.3;
}

.footer-menu li:last-child{
    margin-bottom: 0;
}

.footer-menu li a{
    text-decoration: none;
    color: #fff;
}

.footer-menu li a:hover,
.footer-menu li a:active,
.footer-menu li a:focus{
    text-decoration: underline;
}

.recruit-copyright{
    padding-top: 5px;
}

.recruit-copyright small{
    font-size: 1.2rem;
    color: #fff;
}













@media only screen and (max-width : 767px){
    
    .recruit-header_wrap.fixed{
        position: absolute!important;
        top: 0;
    }

}



@media (min-width : 480px){
    
    
    
    

}/*横幅480px以上*/



@media (min-width : 768px){

	 .recruit-section_wrap{
		padding: 120px 40px 100px;
	}
	
	 .recruit-section_wrap.widget{
		padding: 20px;
	}
	
	 .section_wrap-wide,
	 .recruit-section_wrap_style02{
		padding: 120px 0 100px;
	}

	.recruit-section_outer{
		margin-bottom: 40px;
	}

	.recruit-section_outer .recruit-section_wrap{
		margin: 0;
	}

    h1{ font-size: 2.4rem;  }

	h2{ font-size: 2.1rem; 	}

	h3{ font-size: 2.0rem; }

	h4{ font-size: 2.0rem; }

	h5{ font-size: 2rem; }

	/*
	# 1カラムのレイアウト
	*/
	.col1 .recruit-header_outer,
	.col1 .recruit-gnav_outer,
	.col1 .recruit-mv_outer,
	.col1 .catch-area,
	.col1 .archive_title_wrap,
	.col1 .recruit-breadcrumb-list_outer,
	.col1 .recruit-footer_outer,
	.col1 .recruit-copyright,
	.col1 .recruit-section_wrap,
	.col1 .recruit-sep-conts_outer,
	.col1 .recruit-footer-panel_outer{
		max-width: 1080px;
		margin-right: auto;
		margin-left: auto;
	}

	.col1 .recruit-sub{
		padding: 10px 0;
	}


	.col1 .section_wrap-wide{
		width: 100%;
		max-width: none;
	}

	.col1 .recruit-section_wrap,
	.col1 .section_wrap-wide,
	.col1 .section_wrap-wide .recruit-section{
		margin-right: auto;
		margin-left: auto;
	}
	
	.col1 .recruit-section_wrap{
		max-width: 1080px;
	}
	
	.col1 .section_wrap-wide{
		max-width: none;
	}

	.col1 .section_wrap-wide .recruit-section{
        max-width: 1080px;
		padding: 0 40px;
	}
	

    .col1 .recruit-section_wrap{
		max-width: 1080px;
	}

	.col1 .recruit-lp .recruit-header_outer,
	.col1 .recruit-lp .recruit-gnav_outer,
	.col1 .recruit-lp .recruit-mv_outer,
	.col1 .recruit-lp .catch-area{
		max-width: none;
	}




	

	.recruit-header{
		padding-right: 0;
	}

	.recruit-header_col1 .recruit-header_cont{
		margin-right: 0;
	}
	

	/*テーブル（横幅がはみ出る場合にテーブルを囲む要素に設定）*/

	.table-list thead{
		display: table-header-group;
	}

	.table-list tr{
		display: table-row;
	}

	.table-list th,
	.table-list td{
		display: table-cell;
	}

	.table-list tbody td::before{
		display: none;
		width: auto;
	}


	/*テーブル（左端がth、右側がtdの場合にスマホ表示で立て並びに変化）*/

	.table-block{
		display: table;
	}

	.table-block tbody{
		display: table-row-group;
	}

	.table-block tr{
		display: table-row;
	}

	.table-block th,
	.table-block td{
		display: table-cell;
	}

	.table-block th{
		width: 25%;
	}

	.table-block::after{
		display: none;
	}

	.table-scroll::before{
		content: "";
	}

	
	/*
	# ヘッダー
	*/
	.fixed{
		position: static;
		width: 100%;
	}

	.recruit-container{
		padding-top: 0!important;
	}
	
	.recruit-section_wrap{
		margin-bottom: 0;
	}

	/*
	# フッターパネル
	*/
	.recruit-footer-panel_wrap{
		display: none;
	}

    /*ボタン*/
    .btn{
        font-size: 1.8rem;
    }



    .recruit-header{
        padding-bottom: calc(100%*830/1080);
    }
    
    .recruit-header_inner{
        max-width: 1080px;
        padding-bottom: calc(100%*830/1080);
        position: relative;
    }

    .main-catch{
        position: absolute;
        top: 5.09vw;
        left: 0;
        right: 0;
        width: 73.70vw;
        margin: auto;
        line-height: 1;
    }

    .mv-img{
        position: absolute;
        bottom: 5.09vw;
        left: 0;
        right: 0;
        width: 58.33vw; 
        margin: auto;
        line-height: 1;
    }
    
    .section_wrap-wide.entry-conts{
        padding: 50px 0;
    }

    .entry-conts .entry-btn{
        max-width: 640px;
        margin: 0 auto;
        filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.2));
    }
    
    h2.sec-title{
        font-size: 3.6rem;
        margin: 0 0 50px;
    }
    
    h2.sec-title .title-l{
        font-size: 4.6rem;
    }
    

    .recruit-footer_inner{
        padding: 40px 40px 0px;
    }
    
    .footer-menu{
        padding-bottom: 20px;
    }
    
    .footer-menu li{
        font-size: 1.6rem;
        display: inline-block;
        margin: 0 0 0 40px;
    }
    
    .footer-menu li:first-child{
        margin-left: 0;
    }

    .recruit-footer_inner p{
        font-size: 1.6rem;
    }
    
    .recruit-footer_inner .footer-company-name{
        font-size: 1.8rem;
        margin: 20px auto 5px;
    }

    .recruit-copyright small{
        font-size: 1.4rem;
    }

    

    


}


/*横幅768px以上*/



@media (min-width : 875px){

    .achivement-text01{
        width: 303px;
    }
    
    .achivement-text02{
        width: 295px;
    }
    
    .achivement-text03{
        width: 270px;
    }
    
    .achivement-text04{
        width: 204px;
    }
    
    .achivement-text05{
        width: 244px;
    }
    
    .achivement-text06{
        width: 252px;
    }
    
    .achivement-text07{
        width: 376px;
    }
    
    .achivement-text08{
        width: 318px;
    }
    
    .achivement-text09{
        width: 367px;
    }
    
    .achivement-text10{
        width: 212px;
    }

}/*横幅875px以上*/



@media (min-width : 1030px){

    .section01  .program-box .flex-box > .col{
        width: 47.8%;
        margin: 0 0 4.4%;
    }


   .section03 .program-box .flex-box > .col{
        width: 47.8%;
        margin: 0 0 4.4%;
    }

}/*横幅1030px以上*/



@media (min-width : 1080px){

    .recruit-header{
        height: 830px;
        padding-bottom: 0;
    }
    
    .recruit-header_inner{
        height: 830px;
        padding-bottom: 0;
        position: relative;
    }

    .main-catch{
        position: absolute;
        top: 55px;
        left: 0;
        right: 0;
        width: 796px;
        margin: auto;
        line-height: 1;
    }

    .mv-img{
        position: absolute;
        bottom: 55px;
        left: 0;
        right: 0;
        width: 630px; 
        margin: auto;
        line-height: 1;
    }

    h2.sec-title{
        font-size: 5.0rem;
    }
    
    h2.sec-title .title-l{
        font-size: 6.5rem;
    }


    

	.recruit-footer-cont_wrap{
		padding: 0;
	}
	

}/*横幅1080px以上*/










  
.bosyu_btn{
    margin:0 20px 20px 20px;
    padding:0;
    text-align:center;
    }


    @media screen and (min-width:769px){
    .bosyu_btn{
    width:680px;
    margin:0 auto 50px auto;
    }
 
    }



    
/*ボタン*/
.btn{
    border-radius: 5px;
	display: inline-block;
	margin: 0;
	padding: 1em 2em;
	border: 0;
	background: #4885ed;
	color: #fff;
	font-size: 2rem;
	line-height: 1.5;
	text-decoration: none;
    font-weight: 900;
}

@media screen and (min-width:769px){
    .btn{
        font-size: 3rem;
    }
 
    }



    /*マウスオーバー時*/

    .btn:hover,
    .btn-compact:focus {
  background-color: #89aff0;
}







 .slider {
  margin: 0 auto;

}

.slider img{
    width: 100%;
    }



.sec-title{
    font-size:15px;
   /* font-weight: 700;*/
    text-align: center;
    margin: 0 0 7.25vw;
}

.sec-title-top{
    font-size:20px;
   /* font-weight: 700;*/
    text-align: center;
    margin: 0 0 0.0vw;
}

@media screen and (min-width:769px){
    .sec-title{
        font-size: 25px;
    }

    .sec-title-top{
        font-size: 30px;
    }

 
    }



    .section01 .p-text01{
        font-size: 4.5vw;
        line-height: 1.6;
        margin: 0 0 30px;

    }


    .section03.p-text01{
        font-size: 4.5vw;
        line-height: 1.6;
        margin: 0 0 30px;

    }


    


    .p-text03{
        font-size: 15px;
        line-height: 1.8;
        margin: 0 0 0px;
    }

    .p-text04{
        font-size: 20px;
        font-weight: bold;
        line-height: 1.8;
        margin: 0 0 0px;
    }


        /*横幅768px以上*/

        @media (min-width : 768px){

            .section01  .p-text01{
                 font-size: 20px;
                 line-height: 1.8;
                 text-align: center;
                 margin: 0 0 30px;
             }


            .section03 .p-text01{
                font-size: 20px;
                line-height: 1.8;
                text-align: center;
                margin: 0 0 30px;
            }

             .p-text02{
                font-size: 20px;
                line-height: 1.8;
                text-align: center;
                margin: 0 0 30px;
            }

            .p-text03{
                font-size: 15px;
                line-height: 1.8;
                margin: 0 0 0px;
            }


            }


    
    .section01 .hosoku{
        font-size: 3.38vw;
        line-height: 1.5;
        margin: 0 0 8.45vw;
    }



    .section_wrap-wide.section02{
    /*    background: #f5f3f2;*/

        background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.07), rgba(0,0,0,0.07) 1px, transparent 1px, transparent 4px)!important;
background-size: 6px 6px!important;
padding: 50px 30px 50px;
    }
    
    .section02 h2.sec-title .title-s{
        display: block;
        font-size: 4.83vw;
        font-weight: 700;
        line-height: 1.3;
        color: #fff;
        background: #004ea2;
        padding: 1.21vw 4.83vw 0.72vw;
        border-radius: 7.25vw;
        width: 65.22vw;
        margin: 0 auto 2.42vw;
    }


    
    .section02 h2.sec-title .title-s .title-s-l{
        font-size: 6.76vw;
    }
    
    .section02 h2.sec-title .color01{
        font-weight: 900;
    }
    



  



    .section_wrap-wide.section03{

 /* 画像ファイルの指定 */
  background-image: url(img/background_photo.jpg);
   
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
   
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
   
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #464646;
        }
        
        .section03 h2.sec-title .title-s{
            display: block;
            font-size: 4.83vw;
            font-weight: 700;
            line-height: 1.3;
            color: #fff;
            background: #004ea2;
            padding: 1.21vw 4.83vw 0.72vw;
            border-radius: 7.25vw;
            width: 65.22vw;
            margin: 0 auto 2.42vw;
        }
    
    
        
        .section03 h2.sec-title .title-s .title-s-l{
            font-size: 6.76vw;
        }
        
        .section03 h2.sec-title .color01{
            font-weight: 900;
        }
        


        




    



    /*横幅768px以上*/

    @media (min-width : 768px){


         .section01 .hosoku{
             font-size: 1.4rem;
             text-align: center;
             margin: 0 0 60px;
         }



         .section02 h2.sec-title{
            margin-bottom: 10px;
        }
        
        .section02 h2.sec-title .title-s{
            display: block;
            font-size: 2.4rem;
            padding: 3px 30px 2px;
            border-radius: 40px;
            width: 360px;
            margin: 0 auto 10px;
        }
    
        .section02 h2.sec-title .title-s .title-s-l{
            font-size: 4.0rem;
        }
        

        



        
        .section03 h2.sec-title .title-s{
            display: block;
            font-size: 2.4rem;
            padding: 3px 30px 2px;
            border-radius: 40px;
            width: 360px;
            margin: 0 auto 10px;
        }
    
        .section03 h2.sec-title .title-s .title-s-l{
            font-size: 4.0rem;
        }
        

        

        }


        .NewDate {
            font-size: 20px;
            text-align: center;
        }




 /*
# =================================================================
# 募集職種一覧
# =================================================================
*/

   /* 画像・文字　PC4列、SP2列(開始) */


	
*, *:before, *:after {
	box-sizing: border-box;
}
.gazoumoji_4retu{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.gazoumoji_4retu > div{
	width: 25%;
	padding: 5px;
}
@media screen and (max-width: 960px) {
	.gazoumoji_4retu > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.gazoumoji_4retu > div{
		width: 100%;
        padding: 20px;
	}
}
	


.l-wrapper {
  width: 250px;
	display: flex;
}

.card {
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, .16);
  color: #212121;
  text-decoration: none;

}

.card__header {
  display: flex;
  flex-wrap: wrap;
}

.card__thumbnail {
  margin: 0;
  order: 0;
}

.card__image {
  width: 100%;
}

.card__body {
	padding: 0px 1rem 1rem; /* 「上」､「左右」､「下」を指定 */

}

.card__text {
  font-size: 15px;
  text-align: center;
}

.card__btn {
  font-size: .75rem; margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  /* margin-topをautoにすることで、自動的に高さを調節してもらえる */
  margin-top: auto;
  padding: 0;
  text-align: center;
}



.card__footer {
  padding: 1rem;
  border-top: 1px solid #ddd;
	display: flex;
}

.button {
  display: inline-block;
  text-decoration: none;
  transition: background-color .3s ease-in-out;
}

.button.-compact {
  padding: .5rem 1rem;
  border-radius: .25rem;
  background-color: #4885ed;
  color: #fff;
  font-weight: bold;
  font-size: 15px;

}

.button.-compact:hover,
.button.-compact:focus {
  background-color: #89aff0;
}


.card__bold__font{
    margin: 0px 0px 10px; /* 「上」､「左右」､「下」*/
    padding:10px 5px 0px; /* 「上」､「左右」､「下」*/
    font-size: 130%;
    font-weight: 900;
    line-height: 150%;
  text-align: center;
    color: #000000;
  }
  

/* 画像・文字　PC4列、SP2列(終了) */


 /*
# =================================================================
# ○○の活躍を応援しています。
# =================================================================
*/

/* PCやタブレットでは横並びに。スマホでは縦並びに。(開始)　*/

/* フレックスボックスの基本設定 等間隔（両端揃え）折返しあり */
[class^="flex-col"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* コンテンツ下のマージン */
.flex-child { 
    margin-bottom: 10px;
    font-size: 17px;

}

.flex-col2  { margin-bottom: 40px; }
.flex-child3 { margin-bottom: 40px; }

    /*横幅768px以上*/

    @media (min-width : 768px) {
        .flex-child { 
            margin-bottom: 30px;
            font-size: 20px;
        
        }
        .flex-col2  { margin-bottom: 20px; }
       

	}


/* 各カラム毎のコンテンツと疑似要素の横幅 */


.flex-text {
    margin: 0;

    font-size: 17px;
}


@media (min-width : 768px) {
    .flex-text {
        margin: 0;
    
        font-size: 20px;
    }
   

}



.flex-col2 .flex-child { width: calc( (100% - 40px) / 2 ); }

.flex-col3::after,
.flex-col3 .flex-child3 { width: calc( (100% - 50px) / 3 ); }



	
/* 最終行は両端揃えにしない */
.flex-col3::after,





/* 767px以下で4列・3列 → 2列 */
@media screen and (max-width: 767px) {
	.flex-col3 .flex-child3{ width: calc( (100% - 10px) / 2 ); }

}

/* 575px以下で全て1列 */
@media screen and (max-width: 575px) {
	.flex-col2 .flex-child,
	.flex-col3 .flex-child3 { width: 100%; }
}






/* PCやタブレットでは横並びに。スマホでは縦並びに。(終了)　*/


 /*
# =================================================================
# 下からふわっと現れるアニメーション【その1】
# =================================================================
*/

/* 下からふわっと現れる */



.section01{
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.section02{
    /* 最初は非表示 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 1s, visibility 1s, transform 1s;
  }

.l-wrapper{
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}


.flex-col2{
    /* 最初は非表示 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 1s, visibility 1s, transform 1s;
  }



/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}



 /*
# =================================================================
# 下からふわっと現れるアニメーション【その2】
# =================================================================
*/




.inner00{
  
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0 20px;
  }

  .mainView{
    height: calc(100vh - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    position: relative;
  }
  .mainView p{
    font-size: 28px;
    font-weight: bold;
  }
  .scrollDown{
    position: absolute;
    bottom: 80px;
    right: 50%;
    animation: scrollDown 1s ease-in-out infinite;
  }
  @keyframes scrollDown{
    0% {bottom: 10%}
    50% {bottom: 15%}
    100% {bottom: 10%}
  }
  .scrollDown span{
    position: absolute;
    left: -25px;
    bottom: 10px;
    font-size: 0.8em;
    letter-spacing: 0.05em;
    writing-mode: vertical-rl;
  }
  .scrollDown::before{
    position: absolute;
    content: "";
    width: 1px;
    height: 20px;
    background-color: #333;
    bottom: 0;
    right: -6px;
    transform: skew(-30deg);
  }
  .scrollDown::after{
    position: absolute;
    content: "";
    width: 1px;
    height: 60px;
    background-color: #333;
    bottom: 0;
    right: 0;
  }
  .boxes00{
   
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    margin-top: 100px;
  }



  .rp_box{
  

    opacity: 0;
    visibility: hidden;
    transition: all 1s;
    transform: translateY(150px);
  }
  .is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }




  .inner00{
    display: flex;
    flex-wrap: wrap;
  }



  .rp_box{
    width: 100%;
    background: #ffffff;
  }
  
  @media (min-width: 768px) {



    .boxes00{
        display: grid;

      }
  }






  .rp_box img{
    width:100%;
    height:auto;
}


/*マウスオーバー時*/


.rp_box :hover,
.rp_box  -compact:focus {
    opacity: 0.7;

    filter: alpha(opacity=70);
  
    -ms-filter: "alpha(opacity=70)";
}




 .box_title {

    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    padding:0;
    margin:0;
    font-size:20px;
    color: #fff;
}


@media (min-width: 768px) {



    .box_title {


        font-size:30px;

    }
  }




 /*
# =================================================================
# PCでは画像横並び4列スマホでは横2列
# =================================================================
*/

.img_box { width:80%; margin:8px auto; display:flex; justify-content:space-between; flex-flow:row wrap;
}


.img_300x105 { width:46%; }



    /*横幅768px以上*/

    @media (min-width : 768px) {
        .img_300x105  { width:25%; margin:16px 0; }

	}


 /*
# =================================================================
# トップへ戻るボタン
# =================================================================
*/


/* トップへ戻るボタン */
.pagetop {
    height: 40px;
    width: 40px;
    position: fixed;
    right: 5px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2;
    cursor: pointer;
  }
  .pagetop__arrow {
    display: block;
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
  }


  @media (min-width : 768px) {
    .pagetop {
        height: 50px;
        width: 50px;
        right: 30px;
    }
}



 /*
# =================================================================
# エントリーボタン
# =================================================================
*/

/* エントリーボタン【開始】 */

.entry-_box{
    margin:0;
    padding: 15px 0 80px 0;
    text-align:center;
    transition-duration: .4s;
    }
    @media screen and (min-width:769px){.entry-_box{padding:30px 0 0 0;}}
    
    .entry-_box a:link {
    color:#fff;
 

    }
    .entry-_box a:hover {
        transform: scale(1.1);

    }
    .entry-_box a:visited {color:#fff;}


    
.entry-btn {
    width:90%;
    margin:0 auto;
    padding:20px 0;
    display:inline-block;
    font-size:120%;
    font-weight:bold;
    color:#fff;
    text-align:center;
    background: #24211b;
    border-radius: 70px;
    
    }

    @media screen and (min-width:769px){
    .entry-btn {
    width:700px;
    padding:50px 0;
    font-size:50px;
    letter-spacing:1px;
    }
    }





  /*
# =================================================================
# お問い合わせページ
# =================================================================
*/




@media screen and (min-width: 769px) {
    .contact-box {
        width: 700px!important;
        margin: 0 auto 100px auto;
        padding: 0;
    }
}



.contact-box {
    width:100%;
    margin: 0 auto 100px auto;
    padding: 0px 20px; /* 「上下」と「左右」を指定 */
 
}


.page-header{
    margin:64px 0 80px;
}


.page-title .en{
    color:#000;
    font-size:30px;
    font-weight:700;
    letter-spacing:0.1em;
    line-height:1;
    margin-bottom: 0;
    }



        .input-area {
            margin-bottom: 20px;
        }
        input[type="text"],input[type="email"],input[type="tel"],select {
            width: 700px;
            height: 30px;
        }
        textarea {
            width: 700px;
        }
    

        .kakunin-box{
            margin:50px 0 80px;
        }
        


        .kakunin-btn {
            display: inline-block;
            max-width: 180px;
            text-align: left;
            border: 2px solid #24211b;
            font-size: 15px;
            color: #24211b;
            text-decoration: none;
            font-weight: bold;
            padding: 8px 16px;
            border-radius: 4px;
            transition: .4s;
        }
        .kakunin-btn:hover {
            background-color: #24211b;
            border-color: #24211b;
            color: #FFF;
        }

        /* エラー表記 */
        .error {
            font-weight: 700;
            color: #ff0000;
            margin: 1em 0 5em 0em;

        }

                /* エラー表記 */
                .red {
           
                    color: #ff0000;
              
        
                }


                /*


/*
# =================================================================
# ページ
# =================================================================
*/



.recruit-section_wrap02{
	margin: 0;
	padding: 50px 30px 50px;
	background: #fff;
}

@media (min-width : 768px){

    .recruit-section_wrap02{
       padding: 120px 30px 120px;
   }
}


.recruit-section_wrap03{
	margin: 0;
	padding: 0px 30px 50px;
	background: #fff;
}

@media (min-width : 768px){

    .recruit-section_wrap03{
       padding: 0px 30px 120px;
   }
}


.top-image{
    height:calc(100vh - 600px);/*ヘッダーの高さをマイナス。必要なければheight:100vhに。*/
    position: relative;
    overflow:hidden;
    min-height: 400px;/* スマホ画面を横にした場合、文字が重ならないように*/
    }
    /*メイン画像の設定*/
    .top-image-main{
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;/* 画像がぐちゃっとならずに綺麗ににトリミングさせる */
    /*margin-top: -10%;画像のトリミング調整*/
    }


    .top-image-text{
        margin: 0 auto;
        font-weight: bold;
        color: #fff;
        font-size: 35px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        text-shadow: 2px 2px 5px #333;
    }
    

 

    /* 画面サイズが768px以上に適用*/
    @media (min-width: 768px) {.top-image-text{font-size:80px!important;} }


    .flex-col4  { margin-bottom: 40px; }
    .flex-col4 .flex-child { width: calc( (100% - 40px) / 2 ); }


    
        @media (min-width : 768px) {
    
            .flex-col4  { margin-bottom: 20px; }
            
    
        }
    
    
    /* 575px以下で全て1列 */
    @media screen and (max-width: 575px) {

        .flex-col .flex-child { width: 100%; }
    }
    

    @media (max-width:700px) {
        .flex-col4 {
            flex-direction: column;
        }
        .flex-child {
            display: contents;
        }
    
    }

     /*
# =================================================================
# 募集職種とエントリーページ
# =================================================================
*/




  .table_design02 {
    border-collapse: collapse;
    width: 100%;
   
    margin-bottom: 100px;
  }
  .table_design02 tr {
    background-color: #f1f1f1;
  }
  .table_design02 tr:nth-child(odd) {
    background-color: #f1f1f1;
  }
  .table_design02 th, .table_design02 td {
    padding: 1em;
  }
  .table_design02 th {
    font-weight: bold;
    text-align: left;
    width: 20%;
    min-width: 4em;
  }

      /* 575px以下で全て1列 */
      @media screen and (max-width: 575px) {

        .table_design02 th,td{
    display: block;
    width: 100%;
    text-align: left;
  }

  /* ↓装飾 */
  .table_design02 tr{
    border: 0;
  }
  .table_design02  th{
    font-weight: bold;
    text-align: left;

    padding: 0.5em  1em  0em !important; /* 「上」､「左右」､「下」を指定*/

  }

  .table_design02 ,td{

    padding: 0em  1em  0.5em  !important; /* 「上」､「左右」､「下」を指定*/
  }
}