@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');
html{
scroll-behavior: smooth;
}

*{ 
    font-feature-settings : "palt";
    letter-spacing: 0.5px;
}

body {
font-size:clamp(0.9rem, 0.818rem + 0.41vw, 1.125rem);
color: #444444;
font-family: Arial, Helvetica,"BIZ UDPGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
background-color: #fff;
/*320-1200　16px-18px*/
line-height: 170%;
}

li { list-style: none; }

ul {
	margin: 0;
	padding: 0;
}

a, a:link, a:visited {
	color: #0771bc;
}

a:hover {
	color: #0093bd;
	opacity: 0.8;
	transition: 0.5s;
}

p{
font-size:clamp(0.9rem, 0.818rem + 0.41vw, 1.125rem);
    margin: 0;
    padding: 0;
    text-align: left;
}


h3{
	font-size:clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
    margin: 0 0 clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem) 0;
}
h3 span{
    display: block;
    font-size: 0.8rem;
    font-weight: normal;
    color: #2998e6;
}


h4{
padding: 10px;
margin: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem) 0;
background: #e5f6ff;
text-align: left;

}

i{ margin-right: 5px; }

.wrapper{

}

.container{
width: clamp(300px, 98%, 1200px);
padding: clamp(1.25rem, 0.568rem + 3.41vw, 3.125rem) 0;
 margin: 0 auto;
 text-align: center
}

.fc_w { color: #fff!important; }
.fc_w:hover, .fc_w:visited, .fc_w:link { color: #fff; }
.fc_g { color: #575757; }
.fc_y{color: #a9a680}
.fc_r{color: #e95243}
.fc_b{color: #14a2f2;}
.fc_o{color: #ff961b;}
.flo_right { float: right;}
.flo_left { float: left; }
.display_ib{display: inline-block}

.ind {
	text-indent: -1em;
	margin-left: 1em;
}

.mb0  {margin-bottom: 0!important}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mr10 {margin-right: 10px;}
.ml10 {margin-left: 10px;}
.ml20 {margin-left: 20px;}
.ml30 {margin-left: 30px;}
.mb10 {margin-bottom: 10px!important;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mt30a{margin: 30px auto 0 auto!important}

.txt_c{text-align: center!important;}
.txt_l{ text-align: left!important;}
.txt_r{text-align: right!important;}

.fs_s {font-size: 80%!important;}
.fs_l {font-size: 120%!important;}
.fw_b {font-weight: bold;}

.fle {
	display: flex;
    align-items: flex-start;
    align-items: center;
}
.notice{
    font-size: 1.4rem;
}

::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-thumb {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #bfdfef), to(#609cd4));
  background: linear-gradient(to bottom, #bfdfef 50%, #609cd4);
    /*
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #5ac5fc), to(#1b7ad3));
  background: linear-gradient(to bottom, #5ac5fc 50%, #1b7ad3);*/
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  background: #fff;
}


::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-thumb {
  background: #609cd4;
    /*
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #5ac5fc), to(#1b7ad3));
  background: linear-gradient(to bottom, #5ac5fc 50%, #1b7ad3);*/
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  background: #fff;
}

.container {
  scrollbar-width: 7px;
  scrollbar-color: #609cd4;
}

/*白背景*/

.wrapper#interview,.wrapper#training,.wrapper#guidelines,.wrapper#btn_box,.wrapper#office_img{
    background: #fff;
}


/*ヘッダー・ナビ*/



header img{
 width:300px;
height: auto;
margin: 0;
    padding: 0;
}
header h1{
margin: 0;
    padding: 0;
font-weight: normal;
font-size: 1.4rem;
color: #132f56;
float: left;
}

/*
======================
*/
.header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.hamburger-menu {
  width: 90px;
  height: 50px;
  position: relative;
  border: none;
  background: transparent;
  appearance: none;
  padding: 0;
  cursor: pointer;
  z-index: 9999;
}
.hamburger-menu__bar {
  display: inline-block;
  width: 44%;
  height: 1px;
  background: #242424;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: .5s;
}
.hamburger-menu__bar:first-child {
  top: 16px;
}
.hamburger-menu__bar:nth-child(2) {
  top: 24px;
}
.hamburger-menu__bar:last-child {
  top: 32px;
}
.hamburger-menu--open .hamburger-menu__bar {
  top: 50%;
}
.hamburger-menu--open .hamburger-menu__bar:first-child {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.hamburger-menu--open .hamburger-menu__bar:last-child {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
  display: none;
}

.nav {
  background: rgba(255, 255, 255, 0.9);
}
.navigation {
  display: none;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 0px;
  width: 100%;
height:100Vh;
  z-index: 999;
padding-top:50px;

}
.navigation__list {
  text-align: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.navigation__list-item {
  
}
.navigation__list-item:first-child {

}
.navigation__link {
  color: #333!important;
  text-decoration: none;
  display: block;
  padding: 18px 0;
  transition: .5s;
font-size:1.8rem;
          font-family: "Questrial", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.navigation__link span {
  color:#00A5BF;
font-size:1rem;
margin-left:5px;
  display: block;
    font-weight: normal;
}
@media (hover: hover) and (pointer: fine) {
  .navigation__link:hover {
    background: #eee;

  }
}

/*
=====================
*/


/*メイン*/
.wrapper#main_info {
    background: linear-gradient( 180deg,  rgba(255,255,255,0) 0%, rgba(202,233,254,0.4) 100% );
    padding-top: 0px;

}

#main_info .container{
        padding-top: 20px;
    padding-bottom: 0;
}

#main_info .main_image{
   background-image:url("../image/main.png"), linear-gradient( 109.6deg,  rgba(241, 245, 232,0.4) 11.2%, rgba(101 , 191, 253,0.4) 91.1% );
 background-size: contain,auto;
    border-radius: 50px;
    background-position: right bottom,top;
    height: 600px;
    position: relative;
}

#main_info h2{
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.8);
    position: absolute;
    bottom:40px;
    left: -20px;
    text-align: left;
    line-height: 130%;
    letter-spacing: 10px;
    font-weight: normal;
    font-size: clamp(1.5rem, 1.1rem + 2vw, 3rem);
}
h2 .op_title{
    margin-bottom: 20px;
      font-family: "Questrial", sans-serif;
  font-weight: 400;
  font-style: normal;
font-size: 1.2rem;
 background: linear-gradient( -90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 100% );
padding: 5px 25px;
line-height: 100%;
right: -20px;
    color: #123b60;
}

.linear{
background: linear-gradient(transparent 70%, #fff 0%);
margin: 0 2px;
}



.read{
text-align: center;
letter-spacing: 5px;
margin-top: -15px;
    color: #0771bc;
}




/*人物像*/

.wrapper#ideal_candidate{
    background: linear-gradient( 180deg, rgba(202,233,254,0.4) 0%, #fff 100% );
    margin-bottom: 0;
    padding-bottom: 0;
}

#ideal_candidate .ideal{
background-image: url("../image/aboutjts.png");
background-position: bottom left;
margin-top: 30px;
padding-bottom: 20px;
}

#ideal_candidate .ideal .ideal_box{
margin-left: 35%;
width: 65%;
text-align: left;
background: linear-gradient( 90deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.2) 100% );
box-shadow: 0px 0px 10px 8px rgba(88, 178, 205,0.1);
padding: 20px;
margin-bottom: 20px;
border-radius: 20px;
}

#ideal_candidate .ideal .ideal_box .title{
    color: #009cf6;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/*はたらく環境・仕事を知る*/

.wrapper#environment {
background-image: linear-gradient(180deg, rgba(255, 237, 224, 1), rgba(255, 252, 241, 1));
}

.office_info_main{
    margin: 30px auto;
    display: flex;
}
.office_info_main li{
margin: 10px;
width: 50%;
}
.sapporo_work{
    display: flex;
}
.sapporo_work img{
    width: 200px;
    height: auto;
}

.work_schedule{
    background: #eaf2f3;
    padding: 20px 10px;
    margin-top: 10px;
}

.work_schedule a{
    text-decoration: none;
    color: #fff;
}

.work_btn{
 background-image: linear-gradient(90deg, rgba(42, 179, 252, 1), rgba(58, 99, 255, 1) 90%);
    color: #fff;
    border-radius: 30px;
    width: 90%;
    margin:10px auto;
    cursor: pointer;
    border: none;
  outline: none;
   line-height: 100%;
vertical-align: middle;
display: flex;
  flex-wrap: nowrap;
justify-content: space-between;
 align-items:center;
}

.work_btn p{
    margin-left: 30px;
}

.work_btn .work_arrow {
color: #14a2f2;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 48;
font-size: 2rem!important;
	z-index: 100;
    text-align: center;
    margin: 10px;
	padding:0;
    line-height: 100%;
	border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: rgba(255,255,255,1);
}

.office_info_main .details__summary{
background-image: linear-gradient(180deg,  rgba(24,95,246,1) 14.4%, rgba(27,69,166,1) 90.8% );
    color: #fff;
    padding: 12px;
    border-radius: 10px;
}

.office_info_main .work_details{
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-top:10px
}



.member li .member_arrow {
color: #14a2f2;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 48;
font-size: 3rem!important;
	z-index: 999;
    text-align: center;
    margin: 10px;
	padding:0;
    line-height: 100%;
	border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: rgba(255,255,255,0.85);
    position: absolute;
    bottom: 20px;
    right: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

/*仕事モーダル*/
.work_modal-content{
    background-color: #fff;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;
    
    display: flex;
    border-radius: 5px;
    border: #0060b7 2px solid;
    padding: 20px;
    text-align: left;
    box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.15);
    width: 90%;
  max-width: 1200px;
  margin: 5% auto;
    position: relative;
}

.work_modal-content li:nth-child(2){
    text-align: center;
}

.work_modal-content li .overf{
    overflow-y: scroll;
    overflow-x: hidden;
     -webkit-mask-image: linear-gradient(to top, transparent, #FFF 10px, #FFF calc(100% - 10px), transparent);
  mask-image: linear-gradient(to top, transparent, #FFF 10px, #FFF calc(100% - 10px), transparent);
        height: 420px;
    padding-bottom: 20px;
}

.work_modal-content li .work_tit{
    background: #0060b7;
    padding: 10px 35px 10px 20px;
    color: #fff;
    position: absolute;
    top:0;
    left: 0;
    margin-bottom: 20px;
    border-bottom-right-radius: 20px;
}

.work_modal-content li .headline{
    font-size: 1.2rem;
    line-height: 130%;
    color: #0060b7;
    margin: 20px 0 15px 0;
    font-weight: bold;
    padding-top: 30px;
}

.work_modal-content li p{
    font-size: 1rem;
    line-height: 150%;
    padding-top: 10px;
}

.work_modal-content li .oneday_info{
    background: #ddf1fb;
    border-radius: 10px;
    padding: 8px 15px;
    font-size: 0.9rem;
    line-height: 130%;
    margin-top: 10px;
}
.work_modal-content li .oneday_info_tit {
  color: #58abff;
  margin-bottom: 8px;
font-weight: bold;
}

.work_modal-content li .oneday{
     background: #cdeefd;
    color: #3b9cff;
    font-weight: bold;
    border-radius: 20px;
    width: 90%;
    margin: 30px auto 20px auto;
}

.work_modal-content .modal_close {
position: absolute;
    top:10px;
    right: 10px;

}



/*インタビュー*/
.member{
    display: flex;
    margin-top: 40px;
    flex-wrap:nowrap;
    overflow-x: scroll;
     -webkit-mask-image: linear-gradient(to right, transparent, #FFF 20px, #FFF calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, transparent, #FFF 20px, #FFF calc(100% - 20px), transparent);
}

.member li{
    border-radius: 50px;
 height: 460px;
    margin:0 10px;
position: relative;
    background-size: 85%,100%;
    background-position: -30px bottom,0;
    background-repeat: no-repeat,no-repeat;
    flex-basis:320px;
    flex-shrink:0;
}

.member li .member_pack{
position: absolute;
    width: 180px;
    text-align: right;
    right: 0;
    font-size: 0.8rem;
    margin-top: 130px;
    margin-right: 10px;
}

.member_pack .member_name{
font-size: 3rem;
font-weight: bold;
padding-right: 30px;
margin-bottom: 30px;
display: block;
}

.pos{
 background:rgba(255,255,255,0.85);
border-radius: 30px;
padding: 0px 10px;
line-height: 165%;
margin-bottom: 5px;
display: inline-block;
}
.member_dp01{
border: 1px #4163f7 solid;
color: #4163f7;
}
.member_dp02{
border: 1px #17a276 solid;
color: #17a276;
}
.member_dp03{
border: 1px #ed8324 solid;
color: #ed8324;
}
.member_year{
border: 1px #ff347c solid;
color: #ff347c;
}
.member_office{
border: 1px #8a19da solid;
color: #8a19da;
}


.member li .member_arrow {
color: #14a2f2;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 48;
font-size: 3rem!important;
	z-index: 999;
    text-align: center;
    margin: 10px;
	padding:0;
    line-height: 100%;
	border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: rgba(255,255,255,0.85);
    position: absolute;
    bottom: 20px;
    right: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}


/*人物画像,背景*/
.bg_as{
    background:url("../image/as.png"), linear-gradient(103.3deg,  rgba(252,225,208,1) 30%, rgba(255,173,214,1) 55.7%, rgba(162,186,245,1) 81.8%);
}
.bg_kh{
    background:url("../image/kh.png"), linear-gradient(109.6deg,  rgba(142,224,254,1) 11.2%, rgba(255,254,116,0.83) 56.5%, rgba(255,172,67,1) 99.6%);
        background-size: 82%,100%!important;
}

.bg_ym{
    background:url("../image/ym.png"), linear-gradient(89.9deg,  rgba(208,246,255,1) 0.1%, rgba(255,237,237,1) 47.9%, rgba(255,255,231,1) 100.2%);
        background-size: 82%,100%!important;
}

.bg_nh{
    background:url("../image/nh.png"), linear-gradient(95.2deg,  rgba(173,252,234,1) 26.8%, rgba(192,229,246,1) 64%);
        background-size: 82%,100%!important;
}

.bg_hs{
    background:url("../image/hs.png"), radial-gradient( circle 1029px at 0.1% 1.5%,  rgba(252,15,15,0.51) 0%, rgba(252,180,24,0.54) 14.7%, rgba(255,253,26,0.53) 29.7%, rgba(85,255,18,0.53) 47.1%, rgba(16,215,255,0.53) 67.8%, rgba(130,10,255,0.51) 86.7%, rgba(255,22,181,0.53) 99.9% );
        background-size: 82%,100%!important;
}

.bg_st{
    background:url("../image/st.png"), radial-gradient( circle farthest-corner at 10% 20%,  rgba(234,251,86,0.88) 0%, rgba(165,225,27,1) 90% );
        background-size: 82%,100%!important;
}



/*インタビューモーダル*/


.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

/* :target で モーダル を表示 */
.modal:target {
  display: block;
}


/* ズームアニメーション */
.zoom {
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal_close:hover,
.modal_close:focus {
  color: linear-gradient(90deg, rgba(58,149,232,1) 0%, rgba(0,207,211,1) 100%);
}

.modal_close {
color: #14a2f2;
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 48;
font-size: 3rem!important;
	z-index: 999;
    text-align: center;
	padding:0;
    line-height: 100%;
  float: right;
  cursor: pointer;
  text-decoration: none;
    right:0;
    border: 1px solid #14a2f2;
background: rgba(255,255,255,0.7);
}


.modal-content{
    display: flex;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    text-align: left;
    box-shadow: 0px 0px 10px 8px rgba(0, 0, 0, 0.15);
      width: 90%;
  max-width: 1200px;
  margin: 10% auto;
}

.modal-content li:nth-child(1){
flex-basis: 320px;
    margin: 20px 20px 0 5px;
}

.modal-content li img{
    width: 100%;
    height: auto;
    margin: 2px;
}

.modal-content .member_name{
font-size: 3rem;
font-weight: bold;
padding-right: 30px;
margin: 20px 20px 10px 20px;
display: block;
}

.modal-content .pos{
    font-size: 0.8rem;
}

.modal_qa{
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
     -webkit-mask-image: linear-gradient(to top, transparent, #FFF 20px, #FFF calc(100% - 20px), transparent);
  mask-image: linear-gradient(to top, transparent, #FFF 20px, #FFF calc(100% - 20px), transparent);
    padding: 20px 30px 20px 20px;
    
}


.modal-content .modal_q{
    color: #0c17a8;
    margin-bottom: 3px;
    font-weight: bold;
}

.modal-content .modal_a{
    margin-bottom: 10px;
    font-size: 1rem
}


/*データで見る日本トータルシステム*/

.wrapper#data {
  background: #e5f1f9;
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, #d8ebf7 100%);
}

#data .jts_data{
    width: 100%;
    display: flex;
justify-content: space-around;
	flex-wrap: wrap;
    margin: 30px auto;
}
#data .jts_data li{
    width: 260px;
    color: #14a2f2;
    background: #fff;
    border-radius: 20px;
    padding: 10px 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 5px #76cbfb solid;
    /*box-shadow: 0px 0px 10px 0px rgba(104, 191, 240, 1);*/
}

#data .jts_data li .number {
margin-top: 8px;
font-weight: bold;
background: linear-gradient(180deg, #14a2f2 48%, #0573e8 74%);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}

#data .jts_data li .number span{
  font-size: 2.5rem;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
letter-spacing: 2px;
 margin: 0 3px;
}

#data .jts_data li p{
    color: #444444;
  text-align: center;
    font-size: 0.8rem;
    line-height: 150%;
    margin-top: 5px;
}

.jts_data img{
width: 120px;
float: right;
}


/*プライベート写真*/

#data .slide_txt{
    text-align: center;
     display: block;
    font-size: 1.2rem;
    font-weight: normal;
    color: #2998e6;
    margin-bottom: 20px;
}

#data .slider-wrapper{
overflow: hidden;
display: flex;
}

#data .slider img{
  display: block;
width:200px;
height: auto;
}
#data .slider {
  animation: scroll-left 20s infinite linear .5s both;
  display: flex; 
}
#data .slide{
 width: calc(100vw / 6); 
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}



/*入社後の研修やOJT*/

#training dl{
    display: flex;
    width: 80%;
    margin: 40px auto;
    background: #f5f5f5;
}

#training dt{
    background: #00cecb;
    color: #fff;
    padding: 20px;
    font-size: 1.5rem;
}

#training dt span{
    background: #00b4b0;
    color: #fff;
    font-size: 0.9rem;
    border-radius: 10px;
    display: block;
    width: 120px;
    margin-top: 10px;
}

#training dd{
    color: #7a7a7a;
    padding: 20px;
    text-align: left;
}


/*福利厚生*/

.wrapper#benefits {
  background-image: linear-gradient(180deg, rgba(255, 227, 229, 1), rgba(255, 241, 242, 1));
}

#benefits ul{
    width: 100%;
    display: flex;
	flex-wrap: wrap;
justify-content: space-between;
    margin: 30px auto;
}
#benefits ul li{
width: 32%;
text-align: left;
align-self: stretch;
background: #fff;
padding: 20px;
border-radius: 20px;
box-shadow: 0px 0px 10px 0px rgba(245, 191, 191, 1);
    font-size: 1rem;
}

#benefits ul li h5{
    font-size: 1.2rem;
    margin: 0 auto 10px auto;
    border-bottom: #c5cae9 2px dotted;
    text-align: center;
}

#benefits .other{
    padding: 20px;
border-radius: 20px;
text-align: left;
    background: #fff;
    box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 1);
}


/*会社風景*/

#office_img{
margin: 0px auto -20px auto;
padding-top: 40px;

}

#office_img .slider_office{
overflow: hidden;
display: flex;
}
#office_img img{
margin: 10px 20px;
    height: 250px;
}
#office_img ul{
display: flex;
align-items: center;
animation: slideShow 70s infinite linear;
}


@keyframes slideShow {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}


/*募集要項*/

#guidelines table{
width: 80%;
margin: 10px auto;
}

#guidelines table td {
    background: #f5f5f5;
    padding:10px 25px;
    text-align: left;
    border-bottom: 1px solid #fff;
}

#guidelines table th{
    background: #74c7e8;
   color: #fff;
    border-bottom: 1px solid #b4e3f3;
    width: 30%;
}


#guidelines{
   
}
#guidelines .flow_img{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

#guidelines .flow_img p{ 
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    padding:30px 15px;
    color: #fff;
    line-height: 120%;
    align-items: center;
    align-self: stretch;
  background: linear-gradient(90deg, rgba(62,185,255,1) 0%, rgba(30,131,217,1) 100%);
}
#guidelines .flow_img p:not(:last-of-type){ 

}
#guidelines i{ 
font-style: normal;
}

#guidelines .flow_img span{ 
  font-size: 3rem;
    color: #c7c7c7;
    transform: scale(1, 2);
}


.gs01{
  border-top: 10px solid #3a96e9;
  border-image:linear-gradient(90deg, rgba(0,178,50,1) 0%, rgba(184,218,56,1) 100%);
  border-image-slice: 1;   
}
.gs02{
  border-top: 10px solid #3a96e9;
  border-image: linear-gradient(90deg, rgba(58,149,232,1) 0%, rgba(0,207,211,1) 100%);
  border-image-slice: 1;   
}
.gs03{
  border-top: 10px solid #ff4f68;
  border-image:linear-gradient(90deg, rgba(255,79,104,1) 0%, rgba(255,172,99,1) 100%);
  border-image-slice: 1;   
}
.gs04{
  border-top: 10px solid #f1b351;
  border-image: linear-gradient(90deg, rgba(249,181,83,1) 0%, rgba(255,215,87,1) 100%);
  border-image-slice: 1;   
}


/*footer*/

footer {
 width: 100%;
 text-align: center;
padding: 30px 0 20px 0;
border-top:2px solid #eee;
}

small {
font-size: 0.8rem;
}


/* TOPスクロール*/
#pageTop {
	position: fixed;
	bottom: 150px;
	right: 0;
	z-index: 999;
	font-size: 1.2rem;
    text-align: center;
    margin: 10px;
	padding:3px 0 0 0;
    line-height: 100%;
	border: solid #285fc6 2px;
	border-radius: 50%;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.85)
}
#pageTop i {
    color:#285fc6;
	margin: 0px auto;
}


#btn_box{
    padding: 20px 0;
}
#btn_box2{
    padding: 20px 0;
     background-color: #eeeeee;
}

#btn_box h3,#btn_box2 h3{
    	color: #1b1c1d;
}
#btn_box p{
    font-size: 1.2rem;
    text-align: center;
}

#btn_box2 ul{
    width: 100%;
    margin: 20px auto 0 auto;
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
}

#btn_box a{
    width: 40%!important;
    margin: 7px 10px;
    padding: 12px;
	color: #fff;
	border-radius:30px;
	text-align: center;
   background:linear-gradient(#34a9c6 100px,#befeff 150px);
    background-size:200px 150px;
    transition:0.5s;
     font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
    text-decoration: none;
}

#btn_box a:hover,#btn_box2 ul li:hover{
background-position:0 80%;
}   

#btn_box a,#btn_box a:hover,#btn_box a:visited,#btn_box a:link{
     color: #fff;
     display: inline-block;
}

#btn_box2 ul li{
    width: 45%!important;
    margin: 7px 10px;
	color: #1b1c1d;
	border-radius:30px;
    border: 2px solid #1b1c1d;
	text-align: center;
	cursor: pointer;
    background:linear-gradient(#ffffff 100px,#befeff 150px);
    background-size:200px 150px;
    transition:0.5s;
     display: inline-block;
}
#btn_box2 a{
padding: 12px;
display: block;
}

#btn_box2 a,#btn_box2 a:hover,#btn_box2 a:visited,#btn_box2 a:link{
width: 100%;
color: #1b1c1d;
font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
text-decoration: none;
}


/* グラデーション背景設定 */

@keyframes blob_rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.bg-blobs {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1; /* 本文より背面へ */
  width: 100%;
  height: 1200px;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  left: 50%;
  top: 50%;
  animation-name: blob_rotate; /* 中心基準で回転させ、擬似要素の相対位置を円運動させる */
  animation-timing-function: linear; /* 一定速度で回転 */
  animation-iteration-count: infinite; /* アニメーションを無限に繰り返す */
}

.blob::before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
  opacity: 0.4; /* 全体の発光強度（強すぎると本文を圧迫） */
  transform: translate(-50%, -50%); /* left/top の基準点（左上）を要素の中心に補正 */
  /* 見た目のコア：
      - background: radial-gradient（中心が最も濃く、外側でフェードアウト）
      - サイズ/位置/色/濃度は各 nth-child で個別に指定し、重なりで奥行きを作る */
}

/* 各 blob の速度や見た目（サイズ・色・配置・フェード距離）を個別に指定 */
.blob:nth-child(1) {
  animation-duration: 35000ms;
}

.blob:nth-child(1)::before {
  left: -150px;
  top: 150px;
  width: 350px;
  height: 350px;
  background: radial-gradient(rgba(62, 133, 228, 0.8) 0%, rgba(62, 133, 228, 0) 70%);
}

.blob:nth-child(2) {
  animation-duration: 30000ms;
  animation-direction: reverse; /* ひとつだけ回転の向きを反転 */
}

.blob:nth-child(2)::before {
  left: 250px;
  top: -250px;
  width: 500px;
  height: 500px;
  background: radial-gradient(rgba(252, 173, 44, 1) 0%, rgba(249, 215, 122, 0) 70%);
}

.blob:nth-child(3) {
  animation-duration: 25000ms;
}

.blob:nth-child(3)::before {
  left: 550px;
  top: 300px;
  width: 700px;
  height: 700px;
  background: radial-gradient(rgba(193, 26, 81, 0.5) 0%, rgba(193, 26, 81, 0) 70%);
}

/* ------------------------------
  レスポンシブ対応
------------------------------ */
@media (max-width: 767px) {

  .blob:nth-child(1)::before {
    left: -50px;
    top: 50px;
    width: 250px;
    height: 250px;
  }

  .blob:nth-child(2)::before {
    left: 150px;
    top: -150px;
    width: 350px;
    height: 350px;
  }

  .blob:nth-child(3)::before {
    left: 450px;
    top: 150px;
    width: 500px;
    height: 500px;
  }
}





/* pc */
@media print, screen and (min-width: 960px) {

body {

}
    
.pc_no{
        display: none;
    }
  

.container{

}

    
}

/* mobile*/
@media only screen and (max-width: 959px) {

.mob_no{
        display: none;
    }
.mob_img{
        width: 100%;
    height: auto;
    }

body {
    font-size: 1rem;
}


.container {
	width: 98%;
	}
    
header img{
 width:200px;
height: auto;
    padding-left: 5px;
}
    
    header h1{
font-size: 1rem;
}

    
.navigation__link {
  padding: 8px 0;
font-size:1.2rem;
}
.navigation__link span {
font-size:0.8rem;
}
    
    
#main_info .main_image{
   background-image:url("../image/main.png");
 background-size: contain;
    border-radius: 0px;
    background-position: right bottom;
    height: 300px;
}
    
#main_info h2{
    bottom:10px;
    left: 0px;
    text-align: left;
    line-height: 120%;
    letter-spacing: 10px;
    font-weight: normal;
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem);
}

h2 div{

}
    
/*人物ぞう*/
    
    
.wrapper#ideal_candidate{

}

#ideal_candidate .ideal{
background-image: url("../image/aboutjts.png");
background-position: bottom left;
margin-top: 30px;
padding-bottom: 20px;
}

#ideal_candidate .ideal .ideal_box{
width: 100%;
margin-left: 0;
padding: 10px;
margin-bottom: 10px;
}
    

/*スケジュール*/
    
.office_info_main{
    margin: 30px auto;
    flex-wrap: wrap;
    justify-content:center;
}
  .office_info_main li{
    width: 90%;
}

    
 .work_modal-content li:nth-child(2){
border-top: dotted #ccc;
text-align: center;
    }
 .work_modal-content{
    flex-wrap: wrap;
    justify-content:center;
    padding: 0;
    }
    
.work_modal-content .overf{
     height: 33vh!important;  
    }   
    
.work_modal-content li .headline{
font-size: 1rem;
}
.work_modal-content li .headline br{
display: none;
}
    
    
/*インタビュー*/
.modal-content{
    flex-wrap: wrap-reverse;
    padding: 10px;
}

.modal-content li img{
width: 47%!important;
display: inline-block;
    }

.modal-content li img{
    width: 100%;
    height: auto;
    margin: 2px;
}
    
    
    
 /*データ*/
    

#data .slider img{
width:120px;
height: auto;
}
    
    
/*福利厚生*/

#benefits ul li{
width: 100%;
margin-bottom: 20px;
}

    
    
/*入社後の研修やOJT*/

#training dl{
    width: 100%;
}
 
#training dd{
    padding: 10px;
    margin-left: 10px;
}
    
    
/*募集要項*/

#guidelines table{
width: 100%;
margin: 10px auto;
}
    
#guidelines .flow_img{
display: block;
}

#guidelines .flow_img p{ 
 width: clamp(300px, 80%, 600px);
    text-align: center;
}

#guidelines .flow_img p br{ 
display: none
}


#guidelines .flow_img span{ 
  transform:scale(2, 1) rotate(90deg);
    display: block!important;
}  
    
	
    }