@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;900&display=swap');

body{
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

.contents_in{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.kamban{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  background-color:#000537;
}

.kamban_in{
  max-width:1280px;
  width:100%;
}

.kamban_background{
  position:relative;
  width:100%;
  background-image:url("./../images/kamban_top2304.jpg");
  background-size:100%;
  background-repeat:no-repeat;
}

.kamban_background:before{
  content:"";
  display:block;
  width:100%;
  padding-top:120%;
}

.kamban_background > a{
  position:absolute;
  top:3%;
  left:3%;
  box-sizing:border-box;
  display:block;
  max-width:35%;
  width:300px;
}

.kamban_background > ul{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  position:absolute;
  bottom:0;
  left:0;
  box-sizing:border-box;
  width:100%;
  padding:0 16px;
}

.kamban_background > ul > li{
  max-width:250px;
  width:100%;
  margin-left:16px;
}

.kamban_background > ul > li:first-child{
  margin-left:0;
}

.kamban_background > ul > li > *{
  margin-top:16px;
}

.kamban_background > ul > li > *:first-child{
  margin-top:0;
}

.kamban_background > ul > li > a,
.junior_seminar_overview_right_button,
.junior_seminar_overview_right_normalbutton{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  transition: all 0.3s;
  padding:1em 0;
  background-color: #0099D9;
  border-bottom: 5px solid #005DB6;
  border-radius:5px;
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  color: #ffffff;
}

.kamban_background > ul > li > a.scroll_to_software,
.junior_software .junior_seminar_overview_right_normalbutton{
  background-color:#e73828;
  border-bottom:5px solid #C71010;

/*
  background-color:#FF7800;
  border-bottom:5px solid #B66707;
  background-color:#FF3933;
  border-bottom:5px solid #DA2208;

*/
}

.kamban_background > ul > li > a.scroll_to_pc,
.junior_pc .junior_seminar_overview_right_normalbutton{
  background-color:#6A2472;
  border-bottom:5px solid #2C043E;
}

.junior_seminar_overview_right_button{
  background-color:#FE0069;
  border-bottom:5px solid #C40053;
}

@media screen and (min-width: 1280px){
  .kamban_background > a{
    transition: 0.3s all;
  }

  .kamban_background > a:hover{
    transform: scale(1.05, 1.05);
  }

  .kamban_background > ul > li > a:hover,
  .junior_seminar_overview_right_normalbutton:hover{
    margin-top: 19px;
    background: #0099D9;
    border-bottom: 2px solid #005DB6;
  }

  .kamban_background > ul > li > a.scroll_to_software:hover,
  .junior_software .junior_seminar_overview_right_normalbutton:hover{
    margin-top: 19px;
    background-color:#e73828;
    border-bottom:2px solid #C71010;
/*;
    background-color:#FF7800;
    border-bottom:2px solid #B66707;
    background-color:#6A2472;
    border-bottom:2px solid #2C043E;
*/
  }

  .kamban_background > ul > li > a.scroll_to_pc:hover,
  .junior_pc .junior_seminar_overview_right_normalbutton:hover{
    margin-top: 19px;
    background-color:#6A2472;
    border-bottom:2px solid #2C043E;
  }

  .junior_seminar_overview_right_button:hover{
    margin-top: 19px;
    color: #ffffff;
    background:#FE0069;
    border-bottom: 2px solid #C40053;
  }
}

.kamban_background > ul > li > a > *{
  margin-left:8px;
}

.kamban_background > ul > li > a > *:first-child{
  margin-left:0;
}

.kamban_background > ul > li > a > i{
  font-size:18px;
}

.kamban_scroller_image_sp{
  display:none;
}

.kamban_scroller_image_tb{
  display:none;
}

.kamban_scroller_image_pc{
  display:inline;
}

.main_contents{
  width:100%;
}

.kamban_bottom{
  width:100%;
/*  background-image:url(./../images/background_plaid_top.png);*/
  background-repeat:repeat-x;
  background-position:bottom;
  background-color:#000537;
  text-align:center;
}

#go_top
.side_buttons_area{
}
.drawer-open{
position:fixed;
overflow:hidden;
width:100%;
}
.drawer-open #go_top{
transform:translateX(280px);
}
/* JAVASCRIPT */
/* ページトップリンク */
#go_top{
  position:fixed;
  z-index:100;
  bottom:calc(3em + 20px);
  right:20px;
  max-width:15%;
  width:60px;
  background:#002063;
}

#go_top img{
  width:100%;
}
@media screen and (max-width: 1280px){
  .kamban_background > ul > li{
    max-width:18vw;
  }
  #go_top:hover{
    opacity:0.75;
    cursor:pointer;
  }
}

@media screen and (max-width: 800px){
  .kamban_background > ul > li{
    max-width:inherit;
  }

  .kamban_scroller_image_pc{
    display:none;
  }

  .kamban_scroller_image_sp{
    display:none;
  }

  .kamban_scroller_image_tb{
    display:inline;
  }
}

@media screen and (max-width: 600px){
  .kamban_background > ul > li > p{
    display:none;
  }

  .kamban_background > ul > li > a{
    padding:0;
  }

  .kamban_background > ul > li > a > img{
    margin-left:0;
  }

  .kamban_scroller_image_pc{
    display:none;
  }

  .kamban_scroller_image_tb{
    display:none;
  }

  .kamban_scroller_image_sp{
    display:inline;
  }
}

.main_contents_in{
  position:relative;
}

.background_plaid{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
/*  opacity:0.1;*/
  width:100%;
  height:100%;
  background-image:url(./../images/background_plaid2304.png);
  background-repeat: repeat;
}

.background_gradation{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100%;
  background: rgb(51,17,68);
  background: -moz-linear-gradient(2.5deg,  rgba(51,17,68,1) 0%, rgba(0,5,55,1) 100%);
  background: -webkit-linear-gradient(2.5deg,  rgba(51,17,68,1) 0%,rgba(0,5,55,1) 100%);
  background: linear-gradient(2.5deg,  rgba(51,17,68,1) 0%,rgba(0,5,55,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#331144', endColorstr='#000537',GradientType=1 );
}
/*
.background_gradation{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100%;
  background: rgb(67,51,145);
  background: -moz-linear-gradient(2.5deg,  rgba(115,81,163,1.00) 0%, rgba(68,52,145,1.00) 100%);
  background: -webkit-linear-gradient(2.5deg,  rgba(115,81,163,1.00) 0%, rgba(68,52,145,1.00) 100%);
  background: linear-gradient(2.5deg,  rgba(115,81,163,1.00) 0%, rgba(68,52,145,1.00) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7351A3', endColorstr='#443491',GradientType=1 );
}
*/

.background_footer{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100%;
  background-image:url(./../images/background_footer_top2304.png);
  background-size:100%;
  background-repeat:no-repeat;
  background-position:left bottom;
}

.junior_seminars_in{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.junior_seminars_in > *{
  padding-top:40px;
}

.junior_seminars_in > dl{
  box-sizing:border-box;
  max-width:1280px;
  width:100%;
  padding-left:16px;
  padding-right:16px;
}
.junior_seminars_in > dl > dt{
  padding-bottom:8px;
  border-top:10px solid #005DB6;
  border-left:10px solid #005DB6;
  border-right:10px solid #005DB6;
  background-color:#0099D9;
}
.junior_seminars_in > dl.junior_programming2 > dt{
  border-top:10px solid #005DB6;
  border-left:10px solid #005DB6;
  border-right:10px solid #005DB6;
  background-color:#0099D9;
}
.junior_seminars_in > dl.junior_software > dt{
  border-top:10px solid #C71010;
  border-left:10px solid #C71010;
  border-right:10px solid #C71010;
  background-color:#e73828;
}

.junior_seminars_in > dl.junior_pc > dt{
  border-top:10px solid #2C043E;
  border-left:10px solid #2C043E;
  border-right:10px solid #2C043E;
  background-color:#6A2472;
}

.junior_seminars_in > dl > dt > h4{
  margin-top:8px;
  text-align:center;
  font-size:20px;
  font-weight:bold;
  color:#FFEB18;
}

.junior_seminars_in > dl > dt > h3{
  margin-top:8px;
  text-align:center;
  font-size:32px;
  font-weight:bold;
  color:#FFFFFF;
}

.junior_seminars_in > dl > dd{
  box-sizing:border-box;
  border-left:10px solid #0099D9;
  border-bottom:10px solid #0099D9;
  border-right:10px solid #0099D9;
  background-color:#ffffff;
}

.junior_seminars_in > dl.junior_programming2 > dd{
  box-sizing:border-box;
  border-left:10px solid #0099D9;
  border-bottom:10px solid #0099D9;
  border-right:10px solid #0099D9;
  background-color:#ffffff;
}

.junior_seminars_in > dl.junior_software > dd{
  border-left:10px solid #e73828;
  border-bottom:10px solid #e73828;
  border-right:10px solid #e73828;
}

.junior_seminars_in > dl.junior_pc > dd{
  border-left:10px solid #6A2472;
  border-bottom:10px solid #6A2472;
  border-right:10px solid #6A2472;
}

.junior_programming > dd{
  position:relative;
  width:100%;
  padding:16px 280px 16px 16px;
}

.junior_programming2 > dd,
.junior_software > dd,
.junior_pc > dd{
  display:flex;
  flex-direction:row;
  width:100%;
  padding:16px;
}

.junior_programming_illustration{
  position:absolute;
  left:948px;
  bottom:0;
  overflow:hidden;
  max-width:calc(280px + (((100vw + 32px) - 1280px) / 2));
  width:380px;
  height:600px;
}

@media screen and (max-width: 1297px){
  .junior_programming_illustration{
    max-width:289px;
  }
}

.junior_programming_illustration > img{
  object-fit:cover;
  object-position:left bottom;
  font-family: 'object-fit: cover; object-position: left bottom;';
  width:100%;
  height:100%;
}

.junior_seminar_main{
  width:932px;
}
.junior_programming2 > dd > .junior_seminar_main,
.junior_software > dd > .junior_seminar_main,
.junior_pc > dd > .junior_seminar_main{
  flex:1 0 0%;
}

.junior_seminar_main > *{
  margin-top:16px;
}

.junior_seminar_main > *:first-child{
  margin-top:0;
}

.junior_seminar_main > h5{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  margin-left:-16px;
  font-weight:bold;
}

.junior_seminar_main > h5 > p{
  margin-left:16px;
  line-height:1.5;
  font-weight:inherit;
  font-size:18px;
}

.junior_seminar_main > h5 > p .show_on_sp{
  display:none;
}

.junior_programming .junior_seminar_main > h5 > p:last-child,
.junior_programming2 .junior_seminar_main > h5 > p:last-child,
.junior_pc .junior_seminar_main > h5 > p:last-child{
  font-size:24px;
}

.junior_software .junior_seminar_main > h5 > p:first-child,
.junior_programming2 .junior_seminar_main > h5 > p:first-child{
  font-size:24px;
}
.junior_software .junior_seminar_main > h5 > p:first-child{
  font-size:24px;
}

.junior_seminar_overview{
  display:flex;
  flex-direction:row;
}

.junior_seminar_overview_left{
  width:280px;
}

.junior_seminar_overview_left > *{
  margin-top:16px;
}

.junior_seminar_overview_left > *:first-child{
  margin-top:0;
}

.junior_seminar_overview_left_table > *{
  margin-top:8px;
}

.junior_seminar_overview_left_table > *:first-child{
  margin-top:0;
}

.junior_seminar_overview_left_table > dl{
  display:flex;
  flex-direction:row;
  justify-content:stretch;
  align-items:stretch;
}

.junior_seminar_overview_left_table > dl > dt{
  width:5em;
  padding:8px 0;
  background-color:#0099D9;
  text-align:center;
  color:#ffffff;
}

.junior_programming2 .junior_seminar_overview_left_table > dl > dt{
  background-color:#0099D9;
}

.junior_software .junior_seminar_overview_left_table > dl > dt{
  background-color:#e73828;
}

.junior_pc .junior_seminar_overview_left_table > dl > dt{
  background-color:#6A2472;
}

.junior_seminar_overview_left_table > dl > dt > p{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  height:100%;
}

.junior_seminar_overview_left_table > dl > dd{
  flex:1 0 0%;
  margin-left:8px;
  padding:4px 0;
}

.junior_seminar_overview_left_table > dl > dd > *{
  line-height:20px;
}

.junior_seminar_overview_left_note{
  line-height:1.5;
  font-size:12px;
}

.junior_seminar_overview_left_note *{
  font-weight:inherit;
}

.junior_seminar_overview_right{
  flex:1 0 0%;
  margin-left:16px;
}

.junior_seminar_overview_right > h6{
  padding-bottom:8px;
  border-bottom:3px solid #0099D9;
  font-size:20px;
  font-weight:bold;
}

.junior_programming2 .junior_seminar_overview_right > h6{
  border-bottom:3px solid #0099D9;
}

.junior_software .junior_seminar_overview_right > h6{
  border-bottom:3px solid #e73828;
}

.junior_pc .junior_seminar_overview_right > h6{
  border-bottom:3px solid #6A2472;
}

.junior_seminar_overview_right_main{
  margin-top:8px;
}

.junior_seminar_overview_right_main > *{
  margin-top:16px;
}

.junior_seminar_overview_right_main > *:first-child{
  margin-top:0;
}

.junior_seminar_overview_right_main > p{
  line-height:1.5;
}

.junior_seminar_overview_right_main_wrap{
  display:flex;
  flex-direction:row;
  align-items:center;
}

.junior_seminar_overview_right_main_left > *{
  margin-top:16px;
  font-size:16px;
}

.junior_seminar_overview_right_main_left > *:first-child{
  margin-top:0;
  line-height:24px;
  font-weight:bold;
  color:#0099D9;
}

.junior_seminar_overview_right_main_left > a{
  padding:14px 0;
}

.junior_seminar_overview_right_main_left > a > i{
  margin-left:8px;
  font-size:20px;
}

.junior_programming2 .junior_seminar_overview_right_main_left > *:first-child{
  color:#0099D9;
}

.junior_software .junior_seminar_overview_right_main_left > *:first-child{
  color:#e73828;
}

.junior_pc .junior_seminar_overview_right_main_left > *:first-child{
  color:#6A2472;
}

.junior_seminar_overview_right_main_left{
  flex:1 0 0%;
}

.junior_seminar_overview_right_main_right{
  width:232px;
  margin-left:16px;
}

.junior_seminar_right{
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: center;
  width:248px;
  margin-left:16px;
}

.junior_seminar_right > *{
  margin-top:16px;
}

.junior_seminar_right > *:first-child{
  margin-top:0;
}

@media screen and (max-width: 1280px){
  .junior_seminar_main{
    flex:1 0 0%;
    width:auto;
  }

  .junior_programming_illustration{
    position:inherit;
    left:inherit;
    bottom:inherit;
    overflow:inherit;
    max-width:22.5%;
    width:100%;
    height:auto;
    margin-left:16px;
    background-image:url(./../images/background_dots_water.jpg);
    background-repeat:repeat;
  }

  .junior_programming_illustration > img{
    object-position:17.5% bottom;
  }

  .junior_programming > dd{
    display:flex;
    flex-direction:row;
    padding:16px;
  }

  .junior_seminar_overview_right_main_right{
    width:25%;
  }
}

@media screen and (max-width: 1024px){
  .junior_seminar_overview{
    flex-direction:column;
  }

  .junior_seminar_overview_left{
    width:100%;
  }

  .junior_seminar_overview_right{
    margin-left:0;
    margin-top:16px;
  }

  .junior_seminar_overview_left > .junior_seminar_overview_left_table{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    margin-top:-8px;
  }

  .junior_seminar_overview_left_table > *:first-child{
    margin-top:8px;
  }

  .junior_seminar_overview_left_table > dl{
    width:50%;
  }

  .junior_programming_illustration > img{
    object-position:35% bottom;
  }
}

@media screen and (max-width: 800px){
  .junior_seminar_overview_left > .junior_seminar_overview_left_table{
    flex-direction:column;
  }

  .junior_seminar_overview_left_table > dl{
    width:100%;
  }

  .junior_programming2 > dd,
  .junior_software > dd,
  .junior_pc > dd{
    flex-direction:column;
  }

  .junior_seminar_right{
    flex-direction:row-reverse;
    justify-content:center;
    width:100%;
    margin-top:16px;
    margin-left:0;
  }

  .junior_seminar_right > *{
    margin-top:0;
    margin-left:16px;
  }

  .junior_seminar_right > *:last-child{
    margin-left:0;
  }

}

@media screen and (max-width: 600px){
  .junior_seminars_in > dl{
    padding-left:8px;
    padding-right:8px;
  }

  .junior_seminars_in > dl:first-child{
    padding-top:6%;
  }

  .junior_seminars_in > dl > dt{
    border-top:8px solid #005DB6;
    border-left:8px solid #005DB6;
    border-right:8px solid #005DB6;
  }
  .junior_seminars_in > dl.junior_programming2 > dt{
    border-top:8px solid #005DB6;
    border-left:8px solid #005DB6;
    border-right:8px solid #005DB6;
  }
  .junior_seminars_in > dl.junior_software > dt{
    border-top:8px solid #e73828;
    border-left:8px solid #e73828;
    border-right:8px solid #e73828;
  }

  .junior_seminars_in > dl.junior_pc > dt{
    border-top:8px solid #2C043E;
    border-left:8px solid #2C043E;
    border-right:8px solid #2C043E;
  }

  .junior_seminars_in > dl > dd{
    border-left:8px solid #0099D9;
    border-bottom:8px solid #0099D9;
    border-right:8px solid #0099D9;
  }

  .junior_seminars_in > dl.junior_programming2 > dd{
    border-left:8px solid #0099D9;
    border-bottom:8px solid #0099D9;
    border-right:8px solid #0099D9;
  }

  .junior_seminars_in > dl.junior_software > dd{
    border-left:8px solid #e73828;
    border-bottom:8px solid #e73828;
    border-right:8px solid #e73828;
  }

  .junior_seminars_in > dl.junior_pc > dd{
    border-left:8px solid #6A2472;
    border-bottom:8px solid #6A2472;
    border-right:8px solid #6A2472;
  }

  .junior_seminars_in > dl > dt > h4{
    font-size:3.5vw;
  }

  .junior_seminars_in > dl > dt > h3{
    font-size:4.75vw;
  }

  .junior_seminars_in > dl > dt > h3 > span{
    font-size:4.5vw!important;
  }

  .junior_seminar_main > h5{
    justify-content:center;
    margin-left:0;
  }

  .junior_seminar_main > h5 > p{
    margin-left:0;
    font-size:4.5vw;
    text-align:center;
  }

  .junior_seminar_main > h5 > p .show_on_sp{
    display:inline;
  }

  .junior_programming .junior_seminar_main > h5 > p:last-child,
  .junior_pc .junior_seminar_main > h5 > p:last-child,
  .junior_software .junior_seminar_main > h5 > p:first-child,
  .junior_programming2 .junior_seminar_main > h5 > p:first-child{
    font-size:4.75vw;
  }

  .junior_seminar_overview_right{
    margin-top:32px;
  }

  .junior_seminar_overview_right > h6{
    font-size:4.75vw;
    text-align:center;
  }

  .junior_seminar_overview_right > h6,
  .junior_software .junior_seminar_overview_right > h6,
  .junior_programming2 .junior_seminar_overview_right > h6,
  .junior_pc .junior_seminar_overview_right > h6{
    position:relative;
    padding-bottom:16px;
    border-bottom:0;
  }

  .junior_seminar_overview_right > h6:after,
  .junior_software .junior_seminar_overview_right > h6:after,
  .junior_programming2 .junior_seminar_overview_right > h6:after,
  .junior_pc .junior_seminar_overview_right > h6:after{
    content:"";
    display:block;
    position:absolute;
    bottom:0;
    left:calc(50% - 40px);
    width:80px;
    height:4px;
    background-color:#0099D9;
    border-radius:2px;
  }

  .junior_programming2 .junior_seminar_overview_right > h6:after{
    background-color:#0099D9;
  }

  .junior_software .junior_seminar_overview_right > h6:after{
    background-color:#e73828;
  }

  .junior_pc .junior_seminar_overview_right > h6:after{
    background-color:#6A2472;
  }

  .junior_seminar_overview_right_main{
    margin-top:12px;
  }

  .junior_seminar_overview_right_main_wrap{
    flex-direction:column-reverse;
  }

  .junior_seminar_overview_right_main_left{
    margin-top:16px;
  }

  .junior_seminar_overview_right_main_right{
    width:auto;
    margin-left:0;
  }

  .junior_programming_illustration{
    display:none;
  }

  .junior_seminar_right > .hidden_on_sp{
    display:none;
  }
}

.footer_in{
  position:relative;
  width:100%;
  background-image:url(./../images/background_footer_bottom2304.jpg);
  background-size:100%;
  background-position:left top;
}

.footer_in:before{
  content:"";
  display:block;
  width:100%;
  padding-top:96px;
}

.footer_in > address{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:100%;
  font-size:16px;
  text-align:center;
  color:#ffffff;
}

.footer_in > address .show_on_sp{
  display:none;
}

@media screen and (max-width: 600px){
  .footer_in > address{
    line-height:1.5;
  }

  .footer_in > address .show_on_sp{
    display:inline;
  }
}
