/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/
/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
  #over_wrap {
    overflow: hidden;
  }
  .main img {
    width: 100%;
  }
  .sec .intro {
    font-size: 40px;
    font-weight: bold;
    margin-top: 25px;
    line-height: 1.6em;
  }
  /* sec1 */
  .sec1 {
    position: relative;
  }
  .sec1::after {
    z-index: -1;
    content: "";
    width: 70%;
    height: 540px;
    margin: 0 2%;
    display: inline-block;
    background: #009CE5;
    transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    position: absolute;
    left: 0;
    margin-left: -30%;
    top: 0;
  }
  .sec1 .wrap {
    padding-top: 90px;
    position: relative;
  }
  .sec1 .wrap::after {
    content: "";
    position: absolute;
    z-index: -2;
    background: url(../img/index_outline_2.png) no-repeat top 130px right 20px, url(../img/index_circle_1.png) no-repeat top 100px right 10px;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
  }
  .sec1 .movie_box {
    margin-top: 50px;
  }
  .sec1 .movie_box.l--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  .sec1 .movie_box.l--grid.l--grid-col3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .sec1 .movie_box.l--grid.l--grid-col3 .text {
    grid-column: span 3;
  }
  .sec1 .movie_box.l--grid.l--grid-col4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .sec1 .movie_box.l--grid.l--grid-col4 .text {
    grid-column: span 4;
  }
  .sec1 .movie_box.l--grid .movie {
    width: 100%;
    float: none;
    box-sizing: border-box;
  }
  .sec1 .movie_box.l--grid .movie iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    box-sizing: border-box;
  }
  .sec1 .movie_box.l--grid .text {
    grid-column: span 2;
    float: none;
    width: 100%;
  }
  .sec1 div.movie {
    float: left;
  }
  .sec1 div.movie.close {
    pointer-events: none;
  }
  .sec1 div.movie.close iframe {
    display: none !important;
  }
  .sec1 div.movie.close:after {
    content: "";
    display: flex;
    justify-content: center;
    align-items: center;
    border: 6px solid #009ce5;
    box-sizing: border-box;
    width: 100%;
    height: 291px;
    background: #F2FAFE url("../img/comingsoon.svg") no-repeat center;
    background-size: 300px auto;
    color: #009CE5;
    font-size: 24px;
    font-weight: bold;
  }
  .sec1 div.movie img {
    border: 6px solid #009CE5;
  }
  .sec1 div.movie iframe {
    border: 6px solid #009CE5;
  }
  .sec1 div.text {
    float: right;
    width: 385px;
    font-weight: bold;
    line-height: 2.2em;
    letter-spacing: 0.2em;
  }
  .sec1 .movie_box.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .sec1 .movie_box.flex .text {
    float: none;
    width: 100%;
    margin: 0 auto 40px;
  }
  .sec1 .movie_box.flex .movie {
    width: calc(50% - 11px);
  }
  .sec1 .movie_box.flex .movie iframe {
    display: block;
    width: 100%;
    height: 291px;
    box-sizing: border-box;
  }
  /* sec2 */
  .sec2 {
    position: relative;
    padding-top: 60px;
  }
  .sec2::after {
    z-index: -999;
    content: "";
    width: 70%;
    height: 660px;
    margin: 0 2%;
    display: inline-block;
    background: #009CE5;
    transform: skewX(30deg);
    -webkit-transform: skewX(30deg);
    position: absolute;
    right: 0;
    margin-right: -30%;
    top: 60px;
  }
  .sec2 h3 {
    text-align: right;
  }
  .sec2 .wrap {
    padding-top: 90px;
    position: relative;
    background: url(../img/index_circle_3.png) no-repeat right 20px top 750px;
  }
  .sec2 .wrap::after {
    content: "";
    position: absolute;
    z-index: -9999;
    background: url(../img/index_workf_2.png) no-repeat top 50px left;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
  }
  .sec2 .wrap::before {
    content: "";
    position: absolute;
    z-index: -2;
    background: url(../img/index_circle_2.png) no-repeat;
    width: 46px;
    height: 66px;
    top: -60px;
    left: -80px;
  }
  .sec2 ul {
    margin-left: -36px;
    margin-top: 20px;
  }
  .sec2 ul li {
    vertical-align: top;
    padding: 20px;
    margin-top: 40px;
    margin-left: 36px;
    background-color: #fff;
    box-sizing: border-box;
    border: 3px solid #009CE5;
    display: inline-block;
    width: 336px;
    position: relative;
  }
  .sec2 ul li::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -5;
    background-color: #E5F5FC;
    right: -12px;
    bottom: -12px;
  }
  .sec2 ul li p {
    font-weight: bold;
    line-height: 1.6em;
  }
  .sec2 ul li p:nth-of-type(1) {
    font-size: 172%;
    color: #009CE5;
    text-align: center;
  }
  .sec2 ul li p:nth-of-type(2) {
    text-align: left;
    margin-top: 15px;
    line-height: 1.8em;
  }
  .sec2 ul li p:nth-of-type(3) {
    text-align: left;
    margin-top: 15px;
    line-height: 1.8em;
  }
  .sec2 ul li p.read {
    font-size: 158%;
    margin-top: 15px;
    text-align: center;
  }
  /* sec3 */
  .sec3 {
    position: relative;
    padding-top: 60px;
    margin-top: 60px;
  }
  .sec3::after {
    z-index: -1;
    content: "";
    width: 70%;
    height: 540px;
    margin: 0 2%;
    display: inline-block;
    background: #009CE5;
    transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    position: absolute;
    left: 0;
    margin-left: -30%;
    top: 0;
  }
  .sec3 .wrap {
    background: url(../img/index_data_2.png) no-repeat top right;
  }
  .sec3 .table_wrap {
    margin-top: 25px;
  }
  .sec3 table {
    width: 100%;
    background-color: #fff;
    font-size: 143%;
    text-align: center;
    border: 1px solid #009CE5;
    border-collapse: collapse;
    font-weight: bold;
  }
  .sec3 table th {
    color: #fff;
    background-color: #66C4EF;
  }
  .sec3 table th,
.sec3 table td {
    border: 1px solid #009CE5;
    padding: 10px 5px;
  }
  .sec3 table td span {
    font-size: 70%;
    display: block;
    letter-spacing: -0.05em;
  }
  .sec3 table tr td:first-child {
    color: #009CE5;
  }
  .sec3 table tr:last-child td {
    background-color: #F2FAFE;
    color: #009CE5;
  }
  .sec4 {
    margin-top: 78px;
  }
  .sec4 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }
  .sec4 ul:after {
    display: none;
  }
  .sec4 ul li {
    width: 340px;
  }
  .sec4 ul li p {
    font-weight: bold;
  }
  .sec4 ul li p.txt1 {
    margin-top: 10px;
    font-size: 12px;
  }
  .sec4 ul li p.txt2 {
    font-size: 18px;
  }
  .sec4 ul li p.txt3 {
    margin-top: 5px;
    font-size: 12px;
  }
  .kiden.sec4 ul li {
    width: 247.5px;
  }
  .kiden.sec4 ul li a img {
    width: 100%;
  }
  .kagaku.sec4 ul li {
    width: 247.5px;
  }
  .kagaku.sec4 ul li a img {
    width: 100%;
  }
  .sec4 p.cap {
    text-align: right;
    font-weight: normal;
    margin-bottom: 10px;
  }
  .sec4 ul.se {
    width: 700px;
    margin: 0 auto;
  }
  .sec4 ul.se li {
    float: left;
    width: 340px;
    margin-left: 10px;
  }
  .sec4 p.cap.se {
    text-align: right;
    font-weight: normal;
    margin-bottom: 10px;
    margin-right: 180px;
  }
  .note {
    margin-top: 60px;
    text-align: right;
    font-size: 12px;
  }
}
/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
  #over_wrap {
    overflow: hidden;
  }
  .main > img {
    width: 100%;
  }
  .sec h3 img {
    width: 60%;
    max-width: 382px;
  }
  .sec .intro {
    font-size: 129%;
    font-weight: bold;
    margin-top: 15px;
    line-height: 1.6em;
  }
  /* sec1 */
  .sec1 {
    position: relative;
  }
  .sec1::after {
    z-index: -1;
    content: "";
    width: 80%;
    height: 340px;
    margin: 0 2%;
    display: inline-block;
    background: #009CE5;
    transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    position: absolute;
    left: 0;
    margin-left: -30%;
    top: 0;
  }
  .sec1 .wrap {
    padding-top: 45px;
    position: relative;
  }
  .sec1 .wrap::after {
    content: "";
    position: absolute;
    z-index: -2;
    background: url(../img/index_outline_2.png) no-repeat top 40px right 10px/30%;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
  }
  .sec1 .movie_box {
    margin-top: 20px;
  }
  .sec1 .movie_box.l--grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
  .sec1 .movie_box.l--grid .movie {
    width: 100%;
    float: none;
    box-sizing: border-box;
    margin-top: 0;
  }
  .sec1 .movie_box.l--grid .movie iframe {
    width: calc(100% - 12px);
    height: auto;
    aspect-ratio: 16/9;
    display: block;
  }
  .sec1 .movie_box.l--grid .text {
    float: none;
    width: 100%;
    margin-top: 0;
  }
  .sec1 div.movie {
    margin-top: 15px;
  }
  .sec1 div.movie.close {
    pointer-events: none;
  }
  .sec1 div.movie.close iframe {
    display: none !important;
  }
  .sec1 div.movie.close:after {
    content: "";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 51vw;
    background: #F2FAFE url("../img/comingsoon.svg") no-repeat center;
    background-size: 150px auto;
    color: #009CE5;
    font-size: 24px;
    font-weight: bold;
    border: 6px solid #009ce5;
    box-sizing: border-box;
  }
  .sec1 div.movie img {
    border: 6px solid #009CE5;
    width: 100%;
  }
  .sec1 div.movie iframe {
    border: 6px solid #009CE5;
    width: 100%;
    height: 51vw;
    box-sizing: border-box;
  }
  .sec1 div.text {
    margin-top: 15px;
    font-weight: bold;
    line-height: 2em;
    letter-spacing: 0.2em;
  }
  /* sec2 */
  .sec2 {
    position: relative;
    padding-top: 40px;
  }
  .sec2::after {
    z-index: -999;
    content: "";
    width: 90%;
    height: 340px;
    margin: 0 2%;
    display: inline-block;
    background: #009CE5;
    transform: skewX(30deg);
    -webkit-transform: skewX(30deg);
    position: absolute;
    right: 0;
    margin-right: -30%;
    top: 40px;
  }
  .sec2 h3 {
    text-align: right;
  }
  .sec2 .wrap {
    padding-top: 45px;
  }
  .sec2 .wrap::after {
    content: "";
    position: absolute;
    z-index: -9999;
    background: url(../img/index_workf_2.png) no-repeat top 80px left 10px/45%;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
  }
  .sec2 ul {
    margin-top: 20px;
    text-align: center;
  }
  .sec2 ul li {
    vertical-align: top;
    padding: 20px 15px;
    margin-top: 20px;
    background-color: #fff;
    box-sizing: border-box;
    border: 3px solid #009CE5;
    display: inline-block;
    position: relative;
    float: left;
  }
  .sec2 ul li:nth-of-type(even) {
    float: right;
  }
  .sec2 ul li::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -5;
    background-color: #E5F5FC;
    right: -12px;
    bottom: -12px;
  }
  .sec2 ul li p {
    font-weight: bold;
    line-height: 1.6em;
  }
  .sec2 ul li p:nth-of-type(1) {
    font-size: 158%;
    color: #009CE5;
  }
  .sec2 ul li p:nth-of-type(2) {
    text-align: left;
    margin-top: 10px;
    line-height: 1.8em;
  }
  .sec2 ul li p:nth-of-type(3) {
    text-align: left;
    margin-top: 10px;
    line-height: 1.8em;
  }
  .sec2 ul li p.read {
    font-size: 144%;
    margin-top: 10px;
    text-align: left;
  }
  /* sec3 */
  .sec3 {
    position: relative;
    padding-top: 40px;
    margin-top: 40px;
  }
  .sec3::after {
    z-index: -1;
    content: "";
    width: 80%;
    height: 340px;
    margin: 0 2%;
    display: inline-block;
    background: #009CE5;
    transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    position: absolute;
    left: 0;
    margin-left: -30%;
    top: 0;
  }
  .sec3 .wrap::after {
    content: "";
    position: absolute;
    z-index: -2;
    /*background:url(../img/index_data_2.png) no-repeat top  right;*/
    background: url(../img/index_data_2.png) no-repeat top 40px right 10px/30%;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
  }
  .sec3 .table_wrap {
    margin-top: 15px;
  }
  .sec3 table {
    width: 100%;
    background-color: #fff;
    font-size: 100%;
    text-align: center;
    border: 1px solid #009CE5;
    border-collapse: collapse;
    font-weight: bold;
  }
  .sec3 table th {
    color: #fff;
    background-color: #66C4EF;
  }
  .sec3 table th,
.sec3 table td {
    border: 1px solid #009CE5;
    padding: 10px;
  }
  .sec3 table td span {
    font-size: 70%;
    display: block;
    letter-spacing: -0.05em;
  }
  .sec3 table tr td:first-child {
    color: #009CE5;
  }
  .sec3 table tr:last-child td {
    background-color: #F2FAFE;
    color: #009CE5;
  }
  .sec4 {
    margin-top: 40px;
  }
  .sec4 ul li {
    width: 49%;
    margin-top: 20px;
  }
  .sec4 ul li:nth-of-type(odd) {
    float: left;
    clear: both;
  }
  .sec4 ul li:nth-of-type(even) {
    float: right;
  }
  .sec4 ul li img {
    width: 100%;
  }
  .sec4 ul li p {
    font-weight: bold;
  }
  .sec4 ul li p.txt1 {
    margin-top: 10px;
    font-size: 12px;
  }
  .sec4 ul li p.txt2 {
    font-size: 18px;
  }
  .sec4 ul li p.txt3 {
    margin-top: 5px;
    font-size: 12px;
  }
  .sec4 p.cap {
    text-align: right;
    font-weight: normal;
  }
}
/*# sourceMappingURL=index2.css.map */