@charset "UTF-8";

:root {
    --black: #101010;
    --white: #ffffff;
    --gray: #b0b0b0;
    --main-font: "Suisse Int'l", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Montserrat", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 15px;
    letter-spacing: .05em;
    color: #333;
}

a {
    transition: opacity .3s;
    text-decoration: none;
    color: #222;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    border-style: none;

}

.box {
    width: 1080px;
}

.pc-only {
    display: block;
}

.sp-only {
    display: none;
}

.br-sp {
    display: none;
}

/*--------------------------------
   レイアウト
  ---------------------------------*/
.fade-contents {
    opacity: 1;
    transition: opacity .2s ease;
}

.fade-contents.fadeout {
    opacity: 0;
}

.wrapper {
    padding-top: 73px;
}

.section {
    padding: 90px 0;
}

.section:nth-of-type(odd) {
    background-color: #f7f7f7;
}

.container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 40px;
}

.text-center {
    text-align: center;
}

/*--------------------------------
  スクロールアニメ
  ---------------------------------*/
.rotateX {
    animation-name: rotateXAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes rotateXAnime {
    from {
        transform: rotateX(0);
    }

    to {
        transform: rotateX(-180deg);
    }
}

.smooth {
    animation-name: smoothAnime;
    animation-duration: .7s;
    animation-fill-mode: forwards;
    transform-origin: left;
    opacity: 0;
}

@keyframes smoothAnime {
    from {
        transform: translate3d(0, 100%, 0) skewY(12deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0) skewY(0);
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.js-fadeUPTrigger,
.js-smoothTrigger {
    opacity: 0;
}

/* animation delay*/
.delay-time02 {
    animation-delay: 0.2s;
}

.delay-time04 {
    animation-delay: 0.4s;
}

.TextTyping span {
    display: none;
}

/* テキストスライドアニメーション */
.slide-in {
    overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
    display: inline-block;

}


.leftAnime {
    opacity: 0;
}

.slideAnimeLeftRight {
    animation-name: slideTextX100;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slideAnimeRightLeft {
    animation-name: slideTextX-100;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* じわっと出現*/
.blur {
    animation-name: blurAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes blurAnime {
    from {
        filter: blur(10px);
        transform: scale(1.02);
    }

    to {
        filter: blur(0);
        transform: scale(1);
    }
}

/* 線を引く */
.js-line {
    position: relative;
    z-index: 1;
}

.js-line::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -14px;
    width: 0%;
    height: 2px;
    background: #222;
    z-index: -1;
    transition: all .8s;
}

.js-line.is-active::after {
    width: 100%;
}

/*--------------------------------
 見出し
---------------------------------*/
.title {
    position: relative;
    font-size: 5.5vw;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 0 0 7% 0;
    line-height: 1;

}

.title span {
    position: absolute;
}

.title span.en {
    top: 0.7em;
    left: 4em;
    font-size: 1.8vw;
}

.title span.jp {
    top: 3em;
    left: 6em;
    font-size: 1.2vw;
}

#skill .title span.en {
    top: 0.8em;
    left: 2.5em;
}

#skill .title span.jp {
    top: 3em;
    left: 3.7em;
}

.skills-title {
    /* font-size: 1.2rem; */
    font-size: 2rem;
    border-bottom: 1px solid #333;
    padding-top: 2%;
}


#about .title span.en {
    top: 0.7em;
    left: 2.7em;
}

#about .title span.jp {
    top: 3em;
    left: 4.1em;
}

.lead {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 60px;
}

.about-btn {
    display: inline-block;
    width: 250px;
    text-align: center;
    text-decoration: none;
    line-height: 60px;
    outline: none;
    color: #333;
    border: 1px solid #333;
    -webkit-transition: all .3s;
    transition: all .3s;
    pointer-events: auto;
    margin-left: 50%;
}

.about-btn:hover {
    color: #fff;
    font-weight: lighter;
    border: 1px solid #333;
    background-color: #333;
}

/*--------------------------------
  ヘッダー
  ---------------------------------*/
.header {
    position: fixed;
    top: 0;
    height: 70px;
    z-index: 999;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 5px 10px -6px rgba(0, 0, 0, .1);
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
}

.header-logo {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
    margin-right: 20px;
    letter-spacing: .05em;
}

.header-logo a {
    color: #333;
}


.gnav-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
}

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

.gnav-item a {
    position: relative;
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
    padding: 5px 0;
    transition: .3s;
    letter-spacing: .05em;
    color: #333;
}

.gnav-item a.current {
    color: #eb6100;
}

.gnav-list a.is-active {
    color: #eb6100;
    font-weight: bold;
}

.gnav-item a:hover {
    color: #eb6100;
    width: 100%;
}

/* 下層ページ用 Current Nav Color*/
.js-works-nav .is-active,
.js-skill-nav .is-active,
.js-about-nav .is-active,
.js-contact-nav .is-active {
    color: #eb6100;
    font-weight: bold;
}