@charset "utf-8";

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

top

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

/*------------------------------------------------------------
main
------------------------------------------------------------*/
main {
 row-gap:0;
}

/*------------------------------------------------------------
top_main_visual
------------------------------------------------------------*/
#top_main_visual #main_visual_cont {
 display:flex;
 justify-content:space-between;
 position:relative;
 width:100%;
 overflow-y:hidden;
}

#top_main_visual #main_visual_cont {
 flex:0 1 1080px;
}
 
#top_main_visual #main_visual_cont .visual {
 min-height:600px;
 height:60vh;
 position:relative;
 width:100%;
}

#top_main_visual #main_visual_cont .visual > ol {
 align-items:center;
 display:flex;
 justify-content:center; 
 height:1080px;
 min-height:600px;
 height:60vh;
 overflow:hidden;
 position:relative;
 width:100%;
 z-index:1;
}

#top_main_visual #main_visual_cont .visual > ol li.slick-slide {
 min-height:600px;
 height:60vh;
 margin:0;
 overflow:hidden;
}

#top_main_visual #main_visual_cont .visual > ol li {
 align-items:center;
 display:flex;
 justify-content:center;
}

#top_main_visual #main_visual_cont .visual > ol li a {
 align-items:center;
 display:flex;
 justify-content:center; 
 width:100%;
}

#top_main_visual #main_visual_cont .visual > ol li a > img {
 width:100%;
 height:100%;
 object-fit:cover;
 max-height:1080px;
 min-height:600px;
 height:60vh;
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 margin:auto;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
}

#top_main_visual #main_visual_cont .visual > ol li a > img.lazyloaded {
 opacity:1;
}

#top_main_visual #main_visual_cont .title {
 position:relative;
 padding-top:10vw;
 width:80vw;
 z-index:10;
}

#top_main_visual #main_visual_cont .title img {
 height:100%;
 object-fit:cover;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 width:100%;
}

#top_main_visual #main_visual_cont .title img.lazyloaded {
 opacity:1; 
}

/*------------------------------------------------------------
information
------------------------------------------------------------*/
#information {
 display:flex;
 margin-top:-100px;
 position:relative;
 z-index:20;
}

#information #information_cont {
 display:flex;
 flex-direction:column;
 flex:1 1 980px;
 max-width:980px;
 margin:0 auto;
 padding:0 5vw 50px;
}

#information #information_cont dl {
 align-items:start;
 display:flex;
 flex-direction:column;
 justify-content:start;
}

#information #information_cont dl dt {
 align-items:flex-end;
 background-color:var(--white);
 column-gap:10px;
 display:flex;
 padding:25px 35px 10px;
}

#information #information_cont dl dt span:first-child {
 color:var(--main);
 font-size:2.6rem;
 line-height:1;
}

#information #information_cont dl dt span:nth-child(2) {
 font-size:1.1rem;
 line-height:1.4;
}

#information #information_cont dl dd {
 background-color:var(--white);
 padding:35px;
 width:100%;
}

#information #information_cont dl dd ul {
 display:flex;
 flex-direction:column;
 row-gap:10px;
}

#information #information_cont dl dd ul li {
 display:flex;
}

#information #information_cont dl dd ul li a {
 column-gap:10px;
 display:flex;
 justify-content:start;
}

#information #information_cont dl dd ul li a .date {
 font-size:1.6rem;
 font-weight:600;
}

#information #information_cont dl dd ul li a h3 {
 color:var(--link);
 font-size:1.6rem;
}

#information #information_cont dl dd ul li a:hover h3 {
 text-decoration:underline;
}

/*------------------------------------------------------------
front_menu
------------------------------------------------------------*/
#front_menu {
 align-items:stretch;
 display:flex;
 flex-direction:unset;
 padding:50px 0 0;
}

#front_menu #front_menu_left {
 display:flex;
 flex:1 1 2vw;
 flex-direction:column;
 position:relative;
 z-index:1;
 min-width:calc(100% / 2 - 35vw);
}

#front_menu #front_menu_left figure {
 height:50%; 
}

#front_menu #front_menu_left figure img {
 object-fit:cover;
 height:100%;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 width:100%;
}

#front_menu #front_menu_left figure img.lazyloaded {
 opacity:1;
}

#front_menu #front_menu_right {
 display:flex;
 flex:1 1 2vw;
 flex-direction:column;
 position:relative;
 z-index:1;
 min-width:calc(100% / 2 - 35vw);
}

#front_menu #front_menu_right figure {
 height:50%;
}

#front_menu #front_menu_right figure img {
 object-fit:cover;
 height:100%;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 width:100%;
}

#front_menu #front_menu_right figure img.lazyloaded {
 opacity:1;
}

#front_menu #front_menu_cont {
 display:flex;
 flex:0 1 1080px;
 flex-direction:column;
 justify-content:center;
 padding:0 5vw;
 position:relative;
}

#front_menu #front_menu_cont h2 {
 align-items:start;
 display:flex;
 justify-content:center;
 position:absolute;
 top:-37px;
 right:0;
 bottom:0;
 left:0;
 margin:auto;
 width:100%;
}

#front_menu #front_menu_cont h2 span {
 color:var(--main);
 font-size:2.2rem;
 font-weight:600;
 padding:20px 90px;
 position:relative;
}

#front_menu #front_menu_cont h2 span:before {
 aspect-ratio:342 / 188;
 background-image:url('/wp-content/themes/tds/img/top/bg_front_menu_left.webp');
 background-position:center center;
 background-repeat:no-repeat;
 background-size:contain;
 content:" ";
 left:0;
 top:0;
 position:absolute;
 width:15vw;
 height:15vw;
 max-height:100%;
 z-index:1;
}

#front_menu #front_menu_cont h2 span:after {
 aspect-ratio:342 / 188;
 background-image:url('/wp-content/themes/tds/img/top/bg_front_menu_right.webp');
 background-position:center center;
 background-repeat:no-repeat;
 background-size:contain;
 content:" ";
 right:0;
 top:0;
 position:absolute;
 width:15vw;
 height:15vw;
 max-height:100%;
 z-index:1;
}

#front_menu #front_menu_cont ul {
 background-color:var(--white); 
 border-radius:20px;
 display:flex;
 flex-direction:column;
 padding:80px 50px 50px;
 width:100%;
}

#front_menu #front_menu_cont ul li {
 border-bottom:1px solid var(--gray_cc);
}

#front_menu #front_menu_cont ul li a {
 align-items:center;
 column-gap:20px;
 display:flex;
 justify-content:start;
 padding:25px;
 position:relative;
 z-index:1;
}

#front_menu #front_menu_cont ul li a:after {
 content:"\f061";
 color:var(--main);
 font-family:var(--icon);
 font-size:2.6rem;
 right:10px;
 top:50%;
 margin-top:-18px;
 position:absolute;
 z-index:2;
}

#front_menu #front_menu_cont ul li a figure {
 height:auto;
 width:80px;
 position:relative;
 z-index:2;
}

#front_menu #front_menu_cont ul li a figure img {
 height:100%;
 object-fit:cover;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 width:100%;
}

#front_menu #front_menu_cont ul li a figure img.lazyloaded {
 opacity:1;
}

#front_menu #front_menu_cont ul li a dl {
 position:relative;
 z-index:2;
}

#front_menu #front_menu_cont ul li a dl dt {
 font-size:1.3rem;
 font-weight:600;
}

#front_menu #front_menu_cont ul li a dl dd {
 font-size:2.6rem;
 font-weight:600;
}

#front_menu #front_menu_cont ul li a:hover:after {
 animation: 1.2s ease-out ico-move;
}

#front_menu #front_menu_cont ul li a:hover:before {
 background-color:var(--pale-yellow);
 content:" ";
 border-radius:6px;
 position:absolute;
 width:100%;
 height:90%;
 left:0;
 top:5%;
 z-index:0;
}

@keyframes ico-move {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-20px, 0);
  }
  40% {
    transform: translate(0, 0);
  }
  60% {
    transform: translate(5px, 0);
  }
  70% {
    transform: translate(-10px, 0);
  }
}

#front_menu #front_menu_cont ul li:first-child {
 border-top:1px solid var(--gray_cc);
}

#front_menu #front_menu_cont ul li:first-child a:after {
 color:var(--main);
}

#front_menu #front_menu_cont ul li:first-child a dl dt {
 color:var(--main);
}

#front_menu #front_menu_cont ul li:nth-child(2) a:after {
 color:var(--turquoise);
}

#front_menu #front_menu_cont ul li:nth-child(2) a dl dt {
 color:var(--turquoise);
}

#front_menu #front_menu_cont ul li:nth-child(3) a:after {
 color:var(--orange);
}

#front_menu #front_menu_cont ul li:nth-child(3) a dl dt {
 color:var(--orange);
}

#front_menu #front_menu_cont ul li:nth-child(4) a:after {
 color:var(--pink);
}

#front_menu #front_menu_cont ul li:nth-child(4) a dl dt {
 color:var(--pink);
}

#front_menu #front_menu_cont ul li:nth-child(5) a:after {
 color:var(--blue2);
}

#front_menu #front_menu_cont ul li:nth-child(5) a dl dt {
 color:var(--blue2);
}

/*------------------------------------------------------------
blog
------------------------------------------------------------*/
#blog {
 padding:80px 5vw;
}

/*------------------------------------------------------------
work_style
------------------------------------------------------------*/
#work_style {
 display:flex;
 justify-content:center;
}

#work_style .title {
 align-items:center;
 background-color:var(--pale-blue);
 display:flex;
 justify-content:center;
 max-height:500px;
 overflow:hidden;
 position:relative;
 width:100%;
 z-index:2;
}

#work_style .title:before {
 aspect-ratio:757 / 1055;
 background-image:url('/wp-content/themes/tds/img/top/figure_workstyle_01.webp');
 background-position:left center;
 background-repeat:no-repeat;
 background-size:contain;
 content:" ";
 left:0;
 bottom:20px;
 position:absolute;
 width:15vw;
 height:15vw;
 z-index:1;
}

#work_style .title:after {
 aspect-ratio:58 / 41;
 background-image:url('/wp-content/themes/tds/img/top/figure_workstyle_02.webp');
 background-position:right center;
 background-repeat:no-repeat;
 background-size:contain;
 content:" ";
 right:60px;
 top:-5vw;
 position:absolute;
 width:15vw;
 height:15vw;
 z-index:1;
}

#work_style .title figure {
 aspect-ratio:270 / 104;
 max-width:1080px;
}

#work_style .title figure img {
 height:100%;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 width:100%;
}

#work_style .title figure img.lazyloaded {
 opacity:1;
}

#work_style #work_style_cont {
 align-items:center;
 background-color:var(--white);
 display:flex;
 flex-direction:column;
 justify-content:center;
 padding:50px 0;
 position:relative;
 row-gap:20px;
 width:100%;
 z-index:2;
}

#work_style #work_style_cont h2 {
 display:flex;
 justify-content:center;
}

#work_style #work_style_cont h2 span {
 font-size:3.2rem;
 font-weight:600;
 line-height:1.4;
 text-align:center;
}

#work_style #work_style_cont h3 {
 display:flex;
 justify-content:center;
}

#work_style #work_style_cont h3 span {
 font-size:1.4rem;
 line-height:1.8;
 text-align:center;
}

/*------------------------------------------------------------
training_system
------------------------------------------------------------*/
#training_system {
 display:flex;
 justify-content:center;
}

#training_system .title {
 align-items:center;
 background-color:var(--pale-blue);
 display:flex;
 justify-content:center;
 max-height:500px;
 padding:50px 5vw;
 overflow:hidden;
 position:relative;
 width:100%;
 z-index:2;
}

#training_system .title h2 {
 background-color:#0EA199;
 background-image:url('/wp-content/themes/tds/img/top/bg_title_training_system.webp');
 background-position:center center;
 background-repeat:no-repeat;
 background-size:cover;
 border-radius:10px;
 display:flex;
 justify-content:center;
 padding:50px;
 position:relative;
 min-width:70vw;
 max-width:980px;
}

#training_system .title h2 span {
 border:6px solid var(--white);
 color:var(--white);
 display:block;
 font-size:1.8rem;
 font-weight:600;
 padding:15px 45px;
}

#training_system .title h2:before {
 aspect-ratio:5 / 6;
 background-image:url('/wp-content/themes/tds/img/top/figure_training_system01.webp');
 background-position:center bottom;
 background-repeat:no-repeat;
 background-size:contain;
 content:" ";
 left:5vw;
 bottom:-50px;
 position:absolute;
 width:17vw;
 height:15vw;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 z-index:1;
}

#training_system .title h2.lazyloaded:before {
 opacity:1; 
}

#training_system .title h2:after {
 aspect-ratio:1 / 1;
 background-image:url('/wp-content/themes/tds/img/top/figure_training_system02.webp');
 background-position:center bottom;
 background-repeat:no-repeat;
 background-size:contain;
 content:" ";
 right:70px;
 bottom:-50px;
 position:absolute;
 width:17vw;
 height:15vw;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 z-index:1;
}

#training_system .title h2.lazyloaded:after {
 opacity:1; 
}

#training_system #training_system_cont {
 align-items:center;
 background-color:var(--white);
 display:flex;
 flex-direction:column;
 justify-content:center;
 padding:50px 0;
 row-gap:20px;
 width:100%;
}

#training_system #training_system_cont h2 {
 display:flex;
 justify-content:center;
}

#training_system #training_system_cont h2 span {
 font-size:3.2rem;
 font-weight:600;
 line-height:1.4;
 text-align:center;
}

#training_system #training_system_cont h3 {
 display:flex;
 justify-content:center;
 width:100%;
}

#training_system #training_system_cont h3 span {
 font-size:1.4rem;
 line-height:1.6;
 text-align:center;
}

#training_system #training_system_cont ul {
 column-gap:20px;
 display:flex;
 justify-content:center;
 flex-wrap:wrap;
 row-gap:30px;
 max-width:1080px;
 padding:20px 5vw;
 position:relative;
 width:100%;
 z-index:2;
}

#training_system #training_system_cont ul li {
 display:flex;
 justify-content:center;
 width:calc(100% /3 - 15px);
}

#training_system #training_system_cont ul li dl {
 display:flex;
 justify-content:center;
 flex-direction:column;
 row-gap:5px;
}

#training_system #training_system_cont ul li dl dt {
 display:flex;
 justify-content:center;
 position:relative;
}

#training_system #training_system_cont ul li dl dt span {
 display:block;
 font-size:1.2rem;
 font-weight:600;
 padding:0 15px;
 position:relative;
}

#training_system #training_system_cont ul li dl dt span:before {
 background-color:var(--black);
 content:" ";
 width:1px;
 height:14px;
 transform:rotate(-15deg);
 position:absolute;
 left:0; 
 top:50%;
 margin-top:-7px;
}

#training_system #training_system_cont ul li dl dt span:after {
 background-color:var(--black);
 content:" ";
 width:1px;
 height:14px;
 transform:rotate(15deg);
 position:absolute;
 right:0;
 top:50%;
 margin-top:-7px;
}

#training_system #training_system_cont ul li dl dd {
 align-items:center;
 display:flex;
 flex-direction:column;
 justify-content:center;
 row-gap:15px;
}

#training_system #training_system_cont ul li dl dd figure {
 aspect-ratio:1 / 1;
 height:80px;
 width:80px;
}

#training_system #training_system_cont ul li dl dd figure img {
 height:100%;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 width:100%;
}

#training_system #training_system_cont ul li dl dd figure img.lazyloaded {
 opacity:1;
}

#training_system #training_system_cont ul li dl dd span {
 font-size:1.4rem;
 line-height:1.6;
 text-align:center;
}

#training_system #training_system_cont > .btn {
 width:280px;
}

/*------------------------------------------------------------
welcome
------------------------------------------------------------*/
#welcome {
 display:flex;
 justify-content:center;
 flex-direction:unset;
 padding:50px 5vw;
}

#welcome #welcome_cont {
 align-items:center;
 background-color:var(--white);
 border-radius:10px;
 display:flex;
 flex-direction:column;
 flex:1 1 1080px;
 justify-content:center;
 padding:50px;
 row-gap:30px;
 max-width:1080px;
}

#welcome #welcome_cont h2 {
 display:flex;
 justify-content:center;
 position:relative;
}

#welcome #welcome_cont h2 span {
 display:block;
 font-size:3.2rem;
 font-weight:600;
 line-height:1.2;
 padding:0 20px;
 position:relative;
}

#welcome #welcome_cont h2 span:before {
 background-color:var(--black);
 content:" ";
 width:2px;
 height:26px;
 transform:rotate(-15deg);
 position:absolute;
 left:0; 
 top:50%;
 margin-top:-13px;
}

#welcome #welcome_cont h2 span:after {
 background-color:var(--black);
 content:" ";
 width:2px;
 height:26px;
 transform:rotate(15deg);
 position:absolute;
 right:0;
 top:50%;
 margin-top:-13px;
}

#welcome #welcome_cont ul {
 column-gap:30px;
 display:flex;
 justify-content:center;
 flex-wrap:wrap;
 row-gap:60px;
 max-width:1080px;
 padding:20px 0;
 position:relative;
 width:100%;
 z-index:2;
}

#welcome #welcome_cont ul li {
 display:flex;
 justify-content:center;
 max-width:calc(100% /3 - 15px);
}

#welcome #welcome_cont ul li dl {
 align-items:center;
 align-content:center;
 background-color:var(--main);
 border-radius:10px;
 display:flex;
 justify-content:center;
 padding:35px 45px 25px;
 position:relative;
}

#welcome #welcome_cont ul li dl:before {
 aspect-ratio:58 / 42;
 background-image:url('/wp-content/themes/tds/img/top/i_quote.png');
 background-position:center bottom;
 background-repeat:no-repeat;
 background-size:contain;
 content:" ";
 left:10px;
 top:-10px;
 position:absolute;
 width:29px;
 height:21px;
 z-index:1;
} 

#welcome #welcome_cont ul li dl:after {
 background-color:var(--main);
 width:20px;
 height:16px;
 content:" ";
 clip-path:polygon(0 0, 100% 0%, 0% 100%);
 position:absolute;
 left:50%;
 margin-left:-10px;
 bottom:-15px;
}

#welcome #welcome_cont ul li dl dt {
 background-color:var(--white);
 border-radius:50%;
 margin-left:-27px;
 height:52px;
 width:52px;
 position:absolute;
 left:50%;
 top:-27px;
}

#welcome #welcome_cont ul li dl dt img {
 border-radius:50%;
}

#welcome #welcome_cont ul li dl dd {
 color:var(--white);
 font-size:1.4rem;
 font-weight:600;
 line-height:1.6;
}

#welcome #welcome_cont p {
 font-size:1.4rem; 
}

#welcome #welcome_cont ul:nth-child(2) li:first-child dl { background-color:var(--light-yellow); }
#welcome #welcome_cont ul:nth-child(2) li:first-child dl dd { color:var(--black); }
#welcome #welcome_cont ul:nth-child(2) li:first-child dl:after { background-color:var(--light-yellow); }

#welcome #welcome_cont ul:nth-child(2) li:nth-child(2) dl { background-color:var(--green); }
#welcome #welcome_cont ul:nth-child(2) li:nth-child(2) dl:after { background-color:var(--green); }

#welcome #welcome_cont ul:nth-child(2) li:nth-child(3) dl { background-color:var(--blue2); }
#welcome #welcome_cont ul:nth-child(2) li:nth-child(3) dl:after { background-color:var(--blue2); }

#welcome #welcome_cont ul:nth-child(3) li:first-child dl { background-color:var(--orange); }
#welcome #welcome_cont ul:nth-child(3) li:first-child dl:after { background-color:var(--orange); }

#welcome #welcome_cont ul:nth-child(3) li:nth-child(2) dl { background-color:var(--purple); }
#welcome #welcome_cont ul:nth-child(3) li:nth-child(2) dl:after { background-color:var(--purple); }

#welcome #welcome_cont ul:nth-child(3) li:nth-child(3) dl { background-color:var(--red); }
#welcome #welcome_cont ul:nth-child(3) li:nth-child(3) dl:after { background-color:var(--red); }

#welcome #welcome_cont ul:nth-child(4) li:first-child dl { background-color:var(--pink); }
#welcome #welcome_cont ul:nth-child(4) li:first-child dl:after { background-color:var(--pink); }

#welcome #welcome_cont ul:nth-child(4) li:nth-child(2) dl { background-color:var(--blue); }
#welcome #welcome_cont ul:nth-child(4) li:nth-child(2) dl:after { background-color:var(--blue); }

#welcome #welcome_cont ul:nth-child(4) li:nth-child(3) dl { background-color:var(--turquoise); }
#welcome #welcome_cont ul:nth-child(4) li:nth-child(3) dl:after { background-color:var(--turquoise); }

/*------------------------------------------------------------
career
------------------------------------------------------------*/
#career {
 display:flex;
 justify-content:center;
}

#career .title {
 align-items: center;
 background-color:var(--white);
 background-image:url('/wp-content/themes/tds/img/top/bg_career.webp');
 background-position:20vw center;
 background-repeat:no-repeat;
 background-size:cover;
 display:flex;
 justify-content:start;
 max-height:500px;
 min-height:300px;
 padding:50px 5vw;
 overflow:hidden;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 position:relative;
 width:100%;
 z-index:2;
}

#career .title.lazyloaded {
 opacity:1;
}

#career .title h2 {
 display:flex;
 flex-direction:column;
 justify-content:center;
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 max-width: 980px;
 margin:auto;
 padding:0 5vw;
 row-gap:5px;
 width:100%;
}

#career .title h2 span {
 color:var(--main);
 font-size:3.2rem;
 font-weight:600;
}

#career #career_cont {
 align-items:center;
 background-color:var(--white);
 display:flex;
 flex-direction:column;
 justify-content:center;
 padding:0 0 200px;
 position:relative;
 width:100%;
 z-index:2;
}

#career #career_cont:before {
 aspect-ratio:1 / 1;
 background-image:url('/wp-content/themes/tds/img/top/figure_career.webp');
 background-position:center bottom;
 background-repeat:no-repeat;
 background-size:contain;
 content:" ";
 bottom:0;
 position:absolute;
 width:100%;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 z-index:2;
 max-height:200px;
}

/*
#career #career_cont:before {
 aspect-ratio:1 / 1;
 background-image:url('/wp-content/themes/tds/img/top/figure_career01.png');
 background-position:center bottom;
 background-repeat:no-repeat;
 background-size:contain;
 content:" ";
 left:5px;
 bottom:0;
 position:absolute;
 width:20vw;
 height:20vw;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 z-index:1;
}
*/
/*
#career #career_cont:after {
 aspect-ratio:1 / 1;
 background-image:url('/wp-content/themes/tds/img/top/figure_career02.png');
 background-position:center bottom;
 background-repeat:no-repeat;
 background-size:contain;
 content:" ";
 right:5px;
 bottom:0;
 position:absolute;
 width:20vw;
 height:20vw;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 z-index:1;
}
*/

#career #career_cont.lazyloaded:before {
 opacity:1;
}

#career #career_cont.lazyloaded:after {
 opacity:1;
}

#career #career_cont .career_up {
 justify-content: center;
 align-items: center;
 display:flex;
 flex-direction:column; 
 row-gap:50px;
 padding:50px 0 0;
 position:relative;
 width:100%;
}

#career #career_cont .career_up h2 {
 display:flex;
 justify-content:center;
}

#career #career_cont .career_up h2 span {
 font-size:3.2rem;
 font-weight:600;
 line-height:1.4;
 position:relative;
 text-align:center;
}

#career #career_cont .career_up .career_up_cont {
 justify-content: center;
 align-items: center;
 display:flex;
 flex-direction:column; 
 row-gap:10px;
}

#career #career_cont .career_up .career_up_cont h3 {
 display:flex;
 justify-content:center;
 width:100%;
 z-index:2;
}

#career #career_cont .career_up .career_up_cont h3 span {
 color:var(--main);
 font-size:2.2rem;
 font-weight:600;
 line-height:1.4;
 text-align:center;
}

#career #career_cont .career_up .career_up_cont figure.map {
 aspect-ratio: 547 / 433;
 max-width:880px;
}

#career #career_cont .career_up .career_up_cont figure img.lazyloaded {
 opacity:1;
}

#career #career_cont .career_up .career_up_cont p {
 font-size:1.5rem;
 line-height:1.6;
 max-width:880px;
 margin:0 auto;
 width:100%;
}

.career_up_cont .career_step {
 overflow: hidden;
 max-width: 880px;
 overflow: hidden;
 margin: 0 auto;
 padding: 0;
 width: 100%;
 display: flex;
 flex-direction: column;
 row-gap: 20px;
}

.career_up_cont .career_step .career_step_cont {
 overflow-x: scroll;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
 width: 100%;
 display: flex;
 justify-content: start;
 scrollbar-gutter: stable;
 position:relative;
 z-index:10;
 min-height: 760px;
 width: 100%;
}

.career_up_cont .career_step .career_step_cont ol {
 display: flex;
 flex-wrap: nowrap;
 margin: 0;
 padding: 0;
 width: 100%;
}

.career_up_cont .career_step .career_step_cont ol li {
 align-items:flex-end;
 display:flex;
 justify-content:center;
 flex: 0 0 200px;
 width:200px;
}

.career_up_cont .career_step .career_step_cont ol li dl {
 display:flex;
 flex-direction:column;
 row-gap:20px;
 width:100%; 
}

.career_up_cont .career_step .career_step_cont ol li dl dt {
 position: relative;
 display: flex;
 justify-content: center;
 align-content: center;
 align-items: center;
 width:100%;
 margin: 0 auto;
 padding: 0 10px;
}

.career_up_cont .career_step .career_step_cont ol li dl dt span {
 background-color:var(--light-yellow);
 border-radius:10px;
 display:block;
 font-size:1.3rem;
 line-height:1.6;
 position:relative;
 padding:30px 15px;
}

.career_up_cont .career_step .career_step_cont ol li dl dt span:after {
 background-color:var(--light-yellow);
 bottom:-16px;
 width:20px;
 height:16px;
 content:" ";
 clip-path:polygon(0 0, 100% 0%, 50% 100%);
 position:absolute;
 left:50%;
 margin-left:-10px;
}

.career_up_cont .career_step .career_step_cont ol li dl dd {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.career_up_cont .career_step .career_step_cont ol li dl dd p {
 text-align:center;
}

.career_up_cont .career_step .career_step_cont ol li dl dd figure {
 /*aspect-ratio: 137 / 223;*/
 align-items:center;
 display:flex;
 justify-content:center;
 margin-bottom: -30px;
 position: relative;
 z-index: 1;
 width:100%;
}

.career_up_cont .career_step .career_step_cont ol li dl dd figure img {
 height:100%;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s; 
 max-width: 130px;
 height: auto;
 width: 80%;
 margin: 0 auto;
}

.career_up_cont .career_step .career_step_cont ol li dl dd .state {
 align-items:center;
 background-color:#6BD2F8;
 color:var(--white);
 display: flex;
 font-weight;600;
 font-size:1.6rem;
 justify-content: center;
 min-height:200px;
 padding:30px;
 text-align:center;
 width:100%;
}

.career_up_cont .career_step .career_step_cont ol li:nth-child(2) dl dd .state {
 background-color:#41BAE6;
 min-height:250px;
}

.career_up_cont .career_step .career_step_cont ol li:nth-child(3) dl dd .state {
 background-color:#189BCE;
 min-height:300px;
}

.career_up_cont .career_step .career_step_cont ol li:nth-child(4) dl dd .state {
 background-color:#0082BE;
 min-height:350px;
}

.career_up_cont .career_step .career_step_cont ol li:nth-child(5) dl dd .state {
 background-color:#00479C;
 min-height:400px;
}

#career #career_cont .career_pass {
 justify-content: center;
 align-items: center;
 display:flex;
 flex-direction:column; 
 row-gap:50px;
 padding:80px 5vw 0;
 position:relative;
}

#career #career_cont .career_pass h2 {
 display:flex;
 justify-content:center;
}

#career #career_cont .career_pass h2 span {
 font-size:3.2rem;
 font-weight:600;
 line-height:1.4;
 text-align:center;
}

#career #career_cont .career_pass h2 span:after {
 position: absolute;
 bottom: -15px;
 left: 0;
 content: '';
 width: 100%;
 height: 5px;
 background:var(--sub);
 transform: scale(0, 1);
 transform-origin: left top;
 transition: transform .3s;
 animation: 1s forwards border-scale;
}

#career #career_cont .career_pass .career_pass_cont {

 justify-content: center;
 align-items: center;
 display:flex;
 flex-direction:column;
 row-gap:20px;
}

#career #career_cont .career_pass .career_pass_cont figure {
 overflow-x: scroll;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
 aspect-ratio: 1094 / 577;
 scrollbar-gutter: stable;
 max-width:880px;
 position:relative;
 z-index:10;
 min-height: 420px;
 width: 100%;
}

#career #career_cont .career_pass .career_pass_cont figure img {
 height:100%;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
 width:100%;
}

#career #career_cont .career_pass .career_pass_cont figure img.lazyloaded {
 opacity:1;
}

#career #career_cont .career_pass .career_pass_cont p {
 font-size:1.5rem;
 line-height:1.6; 
 max-width:980px;
 margin:0 auto;
 width:100%;
}

#career #career_cont > .btn {
 width:280px;
}

/*------------------------------------------------------------
requirements
------------------------------------------------------------*/
#requirements {
 display:flex;
}

#requirements .title {
 background-color:var(--white);
 display:flex;
 justify-content:center;
 flex-direction:column;
 row-gap:30px;
 padding:0 0 30px;
 width:100%;
}

#requirements .title figure {
 aspect-ratio:192 / 50;
 max-height:300px;
 width:100%;
}

#requirements .title h2 {
 display:flex;
 justify-content:center;
}

#requirements .title h2 span {
 font-size:3.2rem;
 font-weight:600;
 line-height:1.4;
 text-align:center;
}

#requirements .title > p {
 font-size:1.4rem;
 line-height:1.6;
 text-align:center;
}

#requirements .title figure img {
 height:100%;
 width:100%;
 object-fit:cover;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s;
}

#requirements .title figure img.lazyloaded {
 opacity:1;
}

#requirements #requirements_cont {
 align-items:center;
 display:flex;
 justify-content:space-between;
 flex-direction:column;
 /*padding:50px 5vw;*/
 padding:50px 0;
 /*max-width: 980px;*/
 margin: 0 auto;
 row-gap:50px;
 position:relative;
}

#requirements #requirements_cont > .btn {
 width:280px;
}

#open_for_applications {
 display:flex;
 column-gap:50px;
 padding:0 5vw;
 width:100%;
}

#open_for_applications .occupation {
 align-items:center;
 background-color:var(--white);
 border-radius:10px;
 display:flex;
 flex-direction:column;
 justify-content:start;
 row-gap:20px;
 min-width: calc(100% / 2 - 80px);
 max-width:420px;
}

#open_for_applications .occupation figure.pic {
 border-radius:10px 10px 0 0;
 height:250px;
 width:100%;
}

#open_for_applications .occupation figure.pic img {
 border-radius:10px 10px 0 0;
 height:100%;
 object-fit: cover;
 width:100%;
}

#open_for_applications .occupation figure.icon {
 aspect-ratio:22 / 30;
 align-items:center;
 display:flex;
 margin-top:-75px;
 position:relative;
 justify-content:center;
}

#open_for_applications .occupation figure.icon:before {
 background-color:var(--white);
 border-radius:75px;
 content:"";
 height:150px;
 position:absolute;
 width:150px;
 z-index:1;
}

#open_for_applications .occupation figure.icon img {
 height:100%;
 width:100%;
 max-width:80px;
 z-index:2;
}

#open_for_applications .occupation .occupation_detail {
 border-radius:0 0 10px 10px;
 display:flex;
 justify-content:center;
 flex-direction:column;
 flex:1;
 row-gap:15px;
 padding:0 30px 30px;
 width:100%;
}

#open_for_applications .occupation .occupation_detail h3 {
 align-items: center;
 display:flex;
 justify-content:center;
 flex-direction:column;
 row-gap:5px;
 z-index:2;
}

#open_for_applications .occupation .occupation_detail h3 span:first-child {
 font-size:2.6rem;
 font-weight:600;
 line-height:1.4;
 text-align:center;
}

#open_for_applications .occupation .occupation_detail h3 span:nth-child(2) {
 font-size:1.3rem;
}

#open_for_applications .occupation .occupation_detail p {
 flex:1;
 font-size:1.4rem;
 line-height:2.0;
 text-align:left;
}

#open_for_applications .occupation .occupation_detail p.note {
 font-size:1.1rem;
 line-height:1.6;
}

#open_for_applications .occupation .occupation_detail ul {
 column-gap:20px;
 display:flex;
 flex-shrink:0;
 justify-content:start;
}

#open_for_applications .occupation .occupation_detail ul li .btn {
 min-width:160px;
}

#open_for_applications .occupation .occupation_detail ul li:first-child .btn a {
 background-color:var(--main);
 border:1px solid var(--main);
 color:var(--white);
}

#open_for_applications .occupation .occupation_detail ul li:first-child .btn a:after {
 color:var(--white);
}

#open_for_applications .occupation .occupation_detail ul li:first-child .btn a:hover {}
#open_for_applications .occupation .occupation_detail ul li:first-child .btn a:hover:after {}


#open_for_applications {
 display: flex;
 overflow-x: auto;
 scroll-behavior: smooth;
 cursor: grab;
 scrollbar-width: none; /* Firefox */
}

#open_for_applications::-webkit-scrollbar {
 display: none; /* Chrome/Safari */
}

#open_for_applications button.left,
#open_for_applications button.right {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color:var(--sub);
 color:var(--white);
 border-radius:30px;
 cursor: pointer;
 width:60px;
 height:60px;
 z-index: 10;
}

#open_for_applications button.left {
 left:10px;
}

#open_for_applications button.right {
 right:10px;
}

#open_for_applications button:hover {
 background-color:var(--light-yellow);
}

#open_for_applications button.left:after {
 color:var(--white);
 content:"\f053";
 font-family:var(--icon);
 font-size:1.2rem;
 position:absolute;
 margin-top:-8px;
 margin-left:-5px;
 left:50%;
 top:50%;
}

#open_for_applications button.right:after {
 color:var(--white);
 content:"\f054";
 font-family:var(--icon);
 font-size:1.2rem;
 position:absolute;
 margin-top:-8px;
 margin-right:-5px;
 right:50%;
 top:50%;
}

/*------------------------------------------------------------
slider
------------------------------------------------------------*/
.slick-slider { position:relative; display:block; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent; z-index:2; }

.slick-list { position:relative; display:block; overflow:hidden; margin:0; padding:0; }
.slick-list:focus { outline:none; }
.slick-list.dragging { cursor:pointer; cursor:hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}

.slick-track { position:relative; top:0; left:0; display:block; }
.slick-track:before,
.slick-track:after { display:table; content:''; }
.slick-track:after { clear:both; }
.slick-loading .slick-track { visibility:hidden; }
.slick-slide { display:none; float:left; min-height:1px; }
[dir='rtl'] .slick-slide { float:right; }
.slick-slide img { /*display:block;*/ }
.slick-slide.slick-loading img { display:none; }
.slick-slide.dragging img { pointer-events:none; }
.slick-initialized .slick-slide { display:block; }
.slick-loading .slick-slide { visibility:hidden; }
.slick-vertical .slick-slide { display:block; height:auto; border:1px solid transparent; }
.slick-arrow.slick-hidden { display:none; }

.slick-dots {
 display:flex;
 justify-content:center;
 gap:10px;
 margin-top:15px;
}

.slick-dots li button {
 appearance:none;
 background-color:var(--white);
 border:none;
 border-radius:50%;
 color:var(--main);
 height:11px;
 -webkit-appearance:none;
 width:11px;
}
.slick-dots li.slick-active button {
 background-color:var(--main);
 color:var(--white);
}

/* Slider */

.slick-loading .slick-list
{
 background:#fff url('/wp-content/themes/tds/img/top/ajax-loader.gif') center center no-repeat;
}

/* Arrows */
.slick-prev,
.slick-next {
 align-items:center;
 background:var(--main);
 border:4px solid var(--white);
 box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.2);
 border-radius:25px;
 position:absolute;
 top:50%;
 font-size:0;
 line-height:0;
 display:flex;
 justify-content:center;
 width:50px;
 height:50px;
 padding:0;
 cursor:pointer;
 color:transparent;
 outline:none;
 z-index:12;
 margin-top:-25px;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
 color:transparent;
 outline:none;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
 opacity:1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
/*opacity:.25;*/
}

.slick-prev:before,
.slick-next:before {
 font-family:var(--icon);
 font-size:1.6rem;
 line-height:1;
 font-weight:600;
 opacity:1;
 color:var(--blue);
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}

.slick-prev {
 left:20px;
}

.slick-prev:before {
 content:"\f053";
}

.slick-next {
 right:20px;
}

.slick-next:before {
 content:"\f054";
}

/* Dots */
.slick-dotted.slick-slider {
}

.slick-dots {
 position:absolute;
 column-gap:30px;
 bottom:25px;
 left:0;
 display:flex;
 width:100%;
 padding:0;
 margin:0;
 list-style:none;
 text-align:center;
}

.slick-dots li {
 position:relative;
 display:inline-block;
 width:20px;
 height:20px;
 margin:0;
 padding:0;
 cursor:pointer;
}

.slick-dots li button {
 font-size:0;
 line-height:0;
 display:block;
 appearance:none;
 background-color:var(--white);
 border:none;
 border-radius:50%;
 height:20px;
 -webkit-appearance:none;
 width:20px;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
 outline:none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
 opacity:1;
}

.slick-dots li button:before {
 font-family:var(--icon);
 font-size:1.6rem;
 line-height:20px;
 position:absolute;
 top:0;
 left:0;
 width:20px;
 height:20px;
 content:' ';
 text-align:center;
 opacity:.25;
 color:black;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}

.slick-dots li.slick-active button {
 background-color:var(--blue);
}

.slick-dots li.slick-active button:before {
 opacity:.75;
 color:black;
}