@charset "UTF-8";
/*! sanitize.css v4.1.0 | CC0 License | github.com/jonathantneal/sanitize.css */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }

main { overflow: hidden; }

audio, canvas, progress, video { display: inline-block; }

audio:not([controls]) { display: none; height: 0; }

template, [hidden] { display: none; }

*, ::before, ::after { background-repeat: no-repeat; -webkit-box-sizing: inherit; box-sizing: inherit; }

::before, ::after { text-decoration: inherit; vertical-align: inherit; }

html { -webkit-box-sizing: border-box; box-sizing: border-box; cursor: default; font-family: sans-serif; line-height: 1.5; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

h1 { font-size: 2em; margin: .67em 0; }

code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

hr { height: 0; overflow: visible; }

nav ol, nav ul { list-style: none; }

abbr[title] { border-bottom: 1px dotted; text-decoration: none; }

b, strong { font-weight: inherit; }

b, strong { font-weight: bolder; }

dfn { font-style: italic; }

mark { background-color: #ff0; color: #000; }

progress { vertical-align: baseline; }

small { font-size: 83.3333%; }

sub, sup { font-size: 83.3333%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -.25em; }

sup { top: -.5em; }

::-moz-selection { background-color: #b3d4fc; color: #000; text-shadow: none; }

::selection { background-color: #b3d4fc; color: #000; text-shadow: none; }

audio, canvas, iframe, img, svg, video { vertical-align: middle; }

img { border-style: none; }

svg { fill: currentColor; }

svg:not(:root) { overflow: hidden; }

a { background-color: transparent; -webkit-text-decoration-skip: objects; }

a:hover {
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease; }
@media screen and (min-width: 350px) {
 a:hover {
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  opacity: 0.9; } 
}

table { border-collapse: collapse; border-spacing: 0; }

button, input, select, textarea { background-color: transparent; border-style: none; color: inherit; font-size: 1em; margin: 0; }

button, input { overflow: visible; }

button, select { text-transform: none; }

button, html [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; }

::-moz-focus-inner { border-style: none; padding: 0; }

:-moz-focusring { outline: 1px dotted ButtonText; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; }

legend { display: table; max-width: 100%; padding: 0; white-space: normal; }

textarea { overflow: auto; resize: vertical; }

[type='checkbox'], [type='radio'] { padding: 0; }

::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }

[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }

::-webkit-search-cancel-button, ::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-input-placeholder { color: inherit; opacity: .54; }

::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

[aria-busy='true'] { cursor: progress; }

[aria-controls] { cursor: pointer; }

[aria-disabled] { cursor: default; }

a, area, button, input, label, select, textarea, [tabindex] { -ms-touch-action: manipulation; touch-action: manipulation; }

[hidden][aria-hidden='false'] { clip: rect(0, 0, 0, 0); display: inherit; position: absolute; }

[hidden][aria-hidden='false']:focus { clip: auto; }

html { font-size: 100%; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; }

h1, h2, h3, h4, h5, h6, p, ul, ol, dl { margin: 0; }

ul, ol { padding-left: 0; }

li { list-style-type: none; }

dd { margin-left: 0; }

figure { margin: 0; padding: 0; }

img { max-width: 100%; vertical-align: middle; /* background: #000; */ }

table { border-collapse: collapse; }

input, button { padding: 0; border: 0; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/*------------------------------------------ */

body {
 color: #333333;
 font-size: 18px;
 line-height: 1;
 letter-spacing: 1px;
 -webkit-text-size-adjust: 100%;
 font-family: 'Noto Sans JP', sans-serif;
 background: #ffffff;
}

img {
 width: 100%;
}

a {
/* display: block;*/
 text-decoration: none;
 transition: all .3s;
}

.pc_br {
 display: block;
}

.tab_br {
 display: none;
}

.sp_br {
 display: none;
}

.pc_img {
 display: block;
}

.tab_img {
 display: none;
}

.sp_img {
 display: none;
}

.object-fit{
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: 50% 50%;
 font-family: 'object-fit: cover; object-position: center;';
}


@media screen and (max-width: 1240px) {
 .pc_br {
  display: none;
 }

}

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

 .pc_br {
  display: none;
 }

 .tab_br {
  display: block;
 }

 .sp_br {
  display: none;
 }


 .pc_img {
  display: none;
 }


 .sp_img {
  display: block;
 }
}

@media screen and (max-width: 480px) {

 .pc_img {
  display: none;
 }

 .tab_img {
  display: none;
 }

 .sp_img {
  display: block;
 }


 .sp_br {
  display: block;
 }

 .tab_br {
  display: none
 }

 .pc_br {
  display: none;
 }

}



/*  //  -------------------------------------- */


/*ーーーーーーーーーー
.header
ーーーーーーーーーーー*/
/*  ----  .header+nav-toggle etc  ----  */

#head_wrap {
 top: 0;
 position: relative;
 width: 100%;
 margin: 0px auto 0;
 line-height: 1;
 z-index: 999;
 height: 0px;
 text-decoration: none;
}

#head_wrap a {
 display: block;
 text-decoration: none;
}

#head_wrap .inner {
 width: 100%;
 margin: 0 auto;
 position: relative;
}

#head_wrap .inner:after {
 content: "";
 clear: both;
 display: block;
}

#head_wrap .logo {
 display: none;
 width: 120px;
 margin: 0;
 text-indent: -1000px;
}

#global-nav {
 position: relative;
 width: 780px;
 align-items: center;
 margin: 20px auto;
}

#global-nav ul {
 list-style: none;
 font-size: 14px;
 display: flex;
 justify-content: space-between;
}

#global-nav ul.list li a {
 position: relative;
 display: inline-block;
 text-decoration: none;
 font-size: 16px;
 font-weight: 500;
 color: #00aca3;
}

#global-nav ul.list li a::after {
 position: absolute;
 bottom: -24px;
 left: 0;
 content: '';
 width: 100%;
 height: 4px;
 background: #00aca3;
 transform: scale(0, 1);
 transform-origin: left top;
 transition: transform .3s;
}

#global-nav ul.list li a:hover::after {
 transform: scale(1, 1);
}


/* Fixed */
#head_wrap.fixed {
 position: fixed;
 top: 0;
 margin-top: 0;
 height: 76px;
 transition: top 0.65s ease-in;
 -webkit-transition: top 0.65s ease-in;
 -moz-transition: top 0.65s ease-in;
 z-index: 9999;
}

#head_wrap.fixed .inner {
 background: rgba(255, 255, 255, 0.9);
 padding: 4px 0 4px 0;
}

#head_wrap.fixed .logo {
 display: none;
}

#head_wrap.fixed #global-nav ul li a {
 display: block;
 color: #09aba3;
}

#head_wrap.fixed #global-nav ul.list li a {
 display: block;
 background: none;
}


/* Toggle Button */
#nav-toggle {
 display: none;
 position: absolute;
 right: 12px;
 top: 14px;
 width: 34px;
 height: 36px;
 cursor: pointer;
 z-index: 101;
}

#nav-toggle div {
 position: relative;
}

@media (max-width: 1520px) {
 #head_wrap {
  top: 0;
  position: fixed;
  margin-top: 0;
  width: 100%;
  padding: 0;
  /* Fixed reset */
 }
 #head_wrap .inner {
  width: 100%;
  padding: 0;
 }

 #head_wrap.fixed .inner {
  background: none;
  padding: 0;
 }

 #head_wrap .fixed {
  padding-top: 0;
  background: transparent;
 }
 #mobile-head {
  display: block;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 56px;
  z-index: 999;
  position: relative;
 }

 #head_wrap.fixed .logo {
  display: block;
 }

 #head_wrap.fixed .logo,
 #head_wrap .logo {
  position: absolute;
  left: 13px;
  top: 13px;
  display: block;
  color: #333;
  font-size: 26px;
  text-indent: 0;
 }

 #head_wrap.fixed .logo a,
 #head_wrap .logo {
  text-decoration: none;
  transition: all .3s;
 }

 #global-nav {
  position: absolute;
  /* 開いてないときは画面外に配置 */
  top: -500px;
  width: 100%;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  padding: 0 0 30px 0;
  text-align: center;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  margin: 0 auto;
 }
 #global-nav ul {
  display: block;
  list-style: none;
  position: static;
  right: 0;
  bottom: 0;
  font-size: 14px;
  margin: 20px 0 0 0;
 }

 #global-nav ul li {
  float: none;
  position: static;
  margin: 20px 0 20px 0;
 }
 #head_wrap #global-nav ul li a,
 #head_wrap.fixed #global-nav ul li a {
  width: 200px;
/*  display: block;*/
  padding: 20px 0 20px 0;
  margin: 0 auto;
  background: none;
 }
 
 #global-nav ul.list li a::after {
  bottom: 0;
 }

 #nav-toggle {
  display: block;
 }
 /* #nav-toggle 切り替えアニメーション */
 #nav-toggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #666;
  left: 0;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
 }
 #nav-toggle span:nth-child(1) {
  top: 0;
 }
 #nav-toggle span:nth-child(2) {
  top: 11px;
 }
 #nav-toggle span:nth-child(3) {
  top: 22px;
 }
 .open #nav-toggle span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  transform: rotate(315deg);
 }
 .open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
 }
 .open #nav-toggle span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-315deg);
  -moz-transform: rotate(-315deg);
  transform: rotate(-315deg);
 }
 /* #global-nav スライドアニメーション */
 .open #global-nav {
  /* #global-nav top + #mobile-head height */
  -moz-transform: translateY(556px);
  -webkit-transform: translateY(556px);
  transform: translateY(556px);
 }
}
/*  ----  // .header+nav-toggle etc ここまで  ----  */



/*  ----   main visual　で記入   -----  */
#mv .main_img {
 position: relative;
 top: 0;
 width: 100%;
 margin: 0 auto 0;
 padding: 40px 0 0 0;
}

#mv .main_img img.mv_pc {
 display: block;
 width: 90%;
 margin: 0 auto 16px;
}

#mv .main_img img.mv_sp{
 display: none;
}

#mv h1 {
 text-align: center;
 font-size: 48px;
 font-weight: 600;
 color: #09aba3;
 margin: 0 0 20px 0;
}

#mv p.lead {
 text-align: center;
 font-size: 20px;
 font-weight: 500;
 padding: 0 0 50px 0;
}

#mv p.logo {
 width: 400px;
 margin: 0 auto;
 padding: 0 0 60px 0;
}

#mv .analoghover {
 display: block;
 width: 800px;
 color: #ffffff;
 text-align: center;
 font-size: 22px;
 font-weight: 500;
 background: url(../images/btn_arrow.png) #09aba3 no-repeat 70% 53%;
 background-size: 20px auto;
 text-decoration: none;
 transition: all .3s;
 padding: 26px 0 26px 0;
 margin: 0 auto;
}

#mv .analoghover:hover {
 background: #eef820;
 background-image: url(../images/btn_arrow_black.png);
 background-position: 72% 53%;
 background-repeat: no-repeat;
 background-size: 20px auto;
 color: #333333;
 opacity: 1;
}

@media screen and (max-width: 1520px) {
 #mv .main_img {
  padding: 56px 0 0 0;
 }
}


@media screen and (max-width: 768px) {
 #mv .main_img img.mv_pc {
  display: none;
 }
 
 #mv .main_title {
  width: 90%;
  margin: 0 auto;
  padding: 0 0 40px 0;
 }
 
 #mv .main_img img.mv_sp {
  display: block;
  width: 100%;
 }

 #mv h1 {
  font-size: 36px;
  margin: 20px 0 20px 0;
  line-height: 1.4;
 }
 
 #mv p.lead {
  font-size: 18px;
  line-height: 1.4;
  padding: 0 0 30px 0;
 }
 
 #mv p.logo {
  width: 300px;
  padding: 0;
 }
 
 #mv .analoghover {
  width: 80%;
  background: url(../images/btn_arrow.png) #09aba3 no-repeat 88% center;
  background-size: 16px auto;
  font-size: 20px;
  padding: 20px 0;
 }
 
 #mv .analoghover:hover {
  background-position: 92% center;
  background-size: 16px auto;
 }
 
 
}

@media screen and (max-width: 480px) {
 #mv h1 {
  font-size: 30px;
 }
 
 #mv p.lead {
  font-size: 16px;
  padding: 0 0 20px 0;
 }
 
 #mv p.logo {
  width: 180px;
 }
 
 #mv .analoghover {
  background-image: none;
 }
 
 #mv .analoghover:hover {
  background: #eef820;
  background-image: none;
  background-position: 72% center;
  background-repeat: no-repeat;
  background-size: 18px auto;
  color: #333333;
  opacity: 1;
 }

}


/*------------------------------------------
//　header + main visual
------------------------------------------*/

/*------------------------------------------
content 共通
------------------------------------------*/
main {
 background: #ffffff;
}

#task .task_wrap, #trand .trand_wrap, #support .support_wrap, #learning .learning_wrap {
 width: 960px;
 margin: 0 auto;
 padding: 100px 0 0 0;
}

#task h2.title, #trand h2.title, #support h2.title, #learning h2.title, #service h2.title {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 text-align: center;
 padding-bottom: 30px;
 margin-bottom: 60px;
 font-size: 26px;
 font-weight: 500;
 text-align: center;
}

#task h2::after, #trand h2::after, #support h2::after, #learning h2::after, #service h2::after {
 content: "";
 position: absolute;
 width: 100px;
 height: 1px;
 background-color: #09aba3;
 bottom: 2px;
 right: 50%;
 -webkit-transform: translateX(50%);
 transform: translateX(50%);
}

#trand p.lead, #support p.lead, #learning p.lead {
 text-align: center;
 font-size: 18px;
 line-height: 1.8;
 padding: 0 0 40px 0;
}


@media screen and (max-width: 1240px) {

}

@media screen and (max-width: 768px) {
 #task .task_wrap, #trand .trand_wrap, #support .support_wrap, #learning .learning_wrap {
  width: 90%;
  margin: 0 auto;
  padding: 60px 0 0 0;
 } 
 
 #task h2.title, #trand h2.title, #support h2.title, #learning h2.title, #service h2.title {
  font-size: 24px;
  margin-bottom: 40px;
 }
 
 #trand p.lead, #support p.lead, #learning p.lead {
  font-size: 16px;
  line-height: 1.8;
  padding: 0 0 30px 0;
 }
}

@media screen and (max-width: 480px) {
 #task h2.title, #trand h2.title, #support h2.title, #learning h2.title, #service h2.title {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 30px;
  padding-bottom: 16px;
 } 
}

/*------------------------------------------
//　content 共通
------------------------------------------*/

/*------------------------------------------
id="task"  こんなお悩みはありませんか
------------------------------------------*/
#task ul.list {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content:space-between;
 padding: 28px 0 0 0;
}

#task ul.list li{
 display: inline-block;
 position: relative;
 z-index: 100;
 width: 300px;
 height: 182px;
 background: #f1f2f1;
 padding: 40px 30px 30px 30px;
 box-sizing: border-box;
 margin: 0 0 60px 0;
}

#task ul.list li::after{
 content: "";
 height: 50px;
 width: 50px;
 border-radius: 50%;
 position: absolute;
 top: 0;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 z-index: 90;
 background: url(../images/icon_reten.svg) #ffffff no-repeat center center;
}

#task ul.list li:nth-child(n + 4):not(:nth-child(n + 7)) {
 margin: 0;
}

#task ul.list li p{
 text-align: justify;
 font-size: 18px;
 line-height: 1.6;
}

#task ul.list li span.list_marker {
 background: linear-gradient(transparent 0%, #eef500 0%);
}

@media screen and (max-width: 1240px) {

}

@media screen and (max-width: 768px) {
 #task ul.list {
  flex-direction: column;
 }
 
 #task ul.list li {
  width: 100%;
  height: auto;
  margin: 0 0 50px 0;
 }
 
 #task ul.list li p {
  font-size: 16px;
  text-align: center;
 }
 
 #task ul.list li:nth-child(n + 4):not(:nth-child(n + 6)) {
  margin: 0 0 50px 0;
 }

}

@media screen and (max-width: 480px) {
 #task ul.list li {
  margin: 0 0 40px 0;
 }
 
 #task ul.list li::after {
  height: 40px;
  width: 40px;
 }
}


/*------------------------------------------
//   id="task"  こんなお悩みはありませんか
------------------------------------------*/

/*------------------------------------------
 id="trand"  イマドキの新人・若手社員の傾向
------------------------------------------*/

#trand .fig_inner {
 width: 100%;
 background: #ebf8f6;
 padding: 30px 40px;
 margin: 0 0 60px 0;
}

#trand .btn_survey .analoghover {
 display: block;
 width: 400px;
 color: #ffffff;
 text-align: center;
 font-size: 18px;
 font-weight: 500;
 background: url(../images/btn_arrow.png) #09aba3 no-repeat 88% 52%;
 background-size: 14px auto;
 text-decoration: none;
 transition: all .3s;
 padding: 20px 0 20px 0;
 margin: 0 auto;
}

#trand .btn_survey .analoghover:hover {
 background: #eef820;
 background-image: url(../images/btn_arrow_black.png);
 background-position: 92% 52%;
 background-repeat: no-repeat;
 background-size: 14px auto;
 color: #333333;
 opacity: 1;
}


@media screen and (max-width: 1240px) {

}

@media screen and (max-width: 768px) {
 #trand .fig_inner {
  margin: 0 0 40px 0;
  padding: 20px;
 }
 
 #trand .btn_survey .analoghover {
  width: 80%;
 }

}

@media screen and (max-width: 480px) {
 #trand .btn_survey .analoghover {
  background-image: none;
 }
 
 #trand .btn_survey .analoghover:hover {
  background-image: none;
 }
}
/*------------------------------------------
//   #id="trand"  イマドキの新人・若手社員の傾向
------------------------------------------*/

/*------------------------------------------
  id="support"  これからの新人・若手社員の成長支援
------------------------------------------*/
#support h3.tit_sub {
 text-align: center;
 font-size: 22px;
 font-weight: 500;
 padding: 0 0 50px 0;
}

#support h3.tit_sub span {
 background: linear-gradient(transparent 10%, #eef500 0%);
}

#support .aims_inner {
 position: relative;
 display: inline-block;
 width: 100%;
 background: #ebf8f6;
 padding: 30px 0;
 margin: 0 0 32px 0;
}

#support .aims_inner:before {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -25px;
 border: 25px solid transparent;
 border-top: 25px solid #ebf8f6;
}

#support .aims_inner h4 {
 text-align: center;
 font-weight: 600;
 font-size: 20px;
 color: #09aba3;
 padding: 0 0 30px 0;
}

#support ul.list {
 display: flex;
 justify-content: space-between;
 width: 700px;
 margin: 0 auto;
}

#support ul.list li {
 display: flex;
 flex-direction: column;
}

#support li.aims_inner_gray {
 width: 300px;
 padding: 20px;
 background: #dde4e4;
}

#support li.aims_inner_gray p.sub_tit {
 width: 100%;
 padding: 6px 0;
 text-align: center;
 font-size: 18px;
 color: #ffffff;
 background: #999999;
 margin: 0 0 10px 0;
}

#support li.aims_inner_gray p.txt {
 text-align: center;
 color: #4d4d4d;
 font-size: 20px;
 font-weight: 500;
 line-height: 1.4;
 margin: 0 0 16px 0;
}

#support li.aims_inner_gray img,
#support li.aims_inner_green img {
 display: block;
 width: 200px;
 margin: auto auto 0 auto;
}

#support li.icon_triangle {
 position: relative;
 width: 44px;
}

#support li.icon_triangle img{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
}

#support li.aims_inner_green {
 width: 300px;
 padding: 20px;
 background: #c6e0d7;
}

#support li.aims_inner_green p.sub_tit {
 width: 100%;
 padding: 6px 0;
 text-align: center;
 font-size: 18px;
 color: #ffffff;
 background: #09aba3;
 margin: 0 0 10px 0;
}

#support li.aims_inner_green p.txt {
 text-align: center;
 color: #333333;
 font-size: 20px;
 font-weight: 600;
 line-height: 1.4;
 margin: 0 0 16px 0;
}

#support h3.tit_green {
 text-align: center;
 font-size: 22px;
 line-height: 1.6;
 color: #09aba3;
 margin: 0;
}

#support h3.tit_green span {
 font-size: 26px;
 font-weight: 600;
 background: linear-gradient(transparent 0%, #eef500 0%);
}

@media screen and (max-width: 1240px) {

}

@media screen and (max-width: 768px) {
 #support h3.tit_sub {
  font-size: 20px;
  padding: 0 0 30px 0;
 }

 #support ul.list {
  flex-direction: column;
  width: 100%;
 }
 
 #support ul.list li {
  width: 80%;
  margin: 0 auto 20px;
 }
 
 #support ul.list li:nth-child(3) {
  margin: 0 auto;
 }
 
 #support ul li.icon_triangle {
  position: relative;
  width: 30px;
 }
 
 #support h3.tit_green {
  font-size: 20px;
 }
 
 #support h3.tit_green span {
  font-size: 22px;
 }
}

@media screen and (max-width: 480px) {
 #support h3.tit_sub {
  font-size: 18px;
  line-height: 1.4;
 }
 
 #support h3.tit_green {
  font-size: 18px;
 }
 
 #support h3.tit_green span {
  font-size: 20px;
 }
}

/*------------------------------------------
//   id="support"  これからの新人・若手社員の成長支援
------------------------------------------*/


/*------------------------------------------
 id="learning"  新入社員研修プログラムForwardとは
------------------------------------------*/
#learning p.logo {
 width: 300px;
 margin: 0 auto 50px;
}

#learning .step_inner {
 width: 100%;
 background: #ebf8f6;
 padding: 30px 0 50px 0;
}

#learning .step_inner h4 {
 text-align: center;
 font-weight: 600;
 font-size: 20px;
 color: #09aba3;
 padding: 0 0 30px 0;
}


#learning .step_inner figure {
 width: 820px;
 margin: 0 auto 10px;
}

#learning .featues_inner {
 width: 770px;
 margin: 0 auto 0 85px;
}

#learning .featues_inner ul.featues_step {
 width: 100%;
 display: flex;
 justify-content: space-between;
 margin: 0 0 30px 0;
}

#learning .featues_inner ul.featues_step li {
 width: 230px;
 height: 180px;
}

#learning .featues_inner ul.featues_step li.blue {
 background: #e1eef5;
}

#learning .featues_inner ul.featues_step li.green {
 background: #deefe5;
 margin: 0 50px 0 30px;
}

#learning .featues_inner ul.featues_step li.pink {
 background: #fae7e9; 
}

#learning ul.featues_step li.blue p.tit {
 width: 100%;
 background: #2496c4;
 text-align: center;
 font-size: 20px;
 font-weight: 500;
 color: #ffffff;
 padding: 10px 0 10px 0;
 margin: 0 0 20px 0;
}

#learning ul.featues_step li.green p.tit {
 width: 100%;
 background: #00b27f;
 text-align: center;
 font-size: 20px;
 font-weight: 500;
 color: #ffffff;
 padding: 10px 0 10px 0;
 margin: 0 0 20px 0;
}

#learning ul.featues_step li.pink p.tit {
 width: 100%;
 background: #ff5c7b;
 text-align: center;
 font-size: 20px;
 font-weight: 500;
 color: #ffffff;
 padding: 10px 0 10px 0;
 margin: 0 0 20px 0;
}

#learning ul.featues_step li.blue p.txt {
 font-size: 16px;
 line-height: 1.4;
 text-indent: -1em;
 padding: 0 10px 10px 2em;
}

#learning ul.featues_step li.blue p.txt:nth-child(3) {
 padding: 0 10px 0 2em;
}

#learning ul.featues_step li.green p.txt, #learning ul.featues_step li.pink p.txt {
 font-size: 16px;
 line-height: 1.4;
 padding: 0 16px 0 16px;
}

#learning ul.featues_step li.blue p.txt span.point {
 color: #2496c4; 
}

#learning ul.featues_step li.blue p.txt span.txt_blue {
 color: #2496c4;
 font-weight: 600;
}

#learning ul.featues_step li.green p.txt span.txt_green {
 color: #00b27f;
 font-weight: 600;
}

#learning ul.featues_step li.pink p.txt span.txt_pink {
 color: #ff5c7b;
 font-weight: 600;
}

#learning ul.featues_direction {
 width: 100%;
}

#learning ul.featues_direction li {
 position: relative;
 height: 90px;
 font-size: 18px;
 font-weight: 500;
 text-align: center;
 background: #ffffff;
 margin: 0 0 10px 0;
}

#learning ul.featues_direction li p.txt {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
 -webkit- transform: translateY(-50%) translateX(-50%);
 width: 96%;
 margin: 0 auto;
 color: #333333;
 line-height: 1.4;
}

#learning ul.featues_direction li p.txt span {
 font-weight: 600;
 color: #0dab97;
}


@media screen and (max-width: 1240px) {

}

@media screen and (max-width: 768px) {
 #learning p.logo {
  width: 250px;
  margin: 0 auto 30px;
 }
 
 #learning .step_inner {
  padding: 30px 0 20px 0;
 }
 
 #learning .step_inner figure {
  width: 90%;
 }
 
 #learning .featues_inner {
  width: 90%;
  margin: 0 auto;
 }
 
 #learning .featues_inner ul.featues_step {
  flex-direction: column;
  margin: 0 0 20px 0;
 }
 
 #learning .featues_inner ul.featues_step li {
  width: 100%;
  height: auto;
  padding: 0 0 20px 0;
  margin: 0 0 10px 0;
 }
 
 #learning .featues_inner ul.featues_step li.green {
  background: #deefe5;
  padding: 0 0 20px 0;
  margin: 0 0 10px 0;
 }
 
 #learning ul.featues_direction li {
  height: auto;
  font-size: 16px;
  padding: 20px;
 }
 
 #learning ul.featues_direction li p.txt {
  position: relative;
  top: 0;
  left: 0;
  transform: translateY(0) translateX(0);
  -webkit- transform: translateY(0) translateX(0);
  width: 100%;
  line-height: 1.6;
 }

}

@media screen and (max-width: 480px) {
 #learning p.logo {
  width: 180px;
  margin: 0 auto 20px;
 }
}
/*------------------------------------------
//   id="service"  新入社員研修プログラムForwardとは
------------------------------------------*/


/*------------------------------------------
  id="learning"  新入社員研修FORWARDラインナップ
------------------------------------------*/
#service {
 width: 100%;
 background: #ebf8f6;
}

#service .service_wrap {
 width: 960px;
 margin: 0 auto;
 padding: 100px 0 80px 0;
}

#service .line_wrap {
 padding: 0 0 70px 0;
}

#service h2.first {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -ms-flex-direction: column;
 flex-direction: column;
 text-align: center;
 padding-bottom: 30px;
 margin-bottom: 60px;
 font-size: 26px;
 font-weight: 500;
 text-align: center;
}

#service h2.first span {
 display: block;
 width: 200px;
 height: auto;
 margin: 30px auto 0;
}

#service h2.first::after {
 content: "";
 position: absolute;
 width: 100px;
 height: 1px;
 background-color: #09aba3;
 bottom: 2px;
 right: 50%;
 -webkit-transform: translateX(50%);
 transform: translateX(50%);
}

#service p.lead {
 text-align: center;
 font-size: 18px;
 padding: 0 0 40px 0;
}

#service ul {
 display: flex;
 width: 960px;
 margin: 0 auto 0;
 justify-content: space-between;
 flex-wrap: wrap;
}

#service ul li {
 position: relative;
 list-style: none;
 width: 310px;
 box-sizing: border-box;
 border-top: 6px solid #09aba3;
 margin: 0 0 30px 0;
}

#service ul li a {
 position: relative;
 width: 310px;
 height: 290px;
 display: block;
 color: #333333;
 background: #ffffff;
 padding: 20px 16px 0 16px;
 transition: all .3s;
 text-decoration: none;
 cursor: pointer;
}

#service ul li.sheet_blue a:hover {
 background: #f4fcff;
 box-shadow: 0 0 10px rgb(9, 102, 171,1);
 opacity: 0.8;
}

#service ul li.sheet_green a:hover {
 background: #ebfcf7;
 box-shadow: 0 0 10px rgb(9, 171, 163,1);
 opacity: 0.8;
}

#service ul li.sheet_pink a:hover {
 background: #faf2fa;
 box-shadow: 0 0 10px rgb(249, 129, 185,1);
 opacity: 0.8;
}

#service ul li a:hover {
 background: #f4fffa;
 box-shadow: 0 0 10px rgba(9,171,163,1);
 opacity: 0.8;
}

#service ul li.sheet_blue {
 border-top: 6px solid #2496c4;
}

#service ul li.sheet_green {
 border-top: 6px solid #00b27f;
}

#service ul li.sheet_pink {
 border-top: 6px solid #ff5c7b;
}

#service ul li h4 {
 height: 76px;
 text-align: center;
 font-size: 20px;
 font-weight: 600;
 margin: 0 0 20px 0;
 line-height: 1.4;
}

#service ul li h4 span {
 font-size: 15px;
 font-weight: 400;
 letter-spacing: 0em;
}

#service ul li p.txt {
 height: 66px;
 text-align: justify;
 font-size: 16px;
 font-weight: 400;
 margin-top: auto;
 line-height: 1.4;
}

#service li ul.tag_inner {
 display: flex;
 justify-content: center;
 width: 100%;
 border: none;
 margin: 30px auto 30px;
}

#service li ul.tag_inner li {
 border-radius: 15px;
 color: #ffffff;
 font-size: 12px;
 padding: 8px 12px;
 text-align: center;
 line-height: 1;
 font-weight: 500;
}

#service li ul.tag_inner li.tag_settraining {
 width: 86px;
 height: 30px;
 background-color: #a9cf45;
 border: none;
 margin: 0 8px;
}

#service li ul.tag_inner li.tag_online {
 width: 104px;
 height: 30px;
 background-color: #6bc9c1;
 border: none;
 border-radius: 8px;
 margin: 0 8px;
}

#service li ul.tag_inner li.tag_flatrate {
 width: 116px;
 height: 30px;
 background-color: #666666;
 border: none;
 margin: 0 8px;
}

#service li ul.tag_inner li.tag_onlinerelease {
 width: 170px;
 height: 30px;
 background-color: #b1324f;
 border: none;
 margin: 0 8px;
}

#service li ul.tag_inner li.tag_communication {
 width: 94px;
 height: 30px;
 background-color: #7ab8b9;
 border: none;
 margin: 0 8px;
}

#service li ul.tag_inner li.tag_elan {
 width: 100px;
 height: 30px;
 background-color: #3467aa;
 border: none;
 margin: 0 8px;
}




@media screen and (max-width: 1240px) {

}

@media screen and (max-width: 768px) {
 #service .service_wrap {
  width: 90%;
  padding: 60px 0 60px 0;
 }
 
 #service h2.first {
  font-size: 24px;
  margin-bottom: 40px;
 }
 
 #service h2.first img {
  margin: 20px auto 0;
 }
 
 #service p.lead {
  font-size: 16px;
  padding: 0 0 30px 0;
 }
 
 #service ul {
  width: 100%;
  flex-wrap: wrap;
  flex-direction: column;
 }
 
 #service ul li {
  width: 100%;
 }
 
 #service ul li.sheet_pink {
  margin: 0 0 30px 0;
 }
 
 #service ul li a{
  width: 100%;
  height: auto;
  padding: 20px 16px 26px 16px;
 }
 
 #service ul li h4 {
  height: auto;
 }
 
 #service ul li p.txt {
  height: auto;
  text-align: left;
  padding: 0 0 20px 0;
 }
 
 #service li ul.tag_inner {
  margin: 0 auto 0;
  flex-direction: row;
 }
 
 #service .line_wrap {
  padding: 0 0 60px 0;
 }
 
 #service ul.lineup_inner li:last-child {
  margin: 0;
 }
 

}

@media screen and (max-width: 480px) {
 #service h2.first {
  font-size: 20px;
  line-height: 1.4;
 }
}

/*------------------------------------------
//   id="learning"  新入社員研修FORWARDラインナップ
------------------------------------------*/

/*------------------------------------------
//   id="report  イマドキ若手報告書
------------------------------------------*/
#report div.report_wrap {
 width: 100%;
 background: #09aba3;
 padding: 100px 0;
}

#report a  {
 display: block;
 width: 960px;
 margin: 0 auto;
 padding: 50px;
 border: 2px solid #ffffff;
 box-sizing: border-box;
}

#report a:hover {
 background: #6bc9c1;
 opacity: 0.8;
}

#report a img:hover {
 opacity: 0.8;
}

#report ul {
 display: flex;
 justify-content: center;
}

#report ul li.left_box {
 width: 250px;
 margin: 0 70px 0 0;
}

#report ul li.left_box p.txt {
 position: relative;
 width: 80%;
 text-align: center;
 font-size: 26px;
 color: #ffffff;
 margin: 0 auto 20px auto;
}

#report ul li.left_box p.txt:before {
 content: "";
 background-image: url(../images/illust_comment__white_left.svg);
 background-size: 18px 24px;
 background-repeat: no-repeat;
 background-position: center center;
 width: 18px;
 height: 24px;
 display: block;
 position: absolute;
 bottom: 45%;
 left: 0;
 -webkit-transform: translateY(50%);
 transform: translateY(50%);
}

#report ul li.left_box p.txt:after {
 content: "";
 background-image: url(../images/illust_comment__white_right.svg);
 background-size: 18px 24px;
 background-repeat: no-repeat;
 background-position: center center;
 width: 18px;
 height: 24px;
 display: block;
 position: absolute;
 bottom: 46%;
 right: 0;
 -webkit-transform: translateY(50%);
 transform: translateY(50%);
}

#report ul li.right_box {
 position: relative;
 width: 350px;
}

#report ul li.right_box div {
 position: absolute;
 top: 56%;
 left: 0px;
 transform: translateY(-50%) translateX(0%);
 -webkit- transform: translateY(-50%) translateX(1);
}

#report ul li.right_box p.tit {
 color: #ffffff;
 font-size: 26px;
 margin: 0 0 30px 0;
 line-height: 1.6;
}

#report ul li.right_box p.btn {
 background: #ffffff;
 color: #09aba3;
 padding: 16px 20px;
 width: 260px;
 text-align: center;
 font-weight: 500;
}

@media screen and (max-width: 768px) {
 #report div.report_wrap {
  padding: 70px 0;
 }

 #report a {
  width: 90%;
  padding: 30px;
 }

 #report ul {
  flex-direction: column;
 }

 #report ul li.left_box {
  width: 100%;
  height: 100%;
  margin: 0;
 }
 
 #report ul li.left_box p.txt {
  width: 60%;
 }

 #report ul li.left_box p.img {
  width: 60%;
  height: auto;
  display: block;
  margin: 0 auto;
 }
 
 #report ul li.left_box p.img img {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
 }

 #report ul li.right_box {
  position: relative;
  width: 100%;
 }

 #report ul li.right_box div {
  position: relative;
  top: 0;
  left: 0;
  transform: translateY(0%) translateX(0%);
  -webkit- transform: translateY(0%) translateX(0%);
  margin: 20px 0 0 0;
 }

 #report ul li.right_box p.tit {
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
 }

 #report ul li.right_box p.btn {
  padding: 16px 18px;
  width: 260px;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
 }

 #report ul li.left_box p:before {
  left: 26%;
 }

 #report ul li.left_box p:after {
  right: 26%;
 }
}

@media screen and (max-width: 480px) {
 #report ul li.left_box p.txt {
  width: 90%;
 }
 
 #report ul li.left_box p.txt:before {
  left: 0;
 }

 #report ul li.left_box p.txt:after {
  right: 0;
 }
 
 #report ul li.left_box p.img {
  width: 80%;
 }
}

/*------------------------------------------
 id="report  イマドキ若手報告書
------------------------------------------*/


/*------------------------------------------
CTA、CVボタン ここから
------------------------------------------*/
#btn_wrap {
 width: 100%;

}

#btn_wrap .btn_box {
 width: 960px;
 margin: 0 auto;
 padding: 100px 0;
}


#btn_wrap .button {
 position: relative;
 display: inline-block;
 width: 960px;
 padding: 30px 0;
 color: #ffffff;
 text-align: center;
 text-decoration: none;
 background: #09aba3;
 font-size: 28px;
 transition: .3s;
}

#btn_wrap .button:hover {
 color: #333333;
}

#btn_wrap .button::before {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: -1;
 content: '';
 background: #eef500;
 transform-origin: left bottom;
 transform: scale(1, 0);
 transition: transform .3s;
}

#btn_wrap .button:hover::before {
 transform-origin: left top;
 transform: scale(1, 1);
}

@media screen and (max-width: 768px) {
 #btn_wrap .btn_box {
  width: 80%;
  margin: 0 auto;
  padding: 50px 0;
 }

 #btn_wrap .button {
  width: 100%;
  padding: 20px 10px;
  font-size: 24px;
  line-height: 1.4;
 }
}

@media screen and (max-width: 480px) {
 #btn_wrap .btn_box {
  width: 90%;
 }

 #btn_wrap .button {
  padding: 16px 10px;
  font-size: 20px;
 }
}
/*------------------------------------------
//  CTA、CVボタン ここまで
------------------------------------------*/


/*------------------------------------------
フローティングバナー ここから
-------------------------------------------*/
.Bnr {
 position: relative;
 margin: 0 auto;
 width: 1200px;
 display: none;
 font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Osaka, sans-serif !important;

}

.Bnr .Bnr__img {
 position: fixed;
 right: 0;
 bottom: 50%;
 z-index: 100;
}

.Bnr .Bnr__img__inner a img {
 width: 50px;
 border-top: 1px solid #ffffff;
 border-bottom: 1px solid #ffffff;
 border-left: 1px solid #ffffff;
}

.Bnr .Bnr__img__inner a img:hover {
 border-top: 1px solid #ebf8f6;
 border-bottom: 1px solid #ebf8f6;
 border-left: 1px solid #ebf8f6;
 opacity: 0.8;
}

.Bnr .Bnr__img__inner a p.sp_banner {
 display: none;
}


@media only screen and (max-width: 768px) {
 .Bnr .Bnr__img {
  bottom: 20%;
  z-index: 100;
 }

 .Bnr .Bnr__img__inner a p.sp_banner {
  display: none;
 }
}

@media only screen and (max-width: 480px) {
 .Bnr .Bnr__img__inner a img {
  /*  width: 50px;*/
  display: none;
 }

 .Bnr .Bnr__img {
  width: 100%;
  bottom: 0%;
  z-index: 100;
 }

 .Bnr .Bnr__img__inner a p.sp_banner {
  display: block;
  bottom: 0;
  z-index: 100;
  padding: 24px 14px 24px;
  color: #ffffff;
  background: #09aba3;
  font-size: 20px;
  font-weight: 500;
  border-top: 1px solid #ffffff;
  /* border-bottom: 1px solid #ffffff; */
  /* border-left: 1px solid #ffffff; */
  text-align: center;
 }

 .Bnr .Bnr__img__inner a p.sp_banner:after {
  content: "";
  background-image: url(../images/icon_mail.svg);
  background-size: 26px 26px;
  background-repeat: no-repeat;
  background-position: center center;
  width: 26px;
  height: 26px;
  display: block;
  position: absolute;
  top: 14%;
  left: 15%;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
 }

 .Bnr .Bnr__img__inner a p.sp_banner:hover {
  background: #eef500;
  color: #333333;
  opacity: 1;
  -webkit-transition: all 0.6s cubic-bezier(.645, .045, .355, 1);
  -moz-transition: all 0.6s cubic-bezier(.645, .045, .355, 1);
  -o-transition: all 0.6s cubic-bezier(.645, .045, .355, 1);
  transition: all 0.6s cubic-bezier(.645, .045, .355, 1);
 }
}

/*------------------------------------------
//　　　フローティングバナー ここから
-------------------------------------------*/






/*------------------------------------------
ページのトップへ戻る ここから
------------------------------------------*/
#toTop{
 position: fixed;
 right: 0;
 bottom: 70px;
 /* display: none; */
 z-index: 999;
}
#toTop a{
 -webkit-transition: 0.3s;
 -moz-transition: 0.3s;
 -o-transition: 0.3s;
 transition: 0.3s;
 display: block;
 width: 70px;
 height: 70px;
}

#toTop a:hover{
 opacity: 0.8;
}

@media screen and (max-width: 768px) {
 #toTop img{
  position: fixed;
  right: 0;
  bottom: 90px;
  width: 50px;
  height: 50px;
 }
}
/*------------------------------------------
// ページのトップへ戻る ここまで
------------------------------------------*/