@charset "utf-8";

/* ====================================================================================================
   基本設定
   --------------------------------------------------------------------------------------------------- */

/* フォント */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600&family=Roboto&display=swap');

/* ベース */
html                                        { scroll-behavior:smooth; }
body                                        { color:#000; font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
#wrap                                       { padding:0 1px 0; overflow:hidden; }
.container                                  { position:relative; width:80%; max-width:1200px; margin:0 auto; }
.container._m                               { max-width:1000px; }
.container._s                               { max-width: 850px; }

/* リンク */
a:link                                      { color:#006; }
a:visited                                   { color:#039; }

/* アニメーショントリガー */
#check_01                                   { position:absolute; width:1px; height:1px; top:500px; margin-top:-90px; }
#home #check_01                             { top:100vh; }


/* ====================================================================================================
   フォント
   ---------------------------------------------------------------------------------------------------- */

/* 英字 */
#nav_btn h3,
#sect_recruit_picks .ttl_picks,
#sect_recruit_message .container h1,
.message_bottom_txt em,
#sect_recruit_about h1,
.ttl_l span,
.ttl_l em,
.numbers article p._l strong,
.number_box article p._l strong,
.ttl_recruit_senior strong,
#sect_recruit_entry     { font-family: "Barlow", sans-serif; font-style:normal; }


/* ====================================================================================================
   ローダー
   ---------------------------------------------------------------------------------------------------- */

/* ページ移管後：ブラウザの戻るボタン */
body.fadenone #cover { display:none; }

/* ベース */
#cover                                       { position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; user-select:none; pointer-events:none; overflow:hidden; }

/* ロゴ */
#cover .logo                                 { position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; display:block; width:300px; height:300px; margin:auto; }
#cover .logo span                            { position:absolute; top:0; right:0; bottom:0; left:0; display:flex; width:100%; height:100%; background:url(#) no-repeat center center; background-size:cover; }
#cover .logo span:nth-child(1)               { background-image:url(../../img/common/other/cover_01.svg); }
#cover .logo span:nth-child(2)               { background-image:url(../../img/common/other/cover_02.svg); }
#cover .logo span:nth-child(3)               { background-image:url(../../img/common/other/cover_03.svg); }

/* 背景 */
#cover .bg                                   { position:absolute; width:10.08%; height:100%; margin:0 0 0 -0.04%; background:#ededed; }
#cover .bg.bg_01                             { left: 0%; }
#cover .bg.bg_02                             { left: 5%; }
#cover .bg.bg_03                             { left:10%; }
#cover .bg.bg_04                             { left:15%; }
#cover .bg.bg_05                             { left:20%; }
#cover .bg.bg_06                             { left:25%; }
#cover .bg.bg_07                             { left:30%; }
#cover .bg.bg_08                             { left:35%; }
#cover .bg.bg_09                             { left:40%; }
#cover .bg.bg_10                             { left:45%; }
#cover .bg.bg_11                             { left:50%; }
#cover .bg.bg_12                             { left:55%; }
#cover .bg.bg_13                             { left:60%; }
#cover .bg.bg_14                             { left:65%; }
#cover .bg.bg_15                             { left:70%; }
#cover .bg.bg_16                             { left:75%; }
#cover .bg.bg_17                             { left:80%; }
#cover .bg.bg_18                             { left:85%; }
#cover .bg.bg_19                             { left:90%; }
#cover .bg.bg_20                             { left:95%; }

/* フェードイン（ページ移管後） */
body.fadein #cover .logo span                { opacity:1.0; transform:translateX(0) skewX(0deg); animation:body_fadein_logo 0.2s forwards; }
body.fadein #cover .logo span:nth-child(1)   { animation-delay:0.00s; }
body.fadein #cover .logo span:nth-child(2)   { animation-delay:0.02s; }
body.fadein #cover .logo span:nth-child(3)   { animation-delay:0.04s; }
@keyframes body_fadein_logo {
  0% { opacity:1.0; transform:scale(1.0); }
 50% { opacity:1.0; transform:scale(1.0); }
100% { opacity:0.0; transform:scale(1.1); }
}
body.fadein #cover .bg                       { bottom:0%; height:100%; animation:body_fadein 0.1s forwards; }
body.fadein #cover .bg.bg_01                 { animation-delay:0.10s; }
body.fadein #cover .bg.bg_02                 { animation-delay:0.11s; }
body.fadein #cover .bg.bg_03                 { animation-delay:0.12s; }
body.fadein #cover .bg.bg_04                 { animation-delay:0.13s; }
body.fadein #cover .bg.bg_05                 { animation-delay:0.14s; }
body.fadein #cover .bg.bg_06                 { animation-delay:0.15s; }
body.fadein #cover .bg.bg_07                 { animation-delay:0.16s; }
body.fadein #cover .bg.bg_08                 { animation-delay:0.17s; }
body.fadein #cover .bg.bg_09                 { animation-delay:0.18s; }
body.fadein #cover .bg.bg_10                 { animation-delay:0.19s; }
body.fadein #cover .bg.bg_11                 { animation-delay:0.20s; }
body.fadein #cover .bg.bg_12                 { animation-delay:0.21s; }
body.fadein #cover .bg.bg_13                 { animation-delay:0.22s; }
body.fadein #cover .bg.bg_14                 { animation-delay:0.23s; }
body.fadein #cover .bg.bg_15                 { animation-delay:0.24s; }
body.fadein #cover .bg.bg_16                 { animation-delay:0.25s; }
body.fadein #cover .bg.bg_17                 { animation-delay:0.26s; }
body.fadein #cover .bg.bg_18                 { animation-delay:0.27s; }
body.fadein #cover .bg.bg_29                 { animation-delay:0.28s; }
body.fadein #cover .bg.bg_20                 { animation-delay:0.29s; }
@keyframes body_fadein { 
  0% { opacity:1; bottom:-5%; height:110%; }
100% { opacity:0; bottom:-5%; height:110%; }
}

/* フェードアウト（リンククリック後） */
body.fadeout #cover .logo span               { opacity:0.0; transform:translateX(-20px) skewX(5deg); animation:body_fadeout_logo 0.5s forwards; }
body.fadeout #cover .logo span:nth-child(1)  { animation-delay:0.00s; }
body.fadeout #cover .logo span:nth-child(2)  { animation-delay:0.05s; }
body.fadeout #cover .logo span:nth-child(3)  { animation-delay:0.10s; }
@keyframes body_fadeout_logo { 
  0% { opacity:0.0; transform:scale(0.9); }
 50% { opacity:0.0; transform:scale(0.9); }
100% { opacity:1.0; transform:scale(1.0); }
}
body.fadeout #cover .bg                      { bottom:0; height:0; animation:body_fadeout 0.1s forwards; }
body.fadeout #cover .bg.bg_01                { animation-delay:0.11s; }
body.fadeout #cover .bg.bg_02                { animation-delay:0.12s; }
body.fadeout #cover .bg.bg_03                { animation-delay:0.13s; }
body.fadeout #cover .bg.bg_04                { animation-delay:0.14s; }
body.fadeout #cover .bg.bg_05                { animation-delay:0.15s; }
body.fadeout #cover .bg.bg_06                { animation-delay:0.16s; }
body.fadeout #cover .bg.bg_07                { animation-delay:0.17s; }
body.fadeout #cover .bg.bg_08                { animation-delay:0.18s; }
body.fadeout #cover .bg.bg_09                { animation-delay:0.19s; }
body.fadeout #cover .bg.bg_10                { animation-delay:0.20s; }
body.fadeout #cover .bg.bg_11                { animation-delay:0.21s; }
body.fadeout #cover .bg.bg_12                { animation-delay:0.22s; }
body.fadeout #cover .bg.bg_13                { animation-delay:0.23s; }
body.fadeout #cover .bg.bg_14                { animation-delay:0.24s; }
body.fadeout #cover .bg.bg_15                { animation-delay:0.25s; }
body.fadeout #cover .bg.bg_16                { animation-delay:0.26s; }
body.fadeout #cover .bg.bg_17                { animation-delay:0.27s; }
body.fadeout #cover .bg.bg_18                { animation-delay:0.28s; }
body.fadeout #cover .bg.bg_19                { animation-delay:0.29s; }
body.fadeout #cover .bg.bg_20                { animation-delay:0.30s; }
@keyframes body_fadeout {
  0% { opacity:0; bottom:-5%; height:110%; }
100% { opacity:1; bottom:-5%; height:110%; }
}

/* ====================================================================================================
   ヘッタ
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
header                                      { display:flex; justify-content:space-between; width:100%; height:150px; margin:0 auto; }

/* ロゴ */
header h1                                    { position:fixed; top:25px; left:50px; z-index:1006; width:300px; aspect-ratio:3/1; }
header h1 a,
header h1 a img                              { display:block; width:100%; height:100%; }

/* アニメーション設定 */
header h1                                    { top:25px; left:50px; width:300px; transition:.2s; }
header.on h1                                 { top:20px; left:15px; width:150px; }
header h1 span                               { position:absolute; top:2px; left:190px; width:15px; height:100px; font-size:0.55rem; font-weight:bold; text-align:center; color:#111; transform-origin:bottom center; transition:.3s; }
header h1 span:nth-child(1)                  { transform:rotate(-35deg); transition-delay:0.00s; color:#fac82d; }
header h1 span:nth-child(2)                  { transform:rotate(-30deg); transition-delay:0.02s; }
header h1 span:nth-child(3)                  { transform:rotate(-25deg); transition-delay:0.04s; }
header h1 span:nth-child(4)                  { transform:rotate(-20deg); transition-delay:0.06s; }
header h1 span:nth-child(5)                  { transform:rotate(-15deg); transition-delay:0.08s; }
header h1 span:nth-child(6)                  { transform:rotate( -9deg); transition-delay:0.10s; }
header h1 span:nth-child(7)                  { transform:rotate( -5deg); transition-delay:0.12s; }
header h1 span:nth-child(8)                  { transform:rotate(-0.5deg); transition-delay:0.14s; }
header h1 span:nth-child(9)                  { transform:rotate(  5deg); transition-delay:0.16s; }
header h1 span:nth-child(10)                 { transform:rotate( 11deg); transition-delay:0.18s; }
header h1 span:nth-child(11)                 { transform:rotate( 17deg); transition-delay:0.20s; }
header h1 span:nth-child(12)                 { transform:rotate( 22deg); transition-delay:0.22s; }
header h1 span:nth-child(13)                 { transform:rotate( 27deg); transition-delay:0.24s; }
header h1 span:nth-child(14)                 { transform:rotate( 31.5deg); transition-delay:0.26s; }
header h1 span:nth-child(15)                 { transform:rotate( 35deg); transition-delay:0.28s; color:#fac82d; font-weight:bold; }
header.on h1 span                            { left:94px; height:30px; opacity:0; }
header h1:hover                              { transform:scale(1.05); filter:hue-rotate(10deg) brightness(1.1) contrast(1.1); }
header h1:hover span                         { top:-2px; }

/* ナビ */
nav                                         { width:520px; height:70px; margin:40px auto 0 auto; }
nav ul                                      { display:flex; flex-wrap:wrap; width:100%; margin-top:-5px; }
nav ul li                                   { width:33.33%; margin-bottom:5px; padding:0 15px; }
nav ul li a                                 { position:relative; display:flex; justify-content:left; align-items:center; width:100%; padding:0 0 0 10px; font-size:0.9rem; line-height:35px; letter-spacing:0.05em; font-weight:600; color:#111 !important; white-space:nowrap; transition:.2s; }
nav ul li a::before                         { content:""; display:inline-block; width:0; height:0; margin-right:10px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #111; transition:.2s; }
nav ul li a::after                          { content:""; position:absolute; bottom:0; left:0; right:0; width:100%; height:1px; margin:0 auto; background:rgba(0,0,0,0.05); transition:.2s; }
nav ul li a:hover                           { color:#000 !important; }
nav ul li a:hover::before                   { border-top:5px solid #fbc92c; }
nav ul li a:hover::after                    { background:#fbc92c; }

/* ボタン */
#nav_btn                                    { position:fixed; top:0; right:0; z-index:100; width:350px; height:140px; padding:25px; background:#f20c4d; border-bottom:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.2); border-radius:0 0 0 20px; overflow:hidden; box-shadow:5px 5px 10px rgba(0,0,0,0.02); }
#nav_btn_entry                              { display:flex; width:100%; margin:0 auto; }
#nav_btn_entry h3                           { display:flex; justify-content:left; align-items:center; width:150px; height:40px; font-size:2.5rem; line-height:1; color:#fff; }
#nav_btn_entry a                            { display:flex; flex-wrap:wrap; align-content:center; justify-content:center; width:70px; height:40px; font-size:0.96rem; font-weight:600; line-height:1; color:#111; background:#eee; border-radius:5px; transition:.2s; }
#nav_btn_entry a:nth-child(2)               { margin-right:10px; }
#nav_btn_entry a:hover                      { background:#fff; }
#nav_btn_info                               { display:flex; width:100%; margin:10px auto 0 auto; }
#nav_btn_info h4                            { display:flex; justify-content:left; align-items:center; width:150px; height:30px; font-size:0.72rem; line-height:1.3; color:#fff; }
#nav_btn_info a                             { display:flex; justify-content:center; align-items:center; width:150px; height:30px; padding:10px 5px; font-size:0.74rem; line-height:30px; letter-spacing:0; font-weight:bold; white-space:nowrap; color:#111; background:#fbc92c; border-radius:5px; transition:.2s;  }
#nav_btn_info a:hover                       { background-color:#f3e82a; }

/* ホームボタン */
header #home_btn                            { position:absolute; top:150px; left:50px; z-index:2; display:block; padding:10px 10px 10px 30px; background:url(../../img/common/bk/prev.svg) no-repeat 10px center; background-size:14px; font-size:0.8rem; line-height:1; letter-spacing:0.05em; font-weight:bold; }
header #home_btn a                          { color:#000064 !important; }


/* ====================================================================================================
   Sect／最新トピックス
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_recruit_picks                          { position:absolute; top:160px; right:0; z-index:2; width:350px; height:auto; padding:25px 0 25px 25px; background:rgba(230,230,230,0.5); border-radius:20px 0 0 20px; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); box-shadow:5px 5px 10px rgba(0,0,0,0.02); }

/* タイトル */
#sect_recruit_picks .ttl_picks               { font-size:2.5rem; line-height:1; letter-spacing:0.05em; font-weight:600; color:#fbc92c; }

/* リスト */
#sect_recruit_picks .atls_list_s             { margin:15px 0; }
#sect_recruit_picks .atls_list_s a           { display:flex; flex-wrap:wrap; padding-bottom:15px; margin-bottom:12px; border-bottom:1px solid rgba(0,0,0,0.1); }
#sect_recruit_picks .atls_list_s .new,
#sect_recruit_picks .atls_list_s time,
#sect_recruit_picks .atls_list_s .cat,
#sect_recruit_picks .atls_list_s time,
#sect_recruit_picks .atls_list_s .cat        { display:none; }
#sect_recruit_picks .atls_list_s h1          { width:calc(100% - 25px); font-size:1.0rem; line-height:1.4; font-weight:bold; color:#111;  }

/* リンク */
#sect_recruit_picks  a.link                  { padding:0 0 0 20px; font-size:0.8rem; line-height:1; font-weight:500; color:#111; text-decoration:underline; background:url(../../img/common/bk/bottom.svg) no-repeat left center; background-size:14px; }


/* ====================================================================================================
   ファーストビュー
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
.recruit_fv                                  { position:relative; width:100%; max-width:2000px; height:auto; aspect-ratio:1/0.6; margin:4vw auto 0; overflow:hidden; }
.fv_inner                                    { position:relative; width:100%; height:100%; }
.layer                                       { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; left:0; top:0; will-change:transform; transform:translate3d(0,0,0); pointer-events:none; transition:transform 80ms linear; }

/* 動きを苦手な方向け */
@media (prefers-reduced-motion: reduce){
.layer{ transition:none !important; transform:none !important; }
}


/* ====================================================================================================
   Sect_メッセージ
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_recruit_message                        { position:relative; width:100%; max-width:1800px; margin:25px auto; color:#111; }

/* テキスト */
#sect_recruit_message .container             { width:100%; max-width:100%; padding:100px 0 150px 25%;; }
#sect_recruit_message .container h1          { margin-bottom:1.5em; font-size:2.5rem; line-height:1.6; letter-spacing:0.05em; font-weight:600; color:#fbc92c; }
#sect_recruit_message .container h1 span     { display:inline-block; }
#sect_recruit_message .container p           { margin-top:1.5em; font-size:1.26rem; line-height:1.8; letter-spacing:0.10em; font-weight:600; color:#111; }
#sect_recruit_message .container p span      { display:block; margin:0; }
#sect_recruit_message .container p._l        { font-size:2.2rem; }

/* 写真 */
#sect_recruit_message .photo                 { position:absolute; top:0; left:0; width:100%; height:100%; } 
#sect_recruit_message .photo .pt             { position:absolute; z-index:2; aspect-ratio:6/4; }
#sect_recruit_message .photo .pt img         { width:100%; height:100%; object-fit:cover; z-index:-1; border-radius:5px; }
#sect_recruit_message .photo .pt._01         { left:  5%; top:  0%; width:16%; }
#sect_recruit_message .photo .pt._02         { right:-1px; top:  5%; width:20%; }
#sect_recruit_message .photo .pt._03         { right: 16%; top: 23%; width:14%; }
#sect_recruit_message .photo .pt._04         { left: -1px; top: 30%; width:18%; z-index:-2; }
#sect_recruit_message .photo .pt._05         { left:  12%; top: 48%; width:14%; z-index:-1; }
#sect_recruit_message .photo .pt._06         { right:  4%; top: 50%; width:16%; }
#sect_recruit_message .photo .pt._07         { left:   7%; top: 75%; width:20%; z-index:-1; aspect-ratio:1; }

/* 代表イメージ */
.message_bottom                              { position:relative; width:100%; max-height:800px; overflow:hidden; }
.message_bottom_txt                          { position:absolute; top:45%; right:45%; z-index:4; font-size:0.9rem; line-height:1.8; }
.message_bottom_txt strong                   { font-size:1.4rem; }
.message_bottom_txt em                       { font-size:10.0; font-style:normal; font-weight:600; }
.message_bottom img.z_01                     { width:100%; height:100%; } 
.message_bottom img.z_02                     { position:absolute; bottom:0; left:57.5%; z-index:2; width:21%; max-width:360px; height:auto; filter:drop-shadow(30px 40px 30px rgba(0,0,0,0.1)); }
.message_bottom img.z_03                     { position:absolute; top:0; left:0; z-index:3; width:100%; height:100%; }

@media screen and (max-width:1800px){
#sect_recruit_message .photo .pt._02 img     { border-radius:5px 0 0 5px; }
#sect_recruit_message .photo .pt._04 img     { border-radius:0 5px 5px 0;}
}


/* ====================================================================================================
   Sect_サトラ建業とは？
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_recruit_about                          { position:relative; z-index:-2; width:100%; margin:-10vw 0 0 -1px; padding:0; color:#111; background: url(../../img/recruit/common/slant_white_r.svg) no-repeat center bottom #fac82d; background-size: 2000px 300px; scroll-margin-top:-26vw;  overflow:hidden; }

/* タイトル */
#sect_recruit_about h1.ttl_loop              { position:absolute; top:32vw; left:0; z-index:10; display:flex; width:100vw; margin:0; line-height:1; white-space:nowrap; overflow:hidden; transform:scale(1.1) rotate(-5deg); }
.ttl_loop span                               { display:inline-block; width:100vw; font-size:12.6vw; font-weight:600; text-align:left; animation:anm_ttl_loop 10s linear infinite; }
.ttl_loop span font                          { opacity:0; }
@keyframes anm_ttl_loop {
  from { transform:translateX(0); }
  to   { transform:translateX(-100vw); }
}

/* 左右カラム_基本 */
#sect_recruit_about .col_box                 { display:flex; flex-direction:row-reverse; }
#sect_recruit_about .col_box .thumb          { display:flex; align-items:center; width:40%; }
#sect_recruit_about .col_box .thumb img      { width:100%; border-radius:5px; }
#sect_recruit_about .col_box article         { display:flex; flex-wrap:wrap; align-content:center;width:60%; z-index:2; }
#sect_recruit_about .col_box article p       { margin:1em 0; width:100%; font-size:1.8rem; line-height:1.8; letter-spacing:0.05em; font-weight:600; }

/* 左右カラム_01 */
#sect_recruit_about .col_box._01 .thumb      { display:block; width:60%; margin:0 0 0 -20%; padding:10% 0% 5% 0%; overflow:hidden; }
#sect_recruit_about .col_box._01 .thumb img  { width:100%; max-width:100%;border-radius:5px 0 0 5px; }
#sect_recruit_about .col_box._01 article     { width:70%; margin:0 -10% 0 0; padding:15% 0 5% 15%; }
#sect_recruit_about .col_box._01 article p   { font-size:1.4rem; line-height:2.0; }
#sect_recruit_about .col_box._01 article p._l{ font-size:2.4rem; line-height:1.4; }

/* 左右カラム_02 */
#sect_recruit_about .col_box._02             { flex-direction:unset; }
#sect_recruit_about .col_box._02 .thumb      { width:40%; }
#sect_recruit_about .col_box._02 article     { width:60%; padding:5% 5% 5% 5%; }
#sect_recruit_about .col_box._02 article p   { font-size:1.4rem; line-height:2.0; }

/* 左右カラム_03 */
#sect_recruit_about .col_box._03 .thumb      { width:45%; margin:0 0 0 -10%; padding:0 20% 0 0; }
#sect_recruit_about .col_box._03 article     { width:55%; padding:10% 0 0 10%; }
#sect_recruit_about .col_box._03 article p   { font-size:1.4rem; line-height:2.0; }
#sect_recruit_about .col_box._03 article p._l{ font-size:1.8rem; white-space:nowrap; }


/* ====================================================================================================
   Sect_数字が語るサトラ
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_recruit_number                        { width:100%; padding:150px 0; color:#111; background:url(../../img/recruit/common/slant_yellow_l.svg) no-repeat center bottom #fff; background-size:2000px 300px; }

/* 数字BOX（横長） */
.numbers                                    { display:flex; flex-wrap:wrap; margin:25px -20px 20px -20px; }
.numbers article                            { position:relative; width:calc(50% - 40px); margin:20px; background:#ededed; border-radius:5px; }
.numbers article._all                       { width:calc(100% - 40px); }
.numbers article .inner                     { padding:15px 15px 20px 15px; }
.numbers article p                          { position:relative; width:100%; margin:0.1em auto; line-height:1.5; letter-spacing:0.05em; text-align:center; font-weight:bold; }
.numbers article p._l                       { width:90%; font-size:3.0rem; line-height:1.0; margin:-0.2em auto 10px auto; }
.numbers article p._l strong                { display:inline-block; margin:0 0.1em; font-size:4.4rem; font-weight:600; transform:translate(0,0.05em); }
.numbers article p._l span                  { position:absolute; top:1.2rem; left:50%; margin:0 0 0 -7.6em; font-size:0.8rem; letter-spacing:0; line-height:1; }
.numbers article p._m                       { width:90%; font-size:1.4rem; margin:0.2em auto; }
.numbers article p._s                       { width:90%; font-size:0.8rem; margin:0.3em auto; font-weight:500; }


/* ====================================================================================================
   Sect_働く仲間たち
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_recruit_people                        { width:100%; margin-bottom:-1px; color:#111; background:url(../../img/recruit/common/slant_white_r.svg) no-repeat center bottom #fac82d; background-size:2000px 300px; }
#sect_recruit_people.sect_jump              { scroll-margin-top:125px; }
#sect_recruit_people .ttl_l                 { mix-blend-mode:hard-light; }

/* 数字BOX（円） */
.number_box                                 { display:flex; flex-wrap:wrap; margin:25px -10px 0 -10px; }
.number_box article                         { position:relative; display:flex; flex-wrap:wrap; align-content:center; width:calc(33.33% - 20px); aspect-ratio:1; margin:10px; padding:0; background:url(../../img/recruit/team/bg_circle_l.svg) no-repeat center center; background-size:cover; border-radius:50%; }
.number_box article h3                      { font-size:2.2rem; margin:0.2em auto; text-align:center; }
.number_box article p                       { position:relative; width:100%; margin:0.1em auto; line-height:1.5; letter-spacing:0.05em; text-align:center; font-weight:bold; }
.number_box article p._l                    { font-size:1.8rem; line-height:1.2; margin:-0.2em auto 0 auto; }
.number_box article p._l strong             { font-size:4.4rem; font-weight:600; }
.number_box article p._m                    { font-size:1.2rem; margin:0.2em auto; }
.number_box article p._s                    { width:70%; font-size:0.9rem; margin:0.3em auto; }

.number_box article._sub                    { width:calc(25% - 20px); background-image:url(../../img/recruit/team/bg_circle_m.svg);  }
.number_box article._sub h3                 { font-size:1.2rem;}
.number_box article._sub p._l               { font-size:1.6rem; }
.number_box article._sub p._l strong        { font-size:3.4rem; }
.number_box article._sub p._m               { font-size:1.2rem; }
.number_box article._sub p._s               { font-size:0.8rem; }

/* タイトル_インタビュー記事 */
.ttl_recruit_people                         { position:relative; width:100%; margin:125px auto 60px auto; padding:25px 15px 25px 15px; text-align:center; background:#fff; border-radius:30px; }
.ttl_recruit_people span                    { position: absolute; top:-0.7em; left:0; right:0; display:block; font-size:1.3rem; line-height:1.5; letter-spacing:0.2em; font-weight:600; }
.ttl_recruit_people strong                  { display:block; font-size:4.4rem; line-height:1.5; letter-spacing:0.05em; font-weight:600; }
.ttl_recruit_people::after                  { content:""; position:absolute; bottom:-20px; left:20%; z-index:2;  width:0; height:0; border-right:0 solid transparent; border-top:20px solid #fff; border-left:24px solid transparent; }

/* カラム */
#sect_recruit_people .container             { display:flex; flex-wrap:wrap; }
#sect_recruit_people .col_left              { width:400px; padding:0 100px 0 0; }
#sect_recruit_people .col_right             { width:calc(100% - 400px); }

/* 左テキスト */
#sect_recruit_people p._read._l             { width:100%; margin:0 0 2em 2em; font-size:1.2rem; line-height:2.0; letter-spacing:0.05em; font-weight:600; text-align:justify; }
#sect_recruit_people .mascot                { padding:20px 0 0 40px; }

/* 記事リスト：タイル */
.atls                                       { display:flex; flex-wrap:wrap; margin:0 -25px 0 -25px; }
.atls article                               { position:relative; width:calc(50% - 50px); margin:0 25px 50px 25px; }
.atls article .cat                          { position:absolute; top:15px; right:15px; z-index:2; display:block; padding:8px 15px; font-size:0.7rem; line-height:1.2; text-align:center; font-weight:600; color:#111; background:#fac82d; border-radius:25px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; pointer-events:none; transition:.4s; display:none; }
.atls article a                             { position:relative; display:block; text-decoration:none; color:#000; }
.atls article a .thumb                      { background:#fac82d; border:2px solid #fac82d; border-radius:30px; overflow:hidden; transition:.4s; }
.atls article a .thumb img                  { display:block; width:100%; max-width:100%; transform:scale(1.02); transition:.4s; }
.atls article:hover .thumb img              { transform:scale(1.1); }
.atls article a .hgroup                     { position:absolute; display:flex; flex-wrap:wrap; flex-direction:column-reverse; bottom:2px; left:2px; width:calc(100% - 4px); max-height:100%; padding:50px 25px 20px 25px; background-image:linear-gradient(0deg, #00000080 0%, transparent); background-size:14px; border-radius:0 0 28px 28px; }
.atls article a .hgroup .count              { width:100%; margin:5px 0 5px 0; font-size:0.7rem; line-height:20px; letter-spacing:0.1em; text-align:left; font-weight:400; color:#fff; opacity:0.6; display:none; }
.atls article a .hgroup .count time         { margin:0px 12px 0px 0px; padding:0 0px 0px 15px; display:inline-block; background:url(../../img/common/wt/time.svg) no-repeat left center; background-size:12px; }
.atls article a .hgroup .count .view        { margin:0px  0px 0px 0px; padding:0 0px 0px 15px; display:inline-block; background:url(../../img/common/wt/view.svg) no-repeat left center; background-size:12px; }
.atls article a .hgroup h1                  { width:100%; margin:0 auto; padding:0 30px 0 0; font-size:0.9rem; line-height:1.5; letter-spacing:0.05em; font-weight:600; color:#fff; }
.atls article a .hgroup h1 span             { font-size:0.8rem; }
.atls article a .hgroup h1 strong           { font-size:1.6rem; }
.atls article a .hgroup p                   { position:relative; margin:0; padding:20px 0 0 0; font-size:0.80rem; line-height:1.6; }
.atls article a::after                      { content:""; position:absolute; right:15px; bottom:15px; z-index:4; width:20px; height:20px; display:block; padding:8px; background:url(../../img/common/bk/next.svg) no-repeat center center #fff; background-size:20px; border-radius:50%; }


/* ====================================================================================================
   リクルート動画
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_recruit_movie                         { width:100%; padding:150px 0 0 0; }

/* 記事リスト：タイル */
.widget_box                                 { display:flex; flex-wrap:wrap; align-content:flex-start; margin:0 -20px; }
.widget_box iframe                          { width:calc( 50% - 40px); height:auto; aspect-ratio:1920/1080; margin:0 20px 20px 20px; background:#fac82d; border:2px solid #fac82d; border-radius:25px; overflow:hidden; }
.widget_box p._bottom                       { width:calc(100% - 40px); margin:-10px 20px 0 20px; }


/* ====================================================================================================
   採用トピックス
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_recruit_topics                        { width:100%; }
#sect_recruit_topics .container             { padding:150px 0 100px 0; }

/* 記事リスト */
.atls_list                                  { margin:15px -10px 0 -10px; }
.atls_list article                          { position:relative; height:auto; } 
.atls_list article:before                   { content:""; position:absolute; bottom:0; right:10px; z-index:2; width:calc(100% - 170px); height:1px; background:#eee; }
.atls_list article:last-child:before        { display:none; }
.atls_list article .cat                     { position:absolute; top:34px; left:160px; z-index:2; width:80px; display:block; padding:0px 2px 0 2px; font-size:0.7rem; line-height:24px; text-align:center; color:#111; background:#fac82d; border-radius:20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; pointer-events:none; transition:.4s; }
.atls_list article a                        { display:flex; width:100%; padding:10px; border-radius:10px; background:url(../../img/common/bk/next.svg) no-repeat right 15px bottom 10px; background-size:16px; transition:.2s; }
.atls_list article a .thumb                 { width:120px; height:120px; margin:0 30px 0 0; background:#fac82d; border:2px solid #fac82d; border-radius:50%; overflow:hidden; }
.atls_list article a .thumb img             { width:100%; max-width:100%; height:100%; margin:0; object-fit:cover; }
.atls_list article a .hgroup                { display:flex; flex-wrap:wrap; align-content:baseline; width:calc(100% - 150px); padding:26px 0 16px 0; }
.atls_list article a .hgroup .count         { width:100%; margin-bottom:8px; padding:0 0 0 90px; font-size:0.7rem; line-height:20px; letter-spacing:0.1em; color:#111; font-weight:400; opacity:0.6; }
.atls_list article a .hgroup .count time    { margin:0 12px 0 0; padding:0 0 0 15px; display:inline-block; background:url(../../img/common/bk/time.svg) no-repeat left center; background-size:12px; }
.atls_list article a .hgroup .count .view   { margin:0  0px 0 0; padding:0 0 0 15px; display:inline-block; background:url(../../img/common/bk/view.svg) no-repeat left center; background-size:12px; }
.atls_list article a .hgroup h1             { width:100%; font-size:1.2rem; line-height:1.5; font-weight:600; color:#111; }
.atls_list article a:hover                  { background-color:#f8f8f8; }


/* ====================================================================================================
   採用情報一覧
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_recruit_info                          { width:100%; }
#sect_recruit_info .container               { padding:100px 0 200px 0; border-top:2px solid #fbc92c; }
#sect_recruit_info .ttl_l u                 { margin-left:0; }

/* 記事リスト */
#sect_recruit_info .atls_list               { margin:25px auto 0 auto; }
#sect_recruit_info .atls_list article       { margin:0 0 15px 0; }
#sect_recruit_info .atls_list article .cat  { top:20px; left:25px; width:120px; height:26px; font-size:1.0rem; font-weight:600; line-height: 26px; color:#fff; background:#f20c4d; border-radius:3px; }
#sect_recruit_info .atls_list article a     { padding:60px 25px 35px 25px; background-color:#ededed; }
#sect_recruit_info .atls_list article a .thumb,
#sect_recruit_info .atls_list article a .hgroup .count { display:none; }
#sect_recruit_info .atls_list article a .hgroup        { padding:0; }
#sect_recruit_info .atls_list article a .hgroup h1     { font-size:1.4rem; } 


/* ====================================================================================================
   エントリー
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
#sect_recruit_entry                         { width:100%; padding:125px 0 200px 0; background:#f20c4d; }
#sect_recruit_entry .ttl_l strong,
#sect_recruit_entry .ttl_l span             { color:#fff; }
#sect_recruit_entry p.read._l               { margin-bottom:70px; font-size:1.2rem; line-height:1.8; text-align:center; letter-spacing:0.05em; font-weight:bold; color:#fff; }

/* グリッドボタン */
.grid_btn                                   { width:100%; margin:40px auto 0 auto; display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.grid_btn a                                 { position:relative; padding:20px 15px 40px 15px; text-align:center; color:#111; background:#fff; border-radius:30px; overflow:hidden; }
.grid_btn a ::after                         { content:""; position:absolute; right:15px; bottom:15px; z-index:4; width:20px; height:20px; display:block; padding:8px; background:url(../../img/common/bk/next.svg) no-repeat center center #fac82d; background-size:20px; border-radius:50%; }
.grid_btn a .thumb                          { display:block; width:130px; height:130px; margin:0 auto; }
.grid_btn a ._l,
.grid_btn a ._s                             { width:100%; line-height:1.2; letter-spacing:0.05em;font-weight:bold; text-align:center; }
.grid_btn a ._l                             { margin: 10px 0 0 0; font-size:2.6rem; }
.grid_btn a ._s                             { margin: 10px 0 0 0; font-size:1.0rem; }

/* お問い合わせ用ボタン */
#sect_recruit_entry a.btn._l                { width:500px; border-radius:20px; }


/* ====================================================================================================
   フッター
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
footer                                      { position:relative; width:100%; height:auto; margin:0; padding:100px 0 150px 0; background:#fff; }
footer .container                           { position:relative; display:flex; justify-content: space-between; }
footer .container .col_left                 { width:50%; padding:0 100px 0 0; }
footer .container .col_right                { width:50%; }

/* マスコット */
footer .container .mascot                   { position:absolute; top:-225px; left:auto; width:200px; }
footer .container .mascot a                 { position:absolute; top:0; left:0; z-index:2; display:block; width:100%; height:auto; }
footer .container .mascot img               { display:block; }

/* テキスト */
footer address                              { font-style:normal; }
footer address h1                           { margin: 0px 0 0 0; font-size:1.4rem; line-height:1.5; letter-spacing:0.05em; font-weight:600; }
footer address h2                           { margin: 5px 0 0 0; font-size:2.0rem; line-height:1.5; letter-spacing:0.05em; font-weight:600; }
footer address p                            { margin:25px 0 0 0; font-size:1.0rem; line-height:1.8; letter-spacing:0.05em; font-weight:500; }
footer address .btns                        { margin: 25px 0 0 0; }
footer address p.copy                       { font-size:0.8rem; color:#666; }

/* アクセスマップ */
footer .box                                 { position:relative; padding:50px 30px 25px 30px; background:#f6f5f5; border:2px solid #fac82d; border-radius:0 50px 50px 50px; }
footer .box::before                         { content:""; position:absolute; top:-2px; left:40px; z-index:2; width:240px; height:2px; background:#f6f5f5; }
footer .box h1                              { position:absolute; top:-30px; left:40px; z-index:4; display:flex; align-items:center; padding:0 15px; font-size:1.4rem; letter-spacing:0.05em; text-align:left; }
footer .box h1 img                          { width:60px; height:60px; transform:scale(0.9) translate(-5px,0); }
footer .box article iframe                  { width:100%; height:300px; }
footer .box article p                       { margin:0 0 14px 0; font-size:0.9rem; line-height:1.8; letter-spacing:0.05em; }
footer .box article hr                      { margin:20px 0px; background:#cadef5; }

/* スクロールトップ */
#scroll_top                                 { position:fixed; bottom:0; right:-90px; z-index:104; width:90px; height:60px; transition:.4s; }
#scroll_top a                               { display:block; width:100%; height:100%; padding:26px 0 12px 0; font-size:0.7rem; line-height:20px; font-weight:500; letter-spacing:0.1em; text-align:center; color:#111; background:url(../../img/common/bk/up.svg) no-repeat 50% 25% #ededed; background-size:14px; border-top:1px solid #fff; border-left:1px solid #fff; border-radius:50px 0 0 0; transition:.2s; }
#scroll_top a:hover                         { background-color:rgba(135,135,135,1.0)); background-position:50% 10%; }
#scroll_top                                 { visibility:hidden; } 
#scroll_top.on                              { right:0; visibility:visible; }   


/* ====================================================================================================
   パーツ
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
h1.ttl_recruit                              { position:relative; z-index:2; width:46%; height:45px; margin-bottom:15px; font-size:2.5rem; letter-spacing:0.05em; line-height:60px; border-bottom:1px solid #000064; mix-blend-mode:darken; }
h1.ttl_recruit span                         { position:absolute; top:0; left:0; padding:0 10px 0 0; white-space:nowrap; background:#fff; }
h1.ttl_recruit._right                       { margin:0 0 15px 50%; }
h1.ttl_recruit._right span                  { left:auto; right:0; padding:0 0 0 10px; text-align:right; }
h2.ttl_recruit                              { position:relative; z-index:2; display:flex; justify-content:space-between; margin-bottom:50px; font-size:5.5vw; font-family: "Readex Pro", sans-serif; } 
h2.ttl_recruit span._sp                     { width:0.3em; }
.sect_jump                                  { scroll-margin-top:25px; }
p                                           { word-break:break-all; }

/* h1：大 */
.ttl_l                                      { position:relative; padding:0 0 40px 0; }
.ttl_l span                                 { font-size:1.6rem; line-height:1.6; letter-spacing:0.05em; font-weight:600; color:#fbc92c; }
.ttl_l strong                               { display:block; margin:25px 0 0 0; font-size:4.0rem; line-height:1.2; font-weight:300; letter-spacing:0.05em; display:block; font-weight:600; color:#111; }
.ttl_l strong em                            { font-size:4.6rem; line-height:1.0; font-weight:600; letter-spacing:0.03em; display:inline-block; font-style:normal; transform:translate(0,0.04em); }
.ttl_l strong u                             { margin:0 0.1em; padding:0 0.1em; color:#fcc92c; text-decoration:none; background:linear-gradient(transparent 0%, #111 0.1%, #111 95%, transparent 95.1%); }
.ttl_l._center                              { text-align:center; }

/* 基本ボタン（黄色） */
a.btn                                       { position:relative; display:flex; align-items:center; width:100%; margin:25px auto 0 auto; padding:10px 30px; font-size:0.94rem; line-height:22px; letter-spacing:0.1em; font-weight:bold; text-align:center; justify-content:center; color:#111; background:#fbc92c; border:1px solid #fbc92c; border-radius:50px; box-shadow:0 2px 3px rgba(0,0,0,0.05); transition:.2s; }
a.btn img                                   { position:absolute; top:0; bottom:0; right:5px; display:inline-block; width:22px; height:22px; margin:auto 0; }
a.btn:hover                                 { background-color:#f3e82a; border-color:#f3e82a; }

/* ボタンサイズ */
a.btn._l                                    { display:flex; flex-wrap:wrap; min-height:80px; margin:50px auto 0 auto; padding:25px 25px; font-size:1.4rem; line-height:1.0; border-radius:30px; }
a.btn._l span                               { width:100%; font-size:1.2rem; margin:0.2em 0; }
a.btn._l strong                             { width:100%; font-size:2.4rem; margin:0.2em 0; }
a.btn._m                                    { width:500px; }
a.btn._s                                    { width:250px; }
a.btn._ss                                   { width:100px; height:30px; font-size:0.8rem; text-align:center; line-height:28px; font-weight:normal; padding:0 15px; }
a.btn._left                                 { float:none; margin:0 0 40px 0; }
a.btn._auto                                 { width:auto; display:inline-block; }

/* 白 */
a.btn._wt                                   { background-color:#fff; border-color:#fff; color:#000064; }

/* PDF */
a.btn._pdf                                  { color:#111; background:#fff; border:2px solid #c00; }

/* moreタイプ（下線） */
a.btn._more                                 { text-align:left; justify-content:left; padding:5px 0 5px 40px; color:#000; background:rgba(255,255,255,0); border:none; box-shadow:none; -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); transition:.2s;  }
a.btn._more img                             { position:absolute; top:-2px; left:-2px; width:30px; height:30px; padding:6px; background:#fac82d; border-radius:50%; }

/* 並列ボタン */
.btns                                       { margin:15px -1% 50px -1%; display:flex; flex-wrap:wrap; justify-content:space-between; }
.btns a.btn                                 { width:48%; margin:1%; }

/* PDFリンク */
p.pdf                                       { margin:15px 0; padding:5px 0 5px 30px; line-height:1.2; background:url(../../img/common/etc/pdf.svg) no-repeat left 3px; background-size:25px; }
p.pdf a                                     { font-size:0.7rem; }
p.pdf a strong                              { font-size:1.1rem; margin-right:0.3em; }

/* テキストリンク */
a.link                                      { font-weight:500; text-decoration:underline; padding:0 20px 0 0; background:url(../../img/common/bk/next.svg) no-repeat right -2px center; background-size:18px; }
a.link._blank                               { background-image:url(../../img/common/bk/blank.svg); }


/* ====================================================================================================
   フェード
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
._fade                                      { opacity:0; visibility:hidden; transition:0.8s 0.2s ease; transform:translate(30px, 30px) rotate(0deg); }
._fade._fade_02                             { transition-delay:0.3s; }
._fade._fade_03                             { transition-delay:0.4s; }
._fade._fade_04                             { transition-delay:0.5s; }
._fade._fade_05                             { transition-delay:0.6s; }
._fade._fade_06                             { transition-delay:0.7s; }
._fade._fade_07                             { transition-delay:0.8s; }
._fade._fade_08                             { transition-delay:0.9s; }
._fade._fade_09                             { transition-delay:1.0s; }
._fade._fade_10                             { transition-delay:1.1s; }
._fade._fade_11                             { transition-delay:1.2s; }
._fade._fade_12                             { transition-delay:1.3s; }
._fade._fade_13                             { transition-delay:1.4s; }
._fade._fade_14                             { transition-delay:1.5s; }
._fade._fade_15                             { transition-delay:1.6s; }
._fade._fade_16                             { transition-delay:1.7s; }
._fade._fade_17                             { transition-delay:1.8s; }
._fade._fade_18                             { transition-delay:1.9s; }
._fade._fade_19                             { transition-delay:2.0s; }
._fade._fade_20                             { transition-delay:2.1s; }
._fade._fade_21                             { transition-delay:2.2s; }
._fade._fade_22                             { transition-delay:2.3s; }
._fade._fade_23                             { transition-delay:2.4s; }
._fade._fade_24                             { transition-delay:2.5s; }
._fade._fade_25                             { transition-delay:2.6s; }
._fade._fade_26                             { transition-delay:2.7s; }
._fade._fade_27                             { transition-delay:2.8s; }
._fade._fade_28                             { transition-delay:2.9s; }
._fade._fade_29                             { transition-delay:3.0s; }
._fade._fade_30                             { transition-delay:3.1s; }
._fade._active                              { opacity:1; visibility:visible; transform:translate(0,0) rotate(0deg); }

/* 回転 */
._fade._rotate                              { transform:translate(30px, 30px) rotate(10deg) scale(0.8); }
._fade._rotate._active                      { transform:translate(0,0) rotate(0deg) scale(1.0); } 


/* ====================================================================================================
   タブレット対応
   ---------------------------------------------------------------------------------------------------- */
   
@media screen and (max-width:1200px){
}


/* ====================================================================================================
   スマートフォン対応
   ---------------------------------------------------------------------------------------------------- */

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