/*CSSはこっち*/

/*img継承元*/
img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: bottom;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
}

/*li継承元*/
li {
    /*マーカーを消す*/
    list-style: none;
}

/*a継承元*/
a {
    /*アンダーラインを消す*/
    text-decoration: none;
}

/* ヘッダー */

/*ヘッダーメイン*/
.header_main {
    padding: 0 2%;
    max-width: 1366px;
    width: 100%;
    height: 80px;
    margin: auto;
    /* 子要素の横並び */
    display: flex;
}

.header_main .container {
    margin: 0 1%;
    padding: 0 1%;
}

/*ロゴ*/
.header_main .logo {
    padding-top: 5%;
}

/*ナビゲーション*/
.nav {
    margin-top: 5%
}

.nav span {
    display: block;
    font-style: normal;
    color: gray;
    font-size: 1.4rem;
    font-weight: 500;
}

.nav li a {
    text-align: center;
}

/*マウスオーバーで色変更*/
.nav li:hover span {
    color: #E39B27;
}

/*相対位置指定*/
.nav-link {
    position: relative;
}

/*前のボーダーライン*/
.first:before {
    position: absolute;
    left: 0;
    top: 15%;
    content: '';
    width: 2px;
    height: 70%;
    background-color: black;
}

/*後ろのボーダーライン*/
.nav-link:after {
    position: absolute;
    right: 0;
    top: 15%;
    content: '';
    width: 2px;
    height: 70%;
    background-color: black;
}

/*スマホ版のメニュー*/
.sp_menu_link_list {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    z-index: 3;
}

/*スマホ版メニューのボタン*/
.sp_menu_link_list li .menu_btn {
    display: block;
    width: 60px;
    height: 60px;
    background: url(../img/menu01.png) no-repeat center / 100%;
}

/*スマホ版メニューのボタンクリック後*/
.sp_menu_link_list li .menu_btn.open {
    background: url(../img/close01.png) no-repeat center / 100%;
    margin-bottom: 0;
}

/*スマホ版メニューの中身*/
.sp_nav_box {
    display: none;
}

/*メイン*/
/*ファーストビュー*/
.pc_firstview img{
    padding-top: 5%;
    max-width: 70%;
    height: auto;
} 

/*メイン(Works)*/
.main_main{
    max-width: 1366px;
    width: 100%;
    margin: auto;
    position: relative;
}

/*メインタイトル*/
.main_main h2 {
    padding-top: 3%;
    /*padding-bottom: 3%;*/
}

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

.main_main h3 {
    padding-top: 3%;
    padding-bottom: 3%;
}

/*横スクロールアニメーション(PC)*/
@keyframes infinity-scroll-left {
    from {
    transform: translateX(0);
    }
    to {
    transform: translateX(-100%);
    }
}

.pc_scroll-infinity .scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}

.pc_scroll-infinity .scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}

.pc_scroll-infinity .scroll-infinity__list--left {
  animation: infinity-scroll-left 40s infinite linear 0.5s both;
}

.pc_scroll-infinity .scroll-infinity__item {
  width: calc(150vw / 6);
}

.pc_scroll-infinity .scroll-infinity__item>img {
  width: 100%;
}

/*横スクロールアニメーション(SP)*/
@keyframes infinity-scroll-left {
    from {
    transform: translateX(0);
    }
    to {
    transform: translateX(-100%);
    }
}

.sp_scroll-infinity .scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}

.sp_scroll-infinity .scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}

.sp_scroll-infinity .scroll-infinity__list--left {
  animation: infinity-scroll-left 40s infinite linear 0.5s both;
}

.sp_scroll-infinity .scroll-infinity__item {
  width: calc(100vw / 3);
}

.sp_scroll-infinity .scroll-infinity__item > img {
  width: 100%;
}

/*メイン(スキル)*/
.main_skill {
    padding-top: 5%;
}

.main_skill h2 {
    text-align: center;
}

/*メイン(プロフィール)*/
.main_profile {
    padding-top: 5%;
}

.main_profile h2 {
    text-align: center;
}

/*メイン(コンタクト)*/
.main_contact {
    padding-top: 5%;
}

.main_contact h2 {
    text-align: center;
}

/*見出しのドット*/
.skill span:before {
    content: '・';
}

.profile span:before {
    content: '・';
}

.contact span:before {
    content: '・'; 
}

/*内容の文字サイズ*/
.skill span {
    font-size: 1.4rem;
}

.profile span {
    font-size: 1.4rem;
}

.contact span {
    font-size: 1.4rem;  
}

.contact span.stop{
    color: red;
}

/*フッター*/

/*ロゴ*/
.footer_bottom .logo {
    padding-top: 5%;
}

/*ナビゲーション*/
.footer_bottom .nav {
    margin-bottom: 5%;
}

/*メディアクエリ*/
@media (max-width: 768px){/*768px以下の時適用*/

    /*スマホ版ヘッダーメイン*/
    .header_main{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        min-height: 60px;
        background-color: #fff;
        padding: 0 0;
        z-index: 1;
    }

    /*スマホ版メニューの中身*/
    .sp_nav_box.open {
        opacity: 100;
        display: block;
        transform: translateX(0%);
    }

    .sp_nav_box {
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        color: #fff;
        background: rgba(71, 70, 73, 0.6);
        text-align: center;
        width: 100%;
        transform: translateY(-100%);
        transition: all 0.6s;
    }

    .sp_nav_box ul {
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    .sp_nav_box ul li {
        list-style-type: none;
        padding: 0;
        width: 100%;
        transition: .4s all;
    }

    .sp_nav_box ul li a {
        display: block;
        color: #fff;
        padding: 1em 0;
        text-decoration: none;
        font-size: 1.4rem;
    }

    .sp_nav_box ul li:last-child {
        padding-bottom: 0;
    }

    .sp_nav_box ul li:hover{
        background :#ddd;
    }

    /*スマホ版メイン*/
    .sp_firstview img {
        padding-top: 90px;
        max-width: 70%;
        height: auto;
    } 

    /*スマホ版メイン(ワークス)*/
    .main_main {
        padding-top: 90px;
    }

    /*スマホ版メイン(スキル)*/
    .main_skill {
        padding-top: 80px;
    }

    /*スマホ版メイン(プロフィール)*/
    .main_profile {
        padding-top: 80px;
    }

    /*スマホ版メイン(コンタクト)*/
    .main_contact {
        padding-top: 80px;
    }

    /*内容部分のスマホ版文字サイズ*/
    .skill span {
        font-size: 1.2rem;
    }

    .profile span {
        font-size: 1.2rem;
    }

    .contact span {
        font-size: 1.2rem;  
    }
}