@charset "UTF-8";
/* Scss Document */
/* -------------------------------------------------- */
/* file   : department_sub.css                                  */
/* update : 2025                                      */
/* -------------------------------------------------- */
/* -------------------------------------------------- */
/* pc向け */
/* --------------------------------------------------- */
.tab-sp {
  display: none;
}

.no_tab-sp {
  display: block;
}

.flow {
  margin-bottom: 100px;
}
.flow .page-ttl01 {
  margin: 100px 0;
}
.flow .page-ttl07 {
  margin-bottom: 20px;
}
.flow .flow_img {
  position: relative;
}
.flow .page-ttl05 + .flow_text {
  margin-top: 10px;
}
.flow .flow_text {
  line-height: 225%;
  margin-bottom: 70px;
}
.flow .flow_text .page-link_item {
  margin-top: 32px;
}
.flow .flow_text .page-link_item a {
  text-decoration: inherit;
  color: #000;
  word-break: keep-all;
}
.flow .flow_text .page-link_item .link-list_icon {
  background: #FF5963;
  top: 40%;
  right: 0;
}
.flow .flow_text.last {
  margin-bottom: 100px;
}
.flow .flow_text a {
  color: #4269BF;
  text-decoration: underline;
}
.flow .flow_text .link-list {
  margin-top: 20px;
}
.flow .flow_text .link-list a {
  color: #000;
  text-decoration: none;
}
.flow .flow_year {
  background: #FF5963;
  border-radius: 0 10px;
  opacity: 0.9;
  height: 25px;
  font-style: italic;
  font-weight: 500;
  line-height: 155.769%;
  color: #fff;
  font-size: 15px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 28px;
  font-family: "Noto Serif", serif;
}
.flow .flow_year span {
  font-size: 20px;
}
.flow .flow_tit {
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 163.636%;
  margin-top: 20px;
}
.flow .flex_subject {
  width: 32%;
  max-width: 390px;
}
.flow .flex01 {
  margin-bottom: 70px;
}
.flow .flex01.last {
  margin-bottom: 100px;
}
.flow .flex01_l {
  width: 39.68%;
}
.flow .flex01_r {
  width: 56.35%;
  line-height: 225%;
}
.flow .flex01_r .page-ttl05 {
  margin-bottom: 10px;
}
.flow .flex02_l {
  width: 30.95%;
}
.flow .flex02_r {
  width: 65.1%;
  line-height: 225%;
}
.flow .flex02_r .page-ttl05 {
  margin-bottom: 15px;
}
.flow .learning-steps {
  margin-bottom: 100px;
}
.flow .top_green {
  background-color: #CBD000;
  padding: 30px;
  margin-bottom: 41px;
  position: relative;
}
.flow .top_green::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 15px solid #cbd000;
  border-bottom: 0;
  left: 0;
  right: 0;
  bottom: -27px;
  margin: 0 auto;
}
.flow .learning_flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flow .year {
  width: 25%;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  background-color: #006DB9;
  border-right: solid 1px #A8A8A8;
  padding: 12px;
}
.flow .year:last-child {
  border-right: none;
}
.flow .year.year02 {
  background-color: #005C9C;
}
.flow .year.year03 {
  background-color: #00497D;
}
.flow .year.year04 {
  background-color: #00345B;
}
.flow .learning_tit {
  background-color: #B82476;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  padding: 14px;
  color: #fff;
  margin-top: 20px;
}
.flow .learning_wrap {
  background: #fff;
  padding: 20px 0px;
  position: relative;
}
.flow .line {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  background: #A8A8A8;
  top: 0;
}
.flow .line.line01 {
  left: 25%;
}
.flow .line.line02 {
  left: 50%;
}
.flow .line.line03 {
  left: 75%;
}
.flow .learning_item01 {
  background-color: #B15784;
  color: #fff;
  padding: 11px 20px;
  width: calc(75% - 20px);
  margin-left: 20px;
  position: relative;
}
.flow .learning_item02 {
  position: relative;
  text-align: center;
  width: 37.5%;
  margin-top: 10px;
  margin-left: 20px;
}
.flow .learning_item02::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 100%;
  background-color: #B15784;
}
.flow .learning_item02 span {
  position: relative;
  padding: 5px 10px;
  background-color: #fff;
  color: #B15784;
}
.flow .learning_item03 {
  position: relative;
  text-align: center;
  width: 75%;
  margin-top: 10px;
  padding-left: 20.32%;
}
.flow .learning_item03::before {
  content: "";
  position: absolute;
  left: 20.32%;
  top: 50%;
  height: 2px;
  width: 79.68%;
  background-color: #B15784;
}
.flow .learning_item03 span {
  position: relative;
  padding: 5px 10px;
  background-color: #fff;
  color: #B15784;
}
.flow .learning_flex02 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 60.4%;
  margin-top: 30px;
  margin-left: 20px;
  position: relative;
}
.flow .learning_item04 {
  background-color: #CA81A5;
  color: #fff;
  padding: 16px 20px;
  width: 60.58%;
  border-right: solid 1px #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}
.flow .learning_item04 span {
  color: #FEF85B;
}
.flow .learning_item05 {
  background-color: #CA81A5;
  color: #fff;
  padding: 16px 20px;
  width: 39.42%;
}
.flow .learning_item05 span {
  color: #FEF85B;
  line-height: 114.286%;
  font-size: 14px;
  display: block;
}
.flow .learning_item06 {
  background-color: #807C9F;
  padding: 11px 20px;
  color: #fff;
  width: 40.08%;
  border-right: solid 1px #fff;
}
.flow .learning_item07 {
  background-color: #807C9F;
  padding: 11px 20px;
  color: #fff;
  width: 59.92%;
}
.flow .learning_item08 {
  margin-top: 16px;
  margin-left: 20px;
  border: 2px solid #807C9F;
  background: #CCCFE2;
  padding: 6px 18px;
  width: 60.4%;
  font-size: 14px;
  font-weight: 700;
  position: relative;
}
.flow .learning_item08::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15px;
  height: 15px;
  background: #CCCFE2;
  border-right: 2px solid #807C9F;
  border-top: 2px solid #807C9F;
  -webkit-transform: translate(-50%, -55%) rotate(-45deg);
          transform: translate(-50%, -55%) rotate(-45deg);
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.flow .learning_item09 {
  background-color: #815184;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 20px;
  margin-top: 30px;
  margin-left: 20px;
  width: 60.4%;
  position: relative;
}
.flow .learning_flex03 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  margin: 0 auto;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}
.flow .learning_item10 {
  border-radius: 10px;
  border: 2px solid #B15784;
  color: #B15784;
  background: #E7D4D9;
  padding: 10px 15px 15px 15px;
  width: calc(50% - 40px);
  font-size: 15px;
  text-align: center;
}
.flow .learning_item11 {
  border-radius: 10px;
  border: 2px solid #5B7AA3;
  color: #5B7AA3;
  background: #D3E6E8;
  padding: 10px 15px 15px 15px;
  width: calc(50% - 40px);
  font-size: 15px;
  text-align: center;
}
.flow .learning_flex04 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: end;
  -webkit-justify-content: end;
      -ms-flex-pack: end;
          justify-content: end;
}
.flow .learning_item12 {
  color: #fff;
  background-color: #909198;
  padding: 11px 20px;
  border-right: solid 1px #fff;
  font-size: 15px;
  width: 25.95%;
  position: relative;
}
.flow .learning_item13 {
  color: #fff;
  background-color: #909198;
  padding: 11px 20px;
  font-size: 15px;
  width: calc(36.9% - 20px);
  margin-right: 20px;
  position: relative;
}
.flow .learning_item14 {
  background-color: #007DAD;
  color: #fff;
  margin-left: 20px;
  padding: 11px 20px;
  position: relative;
  width: calc(75% - 20px);
}
.flow .learning_item15 {
  background-color: #676865;
  color: #fff;
  width: 100%;
  margin-left: 20px;
  margin-top: 30px;
  padding: 11px 20px;
  position: relative;
  width: calc(100% - 40px);
}
.flow .learning_item16 {
  border-radius: 10px;
  border: 2px solid #A17D35;
  background: #F2F5D5;
  font-size: 15px;
  color: #A07A31;
  margin: 30px auto 0;
  position: relative;
  padding: 10px 15px 12px;
  width: calc(50% - 40px);
  text-align: center;
}
.flow .learning_bottom {
  margin-top: 10px;
}
.flow .learning_bottom a {
  text-decoration: underline;
  color: #3B5CA9;
}
.flow.information-design .learning-steps {
  margin-bottom: 0;
}
.flow.information-design .learning_tit {
  background-color: #006697;
}
.flow.information-design .learning_flex02 {
  width: 100%;
  margin-left: 0;
}
.flow.information-design .learning_item04 {
  width: calc(25% - 20px);
  background-color: #007DAD;
  margin-left: 20px;
}
.flow.information-design .learning_item05 {
  width: calc(37.5% - 20px);
  background-color: #007DAD;
}
.flow.information-design .learning_flex04 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 30px 0 0 auto;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.flow .learning_item05-2 {
  width: calc(37.5% - 20px);
}
.flow .learning_flex04-l {
  width: calc(11.75% - 22px);
}
.flow .learning_flex04-c {
  width: 63.25%;
}
.flow .learning_flex04-r {
  width: calc(25% - 22px);
  background: #007D87;
  color: #fff;
  padding: 18px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}
.flow .learning_flex04-r span {
  font-size: 18px;
  font-weight: 700;
}
.flow .learning_item17 {
  position: relative;
  padding: 11px 20px;
  color: #fff;
  background-color: #216499;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  line-height: normal;
}
.flow .learning_item17 p:first-child {
  margin-right: 5px;
}
.flow .learning_item18 {
  position: relative;
  text-align: center;
  width: 60.5%;
  margin-top: 10px;
}
.flow .learning_item18 span {
  position: relative;
  padding: 5px 10px;
  background-color: #fff;
  color: #216499;
}
.flow .learning_item18::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 100%;
  background-color: #216499;
}
.flow .learning_item19 {
  position: relative;
  text-align: center;
  width: 39.5%;
  margin: 0 0 0 auto;
}
.flow .learning_item19 span {
  position: relative;
  padding: 5px 10px;
  background-color: #fff;
  color: #216499;
}
.flow .learning_item19::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 100%;
  background-color: #216499;
}
.flow .learning_item20 {
  position: relative;
  margin-top: 30px;
  padding: 11px 20px;
  color: #fff;
  background-color: #317A58;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  line-height: normal;
}
.flow .learning_item20 p:first-child {
  margin-right: 5px;
}
.flow .learning_item21 {
  position: relative;
  text-align: center;
  margin-top: 10px;
  width: 60.5%;
}
.flow .learning_item21 span {
  position: relative;
  padding: 5px 10px;
  background-color: #fff;
  color: #317A58;
}
.flow .learning_item21::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 100%;
  background-color: #317A58;
}
.flow .learning_item22 {
  position: relative;
  text-align: center;
  width: 39.5%;
  margin: 0 0 0 auto;
}
.flow .learning_item22 span {
  position: relative;
  padding: 5px 10px;
  background-color: #fff;
  color: #317A58;
}
.flow .learning_item22::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 100%;
  background-color: #317A58;
}
.flow .learning_item23 {
  position: relative;
  background-color: #C59A4E;
  padding: 11px 20px;
  color: #fff;
  width: calc(75% - 20px);
  margin-left: 20px;
}
.flow .learning_item24 {
  background-color: #998D51;
  color: #fff;
  padding: 10px 20px;
  width: 25%;
  margin-left: 50%;
}
.flow .learning_item24 span {
  color: #FEF85B;
  line-height: 114.286%;
  font-size: 14px;
  display: block;
}
.flow .learning_item25 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  color: #fff;
  margin: 30px 0;
  position: relative;
}
.flow .learning_item25 p {
  background-color: #909198;
  font-size: 15px;
  font-weight: 500;
  padding: 11px 20px;
  width: 25%;
}
.flow .learning_item25 p:last-child {
  border-left: solid 1px #fff;
  width: calc(25% - 20px);
  margin-right: 20px;
}
.flow.english .page-ttl05.page-ttl05-literature, .flow.japanese .page-ttl05.page-ttl05-literature, .flow.socio .page-ttl05.page-ttl05-literature {
  color: #FF5963;
}
.flow.english .page-ttl07, .flow.japanese .page-ttl07, .flow.socio .page-ttl07 {
  border-color: #FFB5BA;
  color: #FF5963;
}
.flow.english .page-ttl07::before, .flow.japanese .page-ttl07::before, .flow.socio .page-ttl07::before {
  background: #FF5963;
}
.flow.human .page-ttl05.page-ttl05-human, .flow.child .page-ttl05.page-ttl05-human, .flow.food .page-ttl05.page-ttl05-human {
  color: #0EB48E;
}
.flow.human .page-ttl07, .flow.child .page-ttl07, .flow.food .page-ttl07 {
  border-color: #A6DDD0;
  color: #0EB48E;
}
.flow.human .page-ttl07::before, .flow.child .page-ttl07::before, .flow.food .page-ttl07::before {
  background: #0EB48E;
}
.flow.human .flow_year, .flow.child .flow_year, .flow.food .flow_year {
  background: #0EB48E;
}
.flow.international .page-ttl05.page-ttl05-international {
  color: #B7709F;
}
.flow.international .page-ttl07 {
  border-color: #DDC5D5;
  color: #B7709F;
}
.flow.international .page-ttl07::before {
  background: #B7709F;
}
.flow.information-design .page-ttl05.page-ttl05-information-design {
  color: #669BD1;
}
.flow.information-design .page-ttl07 {
  border-color: #A6C4E2;
  color: #669BD1;
}
.flow.information-design .page-ttl07::before {
  background: #669BD1;
}
.flow .point_course {
  margin: -20px 0 100px;
}
.flow .step_wrap {
  overflow: scroll;
  background: #fff;
  padding: 10px;
}
.flow .step_tit {
  color: #fff;
  background-color: #000;
  font-size: 20px;
  padding: 5px 10px;
  margin-bottom: 20px;
  width: 150%;
}
.flow .step_flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-left: solid 1px #333;
  width: 150%;
}
.flow .step_flex.border-top {
  border-top: solid 1px #333;
}
.flow .step_flex.border-top .size01,
.flow .step_flex.border-top .size02 {
  padding: 0;
}
.flow .step_box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding: 10px 0 0;
}
.flow .step_box02 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-flex: 2;
  -webkit-flex-grow: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
  padding: 10px;
}
.flow .size01 {
  width: 25%;
  border-right: solid 1px #333;
  padding: 0 10px 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flow .size02 {
  width: 50%;
  border-right: solid 1px #333;
  padding: 0 10px 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flow .step_year {
  background-color: #FFB5BA;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}
.flow .step_year span {
  font-size: 20px;
  color: #FF5963;
}
.flow .year_tit {
  font-size: 14px;
}
.flow .step_l {
  width: 100px;
}
.flow .step_l.square {
  border: solid 1px #333;
}
.flow .step_l.square p {
  padding: 5px;
  font-size: 12px;
}
.flow .step_l.square p:first-child {
  background-color: #FFB5BA;
}
.flow .step_r {
  width: calc(100% - 120px);
}
.flow .step_l02 {
  width: calc(100% - 120px);
  padding: 0 10px;
  border-right: solid 1px #ccc;
  border-left: solid 1px #ccc;
  position: relative;
}
.flow .step_l02::before {
  content: "";
  width: 20px;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  left: -21px;
  top: 50%;
}
.flow .step_l02::after {
  content: "";
  width: 20px;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  right: -21px;
  top: 50%;
}
.flow .step_l02 p {
  padding: 5px;
  font-size: 12px;
}
.flow .step_l02 p:first-child {
  background-color: #FFB5BA;
}
.flow .step_r02 {
  width: 100px;
  border: solid 1px #FFB5BA;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.flow .shape01 {
  border-right: solid 1px #ccc;
  padding-right: 10px;
  border-radius: 0 10px 10px 0;
  position: relative;
}
.flow .step_subject {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.flow .step_subject span {
  border: solid 1px #333;
  display: inline-block;
  text-align: center;
  padding: 5px 10px;
  border-radius: 100vmax;
}
.flow .step_subject span.color {
  color: #FF5963;
}
.flow .icon01 {
  color: #96CFA4;
}
.flow .icon02 {
  color: #8CCCF4;
}
.flow .icon03 {
  color: #FDD37B;
}
.flow .li-mt01 {
  margin-top: 10px;
}
.flow .step_table {
  width: 150%;
  border-top: solid 1px #333;
  table-layout: fixed;
  margin-bottom: 10px;
}
.flow .step_table tr {
  border-bottom: solid 1px #ccc;
}
.flow .step_table tr:last-child {
  border-bottom: none;
}
.flow .step_table th {
  color: #FF5963;
  background-color: #FFB5BA;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  width: 2%;
  padding: 5px 0;
  vertical-align: middle;
  line-height: 1;
}
.flow .step_table th.th01 {
  color: #fff;
  background-color: #FF5963;
  border-left: solid 1px #333;
}
.flow .step_table td {
  padding: 5px;
  font-size: 14px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flow .step_table td.td_size01 {
  width: 21%;
  border-right: solid 1px #333;
}
.flow .step_table td.td_size02 {
  width: 48%;
  border-right: solid 1px #333;
}
.flow .step_table td.td_size02-2 {
  width: 50%;
  border-right: solid 1px #333;
}
.flow .step_table td.td_size03 {
  width: 17%;
}
.flow .step_table .td_line {
  border-left: solid 1px #ccc;
  border-right: solid 1px #333;
  width: 6%;
}
.flow .supplement {
  margin-top: 10px;
}
.flow .forums_img {
  margin-bottom: 20px;
}
.flow .flex_learning {
  width: 48.02%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-bottom: 50px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.flow .flex_learning:nth-last-child(-n+2) {
  margin-bottom: 0;
}
.flow .flex_learning_l {
  width: 110px;
  margin-top: 10px;
}
.flow .flex_learning_r {
  width: calc(100% - 120px);
}

/* -------------------pc END------------------------------- */
/* -------------------------------------------------- */
/* tablet向け */
/* --------------------------------------------------- */
@media only screen and (max-width: 1300px) {
  .tab-sp {
    display: block;
  }
  .no_tab-sp {
    display: none;
  }
}
/* -------------------------------------------------- */
/* tablet向け */
/* --------------------------------------------------- */
@media screen and (max-width: 900px) {
  .flow .flex_subject {
    width: 100%;
    max-width: inherit;
    margin-bottom: 30px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .flow .flex_subject:last-of-type {
    margin-bottom: 0;
  }
  .flow .flow_img {
    width: 200px;
  }
  .flow .flow_img img {
    max-width: inherit;
    width: 100%;
    border-radius: 10px;
  }
  .flow .flow_tit {
    font-size: 20px;
    margin-top: 0px;
    width: calc(100% - 220px);
  }
  .flow .flow_year {
    height: 15px;
    line-height: 15px;
    font-size: 12px;
    padding: 0 17px;
  }
  .flow .flow_year span {
    font-size: 12px;
  }
  .flow .step_tit,
  .flow .step_flex,
  .flow .step_table {
    width: 1400px;
  }
  .flow .flex01_l {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
  .flow .flex01_r {
    width: 100%;
  }
  .flow .flex02_l {
    width: 100%;
    text-align: center;
  }
  .flow .flex02_r {
    width: 100%;
    margin-bottom: 10px;
  }
}
/* ---------------------tablet END----------------------------- */
/* -------------------------------------------------- */
/* sp向け */
/* --------------------------------------------------- */
@media screen and (max-width: 750px) {
  .flow {
    margin-bottom: 50px;
  }
  .flow .page-ttl01 {
    margin: 50px 0;
  }
  .flow .flow_text {
    margin-bottom: 40px;
  }
  .flow .flow_text.last {
    margin-bottom: 50px;
  }
  .flow .flex_subject {
    margin-bottom: 20px;
  }
  .flow .flex_subject .flow_img {
    width: 120px;
  }
  .flow .flex_subject .flow_tit {
    width: calc(100% - 140px);
    margin-top: 0px;
    font-size: 15px;
  }
  .flow .step_subject span {
    display: block;
  }
  .flow .flex01 {
    margin-bottom: 35px;
  }
  .flow .flex01.last {
    margin-bottom: 50px;
  }
  .flow .flex01.reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .flow .flex01.reverse .flex02_r {
    margin-bottom: 0;
  }
  .flow .flex01.reverse .flex_subject {
    margin-bottom: 10px;
  }
  .flow .point_course {
    margin: -10px 0 50px;
  }
  .flow .step_tit {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .flow .step_year span {
    font-size: 17px;
    margin-bottom: 5px;
  }
  .flow .year_tit {
    font-size: 12px;
  }
  .flow .step_table th,
  .flow .step_table td {
    font-size: 13px;
  }
  .flow .forums_img {
    margin-bottom: 10px;
  }
  .flow .flex_learning {
    width: 100%;
    margin-bottom: 25px;
  }
  .flow .flex_learning:nth-last-child(-n+2) {
    margin-bottom: 25px;
  }
  .flow .flex_learning:nth-last-child(-n+1) {
    margin-bottom: 0;
  }
  .flow .flex_learning_l {
    width: 90px;
  }
  .flow .flex_learning_r {
    width: calc(100% - 105px);
  }
  .flow .scroll {
    overflow: scroll;
  }
  .flow .learning-steps {
    width: 200%;
    margin-bottom: 50px;
  }
  .flow .top_green {
    padding: 15px;
    margin-bottom: 31px;
  }
  .flow .year {
    font-size: 16px;
    padding: 6px;
  }
  .flow .learning_tit {
    font-size: 16px;
    padding: 8px;
    margin-top: 10px;
  }
  .flow .learning_wrap {
    padding: 20px 0px;
  }
  .flow .learning_item01 {
    padding: 6px 10px;
  }
  .flow .learning_item02,
  .flow .learning_item03 {
    margin-top: 5px;
  }
  .flow .learning_item04 {
    padding: 8px 10px;
    line-height: normal;
  }
  .flow .learning_item05 {
    padding: 8px 10px;
    line-height: normal;
  }
  .flow .learning_flex02 {
    margin-top: 0px;
  }
  .flow .learning_item06,
  .flow .learning_item07 {
    padding: 8px 10px;
    line-height: normal;
  }
  .flow .learning_item08 {
    font-size: 12px;
    padding: 6px 10px;
  }
  .flow .learning_item09 {
    font-size: 13px;
    padding: 6px 10px;
    margin-top: 15px;
  }
  .flow .learning_item10,
  .flow .learning_item11 {
    font-size: 13px;
    padding: 5px 8px 8px 8px;
    line-height: normal;
  }
  .flow .learning_item12,
  .flow .learning_item13 {
    padding: 8px 10px;
    font-size: 13px;
    line-height: normal;
  }
  .flow .learning_item14 {
    padding: 8px 10px;
    line-height: normal;
  }
  .flow .learning_item15 {
    padding: 8px 10px;
    margin-top: 15px;
    line-height: normal;
  }
  .flow .learning_item16 {
    font-size: 13px;
    padding: 8px 10px 10px;
    margin-top: 15px;
    line-height: normal;
  }
  .flow .learning_bottom {
    margin-top: 5px;
  }
  .flow.information-design .learning_item01 {
    padding: 8px 10px;
    line-height: normal;
  }
  .flow.information-design .learning_flex02 {
    margin-top: 0;
  }
  .flow.information-design .learning_item05 {
    padding: 8px 10px;
  }
  .flow.information-design .learning_flex04 {
    margin-top: 15px;
  }
  .flow .learning_flex04-r {
    padding: 10px;
    line-height: normal;
  }
  .flow .learning_flex04-r span {
    font-size: 16px;
    line-height: 1.4;
  }
  .flow .learning_item17 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    padding: 8px 10px;
  }
  .flow .learning_item20 {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-top: 15px;
    padding: 8px 10px;
  }
  .flow .learning_item23 {
    padding: 8px 10px;
    line-height: normal;
  }
  .flow .learning_item24 {
    padding: 8px 10px;
    line-height: normal;
  }
  .flow .learning_item25 {
    margin: 15px 0;
  }
  .flow .learning_item25 p {
    font-size: 13px;
    font-weight: 500;
    padding: 8px 10px;
    line-height: normal;
  }
}
/* -------------------sp END------------------------------- */