@charset "UTF-8";


/*===============================================
●共通
===============================================*/

#contents{
        position: relative;
        padding: 0;
        z-index: 1;
    }


/*===============================================
●画面の横幅が641px以上(タブレット・PC)
===============================================*/
@media screen and (min-width: 641px) {

/* !背景画像 */
    #top-bg {
        position: fixed;
        width: 100%;
        height: 100vh;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
        background: url(../../images/top.jpg) top center no-repeat;
        background-size: cover;
    }
    
    #top-bg > img {
        width: 100%;
    }
    
    #top-bg-inner {
        height: 100%;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
    }
    
    .top-bg-fix {
        height: 100%;
        background: rgba(255,255,255,0.5);
    }
    
/* !トップ画像 */
    .main_img{
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: auto;
        -webkit-scroll-behavior: smooth;
        scroll-behavior: smooth;
        -webkit-scroll-snap-type: mandatory;
        scroll-snap-type: mandatory;
        -webkit-scroll-snap-points-y: repeat(100%);
        scroll-snap-points-y: repeat(100%);
        z-index: 1;
    }
    
    .main_img > h1 > img {
        position: absolute;
        top: 250px;
        left: 0;
        right: 0;
        margin: auto;
    }
    
    .main_img > a {
        position: absolute;
        width: 45px;
        bottom: 45px;
        left: 0;
        right: 0;
        margin: auto;
    }
    
    .main_img > a > img {
        width: 45px;
    }
      

/* box01 */
    #box01 {
        width:100%;
        margin: 0 auto;
        padding: 80px 0;
        text-align:center;
    }
    
    #box01 > p:nth-of-type(1) {
        margin: 0 auto;
    }
    
    #box01 > p:nth-of-type(1) > img {
        width: 40px;
    }
     
    #box01 > p:nth-of-type(2) {
        margin: 20px auto 0 auto;
        font-size: 40px;
        color: #21548c;
        letter-spacing: 0.1em;
    }
    
    #box01 > p:nth-of-type(3) {
        margin: 15px auto 0 auto;
    }
    
    #box01 > p:nth-of-type(3) > img {
        width: 67px;
    }
    
    #box01 > p:nth-of-type(4) {
        margin: 20px auto 0 auto;
    }
    
    #box01 > p:nth-of-type(4) > img {
        width: 706px;
    }
    
    #box01 > p:nth-of-type(5) {
        margin: 35px auto 0 auto;
    }
    
    #box01 > p:nth-of-type(5) > a > img {
        width: 260px;
    }
    
    
/* box02 */
    #box02 {
        position: relative;
        width:100%;
        height: 450px;
        margin: 0 auto;
        padding: 80px 0 0 0;
        text-align: center;
        background: url(../../images/top_img01.jpg) top center no-repeat;
        background-size: cover;
    }
    
    #box02 > p:nth-of-type(1) {
        font-size: 30px;
        font-weight: bold;
        color: #FFF;
    }
    
    #box02 > p:nth-of-type(2) {
        width: 730px;
        margin: 30px auto 0 auto;
        color: #FFF;
        text-align: left;
        line-height: 240%;
    }
    
    #box02 > div {
        position: absolute;
        width: 240px;
        height: 240px;
        padding: 58px 0 0 0;
        left: 0;
        right: 0;
        bottom: -120px;
        margin: auto;
        background-color: #FFF;
        border-radius: 120px;
        z-index: 2;
    }
    
    #box02 > div > p:nth-of-type(1) {
        margin: 0 auto;
    }
    
    #box02 > div > p:nth-of-type(1) > img {
        width: 66px;
    }
     
    #box02 > div > p:nth-of-type(2) {
        margin: 15px auto 0 auto;
        font-size: 28px;
        color: #21548c;
        letter-spacing: 0.1em;
    }
    
    #box02 > div > p:nth-of-type(3) {
        margin: 10px auto 0 auto;
    }
    
    #box02 > div > p:nth-of-type(3) > img {
        width: 45px;
    }
    
    
/* box03 */
    #box03 {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    
    #box03 > div {
        width: 50%;
        height: 450px;
        margin: 0 auto;
        padding: 140px 0 0 0;
    }
    
    #box03 > div > p:nth-of-type(1) {
        font-size: 30px;
        font-weight: bold;
        color: #FFF;
    }
    
    #box03 > div > p:nth-of-type(2) {
        width: 530px;
        margin: 30px auto 0 auto;
        color: #FFF;
        text-align: left;
        line-height: 240%;
    }
    
    #box03 > div:nth-of-type(1) {
        background-color: rgba(33,84,140,0.9);
    }
    
    #box03 > div:nth-of-type(2) {
        background-color: rgba(69,158,227,0.9);
    }
    
    
/* box04 */
    #box04 {
        position: relative;
        width: 960px;
        margin: 80px auto 0 auto;
        padding: 0 0 220px 0;
        text-align: center;
    }
    
    #box04 > p:nth-of-type(1) {
        margin: 0 auto;
    }
    
    #box04 > p:nth-of-type(1) > img {
        width: 58px;
    }
     
    #box04 > p:nth-of-type(2) {
        margin: 20px auto 0 auto;
        font-size: 40px;
        color: #21548c;
        letter-spacing: 0.1em;
    }
    
    #box04 > p:nth-of-type(3) {
        margin: 15px auto 0 auto;
    }
    
    #box04 > p:nth-of-type(3) > img {
        width: 52px;
    }
    
    #box04 > p:nth-of-type(4) {
        margin: 70px auto 0 auto;
        text-align: left;
        line-height: 240%;
    }
    
    #box04 > p:nth-of-type(5) {
        margin: 35px auto 0 auto;
        text-align: left;
    }
    
    #box04 > p:nth-of-type(5) > a > img {
        width: 260px;
    }
    
    #box04 > p:nth-of-type(6) {
        position: absolute;
        width: 278px;
        top: 80px;
        right: 0;
    }
    
    #box04 > p:nth-of-type(6) > img {
        width: 278px;
    }
    

}

/*===============================================
●画面の横幅が640px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 640px) {

/* !背景画像 */  
    #top-bg {
        position: fixed;
        width: 100%;
        height: 100vh;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
        background: url(../../images/top.jpg) top center no-repeat;
        background-size: cover;
    }
    
    #top-bg > img {
        width: 100%;
    }
    
    #top-bg-inner {
        height: 100%;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
    }
    
    .top-bg-fix {
        height: 100%;
        background: rgba(255,255,255,0.5);
    }
    
/* !トップ画像 */
    .main_img{
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: auto;
        -webkit-scroll-behavior: smooth;
        scroll-behavior: smooth;
        -webkit-scroll-snap-type: mandatory;
        scroll-snap-type: mandatory;
        -webkit-scroll-snap-points-y: repeat(100%);
        scroll-snap-points-y: repeat(100%);
        z-index: 1;
    }
    
    .main_img > img {
        position: absolute;
        width: 267px;
        top: 20%;
        left: 0;
        right: 0;
        margin: auto;
    }
    
    .main_img > a {
        position: absolute;
        width: 45px;
        bottom: 80px;
        left: 0;
        right: 0;
        margin: auto;
    }
    
    .main_img > a > img {
        width: 30px;
    }
    
    
    #contents{
        padding: 0;
    }



/* box01 */
    #box01 {
        width:100%;
        margin: 0 auto;
        padding: 80px 0;
        text-align:center;
    }
    
    #box01 > p:nth-of-type(1) {
        margin: 0 auto;
    }
    
    #box01 > p:nth-of-type(1) > img {
        width: 34px;
    }
     
    #box01 > p:nth-of-type(2) {
        margin: 15px auto 0 auto;
        font-size: 34px;
        color: #21548c;
        letter-spacing: 0.1em;
    }
    
    #box01 > p:nth-of-type(3) {
        margin: 10px auto 0 auto;
    }
    
    #box01 > p:nth-of-type(3) > img {
        width: 55px;
    }
    
    #box01 > p:nth-of-type(4) {
        margin: 10px auto 0 auto;
    }
    
    #box01 > p:nth-of-type(4) > img {
        width: 296px;
    }
    
    #box01 > p:nth-of-type(5) {
        margin: 35px auto 0 auto;
    }
    
    #box01 > p:nth-of-type(5) > a > img {
        width: 240px;
    }
    
    
/* box02 */
    #box02 {
        position: relative;
        width:100%;
        margin: 0 auto;
        padding: 80px 0 130px 0;
        text-align: center;
        background: url(../../images/top_img01_sp.jpg) top center no-repeat;
        background-size: cover;
    }
    
    #box02 > p:nth-of-type(1) {
        font-size: 27px;
        font-weight: bold;
        color: #FFF;
        line-height: 140%;
    }
    
    #box02 > p:nth-of-type(2) {
        width: 80%;
        margin: 30px auto 0 auto;
        color: #FFF;
        text-align: left;
    }
    
    #box02 > div {
        position: absolute;
        width: 195px;
        height: 195px;
        padding: 45px 0 0 0;
        left: 0;
        right: 0;
        bottom: -120px;
        margin: auto;
        background-color: #FFF;
        border-radius: 100px;
        z-index: 2;
    }
    
    #box02 > div > p:nth-of-type(1) {
        margin: 0 auto;
    }
    
    #box02 > div > p:nth-of-type(1) > img {
        width: 53px;
    }
     
    #box02 > div > p:nth-of-type(2) {
        margin: 10px auto 0 auto;
        font-size: 22px;
        color: #21548c;
        letter-spacing: 0.1em;
    }
    
    #box02 > div > p:nth-of-type(3) {
        margin: 5px auto 0 auto;
    }
    
    #box02 > div > p:nth-of-type(3) > img {
        width: 36px;
    }
    
    
/* box03 */
    #box03 {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    
    #box03 > div {
        width: 100%;
        margin: 0 auto;
        padding: 140px 0 75px 0;
    }
    
    #box03 > div > p:nth-of-type(1) {
        font-size: 27px;
        font-weight: bold;
        color: #FFF;
        line-height: 130%;
    }
    
    #box03 > div > p:nth-of-type(2) {
        width: 80%;
        margin: 30px auto 0 auto;
        color: #FFF;
        text-align: left;
    }
    
    #box03 > div:nth-of-type(1) {
        background-color: rgba(33,84,140,0.9);
    }
    
    #box03 > div:nth-of-type(2) {
        padding: 70px 0 75px 0;
        background-color: rgba(69,158,227,0.9);
    }
    
    
/* box04 */
    #box04 {
        width: 100%;
        margin: 80px auto 0 auto;
        padding: 0 0 45px 0;
        text-align: center;
    }
    
    #box04 > p:nth-of-type(1) {
        margin: 0 auto;
    }
    
    #box04 > p:nth-of-type(1) > img {
        width: 50px;
    }
     
    #box04 > p:nth-of-type(2) {
        margin: 15px auto 0 auto;
        font-size: 34px;
        color: #21548c;
        letter-spacing: 0.1em;
    }
    
    #box04 > p:nth-of-type(3) {
        margin: 10px auto 0 auto;
    }
    
    #box04 > p:nth-of-type(3) > img {
        width: 34px;
    }
    
    #box04 > p:nth-of-type(4) {
        width: 80%;
        margin: 10px auto 0 auto;
        text-align: left;
    }
    
    #box04 > p:nth-of-type(5) {
        margin: 35px auto 0 auto;
    }
    
    #box04 > p:nth-of-type(5) > a > img {
        width: 240px;
    }
    
    #box04 > p:nth-of-type(6) {
        margin: 30px auto 0 auto;
    }
    
    #box04 > p:nth-of-type(6) > img {
        width: 200px;
    }
    
}


@media screen and (max-height: 414px) {
    .main_img > a {
        display: none;
    }
}