@charset "UTF-8";
/* ---------------------------------------- 
 - html
---------------------------------------- */
html,
body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
@media screen and (max-width: 320px) {
  html {
    font-size: 52.5%;
  }
}

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

/* ---------------------------------------- 
 - img
---------------------------------------- */
img {
  width: 100%;
}

/* ホバー */
a,
a::after {
  transition: all 0.4s ease-in-out;
}

.sp_only {
  display: none;
}

.pc_only {
  display: block;
}

span.pc_only {
  display: inline-block;
}

.tb_only {
  display: none;
}

.tb_none {
  display: block;
}

@media screen and (max-width: 1024px) {
  .tb_only {
    display: block;
  }
  .tb_none {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .sp_only {
    display: block;
  }
  .pc_only,
  span.pc_only {
    display: none;
  }
}
/* ---------------------------------------- 
 - body 
---------------------------------------- */
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  font-size: 1.6em;
  font-weight: var(--font_Regular);
  text-align: justify;
  color: var(--color_blue);
  line-height: 1.8;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%; /* 文字の拡大縮小を防ぐ */
  text-size-adjust: 100%; /* 文字の拡大縮小を防ぐ */
}
body .ttl {
  text-align: left;
}

/*
.plus-jakarta-sans-<uniquifier> {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
}
.zen-kaku-gothic-new-regular {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.roboto-<uniquifier> {
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	font-variation-settings:
	"wdth" 100;
}
*/
:root {
  --color_blue: #374884;
  --color_black: #000000;
  --color_light_gray: #F6F8FC;
  --color_light_gold: #F0DA86;
  --color_dark_gold: #BEAA5A;
  --color_gradation: linear-gradient(90deg, #beaa5a, #f0da86);
  --font_Light: 300;
  --font_Regular: 400;
  --font_medium: 500;
  --font_bold: 700;
  --font_black: 900;
  --inner_width: 1100px;
  --inner_width_s: 850px;
  --inner_width_l: 1240px;
  --inner_width_out: 1360px;
  --inner_padding: 0 3%;
  --inner_padding_reset: 0 -4%;
  --bp_tb: 1024px;
  --bp_sp: 768px;
  --font_09: 50%;
  --font_10: 62.50%;
  --font_12: 75.00%;
  --font_14: 87.50%;
  --font_16: 100.00%;
  --font_18: 112.50%;
  --font_20: 125.00%;
  --font_22: 137.50%;
  --font_24: 150.00%;
  --font_26: 162.50%;
  --font_28: 175.00%;
  --font_30: 187.50%;
  --font_32: 200.00%;
  --font_40: 250.00%;
  --font_45: 281.25%;
  --font_70: 437.50%;
  --font_75: 468.75%;
  --font_90: 562.50%;
  --font_140: 875.00%;
  --font_plus: "Plus Jakarta Sans", "Zen Kaku Gothic New", sans-serif;
  --font_Roboto: "Roboto", "Zen Kaku Gothic New", sans-serif;
}

@media screen and (max-width: 1024px) {
  :root {
    --inner_padding: 0 6%;
    --inner_padding_reset: 0 -7%;
  }
}
/* ---------------------------------------- 
 - common
---------------------------------------- */
#main {
  overflow: hidden;
}

.img_sec {
  z-index: -1;
}

.sec {
  padding: var(--inner_padding);
  position: relative;
  z-index: 0;
}
.sec .inner {
  width: 100%;
  max-width: var(--inner_width);
  margin: 0 auto;
}

.en {
  font-family: var(--font_plus);
  font-weight: var(--font_Light);
  text-align: left;
  letter-spacing: 0.05em;
}

.num {
  font-family: var(--font_Roboto);
  font-weight: var(--font_bold);
  font-style: italic;
  line-height: 1;
}

.btn_square {
  margin-top: 90px;
  width: 100%;
}
.btn_square a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 250px;
  padding: 5px 65px;
  border: 2px solid transparent;
  border-image: linear-gradient(75deg, #5279ca 0%, #374884) 1;
  line-height: 1;
  font-weight: var(--font_medium);
  position: relative;
  margin: 0 auto;
}
.btn_square a::after {
  opacity: 1;
  content: "";
  position: absolute;
  top: 0;
  right: -25px;
  display: block;
  width: 50px;
  height: 50px;
  background-image: url(../img/arrow_line.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.btn_square a:hover {
  color: #FFFFFF;
  background-image: linear-gradient(75deg, #5279ca 0%, #374884);
}
.btn_square a:hover::after {
  opacity: 0;
  right: -50px;
}

.btn_circle a {
  text-align: right;
  font-size: var(--font_20);
  font-weight: var(--font_bold);
  line-height: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1em;
}
.btn_circle a::after {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background-image: url(../img/arrow_circle.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.btn_circle a:hover {
  gap: 0.5em;
}

@media screen and (max-width: 768px) {
  .img_sec img {
    object-fit: cover;
    height: 245px;
  }
  .btn_square {
    margin-top: 60px;
  }
  .btn_square a {
    font-size: var(--font_14);
    width: 220px;
    height: 43px;
    padding: 5px 15px;
  }
  .btn_square a::after {
    width: 32px;
    height: 43px;
  }
  .btn_circle a {
    font-size: var(--font_14);
  }
  .btn_circle a::after {
    width: 44px;
    height: 44px;
  }
}
/* ---------------------------------------- 
 - single
---------------------------------------- */
#single .catch_box h2.ttl {
  font-size: var(--font_24);
  font-weight: var(--font_bold);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
#single .catch_box h2.ttl::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background-color: var(--color_dark_gold);
}

#single_in_head {
  padding-top: 135px;
}
#single_in_head .inner {
  max-width: var(--inner_width_l);
  padding-bottom: 60px;
}
#single_in_head .head_catch_box .en_ttl {
  display: inline-block;
  font-size: var(--font_20);
  background: linear-gradient(75deg, #BEAA5A, #F0DA86);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.3;
}
#single_in_head .head_catch_box .ttl {
  font-size: var(--font_45);
  font-weight: var(--font_bold);
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#single_in_head .head_catch_box .catch {
  font-size: var(--font_24);
  font-weight: var(--font_bold);
  margin-top: 75px;
}
#single_in_head .head_catch_box .txt {
  font-size: var(--font_18);
  font-weight: var(--font_medium);
  margin-top: 20px;
}

#single_head {
  padding-top: 135px;
  background-image: linear-gradient(#EDF7FF 75%, #FFFFFF 75%);
}
#single_head .inner {
  max-width: var(--inner_width_l);
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
#single_head .head_catch_box {
  width: 350px;
}
#single_head .head_catch_box .en_ttl {
  display: inline-block;
  font-size: var(--font_20);
  background: linear-gradient(75deg, #BEAA5A, #F0DA86);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
#single_head .head_catch_box .ttl {
  font-size: var(--font_45);
  font-weight: var(--font_bold);
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#single_head .img_box img {
  margin-right: -180px;
  width: 1025px;
}
@media screen and (min-width: 1600px) {
  #single_head .img_box img {
    margin-right: -370px;
    width: 1215px;
    height: 380px;
    object-fit: cover;
    object-position: center left;
  }
}

#bread .bread_list {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
}
#bread .bread_list a {
  display: block;
}
#bread .bread_list li {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  font-size: var(--font_14);
}
#bread .bread_list li::after {
  content: "";
  display: block;
  width: 3px;
  height: 6px;
  background-image: url(../img/arrow_bread_blue.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#bread .bread_list li:last-child::after {
  content: unset;
}

#single_catch {
  background-color: var(--color_blue);
  color: #FFFFFF;
  padding-top: 110px;
  padding-bottom: 175px;
}
#single_catch .inner {
  max-width: 720px;
}
#single_catch .ttl {
  font-size: var(--font_40);
  font-weight: var(--font_bold);
  line-height: 1.5;
}
#single_catch .txt {
  font-size: var(--font_18);
  margin-top: 50px;
}

#navigation {
  padding-top: 100px;
  padding-bottom: 100px;
  z-index: 2;
}
#navigation .navi_list {
  display: flex;
  justify-content: space-between;
}
#navigation .navi_list .navi_item {
  width: 49%;
}
#navigation .navi_list .navi_item a {
  position: relative;
  width: 100%;
  aspect-ratio: 540/223;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #FFFFFF;
  font-size: var(--font_24);
  font-weight: var(--font_bold);
  display: flex;
  justify-content: center;
  align-items: center;
}
#navigation .navi_list .navi_item a::after {
  position: absolute;
  right: 15px;
  bottom: 15px;
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background-image: url(../img/arrow_circle.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#navigation .navi_list .navi_item a:hover {
  background-size: 110%;
}
#navigation .navi_list .navi_item a:hover::after {
  right: -5px;
  opacity: 0;
}
#navigation .navi_list .navi_item.navi_company a {
  background-image: url(../img/navi_company.jpg);
}
#navigation .navi_list .navi_item.navi_service a {
  background-image: url(../img/navi_service.jpg);
}
#navigation .navi_list .navi_item.navi_recruit a {
  background-image: url(../img/navi_recruit.jpg);
}

@media screen and (max-width: 1300px) {
  #single_head .inner {
    flex-direction: column;
  }
  #single_head .img_box {
    display: flex;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 1024px) {
  #single_head .img_box img {
    width: 107%;
    object-fit: cover;
    height: 340px;
    margin-right: -7%;
  }
}
@media screen and (max-width: 768px) {
  #single .catch_box h2.ttl {
    font-size: var(--font_20);
    gap: 10px;
  }
  #single .catch_box h2.ttl::after {
    width: 40px;
    height: 1.5px;
  }
  #single_in_head .head_catch_box .en_ttl {
    font-size: var(--font_16);
  }
  #single_in_head .head_catch_box .ttl {
    font-size: var(--font_30);
  }
  #single_in_head .head_catch_box .catch {
    font-size: var(--font_18);
    margin-top: 50px;
  }
  #single_in_head .head_catch_box .txt {
    font-size: var(--font_16);
    margin-top: 10px;
    text-align: left;
  }
  #single_head .head_catch_box .ttl {
    font-size: var(--font_30);
  }
  #single_head .img_box img {
    height: 242px;
  }
  #bread .bread_list {
    height: 40px;
  }
  #bread .bread_list li {
    font-size: var(--font_10);
  }
  #single_catch {
    padding-top: 60px;
    padding-bottom: 90px;
  }
  #single_catch .ttl {
    font-size: var(--font_30);
  }
  #single_catch .txt {
    font-size: var(--font_14);
  }
  #navigation {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  #navigation .navi_list {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  #navigation .navi_list .navi_item {
    width: 80%;
  }
  #navigation .navi_list .navi_item a {
    font-size: var(--font_16);
  }
  #navigation .navi_list .navi_item a::after {
    width: 40px;
    height: 40px;
  }
}
/* ---------------------------------------- #service ---------------------------------------- */
.service_page #single_head {
  position: relative;
  background-image: linear-gradient(#ffffff 75%, #374884 75%);
}
.service_page #single_head #bread {
  color: #FFFFFF;
}
.service_page #single_head #bread li::after {
  background-image: url(../img/arrow_bread.svg);
}
.service_page #single_head::after {
  position: absolute;
  bottom: -90px;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 340px;
  background-image: url(../img/service_line01.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 1600px;
  z-index: -1;
}
@media screen and (max-width: 1600px) {
  .service_page #single_head::after {
    background-position: bottom center;
  }
}
@media screen and (max-width: 1024px) {
  .service_page #single_head::after {
    bottom: -50px;
    background-position: bottom left;
    background-size: cover;
  }
}
@media screen and (max-width: 768px) {
  .service_page #single_head::after {
    bottom: -30px;
    height: 210px;
  }
}
.service_page #single_catch {
  position: relative;
  z-index: -1;
}
.service_page #service_list {
  position: relative;
  background-color: var(--color_light_gray);
  padding-top: 110px;
  padding-bottom: 180px;
}
.service_page #service_list .flag::before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  display: block;
  width: 100%;
  height: 505px;
  background-image: url(../img/service_line02.png);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 1600px;
  z-index: -1;
}
@media screen and (max-width: 1600px) {
  .service_page #service_list .flag::before {
    background-position: top center;
  }
}
@media screen and (max-width: 1024px) {
  .service_page #service_list .flag::before {
    background-position: top right;
    background-size: cover;
  }
}
@media screen and (max-width: 768px) {
  .service_page #service_list .flag::before {
    height: 240px;
  }
}
.service_page #service_list::before {
  position: absolute;
  bottom: 46%;
  right: 0;
  content: "";
  display: block;
  width: 100%;
  height: 1050px;
  background-image: url(../img/service_line03.png);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 1600px;
  z-index: -1;
}
@media screen and (max-width: 1600px) {
  .service_page #service_list::before {
    background-position: top center;
  }
}
@media screen and (max-width: 1024px) {
  .service_page #service_list::before {
    background-position: top right;
    background-size: cover;
  }
}
@media screen and (max-width: 768px) {
  .service_page #service_list::before {
    height: 600px;
  }
}
.service_page #service_list::after {
  position: absolute;
  bottom: 5%;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 790px;
  background-image: url(../img/service_line04.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 1600px;
  z-index: -1;
}
@media screen and (max-width: 1600px) {
  .service_page #service_list::after {
    background-position: top center;
  }
}
@media screen and (max-width: 1024px) {
  .service_page #service_list::after {
    background-position: top left;
    background-size: cover;
  }
}
@media screen and (max-width: 768px) {
  .service_page #service_list::after {
    height: 500px;
  }
}
.service_page #service_list .inner {
  max-width: var(--inner_width_out);
}
.service_page #service_list .catch_box .ttl {
  width: 100%;
  align-items: center;
}
.service_page #service_list .service_list {
  display: flex;
  flex-direction: column;
  gap: 130px;
  margin-top: 120px;
  position: relative;
  z-index: 1;
}
.service_page #service_list .service_item {
  position: relative;
  background-color: #FFFFFF;
  padding: 10% 12%;
}
.service_page #service_list .service_item .num {
  position: absolute;
  top: -40px;
  left: 40px;
  display: inline-block;
  background-image: linear-gradient(75deg, #5279ca 0%, #374884);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--font_90);
}
.service_page #service_list .service_item .ttl_area .ttl {
  font-size: var(--font_40);
  font-weight: var(--font_bold);
  line-height: 1;
}
.service_page #service_list .service_item .ttl_area .en_ttl {
  margin-top: 20px;
}
.service_page #service_list .service_item .txt_area {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.service_page #service_list .service_item .txt_area .img_box {
  width: 60%;
}
.service_page #service_list .service_item .txt_area .txt_box {
  width: 32%;
}
.service_page #service_list .service_item .txt_area .txt_box .txt {
  line-height: 2.1;
}
.service_page #service_list .service_item .txt_area .txt_box .btn_square {
  margin-top: 60px;
}
.service_page #service_list .service_item .txt_area .txt_box .btn_square a {
  margin: 0;
}
.service_page #service_list .service_in_service {
  max-width: 1000px;
  width: 100%;
  border: 1px solid var(--color_blue);
  margin: 75px auto 0;
}
.service_page #service_list .service_in_service h3.ttl {
  font-size: var(--font_22);
  font-weight: var(--font_bold);
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 10em;
  margin: -25px auto 0;
}
.service_page #service_list .service_in_service .service_in_list {
  display: flex;
  justify-content: space-between;
  padding: calc(5% - 25px) 5% 5%;
}
.service_page #service_list .service_in_service .service_in_list li {
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.service_page #service_list .service_in_service .service_in_list li .txt {
  font-size: var(--font_18);
  font-weight: var(--font_bold);
  text-align: center;
}
.service_page #service_list .service_in_service .service_in_list li .img {
  width: 86%;
}

@media screen and (max-width: 1024px) {
  .service_page #service_list .service_list {
    gap: 100px;
  }
  .service_page #service_list .service_item .txt_area {
    flex-direction: column;
    gap: 40px;
  }
  .service_page #service_list .service_item .txt_area .img_box {
    width: 100%;
  }
  .service_page #service_list .service_item .txt_area .txt_box {
    width: 100%;
  }
  .service_page #service_list .service_item .txt_area .txt_box .btn_square a {
    margin: 0 auto;
  }
  .service_page #service_list .service_in_service .service_in_list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
  }
}
@media screen and (max-width: 768px) {
  .service_page #service_list {
    padding-top: 60px;
    padding-bottom: 90px;
  }
  .service_page #service_list .service_list {
    margin-top: 60px;
    gap: 40px;
  }
  .service_page #service_list .service_item {
    padding: 85px 25px 50px;
  }
  .service_page #service_list .service_item .num {
    font-size: var(--font_75);
    top: -20px;
    left: -0.15em;
  }
  .service_page #service_list .service_item .ttl_area .ttl {
    font-size: var(--font_24);
  }
  .service_page #service_list .service_item .ttl_area .en_ttl {
    font-size: var(--font_12);
    margin-top: 10px;
  }
  .service_page #service_list .service_item .txt_area .txt_box .txt {
    font-size: var(--font_14);
    line-height: 1.8;
  }
  .service_page #service_list .service_item .txt_area .txt_box .btn_square {
    margin-top: 30px;
  }
  .service_page #service_list .service_in_service h3.ttl {
    font-size: var(--font_18);
  }
  .service_page #service_list .service_in_service .service_in_list {
    gap: 10px 4%;
  }
  .service_page #service_list .service_in_service .service_in_list li {
    width: 48%;
  }
  .service_page #service_list .service_in_service .service_in_list li .txt {
    font-size: var(--font_10);
  }
}
/* ---------------------------------------- #company ---------------------------------------- */
.company_page #single_head {
  background-image: linear-gradient(#ffffff 75%, #374884 75%);
}
.company_page #single_head #bread {
  color: #FFFFFF;
}
.company_page #single_head #bread li::after {
  background-image: url(../img/arrow_bread.svg);
}
.company_page #single_head::after {
  position: absolute;
  bottom: -300px;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 880px;
  background-image: url(../img/company_line01.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 1600px;
  z-index: -1;
}
@media screen and (max-width: 1600px) {
  .company_page #single_head::after {
    bottom: -140px;
  }
}
@media screen and (max-width: 1024px) {
  .company_page #single_head::after {
    height: 540px;
    background-size: cover;
  }
}
@media screen and (max-width: 768px) {
  .company_page #single_head::after {
    height: 400px;
    bottom: -100px;
  }
}
.company_page #company_overview {
  position: relative;
  z-index: -1;
  padding-top: 110px;
  padding-bottom: 150px;
  background-color: var(--color_blue);
  color: #FFFFFF;
}
.company_page #company_overview .inner {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
.company_page #company_overview .overview_list {
  width: 100%;
  max-width: 830px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(75deg, #ffffff 0%, #5279ca) 1;
}
.company_page #company_overview .overview_list .overview_item {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(75deg, #ffffff 0%, #5279ca) 1;
  padding: 32px 0;
  display: flex;
}
.company_page #company_overview .overview_list .overview_item .ttl {
  font-weight: var(--font_bold);
  width: 165px;
}
.company_page #company_overview .overview_list .overview_item .txt {
  flex: 1;
}
.company_page #company_message {
  position: relative;
  background-color: var(--color_light_gray);
  padding-top: 160px;
  padding-bottom: 250px;
}
.company_page #company_message::after {
  position: absolute;
  bottom: -60px;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1600/500;
  background-image: url(../img/company_line02.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
@media screen and (max-width: 1600px) {
  .company_page #company_message::after {
    background-position: top center;
    background-size: 1600px;
    aspect-ratio: auto;
    height: 500px;
  }
}
@media screen and (max-width: 1024px) {
  .company_page #company_message::after {
    height: 300px;
    background-position: top left;
    background-size: contain;
  }
}
@media screen and (max-width: 768px) {
  .company_page #company_message::after {
    bottom: -110px;
  }
}
.company_page #company_message .main_area {
  margin-top: 90px;
  display: flex;
  justify-content: space-between;
  gap: 10%;
}
.company_page #company_message .main_area .txt_area {
  flex: 1;
}
.company_page #company_message .main_area .txt_area .ttl {
  font-size: var(--font_40);
  font-weight: var(--font_bold);
  line-height: 1.5;
}
.company_page #company_message .main_area .txt_area .txt {
  margin-top: 25px;
  line-height: 2.1;
}
.company_page #company_message .main_area .txt_area .name {
  margin-top: 50px;
  font-size: var(--font_18);
  text-align: right;
}
.company_page #company_message .main_area .img_area {
  max-width: 370px;
}
.company_page #company_philosophy {
  position: relative;
  background-color: var(--color_blue);
  color: #FFFFFF;
  padding-top: 165px;
  padding-bottom: 230px;
}
.company_page #company_philosophy::before {
  position: absolute;
  top: 200px;
  right: 0;
  content: "";
  display: block;
  width: 100%;
  height: 610px;
  background-image: url(../img/company_line03.png);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 1600px;
  z-index: -1;
}
@media screen and (max-width: 1600px) {
  .company_page #company_philosophy::before {
    background-position: top center;
  }
}
@media screen and (max-width: 1024px) {
  .company_page #company_philosophy::before {
    background-position: top right;
    background-size: contain;
  }
}
@media screen and (max-width: 768px) {
  .company_page #company_philosophy::before {
    top: 50px;
    height: 300px;
  }
}
.company_page #company_philosophy .txt_area {
  text-align: center;
}
.company_page #company_philosophy .txt_area .ttl {
  font-size: var(--font_45);
  font-weight: var(--font_bold);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}
.company_page #company_philosophy .txt_area .txt {
  margin-top: 60px;
  font-size: var(--font_18);
  line-height: 2.7;
}
.company_page #company_mvv {
  position: relative;
  z-index: -1;
  background-color: var(--color_blue);
  color: #FFFFFF;
  padding-bottom: 230px;
}
.company_page #company_mvv .mvv_box {
  border: 1px solid #FFFFFF;
  padding: 150px 105px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}
.company_page #company_mvv .mvv_box .mvv_item {
  display: flex;
  gap: 20px;
}
.company_page #company_mvv .mvv_box .mvv_item .ttl {
  padding: 0 60px;
  width: 270px;
}
.company_page #company_mvv .mvv_box .mvv_item .ttl img {
  width: auto;
  height: 40px;
}
.company_page #company_mvv .mvv_box .mvv_item .txt_box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.company_page #company_mvv .mvv_box .mvv_item .txt_box .txt {
  font-size: var(--font_24);
  font-weight: var(--font_medium);
  line-height: 1.4;
}
.company_page #company_mvv .mvv_box .mvv_item .values_list .values_item {
  display: flex;
}
.company_page #company_mvv .mvv_box .mvv_item .values_list .values_item .item_ttl {
  font-size: var(--font_24);
  font-weight: var(--font_medium);
  line-height: 1.6;
}
.company_page #company_mvv .mvv_box .mvv_item .values_list .values_item .item_txt {
  line-height: 1.6;
}
.company_page #company_mvv .mvv_box .mvv_item .values_list .values_item::before {
  content: "01";
  font-family: var(--font_Roboto);
  font-weight: var(--font_bold);
  font-size: var(--font_30);
  font-style: italic;
  line-height: 1;
  margin-right: 1em;
  display: block;
  padding-top: 0.2em;
}
.company_page #company_mvv .mvv_box .mvv_item .values_list .values_item:nth-child(2)::before {
  content: "02";
}
.company_page #company_mvv .mvv_box .mvv_item .values_list .values_item:nth-child(3)::before {
  content: "03";
}
.company_page #company_mvv .mvv_box .mvv_item .values_list .values_item:nth-child(4)::before {
  content: "04";
}
.company_page #company_mvv .mvv_box .mvv_item .values_list .values_item:nth-child(5)::before {
  content: "05";
}
.company_page #company_sdgs {
  position: relative;
  background-color: var(--color_light_gray);
  padding-top: 180px;
  padding-bottom: 180px;
}
.company_page #company_sdgs::before {
  position: absolute;
  top: -660px;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 1110px;
  background-image: url(../img/company_line04.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 1600px;
  z-index: -1;
}
@media screen and (max-width: 1024px) {
  .company_page #company_sdgs::before {
    top: -360px;
    height: 600px;
    background-size: cover;
  }
}
@media screen and (max-width: 768px) {
  .company_page #company_sdgs::before {
    height: 500px;
  }
}
.company_page #company_sdgs .inner {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
.company_page #company_sdgs .catch_box {
  flex: 1;
}
.company_page #company_sdgs .sdgs_list {
  width: 830px;
  display: flex;
  flex-direction: column;
  gap: 45px;
}
.company_page #company_sdgs .sdgs_item {
  background-color: #FFFFFF;
  padding: 55px 60px;
}
.company_page #company_sdgs .sdgs_item .sdgs_ttl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(55, 72, 132, 0.203);
  gap: 20px;
}
.company_page #company_sdgs .sdgs_item .sdgs_ttl .item_ttl {
  font-size: var(--font_28);
  font-weight: var(--font_bold);
}
.company_page #company_sdgs .sdgs_item .sdgs_ttl .icon_list {
  display: flex;
  gap: 20px;
}
.company_page #company_sdgs .sdgs_item .sdgs_ttl .icon_list img {
  width: 100px;
}
.company_page #company_sdgs .sdgs_item .sdgs_txt {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 25px;
  line-height: 2.1;
}
.company_page #company_sdgs .sdgs_item .sdgs_txt li {
  position: relative;
  padding-left: 15px;
  display: flex;
}
.company_page #company_sdgs .sdgs_item .sdgs_txt li::before {
  position: absolute;
  top: 13px;
  left: 0;
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  background-color: var(--color_blue);
  margin-right: 5px;
}

@media screen and (max-width: 1024px) {
  .company_page #company_overview .overview_list {
    max-width: 600px;
  }
  .company_page #company_overview .overview_list .overview_item {
    gap: 15px;
  }
  .company_page #company_overview .overview_list .overview_item .ttl {
    width: 6em;
  }
  .company_page #company_mvv .mvv_box .mvv_item {
    flex-direction: column;
    gap: 30px;
  }
  .company_page #company_mvv .mvv_box .mvv_item .ttl {
    padding: 0;
  }
  .company_page #company_sdgs .inner {
    flex-direction: column;
  }
  .company_page #company_sdgs .sdgs_list {
    width: auto;
  }
  .company_page #company_sdgs .sdgs_item .sdgs_ttl .icon_list img {
    width: 70px;
  }
}
@media screen and (max-width: 768px) {
  .company_page #company_overview {
    padding-top: 60px;
    padding-bottom: 80px;
  }
  .company_page #company_overview .inner {
    flex-direction: column;
    gap: 30px;
  }
  .company_page #company_overview .overview_list .overview_item {
    padding: 20px 0;
    gap: 5px;
    font-size: var(--font_14);
  }
  .company_page #company_message {
    padding-top: 80px;
    padding-bottom: 130px;
  }
  .company_page #company_message .main_area {
    flex-direction: column-reverse;
    gap: 50px;
    margin-top: 40px;
  }
  .company_page #company_message .main_area .img_area {
    max-width: 100%;
  }
  .company_page #company_message .main_area .img_area img {
    object-fit: cover;
    object-position: top center;
    height: 340px;
  }
  .company_page #company_message .main_area .txt_area .ttl {
    font-size: var(--font_30);
  }
  .company_page #company_message .main_area .txt_area .txt {
    font-size: var(--font_14);
  }
  .company_page #company_message .main_area .txt_area .name {
    font-size: var(--font_14);
  }
  .company_page #company_philosophy {
    padding-top: 80px;
    padding-bottom: 120px;
  }
  .company_page #company_philosophy .txt_area {
    margin-top: 50px;
  }
  .company_page #company_philosophy .txt_area .ttl {
    font-size: var(--font_32);
  }
  .company_page #company_philosophy .txt_area .txt {
    font-size: var(--font_14);
  }
  .company_page #company_mvv {
    padding-bottom: 120px;
  }
  .company_page #company_mvv .mvv_box {
    padding: 80px 6%;
    gap: 70px;
  }
  .company_page #company_mvv .mvv_box .mvv_item .ttl img {
    height: 22px;
  }
  .company_page #company_mvv .mvv_box .mvv_item .txt_box {
    gap: 20px;
  }
  .company_page #company_mvv .mvv_box .mvv_item .txt_box .txt {
    font-size: var(--font_20);
  }
  .company_page #company_mvv .mvv_box .mvv_item .values_list .values_item::before {
    font-size: var(--font_24);
    margin-right: 0.8em;
  }
  .company_page #company_mvv .mvv_box .mvv_item .values_list .values_item .item_ttl {
    font-size: var(--font_20);
  }
  .company_page #company_mvv .mvv_box .mvv_item .values_list .values_item .item_txt {
    font-size: var(--font_14);
    margin-top: 5px;
  }
  .company_page #company_sdgs {
    padding-top: 90px;
    padding-bottom: 90px;
  }
  .company_page #company_sdgs .sdgs_list {
    gap: 25px;
  }
  .company_page #company_sdgs .sdgs_item {
    padding: 40px 6%;
  }
  .company_page #company_sdgs .sdgs_item .sdgs_ttl {
    flex-direction: column;
    gap: 20px;
  }
  .company_page #company_sdgs .sdgs_item .sdgs_ttl .item_ttl {
    font-size: var(--font_20);
  }
  .company_page #company_sdgs .sdgs_item .sdgs_txt {
    font-size: var(--font_14);
    line-height: 1.8;
  }
  .company_page #company_sdgs .sdgs_item .sdgs_txt li::before {
    top: 9px;
    width: 8px;
    height: 8px;
  }
}
/* ---------------------------------------- #recruit ---------------------------------------- */
.recruit_page #single_head::after {
  position: absolute;
  bottom: -340px;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 720px;
  background-image: url(../img/recruit_line01.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 1600px;
  z-index: -1;
}
@media screen and (max-width: 1600px) {
  .recruit_page #single_head::after {
    bottom: -240px;
  }
}
@media screen and (max-width: 1024px) {
  .recruit_page #single_head::after {
    height: 490px;
    background-size: cover;
  }
}
@media screen and (max-width: 768px) {
  .recruit_page #single_head::after {
    height: 400px;
    bottom: -100px;
  }
}
.recruit_page #single_catch {
  background-color: #FFFFFF;
  color: var(--color_blue);
  position: relative;
  z-index: -1;
}
.recruit_page #single_catch::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  display: block;
  width: 100%;
  height: 410px;
  background-image: url(../img/recruit_line02.png);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 1600px;
  z-index: -1;
}
@media screen and (max-width: 1600px) {
  .recruit_page #single_catch::after {
    background-position: bottom center;
  }
}
@media screen and (max-width: 1024px) {
  .recruit_page #single_catch::after {
    height: 250px;
    background-size: cover;
    background-position: bottom right;
  }
}
@media screen and (max-width: 768px) {
  .recruit_page #single_catch::after {
    height: 200px;
  }
}
.recruit_page #recruit_culture {
  padding-top: 160px;
  padding-bottom: 230px;
  background-color: var(--color_light_gray);
}
.recruit_page #recruit_culture::after {
  position: absolute;
  top: 910px;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 500px;
  background-image: url(../img/recruit_line03.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 1600px;
  z-index: -1;
}
@media screen and (max-width: 1600px) {
  .recruit_page #recruit_culture::after {
    background-position: bottom center;
  }
}
@media screen and (max-width: 1024px) {
  .recruit_page #recruit_culture::after {
    top: 40%;
    height: 450px;
    background-size: cover;
    background-position: bottom left;
  }
}
@media screen and (max-width: 768px) {
  .recruit_page #recruit_culture::after {
    height: 150px;
  }
}
.recruit_page #recruit_culture .culture_list {
  display: flex;
  flex-direction: column;
  gap: 110px;
  margin-top: 90px;
}
.recruit_page #recruit_culture .culture_list .culture_item {
  display: flex;
  justify-content: space-between;
  gap: 80px;
}
.recruit_page #recruit_culture .culture_list .culture_item:nth-child(even) {
  flex-direction: row-reverse;
}
.recruit_page #recruit_culture .culture_list .culture_item .txt_area {
  flex: 1;
}
.recruit_page #recruit_culture .culture_list .culture_item .txt_area .en_ttl {
  font-size: var(--font_20);
}
.recruit_page #recruit_culture .culture_list .culture_item .txt_area .ttl {
  font-size: var(--font_40);
  font-weight: var(--font_bold);
  line-height: 1.6;
  margin-top: 10px;
  text-align: left;
}
.recruit_page #recruit_culture .culture_list .culture_item .txt_area .txt {
  margin-top: 40px;
}
.recruit_page #recruit_culture .culture_list .culture_item .img_box {
  width: 435px;
}
.recruit_page .rec_img_sec {
  background-color: var(--color_light_gray);
  position: relative;
}
.recruit_page .rec_img_sec::before {
  position: absolute;
  bottom: -50px;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1600/760;
  background-image: url(../img/recruit_line04.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 1600px) {
  .recruit_page .rec_img_sec::before {
    background-position: top center;
    background-size: 1600px;
    aspect-ratio: auto;
    height: 760px;
  }
}
@media screen and (max-width: 1024px) {
  .recruit_page .rec_img_sec::before {
    bottom: -140px;
    height: 520px;
    background-size: cover;
    background-position: bottom left;
  }
}
@media screen and (max-width: 768px) {
  .recruit_page .rec_img_sec::before {
    bottom: -230px;
    height: 370px;
  }
}
.recruit_page .rec_img_sec .img_sec_list {
  max-width: var(--inner_width);
  position: relative;
  height: 1190px;
  padding-bottom: 65px;
  margin: 0 auto;
}
.recruit_page .rec_img_sec .img_sec_list p {
  position: absolute;
}
.recruit_page .rec_img_sec .img_sec_list .img_02 {
  width: 640px;
  top: 0;
  left: -150px;
}
.recruit_page .rec_img_sec .img_sec_list .img_03 {
  width: 265px;
  top: 207px;
  right: 0;
}
.recruit_page .rec_img_sec .img_sec_list .img_04 {
  width: 1350px;
  bottom: 65px;
  right: -250px;
}
.recruit_page #recruit_benefits {
  position: relative;
  z-index: -1;
  padding-top: 100px;
  padding-bottom: 170px;
}
.recruit_page #recruit_benefits .inner {
  display: flex;
  justify-content: space-between;
}
.recruit_page #recruit_benefits .benefits_list {
  display: flex;
  justify-content: space-between;
}
.recruit_page #recruit_benefits .benefits_list .benefits_item {
  width: 48%;
  max-width: 400px;
  background-color: var(--color_light_gray);
  padding: 70px 50px 50px;
  text-align: center;
}
.recruit_page #recruit_benefits .benefits_list .benefits_item h3.ttl {
  font-size: var(--font_28);
  font-weight: var(--font_bold);
  text-align: center;
}
.recruit_page #recruit_benefits .benefits_list .benefits_item .benefits_info {
  margin-top: 30px;
}
.recruit_page #recruit_benefits .benefits_list .benefits_item .benefits_info dt {
  font-weight: var(--font_bold);
  margin-top: 25px;
}
.recruit_page #recruit_benefits .benefits_list .benefits_item .benefits_info dt:first-child {
  margin-top: 0;
}
.recruit_page #recruit_benefits .benefits_list .benefits_item .benefits_info dd {
  margin-top: 7px;
}
.recruit_page #recruit_process {
  padding-top: 130px;
  padding-bottom: 160px;
  background-color: var(--color_light_gray);
}
.recruit_page #recruit_process .process_list {
  display: flex;
  justify-content: space-between;
  margin-top: 120px;
}
.recruit_page #recruit_process .process_list .process_item {
  width: 19%;
  height: 130px;
  background-color: #FFFFFF;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.recruit_page #recruit_process .process_list .process_item .num {
  font-size: var(--font_40);
  position: absolute;
  top: -0.5em;
  left: 0.2em;
}
.recruit_page #recruit_process .process_list .process_item .ttl {
  font-size: var(--font_24);
  font-weight: var(--font_bold);
}
.recruit_page #recruit_process .process_list .process_item .txt {
  position: absolute;
  font-size: var(--font_14);
  text-align: center;
  width: 100%;
  bottom: 5px;
  left: 0;
  line-height: 1.2;
}
.recruit_page #recruit_process .txt_area {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.recruit_page #recruit_process .txt_area .txt {
  font-weight: var(--font_medium);
}
.recruit_page #recruit_process .txt_area .txt span {
  font-size: var(--font_14);
  font-weight: var(--font_Regular);
}
.recruit_page #recruit_entry {
  padding-bottom: 160px;
  background-color: var(--color_light_gray);
}
.recruit_page #recruit_entry .entry_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 315px;
  background-image: url(../img/recruit_entry_bg.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: #FFFFFF;
  padding: 20px 120px;
}
.recruit_page #recruit_entry .entry_box .txt_area {
  padding-left: 65px;
}
.recruit_page #recruit_entry .entry_box .txt_area .en_ttl {
  font-size: var(--font_20);
}
.recruit_page #recruit_entry .entry_box .txt_area .ttl {
  font-size: var(--font_40);
  font-weight: var(--font_bold);
  margin-top: 20px;
  line-height: 1.6;
}
.recruit_page #recruit_entry .entry_box .btn_area a {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid #D9D9D9;
  font-size: var(--font_18);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.recruit_page #recruit_entry .entry_box .btn_area a::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-image: url(../img/icon_outlink.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 10px;
}
.recruit_page #recruit_entry .entry_box .btn_area a:hover {
  background-color: var(--color_dark_gold);
  border: 1px solid var(--color_dark_gold);
}

@media screen and (max-width: 1024px) {
  .recruit_page #recruit_culture .culture_list .culture_item {
    flex-direction: column;
    gap: 40px;
  }
  .recruit_page #recruit_culture .culture_list .culture_item:nth-child(even) {
    flex-direction: column;
  }
  .recruit_page #recruit_culture .culture_list .culture_item .txt_area {
    width: 100%;
  }
  .recruit_page #recruit_culture .culture_list .culture_item .img_box {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }
  .recruit_page #recruit_benefits .inner {
    flex-direction: column;
    gap: 50px;
  }
  .recruit_page #recruit_benefits .benefits_list .benefits_item {
    max-width: 48%;
  }
  .recruit_page #recruit_entry .entry_box {
    background-image: url(../img/recruit_entry_bg_sp.jpg);
    width: 100%;
    max-width: 500px;
    aspect-ratio: 310/482;
    flex-direction: column;
    padding: 15% 20px;
    margin: 0 auto;
  }
  .recruit_page #recruit_entry .entry_box .txt_area {
    padding-left: 0;
    text-align: center;
  }
  .recruit_page #recruit_entry .entry_box .txt_area .en_ttl {
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .recruit_page .catch_box h2.ttl {
    align-items: center !important;
  }
  .recruit_page #single_catch .inner {
    padding: 0 6%;
  }
  .recruit_page #recruit_culture {
    padding-top: 110px;
    padding-bottom: 150px;
  }
  .recruit_page #recruit_culture .culture_list {
    margin-top: 60px;
    gap: 100px;
  }
  .recruit_page #recruit_culture .culture_list .culture_item {
    gap: 30px;
  }
  .recruit_page #recruit_culture .culture_list .culture_item .txt_area .en_ttl {
    font-size: var(--font_14);
  }
  .recruit_page #recruit_culture .culture_list .culture_item .txt_area .ttl {
    font-size: var(--font_30);
  }
  .recruit_page #recruit_culture .culture_list .culture_item .txt_area .txt {
    font-size: var(--font_14);
    margin-top: 30px;
  }
  .recruit_page .rec_img_sec {
    height: 420px;
    margin-bottom: 80px;
  }
  .recruit_page .rec_img_sec .img_sec_list {
    height: 500px;
    margin-bottom: -80px;
  }
  .recruit_page .rec_img_sec .img_sec_list .img_02 {
    width: 234px;
    top: 0;
    left: 0;
  }
  .recruit_page .rec_img_sec .img_sec_list .img_03 {
    width: 100px;
    top: 200px;
    right: 20px;
  }
  .recruit_page .rec_img_sec .img_sec_list .img_04 {
    width: 302px;
    bottom: 0;
    right: 0;
  }
  .recruit_page .rec_img_sec .img_sec_list .img_04 img {
    width: 302px;
    height: 245px;
    object-fit: cover;
    object-position: center;
  }
  .recruit_page #recruit_benefits {
    padding-top: 110px;
    padding-bottom: 110px;
  }
  .recruit_page #recruit_benefits .benefits_list {
    flex-direction: column;
    gap: 15px;
  }
  .recruit_page #recruit_benefits .benefits_list .benefits_item {
    max-width: 100%;
    width: 100%;
    padding: 50px;
  }
  .recruit_page #recruit_benefits .benefits_list .benefits_item h3.ttl {
    font-size: var(--font_24);
  }
  .recruit_page #recruit_benefits .benefits_list .benefits_item .benefits_info {
    font-size: var(--font_14);
    margin-top: 25px;
  }
  .recruit_page #recruit_benefits .benefits_list .benefits_item .benefits_info dt {
    margin-top: 20px;
  }
  .recruit_page #recruit_process {
    padding-top: 110px;
    padding-bottom: 110px;
  }
  .recruit_page #recruit_process .process_list {
    margin-top: 65px;
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }
  .recruit_page #recruit_process .process_list .process_item {
    width: 66%;
    min-width: 230px;
    height: 70px;
  }
  .recruit_page #recruit_process .process_list .process_item .num {
    font-size: var(--font_32);
    left: 0.4em;
  }
  .recruit_page #recruit_process .process_list .process_item .txt {
    font-size: var(--font_20);
  }
  .recruit_page #recruit_process .process_list .process_item .txt {
    font-size: var(--font_10);
    bottom: 2px;
  }
  .recruit_page #recruit_process .txt_area {
    margin-top: 40px;
  }
  .recruit_page #recruit_process .txt_area .txt {
    font-size: var(--font_14);
  }
  .recruit_page #recruit_process .txt_area .txt span {
    font-size: var(--font_12);
  }
  .recruit_page #recruit_entry {
    padding-bottom: 110px;
  }
  .recruit_page #recruit_entry .entry_box .txt_area .en_ttl {
    font-size: var(--font_14);
  }
  .recruit_page #recruit_entry .entry_box .txt_area .ttl {
    font-size: var(--font_32);
  }
  .recruit_page #recruit_entry .entry_box .btn_area a {
    width: 165px;
    height: 165px;
    font-size: var(--font_14);
  }
  .recruit_page #recruit_entry .entry_box .btn_area a::after {
    width: 14px;
    height: 14px;
  }
}
/* ---------------------------------------- #network ---------------------------------------- */
.network_page #service_offerings,
.datacenter_page #service_offerings {
  background-color: var(--color_light_gray);
  padding-top: 110px;
  padding-bottom: 170px;
}
.network_page #service_offerings .catch_box h2.ttl,
.datacenter_page #service_offerings .catch_box h2.ttl {
  align-items: center;
  width: 100%;
}
.network_page #service_offerings .inner,
.datacenter_page #service_offerings .inner {
  max-width: var(--inner_width_out);
}
.network_page #service_offerings .service_in_list,
.datacenter_page #service_offerings .service_in_list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 110px;
}
.network_page #service_offerings .service_in_list .service_item,
.datacenter_page #service_offerings .service_in_list .service_item {
  background-color: #FFFFFF;
  padding: 5% 5.5% 5% 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}
.network_page #service_offerings .service_in_list .service_item .ttl_area,
.datacenter_page #service_offerings .service_in_list .service_item .ttl_area {
  flex: 1;
}
.network_page #service_offerings .service_in_list .service_item .ttl_area .en_ttl,
.datacenter_page #service_offerings .service_in_list .service_item .ttl_area .en_ttl {
  font-size: var(--font_20);
}
.network_page #service_offerings .service_in_list .service_item .ttl_area .ttl,
.datacenter_page #service_offerings .service_in_list .service_item .ttl_area .ttl {
  font-size: var(--font_32);
  font-weight: var(--font_bold);
  line-height: 1.6;
}
.network_page #service_offerings .service_in_list .service_item .ttl_area .txt,
.datacenter_page #service_offerings .service_in_list .service_item .ttl_area .txt {
  margin-top: 40px;
  line-height: 2.1;
}
.network_page #service_offerings .service_in_list .service_item .img_area,
.datacenter_page #service_offerings .service_in_list .service_item .img_area {
  width: 500px;
}
.network_page #service_strengths,
.datacenter_page #service_strengths {
  background-color: var(--color_blue);
  padding-top: 160px;
  padding-bottom: 170px;
  color: #FFFFFF;
}
.network_page #service_strengths .strengths_list,
.datacenter_page #service_strengths .strengths_list {
  margin-top: 140px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px 4%;
}
.network_page #service_strengths .strengths_list .strengths_item,
.datacenter_page #service_strengths .strengths_list .strengths_item {
  position: relative;
  width: 48%;
  border: 1px solid #FFFFFF;
  padding: 5% 7%;
}
.network_page #service_strengths .strengths_list .strengths_item .num,
.datacenter_page #service_strengths .strengths_list .strengths_item .num {
  position: absolute;
  font-size: var(--font_70);
  top: -0.5em;
  left: 0.2em;
  background-color: var(--color_blue);
  padding: 0 0.1em;
}
.network_page #service_strengths .strengths_list .strengths_item .ttl,
.datacenter_page #service_strengths .strengths_list .strengths_item .ttl {
  font-size: var(--font_22);
  font-weight: var(--font_bold);
}
.network_page #service_strengths .strengths_list .strengths_item .txt,
.datacenter_page #service_strengths .strengths_list .strengths_item .txt {
  margin-top: 20px;
}
.network_page #service_others,
.datacenter_page #service_others {
  background-color: var(--color_light_gray);
  padding-top: 100px;
  padding-bottom: 100px;
}
.network_page #service_others .inner,
.datacenter_page #service_others .inner {
  display: flex;
  justify-content: space-between;
  gap: 12%;
}
.network_page #service_others .catch_box,
.datacenter_page #service_others .catch_box {
  width: 145px;
}
.network_page #service_others .others_list,
.datacenter_page #service_others .others_list {
  flex: 1;
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.network_page #service_others .others_list .others_item a,
.datacenter_page #service_others .others_list .others_item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 108px;
  padding: 5px 30px 5px 50px;
  background-color: #FFFFFF;
  font-size: var(--font_22);
  font-weight: var(--font_bold);
}
.network_page #service_others .others_list .others_item a::after,
.datacenter_page #service_others .others_list .others_item a::after {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background-image: url(../img/arrow_circle.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.network_page #service_others .others_list .others_item a:hover,
.datacenter_page #service_others .others_list .others_item a:hover {
  background-color: var(--color_blue);
  color: #FFFFFF;
  padding-right: 10px;
}

@media screen and (max-width: 1024px) {
  .network_page #service_offerings .service_in_list .service_item,
  .datacenter_page #service_offerings .service_in_list .service_item {
    flex-direction: column;
    padding: 8%;
  }
  .network_page #service_offerings .service_in_list .service_item .img_area,
  .datacenter_page #service_offerings .service_in_list .service_item .img_area {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .network_page #service_offerings,
  .datacenter_page #service_offerings {
    padding-top: 60px;
    padding-bottom: 80px;
  }
  .network_page #service_offerings .service_in_list,
  .datacenter_page #service_offerings .service_in_list {
    margin-top: 60px;
  }
  .network_page #service_offerings .service_in_list .service_item,
  .datacenter_page #service_offerings .service_in_list .service_item {
    gap: 30px;
  }
  .network_page #service_offerings .service_in_list .service_item .ttl_area .en_ttl,
  .datacenter_page #service_offerings .service_in_list .service_item .ttl_area .en_ttl {
    font-size: var(--font_14);
  }
  .network_page #service_offerings .service_in_list .service_item .ttl_area .ttl,
  .datacenter_page #service_offerings .service_in_list .service_item .ttl_area .ttl {
    font-size: var(--font_24);
  }
  .network_page #service_offerings .service_in_list .service_item .ttl_area .txt,
  .datacenter_page #service_offerings .service_in_list .service_item .ttl_area .txt {
    font-size: var(--font_14);
    margin-top: 20px;
  }
  .network_page #service_strengths,
  .datacenter_page #service_strengths {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .network_page #service_strengths .strengths_list,
  .datacenter_page #service_strengths .strengths_list {
    margin-top: 80px;
  }
  .network_page #service_strengths .strengths_list .strengths_item,
  .datacenter_page #service_strengths .strengths_list .strengths_item {
    width: 100%;
    padding: 7% 9%;
  }
  .network_page #service_strengths .strengths_list .strengths_item .num,
  .datacenter_page #service_strengths .strengths_list .strengths_item .num {
    font-size: var(--font_32);
  }
  .network_page #service_strengths .strengths_list .strengths_item .ttl,
  .datacenter_page #service_strengths .strengths_list .strengths_item .ttl {
    font-size: var(--font_18);
  }
  .network_page #service_strengths .strengths_list .strengths_item .txt,
  .datacenter_page #service_strengths .strengths_list .strengths_item .txt {
    font-size: var(--font_14);
    margin-top: 10px;
  }
  .network_page #service_others,
  .datacenter_page #service_others {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .network_page #service_others .inner,
  .datacenter_page #service_others .inner {
    flex-direction: column;
    gap: 50px;
  }
  .network_page #service_others .others_list,
  .datacenter_page #service_others .others_list {
    width: 100%;
    gap: 10px;
  }
  .network_page #service_others .others_list .others_item a,
  .datacenter_page #service_others .others_list .others_item a {
    font-size: var(--font_18);
    height: 80px;
  }
  .network_page #service_others .others_list .others_item a::after,
  .datacenter_page #service_others .others_list .others_item a::after {
    width: 44px;
    height: 44px;
  }
}
/* ---------------------------------------- #contact ---------------------------------------- */
.contact_page #form_area {
  background-color: var(--color_light_gray);
  padding-top: 110px;
  padding-bottom: 190px;
}
.contact_page #form_area .inner {
  max-width: var(--inner_width_s);
}
.contact_page #form_area .ttl_area .ttl {
  font-size: var(--font_22);
  font-weight: var(--font_bold);
}
.contact_page #form_area .ttl_area .txt {
  margin-top: 20px;
  line-height: 2.1;
}
.contact_page #form_area .form_area .form_list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 50px;
}
.contact_page #form_area .form_area .form_list .form_item {
  background-color: #FFFFFF;
  padding: 1em 1.5em;
  display: flex;
  justify-content: space-between;
}
.contact_page #form_area .form_area .form_list .form_item .ttl {
  position: relative;
  font-size: var(--font_18);
  width: 240px;
  display: flex;
  align-items: center;
  line-height: 1;
}
.contact_page #form_area .form_area .form_list .form_item .ttl span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 43px;
  height: 19px;
  font-size: var(--font_12);
  color: #FFFFFF;
  background-color: var(--color_blue);
  margin-left: 13px;
}
.contact_page #form_area .form_area .form_list .form_item .ttl::after {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 1px;
  height: 100%;
  background-color: rgba(55, 72, 132, 0.3);
}
.contact_page #form_area .form_area .form_list .form_item .input {
  flex: 1;
  padding-left: 30px;
}
.contact_page #form_area .form_area .form_list .form_item .input input,
.contact_page #form_area .form_area .form_list .form_item .input textarea {
  width: 100%;
}
.contact_page #form_area .form_area .form_list .form_item:last-child .ttl {
  align-items: flex-start;
  padding-top: 5px;
}
.contact_page #form_area .form_area .form_list .form_item.type_select {
  align-items: center;
}
.contact_page #form_area .form_area .form_list .form_item .radio_inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
  padding-left: 30px;
}
.contact_page #form_area .form_area .form_list .form_item .radio_inline .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--font_16);
  color: var(--color_blue);
  position: relative;
}
.contact_page #form_area .form_area .form_list .form_item .radio_inline input[type=radio] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color_blue);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}
.contact_page #form_area .form_area .form_list .form_item .radio_inline input[type=radio]:checked {
  border-color: var(--color_blue);
}
.contact_page #form_area .form_area .form_list .form_item .radio_inline input[type=radio]::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background-color: var(--color_blue);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.contact_page #form_area .form_area .form_list .form_item .radio_inline input[type=radio]:checked::before {
  opacity: 1;
}
.contact_page #form_area .form_area .form_list .form_item .radio_inline label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.contact_page #form_area .form_area .btn_area {
  margin-top: 80px;
}
.contact_page #form_area .form_area .btn_area .privacy_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.contact_page #form_area .form_area .btn_area .privacy_btn .txt {
  display: flex;
}
.contact_page #form_area .form_area .btn_area .privacy_btn a::after {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--color_blue);
}
.contact_page #form_area .form_area .btn_area .privacy_btn label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact_page #form_area .form_area .btn_area .privacy_btn label .wpcf7-list-item-label {
  display: flex;
}
.contact_page #form_area .form_area .btn_area .submit_btn {
  margin-top: 20px;
}
.contact_page #form_area .form_area .btn_area .submit_btn input {
  font-size: var(--font_20);
  font-weight: var(--font_medium);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 380px;
  max-width: 100%;
  height: 75px;
  border: 2px solid var(--color_blue);
  transition: all 0.4s ease-in-out;
}
.contact_page #form_area .form_area .btn_area .submit_btn input:hover {
  background-color: var(--color_blue);
  color: #FFFFFF;
}
.contact_page #form_area .form_area .checkbox_icon {
  position: relative;
  width: 22px;
  height: 22px;
  appearance: none;
  background: #FFFFFF;
  border: solid 2px var(--color_blue);
  border-radius: 4px;
  box-shadow: 0 0 0 0 transparent;
}
.contact_page #form_area .form_area .checkbox_icon:checked {
  background: var(--color_blue);
  border-color: var(--color_blue);
}
.contact_page #form_area .form_area .checkbox_icon::before {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0;
  mask-image: url("../img/icon_check.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: #FFFFFF;
}
.contact_page #form_area .form_area .checkbox_icon:checked::before {
  opacity: 1;
}

::placeholder {
  color: rgba(55, 72, 132, 0.3);
}

.wpcf7 form.sent .wpcf7-response-output {
  border: none;
  text-align: center;
  font-size: 24px;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .contact_page #form_area {
    padding-top: 60px;
    padding-bottom: 100px;
  }
  .contact_page #form_area .ttl_area .ttl {
    font-size: var(--font_18);
  }
  .contact_page #form_area .ttl_area .txt {
    font-size: var(--font_14);
  }
  .contact_page #form_area .form_area .form_list {
    gap: 15px;
  }
  .contact_page #form_area .form_area .form_list .form_item {
    flex-direction: column;
    gap: 10px;
  }
  .contact_page #form_area .form_area .form_list .form_item .ttl {
    width: 100%;
    font-size: var(--font_16);
  }
  .contact_page #form_area .form_area .form_list .form_item .ttl::after {
    content: unset;
  }
  .contact_page #form_area .form_area .form_list .form_item .input {
    width: 100%;
    padding-left: 0;
  }
}
/* ---------------------------------------- #privacy ---------------------------------------- */
.privacy_page #privacy_area {
  background-color: var(--color_light_gray);
  padding-top: 110px;
  padding-bottom: 190px;
}
.privacy_page #privacy_area .inner {
  max-width: var(--inner_width_s);
}
.privacy_page #privacy_area .ttl_area .ttl {
  font-size: var(--font_22);
  font-weight: var(--font_bold);
}
.privacy_page #privacy_area .privacy_list {
  display: flex;
  flex-direction: column;
  gap: 90px;
  margin-top: 50px;
}
.privacy_page #privacy_area .privacy_list .privacy_item h2.ttl {
  font-size: var(--font_18);
  font-weight: var(--font_bold);
  width: 100%;
  margin-bottom: 25px;
}
.privacy_page #privacy_area .privacy_list .privacy_item h2.ttl::after {
  display: block;
  content: "";
  width: 100%;
  height: 0.5px;
  background-color: var(--color_blue);
  margin-top: 10px;
}
.privacy_page #privacy_area .privacy_list .privacy_item h2.ttl .num {
  display: inline-block;
  font-size: var(--font_20);
  font-style: normal;
  margin-right: 0.5em;
}
.privacy_page #privacy_area .privacy_list .privacy_item .txt_area {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.privacy_page #privacy_area .privacy_list .privacy_item .txt_area a {
  display: inline-block;
}
.privacy_page #privacy_area .privacy_list .privacy_item .txt_area a::after {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--color_blue);
}
.privacy_page #privacy_area .privacy_list .privacy_item .txt_area ol {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.privacy_page #privacy_area .privacy_list .privacy_item .txt_area ol li {
  position: relative;
  list-style-type: none;
  padding-left: 2em;
}
.privacy_page #privacy_area .privacy_list .privacy_item .txt_area ol li::before {
  position: absolute;
  left: 0;
  content: "(" counter(list-item) ")";
}

@media screen and (max-width: 768px) {
  .privacy_page #privacy_area {
    padding-top: 60px;
    padding-bottom: 100px;
  }
  .privacy_page #privacy_area .ttl_area .ttl {
    font-size: var(--font_18);
  }
  .privacy_page #privacy_area .privacy_list {
    gap: 45px;
    margin-top: 30px;
  }
  .privacy_page #privacy_area .privacy_list .privacy_item h2.ttl {
    font-size: var(--font_16);
    margin-bottom: 15px;
  }
  .privacy_page #privacy_area .privacy_list .privacy_item h2.ttl::after {
    margin-top: 5px;
  }
  .privacy_page #privacy_area .privacy_list .privacy_item h2.ttl .num {
    font-size: var(--font_18);
  }
  .privacy_page #privacy_area .privacy_list .privacy_item .txt_area {
    gap: 15px;
    font-size: var(--font_14);
  }
  .privacy_page #privacy_area .privacy_list .privacy_item .txt_area ol {
    gap: 15px;
  }
  .privacy_page #privacy_area .privacy_list .privacy_item .txt_area ol li {
    padding-left: 1.5em;
  }
}
/* ---------------------------------------- #service ---------------------------------------- */
/* ---------------------------------------- 
 - home
---------------------------------------- */
#home .catch_box .en_ttl {
  display: inline-block;
  font-size: var(--font_40);
  background: linear-gradient(75deg, #BEAA5A, #F0DA86);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
#home .catch_box h2.ttl {
  font-size: var(--font_45);
  font-weight: var(--font_bold);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-top: 40px;
}
#home .catch_box .en_txt {
  display: inline-block;
  background: linear-gradient(90deg, #F0DA86, #5279CA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.4;
  margin-top: 50px;
}

@media screen and (max-width: 768px) {
  #home .catch_box .en_ttl {
    font-size: var(--font_30);
  }
  #home .catch_box h2.ttl {
    font-size: var(--font_30);
    margin-top: 25px;
  }
  #home .catch_box .en_txt {
    font-size: var(--font_14);
    margin-top: 25px;
  }
}
/* ---------------------------------------- #home_visual ---------------------------------------- */
#home_visual {
  margin-top: 60px;
  overflow: hidden;
  height: 1380px;
  background-image: url("../img/home_visual_bg_1980.png"), linear-gradient(#ffffff 92.5%, var(--color_blue) 92.5%);
  background-size: 1980px, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
}
#home_visual .inner {
  max-width: 1500px;
}
#home_visual .logo_area {
  height: 75px;
  display: flex;
  align-items: center;
}
#home_visual .logo_area img {
  width: 150px;
}
#home_visual .txt_area {
  display: flex;
  justify-content: space-between;
  margin-top: 120px;
}
#home_visual .txt_area .catch_area .catch_box {
  padding-left: 60px;
}
#home_visual .txt_area .catch_area .catch_box img {
  max-width: 580px;
}
#home_visual .txt_area .catch_area .txt_box {
  font-size: var(--font_18);
  font-weight: var(--font_bold);
  margin-top: 165px;
}
#home_visual .txt_area .nav_area {
  position: relative;
  padding-right: 15px;
  --item-h: 23px;
  --gap: 20px;
}
#home_visual .txt_area .nav_area .nav_list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
#home_visual .txt_area .nav_area .nav_list .nav_item a {
  display: flex;
  align-items: center;
  font-weight: var(--font_medium);
  line-height: 1;
  text-align: right;
  height: var(--item-h);
  position: relative;
}
#home_visual .txt_area .nav_area::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3px;
  height: var(--item-h);
  background-color: var(--color_blue);
  transition: top 0.4s ease;
}
#home_visual .txt_area .nav_area:has(.nav_list .nav_item:nth-child(1):hover)::before {
  top: calc(0 * (var(--item-h) + var(--gap)));
}
#home_visual .txt_area .nav_area:has(.nav_list .nav_item:nth-child(2):hover)::before {
  top: calc(1 * (var(--item-h) + var(--gap)));
}
#home_visual .txt_area .nav_area:has(.nav_list .nav_item:nth-child(3):hover)::before {
  top: calc(2 * (var(--item-h) + var(--gap)));
}
#home_visual .txt_area .nav_area:has(.nav_list .nav_item:nth-child(4):hover)::before {
  top: calc(3 * (var(--item-h) + var(--gap)));
}

@media screen and (max-width: 1024px) {
  #home_visual {
    padding-top: 150px;
  }
  #home_visual .logo_area {
    display: none;
  }
  #home_visual .txt_area {
    margin-top: 0;
  }
  #home_visual .txt_area .catch_area .catch_box {
    padding-left: 30px;
  }
  #home_visual .txt_area .nav_area {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  #home_visual {
    height: auto;
    background-image: unset;
    padding-top: 0;
  }
  #home_visual::before {
    content: "";
    display: block;
    background-image: url("../img/home_visual_img01_sp.png");
    background-size: contain;
    aspect-ratio: 350/345;
    width: 114%;
    height: auto;
    margin: var(--inner_padding_reset);
  }
  #home_visual::after {
    content: "";
    display: block;
    background-size: 88%, auto;
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, center top;
    background-image: url("../img/home_visual_img02_sp.jpg"), linear-gradient(#ffffff 75.9%, var(--color_blue) 75.9%);
    aspect-ratio: 350/358;
    width: 114%;
    height: auto;
    margin: var(--inner_padding_reset);
    margin-top: 20px;
  }
  #home_visual .txt_area .catch_area .catch_box {
    padding-top: 20px;
    padding-left: 0;
  }
  #home_visual .txt_area .catch_area .catch_box img {
    width: 85%;
  }
  #home_visual .txt_area .catch_area .txt_box {
    margin-top: 65px;
    font-size: var(--font_14);
  }
}
/* ---------------------------------------- #home_features ---------------------------------------- */
#home_features {
  background: linear-gradient(to top, var(--color_light_gray) 0, var(--color_light_gray) var(--pad_h), var(--color_blue) var(--pad_h), var(--color_blue) 100%);
  color: #FFFFFF;
  position: relative;
  padding-bottom: var(--pad_h);
  z-index: 0;
  --pad_h: 160px;
}
#home_features::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 1020px;
  background-image: url(../img/home_features_line01_1980.png);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 1980px;
  z-index: -1;
}
#home_features .inner {
  display: flex;
  justify-content: space-between;
  padding-top: 130px;
  padding-bottom: 130px;
}
#home_features .circle_txt {
  position: relative;
  width: 705px;
  height: 708px;
  z-index: 0;
  --top_1: 0px;
  --right_1: 82px;
  --top_2: 236px;
  --right_2: 334px;
  --top_3: 338px;
  --right_3: 0px;
  --circle: 370px;
}
#home_features .circle_txt .circle_item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  text-align: center;
  width: var(--circle);
  height: var(--circle);
  border: 1px solid #FFFFFF;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  z-index: 0;
}
#home_features .circle_txt .circle_item .ttl {
  font-size: var(--font_28);
  font-weight: var(--font_bold);
}
#home_features .circle_txt .circle_item .txt {
  font-weight: var(--font_medium);
  line-height: 2;
}
#home_features .circle_txt .circle_item:nth-child(1) {
  top: var(--top_1);
  right: var(--right_1);
}
#home_features .circle_txt .circle_item:nth-child(2) {
  top: var(--top_2);
  right: var(--right_2);
}
#home_features .circle_txt .circle_item:nth-child(3) {
  top: var(--top_3);
  right: var(--right_3);
}
#home_features .circle_txt .circle_shadow {
  position: absolute;
  width: var(--circle);
  height: var(--circle);
  border-radius: 50%;
  z-index: -1;
  background-image: radial-gradient(rgba(22, 41, 109, 0.5019607843) 15%, #374884);
}
#home_features .circle_txt .circle_shadow:nth-child(4) {
  top: var(--top_1);
  right: var(--right_1);
}
#home_features .circle_txt .circle_shadow:nth-child(5) {
  top: var(--top_2);
  right: var(--right_2);
}
#home_features .circle_txt .circle_shadow:nth-child(6) {
  top: var(--top_3);
  right: var(--right_3);
}

@media screen and (max-width: 1024px) {
  #home_features::after {
    background-size: 1280px;
  }
  #home_features .inner {
    flex-direction: column;
    align-items: center;
  }
  #home_features .catch_box {
    width: 100%;
  }
  #home_features .circle_txt {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #home_features {
    --pad_h: 50px;
  }
  #home_features::after {
    width: 100%;
    height: auto;
    background-image: url(../img/home_features_line01_sp.png);
    background-size: cover;
    aspect-ratio: 350/270;
  }
  #home_features .circle_txt {
    margin-top: 50px;
    width: 350px;
    height: 784px;
    --top_1: 0px;
    --right_1: -34px;
    --top_2: 240px;
    --right_2: 77px;
    --top_3: 480px;
    --right_3: -34px;
    --circle: 305px;
  }
  #home_features .circle_txt .circle_item {
    gap: 30px;
  }
  #home_features .circle_txt .circle_item .ttl {
    font-size: var(--font_24);
  }
  #home_features .circle_txt .circle_item .txt {
    font-size: var(--font_14);
  }
}
/* ---------------------------------------- #home_service ---------------------------------------- */
#home_service {
  background-color: var(--color_light_gray);
}
#home_service::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 1400px;
  background-image: url(../img/home_service_line01_1980.png);
  background-repeat: no-repeat;
  background-size: 1980px;
  background-position: top center;
  top: 300px;
  left: 0;
  z-index: -1;
}
#home_service::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 830px;
  background-image: url(../img/home_service_line02_1980.png);
  background-repeat: no-repeat;
  background-size: 1980px;
  background-position: bottom center;
  bottom: -80px;
  right: 0;
  z-index: -1;
}
#home_service .inner {
  padding-top: 70px;
  padding-bottom: 220px;
  position: relative;
  z-index: 0;
}
#home_service .inner .catch_box {
  position: relative;
  z-index: 1;
}
#home_service .inner .btn_area {
  position: relative;
  z-index: 3;
}
#home_service .inner .btn_area .btn_square a {
  background-color: var(--color_light_gray);
}
#home_service .home_service_list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 70px;
  position: relative;
  z-index: 1;
}
#home_service .home_service_item {
  position: relative;
  background-color: #FFFFFF;
  padding: 60px 35px 50px 115px;
}
#home_service .home_service_item .num {
  position: absolute;
  top: 50px;
  left: -0.3em;
  display: inline-block;
  background-image: linear-gradient(75deg, #5279ca 0%, #374884);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: var(--font_90);
}
#home_service .home_service_item .home_service_in {
  display: flex;
  justify-content: space-between;
}
#home_service .home_service_item .txt_area {
  width: 42%;
  padding-top: 60px;
}
#home_service .home_service_item .txt_area .ttl {
  font-size: var(--font_28);
  font-weight: var(--font_bold);
  line-height: 1;
}
#home_service .home_service_item .txt_area .en_ttl {
  font-size: var(--font_14);
  margin-top: 10px;
}
#home_service .home_service_item .txt_area .txt {
  font-weight: var(--font_medium);
  margin-top: 40px;
}
#home_service .home_service_item .img_area {
  width: 55%;
}

@media screen and (max-width: 1024px) {
  #home_service::after {
    background-size: 1280px;
  }
  #home_service::before {
    background-size: 1280px;
  }
  #home_service .home_service_item .home_service_in {
    flex-direction: column;
    gap: 50px;
  }
  #home_service .home_service_item .txt_area {
    width: 100%;
    padding-top: 0;
  }
  #home_service .home_service_item .img_area {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #home_service .home_service_item .img_area img {
    width: 110%;
  }
}
@media screen and (max-width: 768px) {
  #home_service::after {
    width: 100%;
    height: auto;
    background-image: url(../img/home_service_line01_sp.png);
    background-size: cover;
    aspect-ratio: 350/700;
    top: 400px;
  }
  #home_service::before {
    width: 100%;
    height: auto;
    background-image: url(../img/home_service_line02_sp.png);
    background-size: cover;
    aspect-ratio: 350/315;
    bottom: -40px;
  }
  #home_service .inner {
    padding-bottom: 160px;
  }
  #home_service .home_service_list {
    gap: 20px;
  }
  #home_service .home_service_item {
    padding: 115px 25px 70px;
  }
  #home_service .home_service_item .num {
    font-size: var(--font_75);
    top: 20px;
    left: -0.15em;
  }
  #home_service .home_service_item .home_service_in {
    gap: 20px;
  }
  #home_service .home_service_item .txt_area .ttl {
    font-size: var(--font_24);
  }
  #home_service .home_service_item .txt_area .en_ttl {
    font-size: var(--font_12);
  }
  #home_service .home_service_item .txt_area .txt {
    font-size: var(--font_14);
    font-weight: var(--font_Regular);
    margin-top: 20px;
  }
}
/* ---------------------------------------- #home_achievements ---------------------------------------- */
#home_achievements {
  background-color: var(--color_blue);
  color: #FFFFFF;
  position: relative;
}
#home_achievements::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 970px;
  background-image: url(../img/home_achievements_line01_1980.png);
  background-repeat: no-repeat;
  background-size: 1980px;
  background-position: bottom center;
  bottom: -53px;
  left: 0;
}
#home_achievements .inner {
  max-width: var(--inner_width_l);
  padding-top: 260px;
  padding-bottom: 260px;
  display: flex;
  justify-content: space-between;
  gap: 10%;
  position: relative;
  z-index: 1;
}
#home_achievements .inner .catch_box {
  width: 300px;
}
#home_achievements .achieve_list {
  max-width: 825px;
  flex: 1;
  border-top: 1px solid transparent;
  border-image: linear-gradient(75deg, #ffffff 0%, #5279ca) 1;
}
#home_achievements .achieve_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 0 50px 2%;
  column-gap: 8%;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(75deg, #ffffff 0%, #5279ca) 1;
}
#home_achievements .achieve_item .catch_area {
  width: 40%;
}
#home_achievements .achieve_item .txt_area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
}
#home_achievements .achieve_item .txt_area .ttl {
  font-size: var(--font_28);
  font-weight: var(--font_bold);
}
#home_achievements .achieve_item .txt_area .txt {
  line-height: 2.1;
}

@media screen and (max-width: 1024px) {
  #home_achievements .inner {
    flex-direction: column;
    gap: 100px;
  }
}
@media screen and (max-width: 768px) {
  #home_achievements::after {
    width: 100%;
    height: auto;
    background-image: url(../img/home_achievements_line01_sp.png);
    background-size: cover;
    aspect-ratio: 350/235;
    bottom: -35px;
  }
  #home_achievements .inner {
    padding-top: 130px;
    padding-bottom: 130px;
  }
  #home_achievements .achieve_item {
    flex-direction: column;
    gap: 30px;
    padding: 30px 0 48px 2%;
  }
  #home_achievements .achieve_item .catch_area {
    width: 90%;
  }
  #home_achievements .achieve_item .txt_area {
    width: 100%;
    gap: 10px;
  }
  #home_achievements .achieve_item .txt_area .ttl {
    font-size: var(--font_24);
  }
  #home_achievements .achieve_item .txt_area .txt {
    font-size: var(--font_14);
  }
}
/* ---------------------------------------- #home_company ---------------------------------------- */
#home_company {
  background-color: var(--color_light_gray);
}
#home_company .inner {
  max-width: var(--inner_width_l);
  position: relative;
  height: 1390px;
  padding-bottom: 250px;
  display: flex;
  justify-content: flex-end;
  z-index: 0;
}
#home_company .catch_area {
  width: 670px;
  height: 710px;
  background-color: #FFFFFF;
  margin-top: -85px;
  padding: 100px 30px 30px;
  display: flex;
  flex-direction: column;
  row-gap: 60px;
}
#home_company .catch_area .txt_area {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 50px;
}
#home_company .catch_area .txt_area .ttl {
  font-size: var(--font_45);
  font-weight: var(--font_bold);
  line-height: 1.4;
  letter-spacing: 0.1em;
}
#home_company .catch_area .txt_area .txt {
  line-height: 2.5;
}
#home_company .img_area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}
#home_company .img_area .img {
  position: absolute;
}
#home_company .img_area .img:nth-child(1) {
  width: 550px;
  top: 127px;
  left: -50px;
}
#home_company .img_area .img:nth-child(2) {
  width: 493px;
  top: 730px;
  right: -175px;
}
#home_company .img_area .img:nth-child(3) {
  width: 454px;
  top: 815px;
  right: 446px;
}

@media screen and (max-width: 768px) {
  #home_company .inner {
    display: block;
    height: auto;
    padding-bottom: 115px;
  }
  #home_company .catch_area {
    width: 100%;
    height: auto;
    padding: 60px 25px 30px;
    margin-top: 0;
    row-gap: 35px;
    position: relative;
    top: -45px;
  }
  #home_company .catch_area .txt_area {
    flex-direction: row;
    align-items: center;
    gap: 25px;
  }
  #home_company .catch_area .txt_area .ttl {
    font-size: var(--font_30);
    line-height: 1.6;
    letter-spacing: 0.3em;
  }
  #home_company .catch_area .txt_area .txt {
    writing-mode: horizontal-tb;
    font-size: var(--font_14);
    line-height: 2;
  }
  #home_company .img_area {
    position: static;
  }
  #home_company .img_area .img {
    position: static;
  }
  #home_company .img_area .img:nth-child(1) {
    width: 233px;
    margin-left: -9%;
  }
  #home_company .img_area .img:nth-child(2) {
    width: 211px;
    margin-top: 30px;
    margin-left: calc(100vw - 6% - 211px);
  }
  #home_company .img_area .img:nth-child(3) {
    width: 192px;
    margin-left: -9%;
    margin-top: 40px;
  }
}
/* ---------------------------------------- #home_recruit ---------------------------------------- */
#home_recruit {
  padding-top: 100px;
  padding-bottom: 100px;
  z-index: auto;
}
#home_recruit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url(../img/home_recruit_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right bottom;
}
#home_recruit .inner {
  position: relative;
  z-index: 2;
}
#home_recruit .catch_area {
  background-color: #FFFFFF;
  max-width: 845px;
  margin: 0 auto;
  padding: 75px 50px 65px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
#home_recruit .catch_area .cat {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color_blue);
  color: var(--color_light_gold);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 70px;
  font-size: var(--font_22);
  font-weight: bold;
}
#home_recruit .catch_area .ttl {
  font-size: var(--font_40);
  font-weight: var(--font_bold);
  text-align: center;
  line-height: 1.5;
}
#home_recruit .catch_area .txt {
  max-width: 535px;
}
#home_recruit .catch_area .btn_square {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  #home_recruit::before {
    background-image: url(../img/home_recruit_bg_sp.jpg);
  }
  #home_recruit .catch_area {
    padding: 95px 24px 60px;
  }
  #home_recruit .catch_area .cat {
    font-size: var(--font_16);
    width: 130px;
    height: 55px;
  }
  #home_recruit .catch_area .ttl {
    font-size: var(--font_26);
  }
  #home_recruit .catch_area .txt {
    font-size: var(--font_14);
  }
}
/* ---------------------------------------- 
 - header
---------------------------------------- */
#header {
  position: fixed;
  padding: var(--inner_padding);
  padding-right: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: #FFFFFF;
  --head_h: 60px;
}
#header .inner {
  width: 100%;
  height: var(--head_h);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header .head_logo {
  width: 150px;
}
#header .nav_open {
  display: none;
}
#header #head_nav {
  position: relative;
  z-index: 888;
}
#header #head_nav .nav_list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--head_h);
  font-size: var(--font_14);
  position: relative;
}
#header #head_nav .nav_list a {
  display: flex;
  align-items: center;
  padding: 8px 0.1em;
  line-height: 1;
  background-image: linear-gradient(var(--color_blue), var(--color_blue));
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 2px;
  transition: background-size 0.3s;
}
#header #head_nav .nav_list a:hover, #header #head_nav .nav_list a.active {
  background-position: bottom left;
  background-size: 100% 2px;
}
#header #head_nav .nav_list a span {
  display: none;
}
#header #head_nav .nav_list .btn a {
  background-image: none;
  background-color: var(--color_dark_gold);
  color: #FFFFFF;
  height: var(--head_h);
  padding: 0 2em;
  border-bottom: none;
  transition: all 0.4s ease-in-out;
}
#header #head_nav .nav_list .btn a:hover {
  background-color: var(--color_blue);
}
#header #head_nav .nav_list .nav_item {
  position: relative;
}
#header #head_nav .nav_list .nav_item .sub_nav_wrap {
  position: absolute;
  width: 220px;
  top: 100%;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 889;
  padding-top: 10px;
}
#header #head_nav .nav_list .nav_item .sub_nav_list {
  padding: 30px 25px;
  background: #FFFFFF;
  box-shadow: 2px 2px 9px 3px rgba(55, 72, 128, 0.25);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#header #head_nav .nav_list .nav_item .sub_nav_list .sub_nav_item a {
  display: flex;
  gap: 9px;
  line-height: 1;
  background: none;
  transition: background-color 0.3s;
}
#header #head_nav .nav_list .nav_item .sub_nav_list .sub_nav_item a::before {
  content: "";
  display: block;
  width: 9px;
  height: 0.5px;
  background-color: var(--color_blue);
  transition: all 0.3s ease;
}
#header #head_nav .nav_list .nav_item .sub_nav_list .sub_nav_item a:hover::before {
  width: 5px;
}
#header #head_nav .nav_list .nav_item:hover > .sub_nav_wrap {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#header #head_nav .nav_list .nav_item:nth-child(2) > a::after {
  content: "";
  display: block;
  width: 12px;
  height: 6px;
  background-image: url(../img/arrow_navi.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-left: 5px;
  transform: rotate(180deg);
}
#header #head_nav .nav_list .nav_item:nth-child(2) > a:hover::after {
  transform: rotate(0);
}

/* 1024px */
@media screen and (max-width: 1024px) {
  #header {
    position: fixed;
    background-color: #FFFFFF;
    padding: 0 3%;
  }
  #header .head_logo {
    position: relative;
    z-index: 150;
  }
  #header .nav_open {
    position: relative;
    z-index: 150;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-end;
    cursor: pointer;
    width: 50px;
    height: 28px;
  }
  #header .nav_open span {
    display: inline-block;
    transition: all 0.4s;
    left: 0;
    height: 2px;
    background-color: var(--color_blue);
    width: 100%;
  }
  #header .nav_open.active span {
    background-color: #FFFFFF;
  }
  #header .nav_open.active span:nth-of-type(1) {
    transform: rotate(30deg) translate(6px, 11px);
  }
  #header .nav_open.active span:nth-of-type(2) {
    background: transparent;
  }
  #header .nav_open.active span:nth-of-type(3) {
    transform: rotate(-30deg) translate(6px, -11px);
  }
  #header #head_nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    margin-top: -100vh;
    z-index: 100;
    background-color: var(--color_blue);
    opacity: 0.3;
    transition: all 0.5s ease-in-out;
    flex-direction: column;
    gap: 10%;
    padding: 15vh 6% 100px;
  }
  #header #head_nav.panelactive {
    margin-top: 0;
    opacity: 1;
  }
  #header #head_nav .nav_list {
    font-size: var(--font_20);
    font-weight: var(--font_bold);
    color: #FFFFFF;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    flex-direction: column;
    gap: 2em;
  }
  #header #head_nav .nav_list .nav_item {
    width: 100%;
  }
  #header #head_nav .nav_list .nav_item .sub_nav_wrap {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
    width: 100%;
    padding-top: 0;
    box-shadow: none;
  }
  #header #head_nav .nav_list .nav_item .sub_nav_list {
    background: none;
    box-shadow: none;
    padding: 20px 0 0;
  }
  #header #head_nav .nav_list .nav_item .sub_nav_list .sub_nav_item a {
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-weight: var(--font_Regular);
  }
  #header #head_nav .nav_list .nav_item .sub_nav_list .sub_nav_item a::before {
    background-color: #FFFFFF;
  }
  #header #head_nav .nav_list .nav_item:nth-child(2) > a::after {
    content: unset;
  }
  #header #head_nav .nav_list a {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  #header #head_nav .nav_list a span {
    display: block;
    font-size: var(--font_10);
  }
  #header #head_nav .nav_list .btn a {
    background-color: unset;
    padding: 0;
    height: auto;
  }
}
/* 768px */
@media screen and (max-width: 768px) {
  #header .head_logo {
    width: 130px;
  }
  #header .nav_open {
    width: 35px;
    height: 25px;
  }
  #header .nav_open.active span:nth-of-type(1) {
    transform: rotate(30deg) translate(6px, 10px);
  }
  #header .nav_open.active span:nth-of-type(3) {
    transform: rotate(-30deg) translate(6px, -10px);
  }
  #header #head_nav .nav_list {
    width: 90%;
  }
  #header #head_nav .nav_list a {
    align-items: flex-start;
  }
}
/* ---------------------------------------- 
 - footer
---------------------------------------- */
#foot_area {
  overflow: hidden;
  position: relative;
  width: 100%;
}
#foot_area::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 690px;
  background-image: url(../img/footer_line01_1980.png);
  background-repeat: no-repeat;
  background-size: 1980px;
  background-position: bottom right;
  bottom: 0;
  right: 0;
  z-index: 1;
}

#footer {
  padding: var(--inner_padding);
  padding-bottom: 15px;
  position: relative;
}
#footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color_blue);
}
#footer .inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--inner_width);
  margin: 0 auto;
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 55px;
  padding-bottom: 55px;
}
#footer .logo_area {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
#footer .logo_area .foot_logo {
  width: 250px;
}
#footer .logo_area .txt {
  font-size: var(--font_12);
}
#footer #foot_nav {
  font-size: var(--font_14);
}
#footer #foot_nav .nav_list {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 400px;
  column-gap: 60px;
  row-gap: 10px;
}
#footer #foot_nav a {
  padding-bottom: 3px;
  background-image: linear-gradient(#FFFFFF, #FFFFFF);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 1px;
  transition: background-size 0.3s;
}
#footer #foot_nav a:hover {
  background-position: bottom left;
  background-size: 100% 1px;
}
#footer .copy {
  font-size: var(--font_12);
  font-weight: var(--font_bold);
  text-align: center;
  color: #FFFFFF;
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 1024px) {
  #foot_area::after {
    background-size: 1280px;
  }
}
@media screen and (max-width: 768px) {
  #foot_area::after {
    width: 100%;
    height: auto;
    background-image: url(../img/footer_line01_sp.png);
    background-size: cover;
    aspect-ratio: 350/290;
    bottom: 190px;
  }
  #footer .inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 55px;
    padding-bottom: 80px;
  }
  #footer .logo_area {
    gap: 20px;
  }
  #footer .logo_area .foot_logo {
    width: 178px;
  }
  #footer #foot_nav .nav_list {
    flex-direction: column;
    justify-content: flex-start;
    width: auto;
    height: 10em;
    row-gap: 12px;
  }
  #footer .copy {
    font-size: var(--font_10);
  }
}

/*# sourceMappingURL=style.css.map */