@charset "utf-8";

/***************************************************************************
*
* INDEX STYLE
*
***************************************************************************/
#header {
    background: transparent;
}

#header.bgHeader {
    background: #ffffff;
}

#header.boxShadow {
    background: #ffffff;
}

.main {}

.main .wrapMain {
    position: relative;
    line-height: 0;
}

.main .wrapMain .wrapMainVideo {
    position: relative;
    line-height: 0;
}

.main .wrapMain .wrapMainVideo .videoMain {
    height: 100vh;
    line-height: 0;
}

.main .wrapMain .wrapMainVideo img,
.main .wrapMain .wrapMainVideo video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1980/1154;
    /* margin-top: 4%; */
}

.main .wrapMain .wrapScrollMain {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 81px;
}

.main .wrapMain .wrapScrollMain .txtSCrollMain {
    letter-spacing: 2px;
    font-size: 20px;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    margin-bottom: 28px;
}

.main .wrapMain .wrapScrollMain .imgScrollMain {
    display: block;
    animation: arrow 5s ease infinite;
}

@keyframes arrow {
    5% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(0);
    }

    60% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0);
    }
}

.main .wrapMain .wrapScrollMain .imgScrollMain img {}

.main .wrapMain .boxMain {
    position: absolute;
    bottom: 88px;
    right: clamp(20px, 4.8vw, 85px);
    width: 337px;
    line-height: 1.5;
}

.main .wrapMain .boxMain .titleCol {
    padding-bottom: 13px;
    border-bottom: 1px solid #fff;
    margin-bottom: 20px;
    display: inline-block;
    overflow: hidden;
}

.main .wrapMain .boxMain .titleCol a {
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 2px;
    /* color: transparent;
    text-shadow: 0 -1.5em 0 #000, 0 0 0 #000;
    transition: text-shadow 0.3s; */
    overflow: hidden;
    height: 29px;
    display: block;
}

.main .wrapMain .boxMain .listMain {
   color: #fff;
}

.main .wrapMain .boxMain .listMain li {
    margin-bottom: 13px;
    overflow: hidden;
    position: relative;
    padding-left: 10px;
}

.main .wrapMain .boxMain .listMain li:before {
    content: "";
    position: absolute;
    background: #fff;
    width: 3px;
    height: 3px;
    top: 14px;
    left: 7px;
    border-radius: 50%;
}

.main .wrapMain .boxMain .listMain li:last-child {
    margin-bottom: 0;
}

.main .wrapMain .boxMain .listMain li a {
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 1.9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 0 10px;
    /* color: transparent;
    text-shadow: 0 -1.5em 0 #000, 0 0 0 #000;
    transition: text-shadow 0.3s; */
}


#content {
    padding-top: 190px;
}

.areaVision {
    margin-bottom: 379px;
}

.wrapVision .iframeVison .wrapVisionPhoto .mainVisionPhoto a {
    overflow: hidden;
    display: block;
}

.wrapVision .iframeVison .wrapVisionPhoto .mainVisionPhoto a img {
    transition: all 0.7s;
}

.areaArchive {
    margin-bottom: 190px;
}

.areaArchive .inner {
    max-width: 1848px;
}

.areaArchive .wrapVision .iframeVison .wrapVisionPhoto {
    width: calc(100% - 491px);
}

.areaArchive .wrapVision .iframeVison .boxVision {
    padding-left: 6px;
}

.areaArchive .wrapVision .linkDetail {
    text-align: right;
}

/* areaSkills */
.areaSkills {
    margin-bottom: 190px;
}

.areaSkills .inner {
    max-width: 100%;
    padding: 0;
}

.areaSkills .wrapVision .iframeVison {
    margin-right: calc((100% - 1768px) / 2);
    align-items: center;
}

.areaSkills .wrapVision .iframeVison .wrapVisionPhoto .mainVisionPhoto img {
    aspect-ratio: 1398 / 1080;
}

.areaSkills .wrapVision .iframeVison .boxVision {
    padding: 0;
    min-height: 28.4vw;
    margin-top: -13px;
    width: 375px;
}

/* areaFuture */
.areaFuture {
    margin-bottom: 0;
}

.areaFuture .inner {
    max-width: 1780px;
}

.areaFuture .wrapVision .iframeVison {
    margin-right: 0;
    align-items: flex-start;
}

.areaFuture .wrapVision .iframeVison .wrapVisionPhoto {
    width: calc(100% - 480px);
}

.areaFuture .wrapVision .iframeVison .wrapVisionPhoto .mainVisionPhoto img {
    aspect-ratio: 1300 / 891;
}

.areaFuture .wrapVision .iframeVison .boxVision {
    min-height: 29vw;
    padding-top: 37px;
    margin-top: 0;
}

.areaFuture .wrapVision .linkDetail {
    text-align: right;
}

@media (min-width: 769px) {
    .wrapVision .iframeVison .wrapVisionPhoto .mainVisionPhoto a:hover img {
        transform: scale(1.08);
    }

    .main .wrapMain .boxMain .listMain li a:hover,
    .main .wrapMain .boxMain .titleCol a:hover {
        /* text-shadow: 0 0 0 #000, 0 1.5em 0 #000; */
        text-decoration: 1px underline;
        text-underline-offset: 3px;
    }
}

@media (max-width: 1850px) and (min-width: 769px) {
    .areaSkills .wrapVision .iframeVison {
        padding-right: 30px;
        margin-right: 0;
    }

    .areaSkills .wrapVision .iframeVison .boxVision {
        margin-top: 0;
    }

    .areaFuture .wrapVision .iframeVison {
        padding: 0 30px;
    }

    .areaFuture .wrapVision .iframeVison .boxVision {
        padding-top: 2vw;
    }
   /* .main .wrapMain .wrapMainVideo{ */
       /* padding-top: 21%; */
}

@media (max-width: 1200px) and (min-width: 769px) {
    .main .wrapMain .boxMain {
        right: 1vw;
        width: clamp(285px, 37vw, 337px);
    }

    .main .wrapMain .boxMain .titleCol a {
        font-size: clamp(16px, 1.7vw, 20px);
    }

    .main .wrapMain .boxMain .listMain li a {
        font-size: clamp(16px, 1.7vw, 20px);
        color: #fff;
    }

    .main .wrapMain .wrapScrollMain .txtSCrollMain {
        font-size: clamp(16px, 1.7vw, 20px);
        margin-bottom: 2vw;
    }

    .main .wrapMain .wrapScrollMain .imgScrollMain {
        width: 7vw;
        margin: 0 auto;
        text-align: center;
    }

    .main .wrapMain .wrapScrollMain .imgScrollMain img {
        width: 100%;
    }

    #content {
        padding-top: 15vw;
    }

    .areaVision {
        margin-bottom: 15vw;
    }

    .areaArchive {
        margin-bottom: 15vw;
    }

    .areaSkills {
        margin-bottom: 15vw;
    }

    .areaFuture {
        margin-bottom: 0;
    }
}

@media (max-width: 1000px) and (min-width: 769px) {
    .main .wrapMain .boxMain {
        width: clamp(285px, 30vw, 300px);
        line-height: 1,5;
    }

    .areaArchive .wrapVision .iframeVison .wrapVisionPhoto,
    .areaFuture .wrapVision .iframeVison .wrapVisionPhoto {
        width: 100%;
    }

    .areaSkills .wrapVision .iframeVison {
        padding: 0 30px 0 0;
    }

    .areaSkills .wrapVision .iframeVison .boxVision .contentVision {
        padding: 0 30px;
    }

    .areaSkills .wrapVision .iframeVison .boxVision {
        width: 100%;
        min-height: initial;
        padding-top: 0;
    }

    .areaFuture .wrapVision .iframeVison {
        flex-direction: column-reverse;
        padding: 0 30px;
    }

    .areaFuture .wrapVision .iframeVison .boxVision .contentVision {
        padding: 0;
    }
}

@media (max-width: 768px) {
    #content {
        padding-top: 0;
    }

    .main .wrapMain .boxMain {
        border-radius: 10px;
        position: initial;
        margin: 46px auto 43px;
        width: clamP(182px, 45.9vw, 240px);
        text-align: center;
    }

    .main .wrapMain .wrapScrollMain {
        bottom: 79px;
    }

    .main .wrapMain .wrapScrollMain .txtSCrollMain {
        font-size: clamp(15px, 3.8vw, 19px);
        margin-bottom: 0px;
        letter-spacing: 1.5px;
    }

    .main .wrapMain .wrapScrollMain .imgScrollMain {
        width: clamp(68px, 17.3vw, 78px);
        text-align: center;
        margin: 0 auto;
    }

    .main .wrapMain .wrapScrollMain .imgScrollMain img {
        width: 100%;
    }

    .main .wrapMain .boxMain .titleCol {
        padding-bottom: 9px;
        margin-bottom: 16px;
        border-bottom: 0.7px solid #000;
    }

    .main .wrapMain .boxMain .titleCol a {
        font-size: clamp(15px, 3.8vw, 19px);
        height: inherit;
        letter-spacing: 1.4px;
        color: #000 !important;
    }

    .main .wrapMain .boxMain .listMain li {
        margin-bottom: 9px;
        padding-left: 0;
        text-align: center;
    }


    .main .wrapMain .boxMain .listMain li:before {
        top: clamp(10px, 2.6vw, 14px);
        left: 0;
        display: none;
    }

    .main .wrapMain .boxMain .listMain li a {
        font-size: clamp(14px, 3.5vw, 18px);
        color: #000000;
        text-shadow: none;
        background: transparent;
        padding: 0;
        text-align: center;
    }

    .areaArchive .wrapVision .iframeVison .wrapVisionPhoto,
    .areaFuture .wrapVision .iframeVison .wrapVisionPhoto {
        width: 100%;
    }

    .areaVision {
        margin-bottom: clamp(61px, 15.4vw, 80px);
    }

    .areaVision .inner {
        padding: 0;
    }

    .areaArchive {
        margin-bottom: clamp(46px, 11.6vw, 65px);
    }

    .areaArchive .inner {
        padding: 0 0 0 11.9%;
    }

    .areaArchive .wrapVision .iframeVison .boxVision {
        padding: 0 13.5% 0 2%;
    }

    .areaArchive .wrapVision .iframeVison .boxVision .contentVision {
        /* margin-bottom: clamp(83px, 21.1vw, 95px); */
       margin-bottom: 40px;
    }

    .areaArchive .wrapVision .iframeVison .boxVision .contentVision .titleVision {
        margin-bottom: clamp(14px, 3.5vw, 22px);
    }

    .areaArchive .wrapVision .iframeVison .wrapVisionPhoto {
        margin-bottom: clamp(27px, 6.9vw, 40px);
    }

    .areaSkills {
        margin-bottom: clamp(61px, 15.6vw, 75px);
    }

    .areaSkills .inner {
        padding: 0 11.8% 0 0px;
    }

    .areaSkills .wrapVision .iframeVison {
        margin-right: 0;
    }

    .areaSkills .wrapVision .iframeVison .boxVision {
        min-height: inherit;
        width: 100%;
        margin-top: 0;
        padding-left: 15.6%;
    }

    .areaSkills .wrapVision .iframeVison .wrapVisionPhoto {
        margin-bottom: clamp(27px, 6.9vw, 40px);
    }

    .areaSkills .wrapVision .iframeVison .boxVision .contentVision .titleVision {
        margin-bottom: clamp(13px, 3.3vw, 22px);
    }

    .areaSkills .wrapVision .iframeVison .boxVision .contentVision {
        /* margin-bottom: clamp(83px, 21.1vw, 95px); */
        margin-bottom: 40px;
    }

    .areaFuture {
        /* margin-bottom: clamp(113px, 28.8vw, 125px); */
        margin-bottom: 40px;
    }

    .areaFuture .inner {
        padding: 0 0 0 12%;
    }

    .areaFuture .wrapVision .iframeVison {
        flex-direction: column-reverse;
    }

    .areaFuture .wrapVision .iframeVison .boxVision {
        padding: 0 12.8% 0 2%;
    }
}

/* スマホ用（例：青） */
@media screen and (max-width: 1024px) {
    .main .wrapMain .boxMain .titleCol a {
        color: #fff;
    }
}

/* PC用（例：赤） */
@media screen and (min-width: 1025px) {
    .main .wrapMain .boxMain .titleCol a {
        color: #fff;
    }
    .main .wrapMain .boxMain .listMain li a {
         color: #fff;
     }
     .main .wrapMain .boxMain .listMain li::before {
          background: #fff;
      }
      .main .wrapMain .boxMain .titleCol{
         border-bottom: 1px solid #fff;
      }
      #header.boxShadow .wrapHeader .mainMenu .menu li a{
        color: #000;
      }
}