@charset "UTF-8";

* {
    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
li,
menu,
nav,
section {
    display: block;
}

nav ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input,
select {
    vertical-align: middle;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input,
textarea,
select,
button {
    outline: none;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: none;
}

.icon,
.chevron_bottom,
.chevron_right,
.icon_beginner_demand,
.icon_beginner_income,
.icon_beginner_select,
.icon_button_twitter,
.icon_check,
.icon_check_off,
.icon_check_on,
.icon_clock,
.icon_double_circle,
.icon_payment,
.icon_radio_off,
.icon_radio_on,
.icon_start,
.icon_trial,
.defaultCheckbox .labelText:before,
.defaultRadiobox .labelText:before,
.selectWrap:before,
a.linkChevron:before,
.buttonTwitter i,
#topPage .secFlow i,
#java .section03 .courseBox h2 span:before,
#java .section03 .courseBox .listCheck li:before,
#java .section03 .courseBox .listDoubleCircle li:before,
#beginner .section02 li dl:after {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 0;
    content: "";
    display: inline-block;
    background-image: url("../images/sprite@2x.png");
    background-size: 400px 300px;
}

.chevron_bottom {
    background-position: -380px -215px;
    width: 19px;
    height: 11px;
}

.chevron_right {
    background-position: -234px -239px;
    width: 9px;
    height: 9px;
}

.icon_beginner_demand {
    background-position: 0px 0px;
    width: 200px;
    height: 150px;
}

.icon_beginner_income {
    background-position: -200px 0px;
    width: 200px;
    height: 150px;
}

.icon_beginner_select {
    background-position: 0px -150px;
    width: 200px;
    height: 150px;
}

.icon_button_twitter {
    background-position: -200px -215px;
    width: 34px;
    height: 33px;
}

.icon_check {
    background-position: -322px -215px;
    width: 20px;
    height: 20px;
}

.icon_check_off {
    background-position: -234px -215px;
    width: 24px;
    height: 24px;
}

.icon_check_on {
    background-position: -258px -215px;
    width: 24px;
    height: 24px;
}

.icon_clock {
    background-position: -282px -215px;
    width: 20px;
    height: 20px;
}

.icon_double_circle {
    background-position: -302px -215px;
    width: 20px;
    height: 20px;
}

.icon_payment {
    background-position: -330px -150px;
    width: 65px;
    height: 65px;
}

.icon_radio_off {
    background-position: -342px -215px;
    width: 19px;
    height: 19px;
}

.icon_radio_on {
    background-position: -361px -215px;
    width: 19px;
    height: 19px;
}

.icon_start {
    background-position: -265px -150px;
    width: 65px;
    height: 65px;
}

.icon_trial {
    background-position: -200px -150px;
    width: 65px;
    height: 65px;
}

html,
body {
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    -webkit-font-smoothing: antialiased;
    font-family: "Avenir", "Arial", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, Roboto, "Droid Sans", sans-serif;
    background: #FFFFFF;
    height: 100%;
}

main {
    padding: 65px 0 0 0;
    /*min-width: 300px;*/
    display: block;
}

@media screen and (max-width: 799px) {
    main {
        padding: 50px 0 0 0;
    }
}

a {
    text-decoration: none;
}

.pcNone {
    display: none;
}

@media screen and (max-width: 799px) {
    .pcNone {
        display: block;
    }
}

.effectFade {
    opacity: 0;
    -webkit-transform: translate(0, 90px);
    transform: translate(0, 90px);
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.effectFade.effectScroll {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.effectFadeX {
    opacity: 0;
    -webkit-transform: translate(90px, 0);
    transform: translate(90px, 0);
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

.effectFadeX.effectScroll {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.defaultCheckbox {
    position: relative;
    display: inline-block;
}

.defaultCheckbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    z-index: 2;
    margin: 0 0 0 0;
    cursor: pointer;
    width: auto;
}

.defaultCheckbox .labelText {
    padding: 0 0 0 30px;
    display: block;
    min-height: 19px;
}

.defaultCheckbox .labelText:before {
    position: absolute;
    top: -1px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 2px auto auto 0;
    text-align: center;
    content: "";
    cursor: pointer;
    background-position: -234px -215px;
    width: 24px;
    height: 24px;
}

.defaultCheckbox input[type="checkbox"]:checked+.labelText:before {
    background-position: -258px -215px;
    width: 24px;
    height: 24px;
}

.defaultCheckbox a {
    color: #333333;
    text-decoration: underline;
}

.defaultRadiobox {
    position: relative;
    display: block;
    cursor: pointer;
}

.defaultRadiobox input[type="radio"] {
    position: absolute;
    opacity: 0;
    z-index: 2;
    margin: 0 0 0 0;
    cursor: pointer;
    width: auto;
}

.defaultRadiobox .labelText {
    padding: 10px 10px 10px 40px;
    width: 100%;
    display: block;
    min-height: 19px;
    border: #CCCCCC 1px solid;
    border-radius: 5px;
    background: #FFFFFF;
}

.defaultRadiobox .labelText:before {
    position: absolute;
    top: 13px;
    right: 0;
    bottom: 0;
    left: 10px;
    margin: 2px auto auto 0;
    text-align: center;
    content: "";
    background-position: -342px -215px;
    width: 19px;
    height: 19px;
}

.defaultRadiobox input[type="radio"]:checked+.labelText {
    color: #FFFFFF;
    background: #1B435D;
}

.defaultRadiobox input[type="radio"]:checked+.labelText:before {
    background-position: -361px -215px;
    width: 19px;
    height: 19px;
}

input[type="text"] {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: #CCCCCC 1px solid;
    font-size: 16px;
    padding: 8px 10px 8px 10px;
}

.selectWrap {
    position: relative;
}

.selectWrap:before {
    position: absolute;
    top: 20px;
    right: 10px;
    content: "";
    background-position: -380px -215px;
    width: 19px;
    height: 11px;
    pointer-events: none;
}

select {
    width: 100%;
    height: 50px;
    padding: 8px 40px 8px 10px;
    border-radius: 5px;
    border: #CCCCCC 1px solid;
    background: #FFFFFF;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
}

select::-ms-expand {
    display: none;
}

.btnEntry {
    height: 80px;
    border-radius: 40px;
    width: 480px;
    font-size: 30px;
    line-height: 1;
    padding: 25px 20px 25px 20px;
    display: block;
    color: #FFFFFF;
    background: #F99F48;
    text-align: center;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    margin: 0 auto 0 auto;
    font-weight: bold;
}

.btnEntry:hover {
    background: #F9A859;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.btn_hover:hover {
    opacity: 0.9;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.btnEntry:active {
    background: #FAB26C;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 799px) {
    .btnEntry {
        height: 48px;
        border-radius: 24px;
        width: 280px;
        font-size: 16px;
        padding: 16px 20px 16px 20px;
    }
}

.btnEntryLine {
    height: 60px;
    border-radius: 30px;
    width: 380px;
    margin: 0 auto 0 auto;
    display: block;
    text-align: center;
    font-size: 24px;
    line-height: 1;
    padding: 18px 20px 15px 20px;
    font-weight: bold;
    color: #FFFFFF;
    background: #1DCD00;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

.btnEntryLine:hover {
    background: #33D119;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.btnEntryLine:active {
    background: #4AD733;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

@media screen and (max-width: 799px) {
    .btnEntryLine {
        height: 48px;
        border-radius: 24px;
        width: 280px;
        font-size: 16px;
        padding: 16px 20px 16px 20px;
    }
}

.secTitle {
    font-size: 36px;
    color: #1B435D;
    text-align: center;
    margin: 0 0 50px 0;
}

@media screen and (max-width: 799px) {
    .secTitle {
        font-size: 24px;
        margin: 0 0 30px 0;
    }
}

.pageTitle {
    background: #78BBE6;
    text-align: center;
    color: #FFFFFF;
    font-size: 36px;
    padding: 70px 0 180px 0;
}

.pageTitle+div {
    max-width: 1130px;
    margin: -100px auto 50px auto;
    padding: 0 15px 0 15px;
}

.pageTitle+div .wrap {
    background: #FFFFFF;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    padding: 50px 0 50px 0;
}

@media screen and (max-width: 799px) {
    .pageTitle {
        font-size: 24px;
        padding: 30px 0 100px 0;
    }

    .pageTitle+div {
        max-width: 1130px;
        margin: -70px auto 50px auto;
    }

    .pageTitle+div .wrap {
        padding: 30px 0 30px 0;
    }
}

.secondTitle {
    font-size: 24px;
    margin: 0 0 30px 0;
    padding: 0 0 0 40px;
    position: relative;
}

.secondTitle:before {
    content: "";
    position: absolute;
    right: 0;
    top: 15px;
    left: 0;
    width: 30px;
    height: 5px;
    background: #78BBE6;
}

@media screen and (max-width: 799px) {
    .secondTitle {
        font-size: 20px;
    }

    .secondTitle:before {
        top: 14px;
        height: 3px;
    }
}

.secEntry ul {
    max-width: 930px;
    padding: 0 15px 0 15px;
    margin: 0 auto 50px auto;
}

.secEntry ul p {
    margin: 0 0 10px 0;
}

.secEntry ul p span {
    background: #F99F48;
    font-size: 11px;
    line-height: 1;
    display: inline-block;
    color: #FFFFFF;
    border-radius: 5px;
    padding: 3px 5px 3px 5px;
    margin: 0 0 0 10px;
}

.secEntry ul.listConfirm li {
    border-bottom: #CCCCCC 1px solid;
}

.secEntry ul.listConfirm li p+p {
    font-weight: bold;
    font-size: 20px;
}

.secEntry li {
    margin: 0 0 20px 0;
}

.secEntry .listRadio {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.secEntry .listRadio li {
    width: 50%;
    margin: 0 0 0 0;
    padding: 0 15px 0 0;
}

.secEntry .listRadio li:last-child {
    padding: 0 0 0 15px;
}

.secEntry .listDesiredate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.secEntry .listDesiredate li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 0 0;
}

.secEntry .listDesiredate li span {
    display: block;
    padding: 0 20px 0 5px;
    line-height: 50px;
}

.secEntry .btnEntry {
    height: 60px;
    border-radius: 30px;
    width: 370px;
    font-size: 22px;
    padding: 15px 20px 15px 20px;
}

.secEntry .txtError {
    color: #CC0000;
    margin: 5px 0 0 0;
}

span.smallText {
	background: #F99F48;
    font-size: 11px;
    line-height: 1;
    display: inline-block;
    color: #FFFFFF;
    border-radius: 5px;
    padding: 3px 5px 3px 5px;
    margin: 0 0 0 10px;
}

@media screen and (max-width: 799px) {
    .secEntry ul {
        max-width: none;
        margin: 0 auto 30px auto;
    }

    .secEntry .listRadio {
        width: 100%;
        display: block;
    }

    .secEntry .listRadio li {
        width: 100%;
        margin: 0 0 15px 0;
        padding: 0 0 0 0;
    }

    .secEntry .listRadio li:last-child {
        padding: 0 0 0 0;
    }

    .secEntry .listDesiredate {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .secEntry .listDesiredate li {
        width: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 0 0 15px 0;
    }

    .secEntry .listDesiredate li .selectWrap {
        width: 80%;
    }

    .secEntry .btnEntry {
        height: 48px;
        border-radius: 24px;
        width: 280px;
        font-size: 4.2vw;
        padding: 16px 20px 16px 20px;
    }

    .secEntry .txtError {
        color: #CC0000;
        margin: 5px 0 0 0;
    }
}

.listDefault {
    border-bottom: #CCCCCC 1px solid;
}

.listDefault>li {
    border-top: #CCCCCC 1px solid;
    padding: 15px 0 15px 0;
}

.listDefault dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.listDefault dt {
    width: 30%;
    font-weight: bold;
}

.listDefault dd {
    width: 70%;
}

.listDefault p {
    margin: 0 0 0 0;
}

.listDefault p+p {
    margin-top: 1em;
}

@media screen and (max-width: 799px) {
    .listDefault dl {
        display: block;
    }

    .listDefault dt {
        width: auto;
    }

    .listDefault dd {
        width: auto;
        padding: 0 0 0 1em;
    }
}

a.linkChevron {
    display: inline-block;
    padding: 0 0 0 15px;
    position: relative;
    color: #1B435D;
}

a.linkChevron:before {
    position: absolute;
    top: 7px;
    left: 0;
    content: "";
    background-position: -234px -239px;
    width: 9px;
    height: 9px;
    margin: 0 10px 0 0;
}

.buttonPrimary {
    height: 50px;
    width: 320px;
    padding: 0 20px 0 20px;
    line-height: 50px;
    background: #78BBE6;
    border-radius: 25px;
    color: #FFFFFF;
    display: block;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

.buttonPrimary:hover {
    background: #85c2e8;
}

.buttonPrimary:active {
    background: #85c2e8;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.buttonSecondary {
    height: 50px;
    width: 320px;
    padding: 0 20px 0 20px;
    line-height: 50px;
    background: #1B435D;
    border-radius: 25px;
    color: #FFFFFF;
    display: block;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

.buttonSecondary:hover {
    background: #215171;
}

.buttonSecondary:active {
    background: #215171;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.buttonTwitter {
    height: 50px;
    width: 320px;
    padding: 0 20px 0 20px;
    line-height: 50px;
    background: #00ACEE;
    border-radius: 25px;
    color: #FFFFFF;
    display: block;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    position: relative;
}

.buttonTwitter i {
    background-position: -200px -215px;
    width: 34px;
    height: 33px;
    margin: auto 10px auto 0;
}

.buttonTwitter:hover {
    background: #00b7fd;
}

.buttonTwitter:active {
    background: #00b7fd;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.topImage {
    position: relative;
    height: 385px;
    margin: 0 0 50px 0;
}

.topImage h1 {
    position: absolute;
    font-size: 36px;
    z-index: 3;
    color: #FFFFFF;
    top: 0;
    bottom: 0;
    margin: auto auto auto 80px;
    height: 36px;
    line-height: 36px;
}

.topImage div {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.topImage div:before {
    content: "";
    width: 226px;
    height: 226px;
    position: absolute;
    top: 10%;
    left: 20px;
    background: rgba(27, 67, 93, 0.75);
    z-index: 2;
}

.topImage div:after {
    content: "";
    width: 226px;
    height: 226px;
    position: absolute;
    bottom: 10%;
    left: 140px;
    background: rgba(120, 187, 230, 0.75);
    z-index: 1;
}

.topImage img {
    width: 100%;
    min-width: 1280px;
    min-height: 385px;
    display: block;
}

.bottomLink {
    background: #78BBE6;
}

.bottomLink .wrap {
    width: 100%;
    max-width: 1220px;
    padding: 0 10px 0 10px;
    margin: 0 auto 0 auto;
    display: table;
}

.bottomLink .imageBox {
    width: 40%;
    max-width: 437px;
    display: table-cell;
}

.bottomLink img {
    width: 100%;
    display: block;
}

.bottomLink .textBox {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.bottomLink .textBox p {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.4;
}

.bottomLink .textBox div {
    padding: 50px 0 0 0;
}

.bottomLink .textBox a {
    display: block;
    margin: 0 auto 0 auto;
    height: 40px;
    line-height: 40px;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    width: 250px;
    background: #FFFFFF;
    color: #78BBE6;
    font-weight: bold;
}

.bottomLink .textBox a:hover {
    background: #f0f8fc;
}

.bottomLink .textBox a:active {
    background: #f0f8fc;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 799px) {
    .topImage {
        position: relative;
        height: 150px;
        margin: 0 0 30px 0;
    }

    .topImage h1 {
        font-size: 24px;
        margin: auto auto auto 20px;
        height: 25px;
        line-height: 24px;
    }

    .topImage div:before {
        width: 80px;
        height: 80px;
        top: 15%;
        left: 20px;
    }

    .topImage div:after {
        width: 80px;
        height: 80px;
        bottom: 15%;
        left: 80px;
    }

    .topImage img {
        width: 170%;
        min-width: 0;
        min-height: 150px;
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto auto auto auto;
    }

    .bottomLink {
        overflow: hidden;
    }

    .bottomLink .wrap {
        display: block;
        padding: 0 0 0 0;
        position: relative;
    }

    .bottomLink .imageBox {
        display: block;
        opacity: 0.7;
        position: absolute;
        width: 75%;
    }

    .bottomLink .textBox {
        position: relative;
        z-index: 1;
        text-align: center;
        display: block;
    }

    .bottomLink .textBox p {
        text-align: center;
        padding: 10px 20px 20px 20px;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 20px;
        line-height: 1.4;
    }

    .bottomLink .textBox div {
        padding: 0 0 30px 0;
    }

    .bottomLink .textBox a {
        display: block;
        margin: 0 auto 0 auto;
        height: 40px;
        line-height: 40px;
        -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
        border-radius: 20px;
        width: 250px;
        background: #FFFFFF;
        color: #78BBE6;
        font-weight: bold;
    }
}


/** 旧フッター　
footer {
    background: #1B435D;
    padding: 20px 20px 20px 20px;
}

footer:after {
    content: "";
    display: block;
    clear: both;
}

footer div {
    float: left;
}

footer div img {
    width: 260px;
    height: 20px;
}

footer ul {
    float: right;
}

footer ul li {
    float: left;
    padding: 0 0 0 20px;
    font-size: 14px;
    line-height: 1.4;
}

footer a {
    color: #FFFFFF;
}

@media screen and (max-width: 799px) {
    footer {
        padding: 20px 0 0 0;
    }

    footer div {
        padding: 0 10px 20px 10px;
        float: none;
    }

    footer ul {
        float: none;
    }

    footer ul li {
        float: none;
        padding: 0 0 0 0;
        border-top: #CCCCCC 1px solid;
    }

    footer a {
        color: #FFFFFF;
        display: block;
        padding: 15px 10px 15px 10px;
    }
}**/

#topPage .secHowto {
    padding: 50px 0 0 0;
    overflow-x: hidden;
}

#topPage .secHowto .secTitle {
    margin: 0 0 20px 0;
}

#topPage .secHowto li {
    position: relative;
    padding: 70px 0 0 0;
}
#topPage .secHowto li:last-child {
    padding: 70px 0;
}

#topPage .secHowto li:before {
    display: block;
    content: "";
}

#topPage .secHowto li.howtoBox01:before {
    position: absolute;
    background: #D5EEFF;
    width: 50%;
    height: 180%;
    top: 50%;
    left: 40%;
    z-index: 0;
}

#topPage .secHowto li.howtoBox01 dl {
    margin: 0 auto 0 70px;
}

#topPage .secHowto li.howtoBox01 img {
    position: absolute;
    right: 0;
    top: -290px;
    width: 55%;
    max-width: 689px;
}

#topPage .secHowto li.howtoBox02 dl {
    margin: 0 auto 0 23%;
}

#topPage .secHowto li.howtoBox03 dl {
    margin: 0 auto 0 38%;
}

#topPage .secHowto li.howtoBox04:before {
    position: absolute;
    background: #F4F6FA;
    width: 85%;
    height: 200%;
    top: -30%;
    left: 10%;
    z-index: 0;
}

#topPage .secHowto li.howtoBox04 dl {
    margin: 0 40px 0 auto;
}

#topPage .secHowto li.howtoBox04 img {
    position: absolute;
    max-width: 733px;
    top: 10px;
    width: 70%;
}

#topPage .secHowto li.howtoBox05 dl {
    margin: 0 15% 0 auto;
}

#topPage .secHowto span {
    position: absolute;
    display: block;
    top: -30px;
    left: -30px;
    background: #78BBE6;
    color: #FFFFFF;
    width: 78px;
    height: 78px;
    font-size: 50px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 14px 0 14px 0;
    font-family: Roboto;
}

#topPage .secHowto dl {
    position: relative;
    z-index: 2;
    background: #FFFFFF;
    width: 46%;
    max-width: 590px;
    min-height: 240px;
    padding: 50px 50px 30px 40px;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    -webkit-transform: translate(90px, 0);
    transform: translate(90px, 0);
    -webkit-transition: all 700ms;
    transition: all 700ms;
}

#topPage .secHowto dl.effectScroll {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

#topPage .secHowto dt {
    font-weight: bold;
    font-size: 24px;
    margin: 0 0 20px 0;
}
/*201124追記*/
#topPage .secHowto dd p {
    position: relative;
    padding-left: 20px;
}
#topPage .secHowto dd p:before {
    content: " ";
    position: absolute;
    display: block;
    width: 9px;
    height: 9px;
    left: 0;
    top: 7px;
    background: url(../images/icon_dot.png) no-repeat center top;
    background-size: contain;
}
#topPage .secHowto dd p:not(:last-child){
    margin-bottom: 16px;
}



#topPage .secHowto .imageBox {
    position: absolute;
    width: 100%;
}

#topPage .secVoice {
    padding: 50px 0 100px 0;
}

#topPage .secVoice .wrap {
    max-width: 1230px;
    margin: 0 auto 0 auto;
}

#topPage .secVoice ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

#topPage .secVoice li {
    width: 23.5%;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
#topPage .secVoice li:not(:last-child) {
    margin-right: 2%;
}
#topPage .secVoice li .name {
    text-align: center;
    margin: 20px 0;
    font-size: 20px;
    color: #1b435d;
    font-weight: 700;
}
#topPage .secVoice li .name small{
    font-size: 15px;
}

#topPage .secVoice img {
    width: 100%;
    height: 100px;
    display: block;
    margin: 0 auto 30px auto;
}

#topPage .secVoice img {
    width: 100%;
    height: auto;
}
#topPage .secVoice .txt {
    padding: 0 20px 30px;
    color: #333
}
#topPage .secVoice .wrap .btnVoice {
    margin-bottom: 30px;
}
#topPage .secVoice .img{
  position: relative;
  overflow: hidden;
  height: 185px;
  transition: 1.0s;
  -webkit-transition: 1.0s;
}
#topPage .secVoice .img img {
  position: absolute;
  max-width: 360px;
  height: auto;
  display: block;
  transition: 1.0s;
  -webkit-transition: 1.0s;
  transform: scale(1.0);
  -webkit-transform: scale(1.0);
}
#topPage .secVoice .wrap a:hover img{
  transform: scale(1.1); */
  -webkit-transform: scale(1.1);
}




#topPage .secPrice {
    padding: 50px 0 100px 0;
    background: #F4F6FA;
}

#topPage .secPrice .wrap {
    max-width: 1130px;
    margin: 0 auto 0 auto;
}

#topPage .secPrice ul {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#topPage .secPrice .listCourse {
    margin: 0 0 20px 0;
}
#topPage .secPrice .note {
    margin: 0 0 50px 0;
}

#topPage .secPrice .listCourse li {
    width: calc(33% - 30px);
    margin: 10px 0;
    background: #FFFFFF;
}

#topPage .secPrice .listCourse li.corseStudent {
    border: #78BBE6 4px solid;
}

#topPage .secPrice .listCourse li.corseStudent h2 {
    background: #78BBE6;
}

#topPage .secPrice .listCourse li.corseSociety {
    border: #1B435D 4px solid;
}

#topPage .secPrice .listCourse li.corseSociety h2 {
    background: #1B435D;
}

#topPage .secPrice .listCourse li.corseJob {
    border: #48A9E4 4px solid;
}

#topPage .secPrice .listCourse li.corseJob h2 {
    background: #48A9E4;
}

#topPage .secPrice .listCourse li h2 {
    color: #FFFFFF;
    font-size: 26px;
    text-align: center;
    padding: 10px 0 20px 0;
}

#topPage .secPrice .listCourse li dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 10px 0 10px;
}

#topPage .secPrice .listCourse li dt {
    width: 40%;
    padding: 20px 0 20px 10px;
    font-size: 18px;
    border-bottom: #CCCCCC 1px solid;
}

#topPage .secPrice .listCourse li dd {
    width: 60%;
    padding: 20px 10px 20px 0;
    font-size: 18px;
    font-weight: bold;
    text-align: right;
    border-bottom: #CCCCCC 1px solid;
}

#topPage .secPrice .listCourse li dd+dt,
#topPage .secPrice .listCourse li dd:last-child {
    border-bottom: none;
}

#topPage .secPrice .listCourse li dd span {
    display: block;
    text-decoration: line-through;
    color: #CCCCCC;
}

#topPage .secPrice .listCourse li dd strong {
    display: block;
    color: #F99F48;
    font-size: 26px;
}

#topPage .secPrice .titleCampaign {
    position: relative;
    text-align: center;
    font-size: 36px;
    color: #1B435D;
    margin: 0 0 50px 0;
}

#topPage .secPrice .titleCampaign:before {
    border-top: #1B435D 1px solid;
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}

#topPage .secPrice .titleCampaign span {
    background-color: #F4F6FA;
    display: inline-block;
    padding: 0 0.5em;
    position: relative;
    z-index: 2;
}

#topPage .secPrice .listCampaign {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 0 50px 0;
}

#topPage .secPrice .listCampaign li {
    -webkit-box-flex: 26%;
    -ms-flex: 26%;
    flex: 26%;
    background: #FFFFFF;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    margin: 0 15px 0 15px;
    padding: 30px 20px 30px 20px;
}

#topPage .secPrice .listCampaign h3 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 20px 0;
}

#topPage .secPrice .listCampaign h3 span {
    display: block;
    color: #F99F48;
    padding: 45px 0 0 0;
    position: relative;
}

#topPage .secPrice .listCampaign h3 span:before {
    content: "";
    position: absolute;
    right: 0;
    top: 10px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #CCCCCC transparent transparent transparent;
    border-width: 25px 30px 0 30px;
}

#topPage .secPrice .listCampaign p {
    border-top: #CCCCCC 1px solid;
    padding: 20px 0 0 0;
}


#topPage .secFaq {
    padding: 50px 0 100px 0;
}

#topPage .secFaq ul {
    max-width: 930px;
    margin: 0 auto 60px;
    padding: 0 15px 0;
}

#topPage .secFaq li {
    border-bottom: #CCCCCC 1px solid;
}

#topPage .secFaq li:first-child {
    border-top: #CCCCCC 1px solid;
}

#topPage .secFaq dt {
    padding: 30px 35px 25px 70px;
    position: relative;
    min-height: 60px;
    cursor: pointer;
}

#topPage .secFaq dt:after {
    display: block;
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto 0 auto auto;
}

#topPage .secFaq dt.fapOpen:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#topPage .secFaq dt.fapOpen+dd {
    display: block;
}

#topPage .secFaq dt span {
    position: absolute;
    left: 0;
    top: 15px;
    color: #78BBE6;
    display: inline-block;
    width: 50px;
    height: 50px;
    border: #78BBE6 1px solid;
    border-radius: 25px;
    text-align: center;
    font-size: 24px;
    line-height: 50px;
    margin: 0 20px 0 0;
}

#topPage .secFaq dd {
    display: none;
    padding: 15px 35px 30px 70px;
    position: relative;
    min-height: 60px;
}

#topPage .secFaq dd span {
    position: absolute;
    left: 0;
    top: 0;
    color: #F99F48;
    display: inline-block;
    width: 50px;
    height: 50px;
    border: #F99F48 1px solid;
    border-radius: 25px;
    text-align: center;
    font-size: 24px;
    line-height: 50px;
    margin: 0 20px 0 0;
}

#topPage .secEntry {
    padding: 50px 0 100px 0;
    background: #F4F6FA;
}

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

    #topPage .secHowto {
        padding: 30px 0 0 0;
        overflow-x: hidden;
    }

    #topPage .secHowto .secTitle {
        margin: 0 0 50px 0;
    }

    #topPage .secHowto li {
        position: relative;
        padding: 50px 0 0 0;
    }

    #topPage .secHowto li:before {
        display: block;
        content: "";
    }

    #topPage .secHowto li.howtoBox01 {
        padding: 0 0 38% 0;
    }

    #topPage .secHowto li.howtoBox01:before {
        position: absolute;
        background: #D5EEFF;
        width: 80%;
        height: 180%;
        top: 20%;
        left: 0;
        z-index: 0;
    }

    #topPage .secHowto li.howtoBox01 dl {
        margin: 0 auto 0 50px;
    }

    #topPage .secHowto li.howtoBox01 .imageBox {
        padding: 30px 0 0 0;
    }

    #topPage .secHowto li.howtoBox01 img {
        display: block;
        position: relative;
        margin: 0 0 0 auto;
        right: 0;
        top: 0;
        bottom: 0;
        left: 0;
        width: 65%;
        max-width: 689px;
    }

    #topPage .secHowto li.howtoBox02 dl {
        margin: 0 50px 0 0;
    }

    #topPage .secHowto li.howtoBox03 dl {
        margin: 0 auto 0 50px;
    }

    #topPage .secHowto li.howtoBox04 {
        padding: 0 0 0 0;
    }

    #topPage .secHowto li.howtoBox04:before {
        position: absolute;
        background: #F4F6FA;
        width: 90%;
        height: 120%;
        top: 10%;
        left: 10%;
        z-index: -1;
    }

    #topPage .secHowto li.howtoBox04 dl {
        margin: 0 50px 0 auto;
    }

    #topPage .secHowto li.howtoBox04 .imageBox {
        position: relative;
        padding: 15px 0 0 0;
    }

    #topPage .secHowto li.howtoBox04 img {
        position: relative;
        max-width: auto;
        display: block;
        top: 0;
        width: 70%;
    }

    #topPage .secHowto li.howtoBox05 dl {
        margin: 0 auto 0 50px;
    }

    #topPage .secHowto li:nth-child(even) span {
        top: -30px;
        left: auto;
        right: -30px;
    }

    #topPage .secHowto li:nth-child(even) dl {
        padding: 20px 40px 20px 20px;
    }

    #topPage .secHowto span {
        position: absolute;
        display: block;
        top: -30px;
        left: -30px;
        background: #78BBE6;
        color: #FFFFFF;
        width: 60px;
        height: 60px;
        font-size: 40px;
        font-weight: bold;
        line-height: 1;
        text-align: center;
        padding: 12px 0 12px 0;
    }

    #topPage .secHowto dl {
        position: relative;
        z-index: 2;
        background: #FFFFFF;
        width: auto;
        max-width: none;
        min-height: 100px;
        padding: 40px 15px 20px 15px;
    }

    #topPage .secHowto dt {
        font-weight: bold;
        font-size: 18px;
        margin: 0 0 20px 0;
    }

    #topPage .secHowto dd {
        font-size: 14px;
    }

    #topPage .secHowto .imageBox {
        position: absolute;
        width: 100%;
    }

    #topPage .secVoice {
        padding: 30px 0 60px 0;
    }

    #topPage .secVoice .wrap {
        max-width: none;
        padding: 0 15px;
    }

    #topPage .secVoice ul {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 40px;
    }

    #topPage .secVoice li {
        width: 49%;
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none;
        margin-bottom: 15px;
    }
    #topPage .secVoice li:nth-child(odd) {
        margin-right: 2% !important;
    }
    #topPage .secVoice li:not(:last-child) {
    margin-right: inherit;
}
    #topPage .secVoice li .name {
    text-align: center;
    margin-bottom: 20px;
    font-size: 5vw;
    color: #1b435d;
    font-weight: 700;
}
    #topPage .secVoice li .name small{
        font-size: 4vw;
    }

    #topPage .secVoice p {
        font-size: 14px;
    }


    #topPage .secVoice img {
    width: 100%;
    height: 100px;
    display: block;
    margin: 0 auto 20px;
}
    #topPage .secVoice .txt {
    padding: 0 15px 25px;
    color: #333
}

    #topPage .secVoice .wrap .btnVoice {
        margin-bottom: 20px;
    }
    #topPage .secVoice .img{
      position: relative;
      overflow: hidden;
      height: initial;
      transition: 1.0s;
      -webkit-transition: 1.0s;
    }
    #topPage .secVoice .img img {
      position: initial;
      max-width: initial;
      height: initial;
      display: initial;
      transition: 1.0s;
      -webkit-transition: 1.0s;
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
      margin: initial;
    }
    #topPage .secVoice .wrap a:hover img{
      transform: scale(1.1); */
      -webkit-transform: scale(1.1);
    }






    #topPage .secPrice {
        padding: 30px 0 60px 0;
    }
    #topPage .secPrice .wrap {
        max-width: none;
    }

    #topPage .secPrice ul {
        display: block;
    }

    #topPage .secPrice .listCourse {
        margin: 0 0 20px 0;
    }

    #topPage .secPrice .listCourse li {
        width: calc(100% - 30px);
    	margin: 15px;
    	background: #FFFFFF;
    }
    #topPage .secPrice .note {
       margin: 0 15px 50px; 
    }

    #topPage .secPrice .listCourse li h2 {
        color: #FFFFFF;
        font-size: 24px;
        padding: 5px 0 15px 0;
    }

    #topPage .secPrice .listCourse li dl {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 15px 0 15px;
    }

    #topPage .secPrice .listCourse li dt {
        width: 50%;
        padding: 15px 0 15px 10px;
        font-size: 20px;
        border-bottom: #CCCCCC 1px solid;
    }

    #topPage .secPrice .listCourse li dd {
        width: 50%;
        padding: 15px 10px 15px 0;
        font-size: 20px;
        font-weight: bold;
        text-align: right;
        border-bottom: #CCCCCC 1px solid;
    }

    #topPage .secPrice .listCourse li dd+dt,
    #topPage .secPrice .listCourse li dd:last-child {
        border-bottom: none;
    }

    #topPage .secPrice .listCourse li dd span {
        display: block;
        text-decoration: line-through;
        color: #CCCCCC;
    }

    #topPage .secPrice .listCourse li dd strong {
        display: block;
        color: #F99F48;
        font-size: 24px;
    }

    #topPage .secPrice .titleCampaign {
        font-size: 20px;
    }

    #topPage .secPrice .listCampaign {
        display: block;
        margin: 0 0 30px 0;
    }

    #topPage .secPrice .listCampaign li {
        margin: 0 15px 15px 15px;
    }

    #topPage .secPrice .listCampaign h3 {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin: 0 0 20px 0;
    }

    #topPage .secPrice .listCampaign h3 span {
        display: block;
        color: #F99F48;
        padding: 45px 0 0 0;
        position: relative;
    }

    #topPage .secPrice .listCampaign h3 span:before {
        content: "";
        position: absolute;
        right: 0;
        top: 10px;
        left: 0;
        width: 0px;
        height: 0px;
        margin: auto;
        border-style: solid;
        border-color: #CCCCCC transparent transparent transparent;
        border-width: 25px 30px 0 30px;
    }

    #topPage .secPrice .listCampaign p {
        border-top: #CCCCCC 1px solid;
        padding: 20px 0 0 0;
    }

    #topPage .secFaq {
        padding: 30px 0 30px 0;
    }

    #topPage .secEntry {
        padding: 30px 0 30px 0;
        background: #F4F6FA;
    }
    #topPage .secFaq ul {
    margin: 0 auto 30px;
    }
}

#company section {
    padding: 0 15px 70px 15px;
    max-width: 930px;
    margin: 0 auto 0 auto;
}

@media screen and (max-width: 799px) {
    #company section {
        padding: 0 15px 30px 15px;
    }
}

#contact section {
    padding: 0 15px 70px 15px;
    max-width: 930px;
    margin: 0 auto 0 auto;
}

#contact .secEntry ul {
    padding: 0 0 0 0;
}

@media screen and (max-width: 799px) {
    #contact section {
        padding: 0 15px 30px 15px;
    }
}

#contactComplete section {
    padding: 0 15px 70px 15px;
    max-width: 930px;
    margin: 0 auto 0 auto;
}

#contactComplete .txtBox {
    text-align: center;
    margin: 0 0 100px 0;
}

#contactComplete .txtBox strong {
    display: block;
    color: #1B435D;
    font-size: 24px;
    margin: 0 0 30px 0;
}

#contactComplete .boxMap {
    margin: 0 0 20px 0;
}

#contactComplete .boxMap iframe {
    width: 100%;
    height: 300px;
}

@media screen and (max-width: 799px) {
    #contactComplete section {
        padding: 0 15px 30px 15px;
    }

    #contactComplete .txtBox {
        text-align: center;
        margin: 0 0 30px 0;
    }

    #contactComplete .txtBox strong {
        font-size: 20px;
        margin: 0 0 15px 0;
    }

    #contactComplete .boxMap iframe {
        width: 100%;
        height: 300px;
    }
}

#privacy section {
    padding: 0 15px 70px 15px;
    max-width: 930px;
    margin: 0 auto 0 auto;
}

#privacy ul {
    list-style-type: decimal;
    padding: 0 0 0 1.5em;
}

#privacy ul li {
    display: list-item;
}

#privacy p {
    margin: 0.5em 0 2em 0;
}

#privacy .secHanding .scrollBox {
  width: 100%;
  height: 18em;
  overflow-y: auto;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
  border: #CCCCCC 1px solid; }
  #privacy .secHanding .scrollBox p {
    margin-bottom: 5px; }

#termsofservice section {
    padding: 0 15px 12px 15px;
    max-width: 930px;
    margin: 0 auto 0 auto;
}

#termsofservice section h2 {
    font-size: 23px;
    line-height: 1.4;
    border-bottom: 2px solid #CCC;
    margin-bottom: 20px;
}

#termsofservice section h3 {
    font-size: 19px;
    line-height: 1.3;
    margin-bottom: 10px;
}

#termsofservice section p {
    margin: 0.5em 0 1.2em 0;
}

#termsofservice section ul.item {
    list-style-type: decimal;
    padding: 0 0 0 2em;
}

#termsofservice section ul.detail {
    list-style-type: upper-roman;
    padding: 0 0 0 2em;
}

#termsofservice section ul.item li {
    display: list-item;
    margin: 0.5em 0 1em 0;
}

#termsofservice section ul.detail li {
    display: list-item;
    margin: 0.5em 0 0.5em 0;
}

@media screen and (max-width: 799px) {
    #privacy section {
        padding: 0 15px 30px 15px;
    }
}

#itPass .section01 .area01 h2 {
    font-size: 36px;
    text-align: center;
    color: #1B435D;
    margin: 0 0 50px 0;
}

#itPass .section01 .area01 {
    max-width: 1000px;
    padding: 0 10px 0 10px;
    margin: 0 auto 50px auto;
}

#itPass .section01 .area01 ul {
    margin: 20px 0 0 50px;
}

#itPass .section01 .area01 li {
    padding: 0 0 20px 0;
    font-weight: bold;
}

#itPass .section01 .area01 li span {
    background: #78BBE6;
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    width: 40px;
    margin: 0 10px 0 0;
}

#itPass .section01 .area02 {
    background: #F4F6FA;
    position: relative;
    padding: 90px 10px 50px 10px;
    overflow: hidden;
}

#itPass .section01 .area02:before {
    content: "";
    border-top: 60px solid #FFFFFF;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 1px;
    margin: 0 auto 0 auto;
}

#itPass .section01 .area02 .box01 {
    margin: 0 auto 0 auto;
    max-width: 1200px;
}

#itPass .section01 .area02 .box01 h2 {
    font-size: 36px;
    line-height: 1.4;
    text-align: center;
    color: #1B435D;
    margin: 0 0 20px 0;
}

#itPass .section01 .area02 .box01 h3 {
    font-size: 24px;
    line-height: 1.4;
    text-align: center;
    margin: 0 0 30px 0;
}

#itPass .section01 .area02 .box01 ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -15px 0 -15px;
}

#itPass .section01 .area02 .box01 li {
    width: calc(33.3% - 30px);
    margin: 0 15px 30px 15px;
    background: #FFFFFF;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

#itPass .section01 .area02 .box01 img {
    width: 100%;
    display: block;
}

#itPass .section01 .area02 .box01 p {
    padding: 15px 20px 15px 20px;
}

#itPass .section01 .area02 .box02 {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    background: #FFFFFF;
    padding: 30px 30px 30px 30px;
}

#itPass .section01 .area02 .box02 h3 {
    background: #78BBE6;
    color: #FFFFFF;
    display: inline-block;
    font-size: 30px;
    line-height: 1.4;
    padding: 20px 20px 20px 20px;
    margin: 0 0 30px -30px;
}

#itPass .section01 .area02 .box02 figcaption {
    font-size: 18px;
    line-height: 1.4;
    color: #1B435D;
    font-weight: bold;
    position: absolute;
    top: 0;
}

#itPass .section01 .area02 .box02 img {
    width: 100%;
}

#itPass .section01 .area02 .box02 p {
    font-size: 11px;
    text-align: right;
}

#itPass .section01 .area02 .box02 a {
    color: #333333;
    text-decoration: underline;
}

#itPass .section01 .area02 .box02 .graphList01 {
    padding: 20px 0 0 0;
    margin: 0 0 50px 0;
    position: relative;
}

#itPass .section01 .area02 .box02 .graphList02 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 5px 10px 5px;
}

#itPass .section01 .area02 .box02 .graphList02 li {
    padding: 3.5em 25px 0 25px;
    position: relative;
}

#itPass .section01 .area02 .box02 .graphList02 figcaption {
    width: 100%;
    text-align: center;
    left: 0;
    right: 0;
}

#itPass .section01 .area02 .box02 .graphList02 sup {
    font-size: 11px;
    font-weight: normal;
    line-height: 1.4;
}

#itPass .section02 {
    padding: 50px 0 50px 0;
    position: relative;
}

#itPass .section02 h2 {
    font-size: 36px;
    text-align: center;
    color: #1B435D;
    margin: 0 0 50px 0;
}

#itPass .section02 h3 {
    color: #FFFFFF;
    font-size: 30px;
    line-height: 1;
    padding: 30px 50px 30px 50px;
    display: inline-block;
}

#itPass .section02 dl {
    width: 50%;
    background: #FFFFFF;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    padding: 30px 30px 50px 30px;
}

#itPass .section02 dt {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.4;
    margin: 30px 0 20px 0;
}

#itPass .section02 dd {
    border-bottom: #CCCCCC 1px solid;
    padding: 0 0 30px 0;
}

#itPass .section02 dd:last-child {
    border-bottom: none;
    padding: 0 0 0 0;
}

#itPass .section02 .area01 {
    max-width: 1280px;
    margin: 0 auto 0 auto;
    position: relative;
}

#itPass .section02 .area01 h3 {
    background: #78BBE6;
}

#itPass .section02 .area01 dl {
    border: #78BBE6 10px solid;
    margin: -40px 0 80px 40px;
}

#itPass .section02 .area01 dt {
    color: #78BBE6;
}

#itPass .section02 .area02 {
    max-width: 1280px;
    margin: 0 auto 0 auto;
    text-align: right;
}

#itPass .section02 .area02 h3 {
    background: #1B435D;
}

#itPass .section02 .area02 dl {
    border: #1B435D 10px solid;
    margin: -40px 40px auto auto;
}

#itPass .section02 .area02 dt {
    color: #1B435D;
}

#itPass .section02 .area02 dd {
    text-align: left;
}

#itPass .section02 .area02 ul {
    padding: 0 0 0 1em;
}

#itPass .section02 .area02 li {
    display: list-item;
    padding: 0 0 0.5em 0;
}

#itPass .section02 .area03:before {
    content: "";
    background: #D5EEFF;
    width: 70%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto auto auto;
    z-index: -2;
}

#itPass .section02 .area03 img {
    width: 100%;
}

#itPass .section02 .area03 .image01 {
    position: absolute;
    width: 60%;
    max-width: 1000px;
    top: 350px;
    right: 0;
    z-index: -1;
}

#itPass .section02 .area03 .image02 {
    position: absolute;
    width: 60%;
    max-width: 1000px;
    bottom: 150px;
    z-index: -1;
}

#itPass .section03 {
    padding: 50px 0 50px 0;
    background: #F4F6FA;
}

#itPass .section03 h2 {
    font-size: 36px;
    text-align: center;
    color: #1B435D;
    margin: 0 0 50px 0;
}

#itPass .section03 .wrap {
    max-width: 1220px;
    padding: 0 10px 0 10px;
    margin: 0 auto 0 auto;
    overflow: hidden;
}

#itPass .section03 ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -15px 0 -15px;
}

#itPass .section03 li {
    width: calc(25% - 30px);
    background: #FFFFFF;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    margin: 0 15px 30px 15px;
    padding: 30px 20px 30px 20px;
}

#itPass .section03 img {
    display: block;
    max-width: 128px;
    margin: 0 auto 0 auto;
}

#itPass .section03 p {
    font-weight: bold;
    margin: 20px 0 0 0;
}

#itPass .section04 {
    padding: 50px 0 50px 0;
}

#itPass .section04 h2 {
    font-size: 36px;
    text-align: center;
    color: #1B435D;
    margin: 0 0 50px 0;
}

#itPass .section04 .wrap {
    max-width: 1220px;
    padding: 0 10px 0 10px;
    margin: 0 auto 0 auto;
}

#itPass .section04 p {
    max-width: 980px;
    margin: 0 auto 0 auto;
}

#itPass .section04 .boxMovie {
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 650px;
    margin: 30px auto 0 auto;
}

#itPass .section04 .boxMovie .wrapMovie {
    padding-top: 56.25%;
}

#itPass .section04 iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

@media screen and (max-width: 959px) {
    #itPass .section01 .area02 .box02 figcaption {
        font-size: 16px;
        line-height: 1.4;
    }

    #itPass .section02 dl {
        width: 60%;
    }

    #itPass .section02 .area03 .image01 {
        top: 600px;
    }

    #itPass .section02 .area03 .image02 {
        bottom: 100px;
    }
}

@media screen and (max-width: 799px) {
    #itPass {
        font-size: 14px;
        line-height: 1.4;
    }

    #itPass .section01 h1 {
        font-size: 24px;
        margin: 0 0 30px 0;
    }

    #itPass .section01 .area01 {
        margin: 0 auto 30px auto;
    }

    #itPass .section01 .area01 ul {
        margin: 20px 0 0 0px;
    }

    #itPass .section01 .area01 li {
        padding: 10px 0 10px 50px;
        font-weight: bold;
        position: relative;
        min-height: 50px;
    }

    #itPass .section01 .area01 li span {
        position: absolute;
        left: 0;
    }

    #itPass .section01 .area02 {
        background: #F4F6FA;
        padding: 40px 10px 30px 10px;
    }

    #itPass .section01 .area02:before {
        border-top: 30px solid #FFFFFF;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }

    #itPass .section01 .area02 .box01 {
        margin: 0 auto 0 auto;
    }

    #itPass .section01 .area02 .box01 h2 {
        font-size: 24px;
        line-height: 1.4;
    }

    #itPass .section01 .area02 .box01 h3 {
        font-size: 16px;
        line-height: 1.4;
        margin: 0 0 15px 0;
    }

    #itPass .section01 .area02 .box01 ul {
        display: block;
        margin: 0 0 0 0;
    }

    #itPass .section01 .area02 .box01 li {
        width: 100%;
        margin: 0 0 15px 0;
    }

    #itPass .section01 .area02 .box01 p {
        padding: 10px 10px 10px 10px;
    }

    #itPass .section01 .area02 .box02 {
        padding: 10px 10px 10px 10px;
    }

    #itPass .section01 .area02 .box02 h3 {
        font-size: 16px;
        line-height: 1.4;
        padding: 10px 10px 10px 10px;
        margin: 0 0 15px -10px;
    }

    #itPass .section01 .area02 .box02 figcaption {
        font-size: 14px;
        line-height: 1.4;
    }

    #itPass .section01 .area02 .box02 .graphList01 {
        padding: 20px 0 0 0;
        margin: 0 0 30px 0;
        position: relative;
    }

    #itPass .section01 .area02 .box02 .graphList02 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0 5px 10px 5px;
    }

    #itPass .section01 .area02 .box02 .graphList02 li {
        width: 50%;
        padding: 3em 10px 20px 10px;
        position: relative;
    }

    #itPass .section01 .area02 .box02 .graphList02 figcaption {
        width: 100%;
        text-align: center;
        left: 0;
        right: 0;
    }

    #itPass .section01 .area02 .box02 .graphList02 sup {
        font-size: 11px;
        font-weight: normal;
        line-height: 1.4;
    }

    #itPass .section02 {
        padding: 30px 0 30px 0;
        position: relative;
    }

    #itPass .section02 h1 {
        font-size: 24px;
        line-height: 1.4;
        margin: 0 0 30px 0;
    }

    #itPass .section02 h2 {
        color: #FFFFFF;
        font-size: 16px;
        line-height: 1;
        padding: 10px 10px 10px 10px;
        display: inline-block;
    }

    #itPass .section02 dl {
        width: 100%;
        padding: 10px 10px 10px 10px;
    }

    #itPass .section02 dt {
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        line-height: 1.4;
        margin: 15px 0 20px 0;
    }

    #itPass .section02 dd {
        border-bottom: #CCCCCC 1px solid;
        padding: 0 0 30px 0;
    }

    #itPass .section02 dd:last-child {
        border-bottom: none;
        padding: 0 0 0 0;
    }

    #itPass .section02 .area01 {
        margin: 0 auto 0 auto;
        padding: 0 10px 0 10px;
        position: relative;
    }

    #itPass .section02 .area01 h2 {
        background: #78BBE6;
        margin-left: -10px;
    }

    #itPass .section02 .area01 dl {
        border: #78BBE6 10px solid;
        margin: -20px 0 300px 0;
    }

    #itPass .section02 .area01 dt {
        color: #78BBE6;
    }

    #itPass .section02 .area02 {
        max-width: 1280px;
        margin: 0 auto 0 auto;
        padding: 0 10px 0 10px;
        text-align: right;
    }

    #itPass .section02 .area02 h2 {
        background: #1B435D;
        margin-right: -10px;
    }

    #itPass .section02 .area02 dl {
        border: #1B435D 10px solid;
        margin: -20px 20px auto auto;
    }

    #itPass .section02 .area02 dt {
        color: #1B435D;
    }

    #itPass .section02 .area02 dd {
        text-align: left;
    }

    #itPass .section02 .area02 ul {
        padding: 0 0 0 1em;
    }

    #itPass .section02 .area02 li {
        display: list-item;
        padding: 0 0 0.5em 0;
    }

    #itPass .section02 .area03:before {
        content: "";
        background: #D5EEFF;
        width: 90%;
        height: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto auto auto auto;
        z-index: -2;
    }

    #itPass .section02 .area03 img {
        width: 100%;
    }

    #itPass .section02 .area03 .image01 {
        position: absolute;
        width: 60%;
        top: 40%;
    }

    #itPass .section02 .area03 .image02 {
        position: absolute;
        width: 60%;
        bottom: 43%;
    }

    #itPass .section03 {
        padding: 30px 0 15px 0;
    }

    #itPass .section03 h1 {
        font-size: 24px;
        line-height: 1.4;
        margin: 0 0 30px 0;
    }

    #itPass .section03 ul {
        display: block;
        margin: 0 0 0 0;
    }

    #itPass .section03 li {
        width: 100%;
        margin: 0 0 15px 0;
    }

    #itPass .section03 img {
        display: block;
        max-width: 128px;
        margin: 0 auto 0 auto;
    }

    #itPass .section03 p {
        font-weight: bold;
        margin: 20px 0 0 0;
        text-align: center;
    }

    #itPass .section04 {
        padding: 30px 0 30px 0;
    }

    #itPass .section04 h1 {
        font-size: 24px;
        line-height: 1.4;
        margin: 0 0 30px 0;
    }

    #itPass .section04 .wrap {
        max-width: 1220px;
        padding: 0 10px 0 10px;
        margin: 0 auto 0 auto;
    }

    #itPass .section04 p {
        max-width: 980px;
        margin: 0 auto 0 auto;
    }

    #itPass .section04 .boxMovie {
        margin: 30px auto 0 auto;
        max-width: 80%;
    }
}

#java .section01 {
    margin: 0 0 50px 0;
}

#java .section01 h2 {
    font-size: 36px;
    text-align: center;
    color: #1B435D;
    margin: 0 0 50px 0;
}

#java .section01 .area01 {
    max-width: 1000px;
    padding: 0 10px 0 10px;
    margin: 0 auto 50px auto;
}

#java .section01 .area02 {
    max-width: 1200px;
    background: rgba(120, 187, 230, 0.2);
    margin: 0 auto 0 auto;
    padding: 5px 5px 10px 5px;
}

#java .section01 .area02 h3 {
    font-size: 24px;
    line-height: 1.4;
    padding: 10px 10px 10px 10px;
    color: #1B435D;
    text-align: center;
}

#java .section01 .area02 h4 {
    font-size: 20px;
    line-height: 1.4;
    color: #78BBE6;
    margin: 0 0 10px 0;
}

#java .section01 .area02 .columnSet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#java .section01 .area02 .columnSet>div {
    width: calc(100% - 10px);
    background: #FFFFFF;
    margin: 5px 5px 5px 5px;
}

#java .section01 .area02 .boxProgramming,
#java .section01 .area02 .boxJob,
#java .section01 .area02 .boxAnnualIncome,
#java .section01 .area02 .boxLink {
    background: #FFFFFF;
    width: calc(100%);
    padding: 20px 20px 20px 20px;
}

#java .section01 .area02 .boxProgramming img {
    width: 100%;
    max-width: 549px;
    display: block;
    margin: 0 auto 0 auto;
}

#java .section01 .area02 .boxProgramming figcaption {
    text-align: right;
    font-size: 11px;
    line-height: 1.4;
    margin: 20px 0 0 0;
}

#java .section01 .area02 .boxJob ul {
    margin: 0 0 0 1em;
}

#java .section01 .area02 .boxJob li {
    color: #1B435D;
    display: list-item;
    list-style: square;
    font-weight: bold;
    margin: 0 0 0.5em 0;
}

#java .section01 .area02 .boxAnnualIncome {
    border-top: rgba(120, 187, 230, 0.2) 10px solid;
}

#java .section01 .area02 .boxAnnualIncome p {
    text-align: right;
    font-size: 32px;
    line-height: 1.4;
    font-weight: bold;
    color: #1B435D;
}

#java .section01 .area02 .boxAnnualIncome p span {
    font-size: 63px;
    line-height: 1;
}

#java .section01 .area02 .boxAnnualIncome cite {
    display: block;
    text-align: right;
    font-size: 11px;
    line-height: 1.4;
    margin: 20px 0 0 0;
}

#java .section01 .area02 .boxLink {
    margin: 5px 5px 0 5px;
    width: auto;
}

#java .section01 .area02 .boxLink ul {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#java .section01 .area02 .boxLink li {
    width: 50%;
    padding: 0 10px 0 10px;
}

#java .section01 .area02 .boxLink li:first-child {
    text-align: right;
}

#java .section01 .area02 .boxLink li:first-child a {
    margin: auto 0 auto auto;
}

#java .section02 {
    padding: 50px 0 50px 0;
    margin: 0 0 50px 0;
    background: #F4F6FA;
    position: relative;
}

#java .section02 h2 {
    font-size: 36px;
    text-align: center;
    color: #1B435D;
    margin: 0 0 50px 0;
}

#java .section02 ul {
    margin: 0 auto 0 auto;
    max-width: 1200px;
    padding: 0 40px 0 40px;
}

#java .section02 li {
    position: relative;
    z-index: 3;
}

#java .section02 dl {
    position: relative;
    z-index: 2;
    background: #FFFFFF;
    width: 80%;
    max-width: 850px;
    min-height: 200px;
    padding: 60px 30px 20px 30px;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    margin: 0 0 60px 0;
}

#java .section02 dt {
    font-weight: bold;
    font-size: 20px;
    margin: 0 0 10px 0;
}

#java .section02 img {
    display: block;
    width: 100%;
}

#java .section02 span {
    position: absolute;
    display: block;
    top: -30px;
    left: -30px;
    background: #78BBE6;
    color: #FFFFFF;
    width: 78px;
    height: 78px;
    font-size: 50px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 14px 0 14px 0;
}

#java .section02 .meritBox01:after {
    display: block;
    content: "";
    position: absolute;
    background: #D5EEFF;
    width: 400px;
    height: 400px;
    top: 50%;
    right: 10%;
    z-index: 0;
}

#java .section02 .meritBox04 {
    z-index: 2;
}

#java .section02 .meritBox04:after {
    display: block;
    content: "";
    position: absolute;
    background: #D5EEFF;
    width: 400px;
    height: 400px;
    top: -120%;
    left: 10%;
    z-index: -1;
}

#java .section02 .meritBox02 dl,
#java .section02 .meritBox04 dl {
    margin: auto 0 60px auto;
}

#java .section02 .meritBox02 dl span,
#java .section02 .meritBox04 dl span {
    left: auto;
    right: -30px;
}

#java .section02 .bgImage01 {
    width: 30%;
    position: absolute;
    top: 27%;
    left: 0;
}

#java .section02 .bgImage02 {
    width: 30%;
    position: absolute;
    bottom: 1%;
    right: 0;
}

#java .section03 {
    margin: 0 0 50px 0;
}

#java .section03 h2 {
    font-size: 36px;
    text-align: center;
    color: #1B435D;
    margin: 0 0 50px 0;
}

#java .section03 .wrap {
    max-width: 1220px;
    padding: 0 10px 20px 10px;
    margin: 0 auto 0 auto;
    overflow: hidden;
}

#java .section03 .courseBox {
    background: #FFFFFF;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    max-width: 1200px;
    margin: 0 auto 30px auto;
}

#java .section03 .courseBox h3 {
    font-size: 20px;
    line-height: 1.4;
    color: #1B435D;
    border-bottom: #CCCCCC 1px solid;
    padding: 20px 20px 20px 20px;
}

#java .section03 .courseBox h3 span {
    color: #333333;
    font-size: 16px;
    line-height: 1.4;
    float: right;
    position: relative;
    padding: 0 0 0 30px;
    font-weight: normal;
}

#java .section03 .courseBox h3 span:before {
    display: block;
    content: "";
    position: absolute;
    background-position: -282px -215px;
    width: 20px;
    height: 20px;
    top: 0;
    left: 2px;
}

#java .section03 .courseBox h4 {
    background: rgba(120, 187, 230, 0.2);
    font-size: 20px;
    font-weight: bold;
    padding: 10px 10px 10px 10px;
    line-height: 1;
    color: #1B435D;
    margin: 20px 0 10px 0;
}

#java .section03 .courseBox .detailBox {
    width: 100%;
    padding: 20px 20px 20px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#java .section03 .courseBox .leftImage {
    width: 40%;
}

#java .section03 .courseBox .leftImage img {
    display: block;
    width: 100%;
}

#java .section03 .courseBox .rightText {
    width: 60%;
    padding: 0 0 0 30px;
}

#java .section03 .courseBox .listCheck li {
    position: relative;
    padding: 0 0 0.5em 30px;
}

#java .section03 .courseBox .listCheck li:before {
    display: block;
    content: "";
    position: absolute;
    background-position: -322px -215px;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
}

#java .section03 .courseBox .listDoubleCircle li {
    position: relative;
    padding: 0 0 0.5em 30px;
}

#java .section03 .courseBox .listDoubleCircle li:before {
    display: block;
    content: "";
    position: absolute;
    background-position: -302px -215px;
    width: 20px;
    height: 20px;
    top: 2px;
    left: 0;
}

#java .section03 .courseList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -30px 0 -30px;
}

#java .section03 .courseList li {
    width: calc(33.33% - 30px);
    margin: 0 30px 0 30px;
    text-align: center;
    background: #FFFFFF;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    padding: 30px 30px 20px 30px;
}

#java .section03 .courseList li img {
    max-width: 128px;
}

#java .section03 .courseList li p {
    margin: 10px 0 0 0;
    font-weight: bold;
}

@media screen and (max-width: 799px) {
    #java {
        font-size: 14px;
        line-height: 1.4;
    }

    #java .section01 {
        margin: 0 0 30px 0;
    }

    #java .section01 h1 {
        font-size: 24px;
        margin: 0 0 30px 0;
    }

    #java .section01 .area01 {
        margin: 0 auto 30px auto;
    }

    #java .section01 .area02 h2 {
        font-size: 20px;
    }

    #java .section01 .area02 h3 {
        font-size: 16px;
    }

    #java .section01 .area02 .columnSet {
        display: block;
    }

    #java .section01 .area02 .columnSet>div {
        width: calc(100% - 10px);
        margin: 0 5px 0 5px;
    }

    #java .section01 .area02 .boxProgramming,
    #java .section01 .area02 .boxJob,
    #java .section01 .area02 .boxAnnualIncome,
    #java .section01 .area02 .boxLink {
        padding: 10px 10px 10px 10px;
    }

    #java .section01 .area02 .boxProgramming figcaption {
        margin: 10px 0 0 0;
    }

    #java .section01 .area02 .boxJob {
        border-top: rgba(120, 187, 230, 0.2) 10px solid;
    }

    #java .section01 .area02 .boxAnnualIncome p {
        text-align: center;
        font-size: 24px;
        line-height: 1.4;
    }

    #java .section01 .area02 .boxAnnualIncome p span {
        font-size: 50px;
        line-height: 1;
    }

    #java .section01 .area02 .boxAnnualIncome cite {
        margin: 10px 0 0 0;
    }

    #java .section01 .area02 .boxLink ul {
        display: block;
    }

    #java .section01 .area02 .boxLink li {
        width: 100%;
        margin: 0 0 20px 0;
    }

    #java .section01 .area02 .boxLink li:first-child {
        text-align: center;
    }

    #java .section01 .area02 .boxLink li:first-child a {
        margin: auto auto auto auto;
    }

    #java .section02 {
        padding: 30px 0 0 0;
        margin: 0 0 30px 0;
        background: #F4F6FA;
        position: relative;
    }

    #java .section02 h1 {
        font-size: 24px;
        margin: 0 0 30px 0;
    }

    #java .section02 ul {
        padding: 0 20px 0 20px;
    }

    #java .section02 dl {
        width: 100%;
        min-height: auto;
        padding: 30px 15px 15px 15px;
        margin: 0 0 30px 0;
    }

    #java .section02 dt {
        font-size: 16px;
        margin: 0 0 10px 0;
    }

    #java .section02 span {
        top: -20px;
        left: -15px;
        width: 46px;
        height: 46px;
        font-size: 30px;
        padding: 8px 0 8px 0;
    }

    #java .section02 .meritBox01:after {
        width: 200px;
        height: 200px;
    }

    #java .section02 .meritBox04:after {
        width: 200px;
        height: 200px;
        top: -80%;
        left: -10%;
    }

    #java .section02 .meritBox02 dl,
    #java .section02 .meritBox04 dl {
        margin: auto 0 30px auto;
    }

    #java .section02 .meritBox02 dl span,
    #java .section02 .meritBox04 dl span {
        left: auto;
        right: -15px;
    }

    #java .section02 .imageBox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #java .section02 .bgImage01 {
        position: relative;
        width: 50%;
        top: auto;
        bottom: 0;
        left: 0;
    }

    #java .section02 .bgImage02 {
        position: relative;
        width: 50%;
        bottom: 0;
        right: 0;
    }

    #java .section03 {
        margin: 0 0 30px 0;
    }

    #java .section03 h1 {
        font-size: 24px;
        margin: 0 0 30px 0;
    }

    #java .section03 .courseBox {
        margin: 0 auto 15px auto;
    }

    #java .section03 .courseBox h2 {
        font-size: 20px;
        padding: 10px 10px 10px 10px;
    }

    #java .section03 .courseBox h2 span {
        margin: 5px 0 0 0;
        display: block;
        float: none;
        font-size: 14px;
        line-height: 1.4;
    }

    #java .section03 .courseBox h2 span:before {
        top: 0;
        left: 0;
    }

    #java .section03 .courseBox h3 {
        background: rgba(120, 187, 230, 0.2);
        font-size: 16px;
        font-weight: bold;
        padding: 10px 10px 10px 10px;
        line-height: 1;
        color: #1B435D;
        margin: 10px 0 10px 0;
    }

    #java .section03 .courseBox .detailBox {
        width: 100%;
        padding: 10px 10px 10px 10px;
        display: block;
    }

    #java .section03 .courseBox .leftImage {
        width: 100%;
        margin: 0 0 10px 0;
    }

    #java .section03 .courseBox .rightText {
        width: 100%;
        padding: 0 0 0 0;
    }

    #java .section03 .courseList {
        display: block;
        margin: 0 0 0 0;
    }

    #java .section03 .courseList li {
        width: 100%;
        margin: 0 0 15px 0;
        padding: 15px 15px 15px 15px;
    }

    #java .section03 .courseList li img {
        max-width: 80px;
    }
}



/* --------------------- 共通--------------------- */
.bg_clr_green {
    background-color: #1b435d !important;
}


/* --------------------- KV--------------------- */
/* pc */
#topPage .firstview .sub-section {
    display: flex;
    justify-content: center;
}
#topPage .firstview .img {
    background-image: url(../images/kv_bg.jpg);
    width: 50%;
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
}
#topPage .firstview .item2 {
    order: 2;
}
#topPage .firstview .desc {
    padding: 6rem;
    min-width: 600px;
    text-align: center;
    background-image: url(../images/kv_bg_left.jpg);
    width: 50%;
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
    color: #fff;
}
#topPage .firstview h1{
    font-size: 32px;
    font-weight: 500;
    line-height: 2rem;
}
#topPage .firstview h1 small{
    font-size: 26px;
    font-weight: 500;
    line-height: 4rem;
}
#topPage .firstview h1 strong {
    font-size: 46px;
}
#topPage .firstview h1 span {
    font-weight: 700;
}
#topPage .firstview .points {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    justify-content: center;
    width: 500px;
    margin: 40px auto;
}
#topPage .firstview .points .point{
    width: 32%;
}
#topPage .firstview .points .point img{
    width: 100%;
}
#topPage .firstview .points .point:not(:last-child){
    margin-right: 2%;
}
.btnEntry {
    height: inherit;
    border-radius: 40px;
    width: 480px;
    font-size: 22px;
    line-height: 1;
    display: block;
    color: #FFFFFF;
    background: #F99F48;
    text-align: center;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    margin: 0 auto 0 auto;
    font-weight: bold;
}
.br-pc {
    display: none;
}

@media screen and (max-width: 799px) {
/* sp */
#topPage .firstview .sub-section {
    display: block;
}
#topPage .firstview .img {
    background-image: url(../images/kv_bg.jpg);
    height: 65vw;
    background-position: center;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x:left; 
}
#topPage .firstview .desc {
    min-width: auto;
    width: auto;
    padding: 4vw 15px;
    background-image: url(../images/kv_bg_left.jpg);
    height: 104vw;
    background-position: center;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
#topPage .firstview h1{
    font-size: 6.4vw;
    font-weight: 500;
    line-height: 9vw;
}
#topPage .firstview h1 small{
    font-size: 4.5vw;
    font-weight: 500;
    line-height: 13vw;
}
#topPage .firstview h1 strong {
    font-size: 9.3vw;
}
#topPage .firstview h1 span {
    font-weight: 700;
}
#topPage .firstview .points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 7vw auto;
}
#topPage .firstview .points .point{
    width: 32%;
}
#topPage .firstview .points .point img{
    width: 100%;
}
#topPage .firstview .points .point:not(:last-child){
    margin-right: 2%;
}
.btnEntry {
    height: inherit;
    border-radius: 24px;
    width: 90%;
    font-size: 4.2vw;
    padding: 4vw 0;
}
.br-pc {
    display: inherit;
}

}


/* --------------------- 東京ITカレッジの特徴--------------------- */
/* pc */
#topPage .about {
    padding: 80px 0 100px;
    background-image: url(../images/about_bg.jpg);
    background-size: cover;
}
#topPage .about .desc {
    margin-bottom: 10px;
}
#topPage .about .desc p{
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 40px;
}
#topPage .about .desc p span {
    font-weight: 700;
}
#topPage .about .btn {
    display: flex;
    flex-wrap: wrap;
    width: 1200px;
    margin: 0 auto;
}
#topPage .about .btn .btnAbout {
    height: inherit;
    border-radius: 40px;
    width: 380px;
    font-size: 22px;
    line-height: 1;
    display: block;
    color: #FFFFFF;
    background: #1b435d;
    text-align: center;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    margin: 0 auto 0 auto;
    font-weight: bold;
    padding: 20px 0;
}
#topPage .about .btn .btnAbout span {
    font-size: 14px;
}
#topPage .about .btn div:not(:last-child) {
    margin-right: 30px;
}


@media screen and (max-width: 799px) {
/* sp */
#topPage .about {
    padding: 30px 15px 60px;
    background-image: url(../images/about_bg.jpg);
    background-size: cover;
}
#topPage .about .desc {
    margin-bottom: 10px;
}
#topPage .about .desc p{
    text-align: left;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 25px;
}
#topPage .about .desc p span {
    font-weight: 700;
}
.br-sp {
    display: none;
}
#topPage .about .btn {
    display: inherit;
    flex-wrap: inherit;
    width: 100%;
    margin: 0 auto;
}
#topPage .about .btn .btnAbout {
    height: inherit;
    border-radius: 24px;
    width: 280px;
    font-size: 4.2vw;
    padding: 4vw 0;
}
#topPage .about .btn .btnAbout span {
    font-size: 3.2vw;
}
#topPage .about .btn div:not(:last-child) {
    margin-right: 0;
    margin-bottom: 20px;
}
}


/* --------------------- 就職・転職希望者向けサービス--------------------- */
/* pc */
#topPage .service {
    background-color:#f4f6fa;
    padding: 60px 0 100px; 
}
#topPage .service .service_inner {
    width: 1200px;
    margin: 0 auto;
}
#topPage .service .service_inner .desc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
#topPage .service .service_inner .desc .logo {
    margin-right: 40px;
    width: 400px;
}
#topPage .service .service_inner .desc .txt {
    width: 760px;
}
#topPage .service .service_inner .bnr {
    text-align: center;
    margin-top: 50px;
}

@media screen and (max-width: 799px) {
/* sp */
#topPage .service {
    background-color:#f4f6fa;
    padding: 30px 15px 60px; 
}
#topPage .service .service_inner {
    width: 100%;
    margin: 0 auto;
}
#topPage .service .service_inner .desc {
    display: inherit;
    flex-wrap: inherit;
    align-items: center;
}
#topPage .service .service_inner .desc .logo {
    margin-right: 0;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}
#topPage .service .service_inner .desc .logo img {
    width: 95%;
    height:auto;
}
#topPage .service .service_inner .desc .txt {
    width: 100%;
}
#topPage .service .service_inner .bnr {
    text-align: center;
    margin-top: 30px;
}
#topPage .service .service_inner .bnr img {
    width: 100%;
}

}



/* --------------------- バナーエリア--------------------- */
/* pc */
#topPage .bnrarea {
    background-color:#e5f7fd;
    padding: 80px 0; 
}
#topPage .bnrarea .bnr {
    text-align: center;
}

@media screen and (max-width: 799px) {
/* sp */
#topPage .bnrarea {
    background-color:#e5f7fd;
    padding: 30px 15px; 
}
#topPage .bnrarea .bnr img {
    width: 100%;
}

}


/* --------------------- お問い合わせ--------------------- */
/* pc */
#Contact {
    background-color:#f4f6fa;
    padding:80px 0;
    position:relative;
    overflow:hidden;
}
/*#Contact .bnr {
    text-align: center;
    margin-bottom: 50px;
}*/
#Contact .widthFix {
    width: 1200px;
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
}
#Contact .innerWrap  {
    position:relative;
    z-index:10;
}
#Contact .blockWrap1  {
    background-color:rgba(120,187,230,0.3);
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -ms-flex-wrap : wrap;
    padding:40px;
    color:#1b435d;
}
#Contact .blockWrap1 .block1  {
    width:400px;
    margin-right:50px;
    color: #1b435d;
}
#Contact .blockWrap1 .block2  {
    width:calc(100% - 450px);
    color: #1b435d;
}
#Contact .blockWrap1 .htx1  {
    line-height:1.5;
    padding-bottom:7px;
    font-size:20px;
    border-bottom:1px solid #1b435d;
    margin-bottom:18px;
    font-weight: 700;
}

#Contact .blockWrap1 .tel  {
    line-height:1;
}
#Contact .blockWrap1 .tel a  {
    display:block;
    color:#1b435d;
    font-size:38px;
}
#Contact .blockWrap1 .tel a .num {
    font-size: 51px;
    padding-left: 5px;
    font-family: 'roboto';
    font-weight:500;
    position: relative;
    padding-left: 42px;
}
#Contact .blockWrap1 .tel a .num:before {
    content: " ";
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    left: 0;
    bottom: 10px;
    background: url(../images/icon_tel.png) no-repeat center top;
    background-size: contain;

}
#Contact .blockWrap1 .time  {
    text-align:center;
    font-weight:400;
}

#Contact .blockWrap1 .btnWrap1  {
    display: flex;
    display: -ms-flexbox;
    width:calc(100% + 20px);
}
#Contact .blockWrap1 .btnWrap1 a  {
    width:calc(100% / 2 - 20px);
    min-width:1px;
    margin-right:20px;
    padding:20px;
}
#Contact a.faqBtn{
    height: inherit;
    border-radius: 40px;
    width: 100%;
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    color: #1b435d;
    background: #fff;
    text-align: center;
    margin: 15px auto 0;
    font-weight: bold;
    padding:18px 0 ;
    border: 1px solid #1b435d;
    color: #1b435d;
    text-align:center;
}
#Contact .formBtn {
    background-color: #FFF;
    color: #1b435d !important;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    padding: 90px 0 30px !important;
    text-align: center;
    font-size: 18px;
    position: relative;
}
#Contact .formFile:before {
    content: " ";
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    top: 30px;
    background: url(../images/icon_file.png) no-repeat center top;
    background-size: contain;
    right: 50%;
    left:50%;
    transform: translateX(-50%);
}
#Contact .formMail:before {
    content: " ";
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    top: 30px;
    background: url(../images/icon_mail.png) no-repeat center top;
    background-size: contain;
    right: 50%;
    left:50%;
    transform: translateX(-50%);
}


.hover{
    position: relative;
    display: inline-block;
    border-radius: 40px;
    width: 100%;
    color: #1b435d;
    background: #fff;
    z-index: 10;

}
.hover:before {
    content: "";
    position: absolute;
    display: block;
    background-color: #f5f5f5;
    width: 0;
    top: 0;
    bottom: 0;
    transform-origin: center center;
    transform: scale(0, 1);
    transition: transform .3s;
    z-index: -1;
    border-radius: 40px;
}
/*.faqBtn:hover {
    color: #fff;
    text-decoration: none;
}*/
.hover:hover:before {
    width: 100%;
    transform: scale(1, 1);
}



.hover2{
    position: relative;
    display: inline-block;
    width: 100%;
    z-index: 10;
}
.hover2:after {
    content: "";
    position: absolute;
    display: block;
    background-color: #f5f5f5;
    width: 0;
    top: 0;
    bottom: 0;
    transform-origin: center center;
    transform: scale(0, 1);
    transition: transform .3s;
    z-index: -1;
}
/*.faqBtn:hover {
    color: #fff;
    text-decoration: none;
}*/
.hover2:hover:after {
    width: 100%;
    transform: scale(1, 1);
}




/* // ________SP________ // */
@media screen and (max-width: 799px)  {
    #Contact {
        padding:40px 15px;
        position:relative;
        overflow:hidden;
    }
    /*#Contact .bnr {
        text-align: center;
        margin-bottom: 30px;
    }
    #Contact .bnr img {
        width: 100%;
    }*/
    #Contact .widthFix, .widthFixSP {
        width: 100% !important;
        box-sizing: border-box;
    }
    #Contact .blockWrap1  {
        display: block;
        padding:20px;
    }
    #Contact .blockWrap1 .block1  {
        width:100%;
        margin-right:0;
        margin-bottom:20px;
    }
    #Contact .blockWrap1 .block2  {
        width:100%;
    }
    #Contact .blockWrap1 .htx1  {
        font-size:5vw;
        margin-bottom:16px;
    }
    #Contact .blockWrap1 .tel  {
        text-align:center;
    }
    #Contact .blockWrap1 .tel a  {
        font-size:28px;
    }
    #Contact .blockWrap1 .tel a .num {
        font-size: 10vw;
        padding-left: 10vw;
    }
    #Contact .blockWrap1 .tel a .num:before {
        content: " ";
        position: absolute;
        display: block;
        width: 7vw;
        height: 7vw;
        left: 0;
        bottom: 2vw;
        background: url(../images/icon_tel.png) no-repeat center top;
        background-size: contain;

    }
    #Contact .blockWrap1 .faqBtn  {
        margin-top:12px;
    }

    #Contact .blockWrap1 .btnWrap1  {
        display: inherit;
        width:100%;
    }
    #Contact .blockWrap1 .btnWrap1 a  {
        width:100%;
        margin-right:0;
        padding:10px;
        display: block;
    }
    #Contact .formBtn:first-child {
        margin-bottom: 20px;
    }
}

/* footer banner */
#footer_banner .bnr {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

@media screen and (max-width: 799px){
    #footer_banner .bnr {
        text-align: center;
        margin: 15px 30px;
    }
    #footer_banner .bnr img {
        width: 100%;
    }
}

#scroll-btn {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    background: linear-gradient(0.25turn,#0070D2,#0088FF,#0070D2);
    padding: 6px 0;
    z-index: 9999;
    color: white;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    display:flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
}

#scroll-btn span {
	margin: 0 5px;
}
.download-icon .top-small{
	font-size: 10px;
}

.scroll-span-circle {
    padding: 5px 10px 5px 10px;
    border: 1px solid;
    border-radius: 20px;
    font-size: 15px;
    background-color: #FFF;
    color:#0070D2;
}

.scroll-span-info {
	font-size: 16px;
}

@media screen and (max-width: 799px){
	#scroll-btn {
		flex-wrap:wrap;
		font-size: 12px;
	}
	
	.scroll-span-info {
		font-size: 14px;
	}
}