@charset "UTF-8";

/* commonのリセット分(共通)
------------------------------------------------------ */
html { overflow-y: auto; }
body { font-size: 14px; line-height: 1.5; font-family: "Yu Gothic", "Hiragino Kaku Gothic Pro", sans-serif; }
#ModalBg              { position: absolute; }
#Container            { width: 100%; }
#Container .org_wrap  { margin: 0 auto; width: 980px; }
@media only screen and (max-width: 768px){
 #Container .org_wrap { width: 100%; }
}

.recruit_wrap a:hover   { text-decoration: none; opacity: .8; }
.recruit_wrap a:link,
.recruit_wrap a:visited { text-decoration: none; }
span.inline { display: inline-block; }
sub,sup     { font-size: 80%; }
.pc_only    { }
.sp_only    { display: none; }
@media only screen and (max-width: 768px){
.pc_only    { display: none; }
.sp_only    { display: initial; }
.br_sp      { display: none; }
}

/* 採用情報のハンバーガーメニュー(共通)
------------------------------------------------------ */
.btnMenu      { display: block; position: absolute; z-index: 3; right: 1rem; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; cursor: pointer; text-align: center; }
.btnMenu span { display: block; position: absolute; width: 30px; height: 2px ; left: 6px; background : #fff; transition: 0.3s ease-in-out; }
.btnMenu span:nth-child(1) { top: 5px; }
.btnMenu span:nth-child(2) { top: 15px; }
.btnMenu span:nth-child(3) { top: 25px; }
.btnMenu p                 { position: absolute; top: 32px; left: 50%; margin-bottom: 0!important; font-size: 9px; color: #fff; transform: translateX(-50%); }

/* メニューを開いてる時のボタン */
.js_humburgerOpen .btnMenu span:nth-child(1) { top: 14px; left: 6px; background: #fff; transform: rotate(-135deg); }
.js_humburgerOpen .btnMenu span:nth-child(2),
.js_humburgerOpen .btnMenu span:nth-child(3) { top: 14px; background: #fff; transform: rotate(135deg); }
.btnMenu p.close { display: none; }
.js_humburgerOpen .btnMenu p.close { display: block; transition: 0.3s ease-in-out; }
.js_humburgerOpen .btnMenu p.ready { display: none; transition: 0.3s ease-in-out; }

/* メニュー背景 */
nav.recruitMenu { position: absolute; z-index: 2; top: 60px; left: 0; text-align: center;  opacity: 0; width: 100%; height: 0px; overflow: hidden; transition: all 0.6s; }
nav.recruitMenu div              { margin: 0 auto; padding: 0; width: 1024px; }
nav.recruitMenu ul               { margin: 0 0 0 75%; padding: 0; width: 25%; background: rgba(255,255,255,.95); }
nav.recruitMenu ul li            { list-style-type: none; padding: 0; width: 100%; transition: .4s all; border-bottom: 1px solid #ccc; }
nav.recruitMenu ul li:last-child { padding-bottom: 0; }
nav.recruitMenu ul li:hover      { background :#eee; }
nav.recruitMenu ul li a          { display: block; color: initial; padding: 1em 0; text-decoration :none; }
@media only screen and (max-width: 768px){
nav.recruitMenu div              { margin: 0 auto; padding: 0; width: 100%; }
nav.recruitMenu ul               { margin: 0 auto; padding: 0; width: 100%; background: rgba(255,255,255,.95); }
}

/* クリックでjQueryで追加・削除 */
.js_humburgerOpen nav.recruitMenu { display: block; opacity: 1; height: auto; background-image: none; transition: all 0.6s; }

/* 採用情報のブロック(共通)
------------------------------------------------------ */
/* 採用情報 Header */
.recruit_wrap header           { background: #1796df; }
.recruit_wrap header .inner    { margin: 0 auto; width: 1024px; height: 60px; position: relative; }
.recruit_wrap header .inner h1 { font-size: 36px; color: #fff; margin: 0 1rem !important; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%); }
@media only screen and (max-width: 768px){
.recruit_wrap header .inner    { margin: 0 auto; width: 100%; height: 60px; position: relative; }
}

/* Hタグ */
.recruit_wrap    { color: #000; background: #fff; position: relative; }
.recruit_wrap h1,
.recruit_wrap h2,
.recruit_wrap h3,
.recruit_wrap h4,
.recruit_wrap h5,
.recruit_wrap h6 { color: initial; text-align: left !important; font-family: "Yu Gothic", "Hiragino Kaku Gothic Pro", sans-serif; }
.recruit_wrap h1 a,
.recruit_wrap h1 a:link,
.recruit_wrap h1 a:hover,
.recruit_wrap h1 a:visited { color: #fff; }

.recruit_wrap p { margin: 0 0 1em 0; }
.btn_login      { margin: 1em 0; display: inline-block; }
.btn_login a    { padding: .5em 1em; font-size: 24px; color: #1796df; background: rgba(255,255,255,.9); border: 1px solid #1796df; border-radius: 8px; }
@media only screen and (max-width: 768px){
.btn_login      { margin: 1em 0; display: inline-block; }
.btn_login a    { padding: .75em 2em; font-size: 3.5vw; color: #1796df; background: rgba(255,255,255,.9); border: 1px solid #1796df; border-radius: .33em; }
}

/* Index */
#main_visual                              { width: 100%; height: 0; padding: 43% 0 0 0; overflow: hidden; position: relative; }
#main_visual .inner_wrap                  { margin: 0 auto; padding: 0; width: 100%!important; display: block; position: absolute; top: 0; }
#main_visual .inner_wrap .visual_title    { width: 980px; position: absolute; top: 0; right: 50%; transform: translateX(50%); }
#main_visual .inner_wrap .visual_title h1 { font-weight: bold; font-size: 32px; color: #002133; margin: 0; padding-top: 40px; }
#main_visual .inner_wrap .visual_img      { width: 980px; position: absolute; text-align: center; bottom: 0; right: 50%; transform: translateX(50%);}
#main_visual .inner_wrap .visual_img img  { width: 80%; padding-bottom: 20px; }
@media only screen and (max-width: 768px){
#main_visual .inner_wrap .visual_title    { width: 100%; position: absolute; bottom: 0; right: 50%; transform: translateX(50%); }
#main_visual .inner_wrap .visual_title h1 { font-weight: bold; font-size: 3.5vw; color: #002133; margin: 0; padding: 1rem 0 0 1rem; }
#main_visual .inner_wrap .visual_img      { width: 100%; position: absolute; text-align: center; bottom: 0; right: 50%; transform: translateX(50%); }
#main_visual .inner_wrap .visual_img img  { width: 80%; padding: 0 0 1vw 0; }
}

/* slick */
.sliderArea      { width: 100%;  margin: 0 auto; padding: 0; box-sizing: border-box; }
.slick-slide img { width: 100%; height: auto; }
.slick-slide     { transition: all ease-in-out .3s; opacity: .2; }
.slick-active    { opacity: 1; }
.slick-current   { opacity: 1; }

.inner_wrap     { margin: auto; padding: 60px 0; width: 980px; }
.inner_wrap  h2 { margin-bottom: .25em; padding: 0 0 .2em 0; font-size: 60px; color: #004c6d; }
@media only screen and (max-width: 768px){
.inner_wrap     { margin: auto; padding: 1rem; width: 100%; position: relative; box-sizing: border-box; }
.inner_wrap  h2 { margin-top: 1rem; margin-bottom: .25em; padding: 0 0 .2em 0; font-size: 10vw!important; color: #004c6d; }
}

/*紀文の仕事*/
#rec_office .inner_wrap    { max-width: 980px; }
#rec_job                   { background: #ffeecc; }
#rec_job .inner_wrap       { width: 980px; }
#rec_allowance .inner_wrap { width: 980px; }
#rec_job h2                { color: ##004c6d; margin-bottom: 40px; width: 40%; text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff; }
#rec_job h2 img            { width: 100%; }
#rec_job h3                { color: #002133; font-size: 48px; }
#rec_job .inner_wrap h2    { width: 340px; }

@media only screen and (max-width: 768px){
#rec_job .inner_wrap        { background: #ffeecc; width: 100%; }
#rec_allowance .inner_wrap  { width: 100%; }
#rec_job h2                 { margin-bottom: 1rem; }
#rec_job h3                 { color: #002133; font-size: 5.5vw!important; }
#rec_job .inner_wrap h2     { width: 100%; }
#rec_job .inner_wrap h2 img { width: 100%; }
}
.job_free  { position: relative; display: block; height: 1390px; margin-top: -170px; }
.seizo     { width: 516px; height: 364px; position: absolute; display: block; top: 60px; right: -40px; }
.seisan    { width: 576px; height: 364px; position: absolute; display: block; top: 340px; left: -40px; }
.hinshitsu { width: 516px; height: 364px; position: absolute; display: block; top: 580px; right: 0px; }
.eigyo     { width: 540px; height: 364px; position: absolute; display: block; top: 810px; }
.kanri     { width: 644px; height: 364px; position: absolute; display: block; top: 1058px; right: -40px; }
.seizo .title     { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); }
.seisan .title    { position: absolute; z-index: 1; top: 50%; right: 0; transform: translateY(-50%); }
.hinshitsu .title { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); }
.eigyo .title     { position: absolute; z-index: 1; top: 50%; right: 0; transform: translateY(-50%); }
.kanri .title     { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); }
.seizo img     { height: 364px; position: absolute; right: 0; }
.seisan img    { height: 364px; position: ; }
.hinshitsu img { height: 364px; position: absolute; right: 0; }
.eigyo img     { height: 364px; position: ; }
.kanri img     { height: 364px; position: absolute; right: 0; }
@media only screen and (max-width: 768px){
.job_free  { position: static; display: block; height: auto; margin-top: 0px; }
.seizo     { width: 100%; height: 54vw; position: relative; display: block; top: 0; right: 0; }
.seisan    { width: 100%; height: 54vw; position: relative; display: block; top: 0; right: 0; left: 0; }
.hinshitsu { width: 100%; height: 54vw; position: relative; display: block; top: 0; right: 0; }
.eigyo     { width: 100%; height: 54vw; position: relative; display: block; top: 0; right: 0; }
.kanri     { width: 100%; height: 54vw; position: relative; display: block; top: 0; right: 0; }
.seizo .title     { position: relative; z-index: 1; top: 50%; transform: translateY(-50%); }
.seisan .title    { position: relative; z-index: 1; top: 50%; left: 60%; transform: translateY(-50%); width: 50%; }
.hinshitsu .title { position: relative; z-index: 1; top: 50%; transform: translateY(-50%); }
.eigyo .title     { position: relative; z-index: 1; top: 50%; left: 60%; transform: translateY(-50%); width: 50%; }
.kanri .title     { position: relative; z-index: 1; top: 50%; transform: translateY(-50%); }
.seizo img     { width: 60%; height: auto; position: absolute; top: 0; right: 0; }
.seisan img    { width: 60%; height: auto; position: absolute; top: 0; left: 0; }
.hinshitsu img { width: 60%; height: auto; position: absolute; top: 0; right: 0; }
.eigyo img     { width: 60%; height: auto; position: absolute; top: 0; left: 0; }
.kanri img     { width: 60%; height: auto; position: absolute; top: 0; right: 0; }
}

/*先輩のキャリア*/
#rec_career             { padding: 80px 0; }
#rec_career .inner_wrap { position: relative; width: 980px; height: 280px; background: url(../img/career_bg.png) no-repeat; background-size: cover; border: solid 2px #0099da; border-radius: 2rem; }
#rec_career .inner_wrap h2 { position: absolute; top: 30px; left: 30px; text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff, -2px 0px 1px #fff, 0px -2px 1px #fff; }
#rec_career .inner_wrap h2 img { width: 100%; }
#rec_career .btn_login  { position: absolute; bottom: 40px; left: 36%; }
#rec_career .illust     {  position: absolute; bottom: 0; right: 30px; }
@media only screen and (max-width: 768px){
#rec_career             { padding: 1rem 1rem 1rem 1rem; }
#rec_career .inner_wrap { position: relative; width: 100%; height: 60vw; background: url(../img/career_bg.png) no-repeat; background-size: cover; border: solid 2px #0099da; border-radius: 1rem; }
#rec_career .inner_wrap h2 { margin: 0 auto; position: absolute; top: 1rem; left: 0; right: 0; width: calc(100% - 1rem); }
#rec_career .btn_login  { position: absolute; bottom: .5rem; left: 50%; transform: translateX(-100%); }
#rec_career .illust     { position: absolute; bottom: 0; right: .5rem; width: 40%; }
}
/*紀文社員に聞きました*/
#rec_interview                        { height: 600px; background: url(../img/interview_bg.png) top center no-repeat; background-size: cover; }
#rec_interview .inner_wrap            { position: relative; padding: 60px 0 0 0; width: 1200px; }
#rec_interview .inner_wrap h2         { margin-top:-20px; font-size: 60px; border-bottom: 2px solid #fff; position: relative; }
#rec_interview .inner_wrap h2 span    { font-size: 28px; color: #1796df; position: absolute; top: 30px; right: 0; }
#rec_interview .inner_wrap .btn_login { float: right; }
#rec_interview .inner_wrap img        { position: relative; left: 100%; margin-top: 120px; transform: translateX(-100%); }
@media only screen and (max-width: 768px){
#rec_interview                        { margin-bottom: 2rem; height: 80vw; background: url(../img/interview_bg_sp.png) center no-repeat; background-size: cover; }
#rec_interview .inner_wrap            { position: relative; height: 80vw; padding: 1rem; width: 100%; }
#rec_interview .inner_wrap h2         { margin-top: 1rem; font-size: 8vw!important; border-bottom: 2px solid #fff; position: relative; }
#rec_interview .inner_wrap h2 span    { font-size: 4vw; color: #1796df; position: absolute; top: 12vw; left: 0; }
#rec_interview .inner_wrap .btn_login { float: right; margin-top: 9vw; }
#rec_interview .inner_wrap img        { position: absolute; right: 0; top: initial; bottom: -2rem; padding: 0 1rem 1rem 1rem; box-sizing: border-box; }
}

/*会長からのメッセージ 人事担当より皆様へ*/
.column2 .inner_wrap { display: flex; justify-content: space-between; padding-top: 0; }
.column2 .inner_wrap #rec_president,
.column2 .inner_wrap #rec_personneldept { width: calc(50% - 1rem); margin-top: 60px; }
#rec_president a,
#rec_personneldept a { padding: .75em 0; width: 100%; display: block; text-align: center; font-weight: bold; font-size: 28px; color: #fff; background: #1796df; border-radius: 1rem; white-space: pre; }
@media only screen and (max-width: 768px){
.column2 .inner_wrap { display: flex; flex-direction: column; }
.column2 .inner_wrap #rec_president,
.column2 .inner_wrap #rec_personneldept { width: 100%; margin-top: 0; }
#rec_president a,
#rec_personneldept a { margin-top: 1rem; padding: .75em 0; width: 100%; display: block; text-align: center; font-weight: bold; font-size: 4.5vw; color: #fff; background: #1796df; border-radius: .5rem; white-space: pre; }
}

/*研修制度 よくある質問*/
.column2 .inner_wrap #rec_education,
.column2 .inner_wrap #rec_faq            { padding: 2em; width: calc(50% - 1rem); height: 280px; border: solid 2px #1796df; border-radius: 20px; box-sizing: border-box; position: relative; }
.column2 .inner_wrap #rec_education h2,
.column2 .inner_wrap #rec_faq h2         { font-size: 44px; color: #004c6d; position: relative; z-index: 1; }
.column2 .inner_wrap #rec_education img  { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 50%; }
.column2 .inner_wrap #rec_faq img        { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 30%; }
.column2 .inner_wrap #rec_education .btn_login,
.column2 .inner_wrap #rec_faq .btn_login { margin: 0; position: absolute; bottom: 20px; }
.column2 .inner_wrap #rec_education a,
.column2 .inner_wrap #rec_faq a          { padding: .5em; border: none; }
@media only screen and (max-width: 768px){
.column2 .inner_wrap #rec_education,
.column2 .inner_wrap #rec_faq            { margin-bottom: 1rem; padding: 1rem; width: 100%; height: 45vw; border: solid 2px #1796df; border-radius: .5rem; box-sizing: border-box; position: relative; }
.column2 .inner_wrap #rec_education h2,
.column2 .inner_wrap #rec_faq h2         { margin: 0; font-size: 6.75vw!important; color: #004c6d; position: static; z-index: 1; }
.column2 .inner_wrap #rec_education img  { position: absolute; width: 60%; top: 50%; right: 1rem; transform: translateY(-50%); }
.column2 .inner_wrap #rec_faq img        { position: absolute; width: 30%; top: 50%; right: 2rem; transform: translateY(-50%); }
.column2 .inner_wrap #rec_education .btn_login,
.column2 .inner_wrap #rec_faq .btn_login { margin: 0; position: absolute; bottom: 1rem; }

}
/*募集要項*/
#rec_recruit_top                    { margin: 0 auto; background: #ffaa00; overflow: hidden; }
#rec_recruit_top .inner_wrap        { height: 290px; position: relative; width: 1200px; }
#rec_recruit_top .inner_wrap .title { width: 705px; }
#rec_recruit_top .inner_wrap h2     { color: #fff; border-bottom: solid 2px #fff; }
#rec_recruit_top .inner_wrap p      { color: #fff; font-weight: ; font-size: 30px; }
#rec_recruit_top .title .btn_login  { float: right; margin-right: 40px; }
#rec_recruit_top .inner_wrap a      { background: #fff; border: none; }
#rec_recruit_top .inner_wrap img    { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
@media only screen and (max-width: 768px){
#rec_recruit_top                    { margin: 0 auto; background: #ffaa00; overflow: hidden; }
#rec_recruit_top .inner_wrap        { height: 64vw; position: relative; width: 100%; }
#rec_recruit_top .inner_wrap .title { width: 100%; }
#rec_recruit_top .inner_wrap h2     { width: calc(100% - 25%); color: #fff; border-bottom: solid 2px #fff; }
#rec_recruit_top .inner_wrap p      { color: #fff; font-weight: ; font-size: 3.5vw; }
#rec_recruit_top .title .btn_login  { float: none; margin: auto; text-align: center; position: absolute; left: 50%; top: 53vw; transform: translateX(-50%); }
#rec_recruit_top .inner_wrap a      { background: #fff; border: none; }
#rec_recruit_top .inner_wrap img    { width: 45vw; position: absolute; top: 1rem; right: 1rem; transform: translateY(0%); }
}

/* scrollするとfade in */
.fadeIn          { transition: 2s; opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
.fadeIn.animated { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

/* 紀文の仕事 job00.html
------------------------------------------------------ */
.job_visual.job01 { padding-top: ; height: 500px; background: url(../img/top/slick01.png) center no-repeat; background-size: cover; position: relative; }
.job_visual.job02 { padding-top: ; height: 500px; background: url(../img/career_bg.png) center no-repeat; background-size: cover; position: relative; }
.job_visual.job03 { padding-top: ; height: 500px; background: url(../img/top/slick03.png) center no-repeat; background-size: cover; position: relative; }
.job_visual.job04 { padding-top: ; height: 500px; background: url(../img/top/slick04.png) center no-repeat; background-size: cover; position: relative; }
.job_visual.job05 { padding-top: ; height: 500px; background: url(../img/interview_bg.png) top center no-repeat; background-size: cover; position: relative; }
.job_visual .inner_wrap          { width: 980px; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 0; }
.job_visual .inner_wrap h2       { display: inline-block; padding-top: 30px; text-align: center!important; line-height: 1.25; text-shadow: 2px 2px 1px #fff,-2px  2px 1px #fff, 2px -2px 1px #fff,-2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff,-2px 0px 1px #fff, 0px -2px 1px #fff; }
.job_visual .inner_wrap h2 span  { font-size: 32px; padding-left: .5em; }
.job_visual .inner_wrap h2 img   { width: 100%; padding: 0 1rem 0 0; }
.job_visual .inner_wrap img.read { width: 35%; position: absolute; top: 50%; right: 0; transform: translateY(-50%);  }
@media only screen and (max-width: 768px){
.job_visual.job01 { padding-top: 40vw; height: 0px; }
.job_visual.job02 { padding-top: 40vw; height: 0px; }
.job_visual.job03 { padding-top: 40vw; height: 0px; }
.job_visual.job04 { padding-top: 40vw; height: 0px; }
.job_visual.job05 { padding-top: 40vw; height: 0px; }

.job_visual .inner_wrap          { width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 0; }
.job_visual .inner_wrap h2       { margin 1rem 1rem; padding: 0; position: absolute; width: auto; left: 1rem; text-align: center; bottom: 0; }
.job_visual .inner_wrap h2 img   { width: 100%; padding: 0 1rem; }
.job_visual .inner_wrap h2 span  { font-size: 4.75vw!important; }
.job_visual .inner_wrap img.read { width: 35%; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%);  }
}
.job_visual              {  }
.job_content .inner_wrap { margin: 0 auto; width: 980px; display: flex; flex-direction: column; }
.job_article             { margin-bottom: 2em; padding: 1em; width: 100%; border: 1px solid #1796df; box-sizing: border-box; }
.job_article.pho         { position: relative; height: calc(243px + 2px); }
.job_article.intro       { padding: 1rem; background: #1796df; }
.job_article.intro h3    { font-size: 36px; line-height: 1.25; color: #fff; }
.job_article h4          { margin-bottom: .5em; font-size: 32px; line-height: 1.25; color: #1796df; }
.job_article p           { margin-bottom: 0; font-size: 14px; }
.job_article.pho p       { width: calc(50% - 20px); }
.job_article p.user      { margin-bottom: 0; font-size: 12px; color: #fff; position: relative; transform: translateY(50%);  }
.job_article p.user img  { float: left; border-radius: .5em; margin-right: 1em; position: relative; transform: translateY(-25%); }
.job_article p img       { float: right; margin: 0 0 .5em 1em; }
.job_article p img.fl_left { float: left; margin: 0 20px .5em 0; }
.job_article img.full    { margin: 0; position: absolute; right: 0; top: 0; padding:; }

@media only screen and (max-width: 768px){
.job_content .inner_wrap    { margin: 0 auto; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.job_article                { margin-bottom: 2em; padding: 1em; width: 100%; border: 1px solid #1796df; box-sizing: border-box; }
.job_article.intro          { background: #1796df; }
.job_article.intro h3       { font-size: 4vw!important; line-height: 1.5; color: #fff; margin-bottom: .5rem; }
.job_article h4             { margin-bottom: .5em; font-size: 5vw!important; line-height: 1.5; color: #1796df; }
.job_article p              { margin-bottom: 0; font-size: 3.5vw; }
.job_article p.user         { margin-bottom: 0; font-size: 3.5vw; color: #fff; position: relative; transform: translateY(0%); }
.job_article p.user img     { float: left; border-radius: .5em; margin-right: 1em; position: relative; transform: translateY(0%); }
.job_article p img          { float: right; margin: 0 0 .5em .5em; }
.job_article.pho            { padding: 0em; height: auto; }
.job_article.pho h4         { padding: 1rem 1rem 0 1rem; }
.job_article.pho p          { padding: 0  1em; font-size: 3.5vw; width: auto; }
.job_article.pho img.full   { float: none; margin: 1em 0 0 0; width: calc(100% + 1em); position: static; }
.job_article p img.fl_left  { width: 40%; float: right;margin: 0 0 .5em .5em; }
}

.job_kind                { background: #ffeecc; }
.job_kind .inner_wrap    { padding: 2em 0; width: 980px; }
.job_kind .inner_wrap h4 { font-size: 30px; color: #ffaa00; }
.job_kind .inner_wrap p  { margin: 0; font-size: 24px; }
@media only screen and (max-width: 768px){
.job_kind .inner_wrap    { padding: 1em; width: 100%; }
.job_kind .inner_wrap h4 { font-size: 5vw!important; color: #ffaa00; }
.job_kind .inner_wrap p  { margin: 0; font-size: 3.5vw; }
}

.job_link .inner_wrap             { padding: 2em 0; width: 980px; }
.job_link .inner_wrap ul          { display: flex; flex-wrap: wrap; justify-content: space-between; }
.job_link .inner_wrap ul li       { width: calc(20% - 1em); font-size: 18px; background: #ffaa00; border-radius: .5em; position: relative; }
.job_link .inner_wrap ul li a     { display: block; padding: .5em 1em; color: #fff; width: 100%; }
.job_link .inner_wrap ul li:after { position: absolute; content: '▶︎'; color: #fff; top: 50%; right: .75em;  transform: translateY(-50%); }
@media only screen and (max-width: 768px){
.job_link .inner_wrap             { padding: 1rem; width: 100%; }
.job_link .inner_wrap ul          { display: flex; flex-wrap: wrap; }
.job_link .inner_wrap ul li       { width: calc(50% - .5em); font-size: 3.5vw; background: #ffaa00; border-radius: .5em; position: relative; margin-bottom: 1em; }
.job_link .inner_wrap ul li a     { display: block; padding: .5em 1em; color: #fff; width: auto; }
.job_link .inner_wrap ul li:after { position: absolute; content: '▶︎'; color: #fff; top: 50%; right: .75em;  transform: translateY(-50%); }
}

/* 先輩のキャリア career00.html
------------------------------------------------------ */
article#career01 { position: relative; }
article#career02 { position: relative; }
article#career01 .career_visual                { background: url(../img/career/career01_bg.png) center no-repeat; background-size: cover; }
article#career02 .career_visual                { background: url(../img/career/career02_bg.png) center no-repeat; background-size: cover; }
article#career01 .career_visual .inner_wrap    { margin: 0 auto; padding: 0; width: 980px; height: 512px; position: relative; background: url(../img/career/career01_bg2.png) center no-repeat; }
article#career02 .career_visual .inner_wrap    { margin: 0 auto; padding: 0; width: 980px; height: 512px; position: relative; background: url(../img/career/career02_bg2.png) center no-repeat; }
article#career01 .career_visual .inner_wrap h2 { font-size: 60px; position: absolute; top: 20px; left: 20px; text-shadow: 2px 2px 1px #fff,-2px  2px 1px #fff, 2px -2px 1px #fff,-2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff,-2px 0px 1px #fff, 0px -2px 1px #fff; }
article#career02 .career_visual .inner_wrap h2 { font-size: 60px; position: absolute; top: 20px; right: 20px; text-shadow: 2px 2px 1px #fff,-2px  2px 1px #fff, 2px -2px 1px #fff,-2px -2px 1px #fff, 2px 0px 1px #fff, 0px 2px 1px #fff,-2px 0px 1px #fff, 0px -2px 1px #fff; }
.career_visual .inner_wrap h2 img               { width: 100%; }
@media only screen and (max-width: 768px){
article#career01 .career_visual  { padding-top: 50%; height: 0px; background: url(../img/career/career01_bg2.png) center no-repeat; background-size: cover; position: relative; }
article#career02 .career_visual  { padding-top: 50%; height: 0px; background: url(../img/career/career02_bg2.png) center no-repeat; background-size: cover; position: relative; }
article#career01 .career_visual .inner_wrap        { margin: 0; padding: 0; width: 100vw; height: 50vw; position: static; top: 0; background: none; overflow: visible; }
article#career02 .career_visual .inner_wrap        { margin: 0; padding: 0; width: 100vw; height: 50vw; position: static; top: 0; background: none; overflow: visible; }
article#career01 .career_visual .inner_wrap h2     { font-size: 10vw!important; line-height: 1.25; position: absolute; top: 0; left: 1rem; }
article#career02 .career_visual .inner_wrap h2     { font-size: 10vw!important; line-height: 1.25; position: absolute; top: 0; right: 1rem; text-align: right!important; }
article#career01 .career_visual .inner_wrap h2 img { padding: 0 1rem; }
}

article#career01 .career_profile { padding: 1em; display: inline-block; color: #fff; background: rgba(0,76,109,.7); position: absolute; top: 305px; left: 50%; }
article#career02 .career_profile { padding: 1em; display: inline-block; color: #fff; background: rgba(0,76,109,.7); position: absolute; top: 305px; right: 50%; }
.career_profile p.user            { font-weight: bold; }
.career_profile dl                { font-size: 12px; }
.career_profile dl dt             { float: left; }
.career_profile dl dd             { margin-left: 5em; }
@media only screen and (max-width: 768px){
article#career01 .career_profile { padding: 1em; display: block; color: #fff; background: #004c6d; position: static; }
article#career02 .career_profile { padding: 1em; display: block; color: #fff; background: #004c6d; position: static; }
.career_profile p.user            { font-weight: bold; font-size: 3.5vw; }
.career_profile dl                { font-size: 2.5vw!important; }
}

.career_read                          { background: #e5f7ff; }
.career_read .inner_wrap              { padding: 40px 0; width: 980px; }
.career_read p.read                   { margin-left: 165px; margin-bottom: 0; font-size: 18px; font-weight: bold; text-align: left; color: #004c6d; position: relative; }
#career01 .career_read p.read:before { content: ''; display: block; width: 111px; height: 158px; position: absolute; top: 50%; right: calc(100% + 15px); background: url(../img/career/pic_career01.png) no-repeat; background-size: contain; transform: translateY(-50%); }
#career02 .career_read p.read:before { content: ''; display: block; width: 111px; height: 148px; position: absolute; top: 50%; right: calc(100% + 15px); background: url(../img/career/pic_career02.png) no-repeat; background-size: contain; transform: translateY(-50%); }
@media only screen and (max-width: 768px){
.career_read .inner_wrap                     { padding: 1rem; width: 100%; }
.career_read p.read                          { margin-left: 23%; margin-bottom: 0; font-size: 3.5vw; font-weight: bold; text-align: left; color: #004c6d; position: relative; }
article#career01 .career_read p.read:before { content: ''; display: block; width: 23%; height: 100%; position: absolute; top: 50%; right: calc(100% + 15px); background: url(../img/career/pic_career01.png) center no-repeat; background-size: contain; transform: translateY(-50%); }
article#career02 .career_read p.read:before { content: ''; display: block; width: 23%; height: 100%; position: absolute; top: 50%; right: calc(100% + 15px); background: url(../img/career/pic_career02.png) center no-repeat; background-size: contain; transform: translateY(-50%); }
}

.career_content .inner_wrap { margin: 0 auto; width: 980px; display: flex; flex-direction: column; }
.career_article             { margin-bottom: 2em; padding: 1em; width: 100%; border: 1px solid #1796df; box-sizing: border-box; }
.career_article h4          { font-size: 32px; line-height: 1.25; color: #1796df; }
.career_article p           { margin-bottom: 0; font-size: 14px; }
.career_article img.full    { margin: -1em 0 -1em -1em; }
.career_article.column      { background: #1796df; position: relative; }
.career_article.column p    { color: #fff; float: right; width:50%; }
@media only screen and (max-width: 768px){
.career_content .inner_wrap { margin: 0 auto; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: column;  }
.career_article             { margin-bottom: 2em; padding: 1em; width: 100%; border: 1px solid #1796df; box-sizing: border-box; }
.career_article h4          { font-size: 5vw!important; line-height: 1.5; color: #1796df; }
.career_article p           { margin-bottom: 0; font-size: 3.5vw; }
.career_article img.full    { margin: 0; width: 100%; }
.career_article.column      { background: #1796df; padding: 0; }
.career_article.column p    { color: #fff; padding: 1em; float: none; width: auto; }
}

.career_ending                          { background: #ffaa00; }
.career_ending .inner_wrap              { width: 980px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.career_ending .inner_wrap div          { width: calc(33.333% - 1em); }
.career_ending .inner_wrap div p        { font-size: 14px; font-weight: bold; color: #fff; }
.career_ending .inner_wrap div img      { width: 100%; }
.career_ending .inner_wrap div.f_item04 { width: calc(66.666% - 1em); }
@media only screen and (max-width: 768px){
.career_ending .inner_wrap              { width: 100%; display: block; }
.career_ending .inner_wrap div          { width: auto; }
.career_ending .inner_wrap div p        { font-size: 3.5vw; font-weight: bold; color: #fff; }
.career_ending .inner_wrap div img      { width: 100%; }
.career_ending .inner_wrap div.f_item02 { width: 50%; display: inline-block; padding-right:.25em; box-sizing: border-box; }
.career_ending .inner_wrap div.f_item03 { float: right; width: 50%; display: inline-block; padding-left:.25em; box-sizing: border-box; }
.career_ending .inner_wrap div.f_item04 { width: 100%; }
}

.career_link .inner_wrap             { padding: 2em 0; width: 980px; }
.career_link .inner_wrap ul          { display: flex; flex-wrap: wrap; }
.career_link .inner_wrap ul li       { margin-right: 2em; width: calc(33.33%); font-size: 18px; background: #1796df; border-radius: .5em; position: relative; }
.career_link .inner_wrap ul li a     { display: block; padding: .5em 1em; color: #fff; width: 100%; }
.career_link .inner_wrap ul li:after { position: absolute; content: '▶︎'; color: #fff; top: 50%; right: .75em;  transform: translateY(-50%); }
@media only screen and (max-width: 768px){
.career_link .inner_wrap             { padding: 1em; width: 100%; }
.career_link .inner_wrap ul          { display: flex; flex-wrap: wrap; justify-content: space-between; }
.career_link .inner_wrap ul li       { margin-right: 0; margin-bottom: 1em; width: calc(50% - .5em); font-size: 3.5vw; background: #1796df; border-radius: .5em; position: relative; }
.career_link .inner_wrap ul li a     { display: block; padding: .5em 1em; color: #fff; width: auto; }
.career_link .inner_wrap ul li:after { position: absolute; content: '▶︎'; color: #fff; top: 50%; right: .75em;  transform: translateY(-50%); }
}

/* 紀文社員に聞きました interview.html
------------------------------------------------------ */
#itv_graph_round .inner_wrap                { width: 980px; display: flex; flex-direction: column; }
#itv_graph_round .inner_wrap > div          { margin-bottom: 2em; }
#itv_graph_round .inner_wrap .graph_content { display: flex; }
#itv_graph_round .inner_wrap h3             { font-size: 36px; color: #0099da; margin-bottom: 1em; padding-bottom: .25em; border-bottom: 2px solid #ccc; }
#itv_graph_round .inner_wrap p              { font-size: 18px; color: #004c6d; }
#itv_graph_round .inner_wrap p.caption      { padding-top: .25em; font-size: initial; text-align: right; border-top: 2px solid #ccc; }
@media only screen and (max-width: 768px){
#itv_graph_round .inner_wrap                    { width: 100%; display: flex; flex-direction: column; padding: 3rem 1rem 1rem 1rem; }
#itv_graph_round .inner_wrap > div              { margin-bottom: 1em; }
#itv_graph_round .inner_wrap .graph_content     { display: flex; flex-direction: column; }
#itv_graph_round .inner_wrap .graph_content img { width: 100%; }
#itv_graph_round .inner_wrap h3                 { font-size: 5vw!important; color: #0099da; margin-bottom: 1em; padding-bottom: .25em; border-bottom: 2px solid #ccc; }
#itv_graph_round .inner_wrap p                  { margin-top: 1em; font-size: 3.5vw; color: #004c6d; }
#itv_graph_round .inner_wrap p.caption          { margin-top: 0; padding-top: .5em; font-size: 3vw; text-align: right; border-top: 2px solid #ccc; }
}

#itv_graph_bar .inner_wrap      { width: 980px; }
#itv_graph_bar .inner_wrap > div { margin-bottom: 2em; }
#itv_graph_bar .inner_wrap h3   { font-size: 36px; color: #0099da; margin-bottom: 1em; padding-bottom: .25em; border-bottom: 2px solid #ccc;  }
#itv_graph_bar .inner_wrap p    { margin: 2em 0 4em 0; font-size: 18px; color: #004c6d; }
@media only screen and (max-width: 768px){
#itv_graph_bar .inner_wrap      { width: 100%; }
#itv_graph_bar .inner_wrap > div { margin-bottom: 2em; }
#itv_graph_bar .inner_wrap h3   { font-size: 5vw!important; line-height: 1.25; color: #0099da; margin-bottom: 1em; padding-bottom: .25em; border-bottom: 2px solid #ccc;  }
#itv_graph_bar .inner_wrap p    { margin: 1em 0 2em 0; font-size: 3.5vw; color: #004c6d; }
}

/* 会長からのメッセージ president.html
------------------------------------------------------ */
.perd_visual                { padding-top: 35.715%; height: 0px; background: url(../img/president/president_img.png) center no-repeat; background-size: contain; position: relative; }
.perd_visual .inner_wrap    { width: 980px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.perd_visual .inner_wrap h2 { text-align: right!important; font-size: 60px; line-height: 1.25; }
.perd_read                  { width: 980px; display: inline-block; position: absolute; top: 250px; left: 50%; transform: translateX(-50%); }
.perd_read .inner_wrap      { width: 400px; padding: 0; margin-right: 0; }
.perd_read p                { font-size: 14px; font-weight: bold; color: #333; text-align: right; margin-bottom: 0; }
.perd_read p.read           { font-size: 18px; text-align: left; margin-bottom: .5em; }

.perd_content .inner_wrap   { width: 980px; padding-top: 0; }
.perd_content h3            { font-size: 34px; line-height: 1.25; color: #0099da; margin-top: 2em; margin-bottom: 1em; }
.perd_content p             { font-size: 14px; line-height: 1.75; }
.perd_content .vision       { margin-top: 72px; padding-top: 200px; padding-left: 280px; min-height: 340px; background: url(../img/president/vision_img.png) top left no-repeat; }
@media only screen and (max-width: 768px){
.perd_visual                    { padding-top: 50%; height: 0px; background: url(../img/president/president_img.png) 20% no-repeat; background-size: cover; position: relative; }
.perd_visual .inner_wrap        { width: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.perd_visual .inner_wrap h2     { margin-top: 0; }
.perd_visual .inner_wrap h2 img { width: 60%; }

.perd_read                      { width: 100%; padding: 0; display: block; position: static; color: #00344a; background: #e5f7ff; transform: translateX(0%); }
.perd_read .inner_wrap          { width: 100%; padding: 1em; }
.perd_read p                    { font-size: 3.75vw; color: #00344a; text-align: right; margin-bottom: 0; }
.perd_read p.read               { font-size: 3.75vw; text-align: left; margin-bottom: .5em; }

.perd_content .inner_wrap       { width: 100%; padding-top: 0; }
.perd_content h3                { font-size: 5vw!important; line-height: 1.5; color: #0099da; margin-top: 2em; margin-bottom: 1em; }
.perd_content p                 { font-size: 3.5vw; line-height: 1.5; }
.perd_content .vision           { margin-top: 0; padding-top: 26vw; padding-left: 36vw; min-height: 0; background: url(../img/president/vision_img.png) top left no-repeat; background-size:100%; }
}

/* 人事担当より皆様へ personneldept.html
------------------------------------------------------ */
.person_visual                { padding-top: 35.715%; height: 0px; background: url(../img/parsonnaldept/personneldept_img.png) center no-repeat; background-size: contain; position: relative; }
.person_visual .inner_wrap    { width: 980px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.person_visual .inner_wrap h2 { font-size: 60px; line-height: 1.25; }

.person_read                { width:  980px; display: inline-block; position: absolute; top: 250px; left: 50%; transform: translateX(-50%); }
.person_read .inner_wrap    { width: 540px; padding: 0; margin: 0; }
.person_read p              { font-size: 14px; font-weight: bold; color: #333; text-align: right; margin-bottom: 0; }
.person_read p.read         { font-size: 18px; text-align: left; margin-bottom: .5em; }

.person_content .inner_wrap { width: 980px; padding-top: 0; }
.person_content h3          { font-size: 34px; line-height: 1.25; color: #0099da; margin-top: 2em; margin-bottom: 1em; }
.person_content p           { font-size: 14px; line-height: 1.75; color: ; }
@media only screen and (max-width: 768px){
.person_visual              { padding-top: 50%; height: 0px; background: url(../img/parsonnaldept/personneldept_img.png) center no-repeat; background-size: cover; position: relative; }
.person_visual .inner_wrap  { width: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.person_visual .inner_wrap h2 { margin: 0; }

.person_read                { width: 100%; padding: 0; display: block; position: static; color: #00344a; background: #e5f7ff; transform: translateX(0%); }
.person_read .inner_wrap    { width: 100%; padding: 1em; }
.person_read p              { font-size: 3.75vw; color: #00344a; text-align: right; margin-bottom: 0; }
.person_read p.read         { font-size: 3.75vw; text-align: left; margin-bottom: .5em; }

.person_content .inner_wrap { width: 100%; padding-top: 0; }
.person_content h3          { font-size: 5vw!important; line-height: 1.5; color: #0099da; margin-top: 2em; margin-bottom: 1em; }
.person_content p           { font-size: 3.5vw; line-height: 1.5; }
}

/* 研修制度 education.html
------------------------------------------------------ */
#edu_visual h2                         { font-size: 80px; color: #004c6d; margin-bottom: .25em; }
#edu_visual p                          { font-size: 30px; color: #004c6d; }
#edu_visual .inner_wrap                { width: 980px; display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 0; }
#edu_visual .inner_wrap .edu_title     { width: calc(60% - 14px); }
#edu_visual .inner_wrap .edu_image     { width: 40%; }
#edu_visual .inner_wrap .edu_image img { width: 100%; }
@media only screen and (max-width: 768px){
#edu_visual p                      { font-size: 4vw; color: #004c6d; }
#edu_visual .inner_wrap            { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
#edu_visual .inner_wrap .edu_title { width: 100%; }
#edu_visual .inner_wrap .edu_image { margin: auto; width: 60vw; }
}

.edu_content .inner_wrap           { width: 980px; padding-top: 0; }
.edu_content h3                    { font-size: 36px; color: #0099da; margin-top: 2em; margin-bottom: 1em; }
.edu_content p                     { font-size: 14px; }
.edu_content .edu_flow h4          { padding: .75em; text-align: center!important; font-size: 24px; color: #ffaa00; background: #ffeecc; }
.edu_content .edu_flow p .fl_left  { float: left; }
.edu_content .edu_flow p .fl_right { float: right; }
.edu_content p .fl_center          { display: block; margin: 1em auto; }
@media only screen and (max-width: 768px){
.edu_content .inner_wrap           { width: 100%; padding-top: 0; }
.edu_content h3                    { font-size: 6vw!important; color: #0099da; margin-top: 1em; margin-bottom: 1em; }
.edu_content p                     { font-size: 3.5vw; }
.edu_content .edu_flow h4          { padding: .75em; text-align: center!important; font-size: 4vw!important; color: #ffaa00; background: #ffeecc; }
.edu_content .edu_flow p .fl_left  { float: left; width: 40%; padding-right: .5em; }
.edu_content .edu_flow p .fl_right { float: right; width: 40%; padding-left: .5em; }
.edu_content p .fl_center          { display: block; margin: 1em auto; }
}

/* よくある質問 faq.html
------------------------------------------------------ */
#faq_visual .inner_wrap     { width: 980px; height: 304px; position: relative; }
#faq_visual .inner_wrap h2  { font-size: 80px; color: #004c6d; float: left; }
#faq_visual .inner_wrap img { float: right; }
@media only screen and (max-width: 768px){
#faq_visual .inner_wrap     { width: 100%; height: auto; position: relative; }
#faq_visual .inner_wrap h2  { font-size: 10vw!important; color: #004c6d; margin-bottom: .25em; }
#faq_visual .inner_wrap img { float: none; display: block; margin: auto; height: 50vw; }
}
#faq_acc .acc_section          { margin-bottom: 1em; }
#faq_acc .acc_title            { padding: 1em 3em 1em 1em; font-size: 24px; color: #fff; background: #7fccec; cursor: pointer; position: relative; }
#faq_acc .acc_title:after      { position: absolute; right: 1em; top: 50%; transform: translateY(-50%); content: '\f0d7'; font-family: "Font Awesome 5 Free"; font-size: 2em; margin-left: 0.5em; font-weight: 900; -webkit-font-smoothing: antialiased; }
#faq_acc .acc_title.open:after { position: absolute; right: 1em; top: 50%; transform: translateY(-50%); content: '\f0d8'; font-family: "Font Awesome 5 Free"; font-size: 2em; margin-left: 0.5em; font-weight: 900; -webkit-font-smoothing: antialiased; }
#faq_acc .acc_title p          { position: relative; margin: 0; padding-left: 2em; }
#faq_acc .acc_title p:before   { position: absolute; content: 'Q. '; top: 0; left: 0; }
#faq_content .inner_wrap       { width: 980px; }
#faq_acc .acc_content          { padding: 1em; font-size: 24px; color: #0099da; background: #f8f8f8; }
#faq_acc .acc_content p        { position: relative; margin: 0; padding-left: 2em; }
#faq_acc .acc_content p:before { position: absolute; content: 'A. '; top: 0; left: 0; }

@media only screen and (max-width: 768px){
#faq_acc .acc_title            { padding: .5em 10vw .5em .5em; font-size: 4vw; color: #fff; background: #7fccec; cursor: pointer; position: relative; }
#faq_acc .acc_title:after      { position: absolute; right: .5em; top: 50%; transform: translateY(-50%); content: '\f0d7'; font-family: "Font Awesome 5 Free"; font-size: 2em; margin-left: 0.5em; font-weight: 900; -webkit-font-smoothing: antialiased; }
#faq_acc .acc_title.open:after { position: absolute; right: .5em; top: 50%; transform: translateY(-50%); content: '\f0d8'; font-family: "Font Awesome 5 Free"; font-size: 2em; margin-left: 0.5em; font-weight: 900; -webkit-font-smoothing: antialiased; }
#faq_content .inner_wrap       { width: 100%; }
#faq_acc .acc_content          { padding: .5em; font-size: 4vw; color: #0099da; background: #f8f8f8; }
#faq_acc .acc_content p        { position: relative; margin: 0; padding-left: 2em; }
}

/* 募集要項 recruit.html
------------------------------------------------------ */
article.recruit_htm h3          { font-size: 48px; color: #004c6d; margin-bottom: 1em; }
#rec_recruit                    { margin: 0 auto; background: #ffaa00; overflow: hidden; }
#rec_recruit .inner_wrap        { height: 290px; position: relative; }
#rec_recruit .inner_wrap .title { width: 705px; }
#rec_recruit .inner_wrap h2     { color: #fff; border-bottom: solid 2px #fff; }
#rec_recruit .inner_wrap p      { color: #fff; font-weight: ; font-size: 30px; }
#rec_recruit .inner_wrap img    { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
@media only screen and (max-width: 768px){
article.recruit_htm h3          { font-size: 8vw!important; color: #004c6d; margin: 1em 0 .5em 0; }
#rec_recruit                    { margin: 0 auto; background: #ffaa00; overflow: hidden; }
#rec_recruit .inner_wrap        { height: 50vw; position: relative; }
#rec_recruit .inner_wrap .title { width: 100%; }
#rec_recruit .inner_wrap h2     { width: calc(100% - 25%); color: #fff; border-bottom: solid 2px #fff; }
#rec_recruit .inner_wrap p      { color: #fff; font-weight: ; font-size: 3.25vw; }
#rec_recruit .inner_wrap img    { width: 45vw; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); }
}

#rec_office .two_column                { display: flex; flex-wrap: wrap; justify-content: space-between; }
#rec_office .two_column .left_side     { width: calc(50% - 70px); }
#rec_office .two_column .left_side img { width: 100%; }
#rec_office .two_column .right_side    { width: calc(50% + 30px); }
@media only screen and (max-width: 768px){
#rec_office .two_column                { display: flex; flex-direction: column; }
#rec_office .two_column .left_side     { width: 100%; }
#rec_office .two_column .left_side img { width: 100%; margin-bottom: 2em; }
#rec_office .two_column .right_side    { width: 100%; }
}

.data_list dt { padding: 1em; font-size: 16px; font-weight: bold; color: #0099da; background: #e6e6e6; }
.data_list dd { padding: 1em; font-size: 16px; }
@media only screen and (max-width: 768px){
.data_list dt { padding: 1em; font-size: 3.5vw; font-weight: bold; color: #0099da; background: #e6e6e6; }
.data_list dd { padding: 1em; font-size: 3.5vw; }
}

#rec_job       { background: #ffeecc; }
#rec_job ul    { display: flex; flex-wrap: wrap; justify-content: space-between; }
#rec_job ul li { width: calc(50% - 30px); }
#rec_job ul h4 { padding: .75em 1em; font-size: 22px; color: #fff; background: #ffaa00; }
#rec_job ul p  { padding: 0 0 1em 0; font-size: 14px; color: #00344a; }
@media only screen and (max-width: 768px){
#rec_job       { background: #ffeecc; }
#rec_job ul    { display: flex; flex-direction: column; }
#rec_job ul li { width: 100%; }
#rec_job ul h4 { padding: 1em; font-size: 4vw!important; color: #fff; background: #ffaa00; }
#rec_job ul p  { padding: 0; font-size: 3.5vw; color: #00344a; }
}

#rec_allowance .two_column             { display: flex; flex-wrap: wrap; justify-content: space-between; }
#rec_allowance .two_column .left_side  { width: calc(50% + 30px); }
#rec_allowance .two_column .right_side { width: calc(50% - 70px); }
@media only screen and (max-width: 768px){
#rec_allowance .two_column             { display: flex; flex-direction: column; }
#rec_allowance .two_column .left_side  { width: 100%; }
#rec_allowance .two_column .right_side { width: 100%; }
}

#rec_allowance .recruit_step           { margin-bottom: 1em; padding: 2em; background: #aae2f9; border-radius: 1rem; }
#rec_allowance .recruit_step h3        { margin-bottom: .5em; text-align: center!important; }
#rec_allowance .recruit_step ol li     { margin-top: 2em; margin-bottom: 2em; display: flex; align-items: center; background: #fff; border-radius: .5rem; }
#rec_allowance .recruit_step ol li div { padding: .5em 1.25em; font: bold italic 24px/1 "Yu Gothic",sans-serif; color: #fff; background: #0099da; border-radius: .5rem 0 0 .5rem; position: relative; }
#rec_allowance .recruit_step ol li p         { margin: 0; width: 100%; font-size: 18px; text-align: center; color: #00344a; background: #fff; border-radius: 0 .5rem .5rem 0; }
#rec_allowance .recruit_step ol li div:after { content: '\f0d7'; font-family: "Font Awesome 5 Free"; font-size: 1.5em; font-weight: 900; font-style: normal; width: 100%; text-align: center; color: #0099da; position: absolute; left: 0; top: 100%; }
#rec_allowance .recruit_step ol li:last-child           { margin-bottom: 0; }
#rec_allowance .recruit_step ol li:last-child div:after { content: ''; }
#rec_allowance .right_side p.caption                    { margin-bottom: 0!important; color: #00344a; text-indent: -1em; padding-left: 1em; }
@media only screen and (max-width: 768px){
#rec_allowance .recruit_step           { margin-bottom: 1em; padding: 2em; background: #aae2f9; border-radius: 1rem; }
#rec_allowance .recruit_step h3        { margin: .5em auto; text-align: center!important; }
#rec_allowance .recruit_step ol li     { margin-top: 1em; margin-bottom: 6vw; display: flex; align-items: center; background: #fff; border-radius: .5rem; }
#rec_allowance .recruit_step ol li div { padding: .25em 1em; font: bold italic 6vw/1 "Yu Gothic",sans-serif; color: #fff; background: #0099da; border-radius: .5rem 0 0 .5rem; position: relative; }
#rec_allowance .recruit_step ol li p         { margin: 0; width: 100%; font-size: 4vw; text-align: center; color: #00344a; background: #fff; border-radius: 0 .5rem .5rem 0; }
#rec_allowance .recruit_step ol li div:after { content: '\f0d7'; font-family: "Font Awesome 5 Free"; font-size: 6vw; font-weight: 900; font-style: normal; width: 100%; text-align: center; color: #0099da; position: absolute; left: 0; top: 100%; }
#rec_allowance .right_side p.caption         { margin-bottom: 0!important; color: #00344a; font-size: 2.5vw; text-indent: -1em; padding-left: 1em; }
}

#rec_application               { background: url(../img/recruit_app_bg.png) repeat; }
#rec_application .inner_wrap   { width: 1200px; }
#rec_application .app_crop     { margin: 0 220px; padding: 30px 80px; background: #fff; border: 2px solid #0099da; border-radius: 2rem; }
#rec_application .app_crop h3  { margin-bottom: .5em; }
#rec_application .app_crop p   { font-size: 14px; color: #00344a; }
#rec_application .app_crop img { width: 280px; }
@media only screen and (max-width: 768px){
#rec_application .inner_wrap   { width: 100%; }
#rec_application               { background: url(../img/recruit_app_bg.png) repeat; }
#rec_application .app_crop     { margin: 0; padding: 2em; background: #fff; border: 2px solid #0099da; border-radius: 1rem; }
#rec_application .app_crop h3  { margin-top: 0; margin-bottom: .5em; }
#rec_application .app_crop p   { font-size: 3.5vw; color: #00344a; }
#rec_application .app_crop a   { width: 49%; display: inline-block; }
#rec_application .app_crop img { width: calc(100% - .25em); }
}