@charset "UTF-8" ;
/*
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 logo

////////////////////////////////////////////////////////*/
.logo{
    position : relative ;
    display : flex ;
    align-items : center ;
    width : 200px ;
    height : 32px ;
    margin : 0 0 0 24px ;
}
.logo__ symbol{
    margin : 0 8px 0 0 ;
    height : 100% ;
}
.logo__type{
    position : absolute ;
    top : 0 ;
    left : 0 ;
    bottom : 0 ;
    margin : auto 0 ;
    height : 90% ;
}
.logoColor--normal{
    opacity : 0 ;
    transition : .3s ;
}
.logoColor--white{
    opacity : 1 ;
    transition : .3s ;
}
.container{
    overflow : hidden ;
}
/*
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 header

////////////////////////////////////////////////////////*/
#menu{
    display : none ;
}
.header{
    position : fixed ;
    z-index : 100 ;
    top : 0 ;
    left : 0 ;
}
/*bar*/
.header__bar{
    position : fixed ;
    top : 0 ;
    left : 0 ;
    z-index : 10 ;
    display : flex ;
    justify-content : space-between ;
    align-items : center ;
    width : 100% ;
    height : 56px ;
    background : rgba(255,255,255,0) ;
    box-shadow : 0 6px 12px rgba(0,0,0,0);
    transition : .3s ;
}
.header__bar::before{
    content : "" ;
    position : absolute ;
    left : 0 ;
    bottom : 0 ;
    width : 200px ;
    height : 1px ;
    background : #FFF ;
    transition : .3s ;
}
.menuButton{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    width : 56px ;
    height : 56px ;
    cursor : pointer ;
}
.menuButton__inner{
    display : block ;
    position : relative ;
    width : 24px ;
    height : 2px ;
    background : #FFF ;
    transition : .3s ;
}
.menuButton__inner::before,
.menuButton__inner::after{
    content : "" ;
    position : absolute ;
    left : 0 ;
    right : 0 ;
    width : 100% ;
    height : 2px ;
    background : #FFF ;
    transition : .3s ;
}
.menuButton__inner::before{
    top : -8px ;
}
.menuButton__inner::after{
    top : 8px ;
}
#menu:checked ~ .header__bar{
    background : rgba(255,255,255,.9) ;
}
#menu:checked ~ .header__bar .logoColor--normal{
    opacity : 1 ;
}
#menu:checked ~ .header__bar .logoColor--white{
    opacity : 0 ;
}
#menu:checked ~ .header__bar .menuButton__inner{
    transform : rotate(180deg) ;
    background : transparent ;
}
#menu:checked ~ .header__bar .menuButton__inner::before{
    top : 0 ;
    transform : rotate(-45deg) ;
    background : #002A67 ;
}
#menu:checked ~ .header__bar .menuButton__inner::after{
    top : 0 ;
    transform : rotate(45deg) ;
    background : #002A67 ;
}
/*menu*/
.menu{
    position : fixed ;
    top : 0 ;
    right : -100vw ;
    width : 100% ;
    height : 100% ;
    margin : 0 auto ;
    padding : 32px 24px ;
    box-sizing : border-box ;
    transition : .5s ;
}
.menu::before{
    content : "" ;
    position : absolute ;
    z-index : -1 ;
    top : 0 ;
    right : -70% ;
    bottom : 0 ;
    margin : auto 0 ;
    width : 140vw ;
    height : 140vw ;
    transform : rotate(45deg);

    background : #002A67 ;
    box-shadow : 0 0 12px rgba(0,0,0,.5);
}
.menu__wrapper{
    position : fixed ;
    top : 56px  ;
    left : -105% ;
    width : 100% ;
    height : calc( 100% - 56px ) ;
    margin : 0 auto ;
    padding : 64px 40px ;
    box-sizing : border-box ;
    background : rgba(36,36,36,.95) ;
    transition : .6s ;
    box-shadow : 0 0 12px rgba(0,0,0,.5);
}
.menu_item{
    position : relative ;
    display : flex ;
    align-items : center ;
    width : 100% ;
    height : 40px ;
    margin : 0 auto ;
    border-bottom : solid 1px #FFF ;
    box-sizing : border-box ;
    text-decoration : none ;
    color : #FFF ;
}
.menu_item::before{
    content : "" ;
    position : absolute ;
    top : 0 ;
    right : 4px ;
    bottom : 0 ;
    margin : auto 0 ;
    width : 10px ;
    height : 10px ;
    box-sizing : border-box ;
    border-top : solid 2px #FFF ;
    border-right : solid 2px #FFF ;
    transform : rotate(45deg);
}
.header__contactButton{
    position : fixed ;
    z-index : 3 ;
    left : 0 ;
    right : 0 ;
    bottom : -130px ;
    margin : 0 auto ;
    display : flex ;
    justify-content : center ;
    align-items : flex-end ;
    width : 112px ;
    height : 112px ;
    color : #FFF ;
    text-decoration : none ;
    transition : .7s ;
}
.header__contactButton::before{
    content : "" ;
    position : absolute ;
    z-index : -1 ;
    top: 70px ;
    left : -50% ;
    right : -50% ;
    margin : 0 auto ;
    width : 192px ;
    height : 192px ;
    transform : rotate( 45deg ) ;
    background : #002A67 ;
    box-shadow : 0 0 12px rgba(0,0,0,.5);
}
/*.header__contactButton::after{
    content : "" ;
    position : absolute ;
    left : 0 ;
    right : 0 ;
    bottom : 32px ;
    margin : 0 auto ;
    width : 48px ;
    height : 48px ;
    background : #FFF ;
}*/
#menu:checked ~ .menu{
    right : 0 ;
}
#menu:checked ~ .menu .menu__wrapper{
    left : 0 ;
}
#menu:checked ~ .menu .header__contactButton{
    bottom : 20px ;
}
.header__bar--change{
    box-shadow : 0 6px 12px rgba(0,0,0,.1);
    background : rgba(255,255,255,.9) ;
}
.header__bar--change .menuButton__inner,
.header__bar--change .menuButton__inner::before,
.header__bar--change .menuButton__inner::after{
    background : #002A67 ;
}
.header__bar--change .logoColor--normal{
    opacity : 1 ;
}
.header__bar--change .logoColor--white{
    opacity : 0 ;
}
.header__bar--change::before{
    background : transparent ;
}
@media screen and ( min-width : 960px ){
    .menu{
        z-index : 1000 ;
    }
    .menu__wrapper{
        display : flex ;
        position : fixed ;
        align-items : center ;
        justify-content : center ;
        padding :0 ;
        top : 0 ;
        right :0;
        left : 0 ;
        margin : 0 auto ;
        width : calc( 100% - 140px - 160px ) ;
        max-width : 800px ;
        height : 56px ;
        background : transparent ;
        box-shadow : 0 0 0 rgba(0,0,0,0);
    }
    .menu_item{
        display : block ;
        width : 100% ;
        height : 30px ;
        line-height : 30px ;
        margin : 0 10px ;
        border-bottom : none ;
        transition : .4s ;
        padding : 0 ;
        text-align : center ;
    }
    .menu_item::before{
        display : none ;
    }
    .menu_item::after{
        content : "" ;
        position : absolute ;
        left : 0 ;
        right :0 ;
        bottom : 4px ;
        width : 0% ;
        height : 1px ;
        margin : 0 auto ;
        transition : .4s ;
        background : #002A67  ;
    }
    .header__contactButton{
        position : fixed ;
        top : 0 ;
        right : 0 ;
        left : auto ;
        width : 160px;
        height : 56px ;
        line-height : 56px ;
        background : #002A67 ;
    }
    .header__bar--change ~ .menu .menu_item{
        color : #333 ;
    }
    .menuButton{
        display : none ;
    }
    .menu_item:hover::after{
        width : 80% ;
    }
    .header__contactButton::before{
        display : none ;
    }
}
/*
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 mainvisual

////////////////////////////////////////////////////////*/
.mainVisual{
    position : relative ;
    display : flex ;
    justify-content : center ;
    align-items : center ;
    width : 100% ;
    height : 640px ;
    background : url( ../img/main_sp.jpg ) center / cover no-repeat ;
}
.mainVisual::before,
.mainVisual::after{
    content : "" ;
    position : absolute ;
    z-index : 2 ;
    left : 0 ;
    bottom : 0 ;
    width : 0 ;
    height : 0 ;
}
.mainVisual::before{
    border-top : solid  100px transparent ;
    border-left : solid  100px #fff ;
    border-right : solid 100px transparent ;
    border-bottom : solid 100px #fff ;
}
.mainVisual::after{
    border-top : solid  94px transparent ;
    border-left : solid  94px #002A67;
    border-right : solid 94px transparent ;
    border-bottom : solid 94px #002A67 ;
}
.mainVisual__wrapper::before{
    content : "" ;
    position : absolute ;
    z-index : 1 ;
    bottom : 0 ;
    right : 0 ;
    width : 100% ;
    height : 8px ;
    background : #FFF ;
}
.mainVisual__companyName{
    font-size : 48px ;
    font-weight : bold ;
    color : #FFF ;
    margin : 0 ;
    letter-spacing : 10px ;
    font-family : serif ;
}
@media screen and ( min-width : 960px ){
    .mainVisual{
        height : 840px ;
    }
    .mainVisual::before{
        border-top : solid  180px transparent ;
        border-left : solid 180px #fff ;
        border-right : solid 180px transparent ;
        border-bottom : solid 180px #fff ;
    }
    .mainVisual::after{
        border-top : solid  174px transparent ;
        border-left : solid  174px #002A67;
        border-right : solid 174px transparent ;
        border-bottom : solid 174px #002A67 ;
    }
    .mainVisual__companyName{
        font-size : 72px ;
    }
}
/*
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 scroll

////////////////////////////////////////////////////////*/
.scroll{
    display : block ;
    position : absolute ;
    z-index : 3 ;
    left :24px ;
    bottom : calc( 64px + 24px ) ;
    width : 64px ;
    height : 20px ;
    font-size : 12px ;
    color : #FFF ;
    transform-origin : left bottom ;
    transform : rotate( 90deg );
}
.scroll::before{
    content : "" ;
    position : absolute ;
    bottom : 0 ;
    left : 0 ;
    width : 0% ;
    height : 1px ;
    background : transparent ;
    animation : 2s scroll_line ease-out infinite ;
}
@keyframes scroll_line{
    0%  {
     width : 0% ;
     opacity : 0 ;
     background : transparent ;
    }
    10%  {
    opacity : 1 ;
     background : #fff ;
    }
    50%  {
     width : 100% ;
     opacity : 1 ;
    }
    95%  {
     width : 100% ;
     background : #fff ;
    }
    100%{
        opacity : 0 ;
         width : 100% ;
         background : transparent ;
    }
}
/*
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 intro

////////////////////////////////////////////////////////*/
.intro{
    position : relative ;
    z-index : 3 ;
    margin : 0 0 180px 0 ;
    padding : 40px 40px 16px;
    box-sizing : border-box ;
    color : #FFF ;
    background : #000 ;
}
.intro::before{
    content : "" ;
    position : absolute ;
    left : 0 ;
    right : 0 ;
    bottom : -180px ;
    width : 0 ;
    height : 0 ;
    margin : 0 auto ;
    border-top : solid 180px #000 ;
    border-left : solid 50vw #FFF ;
    border-right : solid 50vw #FFF ;
    border-bottom : solid 0 transparent ;
}
.intro__title{
    text-align : center ;
    margin : 0 0 24px 0 ;
}
.intro__text{
    max-width : 600px ;
    margin : 0 auto ;
    line-height : 220% ;
}
@media screen and ( min-width : 960px ){
    .intro{
        margin : 0 ;
        padding : 80px 0 ;
    }
    .intro::before{
        border-top : solid 0 transparent ;
        border-left : solid 0 transparent ;
        border-right : solid 0 transparent ;
    }
}

/*
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 section__title

////////////////////////////////////////////////////////*/

.sectionTitle{
    position : relative ;
    z-index : 1 ;
    width : calc( 100% - 24px * 2 ) ;
    margin : 40px auto ;
    padding : 24px 0 ;
    text-align : center ;
}
.sectionTitle::before{
    content : "" ;
    position : absolute ;
    z-index : -1 ;
    top : -6px ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
    width : 150px ;
    height : 150px ;
    background :  url(../svg/title_bg.svg) center / 100% no-repeat ;
    opacity : .7;
}
.sectionTitle--small{
    display : block ;
    width : 70% ;
    max-width : 400px ;
    margin : 8px auto 0 ;
    padding : 8px 0 0 0 ;
    border-top : solid 1px #002A67;
}
@media screen and ( min-width : 960px ){
    .sectionTitle{
        margin : 100px auto 80px ;
    }
    .sectionTitle::before{
        top : -10px ;
        width : 180px ;
        height : 180px ;
    }
}



/*
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 categoryBlock

////////////////////////////////////////////////////////*/
.categoryBlock{
    position : relative ;
    display : flex ;
    width : 100% ;
    max-width : 600px ;
    margin : 0 auto 40px ;
    padding : 0 ;
}
.categoryBlock:last-child{
    margin : 0 auto ;
}
.categoryBlock__imageBox{
    overflow : hidden ;
    position : absolute ;
    top : 0 ;
    left : 40px ;
    width : 170px ;
    height : 170px ;
    transform-origin : top left ;
    transform : rotate(45deg);
    background : gray ;
}
.categoryBlock__image{
    position : absolute ;
    top : 0 ;
    left : -50% ;
    right : -50% ;
    bottom : 0 ;
    margin : auto ;
    object-fit : cover ;
    width : 142% ;
    height : 142% ;
    transform-origin : center ;
    transform : rotate( -45deg );
}
.categoryBlock__wrapper{
    position : relative ;
    width : calc( 100% - 40px );
    margin : 0 0 0 auto ;
    padding : 56px 0 0 64px ;
    box-sizing : border-box ;
}
.categoryBlock__wrapper::before{
    content : "" ;
    position : absolute ;
    bottom : 0 ;
    left : 0 ;
    width : 1px ;
    height : calc( 100% - 248px ) ;
    background : #002A67;
}
.categoryBlock__title{
    position : relative ;
    bottom : 0 ;
    margin : 0 0 40px 64px ;
    line-height : 160% ;
    text-align : justify ;
}
.categoryBlock__titleText{
    display : flex ;
    align-items : flex-end ;
    height : 64px ;
    margin : 0 0 8px 0 ;
    padding : 0 0 8px 0 ;
    font-size : 18px ;
    border-bottom : solid 1px #002A67;
    box-sizing : border-box ;
}
.categoryBlock__english{
    display : block ;
    width : 100% ;
    text-align : right ;
    color : #002A67;
}
.categoryBlock__desc{
    font-size : 16px ;
    line-height : 160% ;
    text-align : justify ;
}
@media screen and ( max-width : 959px ){
    .categoryBlock:nth-child(even) .categoryBlock__imageBox{
        transform-origin : top right ;
        left : auto ;
        right : -80px ;
        top : 120px ;
        transform : rotate(45deg);
    }
    .categoryBlock:nth-child(even) .categoryBlock__wrapper{
        padding : 56px 64px 0 0 ;
        margin : 0 auto 0 0 ;
        left : auto ;
        right : 0 ;
    }
    .categoryBlock:nth-child(even) .categoryBlock__wrapper::before{
        left : auto ;
        right : 0 ;
    }
    .categoryBlock:nth-child(even) .categoryBlock__title{
        margin : 0 64px 40px 0 ;
    }
}
@media screen and ( min-width : 960px ){
    .categoryBlock{
        width : calc( 100% / 2 - 80px);
        margin : 0 ;
    }
    .categoryBlock:last-child{
        margin : 0 ;
    }
    .categoryBlock:nth-child(n + 3){
        margin : 40px 0 0 0 ;
    }

}
@media screen and ( min-width : 1200px ){
    .categoryBlock{
        width : calc( 100% / 3 - 80px);
    }
    .categoryBlock:nth-child(n + 3){
        margin : 0 ;
    }
    .categoryBlock:nth-child(n + 4){
        margin : 40px 0 0 0 ;
    }
}




/*
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 categoryLink

////////////////////////////////////////////////////////*/
.categoryLink{
    display : block ;
    position : relative ;
    width : 100% ;
    max-width : 600px ;
    margin : 0 auto 40px;
    color : #000 ;
    cursor : pointer ;
}
.categoryLink__imageBox{
    position: relative ;
    width : 100% ;
    height : 50vw ;
    max-height : 320px ;
    background : gray ;
}
.categoryLink__imageBox::after{
    content : "" ;
    position : absolute ;
    bottom : 0 ;
    right : 0 ;
    width : 0 ;
    height : 0 ;
    border-top : solid 60px transparent ;
    border-left : solid 60px transparent ;
    border-right : solid 60px #fff ;
    border-bottom : solid 60px #fff ;
}
.categoryLink__image{
    object-fit : cover ;
    width : 100% ;
    height : 100% ;
}
.categoryLink__detailBtn{
    display : flex ;
    align-items : center ;
    position : relative ;
    top : -12px ;
    right : -20px ;
    z-index : 1 ;
    width : 96px ;
    height : 24px ;
    margin : 0 0 0 auto ;
    color : #fff ;
}
.categoryLink__detailBtn::before{
    content : "" ;
    position : absolute ;
    z-index : -1 ;
    top : 0 ;
    left : 0 ;
    bottom : 0 ;
    margin : auto 0 ;
    width : 150px ;
    height : 150px ;
    background : #002A67;
    transform-origin : center ;
    transform : rotate(45deg) ;
}
.categoryLink__title{
    width : calc( 100% - 120px );
    margin : 12px 0 0 0 ;
}
@media screen and ( max-width : 959px ){
    .categoryLink:nth-child(even) .categoryLink__imageBox::after{
        right : auto ;
        left : 0 ;
        border-top : solid 60px transparent ;
        border-left : solid 60px #fff ;
        border-right : solid 60px transparent ;
        border-bottom : solid 60px #fff ;
    }
    .categoryLink:nth-child(even) .categoryLink__detailBtn{
        position : absolute ;
        top : calc( 50vw - 12px) ;
        bottom : 0 ;
        left : 0 ;
        right : auto ;
        text-align : right ;
    }
    .categoryLink:nth-child(even) .categoryLink__detailBtn::before{
        left : -76px ;
    }
    .categoryLink:nth-child(even) .categoryLink__title{
        margin : 12px 0 0 auto ;
    }
}
@media screen and ( min-width : 642px ) and ( max-width : 959px){
    .categoryLink:nth-child(even) .categoryLink__detailBtn{
        top : 308px ;
    }
}




.categoryLink__titleText{
    display : flex ;
    align-items : flex-end ;
    height : 64px ;
    margin : 0 0 8px 0 ;
    padding : 0 0 8px 0 ;
    font-size : 18px ;
    border-bottom : solid 1px #002A67;
    box-sizing : border-box ;
}
.categoryLink__english{
    display : block ;
    width : 100% ;
    text-align : right ;
    color : #002A67;
}
@media screen and ( min-width : 960px ){
    .categoryLink{
        width : calc( 100% / 2 - 80px);
        margin : 0 40px 0 0 ;
    }
    .categoryLink:last-child{
        margin : 0 ;
    }
    .categoryLink:nth-child(n + 3){
        margin : 40px 0 0 0 ;
    }
    .categoryLink__imageBox{
        max-height : 240px ;
    }
    .categoryLink__imageBox::after{
        border-top : solid 47px transparent ;
        border-left : solid 47px transparent ;
        border-right : solid 47px #fff ;
        border-bottom : solid 47px #fff ;
    }
    .categoryLink__detailBtn{
        right : -48px ;
    }
    .categoryLink__detailBtn::before{
        width : 120px ;
        height : 120px ;
        left : -50% ;
        right : -50% ;
        margin : auto ;
    }
}
@media screen and ( min-width : 1200px ){
    .categoryLink{
        width : calc( 100% / 3 - 80px);
    }
    .categoryLink:nth-child(n + 3){
        margin : 0 ;
    }
    .categoryLink:nth-child(n + 4){
        margin : 40px 0 0 0 ;
    }
    .categoryLink__imageBox{
        max-height : 200px ;
    }
    .categoryLink__detailBtn::before{
    }
}
/*
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 modal

////////////////////////////////////////////////////////*/
#modal--experienced,
#modal--inexperienced,
#modal--overview,
#modal--greetings,
#modal--1,
#modal--2,
#modal--3,
#modal--4,
#modal--5,
#modal--6,
#modal--7,
#modal--8{
    display : none ;
}
.modal__bg{
    position : fixed ;
    z-index : 100 ;
    top : 0 ;
    left : -50% ;
    right : -50% ;
    bottom : 0 ;
    margin : auto ;
    width : 0 ;
    height : 0 ;
    transform : rotate( 45deg );
    transform-origin : center ;
    background : rgba(0,0,0,.9) ;
    transition : .7s ;
}
#modal--experienced:checked ~ .modal__bg,
#modal--inexperienced:checked ~ .modal__bg,
#modal--overview:checked ~ .modal__bg,
#modal--greetings:checked ~ .modal__bg,
#modal--1:checked ~ .modal__bg,
#modal--2:checked ~ .modal__bg,
#modal--3:checked ~ .modal__bg,
#modal--4:checked ~ .modal__bg,
#modal--5:checked ~ .modal__bg,
#modal--6:checked ~ .modal__bg,
#modal--7:checked ~ .modal__bg,
#modal--8:checked ~ .modal__bg{
    width : 200vw ;
    height : 200vw ;
}
#modal--experienced:checked ~ .modal--experienced,
#modal--inexperienced:checked ~ .modal--inexperienced,
#modal--overview:checked ~ .modal--overview,
#modal--greetings:checked ~ .modal--greetings,
#modal--1:checked ~ .modal--1,
#modal--2:checked ~ .modal--2,
#modal--3:checked ~ .modal--3,
#modal--4:checked ~ .modal--4,
#modal--5:checked ~ .modal--5,
#modal--6:checked ~ .modal--6,
#modal--7:checked ~ .modal--7,
#modal--8:checked ~ .modal--8{
    bottom : 0 ;
}
#modal--experienced:checked ~ .modal--experienced .modal__button,
#modal--inexperienced:checked ~ .modal--inexperienced .modal__button,
#modal--overview:checked ~ .modal--overview .modal__button,
#modal--greetings:checked ~ .modal--greetings .modal__button,
#modal--1:checked ~ .modal--1 .modal__button,
#modal--2:checked ~ .modal--2 .modal__button,
#modal--3:checked ~ .modal--3 .modal__button,
#modal--4:checked ~ .modal--4 .modal__button,
#modal--5:checked ~ .modal--5 .modal__button,
#modal--6:checked ~ .modal--6 .modal__button,
#modal--7:checked ~ .modal--7 .modal__button,
#modal--8:checked ~ .modal--8 .modal__button{
    bottom : 0  ;
}
.modal{
    position : fixed ;
    z-index : 101 ;
    bottom : -100vh ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
    width : 100% ;
    height : 100% ;
    max-width : 800px ;
    padding : 12px 12px ;
    box-sizing : border-box ;
    transition : .7s ;
}
.modal__wrapper{
    width : 100% ;
    height : 100% ;
    margin : 0 auto ;
    padding : 24px 0 24px ;
    box-sizing : border-box ;
    background : #fff ;
}
.modal__title{
    width : 100% ;
    margin : 12px 0 0 0 ;
    padding : 0 24px ;
    box-sizing : border-box ;
}
.modal__titleText{
    display : flex ;
    align-items : flex-end ;
    margin : 0 0 8px 0 ;
    padding : 0 0 8px 0 ;
    font-size : 18px ;
    font-weight : bold ;
    border-bottom : solid 1px #002A67;
    box-sizing : border-box ;
}
.modal__english{
    display : block ;
    width : 100% ;
    text-align : right ;
    color : #002A67;
}
.modal__button{
    display : flex ;
    justify-content : center ;
    align-items : flex-end ;
    position : fixed ;
    z-index : 100 ;
    left : 0 ;
    right : 0 ;
    bottom : -60px ;
    margin : 0 auto ;
    padding : 0  ;
    box-sizing : border-box ;
    width : 120px ;
    height : 40px ;
    line-height : 40px ;
    font-size : 14px ;
    color : #fff ;
    text-align : center ;
    transition : .6s ;
    cursor : pointer ;
}
.modal__button::before{
    content : "" ;
    position : absolute ;
    z-index : -1 ;
    bottom : 0 ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
    width : 0 ;
    height : 0 ;
    border-top : solid 0 transparent ;
    border-left : solid 60px transparent ;
    border-right : solid 60px transparent ;
	border-bottom : solid 60px #002A67 ;
}
.modal__button::after{
    content : "" ;
    position : absolute ;
    top : 0 ;
    left : 0 ;
    right : 0 ;
    margin : 0 auto ;
    width : 16px ;
    height : 16px ;
/*    background : #fff ;*/
}
.modalInner{
    overflow : scroll ;
    width : 100% ;
    height : calc( 100% - 120px );
    margin : 12px 0 0 0 ;
    padding : 12px 24px 0 ;
    border-top : solid 1px #eee ;
    border-bottom : solid 1px #eee ;
    box-sizing : border-box ;
}
.modalInner__imageBox{
    width : 100% ;
    height : 45vw ;
    max-height : 360px ;
    margin : 0 0 40px 0 ;
    background : gray ;
}
.modalInner__image{
    object-fit : cover ;
    width : 100% ;
    height : 100% ;
}
.modalInner__title{
    font-weight : bold ;
    margin : 0 0 8px 0 ;
}
.modalInner__text{
    margin : 0 0 40px 0 ;
    text-align : justify ;
}
@media screen and ( min-width : 960px ){
    .modal__button{
        bottom : -80px ;
        padding : 0 0 4px 0 ;
        width : 160px ;
        height : 80px ;
        font-size : 18px ;
    }
    .modal__button::before{
        border-top : solid 0 transparent ;
        border-left : solid 80px transparent ;
        border-right : solid 80px transparent ;
        border-bottom : solid 80px #002A67 ;
    }
    .modal__button::after{
        top : 20px ;
        width : 24px ;
        height : 24px ;
    }
}



/*
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 modalInner__table

////////////////////////////////////////////////////////*/
.modalInner__table{
    border-collapse : collapse ;
    border-top : solid 1px #DEDEDE ;
}
.modalInner__tableRow{
    border-bottom : solid 1px #DEDEDE ;
}
.modalInner__tableHead{
    width : 25% ;
    font-size : 14px ;
    text-align : left ;
}
.modalInner__tableData{
    width : 75% ;
    font-size : 14px ;
    padding : 16px 0 16px 16px ;
    box-sizing : border-box ;
}




/*
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 footer

////////////////////////////////////////////////////////*/

.footer{
    display : flex ;
    flex-direction : column ;
    margin : 80px 0 0 0 ;
    padding : 80px 0 ;
    color : #fff ;
    background : #002A67;
}
.footer__logoBox{
    width : 240px ;
    margin : 0 auto 40px ;
    text-align : center ;
}
.footer__logo{
    width : 100% ;
    display : block ;
    margin : 0 0 24px 0 ;
    height: 60px ;
}
.footer__logoImage{
    width : 100% ;
}
.footer__wrapper{
    width : calc( 100% - 24px * 2 );
    margin : 0 auto ;
}
.footer__box{
    width : 90% ;
    max-width : 300px ;
    margin : 0 auto ;
}
.footer__box:not(:last-child){
    margin : 0 auto 40px ;
}
.footer__imageBox{
    width : 100% ;
    height : 40vw ;
    max-height : 180px ;
    margin : 0 auto 24px ;
}
.footer__image{
    object-fit : cover ;
    width : 100% ;
    height : 100% ;
}
.footer__listItem{
    margin : 0 0 8px 0 ;
}
.footer__listItem a{
    color : #fff ;
    text-decoration : underline ;
}
@media screen and ( min-width : 960px ){
    .footer{
        margin : 120px 0 0 0 ;
    }
    .footer .section__layouts{
        align-items : center ;
    }
    .footer__wrapper{
        width : 640px ;
        display : flex ;
        justify-content : space-between ;
    }
    .footer__box{
        margin : 0 ;
    }
    .footer__box:not(:last-child){
        margin : 0 ;
    }
}



/*
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 jsMove

////////////////////////////////////////////////////////*/
.jsMove{
    opacity : 0 ;
    transition : .6s ;
    transform : translate( 0 , 40px )  rotate( 45deg ) !important;
}
.jsMove--aft{
    opacity : 1 ;
    transform : translate( 0, 0 )  rotate( 45deg ) !important;
}
/*
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 Button

////////////////////////////////////////////////////////*/
.contactButton{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    width : 240px ;
    height : 56px ;
    color : #002A67 ;
    background : #FFF ;
    text-decoration : none ;
    margin-bottom : 56px ;
}
@media screen and ( min-width : 960px ){
    .contactButton{
        margin-bottom : 0 ;
    }
}
/*
|
|
|
|
|
|
//////////////////////////////////////////////////////////

 Modal

////////////////////////////////////////////////////////*/
.modalInner__dataList{
    padding : 0 ;
    box-sizing : border-box ;
}
.modalInner__dataTerm{
    position : relative ;
    font-weight : bold ;
    font-size : 12px ;
}
.modalInner__dataTerm::before{
    content : "" ;
    position : absolute ;
    top : 0 ;
    left : -16px ;
    bottom : 0 ;
    margin : auto 0 ;
    width : 12px ;
    height : 12px ;
    background : #002A67 ;
}
.modalInner__dataDesc{
    font-size : 14px ;
    margin-bottom : 16px ;
}
.modalInner__listFrame{
    margin : 0 ;
    padding : 0  ;
    box-sizing : border-box ;
}
.modalInner__listItem{
    position : relative ;
    font-size : 14px ;
}
.modalInner__listItem::before{
    content : "" ;
    position : absolute ;
    top : 6px ;
    left : -16px ;
    width : 8px ;
    height : 8px ;
    border-radius : 50% ;
    background : #002A67 ;
}