@charset "utf-8";
/* CSS Document */
/*====================
 - 1280px〜：大型PC
 - 960px〜1279px：小型PC
 - 600px〜959px：タブレット
 - 480px〜599px：スマートフォン横
 - 〜479px：スマートフォン縦
====================*/
/*---page-------------------------------------------------------*/
/*****固定ページ共通*****/

p a {
  color: #5A94CE;
  text-decoration: none;
  transition: all .2s;
}
p a:hover{
  opacity: 0.6;
}

.page section {
  padding: 16rem 0 0 0;
}
.container .text_area {
  margin: 4rem 0;
}
.container .text_inner {
  margin-bottom: 4rem;
}
@media screen and (max-width:768px) {
  .page section {
    padding: 12rem 0 0 0;
  }
}

/*** ページ見出し ***/
/* h1 */
.page_header {
  position: relative;
  padding-bottom: 0;
}
.page_header_wrap {
  display: block;
  justify-content: space-between;
  margin-top: 8rem;
}
.page_header .img_wrap {
  top: 8rem;
  right: 0;
  max-width: 1260px;
}
.page_header .img_wrap img {
  width: 100%;
  height: 440px;
  object-fit: cover;
}
.page_header h1 {
  position: relative;
}
.catch_line{
  position: absolute;
  top: 6.6rem;
  left: -1.2rem;
  z-index: -1;
}
.catch_line object{
  width: 32vw;
}
.page_header p {
  margin-top: 2.8rem;
}
@media screen and (min-width:1000px) {
  .page_header {
    position: relative;
    padding-top: 20rem;
  }
  .page_header_wrap {
    display: flex;
    justify-content: space-between;
  }
  .page_header .img_wrap {
    position: absolute;
    width: 66vw;
  }
  .page_header .img_wrap img {
    height: 522px;
    object-fit: cover;
    border-radius: 4rem 0 0 4rem;
  }
  .catch_line{
    top: 7.8rem;
    left: -1rem;
  }
  .catch_line object{
    width: 280px;
  }
}
@media screen and (max-width:549px) {
  .catch_line{
    position: absolute;
    left: -1rem;
  }
  .catch_line object{
    width: 200px;
  }
}
/* h1 h2 h3 */
.page_header h1 .black{
  font-size: clamp(4.8rem, 5.6vw, 6.8rem);
}
.page h2,.archive h2,.post-template-default h2,.single h2 {
  margin-bottom: 2.8rem;
  font-weight: 700;
  font-size: 2.4rem;
}
.page h2 .green,.archive h2 .green,.post-template-default h2 .green,.single h2 .green{
  color: #5BC974;
  font-size: 1.4rem;
  position: relative;
}
.page h2 .black,.archive h2 .black,.post-template-default h2 .black,.single h2 .black{
  font-size: clamp(2.8rem, 5.6vw, 3.6rem);
  line-height: 1.4;
  color: #282828;
}
.page h3 {
  font-size: 2rem;
  font-weight: 600;
  margin-top: 4rem
}
/*** パンくずリスト ***/
.breadcrumbs {
  font-size: 1.4rem;
  margin-top: 20rem;
}
.news_header .breadcrumbs,.noimg_header .breadcrumbs{
  margin-top: 4rem;
}
.breadcrumbs a {
  color: #5A94CE;
  text-decoration: none;
  transition: all .2s;
}
.breadcrumbs a:hover{
  opacity: 0.6;
}
.no_img .breadcrumbs{
  margin-top: 8rem;
}
@media screen and (max-width:999px) {
  .breadcrumbs {
    margin-top: 8rem;
  }
}
/*** ul ***/
ul.text_list {
  margin: 2rem 0;
}
ul.text_list li {
  margin-left: 2rem;
}
ul.text_list li::before {
  content: '';
  display: inline-block;
  position: relative;
  left: -0.8rem;
  top: -0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: -0.6rem;
  background: #5BC974;
  border-radius: 50%;
}
/*** dl ***/
.outline dl,.guideline dl{
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  margin: 1rem auto;
}
.outline dt, .outline dd,.guideline dt, .guideline dd {
  padding: 24px 0 16px;
}
.outline dt,.guideline dt{
  flex-basis: 28%;
  font-weight: 700;
  border-bottom: 1px solid #666;
}
.outline dd,.guideline dd{
  flex-basis: 72%;
  margin: 0;
  border-bottom: 1px solid #BAC3CC;
}
@media screen and (max-width: 768px) {
  .outline dl,.guideline dl{
    flex-flow: column;
  }
  .outline dt,.guideline dt {
    border-bottom: none;
    font-weight: bold;
    padding-bottom: 0;
  }
  .outline dd,.guideline dd{
    padding-top: 16px;
  }
}
@media screen and (min-width: 769px) {
  .outline dd,.guideline dd{
    padding-left: 2rem;
  }
}

/***** Service *****/
.page .service_category_list section {
  padding: 8rem 0 0 0;
}

@media screen and (max-width:768px) {
  .page .service_category_list section {
    padding: 6rem 0 0 0;
  }
}
.service_category_list h3{
  color: #5BC974;
  font-size: 2.8rem;
  position: relative;
  margin-top: 0;
  margin-bottom: 2.4rem;
}
.service_category_list h3 .number{
  color: #fefefe;
  font-weight: normal;
  margin-right: 1.4rem;
  padding: 0 15px;
  line-height: 1.9;
}
.service_category_list h3 .number::before{
  content: '';
  position: absolute;
  width: 61px;
  height: 61px;
  top: -5px;
  left: 0;
  background-image: linear-gradient(135deg, rgba(130, 211, 217, 1), rgba(91, 201, 116, 1));
  border-radius: 50%;
  z-index: -1;
}
.service_category_list h3 .number::after {
  content: "";
  width: 55px;
  height: 55px;
  position: absolute;
  border: 1px solid #fefefe;
  border-radius: 50%;
  top: -2px;
  left: 3px;
}
.service_category_list img{
  border-radius: 4rem;
  width: 100%;
}
@media screen and (min-width:900px) {
  .service_category_list{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		gap: 0 4vw;
	}
}

/*** Company ***/
.ceo_img {
  margin-bottom: 4rem;
}
.ceo_img .img_wrap {
  max-width: 400px;
}
.ceo {
  text-align: right;
  font-size: 1.8rem;
  margin-top: 1rem;
}
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  margin: 1.6rem 0;
}
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*** RECRUIT ***/
.guideline .text_area{
  margin: 0 0 10rem 0;
}
@media screen and (max-width:999px) {
  .recruit_contact .btn{
    margin-top: 4rem;
  }
  .guideline .text_area{
    margin-top: 0;
  }
}
@media screen and (min-width:1000px) {
	.recruit_contact .btn_area{
		display: flex;
		justify-content: space-between;
		align-items:flex-start;
	}
	.recruit_contact .btn_area .btn_wrap{
		margin-top: 0;
	}
	.recruit_contact .btn_area .btn{
		width: 36vw;
		max-width: 600px;
	}
}

/***** CONTACT *****/
.contact_intro {
  padding: 4rem 1.6rem;
  text-align: center;
}
.contact .tel {
  margin-right: .6rem;
}
.contact .tel_number span {
  font-size: 3.6rem;
  margin-left: 0.4rem;
}
/*** Contact Form7 ***/
.contact7 {
  max-width: 100%;
  box-sizing: border-box;
  padding: 1.6rem;
  border-top: 1px solid #bbb;
}
.contact7 dl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4rem;
}
.contact7 dl, .contact7 dl dt, .contact7 dl dd {
  border: #fefefe;
}
.contact7 dl dt {
  display: flex;
  justify-content: space-between;
  flex-basis: 32%;
  font-weight: normal;
}
.contact7 dl dd {
  width: 630px;
  flex-basis: 68%;
}
.contact7 dl dd select, .contact7 dl dd textarea, .contact7 dl dd input {
  width: 100%;
  height: 100%;
  padding: 2rem 1.6rem;
  border: #bbb 1px solid !important;
  border-radius: .4rem;
}
/* 必須マーク */
.contact7 .must {
  background: #F1686D;
}
/* 任意マーク */
.contact7 .optional {
  background: #999;
}
.contact7 .must, .contact7 .optional {
  color: #FFF;
  font-size: 10px;
  margin-left: 10px;
  padding: 5px 10px;
  letter-spacing: 2px;
}
/* CF7 特定のチェックボックスとラジオボタンを縦並びに */
.checkbox span.wpcf7-list-item {
  display: block;
}
span.wpcf7-list-item {
  position: relative;
  margin-left: .4rem;
}
.wpcf7-list-item-label {
  cursor: pointer; /*labelにhoverした時にカーソルを表示させる*/
}
label input[type="checkbox"] {
  opacity: 0; /*デフォルトのチェックボックスを見えなくする*/
  position: absolute;
  cursor: pointer;
}
.wpcf7-list-item-label::before {
  /*チェックボックスのデザイン*/
  border: 1px solid #bbb;
  content: "";
  display: inline-block;
  height: 15px;
  margin-right: 10px;
  position: relative;
  top: -1px;
  vertical-align: middle;
  width: 15px;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  /*チェックアイコン*/
  background: url('../img/ok.svg') no-repeat center;
  background-size: contain;
  background-color: #5BC974;
  content: "";
  display: block;
  height: 15px;
  left: 0;
  position: absolute;
  top: 7px;
  width: 15px;
}
.check {
  display: block;
  margin: 6rem auto 4rem;
}
.btn_contact7 {
  width: 100%;
  position: relative;
  transition: all .2s ease-out;
}
.btn_contact7 input {
  width: 100%;
  padding: 2rem;
  background: #5BC974;
  color: #fefefe;
  border-radius: 6rem;
  font-size: 1.4em;
  font-weight: 500;
  text-align: center;
  transition: all .2s ease-out;
}
.btn_contact7 input:hover {
  opacity: 0.6;
}
@media screen and (max-width: 979px) {
  .contact7 dl {
    display: block;
  }
  .contact7 dl dt {
    justify-content: flex-start;
    flex-basis: auto;
  }
  .contact7 dl dd {
    flex-basis: auto;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}
/*** NotFound ***/
.notfound section {
  margin-top: 6rem;
}