@charset "utf-8";
* {
  box-sizing: border-box;
  scroll-behavior: smooth;
  list-style: none;
}

/*CSSリセット*/
body {
  margin: 0;
  font-family: "YuGothic", "Yu Gothic";
}

/* main {
    padding-top: 50px;
}



@media screen and (min-width: 550px) {
    main {
        padding-top: 60px;
    }
} */

/* ボタンリセット */

*:focus {
  outline: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

/*文字サイズ*/

p {
  font-size: 16px;
  margin: 0;
}

/******
ヘッダー
******/
header .company_name_area {
  width: 100%;
  /* position: fixed; */
  z-index: 100;
  background-color: #fff;
  top: 0;
}

@media only screen and (min-width: 900px) {
  header .company_name_area {
    height: 90px;
  }
}

header .company_name_area .header_logo {
  height: 48px;
  width: auto;
  vertical-align: bottom;
  margin: 6px;
}

.company_name_area .button_area .nav_button .bar {
  background-color: #2e75b6;
  height: 3px;
  width: 40px;
  margin: 14px 10px 4px;
  display: block;
}

header .company_name_area .company_name {
  display: inline-block;
  font-size: 30px;
  width: 45%;
  font-weight: bold;
}

.company_name_area .button_area {
  position: absolute;
  right: 0;
  top: 0px;
  bottom: 0px;
}

@media screen and (max-width: 380px) {
  header .company_name_area .header_logo {
    height: 40px;
    margin: 3px 0 5px;
  }

  .company_name_area .button_area .nav_button {
    width: 0;
  }

  .company_name_area .button_area .nav_button .bar {
    height: 3px;
    width: 30px;
    margin: 10px  ;
  }
}

@media screen and (max-width: 900px) {
  .company_name_area .header_logo {
    width: 20%;
    padding: 5px 0 5px 8px
  }
}

@media only screen and (min-width: 900px) {
  header .company_name_area .header_logo {
    height: 50px;
    margin: 20px 0;
  }
}

@media screen and (min-width: 1200px) {
  .company_name_area .header_logo {
    padding-left: 80px;
  }
}

@media only screen and (min-width: 550px) {
  .company_name_area .button_area {
    width: 185px;
  }
}

@media only screen and (min-width: 900px) {
  .company_name_area .button_area {
    width: 125px;
  }
}

.company_name_area .button_area .recruit_button {
  display: inline-block;
  width: 49%;
  background-color: #2e75b6;
  text-align: center;
  height: 60px;
  vertical-align: top;
  padding: 0;
}

.company_name_area .button_area .recruit_button .title {
  display: none;
}

.company_name_area .button_area .recruit_button br {
  line-height: initial;
}

.company_name_area .button_area .recruit_button a {
  width: 60px;
  height: 60px;
  font-size: 22px;
  color: #fff;
  line-height: 30px;
  text-decoration: none;
  display: block;
}

@media only screen and (max-width: 550px) {
  .company_name_area .button_area .recruit_button {
    display: none;
  }
}

@media only screen and (max-width: 900px) {
  .company_name_area .button_area .recruit_button {
    width: 125px;
  }

  .company_name_area .button_area .recruit_button a {
    width: 125px;
    font-weight: bold;
    line-height: 60px;
    font-size: 0;
  }

  .company_name_area .button_area .recruit_button a:before {
    font-size: 20px;
    content: '採 用';
  }
}

@media only screen and (min-width: 900px) {
  .company_name_area .button_area .recruit_button {
    width: 125px;
    height: 90px;
  }

  .company_name_area .button_area .recruit_button a {
    width: 125px;
    height: 90px;
    font-weight: bold;
    line-height: 90px;
  }
}

.company_name_area .button_area .nav_button {
  width: 46%;
  display: inline-block;
  vertical-align: middle;
}

@media only screen and (min-width: px) {
  .company_name_area .button_area .nav_button .bar_area {
    margin: 16px 0 0 4px;
  }
}

@media only screen and (min-width: 550px) {
  .company_name_area .button_area .nav_button {
    width: 60px;
    height: 60px;
  }
}

@media screen and (max-width: 380px) {
  .company_name_area .button_area .recruit_button {
    height: 45px;
    width: 45px;
    padding: 0;
    /* vertical-align: top; */
  }

  .company_name_area .button_area .recruit_button a {
    display: block;
    height: 45px;
    width: 45px;
    line-height: 22px;
    font-size: 16px;
    margin: 0;
  }

  .company_name_area .button_area .nav_button {
    width: 39%;
    display: inline-block;
  }
}

@media screen and (min-width: 900px) {
  .company_name_area .button_area .recruit_button .title {
    display: inline;
  }

  .company_name_area .button_area .recruit_button {
    display: block;
    width: 100%;
    /* height: 100px; */
    font-weight: bold;
  }

  .company_name_area .button_area .recruit_button a {
    margin: auto 0;
    width: 125px;
    font-size: 20px;
    line-height: 1.1;
    padding-top: 32px;
    transition: all 0.3s;
    /* height: 100px; */
    /* line-height: 100px; */
  }

  .company_name_area .button_area .recruit_button a .subtitle {
    font-size: 12px;
  }

  .company_name_area .button_area .recruit_button a:hover {
    background-color: #0090ff;
  }

  .company_name_area .button_area .nav_button {
    display: none;
  }
}

@media screen and (min-width: 1100px) {
  .company_name_area .button_area .recruit_button a {
    font-size: 20px;
  }

  .company_name_area .button_area .recruit_button a .subtitle {
    font-size: 14px;
  }
}

/* パソコン用ナビゲーションメニュー */
header .company_name_area .nav_menu {
  display: none;
}

@media screen and (min-width: 900px) {
  header .company_name_area .nav_menu {
    display: inline-block;
  }

  header .company_name_area .nav_menu {
    display: inline-block;
    width: 500px;
    position: absolute;
    top: 10px;
    right: 125px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
  }

  header .company_name_area .nav_menu li {
    display: inline-block;
    width: 95px;
    text-align: center;
  }

  header .company_name_area .nav_menu li a {
    
    width: 95px;
    font-weight: bold;
    text-decoration: none;
    font-size: 18px;
    color: black;
    display: inline-block;
    line-height: 1.1;
    transition: all 0.3s;
  }

  .company_name_area .nav_menu li a .subtitle {
    font-size: 12px;
    display: inline-block;
    opacity: 0;
    transition: all 0.3s;
  }

  .company_name_area .recruit_button a .subtitle {
    opacity: 0;
  }

  .company_name_area .nav_menu a:hover {
    color: #0090ff;
  }

  .company_name_area .recruit_button a:hover .subtitle {
    opacity: 1;
    color: white;
  }

  .company_name_area .nav_menu a:hover .subtitle {
    opacity: 1;
    color: #0090ff;
  }
}

@media screen and (min-width: 900px) {
  header .company_name_area .nav_menu {
    width: 500px;
  }

  header .company_name_area .nav_menu li {
    margin: 0 10px;
  }

  header .company_name_area .nav_menu li a {
    font-size: 20px;
  }

  .company_name_area .nav_menu li a .subtitle {
    font-size: 14px;
  }
}

/*フッター*/

.footer_img {
  background-image: url(blueback5.jpg);
  width: 100%;
  height: 90%;
  fit: cover;
  background-position: center;
}

.footer_img .text_area {
  padding: 10%;
  margin: auto;
  width: 100%;
  color: #fff;
  text-shadow: 1px 1px #444;
  text-align: center;
}

.footer_img .text_area button {
  display: block;
  margin: auto;
}

.footer_img .text_area .title {
  font-size: 30px;
}

.footer_img .text_area .button_area button a {
  color: #fff;
  text-decoration: none;
}

@media screen and (min-width: 550px) {
  .footer_img .text_area {
    padding: 10% 15%;
  }

  .footer_img .text_area button {
    margin: 30px auto 0;
  }
}

@media screen and (min-width: 769px) {
  .footer_img .text_area {
    padding: 10%;
  }

  .footer_img .text_area .title {
    font-size: 48px;
  }

  .footer_img .text_area p br {
    display: none;
  }
}

@media screen and (min-width: 1090px) {
  .footer_img .text_area {
    padding: 109px;
    width: 900px;
  }
}

.footer_top {
  padding-top: 30px;
  padding-bottom: 30px;
}

.footer_top .ask_area {
  text-align: center;
  background-color: #fff;
}

.footer_top .ask_area .ask_title {
  font-size: 22px;
  color: #2e75b6;
  font-weight: 900;
}

.footer_top .info_area {
  width: 70%;
  margin: auto;
  padding: 1em 0;
}

.footer_top .info_area .button_area {
  display: block;
  width: 100%;
  text-align: center;
}

.footer_top .info_area .tel_area {
  display: block;
  width: 100%;
  text-align: center;
  padding-top: 20px;
}

.footer_top .info_area .tel_area .text {
  font-size: 25px;
  font-weight: 900;
  line-height: 100%;
  margin-top: 8px;
}

.footer_top .info_area .tel_area .tell {
  color: #000;
  text-decoration: none;
}

.footer_top .info_area .tel_area .small {
  font-size: 12px;
}

.footer_top .info_area .button_area button a {
  color: #fff;
  text-decoration: none;
}

@media screen and (min-width: 550px) {
  .footer_top .ask_area .ask_title {
    font-size: 30px;
  }
}

@media screen and (min-width: 769px) {
  .footer_top .info_area {
    height: 130px;
  }
  .footer_top .info_area .button_area {
    display: inline-block;
    width: 50%;
    float: right;
  }

  .footer_top .info_area .tel_area {
    display: inline-block;
    width: 49%;
    text-align: center;
    padding-top: 0px;
  }
}

@media screen and (min-width: 900px) {
  .footer_top .info_area {
    max-width: 870px;
  }
}

.footer_middle {
  background-color: #deebf7;
  padding: 1em;
  text-align: center;
}

.footer_middle .company_name a {
  font-size: 24px;
  font-weight: 900;
  color: #2e75b6;
  text-decoration: none;
}

.footer_middle .company_name ::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin: 0px 1px 0 0;
  vertical-align: text-top;
  background: url(company_logo.png) no-repeat;
  background-size: contain;
}

@media screen and (min-width: 340px) {
  .footer_middle .text br {
    display: none;
  }
}

.footer_middle .text {
  color: #2e75b6;
  padding-bottom: 16px;
}

.footer_middle ul {
  display: block;
  width: 90%;
  margin: auto;
  padding: 0px;
}

.footer_middle .footer_button {
  display: inline-block;
  margin: 8px;
}

.footer_middle .footer_button a {
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  display: inline-block;
  line-height: 100%;
}

.footer_middle .footer_button span {
  font-size: 16px;
  display: block;
  text-align: center;
}

.footer_middle .footer_button .eng_text {
  font-size: 13px;
}

@media screen and (min-width: 900px) {
  .footer_middle .footer_button {
    padding: 0 2%;
  }
}

@media screen and (min-width: 1600px) {
  .footer_middle .footer_button {
    padding: 0 28px;
  }
}

.footer_botom {
  height: auto;
  background-color: #2e75b6;
  text-align: center;
  padding: 4px auto;
}

.footer_botom .text {
  font-size: 16px;
  color: #fff;
  line-height: 1.5;
}

/************
グローバルナビ
*************/
.global_nav {
  display: block;
}

.global_nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.global_nav .nav_content {
  background-color: rgba(255, 255, 255, 0.95);
  height: 100%;
  border-right: solid 2px #c2c2c2;
  top: 0px;
  right: -70%;
  position: fixed;
  transition: right 0.7s;
  width: 70%;
  z-index: 999;
}

.link_btn {
  display: block;
  background: #2e75b6 url(../ico_arw.png) no-repeat 95% center;
  border: solid 1px #2e75b6;
  background-size: 23px auto;
  color: #fff;
  padding: 12px 32px;
  font-weight: bold;
  width: 220px;
  box-sizing: border-box;
  display: block;
  margin: 2em auto;
  text-align: center;
  text-decoration: none;
  transition: all .5s;
}

.link_btn:hover {
  background: white;
  color: #2e75b6;
}

/* グローバルナビ触るときつかう */
/* .global_nav .nav_content {
    background-color: #fff;
    border-right: solid 2px #444;
    position: fixed;
    width: 70%;
} */

.global_nav.active .nav_content {
  right: 0;
}

.global_nav.active .back {
  background-color: rgba(0, 0, 0, 0.6);
  display: block;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 998;
}

.global_nav .back {
  display: none;
}

.global_nav .nav_content .info_area {
  text-align: center;
}

.global_nav .info_area img {
  width: 8%;
  margin: 4px;
  vertical-align: bottom;
}

.global_nav .nav_content .info_area p {
  font-size: 16px;
  line-height: 100%;
  margin: 5px;
}

.global_nav .nav_content .info_area .text_area p {
  display: inline;
  margin: 0 18px;
}

.global_nav .nav_content .button_area {
  text-align: right;
  width: 100%;
}

.global_nav .nav_content .close {
  display: block;
  background: #fff;
  border: none;
  width: 13%;
  margin: 5px 5px 5px auto;
  padding: 0px;
}

.global_nav .nav_content .close img {
  width: 100%;
}

.global_nav .nav_content a span {
  display: block;
  font-size: 18px;
}

.global_nav .nav_content .global_nav_tel {
  text-align: center;
  font-size: 30px;
  text-decoration: none;
  color: #0090ff;
  line-height: 100%;
}

.global_nav .nav_content span,
.global_nav .nav_content p {
  display: block;
  color: #0090ff;
  font-size: 18px;
  line-height: 100%;
}

.global_nav .nav_content .list li a {
  display: block;
  color: #000;
  font-size: 20px;
  font-weight: bold;
  border-bottom: solid 1px #c2c2c2;
  text-decoration: none;
  padding: 2em 0 8px;
  margin-left: 8px;
}

/************
見出し
*************/

/* 見出し1 */

.page_title .page_eng_title {
  color: #fff;
  display: block;
  font-size: 55px;
  line-height: 100%;
  text-shadow: 1px 1px #444;
}

.page_title .page_jpn_title {
  display: block;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  line-height: 100%;
  text-shadow: 1px 1px #444;
}

/* 見出し2 */

.eng_title {
  color: #deebf7;
  font-weight: bold;
  line-height: 100%;
  width: 100%;
  margin: auto;
  font-size: 36px;
  display: block;
}

.jpn_title {
  font-size: 25px;
  font-weight: bold;
  color: #2e75b6;
  width: 100%;
  line-height: 100%;
  display: block;
  margin: 0%;
}

/* 見出し3 */

h3 {
  color: #2e75b6;
  font-size: 18px;
  margin: 5% auto 0;
}

@media screen and (min-width: 550px) {
  h3 {
    font-size: 22px;
  }
}

@media screen and (min-width: 769px) {
  h3 {
    font-size: 22px;
  }
}

.box_area {
  background-color: #deebf7;
  position: absolute;
  z-index: -1;
}

.center_title_area {
  text-align: center;
}

/* ページ内ナビ */
.page_title_area .nav_area {
    background-color: #2e75b6;
}

.page_title_area .nav_list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
}
  
.page_title_area .nav_list .triangle {
    display: block;
    margin: 8px auto 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 12px;
    border-color: #ffffff transparent transparent transparent;
}
  
@media only screen and (min-width:550px) {
    .page_title_area .nav_list {
      width: 500px;
      margin: 0 auto;
    }
}

.page_title_area .nav_list li {
    width: 50%;
    margin: 0.5em 0;
}
  
@media only screen and (min-width:769px) {
    .page_title_area .nav_list {
      width: 100%;
    }
  
    .page_title_area .nav_list li {
      width: 25%;
    }
}
  
@media only screen and (min-width:900px) {
    .page_title_area .nav_list {
      width: 900px;
    }
}

.page_title_area .nav_list li a {
    display: block;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    width: 90%;
    color: white;
    border: 2px solid white;
    margin: 0 auto;
    padding: 4px 0;
    transition: all .2s;
}
  
.page_title_area .nav_list li a:hover {
    background-color: white;
    color: #2e75b2;
}

/************
表
*************/

.basic_table {
  width: 90%;
  margin: auto;
}

.basic_table th {
  width: 30%;
}

.basic_table th,
.basic_table td {
  border: none;
  border-bottom: 1px solid #cccccc;
}

/************
ボタン
*************/

.button2 {
  background-color: transparent;
  background-image: none;
  border: 2px solid #2e75b6;
  color: #2e75b6;
  font-family: "YuGothic", "Yu Gothic";
  width: 170px;
  padding: 8px 32px;
}

.button2:hover {
  background: #2e75b6;
  color: #fff;
}

button {
  background-size: 23px auto;
  color: #fff;
  padding: 12px 32px;
  font-weight: bold;
  width: 220px;
  display: block;
  margin: 2em auto;
}

/************
ページ内ナビ
*************/

.page_nav {
  display: block;
  background-color: #2e75b6;
}

.page_nav .nav_innner {
  width: 100%;
}

.page_nav .nav_innner .jump_button {
  display: inline-block;
  border: 2px solid #fff;
  width: 44%;
  margin: 8px;
  text-align: center;
  max-width: 211px;
}

.page_nav .nav_innner .jump_button a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* ファーストビュー */

.page_title_area .title.work {
  background-image: url(work_fv2.jpg);
  background-size: cover;
  background-repeat: no-repeat, no-repeat;
  background-position: 0%;
}

.page_title_area .title.result_other {
  background-image: url(result_first.jpg);
  background-size: 120%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0%;
}

@media screen and (min-width: 768px) {
  .page_title_area .title.recruit {
    background-image: url(  );
    background-size: 120%;
    background-repeat: no-repeat, no-repeat;
    background-position: 0%;
  }
}

.page_title_area .title.recruit {
  background-image: url(re-fv1.jpg);
  background-size: 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0% 65%;
}

.page_title_area .title.about_us {
  background-image: url(top_company.jpg);
  background-size: 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0% 50%;
}

/* .page_title_area .page_title {
    padding: 15% 0px;
    width: 80%;
    margin: auto;
    max-width: 430px;
}

@media screen and (min-width: 768px) {
    .page_title_area .page_title {
        width: 80%;
        max-width: 770px;  
    }
}

@media screen and (min-width: 1500px) {
    .page_title_area .page_title {
        width: 80%;
        max-width: 900px;
    }
}

@media screen and (max-width: 768px) {
    .page_title_area .page_title {
        padding: 150px 0px;
    }

    .page_title_area .title {
        background-size: 165%;
    }
}

.page_title_area .text_area {
    width: 80%;
    margin: auto;
    margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
    .page_title_area .text_area {
        width: 80%;
        max-width: 430px;
    }
}

@media screen and (min-width: 1100px) {
    .page_title_area .text_area {
        width: 770px;
    }
}

.page_title_area .text_area p {
    font-size: 16px;
} */

/* fumiya */
.page_title_area .page_title {
  padding: 25% 0px 5% 0;
  width: 90%;
  margin: auto;
  max-width: 430px;
}

@media screen and (min-width: 769px) {
  .page_title_area .page_title {
    width: 80%;
    max-width: 770px;
    padding: 0;
  }
}

@media screen and (min-width: 1500px) {
  .page_title_area .page_title {
    width: 80%;
    max-width: 900px;
  }
}

@media screen and (max-width: 768px) {
  /* .page_title_area .page_title {
        padding: 150px 0px;
    } */

  .page_title_area .title {
    background-size: 165%;
  }
}

/* .page_title_area .text_area {
    width: 70%;
    margin: auto;
} */

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

/* @media screen and (min-width: 1100px) {
    .page_title_area .text_area {
        width: 770px;
    }
} */
/* fumiya */

/* 業務紹介ページ */

/* ファーストビュー */
.page_title_area .page_title {
  padding: 50px 0px;
}

@media screen and (min-width: 550px) {
  .page_title_area .page_title {
    padding: 100px 0px;
  }

  .page_title .page_eng_title {
    font-size: 75px;
  }

  .page_title .page_jpn_title {
    font-size: 35px;
  }
}

@media screen and (min-width: 769px) {
  .page_title_area .page_title {
    padding: 130px 0px;
  }
}

@media screen and (min-width: 900px) {
  .page_title_area .page_title {
    padding: 200px 0px;
  }
}

/* コンテンツ */

.content .description {
  display: block;
  margin: auto;
  position: relative;
  text-align: center;
  padding-bottom: 4em;
}

.work_contents {
  margin-top: 2em;
}

.works_content .first_title_text_area .title {
  text-align: center;
  font-weight: bold;
  color: #2e75b6;
}

.works_content .first_title_text_area .first_text_area {
  width: 80%;
  margin: auto;
  max-width: 500px;
  margin-bottom: 6em;
  margin-top: 16px;
}

@media screen and (min-width: 769px) {
  .works_content .first_title_text_area .first_text_area {
    max-width: 850px;
  }
}

.works_content .title_text_area {
  width: 80%;
  margin: auto;
  max-width: 500px;
}

@media screen and (min-width: 769px) {
  .content .description {
    width: 80%;
    overflow: auto;
    padding-bottom: 12em;
  }
}

@media screen and (min-width: 1100px) {
  .content .description {
    width: 850px;
  }
}

@media screen and (min-width: 1500px) {
  .content .description {
    width: 1000px;
  }
}

@media screen and (min-width: 2000px) {
  .content .description {
    width: 1500px;
  }
}

.works_contents {
  margin-top: 2em;
}

.works_content .eng_title {
  color: #8ec9ff;
}

/* PCスマホレイアウトのとき、色が変わる */
@media screen and (min-width: 769px) {
  .works_content .eng_title {
    color: #deebf7;
  }
}

.content .description .title {
  text-align: left;
  width: 80%;
  margin: auto;
}

.content .description .title .eng_title {
  display: block;
  font-size: 36px;
  max-width: 500px;
}


.content .description .title .jpn_title {
  display: block;
  margin: auto;
  max-width: 500px;
}

.content .description .text_area {
  width: 80%;
  margin: auto;
  font-size: 16px;
  max-width: 500px;
  text-align: left;
}

.content .description img {
  width: 80%;
  max-width: 500px;
  margin: auto;
}

.content .box_area {
  width: 70vw;
  height: 70vw;
  top: 120px;
}

.content .right {
  right: 0;
}

.content .description .text_area p {
  font-size: 16px;
}


@media screen and (min-width: 550px) {
  .content .box_area {
    height: 50vw;
    top: 120px;
  }
}

@media screen and (min-width: 769px) {
  .content .description .title {
    width: 48.5%;
    margin-left: 0px;
  }

  .content .description .title.right_title {
    float: right;
  }

  .content .description .text_area {
    width: 48.5%;
    margin-left: 0px;
  }

  .content .description img {
    padding-top: 10%;
    margin-right: 0px;
    float: left;
    max-width: 430px;
  }

  .content .description .right_img {
    float: right;
  }

  .content .box_area {
    height: 28vw;
  }

  .content .description .text_area.right_text {
    float: right;
  }
}

@media screen and (min-width: 1100px) {
  .content .description .title,
  .content .description .text_area {
    width: 340px;
  }

  .content .description img {
    width: 600px;
  }

  .content .box_area {
    height: 260px;
  }
}

/* フェードアップのアニメーション */

.fadeInUp {
  opacity: 0;
  transform: translateY(50px);
}

.animated {
  opacity: 1;
  transform: translateY(0px);
  transition-property: opacity, transform;
  transition-delay: 300ms;
  transition-duration: 700ms;
  transition-timing-function: linear;
}

/* 採用ページ */
.recruit_content .page_title .page_jpn_title,
.recruit_content .page_title .page_eng_title {
  text-align: left;
}

/* インタビューアーティクル */

.interview_area {
  text-align: center;
  margin-top: 80px;
  position: relative;
}

.interview_article .box_area {
  width: 90%;
  height: 90%;
  right: 0;
  top: 10%;
}

@media screen and (min-width: 900px) {
  .interview_article .box_area {
    height: 50%;
    top: 30%;
    left: calc((100% - 870px) / 2 + 95px);
    width: auto;
  }
}

.interview_article .interview_articlebox {
  width: 100%;
  margin-bottom: 50px;
}

.interview_articlebox img {
  width: 90%;
}

@media only screen and (min-width: 550px) {
  .interview_articlebox img {
    width: 60%;
  }
}

@media only screen and (min-width: 900px) {
  .interview_articlebox img {
    width: 90%;
  }
}

@media screen and (min-width: 900px) {
  .interview_area_inner {
    max-width: 870px;
    margin: auto;
  }
  .interview_article {
    display: flex;
    justify-content: space-between;
  }
  .interview_articlebox img {
    width: 100%;
  }

  .interview_article .interview_articlebox {
    width: 32%;
    display: inline-block;
  }
}

.interview_articlebox .text_area {
  margin: 8px;
} 

@media screen and (min-width: 900px) {
  .interview_articlebox .text_area.terasawa {
  margin-top: 14%;
  }
}

.interview_articlebox .text_area .title {
  font-size: 20px;
  font-weight: bold;
  padding: 8px;
}

/* 会社概要 */

@media screen and (min-width: 1100px) {
  .content .box_area.work,
  .content .box_area.right.woek {
    top: 50px;
  }
}

@media screen and (min-width: 900px) {
  .content .box_area.work,
  .content .box_area.right.work {
    top: 46px;
  }
}

@media screen and (min-width: 769px) {
  .content .box_area.work,
  .content .box_area.right.work {
    top: 35px;
  }
}

/* インタビュー */

/* インタビューファーストビュー */

.miyazaki_content .page_title_area .title.interview_miyazaki {
  background-image: url(first_view_miyazaki.jpg);
  background-size: 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0% 9%;
}

.title.interview_miyazaki .page_title {
  padding: 15% 0px 15% 20%;
  width: 70%;
  margin: auto;
}

.shimada_content .page_title_area .title.interview_shimada {
  background-image: url(first_view_shimada1.jpg);
  background-size: 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0% 9%;
}

.title.interview_shimada .page_title {
  padding: 18% 20% 12% 0;
  width: 100%;
  margin-right: 500px;
}

.terasawa_content .page_title_area .title.interview_terasawa {
  background-image: url(terasawa.jpg);
  background-size: 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0% 9%;
}

.title.interview_terasawa .page_title {
  padding: 15% 0px 15% 20%;
  width: 70%;
  margin: auto;
  white-space: nowrap;
}

.title .page_title .interview_title {
  font-size: 1em;
  text-align: center;
  font-weight: bold;
}

@media screen and (min-width: 550px) {
  .title .page_title .interview_title {
    font-size: 32px;
  }
}

.title .page_title .interview_text.pc {
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  margin: 8px 0 0 0;
}

@media screen and (max-width: 769px) {
  .title .page_title .interview_text.pc {
    display: none;
  }
}

.interview_content .interview_text.smartphone {
  font-size: 14px;
  text-align: center;
  margin: 8px;
}

@media screen and (min-width: 600px) {
  .interview_content .interview_text.smartphone {
    font-size: 16px;
  }
}

@media screen and (min-width: 770px) {
  .interview_content .interview_text.smartphone {
    display: none;
  }
}

.interview_content {
  width: 95%;
  margin: auto;
}

.interview_content img {
  width: 100%;
  margin: auto;
  display: block;
  max-width: 870px;
}

@media screen and (min-width: 570px) {
  .interview_content {
    width: 80%;
  }
}

@media screen and (min-width: 769px) {
  .interview_content {
    width: 80%;
  }
}

@media screen and (min-width: 900px) {
  .interview_content {
    width: 870px;
  }

  .interview_content img {
    width: 100%;
    margin: 60px auto;
    display: block;
    max-width: 870px;
    height: 412px;
    object-fit: cover;
    object-position: 50% 22%;
  }
}

@media screen and (min-width: 1200px) {
  .title.interview_miyazaki .page_title {
    padding: 15% 0px 6% 20%;
    width: 70%;
    margin: auto;
  }

  .title .page_title .interview_title {
    font-size: 48px;
  }

  .title .page_title .interview_text.pc {
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    margin: 8px 0 0 0;
  }
}




/********** お問い合わせ *************/

.entry_f .center_title_area {
  margin: 5% auto;
}


@media screen and (max-width: 900px) {
  .entry_f .center_title_area {
    margin-top: 10%;
  }
}

@media screen and (max-width: 615px) {
  .entry_f .center_title_area {
    margin-top: 15%;
  }
}

@media screen and (max-width: 615px) {
  .entry_f .center_title_area {
    margin-top: 20%;
  }
}

.entry_f .parts_section_title {
  margin-top: 0;
}

.required_mark {
  color: red;
}

.about_privacy {
  max-width: 600px;
  width: 65%;
  margin: auto;
}

.about_privacy .privacy {
  margin: 5% auto;
}

.form_list {
  width: 65%;
  margin: auto;
}

.form_list div {
  width: 100%;
  padding: 15px 0;
  display: table;
}

.form_list dt {
  display: inline-block;
  width: 28%;
  text-align: end;
  vertical-align: middle;
  font-size: 16px;
  white-space: nowrap;
}

.form_list dt p {
  margin: 0;
}

.form_list dd {
  display: inline-block;
  width: 70%;
  margin-left: 8px;
  vertical-align: middle;
}

@media screen and (max-width: 615px) {
  .form_list dd {
    width: 100%;
  }

  .form_group dt {
    padding-left: 1.5%;
    text-align: left;
  }
}

.form_list dd input {
  width: 100%;
  height: 32px;
}

.form_list textarea {
  width: 100%;
  box-sizing: border-box;
  height: 200px;
}

.interview_content {
  margin: 5% auto;
}

.entry_form {
  max-width: 600px;
  width: 65%;
  margin: auto;
}

.entry_form h1 {
  text-align: center;
}

.entry_form p {
  text-align: center;
  font-weight: bold;
}

.entry_form dt {
  color: #2e75b6;
  font-size: 20px;
  font-weight: bold;
  padding: 2%;
}

.entry_form dd {
  font-weight: bold;
}

.error_message ul{
  color: red;
}