/*
Theme Name: portfolio10
*/

html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.5;
    color: #555;
}

#header {
    display: flex;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    height: 80px;
    padding: 0 50px;
    line-height: 80px;
    background: #eeea;
    z-index: 10;
    box-sizing: border-box;
}

.header-logo {
    font-size: 24px;
    opacity: 0;
}

.header-logo.rotate {
    font-size: 24px;
    animation: rotate01 .5s forwards;
}

.header-navi {
    display: flex;
}

.header-navi-item {
    opacity: 0;
}

.header-navi-item.rotate:nth-child(1) {
    animation-delay: .1s;
}

.header-navi-item.rotate:nth-child(2) {
    animation-delay: .2s;
}

.header-navi-item.rotate:nth-child(3) {
    animation-delay: .3s;
}

.header-navi-item.rotate:nth-child(4) {
    animation-delay: .4s;
}

.header-navi-item.rotate {
    animation: rotate01 .5s forwards;
}

.header-navi-item:not(:last-child) {
    margin-right: 20px;
}

#fv {
    height: 4000px;
    background: url(img/26519201_m.jpg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
}
#fv2 {
    height: 4000px;
    background: url(img/26519201_3-4.jpg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
}

.fv-title {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 60px;
}

#section01 {
    height: 6300px;
    background: #eee;
}

.section-container {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(1.875rem, -20rem + 29.1667vw, 15rem) 0;
    position: relative;
}

.section-flex {
    width: 100%;
    display: flex;
}

.section-text {
    width: 30%;
    flex-wrap: wrap;
}

.section-text-h2 {
    display: inline-block;
    font-size: 60px;
    opacity: 0;
}
@media screen and (max-width:800px) {
    .section-text-h2{
        font-size: 30px;
    }
}


.section-text p {
    font-size: 20px;
}

.area01 {
    width: 40%;
    height: 400px;
    margin: 40px 10px 0 0;
    padding: 20px;
    box-sizing: border-box;
    z-index: 5;
}

.area11 {
    width: 60%;
    height: 380px;
    margin: 40px 0;
}

.area02 {
    width: 60%;
    height: 200px;
    background: #bbb url(img/laptop-g58f655e81_1920.jpg);
    background-position: center;
    background-size: 110%;
    background-repeat: no-repeat;
}

.area03 {
    width: 40%;
    height: 200px;
    background: #ccc url(img/design-gc0ee40614_1920.jpg);
    background-position: center;
    background-size: auto 120%;
    background-repeat: no-repeat;
}

.area04 {
    width: 40%;
    height: 180px;
    background: #ddd url(img/job-gcef5e4a81_1920.jpg);
    background-position: center;
    background-size: auto 110%;
    background-repeat: no-repeat;
}

.area05 {
    width: 30%;
    height: 180px;
    background: #eee url(img/engineer-gbdadea653_1920.jpg);
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.area06 {
    width: 30%;
    height: 180px;
    background: #fff url(img/meeting-g7d85ebd8b_1920.jpg);
    background-position: center;
    background-size: auto 110%;
    background-repeat: no-repeat;
}

#section02 {
    height: 5600px;
    background: #eee;
    position: relative;
}

.section-flex {
    display: flex;
}
.section-flex-sp {
    display: flex;
}
.section-flex-reverse {
    display: flex;
}

.section-sticky {
    position: sticky;
    top: 0;
}
.area21{
    margin-top: 60px;
    width: 30%;
}
.area22{
    margin-top: 60px;
    width: 70%;
    position: relative;
}

.hexagon3__wrapper {
    display: flex;
    flex-wrap: wrap;
    --wrapper-width: 90%;
    width: var(--wrapper-width);
    /* 全体の大きさを変更できる */
    margin-right: calc(-1 * var(--wrapper-width) / 3 * 0.25 * 2 - var(--wrapper-width) / 3 * 0.05 * 2);
    /* margin-bottom: 20%; */
}

@media(max-width: 768px) {
    .hexagon3__wrapper {
        --wrapper-width: 100%;
        font-size: 3vw;
    }
}

.hexagons {
    width: calc(100% /3);
}

.honeycomb-area {
    display: flex;
    justify-content: center;
    margin: 60px auto 0;
}

.hexagon-3_hexagon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 200 / 173;
    /* 正六角形になる比率 */
    background-color: #333;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    opacity: 0;
}

.hexagon-3_hexagon>span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 90%;
    background-color: #fff;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* 2行目と3行目の六角形を上にずらして縁を重ねる */
.hexagon-3_hexagon:nth-of-type(2),
.hexagon-3_hexagon:nth-of-type(3) {
    margin-top: 5%;
}

/* 中央の列を下にずらす */
.honeycomb-area .hexagons-center {
    transform: translateY(calc(-100% / 6));
}

/* 2列目と3列目の六角形を左にずらして縁を重ねる */
.honeycomb-area .hexagons-center,
.honeycomb-area .hexagons-right {
    margin-left: calc(-100% / 3 * 0.25 - 100% / 3 * -0.05);
}

#section03 {
    height: 5000px;
    background: #eee;
}

.area31 {
    width: 40%;
    height: 380px;
    margin: 40px 10px 0 0;
    background: url(img/desk-5020801_1280.jpg);
    background-position: 0% 50%;
    background-size: auto 100%;
}

.area32 {
    width: 60%;
    height: 380px;
    margin: 40px 0 0 0;
}

.area33 {
    width: 100%;
    height: 200px;
}

.area33-1 h2 {
    line-height: 28vh;
}

.area33-1 {
    width: 40%;
    height: 200px;
    background: #bbb;
    padding: 20px;
    box-sizing: border-box;
}

.area33-2 {
    width: 60%;
    height: 200px;
    background: #ccc;
    padding: 20px;
    box-sizing: border-box;
    background: url(img/job-gcef5e4a81_1920.jpg);
    background-size: 130% auto;
}

.area33-2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fffa;
}

.area34 {
    width: 100%;
    height: 180px;
    background: #ddd;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
}

.circle-width {
    width: 50%;
    margin: 10px;
    background: #ddd;
    border-radius: 50%;
    border: 1px solid #003;
    transition: transform 1s;
    background: #eee;
    opacity: 0;
}

.circle-height{
    position: relative;
    padding-top: 100%;
    height: 0;
}
.circle-height p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: bold;
}

#section04 {
    height: 5500px;
    background: #eee;
}

.area40 {
    width: 80%;
}

.area41 {
    width: 40%;
    height: 450px;
    margin: 40px 10px 0 0;
}

.area41-1 {
    width: 100%;
    height: 150px;
    padding: 0 20px;
    box-sizing: border-box;
}

.area41-2 {
    width: 100%;
    height: 300px;
    padding: 20px;
    border: 2px solid rgb(220, 235, 220);
    box-sizing: border-box;
}

.area42-0{
    width: 60%;
    margin: 40px 0 0 0;
}
.area42 {
    width: 50%;
    height: 450px;
    margin-right: 10px;
    padding: 20px;
    border: 2px solid rgb(220, 235, 220);
    box-sizing: border-box;
}

.area43 {
    width: 50%;
    height: 450px;
    /* margin: 40px 0 0; */
}

.area43-1 {
    height: 340px;
    margin-bottom: 10px;
    padding: 20px;
    border: 2px solid rgb(220, 235, 220);
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.area43-2 {
    height: 100px;
    padding: 20px;
    border: 2px solid rgb(220, 235, 220);
    box-sizing: border-box;
    text-align: center;
    display: flex;
    align-items: center;
    opacity: 0;
}

.area43-2 p {
    font-size: 10px;
}

.section01-title.rotate {
    animation: rotate02 .5s forwards;
}

.section02-title.rotate {
    animation: rotate02 .5s forwards;
}

.section03-title.rotate {
    animation: rotate02 .5s forwards;
}

.hexagons.translate .hexagon-center {
    animation: hexagon00 .4s forwards;
}

.hexagons.translate .hexagon-center-up {
    animation: hexagon01 .4s .05s forwards;
}

.hexagons.translate .hexagon-right-up {
    animation: hexagon02 .4s .1s forwards;
}

.hexagons.translate .hexagon-right-down {
    animation: hexagon03 .4s .15s forwards;
}

.hexagons.translate .hexagon-center-down {
    animation: hexagon04 .4s .2s forwards;
}

.hexagons.translate .hexagon-left-down {
    animation: hexagon05 .4s .25s forwards;
}

.hexagons.translate .hexagon-left-up {
    animation: hexagon06 .4s .3s forwards;
}

.hexagon-color.bg-color {
    animation: hexagon-color .4s forwards;
}

.section04-title.rotate {
    animation: rotate02 .5s forwards;
}

.area43-2.scale {
    animation: scale01 .5s forwards;
}

.circle01.rotate {
    animation: rotate03 1s forwards;
}

.circle02.rotate {
    animation: rotate04 1s forwards;
}

.circle03.rotate {
    animation: rotate05 1s forwards;
}

@keyframes rotate01 {
    0% {
        transform: rotate(3600deg) scale(50);
        opacity: 0;
    }

    100% {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

@keyframes rotate02 {
    0% {
        transform: rotate(3600deg) scale(20);
        opacity: 0;
    }

    100% {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

@keyframes scale01 {
    0% {
        transform: scale(20);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes rotate03 {
    0% {
        transform: rotateX(1000deg) rotateY(450deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0)rotateY(0);
        opacity: 1;
    }
}

@keyframes rotate04 {
    0% {
        transform: rotateX(600deg) rotateY(450deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0)rotateY(0);
        opacity: 1;
    }
}

@keyframes rotate05 {
    0% {
        transform: rotateX(800deg) rotateY(450deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0)rotateY(0);
        opacity: 1;
    }
}

@keyframes hexagon00 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hexagon01 {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

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

@keyframes hexagon02 {
    0% {
        transform: translate(-105px, 60px);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes hexagon03 {
    0% {
        transform: translate(-105px, -60px);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes hexagon04 {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }

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

@keyframes hexagon05 {
    0% {
        transform: translate(105px, -60px);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes hexagon06 {
    0% {
        transform: translate(105px, 60px);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes hexagon-color {
    0% {
        background: rgb(238, 238, 238);
    }

    100% {
        background: rgb(12, 43, 88);
    }
}

.sp-content{
    display: none;
}
@media screen and (max-width:800px) {
    .pc-content{
        display: none;
    }
    .sp-content{
        display: block;
    }
}

@media screen and (max-width:800px) {
    #header {
        padding: 0 20px;
    }
    
    .fv2{
        background-position: center top;
    }
    .section-flex{
        flex-direction: column;
    }
    .section-flex-reverse{
        flex-direction: column-reverse;
    }
    .area01,
    .area11{
        width: 100%;
    }
    .area01,
    .area11{
        height: 40vh;
        margin: 0;
    }
    .area02,
    .area03{
        height: 22vh;
    }
    .area04,
    .area05,
    .area06{
        height: 18vh;
    }

    .area21{
        width: 90%;
        padding: 20px;
    }
    .area22{
        width: 90%;
    }
    .area31{
        width: 100%;
        height: 30vh;
        background-position: 0% 50%;
        background-size: 100% auto;    
    }
    .area32{
        width: 100%;
        height: 40vh;
        margin: 0;
    }
    .area33{
        height: 22vh;
    }
    .area33-1 h2 {
        line-height: 14vh;
    }

    .area33-2 p{
        font-size: 14px;
        overflow: hidden;
    }
    .area34{
        height: 18vh;
        padding: 10px;
    }
    .circle{
        width: 25%;
    }
    .circle p{
        font-size: 16px;
    }
    .area41{
        width: 100%;
        height: 30vh;
    }
    .area41-1{
        width: 100%;
        height: 10vh;
    }
    .area41-2{
        width: 100%;
        height: 20vh;
        padding: 10px 20px;
    }
    .area41-2 p{
        font-size: 14px;
    }
    .area42-0{
        width: 100%;
        margin-top: 10px;

    }
    .area42{
        height: 35vh;
        overflow: hidden;
    }
    .area43{
        height: 35vh;
    }
    .area43-1{
        height: 20vh;
    }
    .area43-2{
        height: 13.4vh;
    }

}