@charset "UTF-8";
/*

Site Name: 
Description: Style
Version: 
Author: 
*/

/*
===================================================================

CONTENTS

	1: IMPORT
		1-1: RESET
		1-2: NAV
	2: BODY AND BASE SETTING
		2-1: HTML + BODY
		2-2: GENERAL SETTING
		2-3: FONT SIZE & STYLE
		2-4: CONTAINER
		2-5: SLIDER - bxslider
		2-6: thumbnail_box / thumbnail_list_box
		2-7: BG-COLOR
		2-8: ScrollTrigger
	3: STYLE
		3-1: styles
		
===================================================================
*/


/*
====================================================
1: IMPORT
====================================================
*/
/* --------------------------------------------------------------------------------------------
1-1: RESET
-------------------------------------------------------------------------------------------- */
@import url(sanitize.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDMincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600&display=swap');



/* --------------------------------------------------------------------------------------------
1-2: NAV
-------------------------------------------------------------------------------------------- */
@import url(nav.css);





/*
====================================================
2: BODY AND BASE SETTING
====================================================
*/
/* --------------------------------------------------------------------------------------------
2-1: HTML + BODY
-------------------------------------------------------------------------------------------- */
html { font-size: 62.5%; }
body { 
	font-size: 1.8rem;
	line-height: 1.8;
	color: #333;
	letter-spacing:0.35rem;
 }

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

.blog-block img{
	max-width:100%;
	width:auto;
}
ul {margin:0;padding: 0;}

h1,h2,h3,h4{
	margin: 0 0 1rem;
	font-weight: normal;
		line-height:1.4;
}



.fv-wrap{
        mask-image: url("../img/hero_mask.svg");
}

/*.fv-wrap{
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}*/



h2.lead{
	font-family: 'BIZ UDMincho', '游明朝体', '游明朝', YuMincho, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
	position: relative;
	text-align: center;
	padding: 1.5rem 1.5rem 5px;
	margin: 0 0 30px;
}	



h2.lead:before {
	position: absolute;
	content: '';
	background: #ccc;
	bottom: 0;
	left: calc(50% - 30px);
	width: 60px;
	height: 2px;
}


h3.lead {
	font-family: 'BIZ UDMincho','BIZ UDMincho', '游明朝体', '游明朝', YuMincho, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
	position: relative;
	display: table-cell;
	padding-left: 25px;
	padding: 0 0 15px 25px;
	line-height: 1.6;
	color: #73A02B;
}

h3.lead:before {
	position: absolute;
	content: '';
	top: calc(50% - 8px);
	width: 15px;
	left: 0;
	height: 1px;
	border-top: solid 2px #F39802;
}



@media screen and (min-width: 768px) {
/*	h3.lead{
		font-size:2.1rem;
	}*/
}


@media screen and (max-width: 768px) {
	.pc{
		display: none;
	}
}
@media screen and (min-width: 768px) {
	.sp{
		display: none;
	}
}

a{
	text-decoration: none;
	/*transition: 0.3s linear;*/
	color: #333;
}
a:hover{
	opacity:.8;
}


dl,dt,dd{
	margin: 0;
	padding: 0;
}



@media screen and (min-width: 768px) {
	.container-in.contact .tel-no a[href^="tel:"] {
	    pointer-events: none;
	}
}




/* --------------------------------------------------------------------------------------------
2-2: フッター
-------------------------------------------------------------------------------------------- */
.footer{
  background-color: #feda48;
  font-size:1.6rem;
  letter-spacing:1px;
}

.copyright{
  clear: both;
  text-align: center;
  margin:0;
  padding: 0 0 10px;
}

.footer-wrap{
  position: relative;
}
.f-logo{
  position: absolute;
  top: 180px;
  left: 30px
}

.footer-innner{
  padding:30px;
  overflow: hidden;
}

.footer-innner img{
	max-width:345px;
}




.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
@media (min-width: 768px){
  .navbar-nav {
      float: right;
      margin: 0;
      padding-top:15px;
  }

	.navbar-nav > li {
	    float: left;
	    background: #f4edd2;
	    margin: 0 5px;
	    border-radius: 3px;
	}
	.navbar-nav > li:hover {
	    background: #fff;
	}
}






/* --------------------------------------------------------------------------------------------
2-3: FONT SIZE & STYLE
-------------------------------------------------------------------------------------------- */
html,body{
  font-family: 'Noto Sans JP',"メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif!Important;
  color: #403c3c;
}




/* --------------------------------------------------------------------------------------------
2-4: CONTAINER
-------------------------------------------------------------------------------------------- */
.container{
	margin-bottom: 60px;
	width: 100%;
	max-width: 1080px;
	margin:0 auto 0%;
	padding:0 15px;
	overflow: hidden;
}

.container-wrap .container{
	margin:0 auto 0;
}

.container-wrap{
	margin:0 auto 20%;
}



.container-in{
	margin: 0 0 10% 0;
}



.flex-block{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}


@media screen and (min-width: 768px) {


}



/* --------------------------------------------------------------------------------------------
2-5: SLIDER - bxslider
-------------------------------------------------------------------------------------------- */
.slick-prev:before,
.slick-next:before{
	color: #000846;
}


.fv{
	position: relative;
}

.fv h2{
		font-family: 'BIZ UDMincho', '游明朝体', '游明朝', YuMincho, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
	  position: absolute;

	  font-size: 4.2rem;
	  font-weight: normal;
	  color:#eee;
	  text-shadow: 2px 2px 7px #333;
	  letter-spacing: 1px;
		top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}












.recruit-page .fv h2{


}














/* --------------------------------------------------------------------------------------------
2-6: HEADER
-------------------------------------------------------------------------------------------- */

header{
	/* position:fixed; */
	position:absolute;
	z-index: 99;
	width:100%;
}

header .flex-block{
	justify-content: space-between;
}

header .header-in{
	width:100%;
}
header h1.logo{
	max-width: 345px;
	margin:10px 0 0 3%;
}

@media screen and (max-width: 767px) {
	header h1.logo{
		width: 65%;
		margin:5px 0 15px 3%;
	}
}




/* --------------------------------------------------------------------------------------------
2-7: スクロールダウンのためのCSS
-------------------------------------------------------------------------------------------- */


/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:10px;
  left:50%;
}

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
    position: relative;
    left: 10px;
    bottom: 5px;
    /*テキストの形状*/
    color: #eee;
    font-size: 1.2rem;
    letter-spacing: 0.2em;
  /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#eee;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:70px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:2px;
  height: 75px;
  background:#eee;
}


@media screen and (max-width: 767px) {
	@keyframes circlemove{
	      0%{bottom:50px;}
	     100%{bottom:-5px;}
	 }
	.scrolldown:after{
		height: 55px;
	}
}







/* --------------------------------------------------------------------------------------------
2-9: page-top
-------------------------------------------------------------------------------------------- */

#pageTop {
  position: fixed;
  bottom: 10%;
  right: 20px;
  z-index: 99;
}
 


#pageTop a {
     display: block;
    z-index: 999;
    padding: 15px;
    width: 100px;
    height: 100px;
    background-color: #ccc;
    /*color: #fff;*/
    text-decoration: none;
    text-align: center;
    border-radius: 50px;
    padding-top: 20px;
    color: #ea430a
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

#pageTop small{
  font-size: 1.2rem;
}

@media screen and (max-width: 767px) {
  #pageTop {
    bottom: 12%;
    right: 10px;
  }
  #pageTop small{
    display: none;
  }
  #pageTop a {
    width: 60px;
      height: 60px;
      padding-top: 18px;
  }
  #pageTop .fa, #pageTop .fas {
      font-weight: 900;
      font-size: 2rem;
  }
  #pageTop .fa-lg{
    vertical-align: top;
    padding-top:3px;
  }
}




/* --------------------------------------------------------------------------------------------

テキスト

-------------------------------------------------------------------------------------------- */
h2.ttl{
	text-align:center;
}
h2.ttl span{
	text-align:center;
	line-height:1.4;
	margin: 0 0 3%;
	position: relative;
  display: inline-block;
  padding: 0 6rem;
  background: rgb(255 209 88 / 20%);
}


h2.ttl span:before, h2.ttl span:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
h2.ttl span:before {
  left:0;
}
h2.ttl span:after {
  right: 0;
}







h3.ttl{
	font-size:2.8rem;
	color: #f36a02;
	margin: 0 0 4%;
		line-height:1.4;
}

.font-lead{
  font-size: 2rem;
  margin: 3% 0;
}


p.text{
	line-height:2.4;
}






.bg01{
  background:#ede6d7;
}



.bg03{
  background:#ede6d7;
}



.bg04{
  /*position: fixed;*/
  /*top: 0;
  left: 0;*/
  /*width: 100vw;*/
  /*height: 100vh;*/
  background-color: #fff;
  z-index: -1;
}
.bg04,.bg04-02 {
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
}





.bg05{
	background:#EFEDEA;
}





/* --------------------------------------------------------------------------------------------

ご挨拶

-------------------------------------------------------------------------------------------- */

.recruit02-page{
	padding: 10% 0 3%;
}
.recruit02-page .flex-box{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items: center;
}

.recruit02-page img{
  width:100%;
}



.recruit02-page .flex-box .photo02{
  width:48%;
}

.recruit02-page .flex-box .photo02:nth-child(1){
	margin-top: 8%;
}
.recruit02-page .flex-box .photo02:nth-child(2){
	margin-top: 15%;
}







.recruit02-box01 .photo{
  width:30%;
}
.recruit02-box01 .text{
  width:65%;
}
.recruit02-box01 img{
  /*border-radius:50%;*/
  border-radius: 6px;
}







.recruit02-box02{
	text-align:center;
}







.recruit02-page .recruit02-box03 .flex-box{
	align-items: flex-start;
}
.recruit02-page .recruit02-box03 .flex-box .item{
  width:31%;
}





.recruit02-box03 .item{
  position: relative;
  margin: 3% 0;
}
.recruit02-box03 .item-in{
  padding: 3rem 4rem;
  background:rgba(255,255,254,.6);
  margin: 0 0 8%;
}
.recruit02-box03 .item:before,
.recruit02-box03 .item:after{
  content: "";
  width: 4em;
  height: 4em;
  position: absolute;
}
.recruit02-box03 .item::before{
  border-top: 2px solid #f36a02;
  border-left: 2px solid #f36a02;
}
.recruit02-box03 .item::after{
  border-bottom: 2px solid #f36a02;
  border-right: 2px solid #f36a02;
  right: 0;
  bottom: 0;
}
.recruit02-box03 .item h3{
  margin: 0 0 1em;
  color: #333;
}
.recruit02-box03 .item h3:first-letter{
  font-size: 1.4em;
  color: #f36a02;
}







.recruit02-box04 .photo{
  width:40%;
  text-align:center;
}
.recruit02-box04 .text{
  width:55%;
}
.recruit02-box04 .staff-box{
  margin:0 0 10%;
  padding: 0 0 10%;
  border-bottom: dotted 6px #fcbe3a;
}

.recruit02-box04 .staff-box:last-child{
  border:none;
  margin:0;
}


.recruit02-box04 .staff-box h2.ttl {
    margin-bottom: 50px;
}
.recruit02-box04 .staff-box h3.ttl {
    font-size: 2.4rem;
}
  

.schedule {
    position: relative;
    font-size: 14px;
    margin-bottom: 50px;
}
.schedule::before {
    position: absolute;
    background-color: #deeef7;
    content: "";
}

.schedule ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.schedule li {
    position: relative;
}

.schedule_time {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 5em;
    height: 2em;
    border-radius: 6px;
    background-color: #3388dd;
    color: #fff;
    text-align: center;
}
.schedule_time::before {
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    z-index: -1;
    background-color: #3388dd;
    content: "";
}
.schedule_time::after {
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #3388dd;
    content: "";
}

.schedule_content_title {
    font-weight: bold;
}

@media screen and (max-width: 991.98px) {
    .schedule::before {
        top: 0px;
        left: 6.5em;
        width: 6px;
        height: 100%;
    }
    .schedule li {
        display: flex;
        align-items: center;
        width: 100%;
    }
    .schedule li + li {
        margin-top: 2em;
    }
    .schedule_time::before {
        top: 50%;
        right: 0px;
        transform: translateX(50%) translateY(-50%) rotate(45deg);
    }
    .schedule_time::after {
        top: 50%;
        left: 6em;
        transform: translateY(-50%);
    }
    .schedule_content {
        margin: 0px 0px 0px 3em;
        width: calc(100% - 10em);
    }
}
@media screen and (min-width: 992px) {
    .schedule::before {
        top: 3.5em;
        left: 0px;
        transform: translateY(-50%);
        width: 100%;
        height: 5px;
    }
    .schedule ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0px -10px;
    }
    .schedule li {
        margin: 0px 10px;
        width: calc(12.5% - 20px);
    }
    .schedule_time {
        margin: 0px auto;
    }
    .schedule_time::before {
        left: 50%;
        bottom: 0px;
        transform: translateX(-50%) translateY(50%) rotate(45deg);
    }
    .schedule_time::after {
        top: 3.5em;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    .schedule_content {
        margin: 3em 0px 0px;
    }
    .schedule_content_title {
        text-align: center;
    }
    .schedule_content_detail {
        margin-top: 0.5em;
    }
}










.qa-8 dt {
    margin-bottom: 1em;
    color: #333333;
    font-weight: 600;
}

.qa-8 dt::before,
.qa-8 dd::before {
    margin-right: .4em;
}

.qa-8 dt::before {
    content: "Q.";
    color: #f36a02;  
    font-size: 1.4em;
}

.qa-8 dd {
    margin: 0 0 2.5em;
    padding: 1em 1.5em;
    background-color: #fffcf0;
    color: #333333;
}

.qa-8 dd::before {
    content: "A.";  
    color: #02a6f2;  
    font-size: 1.4em;
}







.recruit02-box06 h3{
	text-align:center;
}

.table_blk_recruit dl {
	display: flex;
	width: 100%;
	margin: 0;
	flex-wrap: wrap;
 }

.table_blk_recruit dl {
	display: flex;
	width: 100%;
	margin: 0;
	flex-wrap: wrap;
 }

 .table_blk_recruit dl dt {
    padding: 10px 20px 10px 10px;
    vertical-align: middle;
    background-color: #ede6d7;
    border: 1px solid #ccc;
    color: #333;
    width: 30%;
    text-align:right;
}

.table_blk_recruit dl dd {
    display: block;
    padding: 15px 20px;
    text-align: left;
    vertical-align: middle;
    border: 1px solid #ccc;
    background-color: #fff;
    width: 70%;
}


@media screen and (max-width: 767px) {
	 .table_blk_recruit dl dt {
	    width: 100%;
text-align:left;
	}

	.table_blk_recruit dl dd {
	    width: 100%;
	}
}