@charset "utf-8";


.mainimage{
margin: 100px auto 0px auto;
background: url("../contact/images/contact-bg.jpg") center;
background-size: cover;
text-align: center;
height: 400px;
display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
}
.mainimage .filter{
background: rgba(0,0,0,0.60);
display: block;
height: 100%;
width: 100%;
display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
}
.mainimage h1{
color: #fff;
font-size: 50px;
letter-spacing: 2px;
font-weight: 300;
font-family: 'Crimson Text', serif;
position: absolute;
top: 280px;
z-index: 4;
}
.mainimage .tate{
position: absolute;
top: 400px;
z-index: 2;
  width: 1px;
  height: 100px;
  background-color: #fff;
}


.body-wrapper {
    width: 1152px;
    max-width: 100%;
    margin: 0 auto;
}

.job_block{
background: #ececec;
width: 100%;
height: 100%;
}

.main{
width: 1100px;
margin: 0px auto;
}

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

.contents .caption{
width: 100%;
margin: 40px auto;
text-align: center;
}

.contents .caption h2{
font-size: 28px;
font-weight: bold;
margin: 40px auto 40px auto;
letter-spacing: 3px;
}
.contents .caption p{
font-size: 16px;
line-height: 240%;
font-family: 'Noto Sans JP', sans-serif;
}



.info {
    margin: 50px auto;
    width: 1000px;
}
.info h3{
text-align: center;
color: #633c53;
margin: 80px auto 20px auto;
font-size: 22px;
font-family: 'Crimson Text', serif;
font-weight: bold;
line-height: 140%;
letter-spacing: 3px;
}
.info h3 span{
font-size: 16px;
font-weight: normal;
font-family: 'Noto Sans JP', sans-serif;
}

.info .news {
width: 100%;
list-style: none;
margin: 30px auto 50px auto;
}
.info .news li{
width: 100%;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  webkit-box-align: baseline;
     -ms-flex-align: baseline;
        align-items: baseline;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border-bottom: 1px solid #ececec;
  padding: 15px 0px;
  font-size: 14px;
font-family: 'Noto Sans JP', sans-serif;
position: relative;
line-height: 200%;
}
.info .news li .news_img{
position: relative;
width: 100%;
margin: 10px auto;
}
.info .news li .news_img img
{
width: 100%;
}

a.sample{
   display: block;
   margin-top:-160px;
   padding-top:160px;
}

.info .news li .icon01{
background: #F5AA6B url("../topImage/icon01.jpg") 5px no-repeat;
color: #fff;
padding: 10px 3px 10px 30px;
margin: 0px 10px;
border-radius: 5px;
width: 185px;
font-family: 'Noto Sans JP', sans-serif;
}
.info .news li .icon02{
background: #E9474D url("../topImage/icon02.jpg") 5px no-repeat;
color: #fff;
padding: 10px 3px 10px 30px;
margin: 0px 10px;
border-radius: 5px;
width: 185px;
font-family: 'Noto Sans JP', sans-serif;
}
.info .news li .icon03{
background: #221716 url("../topImage/icon03.jpg") 5px no-repeat;
color: #fff;
padding: 10px 5px 10px 30px;
margin: 0px 10px;
border-radius: 5px;
width: 125px;
font-size: 12px;
font-family: 'Noto Sans JP', sans-serif;
}

.info .news li p{
width: 100%;
margin: 10px auto;
line-height: 160%;
}
.info .news li .flex_img{
width: 100%;
margin: 0px auto 20px auto;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
-ms-flex-wrap: wrap;
      flex-wrap: wrap;
	  -webkit-box-align: start;
     -ms-flex-align: start;
        align-items: flex-start;
}
.flex_img_full{
width: 100%;
height: 215px;
overflow: hidden;
margin: 0px auto 20px auto;
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}
.flex_img_full img{
width: 33.3%;
}

.info .news li .flex_img_half{
width: 100%;
margin: 0px auto 10px auto;
display: flex;
justify-content: space-between;
}
.info .news li .flex_img_half img{
width: 49%;
}

.info .read_btn{
float: right;
margin-bottom: 100px;
}


#20200708 {
   margin-top:-100px;
  padding-top:100px;
}
#20200601 {
   margin-top:-100px;
  padding-top:100px;
}

/*モーダル*/
.content{
			margin: 0 auto;
			padding: 40px;
}
.modal{
			display: none;
			height: 100vh;
			position: fixed;
			top: 0;
			width: 100%;
            z-index: 999999999 !important;
}
.modal__bg{
			background: rgba(0,0,0,0.8);
			height: 100vh;
			position: absolute;
			width: 100%;
            z-index: 999999999 !important;
}
.modal__content{
			background: #fff;
			left: 50%;
			padding: 40px;
			position: absolute;
			top: 50%;
			transform: translate(-50%,-50%);
		width: 60%;
        height: 80%;
        overflow-y:scroll;
        z-index: 999999999 !important;
}
.modal__content p{
margin: 10px 0px;
font-size: 14px;
font-family: 'Noto Sans JP', sans-serif;
}
.modal__content dl{
margin: 0px 0px 10px 0px;
padding: 0;
}
.modal__content dl dt{
margin: 0px 0px 10px 0px;
font-size: 14px;
padding: 0px 0px 5px 0px;
font-family: 'Noto Sans JP', sans-serif;
font-weight: bold;
border-bottom: 1px dotted #ccc;
}
.modal__content dl dd{
margin: 0px 0px 10px 0px;
font-size: 13px;
font-family: 'Noto Sans JP', sans-serif;
line-height: 140%;
}
.js-modal-close{
text-align: center;
color: #fff;
background: #1F1F1F;
padding: 5px;
margin: 10px auto 0px auto;
font-size: 13px;
}
p.js-modal-close{
margin: 10px auto 0px auto;
}

.main h3.option_hd{
text-align: left;
font-size: 20px;
font-family: 'Noto Sans JP', sans-serif;
border-bottom: 1px dotted #C3B9AA;
padding: 0px 0px 10px 0px;
margin: 0px 0px 20px 0px;
font-weight: 600;
letter-spacing: 2px;
}

.modal__content h4{
margin: 20px auto 10px auto;
padding: 0 0 10px 0;
border-bottom: 1px solid #ccc;
font-size: 24px;
text-align: left;
}
.modal__content .news_table{
width: 100%;
display: flex;
flex-wrap: wrap;
font-size: 1.2rem;
}
.modal__content .news_table dt{
width: 30%;
margin: 0;
padding: 10px;
border-bottom: dotted 1px #fff;
background: #4A6444;
color: #fff;
}
.modal__content .news_table dd{
width: 65%;
margin: 0;
padding: 10px;
border-bottom: dotted 2px #ccc;
line-height: 150%;
}
.modal__content p{
line-height: 160%;
}

