@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

/*===========================================================*/
/* カラー設定
/*===========================================================*/
:root{
  --main-color: #181878;
  --sub-color: #ffea2c;
  --contents-bg-color: #addef8;
  --contents-bg-color2: #c0e5f9;
  --text-color: #333333;
  --text-color2: #5c5c5c;
  --text-link:#0e51bb;
  --text-hover:#ff5a01;
}

/*========= レイアウトのためのCSS ===============*/
*{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}

html{
  font-size: 62.5%; /*10px相当（主要ブラウザのデフォルト文字サイズ16pxに対する62.5％）*/
}

body{
    font: 1.4rem/1.5 'Noto Sans JP', 'Lato', 'Helvetica Neue', 'Helvetica', YuGothic, 'ヒラギノ角ゴシック ProN', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', "Arial", 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
    color: var(--text-color);
    background: var(--contents-bg-color2);
    font-feature-settings: "palt";/* 字間(プロポーショナルメトリクス)を指定 */
    -webkit-text-size-adjust: 100%; /*iPhone用Safariで横向きにしたときに自動で文字サイズが大きくなるのを防ぐ*/
}

.none{
    display: none;
}

ul{
    margin:0;
    padding: 0;
    list-style: none;
}

a{
    color: #fff;
    outline: none;
}

a:hover,
a:active{
    text-decoration: none;
}

.note{
    font-size: 1.1rem;
}

/* Logo */
#logo{
    position: fixed;
    right:20px;
    top:20px;
}
#logo img{
    width: 200px;
}

/*===========================================================*/
/* ローディング
/*===========================================================*/
#splash{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    text-align:center;
    color:#fff;
}
.loaded #splash{ /*ローディング完了後に削除する*/
    display: none;
}
#splash-logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*スピナーのアニメーション*/
.spinner{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    text-align: center;
}
.spinner img{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: auto;
}
.spinner .loader {
    position: relative;
    color: #ffffff;
    font-size: 45px;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 0 auto;
    transform: translateZ(0);
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6{
    0%{
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95%{
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59%{
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20%{
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38%{
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100%{
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}
@keyframes load6{
    0%{
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95%{
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59%{
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20%{
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38%{
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100%{
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}
@-webkit-keyframes round{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes round{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/*割れる画面のアニメーション*/
.loader_cover {
    width: 100%;
    height: 50%;
	background-color: #192a4d;
    transition: all .5s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
    transform-origin: center top;
}
/*下の画面*/
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
    transform: scaleY(0);
}


/*========= スクロールする画面ごとのデザイン ===============*/
.box{
    padding: 80px 50px;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.box-area{
    width: 100%;
    height: 100%;
}
.box-area .head,
.box-area .head .title,
.box-area .body,
.box-area img{
    width: 100%;
}
.box-area h2{
    margin-bottom: 20px;
}
.box-area h2 span{
    font-size: 2.0rem;
    font-size: clamp(1.8rem, 4.3vw, 2.5rem);
    display: inline-block;
    position: relative;
    line-height: 0.5em;
    border-bottom: solid 0.5em var(--sub-color);
}
@media screen and (min-width:901px) { /*PC時の設定*/
    .pc{
        display: block;
    }
    .sp{
        display: none;
    }
}
@media screen and (max-width:900px) { /*SP時の設定*/
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    .box{
        padding: 50px 10px;
    }
    .box-area{
        width: 90%;
    }
}

/* box1:表紙１ */
#box1{
    background:url("../images/main-image1.jpg") center bottom / cover no-repeat;
}
#box1 .box-area{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
@media screen and (max-width:900px) { /*SP時の設定*/
    #box1 .box-area{
        justify-content: center;
    }
}
#box1 .box-area img{
    width: 80%;
    max-width: 350px;
}
/* box2:表紙２ */
#box2{
    background:url("../images/main-image2.jpg") center bottom / cover no-repeat;
}
#box2 .box-area{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
#box2 .box-area img{
    width: 70%;
    max-width: 300px;
}

/* box3:ポイント */
#box3{
    background-color: var(--contents-bg-color);
}
#box3 .box-area{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
#box3 .head{
    margin: 0 auto 40px auto;
}
#box3 .head .title{
    max-width: 700px;
}
#box3 .body{
    max-width: 1200px;
    margin: 0 auto;
}
#box3 .body ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
#box3 .body ul li{
    width: calc(50% - 20px);
}
@media screen and (max-width:900px) { /*SP時の設定*/
    #box3 .body ul{
        gap: 10px;
    }
    #box3 .body ul li{
        width: calc(100% - 20px);
    }
}

/* box4:留学支援制度 */
#box4{
    background-color: var(--contents-bg-color2);
}
#box4 .box-area{
    /*max-width: 800px;*/
}
#box4 .head{
    max-width: 600px;
    margin: 0 auto 40px auto;
}
#box4 .head .title{
    margin-bottom: 10px;
}
#box4 .head .fukidashi{
    width: 80%;
    max-width: 500px;
}
#box4 .body{
    max-width: 800px;
    margin: 0 auto 40px auto;
}
#box4 .body p{
    text-align: left;
}
#box4 .body1{
    
}
#box4 .body2{
    
}
#box4 .body3{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
#box4 .body3 img{
    width: calc(50% - 20px);
}
@media screen and (max-width:900px) { /*SP時の設定*/
    #box4 .body2{

    }
    #box4 .body2 img{
        margin: 0 auto;
        width: 80%;
        max-width: 200px;
    }
    #box4 .body3{
        justify-content: center;
    }
    #box4 .body3 img{
        width: 80%;
        max-width: 250px;
    }
    #box4 .body p{
        font-size: 1.2rem;
    }
}

/* box5:キャリアサポート */
#box5{
    background-color: var(--contents-bg-color);
}
#box5 .box-area{
    max-width: 800px;
}
#box5 .head{
    margin: 0 auto 40px auto;
}
#box5 .head .title{
    max-width: 600px;
}
#box5 .body .guide{
    max-width: 700px;
    margin: 30px auto 50px auto;
}
#box5 .body .appeal{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
#box5 .body .appeal .person{
    width: 30%;
    min-width: 150px;
}
#box5 .body .appeal .person img{
    border-radius: 10px;
}
#box5 .body .appeal .person p{
    font-weight: bold;
    font-size: 1.3rem;
}
#box5 .body .appeal .person p .namae{
    font-size: 1.4rem;
}
#box5 .body .appeal .person p .position{
    font-size: 1.0rem;
}
#box5 .body .appeal .text{
    width: calc(70% - 20px);
    text-align: left;
}
@media screen and (max-width:900px) { /*SP時の設定*/
    #box5 .body .appeal .person{
        width: calc(100% - 20px);
        max-width: 250px;
    }
    #box5 .body .appeal .text{
        width: calc(100% - 20px);
        font-size: 1.2rem;
    }
}

/* box6:学費減免制度 */
#box6{
    background-color: var(--contents-bg-color2);
}
#box6 .head{
    margin: 0 auto 40px auto;
}
#box6 .head .title{
    max-width: 700px;
}
#box6 .body{
    max-width: 800px;
    margin: 0 auto;
}
#box6 .body .chapter{
    margin-bottom: 30px;
}
#box6 .body .chapter h3{
    line-height: 0;
    text-align: left;
}
#box6 .body .chapter h3 img{
    width: auto;
    height: 40px;
}
#box6 .body .chapter .contents{
    padding: 10px;
    margin-bottom: 10px;
    background-color: var(--contents-bg-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}
#box6 .body #chapter1 .contents img{
    width: calc(33.333% - 10px);
}
#box6 .body #chapter3 .contents img{
    width: calc(50% - 10px);
}
#box6 .body #chapter4 .contents img{
    width: calc(33.333% - 10px);
}
#box6 .box-area #chapter4 h2 span{
    font-size: 2.5rem;
}
@media screen and (max-width:900px) { /*SP時の設定*/
    #box6 .body .chapter h3 img{
        height: 30px;
    }
    #box6 .body .chapter .contents{
        padding: 20px 10px;
        gap: 20px;
    }
    #box6 .body #chapter1 .contents img,
    #box6 .body #chapter3 .contents img,
    #box6 .body #chapter4 .contents img{
        width: 80%;
    }
}

/* box7:資格講座 */
#box7{
    background-color: var(--contents-bg-color);
}
#box7 .head{
    margin: 0 auto 40px auto;
}
#box7 .head .title{
    max-width: 700px;
}
#box7 .body{
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
#box7 .body img{
    width: calc(50% - 20px);
}
@media screen and (max-width:900px) { /*SP時の設定*/
    #box7 .body img{
        width: calc(100% - 20px);
        margin-bottom: 20px;
    }
}

/* box8: 先輩たち */
#box8{
    background-color: var(--contents-bg-color2);
    background-color: #fff;
}
#box8 .seniors{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
#box8 .seniors li{
    width: calc(33.333% - 10px);
    border: solid 1px #b8b8b8;
}
#box8 .seniors li.title{
    background-color: #062764;
}
#box8 .data{
    max-width: 1000px;
    margin: 50px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
#box8 .data li{
    width: calc(33.333% - 20px);
}
@media screen and (max-width:1200px) {
    #box8 .seniors li{
        width: calc(50% - 10px);
    }
    #box8 .data li{
        width: calc(50% - 15px);
    }
}
@media screen and (max-width:900px) {
    #box8 .seniors li{
        width: calc(100% - 20px);
    }
    #box8 .data li{
        width: 80%;
    }
}

/*========= ページネーション ===============*/
.pagination {
    position:fixed;
    right:20px;
    top: 50%;
    transform: translateY(-50%);
    font-size:1em;
    z-index: 10;
    list-style: none;
}

.pagination a {
    display:block;
    height:20px;
    margin-bottom:5px;
    color:#666;
    position:relative;
    padding:4px;
}

.pagination a.active:after {
    box-shadow:inset 0 0 0 5px;
}

.pagination a .hover-text {
    display: none;
}

.pagination a:after {
    -webkit-transition:box-shadow 0.5s ease;
    transition:box-shadow 0.5s ease;
    width:10px;
    height:10px;
    display: block;
    border:1px solid;
    border-radius:50%;
    content:'';
    position: absolute;
    margin:auto;
    top:0;
    right:3px;
    bottom:0;
}

@media screen and (min-width:901px) { /*PC時の設定*/
    /* copyright */
    small{
        position: fixed;
        left:10px;
        top:30%;
        color: #333;
        letter-spacing: 0.1em;
        line-height: 1;
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }
}
@media screen and (max-width:900px) { /*SP時の設定*/
    #logo{
        right:10px;
        top:10px;
    }
    #logo img{
        width: 150px;
    }
    /* ページネーション */
    .pagination{
        display: none;
    }
    /* copyright */
    #footer{
        text-align: center;
    }
    small{
        color: #333;
        letter-spacing: 0.1em;
        line-height: 1;
    }
}