@charset "utf-8";

/* -------------------------------------------------------------------
 * 進路サポート
------------------------------------------------------------------- */

.support-home   { margin-bottom:20px;}
.support-home a { margin:0 auto;}

@media screen and (min-width:768px) {

  .support-home   { margin-bottom:60px;}
  .support-home h3 {
    font-size:3.2rem;
  }
  

}



/* -------------------------------------------------------------------
 * 進路サポート - 就職
------------------------------------------------------------------- */

.support-job-data { margin:0 auto 4rem; padding:2rem 0; background-color:#f4f4f4;}
.support-job-data figcaption  { padding:1rem 0; font-size:2.0rem; font-weight:700;}
.support-job-data figcaption small  { font-size:1.4rem; font-weight:400;}
.support-job-data .block-2 ul li  { margin-bottom:10px;}

.support-job-support  { margin:0 auto 4rem;}
.support-job-support h3 { font-size:2.0rem;}
.support-job-support p  { font-size:1.6rem;}
.support-job-support .block-3 ul li  { margin-bottom:4rem;}
.support-job-support .common-button { margin:0 auto;}

.support-interview { margin:0 auto 4rem; padding:2rem 0; background-color:#f4f4f4;}
.support-interview h3 { margin:1em 0; font-size:2.0rem; line-height:1.8;}
.support-interview h3 b { display:inline-block; margin:0 0.5em 0 0; padding:0.2em 0.4em; line-height:1.25; color:#fff; background-color:#0ea2aa;}
.support-interview h4 { margin:1em 0; font-size:2.0rem; line-height:1.8; font-weight:700;}
.support-interview .transfer-title  { padding:0.5em 0.5em; line-height:1.4; color:#fff; background-color:#0ea2aa;}
.support-interview .transfer-title small  { display:block; font-weight:1.6rem; font-weight:400;}
.support-interview .transfer-title b  { display:block; margin:0 -0.5em -0.5em; padding:0.5em; color:#0ea2aa; background-color:#FFEC00;}
.support-interview p  { margin-bottom:0.5em;}
.support-interview p .name {font-size:1.8rem;}
.support-interview figure  { margin:0 0 2rem;}
.interview  { margin-bottom:6rem;}

.support-job-shushoku { margin:0 auto 8rem;}
.support-job-shushoku h4  { font-size:2.0rem; font-weight:700; color:#0ea2aa;}
.support-job-shushoku .shushokus  { margin-bottom:30px; border-bottom:1px solid #ccc;}
.support-job-shushoku .shushokus:last-child  { border:0;}
.support-job-shushoku .shushokus ul { margin:1em 0 2em 0; list-style:none;}
.support-job-shushoku .shushokus li { position:relative; margin:0 0 0.8em; padding:0 0 0 1em; font-size:1.6rem;}
.support-job-shushoku .shushokus li:before { 
  position:absolute; top:0.7em; left:0.4em; content:''; 
  width:3px; height:3px; border-radius:100%; background-color:#000;
}
.support-job-shushoku .shushokus li:last-child:before { padding:0; background:none;}

@media screen and (min-width:768px) {

  .support-job-data { margin:0 auto 6rem; padding:6rem 0;}
  .support-job-data figcaption  { font-size:2.4rem;}
  .support-job-data figcaption small  { font-size:1.6rem;}
  .support-job-support .block-3 ul {
    justify-content:flex-start;
  }
  .support-job-support .block-3 ul li { margin-right:3%;}
  .support-job-support .block-3 ul li:nth-child(3n) { margin-right:0;}
  .support-job-support h3 { font-size:2.4rem;}
  
  .support-interview { margin:0 auto 6rem; padding:6rem 0;}
  .support-interview h3 { font-size:2.4rem;}
  .support-interview h3 br  { display:none;}
  .support-interview h4 { margin:0 0 1em; font-size:2.4rem;}
  .support-interview .transfer-title small  { display:inline-block; margin-left:1em;} 
  .support-interview .transfer-title b  { display:inline-block; float:right; margin:-0.5em -0.5em -0.5em; padding:0.58em 1em;}
  .interview-body { display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;}
  .interview-body figure { width:35%;}
  .interview-body > div { width:60%;}
  .support-job-shushoku .shushokus ul { display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start;}
  .support-job-shushoku .shushokus li { width:25%;}
  .support-job-shushoku .shushokus li:last-child  { width:100%; text-align:right;}

}




/* -------------------------------------------------------------------
 * 進路サポート - 就職
------------------------------------------------------------------- */

.support-next-one { margin:0 auto 4rem; padding:3rem 0; background-color:#f4f4f4;}
.support-next-one h3  { margin:1em 0; font-size:2.0rem;}
.support-next-one h3 b  { color:#0ea2aa;}
.support-next-one p   { margin-bottom:1.6em;}

.support-next-two { margin:0 auto 4rem; padding:3rem 0;}
.support-next-two h3  { margin:1em 0; font-size:2.0rem;}
.support-next-two h3 b  { color:#0ea2aa;}
.support-next-two p   { margin-bottom:1.6em;}
.support-next-two .caption  { text-align:right; font-size:1.4rem;}
.support-next-two .block-2 ul li  { margin-bottom:1rem;}

.support-next-three { margin:0 auto 4rem; padding:3rem 0; background-color:#f4f4f4;}
.support-next-three .title-caption  { line-height:1.5;}
.support-next-three .block-3    { padding-top:6rem;}
.support-next-three .block-3 li { position:relative; margin:0 0 5rem; padding:5.5rem 3rem 1rem; background-color:#fff;}
.support-next-three .block-3 .point { 
  position:absolute; top:-30px; left:calc(50% - 40px); content:''; 
  padding:12px; width:80px; height:80px;
  text-align:center; font-size:1.6rem; line-height:1; color:#fff; font-family:'Roboto', sans-serif; font-weight:700;
  background-color:#0ea2aa; border-radius:100%;
}
.support-next-three .block-3 .point b { display:block; font-size:4.2rem}
.support-next-three .block-3 h4 { margin:0 0 0.5rem; text-align:center; font-size:2.4rem; font-weight:700;}

.support-next-flow  {}
.support-next-flow h3 { margin:1em 0; font-size:2.0rem;}
.support-next-flow h3 b  { color:#0ea2aa;}
.support-next-flow .next-flow { padding:6rem 0;}
.support-next-flow .next-flow h4  { font-size:2.0rem; font-weight:700; color:#fff; background-color:#0ea2aa;}
.support-next-flow .next-flow h4 .step  { display:inline-block; margin:0 0.5em 0 0; padding:0.2em 0.2em; font-family:'Roboto', sans-serif; color:#0ea2aa; background-color:#FFEC00;}
.support-next-flow .next-flow .contents { display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center;}
.support-next-flow .next-flow .icon { position:relative; width:72px;}
.support-next-flow .next-flow .icon img { margin:0 auto; width:72px;}
.support-next-flow .next-flow .icon:before  { 
  position:absolute; top:-50px; left:0; content:''; width:72px; height:50px; background:url(../img/support/support2/arrow.png) no-repeat center top / 40px auto;
}
.support-next-flow .next-flow .icon:after  { 
  position:absolute; top:80px; left:0; content:''; width:72px; height:50px; background:url(../img/support/support2/arrow.png) no-repeat center top / 40px auto;
}
.support-next-flow .next-flow li:nth-child(2) .icon:before { top:-100px;}
.support-next-flow .next-flow li:nth-child(2) .icon:after  { top:130px;}
.support-next-flow .next-flow li:last-child .contents { padding:60px 0 0;}
.support-next-flow .next-flow li:last-child .icon:after { background:none;}
.support-next-flow .next-flow .content  { padding:3rem 0; width:calc(100% - 80px);}
.support-next-flow .next-flow .grade  { padding:0.3rem 0.5rem; text-align:center; font-size:2.0rem; font-weight:700; background-color:#F4F4F4; border-radius:10px;}
.support-next-flow .next-flow .grade small  { font-size:1.6rem;}
.support-next-flow .next-flow .resul  { text-align:center; font-size:1.8rem; font-weight:700; line-height:1.5; color:#0ea2aa;}
.support-next-flow .next-flow p { margin-bottom:1em;}
.support-next-flow .next-flow .content-b  { position:relative; margin:80px 0 0;}
.support-next-flow .next-flow .content-b:before {
  position:absolute; top:-50px; left:0; content:''; width:100%; height:24px; background:url(../img/support/support2/arrow-green.png) no-repeat center top / 20px auto;
}

@media screen and (min-width:768px) {
  
  .support-next-one { padding:6rem 0;}
  .support-next-one .block-2   {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  }
  .support-next-one .block-2 > div  { width:48.5%;}
  .support-next-one .block-2 figure  { width:48.5%;}
  .support-next-one h3  { margin:0 0 1em; font-size:2.4rem;}
  
  .support-next-three { margin:0 auto 6rem; padding:6rem 0;}
  .support-next-three h2 br { display:none;}
  .support-next-three .block-3 ul { justify-content:flex-start;}
  .support-next-three .block-3 ul li { margin-right:3%;}
  .support-next-three .block-3 ul li:nth-child(3n) { margin-right:0;}

  .support-next-flow h3 { font-size:2.4rem;}
  .support-next-flow .next-flow h4  { font-size:2.4rem;}
  .support-next-flow .next-flow h4 .step  { margin:0 0.5em 0 0; padding:0.2em 6rem;}
  .support-next-flow .next-flow .icon { width:180px;}
  .support-next-flow .next-flow .icon img { width:114px;}
  .support-next-flow .next-flow .icon:before,
  .support-next-flow .next-flow .icon:after  { width:180px;}
  .support-next-flow .next-flow .icon:before { top:-50px;}
  .support-next-flow .next-flow li:nth-child(2) .icon:before { top:-50px;}
  .support-next-flow .next-flow .icon:after  { top:120px;}
  .support-next-flow .next-flow .content  { padding:3rem 0; width:calc(100% - 200px);}
  .support-next-flow .next-flow .content  {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  }
  .support-next-flow .next-flow .content > div   { width:45%;}
  .support-next-flow .next-flow .grade  { font-size:2.4rem;}
  .support-next-flow .next-flow .resul  { font-size:2.0rem;}

  .support-next-flow .next-flow .content-b  { margin:0;}
  .support-next-flow .next-flow .content-b:before {
    position:absolute; top:16px; left:-13%; content:''; width:24px; height:24px; transform:rotate(-90deg);
  }

}



/* -------------------------------------------------------------------
 * 進路サポート - 大学編入
------------------------------------------------------------------- */

.support-transfer-one { margin:0 auto 4rem; padding:3rem 0; background-color:#f4f4f4;}
.support-transfer-one h3  { margin:1em 0; font-size:2.0rem;}
.support-transfer-one h3 b  { color:#0ea2aa;}
.support-transfer-one p   {}
.support-transfer-two { margin:0 auto 4rem; padding:3rem 0;}
.support-transfer-two h3  { margin:1em 0; font-size:2.0rem;}
.support-transfer-two h3 b  { color:#0ea2aa;}

.support-transfer-three { margin:0 auto 4rem; padding:3rem 0; background-color:#f4f4f4;}
.support-transfer-three .title-caption  { line-height:1.5;}
.support-transfer-three .block-3    { padding-top:6rem;}
.support-transfer-three .block-3 li { position:relative; margin:0 0 5rem; padding:5.5rem 3rem 1rem; background-color:#fff;}
.support-transfer-three .block-3 .point { 
  position:absolute; top:-30px; left:calc(50% - 40px); content:''; 
  padding:12px; width:80px; height:80px;
  text-align:center; font-size:1.6rem; line-height:1; color:#fff; font-family:'Roboto', sans-serif; font-weight:700;
  background-color:#0ea2aa; border-radius:100%;
}
.support-transfer-three .block-3 .point b { display:block; font-size:4.2rem}
.support-transfer-three .block-3 h4 { margin:0 0 0.5rem; text-align:center; font-size:2.4rem; font-weight:700;}

.support-transfer-four  { margin:0 auto 4rem; padding:3rem 0;}
.jisseki-table  { margin-bottom:4rem;}
.jisseki-table > ul  { border-bottom:1px solid #ccc;}
.jisseki-table > ul > li  { 
  display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center;
}
.jisseki-table > ul > li:nth-child(odd)  { background:#f4f4f4;}
.jisseki-table h5  { width:30%; text-align:center; font-size:1.6rem; font-weight:700; color:#0ea2aa;}
.jisseki-table ul ul { padding:0.5em 0; width:70%; font-size:1.4rem;}
.jisseki-table ul ul li { position:relative; margin:.4em 0; padding:0 0 0 1em; font-size:1.6rem;}
.jisseki-table ul ul li:before { 
  position:absolute; top:0.7em; left:0.4em; content:''; 
  width:3px; height:3px; border-radius:100%; background-color:#000;
}

.jisseki-num  { padding:2rem 0; text-align:center; background:#f4f4f4;}
.jisseki-num p  { line-height:1.1;}
.jisseki-num p.tit  { font-size:2.1rem; font-weight:700;}
.jisseki-num p.kou  { font-size:5.5rem; font-weight:700;}
.jisseki-num p strong  { font-family:'Roboto', sans-serif; font-size:14.0rem; font-weight:600; color:#0ea2aa;}
.jisseki-num p.cap  { font-size:1.4rem;}



@media screen and (min-width:768px) {

  .support-transfer-one { padding:6rem 0;}
  .support-transfer-one .block-2   {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  }
  .support-transfer-one .block-2 > div  { width:48.5%;}
  .support-transfer-one .block-2 figure  { width:48.5%;}
  .support-transfer-one h3  { margin:0 0 1em; font-size:2.4rem;}
  
  .support-transfer-two { padding:6rem 0;}
  .support-transfer-two .block-2   {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  }
  .support-transfer-two .block-2 > div  { width:34%;}
  .support-transfer-two .block-2 figure  { width:62%;}
  .support-transfer-two h3  { margin:0 0 1em; font-size:2.4rem;}

  .support-transfer-three { margin:0 auto 6rem; padding:6rem 0;}
  .support-transfer-three h2 br { display:none;}
  .support-transfer-three .block-3 ul { justify-content:flex-start;}
  .support-transfer-three .block-3 ul li { margin-right:3%;}
  .support-transfer-three .block-3 ul li:nth-child(3n) { margin-right:0;}
  
  .jisseki-wrap {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  }
  .jisseki-wrap .jisseki-table  { width:63%;}
  .jisseki-wrap > div    { width:33%;}
  .jisseki-table h5  { width:20%; font-size:2.0rem;}
  .jisseki-table ul ul { 
    padding:0.5em 0; width:80%;
    display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start;
  }
  .jisseki-table ul ul li { width:33%;}
  .jisseki-num  { padding:4rem 0;}


}




/* -------------------------------------------------------------------
 * 進路サポート - 資格取得
------------------------------------------------------------------- */

.support-shikaku-one { margin:0 auto; padding:3rem 0; background-color:#f4f4f4;}
.support-shikaku-one h3  { margin:1em 0; font-size:2.0rem;}
.support-shikaku-one h3 b  { color:#0ea2aa;}
.support-shikaku-one ul   { margin:1em 0 1em 1.5em; list-style-type:disc;}
.support-shikaku-one ul li  { margin:0 0 0.5em; font-size:1.6rem; font-weight:700; color:#0ea2aa;}
.support-shikaku-one figure { margin:2rem 0;}
.support-shikaku-one .shikaku-seido { margin-bottom:4rem;}
.support-shikaku-one .seido { background-color:#fff; border-radius:10px;}
.support-shikaku-one .seido h3  { padding:0.5em; text-align:center; color:#fff; background-color:#0ea2aa; border-radius:10px 10px 0 0;}
.support-shikaku-one .seido p { padding:0 1.5em 1.5em;}

.shikaku-interview  { padding:3rem 0 0; background-color:transparent;}
.support-shikaku-table  { margin:0 auto 6rem;padding:3rem 0; background-color:#f4f4f4;}
.support-shikaku-table  p { margin-bottom:1.6em;}
.shikaku-susume  { margin:0 0 2rem;}
.shikaku-susume ul { margin:0;}
.shikaku-susume li { margin:0 0 .5em; font-size:1.6rem;}
.shikaku-gakka  { margin:0 0 4rem;padding:2rem 5%; background-color:#fff; border-radius:10px;}
.shikaku-gakka ul { margin:0;}
.shikaku-gakka li { margin:0 0 .5em; font-size:1.6rem;}
.shikaku-gakka b  { color:#0ea2aa;}

.shikaku-pagenav  {margin:0 0 4rem;}
.shikaku-pagenav ul  {
  display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
}
.shikaku-pagenav li  { margin:0 0 10px; width:48.5%; text-align:center;}
.shikaku-pagenav a  { 
  position:relative;
  display:block; padding:1rem 1rem; 
  font-size:1.6rem; color:#0ea2aa; 
  background-color:#fff; border:2px solid #0ea2aa; border-radius:100px;
}
.shikaku-pagenav a:after  {
  position:absolute; top:calc(50% - 6px); right:16px; content:''; 
  width:10px; height:10px; 
  border:solid #0ea2aa;border-width:0 2px 2px 0; transform:rotate(45deg);
}

.shikaku-table  { margin:0 0 6rem;}
.shikaku-a  { color:#49A2E0;}
.shikaku-b  { color:#1E237F;}
.shikaku-c  { color:#A3C051;}
.shikaku-d  { color:#0EA2AA;}
.shikaku-table table  { table-layout:auto; border-collapse:collapse; border-spacing:0;}
.shikaku-table th,
.shikaku-table td  { padding:1.4rem 1.2rem; font-size:1.4rem;}
.shikaku-table thead  {}
.shikaku-table thead tr.gakka td  { width:30px; color:#0ea2aa; background-color:#fff;}
.shikaku-table thead tr.gakka td:first-child  { background-color:transparent;}
.shikaku-table thead tr.bunya  { color:#fff; background-color:#0ea2aa;}
.shikaku-table thead tr.bunya th  { font-size:2.0rem;}
.shikaku-table thead td  {}
.shikaku-table thead td  {}
.shikaku-table tbody tr  { background-color:#fff;}
.shikaku-table tbody tr:nth-child(even)  { background-color:#DAF0F2;}
.shikaku-table tbody th  {}
.shikaku-table tbody td:nth-child(1)  { width:25%;}
.shikaku-table tbody td:nth-child(2)  { width:45%;}

.table-wrap	{ padding:0 0 10px; width:auto; overflow:scroll;}
.table-wrap table	{ width:100%; white-space:nowrap; table-layout:auto;}
.table-wrap::-webkit-scrollbar			{ height:6px;}
.table-wrap::-webkit-scrollbar-track	{ background: #ffffff;}
.table-wrap::-webkit-scrollbar-thumb	{ background: #acacac;}



@media screen and (min-width:768px) {

  .support-shikaku-one { padding:6rem 0;}
  .support-shikaku-one .shikaku-seido   {
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
  }
  .support-shikaku-one .shikaku-seido > div  { width:48.5%;}
  .support-shikaku-one .shikaku-seido figure  { width:48.5%;}
  .support-shikaku-one h3  { margin:0 0 1em; font-size:2.4rem;}

  .support-shikaku-one .seido { 
    display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch;
    background-color:#fff; border-radius:10px;
  }
  .support-shikaku-one .seido h3  { margin:0; padding:1.5em 0; width:20%; border-radius:10px 0 0 10px;}
  .support-shikaku-one .seido p { padding:1.5em 1.5em 1.5em; width:80%;}

  .shikaku-susume li { display:inline-block; vertical-align:top;margin:0 2% .5em 0;}
  .shikaku-gakka li { display:inline-block; vertical-align:top; width:23%; margin:0 2% .5em 0;}
  .shikaku-gakka li:nth-child(4n) { margin-right:0;}
  .shikaku-pagenav li  { width:24%;}

  .shikaku-table table  { width:100%;}
  
}




/* -------------------------------------------------------------------
 * 段組
------------------------------------------------------------------- */

/* 2段 */
.block-2 ul {
  display:flex; flex-wrap:wrap;
}
.block-2 ul li{
  margin-bottom:60px;
}
.block-2 ul li figure {
  margin-bottom:20px;
}
.block-2 ul li p {
  margin-bottom:30px;
}

@media screen and (min-width:768px) {

  .block-2 ul {
    margin-bottom:0px;
  }
  .block-2 ul li {
    width:48.5%; margin-bottom:80px;
  }
  .block-2 ul li:nth-of-type(2n + 2) {
    margin-left:3%;
  }

}




/* 3段 */
.block-3 ul {
  display:block;
}
.block-3 ul li {
  display:block; width:100%;
}
.block-3 ul li figure {
  margin-bottom:20px;
}
.block-3 ul li h3 {
  margin-bottom:10px;
}
.block-3 ul li p {
  margin-bottom:30px;
  font-weight:500;
  line-height:2;
}

@media screen and (min-width:768px) {

  .block-3 ul {
    display:flex; flex-flow:row wrap; justify-content:space-between;
  }
  .block-3 ul li {
    display:flex; flex-direction:column; width:31.3%;
  }

}



/* 4段 */
.block-4 ul {
  display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start;
}
.block-4 ul li {
  width:48.5%;
}
.block-4 ul li figure {
  margin-bottom:20px;
}

@media screen and (min-width:768px) {

  .block-4 ul {
    display:flex; justify-content:space-between;
  }
  .block-4 ul li {
    display:flex; flex-direction:column; width:22.5%;
  }

}




/* -------------------------------------------------------------------
 * 
------------------------------------------------------------------- */

article h3 {
  font-size:2.4rem; font-weight:700; letter-spacing:0.04em; 
}
article p {
  font-size:1.6rem; line-height:2.0;
}
p.lead  { font-size:1.8rem; font-weight:700; line-height:1.8;}
p.note  { font-size:1.4rem; line-height:1.4;}

a.image-on-arrow {
  display:block;
  overflow:hidden;
  position:relative;
  margin-bottom:20px;
}
a.image-on-arrow figure { margin-bottom:0 !important;}
a.image-on-arrow::before,
a.image-on-arrow::after {
  position:absolute; z-index:1; content:"";
}
a.image-on-arrow::before {
  right:0;
  bottom:0;
  width:32px;
  height:32px;
  background-color:#000;
}
a.image-on-arrow::after {
  background-image:url(../img/common/icon-arrow-right-white.png);
  background-size:cover;
  right:8px;
  bottom:8.5px;
  width:16px;
  height:15px;
}
a.image-on-arrow img {
  transition:transform .3s;
}
a.image-on-arrow:hover img {
  transform:scale(1.1);
}



@media screen and (min-width:768px) {

  p.lead  { font-size:2.4rem;}  

}