@charset "utf-8";


#content{}

.container{
	width: 1200px;
	margin: 100px auto 60px auto;
}

@media only screen and (max-width: 1200px){
  .container{
	margin: 60px auto 40px auto;
    width:100%;
    padding: 0 20px ;
  }
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.head_sns{
  position: absolute;
  top: 10px;
  bottom: 0;
  margin: 0 auto;
  right: 100px;
}

@media screen and (max-width: 768px) {
  .head_sns{
    width: 40px;
    height: 40px;
    right: 50px;
  }
}

/**********************************************
共通
**********************************************/

#h_Area{
	height: 230px;
	position: relative;
	background: url(../img/page/h1-back.png) no-repeat center ;
	background-size: cover;
	}

@media screen and (max-width: 768px) {
#h_Area{
    height: 120px;
  }
}

.h_inner{
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	min-height: 230px;
}

@media screen and (max-width: 768px) {
  .h_inner{
		min-height: 120px;
		display: flex;
		align-items: center;
  }
}

h1{
  margin-bottom: 80px;
	color: #0E739F;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
}

h1 span{
  display: block;
  font-size: 21px;
}

@media screen and (max-width: 768px) {
  h1 {
    margin-bottom: 40px;
		font-size: 24px;
		position: static;
  }
  h1 span{
    font-size: 16px;
  }
}

h2{
  margin-bottom: 40px;
	font-size: 24px;
  font-weight: bold;
}

h2::before{
  content: '';
  width: 10px;
  height: 30px;
  background:#0E9A9F;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  h2{
    padding-left: 15px;
    padding-right: 15px;
    font-size: 21px;
  }
}

h3{
	width:100%;
	margin-bottom: 30px;
	font-size: 155%;
}

.basicTbl{
  width: 100%;
  border: 1px solid #7a7a7a;
}

.basicTbl th{
  width: 10%;
  padding: 10px;
  text-align: center;
  border: 1px solid #7a7a7a;
  background: #eee;
}

.basicTbl td{
  width: 90%;
  padding: 10px 20px;
  border: 1px solid #7a7a7a;
}

@media screen and (max-width: 768px) {
  .basicTbl{
    border: 1px solid #0e9a9f;
  }
  .basicTbl th,
  .basicTbl td{
    width: 100%;
    display: block;
    border: 1px solid #0e9a9f;
  }
  .basicTbl th{
    background: #0e9a9f;
    color: #fff;
    border: 1px solid #0e9a9f;
  }
}

/*-------------------------------
　　　PAGE -recruit-
-------------------------------*/
.mailForm{
  width: 970px;
  margin: 0 auto;
  font-size: 2.1rem;
}

table.mail_form{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px 30px;
}

table.mail_form th{
  width: 20%;
  font-weight: bold;
}

table.mail_form td{
  width: 80%;
}

@media screen and (max-width: 768px) {
  table.mail_form th,
  table.mail_form td{
    width: 100%;
    display: block;
  }
}

.supplement{
  display: block;
  font-size: initial;
  color: #707070;
}

.astarisk{
  margin-left: 10px;
  font-size: initial;
  color: #0E9A9F;
  border-radius: 10px;
  box-sizing: border-box;
}

.wpcf7-form-control-wrap{display:block;}

.verticalmiddle{
  display: table;
}

.verticalmiddle p{
  vertical-align: middle;
  display:table-cell;
  line-height: 2;
}

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

.tab_label {
  padding: 15px 5px;
  text-align: center;
  color:#2694C5;
  border: solid 2px #2694C5;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  margin: 0 5px; 
}

@media screen and (max-width: 1200px){
  .tab_label {
    padding: 10px 5px;
  }
}

.tab_label span{
  display: block;
  font-size: 14px;
}

.tab_label:hover {
  opacity: 0.75;
}

.tab_content {
  flex: 100%;
  display: none;
  overflow: hidden;
}

input[name="tab_switch"] {
  display: none;
}

.tabs input:checked + .tab_label {
  color: #fff;
  background-color: #2694C5;
}
.tabs input:checked + .tab_label::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #2694C5 transparent transparent transparent;
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  transition: all 0.3s ease 0s;
}

#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content{
  display: block;
}

.tab_content{
  margin-top: 40px;
  position: relative;
  animation: fadeIn 1s ease;
}

.recBox{
  width: 100%;
  display:flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

.borderTbl{
  width: 90%;
  margin: 0 auto;
}

@media screen and (max-width: 1200px) {
  .recBox{
    flex-wrap: wrap;
  }
  .recBox_ttl{
    width: 100%;
    margin-bottom: 16px;
  }
}

.borderTbl tr{
  border: 2px solid #414141;
  border-radius: 8px;
  display: flex;
  margin-bottom: 10px;
}

.borderTbl th{
  width: 25%;
  padding: 20px;
  border-right: 1px solid #414141;
  vertical-align: middle;
  text-align: center;
}

.borderTbl td{
  width: 75%;
  padding: 20px;
}

@media screen and (max-width: 768px) {
  .borderTbl th,
  .borderTbl td{
    padding: 5px 10px;
  }
}

.borderTbl ul li{
  display: list-item;
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 20px;
}

.recruit_wrap,
.staff_wrap{
  width: 100%;
  margin-bottom: 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center; 
}

.recruit_ttl,
.staff_ttl{
  width: 20%;
  font-family: "Noto Serif JP", "Times New Roman", "Hiragino Mincho ProN",
               "Yu Mincho medium", "HG明朝E", "ＭＳ Ｐ明朝", serif;
  color: #9E9B9B;
  text-align: center;
  display: flex;
  flex-direction: column; /* 英字と日本語を上下に配置 */
  align-items: center; 
  justify-content: center;
}

@media screen and (max-width: 960px) {
  .recruit_ttl,
  .staff_ttl{
    width: 100%;
  }
}

.recruit_ttl .en 
.staff_ttl .en {
  font-size: 45px;
  line-height: 1.2;
}

.recruit_ttl .jp 
.staff_ttl .jp {
  font-size: 32px;
  margin: 10px 0 0;
}

@media screen and (max-width: 768px) {
  .recruit_ttl .en,
  .staff_ttl .en{
    font-size:32px;
  }
  .recruit_ttl .jp,
  .staff_ttl .jp{
    font-size: 18px;
    margin: 10px 0 0;
  }
}
  
.recruit_wrap img,
.staff_wrap img{
  width: 80%;
  margin: 0 auto;
  height: auto;
}


.tCenter{
  margin-bottom: 80px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .pcView{
    display: none;
  }
  .tCenter{
    text-align: left;
    margin-bottom: 40px;
  }
}

.rec_contact{
  width:100%;
  margin: 80px auto 0;
  padding: 30px;
  background: #F5F5EE;
  text-align: center;
  display: flex;
  flex-wrap: nowrap;
  justify-content:space-around;
}

@media screen and (max-width: 768px) {
  .rec_contact{
    margin: 40px auto 0;
    flex-wrap: wrap;
  }
}

.contactLink a {
  width: 460px;
  height: 80px;
  margin: 0 auto;
  padding: 25px 40px;
  font-size: 16px;
  position: relative;
  z-index: 1;
  background: #2694C5;
  display: block;
  color: #fff;
  text-decoration: none;
}

.contactLink a::before {
  content: '';
  width: 460px;
  height: 80px;
  border: 1px solid #51B8E6;
  display: block;
  position: absolute;
  top: -10px;
  margin: auto;
  z-index: 2;
  left: -10px;
  transform: rotate(1deg);
  transition: all 0.3s;
}

.onlinetLink a {
  width: 460px;
  height: 80px;
  margin: 0 auto;
  padding: 25px 40px;
  font-size: 16px;
  position: relative;
  z-index: 1;
  background: #fff;
  display: block;
  color: #1C8E98;
  text-decoration: none;
  border: 1px solid #1C8E98;
}

.onlinetLink a::before {
  content: '';
  width: 460px;
  height: 80px;
  border: 1px solid #2694C5;
  display: block;
  position: absolute;
  top: -10px;
  margin: auto;
  z-index: 2;
  left: -10px;
  transform: rotate(1deg);
  transition: all 0.3s;
}

.contactLink a:hover::before,
.onlinetLink a:hover::before{
  left: 0;
  top: 0;
}


@media screen and (max-width: 1200px) {
  .contactLink,
  .onlinetLink{
    width: 100%;
  }
  .contactLink a,
  .onlinetLink a{
    max-width: 420px;
    width: 80%;
    height: 60px;
    padding: 10px;
  }
  .contactLink a{
    margin-bottom: 40px;
  }
  .contactLink a::before,
  .onlinetLink a::before{
    max-width: 420px;
    width: 100%;
    height: 60px;
  }
}

.mB200{
  margin-bottom: 200px;
}

@media screen and (max-width: 768px) {
  .mB200{
    margin-bottom: 100px;
  }
}

table.mail_form{
  width: 100%;
}


/*---------------------------
STAFF
----------------------------*/

h2.h2_center{
  text-align: center;
  margin-bottom: 80px;
  font-size: 24px;
}

h2.h2_center span::after{
  content: '';
  display: block;
  margin: 0 auto;
  width: 90px;
  height: 2px;
  background: #2694C5;
}

h2.h2_center::before{
  content: none;
}

@media screen and (max-width: 768px){
  h2.h2_center{
    margin-bottom: 40px;
    font-size: 21px;
  }
}

.greeting{
  width: 100%;
  margin-bottom: 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid #262626;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (max-width: 768px){
  .greeting{
    margin-bottom: 40px;
    padding-bottom: 40px;
  }
}

.greeting__img{
  width: 440px;
}


.greeting__txt{
  width: 700px;
  line-height: 2;
}

@media screen and (max-width: 1200px){
  .greeting__img{
    width: 40%;
  }
  .greeting__img img{
    width: 100%;
    max-width: 430px;
    display: block;
    margin: 0 auto;
  }
  .greeting__txt{
    width: 55%;
  }
}

@media screen and (max-width: 768px){
  .greeting__img{
    width: 100%;
  }
  .greeting__img img{
    width: 60%;
  }
  .greeting__txt{
    width: 100%;
    margin-top: 40px;
  }
}

.greeting__txt span{
  font-weight: bold;
  color: #53AAD1;
}

.dr{
  width: 100%;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (max-width: 1200px){
  .dr{
    width: 100%;
    margin: 16px auto 0;
  }
}

@media screen and (max-width: 768px){
  .dr{
    width: 60%;
    margin: 16px auto 0;
  }
}

.dr_name{line-height: 1.2;}
.dr_name p{font-size: 28px;}
.dr_incho{}
.dr_en{
  font-size: 16px;
  color: #D1D1D1;
}
.dr ul{
  padding-left: 24px;
  border-left: 1px solid #2694C5;
  color: #2694C5;
}

@media screen and (max-width: 768px){
  .dr_name p{
    font-size: 18px;
  }
  .dr ul{
    margin-top: 20px;
    padding-left: 10px;
  }
}

.staff_2col{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media screen and (max-width: 768px){
  .staff_2col{
    width: 100%;
  }
}

h3.h3_staff{
  font-size: 18px;
  bordrer:none!important;
  padding-left: 0;
}

h3.h3_staff::before{
  content: none;
}

h3.h3_staff span{
  color: #fff;
  background: #2694C5;
  border-radius: 20px;
  padding: 0 16px;
}

table.history{
  width: 100%;
}

table.history th{
  width: 25%;
  color: #2694C5;
  padding-right: 20px; 
  font-weight: bold;
  padding: 5px 0;
}

table.history td{
  padding: 5px 0;
}

.staff_info:first-child{
  margin-bottom: 30px;
}

.staff_info{
  width: 45%;
}

@media screen and (max-width: 768px){
  .staff_info{
    width: 100%;
  }
}

.staff_info ul li{
  margin-bottom: 5px;
}