@charset "UTF-8";
/*--------------------------------
	fv 
--------------------------------*/
.fv {
    position: relative;
}
#fv-slider {
    width: 100%;
    height: calc(100vh - 102px);
    height: calc(100svh - 102px);
    overflow: hidden;
    position: relative;
}
.fv-img {
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 10;
    animation: anime 30s 0s infinite;
}
.fv-img_01 {
    background-image: url(../images/top/pc_fv_img01.jpg);
}
.fv-img_02 {
    background-image: url(../images/top/pc_fv_img02.jpg);
    animation-delay: 10s;
}
.fv-img_03 {
    background-image: url(../images/top/pc_fv_img03.jpg);
    animation-delay: 20s;
}
@keyframes anime {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    34% {
        opacity: 1;
    }
    44% {
        opacity: 0;
        transform: scale(1.05) ;
        z-index:9;
    }
    100% { opacity: 0 }
}
.scroll_attention {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.65vw;
    z-index: 40;
}
.scroll {
    display: block;
    color: #fff;
    font-size: 1.3rem;
}
.scroll_arrow {
    display: block;
    color: #fff;
    line-height: 1;
    width: 0.5em;
    height: 0.5em;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    transform: translateY(-25%) rotate(135deg);
    margin: 0 auto;
}
@media(max-width : 767px) {
    #fv-slider {
        width: 100%;
        height: calc(100vh - 67px);
        height: calc(100svh - 67px);
    }
    .fv-img_01 {
        background-image: url(../images/top/sp_fv_img01.jpg) ;
    }
    .fv-img_02 {
        background-image: url(../images/top/sp_fv_img02.jpg);
    }
    .fv-img_03 {
        background-image: url(../images/top/sp_fv_img03.jpg);
    }
}
/*--------------------------------
	message
--------------------------------*/
.message_wrapper {
    width: 100%;
    height: calc(100vh - 5vh);
    max-height: 800px;
    position: relative;
}
.grain01 {
    content: '';
    display: block;
    position: absolute;
    background: url(../images/top/grain01.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.grain02 {
    content: '';
    display: block;
    position: absolute;
    background: url(../images/top/grain02.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: 20;
}
.message-text {
    padding-top: 15.833vw;
    padding-left: 21.180vw;
    z-index: 30;
}
.message h2 {
    font-size: 2.0rem;
    line-height: 2.5;
}
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}
@keyframes blurAnime{
    from {
        filter: blur(10px);
        transform: scale(1.02);
        opacity: 0;
    }

    to {
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
    }
}
.blurTrigger{
    opacity: 0;
}
@media(max-width : 959px) {
    .message_wrapper {
        max-height: 573px;
    }
    .message-text {
        padding-left: 14vw;
    }
}
@media(max-width : 767px) {
    .message_wrapper {
        max-height: 425px;
    }
    .message-text {
        padding-top: 30.933vw;
        padding-left: 20px;
        padding-right: 20px;
    }
    .message h2 {
        font-size: 1.6rem;
    }
}
/*--------------------------------
	about
--------------------------------*/
.about_wrapper {
    display: flex;
    margin-bottom: 10.902vw;
}
.about-img {
    width: 60.138vw;
}
.about-text {
    width: 32vw;
    margin-top: 7.43vw;
    padding-left: 4.791vw;
}
.about-btn {
    margin: 8vw 0 0 auto;
}

@media(max-width : 959px) {
    .about_wrapper {
        margin-bottom: 16vw;
    }
    .about-img {
        width: 54vw;
    }
    .about-text {
        width: 43vw;
        margin-top: 6.6vw;
        padding-left: 4vw;
    }
}
@media(max-width :767px) {
    .about_wrapper {
        display: block;
        margin-bottom: 34vw;
    }
    .about-img {
        width: 94.666vw;
    }
    .about-text {
        width: 94.666vw;
        margin-top: 15vw;
        padding-left: 5.333vw;
    }
    .about-btn {
        margin: 70px 0 0 auto;
    }
}
/*--------------------------------
	mission
--------------------------------*/
.mission_wrapper {
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}
.mission-img {
    width: 46.388vw;
}
.mission-text {
    width: 40vw;
    padding-right: 11.180vw;
    margin-top: 8.333vw;
}
.mission h2 {
    font-size: 2.8rem;
    line-height: 1.6;
    margin-bottom: 16px;
}
.En-title {
    color: #192F60;
    font-size: 1.4rem;
    margin-bottom: 5.208vw;
}
.mission-btn {
    margin: 9vw 0 0 auto;
}
.img_area {
    width: 100%;
    height: 29.375vw;
    position: relative;
    margin-bottom: 9.236vw;
}
.tool-img01 {
    width: 37.638vw;
    position: absolute;
    top: -5vw;
    left: 0;
}
.tool-img02 {
    width: 12.291vw;
    position: absolute;
    bottom: 0;
    left: 45.763vw;
}
@media(max-width: 959px) {
    .mission-text {
        width: 42vw;
        padding-right: 5.2vw;
    }
    .mission-img {
        width: 53.125vw;
    }
    .mission h2 {
        font-size: 2.0rem;
        margin-bottom: 8px;
    }
    .img_area {
        height: 53vw;
        margin-bottom: 16vw;
    }
    .tool-img01 {
        width: 37vw;
        top: 11vw;
    }
    .tool-img02 {
        width: 15vw;
        left: 40vw;
    }
}
@media(max-width : 767px) {
    .mission_wrapper {
        display: block;
    }
    .mission-img {
        width: 94.666vw;
        margin: 0 0 0 auto;
    }
    .mission-text {
        width: 94.666vw;
        padding-left: 5.333vw;
        padding-right: 0;
    }
    .mission h2 {
        margin-bottom: 15px;
    }
    .En-title {
        margin-bottom: 13vw;
    }
    .mission-btn {
        margin: 19vw 0 0 auto;
    }
    .img_area {
        height: 98vw;
        margin-bottom: 27vw;
    }
    .tool-img01 {
        width: 67vw;
        top: 16vw;
        left: -13vw;
    }
    .tool-img02 {
        width: 24.5vw;
        left: 40vw;
    }
}
/*--------------------------------
	works
--------------------------------*/
.works_title {
    text-align: center;
}
.works h2 {
    display: inline-block;
    font-size: 2.8rem;
    -ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    margin: 0 auto 16px;
}
.En-title_works {
    text-align: center;
    margin-bottom: 50px;
}
.selected-works {
    display: flex;
    justify-content: space-between;
}
.selected-works a:hover {
    opacity: 1;
}
.works-gallery {
    width: 31.944vw;
    margin: 0 0 0;
}
.imgbox {
    width: 100%;
    height: 40.972vw;
    overflow: hidden;
    margin-bottom: 14px;
    position: relative;
}
.imgbox img {
    transition-duration: 0.7s;
}
.dark-cover {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
    transition-duration: 0.7s;
    z-index: -1;
}
.imgbox img:hover {
    transform: scale(1.04);
    transition-duration: 0.7s;
    opacity: 0.8;
}
.imgbox img:hover + .dark-cover {
    opacity: 1;
}
.works_caption {
    text-align: center;
}
.work_title {
    line-height: 1.3;
}
.work_context {
    font-size: 1.2rem;
}
.works_btn-area {
    margin: 0 4.166vw;
}
.works-btn {
    margin: 10vw 0 13.402vw auto;
}
@media(max-width : 959px) {
    .works h2{
        font-size: 2.0rem;
        -ms-writing-mode: lr-tb;
        -webkit-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
        text-align: center;
        margin: 0 auto;
    }
    .En-title_works {
        margin-bottom: 40px;
    }
    .selected-works {
        display: block;
    }
    .works-gallery {
        width: 380px;
        margin: 0 15px 24px;
    }
    .imgbox {
        height: 487.39px;
    }
    .works_btn-area {
        margin: 0 5.333vw;
    }
    .works-btn {
        margin: 11vw 0 22vw auto;
    }
}
@media(max-width : 767px) {
    .En-title_works {
        margin-bottom: 16px;
    }
    .works-gallery {
        width: 335px;
        margin: 0 10px 0px;
    }
    .imgbox {
        height: 429.67px;
        margin-bottom: 10px;
    }
    .works-btn {
        margin: 22vw 0 22vw auto;
    }
}
/*--------------------------------
	fadeAnime
--------------------------------*/
.fadeIn01, .fadeIn02 {
    animation-name: fadeInAnime;
    animation-fill-mode: forwards;
    opacity: 0;
    }
.fadeIn01 {
    animation-delay: 1s;
    animation-duration: 2s;
}
.fadeIn02 {
    animation-delay: 2s;
    animation-duration: 3s;
}
    
@keyframes fadeInAnime {
    from {
        opacity: 0;
    }
    
    to {
        opacity: 1;
    }
}

.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
    }
    
@keyframes fadeUpAnime{
    from {
        opacity: 0;
    transform: translateY(100px);
    }
    
    to {
        opacity:1;
    transform: translateY(0);
    }
}
.fadeIn{
    animation-name:fadeInAnime;
    animation-duration: 2s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
@keyframes fadeInAnime{
    from {
        opacity: 0;
    }
    
    to {
        opacity: 1;
    }
}

.fadeUpTrigger, .fadeInTrigger, .fadeIn01Trigger, .fadeIn02Trigger {
    opacity: 0;
}


/*--------------------------------
	footer
--------------------------------*/
.footer-image {
    background-image: url(../images/top/top_end.jpg);
}