@charset "utf-8";
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

/*==============================================================================
【common】
================================================================================*/
*,*::before,*::after { box-sizing: border-box;}
html { font-size: 100%; scroll-padding-top: var(--header-height, 0px); scroll-behavior: smooth;}
body { background: #fff; color:#333; font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320))), 16px); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400; line-height: 1.5; margin:0; padding:0; text-size-adjust: 100%; position:relative; width:100%; -webkit-text-size-adjust: 100%;}

@media screen and (min-width: 0px) and (max-width: 1365px){
html,body { overflow-x: hidden;}
html, body, #app { touch-action: pan-y; overscroll-behavior-x: contain;}
}

img, picture, video, canvas, svg { display: block; height: auto; min-width: 0; max-width: 100%;}
ul, ol, li { list-style:none; padding:0; margin:0; }
a, a:active, a:focus, a:hover {text-decoration: none;}
a img { border-style:none; backface-visibility:hidden;}
a:hover img { text-decoration: none;}

input, button, textarea, select, fieldset { font-family: inherit; font-size: 100%; margin: 0;}
button, input[type="button"], input[type="submit"] { cursor: pointer;}

.clearfix:before,
.clearfix:after { content:" "; display:table; }
.clearfix:after { clear:both; }

/*hover時の挙動*/
a,
img { transition: 0.3s ease-in-out; }
a:hover img { opacity: 0.8; }


/*ハンバーガーメニューの時だけ表示・非表示（今回は1365pxで切り替え）*/
.d-1365-none {  display: none;}
@media (max-width: 1365px) {
.d-1365-none { display: inline-block;}
}

/*基本のSP用の表示・非表示*/
.appearForPC { display: block;}
.appearForSP { display: none;}
@media (max-width: 768px) {
.appearForPC { display: none;}
.appearForSP { display: block;}
}


/*基本のタイトル
==============================================================================*/
h2.secTtl { font-size: 22px; font-weight: 500; line-height: 1.5; margin: 0 0 40px 0; text-align: center;}

/*青色の英文字*/
h2.secTtl span { color: #0E6EB8; display: block; font-family: "Montserrat"; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.75px; margin: 0;}

/*注釈がつく場合*/
h2.secTtl small { display: block; font-size: 13px; font-weight: 400; line-height: 1; margin: 7px 0 0 0;}

/*画像の場合*/
h2.secTtl img { margin: 0 auto;}

/*別途テキストがつく場合*/
h2.secTtl p { font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 500; line-height: 1.3; margin: 27px 0 0 0; text-align: center;}

@media (max-width: 430px) {


}



/*==============================================================================
【ヘッダー】ハンバーガーメニューは後述
===============================================================================*/
#header { background: rgba(255,255,255,1); display: flex; align-content: space-between; align-items: center; flex-wrap: nowrap; justify-content: space-evenly; margin: 0 auto; position: fixed; top: 0; left: 0; padding: 15px 30px; width:100%; z-index: 100; }

/*ロゴ*/
#header h1 { flex-shrink: 0; margin: 0; min-width: 100px; }
#header h1 img { height: auto; max-width: 100%; }

@media (max-width: 430px) {
#header h1 { flex-shrink: inherit; flex-grow: 0;}
#header h1 img { height: auto; max-width: 70%; }
}

/*PC版メニュー大枠*/
.menu { align-content: flex-end; align-items: center; display: flex; flex-grow: 1; flex-wrap: nowrap; justify-content: space-around; }

/*PC版メニューリスト一式*/
.menu ul { display: flex; align-content: center; align-items: center; flex-grow: 1; flex-shrink: 1; flex-wrap: nowrap; gap: 25px; justify-content: space-evenly; list-style: none; margin: 0; padding: 0; max-width: 75%; }
.menu ul li a span {  display: block; font-size: 1rem; font-weight: 600;}

/*リンク色*/
.menu ul li a,
.menu ul li a:visited { color: #000; white-space: nowrap; }
.menu ul li a:hover,
.menu ul li a:active { color: #0E6EB8;}



/*ハンバーガーメニュー（1365px）になるまでの文字調整*/
@media (max-width: 1510px) {
  .menu ul { gap: 15px; }
  .menu ul li a span { font-size:1rem; }
}
@media (max-width: 1490px) {
  .menu ul li a span { font-size: 0.9rem; }
}
@media (max-width: 1390px) {
  .menu ul { gap: 5px; }
  .menu ul li a span { font-size: 0.9rem; }
}

/*=========================================
ハンバーガーメニュー（1365pxで実行）
==============================================================================*/
/*実行前はdisplay:none;*/
.hamburger { cursor: pointer; display: none; height: 24px; position: relative; width: 30px; z-index: 1100; }

/*実行後の見た目
------------------------------------------------*/
@media (max-width: 1365px) {
#header { border-bottom: 2px solid #009E99; display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; max-width: 100%; width: 100%;}
/*ロゴを小さくしない処理*/
#header h1 {flex-grow: 1; margin: 0; line-height: 0;}

/*見えるようにする*/
.hamburger { display: block; }

/*三本線*/
.hamburger span { background: rgba(0, 159, 154, 1); border-radius: 60px; display: block; height: 4px; left: 0; position: absolute; transition: 0.3s ease; width: 100%; }
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }

/*閉じるボタン（通常は45degと-45degでよい）315・675*/
.hamburger.active span:nth-child(1) { top: 10px; transform: rotate(315deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { top: 10px; transform: rotate(-315deg); }

/*展開するメニューのサイズは393px
------------------------------------------------*/
.menu { background: rgba(248,248,248,1); display: flex; flex-direction: column; justify-content: flex-start; height: 100vh; overflow-y: auto; position: fixed; right: -393px; top: 0; transition: right 0.25s ease; width: 393px; z-index: 1000; }

/*展開時*/
.menu.active { right: 0;}
/*.menu.active { transform: translateX(0); right: 0;}*/

/*展開後のメニューの見た目はここ
------------------------------------------------*/
.menu.active ul { display: flex; flex-grow:0; flex-direction: column; align-items: center; margin: 0 0 86px 0; padding: 100px 0 0 0; width: 100%; }
.menu.active li { font-size: 16px; line-height: 1; margin: 0 0 48px 0;}
.menu.active li:last-child { margin: 0;}
}

/*タブレット以下の設定
------------------------------------------------*/
/*展開するメニューのサイズは100％*/
@media (max-width: 768px) {
.menu { transition: none; right: -100%;  width: 100%;}
/*一瞬二メーションを遅らす*/
.ready .menu { transition: right 0.25s ease;}
/*hoverは無効*/
.menu ul li a:hover,
.menu ul li a:active { color: #000;}
}



/*==============================================================================
青グラデーションのボタン（グラデーション→白に変化して矢印は無し）
==============================================================================*/
.entryBtn { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0;} 

/*box-shadowはborderの代わりです*/
.entryBtn a { background: #fff; box-shadow: 0 0 0 1px #6DC8E0 inset; border-radius: 60px; display: block; color: #fff; padding: 15px 60px 15px 60px; transition: color 0.2s ease-in-out, border 0.2s ease-in-out; overflow: hidden; position: relative; }

/*疑似要素でグラデーションを載せる*/
.entryBtn a::before { background: linear-gradient(90deg, #6DC8E0 0%, #1888C9 100%); border-radius: 60px; content: ""; position: absolute; inset: 0; transition: opacity 0.2s ease-in-out; z-index: 0; opacity: 1; } 

/*テキスト*/
.entryBtn a span { display: block; font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320))), 18px); font-weight: 500; line-height: 1.1;  text-align: center; transition: color 0.2s ease-in-out; position: relative; z-index: 1; }

/*hover時の挙動*/
/*疑似要素を消すことでふわっと変化したように見せる*/
.entryBtn a:hover::before,
.entryBtn a:active::before { opacity: 0; }

/*リンクの挙動*/
.entryBtn a,
.entryBtn a:visited {color: #fff;} 
.entryBtn a:hover,
.entryBtn a:active {color: #1888C9;}

@media (max-width: 1365px) {
.entryBtn a span { font-weight: 500; letter-spacing: 0; }

/*SPメニュー版でロゴの横にある時
------------------------------------------------*/
/*サイズ*/
#header .entryBtn a { padding: 16px 20px 16px 20px;}
/*テキスト*/
#header .entryBtn a span { display: block; font-size: clamp(12px, calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320))), 16px); font-weight: 500; line-height: 1.1; text-align: center; transition: color 0.2s ease-in-out; position: relative; z-index: 1; } 

/*SPメニュー版で展開したメニューの中にある時
------------------------------------------------*/
#header .entryBtn.inmenu a { padding: 20px 60px 20px 60px;}
/*テキスト*/
#header .entryBtn.inmenu a span { font-size: 18px;} 
}

@media (max-width: 1090px) {
/*SPメニュー版でロゴの横にある時
------------------------------------------------*/
#header .entryBtn a { padding: 16px 20px 16px 20px; white-space: nowrap;}

/*アイキャッチの中にある時
------------------------------------------------*/
/*サイズ*/
.circle .entryBtn { width: 240px !important;}
.circle .entryBtn a { padding: 14px 10px 14px 10px;}
}

/*SPではhover系の挙動を無効に;*/
@media (max-width: 991px) {
.entryBtn a:hover::before,
.entryBtn a:active::before { opacity: 1; }
.entryBtn a:hover,
.entryBtn a:active {color: #fff;}
}

@media (max-width: 767px) {
/*アイキャッチの中にある時
------------------------------------------------*/
/*サイズ*/
.circle .entryBtn { width: 100% !important;}
.circle .entryBtn a { padding: 20px 60px 20px 60px; }
}
@media (max-width: 450px) {
/*SPメニュー版でロゴの横にある時
------------------------------------------------*/
#header .entryBtn a { padding: 12px 15px 12px 15px; white-space: nowrap;} 
}

@media (max-width: 320px) {
/*SPメニュー版でロゴの横にある時
------------------------------------------------*/
#header .entryBtn a { padding: 10px 10px 10px 10px;} 

}

/*==============================================================================
ピンクのリンクボタン（ピンク→白に変化して矢印付き）
==============================================================================*/
.entryBtn_arrow { display: inline-block; max-width: 282px; width: 100%;} 

.entryBtn_arrow a { background: #E81287; border: 1px solid #E81287; border-radius: 90px; color: #fff; display: block; overflow: hidden; padding: 14px 20px 14px 47px; position: relative; transition: color 0.3s ease-in-out, border 0.3s ease-in-out; } 

/*疑似要素を出すことでふわっと変化したように見せる*/
.entryBtn_arrow a:hover::before,
.entryBtn_arrow a:active::before { opacity: 1; } 

/*テキスト*/
.entryBtn_arrow a span { display: inline-flex; align-items: center; font-size: clamp(16px, calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320))), 18px); font-weight: 500; line-height: 1.5; }

/*矢印→*/
.entryBtn_arrow a span .arrow-icon { height: auto; margin-left: 25px; stroke: #fff; transition: transform 0.3s ease-in-out, stroke 0.3s ease-in-out; width: 1em; }

/*ホバーで動かす*/
.entryBtn_arrow a:hover .arrow-icon,
.entryBtn_arrow a:active .arrow-icon { stroke: #E81287; transform: translateX(12px);}

/*リンクの挙動*/
.entryBtn_arrow a,
.entryBtn_arrow a:visited { color: #fff;} 
.entryBtn_arrow a:hover,
.entryBtn_arrow a:active { background: #fff; color: #E81287;}


@media (max-width: 991px) {
.entryBtn_arrow a { padding: 14px 0; } 
.entryBtn_arrow a span .arrow-icon {display: none;}

/*SPではhover系の挙動を無効に;*/
.entryBtn_arrow a:hover::before,
.entryBtn_arrow a:active::before { opacity: 1; }
.entryBtn_arrow a:hover,
.entryBtn_arrow a:active,
.entryBtn_arrow a:focus {background: #E81287; color: #fff;}
}


/*==============================================================================
【アイキャッチ】
===============================================================================*/
/*絶対比率を変えずに壁紙を載せる版*/
#eyecatch { background: url("../../img/jobs/header_bg.jpg") center center / cover no-repeat; display: flex; align-items: center; justify-content: center; padding: 0; position: relative; min-height: 760px;}
/* (高さ760 ÷ 幅1920 * 100 で比率は 39.6%) */
#eyecatch::before { content: ""; display: block; padding-top: 39.6%;}

/*wrap*/
#eyecatch .wrap { margin: 0 auto; max-width: 1280px; width: 100%;}

/*アイキャッチ文*/
#eyecatch h1 {  display: block; margin: 0 0 0 0; padding: 0; }
#eyecatch h1 span { color: #FFF; display: block; font-size: clamp(36px, calc(36px + (70 - 36) * ((100vw - 320px) / (1920 - 320))), 70px); font-weight: 700; line-height: 150%; padding: 0 0 0 70px; text-shadow: 0 0 15px rgba(0, 0, 0, 0.35);}

/*アイキャッチ分と横並びになる枠*/
.circle-block {display: flex; align-items: center; align-content: center; justify-content: center; position: relative;}

/*半透明の白い正円
--------------------------*/
.circle { background: rgba(255,255,255,0.7); border-radius: 50%; display: flex; align-items: center; flex-direction: column; justify-content: flex-start; height: 547px; margin: 0; padding: 90px 0 0 0; position: absolute; top: -125px; text-align: center;  width: 547px; }
/*テキスト*/
.circle p { color: #0E6EB8; font-size: clamp(18px, calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 700; line-height: 1.5; margin: 0 0 18px 0; }
.circle img { margin: 0 0 18px 0; max-width: 282px; width: 100%;}
.circle .entryBtn { display: inline-block; max-width: 282px; width: 100%;}


@media (max-width: 1340px) {
.circle { height: 500px; top:-90px; width: 500px; }
#eyecatch .wrap { margin: 0 auto; max-width: 1100px; width: 100%;}
}
@media (max-width: 1200px) {
.circle { padding: 70px 0 0 0; height: 470px; top:-60px; width: 470px; }
}

@media (max-width: 1130px) {
.circle { height: 450px; top:-50px; right: 5px; width: 450px; }
}

@media (max-width: 1090px) {
.circle { height: 420px; padding: 60px 0 0 0; top:-20px; right: 10px; width: 420px; }
.circle img { width: 70%;}
}

/*ノートPCで見た時の調整
============================================================================================================*/
@media (min-width: 1024px) and (max-width: 1920px) and (max-height: 780px) {
.circle { height: 420px; top:-100px; right: 0px; width: 420px; }
.circle img { width: 50%;}
}



@media (max-width: 980px) {
.circle { height: 400px; top:-10px; right: 10px; width: 400px; }
.circle img { width: 60%;}
}

@media (max-width: 920px) {
.circle { height: 380px; top:15px; width: 380px; }
.circle img { width: 60%;}
}

@media (max-width: 769px) {
.circle .entryBtn { display: inline-block; width: 100%;}
}

@media (max-width: 767px) {
#eyecatch { background-position: 47% 0; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; min-height: inherit; padding: 280px 0 60px 0; }

#eyecatch h1 { display: flex; flex-direction: column; flex-wrap: wrap; margin: 0 auto 30px auto; padding: 0; width: 282px; }
#eyecatch h1 span { display: block; font-size: 36px; padding: 0; text-shadow: 0 0 15px rgba(0, 0, 0, 0.35);}

.circle-block { margin: 0; justify-content: center; }
.circle { background: none; margin: 0 auto; padding: 0; inset:0; position: relative; height: auto; width: 282px; }
.circle p { color: #fff; font-size: 20px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.77); line-height: 1.9;}
.circle img { display: none;}

.circle .entryBtn { display: inline-block; width: 100%;}
}

@media (max-width: 470px) {
#eyecatch { background-position: 52% 0; padding: 280px 0 60px 0; }
#eyecatch h1 span { line-height: 150%;}
}
@media (max-width: 320px) {
#eyecatch { background-position: 54%  -30px; padding: 260px 0 70px 0; }
.circle p { line-height: 1.5;}
}





/*==============================================================================
【4つのポイント】
================================================================================*/
#sec_point { margin:0 auto; padding: 90px 0 80px 0; }
#sec_point .wrap { margin: 0 auto; padding: 0; max-width: 1420px;}

/*イラストのリスト
-------------------------------*/
#sec_point ul { display: flex; justify-content: space-between; margin: 0; padding: 0; text-align: center; width: 100%; }

#sec_point ul li {margin: 0 55px 30px 0; padding: 0; text-align: center; }
#sec_point ul li:last-child {  margin: 0 0 30px 0; }
#sec_point ul li img { margin: 0 auto; max-width: 100%; width: 100%; }

/*テキスト*/
#sec_point ul li span { display: block; font-size: clamp(18px, calc(18px + (20 - 18) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 500; letter-spacing: -1px; line-height: 1.5; margin: 20px 0 0 0; }

/*文字色*/
#sec_point ul li a,
#sec_point ul li a:visited { color: #000;}
#sec_point ul li a:hover,
#sec_point ul li a:active { color: #0E6EB8;}

@media (max-width: 1430px) {
#sec_point .wrap { max-width: 1200px;}
#sec_point ul li {margin: 0 45px 30px 0;}
#sec_point ul li span {letter-spacing: 0; }
/*改行を表示*/
#sec_point ul li .appearForSP { display: block;}
}
@media (max-width: 1280px) {
#sec_point .wrap { max-width: 1000px;}
#sec_point ul li {margin: 0 40px 30px 0;}
}
@media (max-width: 1050px) {
#sec_point .wrap { max-width: 900px;}
#sec_point ul li {margin: 0 15px 30px 0;}
}

/*ここから2列表記*/
@media (max-width: 991px) {
#sec_point { padding: 60px 0 65px 0; }
#sec_point .wrap { max-width: 760px;}
#sec_point ul { display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: space-evenly;}
#sec_point ul li { margin: 0 15px 30px 0;}
#sec_point ul li:nth-child(2n) { margin: 0 0 30px 0;}
#sec_point ul li:last-child { margin: 0;}
#sec_point ul li img { display: block; max-width: 305px; width: 100%; }

#sec_point ul li .appearForSP { display: none;}
}

@media (max-width: 768px) {
#sec_point .wrap { margin: 0 auto; padding: 0 20px; max-width: 640px;}

#sec_point ul li { margin: 0 auto 40px auto; padding: 0;}
}

@media (max-width: 690px) {
#sec_point ul li { margin: 0 auto 20px auto; padding: 0 7px;}
}

@media (max-width: 340px) {
#sec_point { padding: 20px 0 35px 0; }
#sec_point ul li .appearForSP { display: block;}
}

/*==============================================================================
【E-ラーニングを無料解放！】
================================================================================*/
.sec_bnr { background: url("../../img/jobs/sec_bnr_bg.png") no-repeat center center; background-size: cover; display: flex; align-items: center; padding: 60px 0 60px 0; width:100%;}
.sec_bnr .wrap { margin: 0 auto; max-width: 1420px; width: 100%} 

/*-----------------------------------------
.sec_bnr_01（左）と .sec_bnr_02（真ん中）をまとめる枠
-----------------------------------------*/
.sec_bnr_00 {display: flex; align-items: center;}

/*左
-------------------------------*/
.sec_bnr_01 { padding: 0 0 0 140px; }
.sec_bnr_01 h2 { color: #fff; font-size: clamp(24px, calc(24px + (28 - 24) * ((100vw - 769px) / (1920 - 769))), 28px); font-family: "Inter"; font-weight: 300; line-height: 1.4; margin: 0 0 25px 0;}

/*「など」*/
.sec_bnr_01 p {color: #fff; font-size: clamp(16px, calc(16px + (20 - 16) * ((100vw - 769px) / (1920 - 769))), 20px); font-family: "Inter"; font-weight: 600; line-height: 1; margin: 22px 0 0 0; text-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);}
/*「全200講座」*/ 
.sec_bnr_01 p strong {color: #FFD04A; display: inline-block; font-size: clamp(35px, calc(35px + (38 - 35) * ((100vw - 769px) / (1920 - 769))), 38px); font-weight: 600; line-height: 1; margin: 0 0 0 5px;}
/*「！」*/
.sec_bnr_01 p strong::after { content: "！"; margin-left: -0.1em; }

/*真ん中（写真）
-------------------------------*/
.sec_bnr_02 { margin: 0; padding: 0; text-align: left; }
.sec_bnr_02 img { max-width: 400px; width: 100%;}

/*右
-------------------------------*/
.sec_bnr_03 {margin: 0; padding: 0 0 0 72px !important; text-align: left; }


/*「通常月額1万円」*/
.sec_bnr_03 em { border: 1px solid #fff; color: #fff; display: inline-block; font-size: clamp(12px, calc(12px + (16 - 12) * ((100vw - 769px) / (1920 - 769))), 16px); font-style: normal; font-weight: 500; margin: 0 0 5px 0; padding: 5px 10px; text-align: center;}

/*「E-ラーニングを」*/
.sec_bnr_03 h2 {color: #fff; font-size: clamp(32px, calc(32px + (36 - 32) * ((100vw - 991px) / (1920 - 991))), 36px); font-family: "Inter"; font-weight: 600; line-height: 1.8; margin: 0; white-space: nowrap; }
/*「無料解放*/
.sec_bnr_03 h2 strong {font-size: clamp(36px, calc(36px + (40 - 36) * ((100vw - 991px) / (1920 - 991))), 40px); font-family: "Inter"; font-weight: 600; line-height: 1.8; letter-spacing: -1px;}
/*「！」*/
.sec_bnr_03 h2 strong::after { content: "！"; font-weight: 500; margin-left: -0.1em; }

/*「わくわくポータルなら学びながら就活・求職活動ができる」*/
.sec_bnr_03 p {color: #fff; font-size: clamp(18px, calc(18px + (22 - 18) * ((100vw - 991px) / (1920 - 991))), 22px); font-weight: 500; line-height: 1.6; margin: 0 0 20px 0; }

@media (max-width: 1262px) {
.sec_bnr_01 { padding: 0 0 0 70px; }
.sec_bnr_03 { padding: 0 0 0 50px !important; }
}

@media (max-width: 1120px) {
.sec_bnr_01 { padding: 0 0 0 50px; }
.sec_bnr_03 { padding: 0 0 0 30px !important; }
}

@media (max-width: 1084px) {
.sec_bnr_01 { padding: 0 0 0 20px; }
.sec_bnr_03 { padding: 0 0 0 20px !important; }
}
@media (max-width: 1023px) {
.sec_bnr_01 { padding: 0 0 0 20px; }
.sec_bnr_01 h2 { color: #fff; font-size: 23px;}
.sec_bnr_03 { padding: 0 0 0 15px !important; }
}

@media (max-width: 991px) {
.sec_bnr { background: url("../../img/jobs/sec_bnr_bg_sp.png") no-repeat center center; background-size: cover; padding: 30px 0; max-width: 100%; min-width: 100%; width:100%;}
.sec_bnr .wrap.row { align-items: center; justify-content: center;}

.sec_bnr_00 {display: none;}
.sec_bnr_01 {display: none;}
.sec_bnr_02 {display: none;}
.sec_bnr_03 { padding: 0 !important; text-align: center; width: 100%;}

/*モバイルのみ表示するサンプル画像*/
.sec_bnr_03 img { margin: 0 auto 10px auto; max-width: 230px; width: 100%;}

.sec_bnr_03 img.appearForSP {display: block;}
.sec_bnr_03 br.appearForSP {display: none;}

/*「通常月額1万円」*/
.sec_bnr_03 em { font-size: clamp(12px, calc(12px + (14 - 12) * ((100vw - 320px) / (991 - 320))), 14px); margin: 0 0 10px 0; padding: 5px 10px; text-align: center;}
/*「E-ラーニングを」*/
.sec_bnr_03 h2,
.sec_bnr_03 h2 strong {font-size: clamp(28px, calc(28px + (30 - 28) * ((100vw - 320px) / (991 - 320))), 30px); line-height: 1.3; margin: 0 0 10px 0;}

/*「わくわくポータルなら学びながら就活・求職活動ができる」*/
.sec_bnr_03 p {color: #fff; font-size: clamp(18px, calc(18px + (20 - 18) * ((100vw - 320px) / (991 - 320))), 20px); margin: 0 0 10px 0; }
}

@media (max-width: 350px) {
.sec_bnr_03 br.appearForSP {display: block;}
}

/*==============================================================================
【LEARNING：学びながら求職活動ができる】
================================================================================*/
#sec_cont_01 { margin: 0 auto; padding: 90px 0 80px 0; }

@media (max-width: 991px) {
#sec_cont_01 { padding: 65px 0 45px 0; }
}

/*テキストタイトル*/
#sec_cont_01 h3 { color: #0E6EB8; font-size: clamp(18px, calc(18px + (25 - 18) * ((100vw - 320px) / (1920 - 320))), 25px); font-weight: 500; line-height: 1.3; margin: 0 0 16px 0;}
/*テキスト*/
#sec_cont_01 p { font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320))), 16px); font-weight: 400; line-height: 1.8; margin: 0 0 16px 0;}

@media (max-width: 991px) {
#sec_cont_01 img { width: 100%;}
}


/*==============================================================================
【WorkWorkラーニング:仕事に活かせる講座がなんと全200講座も！】
================================================================================*/
#sec_carricu { background: #F6F6F6; padding: 90px 0 52px 0;  }
/*wrap*/
#sec_carricu .wrap { margin: 0 auto; padding: 0 28px; max-width: 1600px; width: 100%;}

@media (max-width: 991px) {
#sec_carricu { padding: 40px 0 30px 0; }
}

@media (max-width: 768px) {
#sec_carricu h2.secTtl img { max-width: 325px; width: 100%;}
}

/*リスト
---------------------------------*/
#sec_carricu ul { display: flex; align-items: flex-start; justify-content: center; margin: 0; padding: 0; }
#sec_carricu ul li { flex: 1 1 auto; margin: 0 51px 0 0; max-width: 375px; }
#sec_carricu ul li:last-child { margin-right: 0; }
#sec_carricu ul li img { display: block; height: auto; margin: 0 auto; max-width: 100%; width: 100%; }

/*ここから2列表記*/
@media (max-width: 991px) {
#sec_carricu { padding: 65px 0 45px 0;  }
#sec_carricu .wrap { max-width: 760px;}
#sec_carricu ul { display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: space-evenly;}
#sec_carricu ul li {flex: 1 1 45%; margin: 0 51px 30px 0;}
#sec_carricu ul li:nth-child(2n) { margin: 0 0 30px 0;}
#sec_carricu ul li:last-child { margin: 0;}
}

/*ここから1列表記*/
@media (max-width: 768px) {
#sec_carricu .wrap { padding: 0 10px;}
#sec_carricu ul li {flex: 1 1 100%; margin: 0 0 30px 0; }
}

/*講座内容のリスト
-------------------------------*/
#sec_carricu ul li ol { display: block; margin: 20px 0 0 0; padding-left: 1em; }
#sec_carricu ul li ol li,
#sec_carricu ul li ol li:nth-child(2n) {font-size: 15px; font-weight: 500; line-height: 1.5; position: relative; padding: 0; margin: 0 !important; width: 100%; }
#sec_carricu ul li ol li::before { content: "・";  position: absolute; left: -1em;}

/*など計ｎ講座
-------------------------------*/
/*「講座」*/
#sec_carricu ul li p {color: #FF6D7C; font-size: 25px; font-weight: 500; line-height: 1; margin: 5px 0 0 0; text-align: center;}

/*「など」*/
#sec_carricu ul li p small { color: #000; font-size: 15px; font-weight: 400; line-height: 1;}
/*「計」*/
#sec_carricu ul li p em { font-size: 20px; font-weight: 500; font-style: normal; line-height: 1; }
/*「数字」*/
#sec_carricu ul li p strong { font-size: 35px; font-weight: 500; line-height: 1;}


/*改行*/
#sec_carricu .appearForSP { display: none;}
@media (max-width: 370px) {
/*改行*/
#sec_carricu .appearForSP { display: block;}
}


/*==============================================================================
【おすすめ講座】スライダー
==============================================================================*/
#sec_slider { background: #F6F6F6; padding: 60px 0 100px 0; }

/*タイトル*/
#sec_slider h2 { display: flex; align-items: center; color: #0D6DB7; font-size: clamp(20px, calc(20px + (25 - 20) * ((100vw - 320px) / (1920 - 320))), 25px); font-weight: 700; gap: 8px; margin: 0 0 20px 0; }
/*アイコン*/
#sec_slider h2 img { height: 51px; object-fit: cover; width: 30px; }

/*横線を左右に追加 */
@media (max-width: 991px) {
#sec_slider .container { margin: 0 auto; padding: 0; max-width: 100%; width: 100%;}

#sec_slider { padding: 0 0 60px 0; }
  #sec_slider h2 { margin: 0 0 20px 0; justify-content: center;}
  #sec_slider h2::before,
  #sec_slider h2::after { background: #B0C8EE; content: ""; flex: 1; height: 5px;}
  #sec_slider h2::before { margin: 0 8px 0 0;}
  #sec_slider h2::after { margin: 0 0 0 8px;}
}

/* ================================
   スライダー全体
   ================================ */

/* スライダーの中身 */
#sec_slider ul { margin: 0; padding: 0; }
#sec_slider ul li { }

/* 一瞬縦に全部表示されるのを隠す */
.achievements-slider { visibility: hidden; }
.achievements-slider.slick-initialized { visibility: visible; }


/* hover時に少しだけ拡大 */
.achievements-slider .slick-slide:hover { z-index: 10; }
.achievements-slider .slick-slide:hover img { transform: scale(1.05) translateY(-5px); }

.achievements-slider img { display: block; }

.achievements-slider .slick-track {
  display: flex !important;
  align-items: center;   /* 縦中央揃えにする */
}

/* SPでは拡大しない */
@media (max-width: 991px) {
  .achievements-slider .slick-slide img,
  .achievements-slider .slick-slide:hover img { transform: none !important; }
}






/*==============================================================================
【FLOW：無料利用までの流れ】
==============================================================================*/
#sec_flow { background: #F6F6F6; margin: 0 auto; padding: 0 0 80px 0; }
/*wrap*/
#sec_flow .wrap { margin: 0 auto; padding: 0 20px; max-width: 1180px; width: 100%;}

/*リスト
---------------------------------*/
#sec_flow ul { display: flex; align-items: center; justify-content: center; align-content: center; margin: 0 auto; padding: 0 0 20px 0; width: 100%;}
#sec_flow ul li { background: #fff; border-radius: 20px; box-shadow: 2px 8px 20px 0 rgba(0, 0, 0, 0.10); margin: 0 25px 0 0; padding: 20px 43px 19px 20px; text-align: center; width: 267px;}
#sec_flow ul li:last-child { margin: 0;}
#sec_flow ul li img { width: -webkit-fill-available;}

/*PCでは横に飛び出さない
---------------------------------*/
#sec_flow .scroll-container { overflow-x: hidden;}

/*WorkWorkポータルへのリンクボタン
---------------------------------*/
#sec_flow .btnBox { margin: 20px auto 0 auto; text-align: center; width: 100%;}

.workwork-button { background-color: transparent; border-radius: 50px; color: #009E99; display: inline-flex; align-items: center; gap: 0.8em; padding: 0.5em 1em; text-decoration: none; transition: all 0.3s ease; }
.workwork-button span.icon { background-color: #ccc; border-radius: 50%; display: flex; align-items: center; height: 55px; justify-content: center; transition: background-color 0.3s ease; width: 55px; }
.workwork-button span.icon svg { height: 20px; width: 20px; }
.workwork-button span.text { font-size: 20px; font-weight: 500;}
.workwork-button:hover { background-color: #009E99; color: white; padding: 0.5em 2em; }
.workwork-button:hover .icon { background-color: transparent; }

@media (max-width: 991px) {
/*hoverの挙動を無効に*/
.workwork-button,
.workwork-button:hover { background-color: #009E99; color: #fff; gap: 35px; padding: 13px 50px; }
.workwork-button span.icon { background-color: transparent !important; height: 17px; width: 17px; }
}
@media (max-width: 341px) {
.workwork-button { gap: 15px; padding: 13px 40px; width: 96% }
}

@media (max-width: 991px) {
/*タイトル*/
#sec_flow h1 { font-size: 22px; font-weight: 700; margin: 0 0 27px 0; }
/*「FLOW」*/
#sec_flow h1 span {  font-size: 13px; font-weight: 700; }
/*「※無料アカウントは3か月間ご利用いただけます。」*/
#sec_flow h1 small { font-size: 15px; line-height: 1.3;}
/*改行*/
#sec_flow h1 small .appearForSP { display: none;}

/*スマホで横スクロールできる枠
---------------------------------*/
.scroll-container { margin: 0; max-width: 98%; overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; width: 100%; }
.scroll-inner img { display: block; object-fit: contain; }


#sec_flow .wrap { margin: 0; max-width: 100%; width: 100%;}
#sec_flow ul { justify-content: flex-start; width: max-content;}
  #sec_flow ul li img {
    width: 100%;            /* fill-available をやめる */
    height: auto;           /* 縦横比を維持 */
  }
}

@media (max-width: 350px) {
/*改行*/
#sec_flow h1 small .appearForSP { display: block;}
}


/*==============================================================================
【REASON：不採用理由がわかる】
================================================================================*/
#sec_cont_02 { margin: 0 auto; padding: 70px 0 80px 0; }

@media (max-width: 991px) {
#sec_cont_02 { padding: 32px 0 12px 0; }
}
/*テキスト*/
#sec_cont_02 p { font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320))), 16px); font-weight: 400; line-height: 1.8; margin: 0 0 16px 0;}

@media (max-width: 991px) {
#sec_cont_02 img { width: 100%;}
}



/*==============================================================================
【COMPANY TOUR & INTERN：会社見学・仕事体験ができる】
================================================================================*/
#sec_cont_03 { margin: 0 auto; padding: 70px 0 80px 0; }

@media (max-width: 991px) {
#sec_cont_03 { padding: 32px 0 12px 0; }
}

/*bootstrapを打ち消し*/
#sec_cont_03 .card { border: none;}

/*タイトル*/
#sec_cont_03 h3 { color: #0E6EB8; font-size: 18px; font-weight: 500; line-height: 1; margin: 17px 0 15px 0; padding: 0; }
/*テキスト*/
#sec_cont_03 p { font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320))), 16px); font-weight: 400; line-height: 1.8; margin: 0 0 16px 0;}



/*==============================================================================
【採用ミスマッチがおきない：離職理由で常に上位にあるのは 「人間関係」と「職場環境」】
================================================================================*/
#sec_cont_04 { background: url("../../img/jobs/sec_cont_04_bg.png") center center / cover no-repeat; color: #F2F2F2; margin: 0; padding:77px 0; text-align: center; }

@media (max-width: 991px) {
#sec_cont_04 { padding: 35px 0 19px 0; text-align: left; }
}

/*タイトル*/
#sec_cont_04 h2 { font-size: clamp(23px, calc(23px + (30 - 23) * ((100vw - 320px) / (1920 - 320))), 30px); font-weight: 700; line-height: 1.5; margin: 17px auto 40px auto; padding: 0; }

/*テキスト*/
#sec_cont_04 p { font-size: clamp(15px, calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320))), 16px); font-weight: 500; line-height: 2.2; margin: 0 0 17px 0;}

/*強調*/
#sec_cont_04 p strong { font-size: clamp(19.5px, calc(19.5px + (20 - 19.5) * ((100vw - 320px) / (1920 - 320))), 20px); font-weight: 700; line-height: 1.8; margin: 0 0 17px 0;}

/*企業側と求職者の声*/
#sec_cont_04 .voiceBox { display: inline-flex; align-items: center; gap: 23px; margin: 0 auto 15px auto; max-width: 718px; width: 100%;}

#sec_cont_04 br.appearForSP_320 { display:none; }

@media (max-width: 991px) {
#sec_cont_04 h2 { text-align: center;}
#sec_cont_04 h2 br.appearForSP { display:block; }
#sec_cont_04 strong br.appearForSP { display:block; }
}

@media (max-width: 768px) {
#sec_cont_04 .voiceBox { display: block; max-width: 322px; }
}

@media (max-width: 390px) {
#sec_cont_04 .voiceBox { display: block; max-width: 322px; }
#sec_cont_04 strong br.appearForSP { display:none; }

}

@media (max-width: 355px) {
#sec_cont_04 h2 { font-size: 25px; }
#sec_cont_04 br.appearForSP_320 { display:block; }
}


/*==============================================================================
【よくある質問】
================================================================================*/
#sec_faq { padding: 100px 0 20px 0;}

@media (max-width: 991px) {
#sec_faq { padding: 47px 0 20px 0;}
}

/*【アコーディオン】FAQで使うパネル式アコーディオン
=======================================================================*/
#faqlist {}
#faqlist ul li { border-radius: 10px; box-shadow: 0px 1px 8.3px 0px rgba(179, 194, 206, 0.33); font-size: 14px; font-weight: 400; line-height: 1; margin: 0 0 30px 0; padding: 17px 23px;}

@media (max-width: 768px) {
#faqlist li { padding: 0 0 20px 0;}
}

/*【アコーディオン】*/
.faq-toggle { background: #fff; border: none; border-radius: 10px; padding: 0 30px 0 0; position: relative; text-align: left; width: 100%; }
.faq-toggle:focus { outline: none; }

/*アイコンの位置*/
.toggle-icon { display: flex; align-items: center; justify-content: center; height: 18px; position: absolute; top: 0; right: 0; width: 18px;}

/*アイコンのアニメーションの処理*/
.icon-plusminus .bar-vertical { transform-box: fill-box; transform-origin: center; transition: transform 0.3s ease, opacity 0.3s ease; }
.faq-toggle:not(.collapsed) .icon-plusminus .bar-vertical { opacity: 0; transform: rotate(90deg); }


/*展開先の枠*/
.collapse { background: #DDF4FF; border-radius: 10px; cursor: pointer; margin: 20px 0 0 0; padding: 17px 23px; position: relative;}
/*collapseがアニメーション中も見た目を↑に寄せる*/
.collapsing { background: #DDF4FF; border-radius: 10px;  margin: 20px 0 0 0; padding: 17px 23px; transition: height 0.35s ease, padding 0.35s ease, opacity 0.35s ease; opacity: 1;}

/* 閉じる時にカクつくのを調整*/
.faq-toggle.collapsed + .collapsing { padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0;}

/*質問*/
.faq-question { display: flex; align-items: flex-start; align-items: center; gap: 0;}
.faq-question strong { color: #0E6EB8; display: inline-block; flex-shrink: 0; font-size: 30px; font-family: "Montserrat"; font-weight: 500;  margin: 0 15px 0 0; vertical-align: middle;}
.faq-question p { color: #000; display: inline-block; font-size: 14px; font-weight: 400; line-height: 1.2; margin: 0; vertical-align: middle;}

/*回答*/
.faq-answer { display: block; gap: 0;}
.faq-answer p { color: #000; font-size: 14px; font-weight: 400; line-height: 1.6; margin: 0 0 16px 0;}
.faq-answer p:last-child {margin: 0;}


/*==============================================================================
【フッター】
==============================================================================*/
#footer { background: #1888C9; padding: 50px 0 67px 0; text-align: center; width: 100%;}

#footer h2 { width: 100%; }
#footer h2 img {margin: 0 auto;  max-width: 256px; width: 100%; }

/*リスト*/
#footer ul { display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 30px auto 50px auto; text-align: center; width: 100%;}
#footer ul li { margin: 0 40px 0 0; padding: 0 11px 0 0; }
#footer ul li:last-child { margin: 0; padding: 0;}

/*リンク色と文字サイズ*/
#footer ul li a { color: #fff; display: inline-flex; align-items: center; font-size: clamp(13px, calc(13px + (15 - 13) * ((100vw - 320px) / (1920 - 320))), 15px); font-weight: 500; line-height: 1.1; position: relative; padding: 0;}

/*末尾につくアイコン*/
#footer ul li a::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13" fill="none"><path d="M1.375 1.5415L6.33333 6.49984L1.375 11.4582" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-repeat: no-repeat; background-size: contain; content: ""; display: inline-block; height: 14px; margin-left: 10px; vertical-align: middle; width: 14px; }

#footer ul li a:hover { color: #DAF1FF;}
#footer ul li a:hover::after { opacity: 0.8;}


/*コピーライト*/
#footer p { color: #fff; font-size: 13px; font-weight: 400; line-height: 1; margin: 0; padding: 13px 0 13px 0; text-align: center; width: 100%;}

@media (max-width: 767px) {
#footer { padding: 26px 0 0 0;}
#footer h2 img { max-width: 221px;}
#footer ul { align-content: center; margin: 20px auto; width: 74%;}
#footer ul li { margin: 0 20px 0 0; padding: 0 11px 0 0; }
#footer ul li a { font-weight: 400; }
#footer p {  background: #848484;}
}

@media (max-width: 390px) {
#footer ul { width: 100%;}
}