/*
Theme Name: takahashi-portfolio_wp
Theme URL: lilngg79.com
Description: 高橋のポートフォリオ
Authot: takahashi
Version: 1.0
*/

/* 共通 */
html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    font-family: "futura-pt", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

.about__page,
.works__page,
.work-detail__page,
.category__page {
    overflow: visible;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

a {
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s;
}

a:hover {
    opacity: 0.5;
}

p {
    line-height: 1.8;
    text-align: justify;
}

.bg-white {
    background-color: #fff;
}

.bg-black {
    background-color: #000;
}

.bg-gray {
    background-color: #F1F1F1;
}

.txt-white {
    color: #fff;
}

.txt-black {
    color: #000;
}

.font-l {
    font-weight: lighter;
}

.font-n {
    font-weight: normal;
}

.font-b {
    font-weight: bold;
}

.line-black {
    border-color: #000;
}

.line-white {
    border-color: #fff;
}

/* observer */
.observer {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ,transform 1s;
}

.observer.appear {
    opacity: 1;
    transform: none;
}

/* transition-animation */
.transition-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.transition-animation__box {
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background:  linear-gradient(
        to right,
        #fff 0%,
        #000 50%,
        #fff 100%);
    padding: 0.5px;
    border-radius: 50%;
    animation: transition-animation 5s linear infinite;
}

.transition-animation__title {
    position: absolute;
    overflow: hidden;
    z-index: 10;
}

.transition-animation__box span {
    position: absolute;
    border-radius: 50%;
    background: #000;
    width: 99.5%;
    height: 99.5%;
}

.transition-animation__title--text {
    display: inline-block;
    letter-spacing: -0.15rem;
    animation: transition-text-animation 0.8s forwards;
    transform: translateY(3rem);
}

.loaded {
    opacity: 0;
    display: none;
    transition: all 0.5s;
}

.content {
    visibility: hidden;
    transition: all 0.5s;
    transition-delay: 0.5s;
}

.fv__title,
.fv__img {
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.5s;
    transition-delay: 0.5s;
}

.fv-appeare {
    opacity: 1;
    transform: translateY(0rem);
}

@keyframes transition-animation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes transition-text-animation {
    0% {
        transform: translateY(3rem);
    }

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

/* @keyframes fv-title-animation {
    0% {
        transform: translateY(3rem);
    }

    100% {
        transform: translateY(0rem);
    }
} */

.about__page,
.works__page,
.work-detail__page,
.category__page {
    opacity: 0;
    animation: appeare 0s ease 0.3s 1 normal forwards running;
}

@keyframes appeare {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

.animation__bg-black,
.animation__bg-white {
    display: block;
    content: "";
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 0;
    left: 0;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-name: PageAnime-btt;
}

.animation__bg-black {
    height: 100vh;
    animation-duration: 0.8s;
}

.animation__bg-white {
    height: 200vh;
    animation-duration: 0.9s;
}

@keyframes PageAnime-btt {
    0% {
        transform-origin: bottom;
        transform: scaleY(0);
    }
    50% {
        transform-origin: bottom;
        transform: scaleY(1);
    }
    50.001% {
        transform-origin: top;
    }
    100% {
        transform-origin: top;
        transform: scaleY(0);
    }
}

.fv {
    padding: 130px 80px 0px;
}

section {
    margin: -1px 0px;
}

section,
footer {
    padding: 80px 80px;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 48px 80px;
    z-index: 10;
    mix-blend-mode: difference;
}

header .header_log {
    font-size: 20px;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__items {
    font-size: 18px;
    width: 500px;
    display: flex;
    justify-content: space-between;
}

.nav__items li {
    font-weight: 400;
}

.nav__works {
    position: relative;
    cursor: pointer;
}

.nav__works::after {
    content: "▼";
    font-size: 12px;
}

.nav__works--items {
    opacity: 0;
    width: 200px;
    padding: 10px;
    position: absolute;
    transition: 0.5s;
    z-index: 1;
}

.nav__work {
    padding: 4px 0px;
    mix-blend-mode: difference;
    /* ↑背景に合わせて文字色を変化 */
}

.nav__works:hover .nav__works--items {
    opacity: 1;
}

.scroll-icon{
	position:absolute;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1.0s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scroll-icon span{
    /*描画位置*/
	position: absolute;
	left:-20px;
	bottom:10px;
    /*テキストの形状*/
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scroll-icon:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #fff;
    transform: skewX(-31deg);
}

.scroll-icon:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 50px;
	background:#fff;
}

.tags {
    display: flex;
    margin: 20px 0px;    
    font-size: 14px;
}

/* .tags span {
    display: block;
    border: solid 0.5px #fff;
    padding: 5px 15px;
    margin-right: 10px;
    border-radius: 20px;
}

.s-graphic .tags span,
.s-web .tags span,
.s-ai .tags span {
    border: solid 0.5px #000;
} */

.tags a {
    display: block;
    border: solid 0.5px #fff;
    padding: 4px 12px;
    margin-right: 10px;
    border-radius: 20px;
}

.tags a:nth-child(1) {
    display: none;
}

.s-graphic .tags a,
.s-web .tags a,
.s-ai .tags a {
    border: solid 0.5px #000;
}

.back__btn {
    display: block;
    margin: 0px auto 50px;
    color: #fff;
    line-height: 1;
    width: 3em;
    height: 3em;
    border: 0.5px solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(25%) rotate(-45deg);
  }

.footer__text {
    display: flex;
    justify-content: space-between;
}

.footer__text p:nth-child(1) {
    font-size: 24px;
}

.footer__text p:nth-child(2) {
    font-size: 12px;
}

.page__title {
    display: flex;
    align-items: center;
    padding: 250px 80px 200px;
}

.page__title h1 {
    font-size: 140px;
    margin-right: 50px;
}

.page__title p {
    font-size: 24px;
}

.action__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 70px;
}

.prev-btn,
.next-btn {
    position: relative;
    display: flex;
}

.action__btn a {
    display: block;
    font-size: 30px;
    font-weight: lighter;
    margin: 0px 100px;
}

.list-back__btn a {
    display: block;
    border: solid 0.5px #000;
    padding: 20px 50px;
}

.dli-chevron-round-left {
    display: inline-block;
    vertical-align: middle;
    color: #000;
    line-height: 1;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateX(25%) rotate(-135deg);
    top: 0px;
    left: 80px;
  }
  
  .dli-chevron-round-left::before, .dli-chevron-round-left::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 0.5px;
  }
  
  .dli-chevron-round-left::before {
    top: 0;
    left: 0;
    right: 0;
    height: 0.5px;
  }
  
  .dli-chevron-round-left::after {
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.5px;
  }

  .dli-chevron-round-right {
    display: inline-block;
    vertical-align: middle;
    color: #000;
    line-height: 1;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    transform: translateX(-25%) rotate(45deg);
    top: 0px;
    right: 80px;
  }
  
  .dli-chevron-round-right::before, .dli-chevron-round-right::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 0.5px;
  }
  
  .dli-chevron-round-right::before {
    top: 0;
    left: 0;
    right: 0;
    height: 0.5px;
  }
  
  .dli-chevron-round-right::after {
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.5px;
  }

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

    .transition-animation__box {
        width: 330px;
        height: 330px;
    }

    .transition-animation__title {
        font-size: 25px;
    }

    .fv {
        padding: 80px 20px 0px;
    }

    section {
        padding: 48px 20px;
    }
    
    footer {
        padding: 50px 20px;
    }

    header {
        width: 100%;
        padding: 20px 20px;
        margin-bottom: -1px;
    }

    .header_log h1 {
        font-size: 24px;
    }

    nav {
        position: relative;
    }

    .nav-open-btn,
    .nav-close-btn{
        position: absolute;
        width: 50px;
        height:50px;
        cursor: pointer;
        z-index: 11;
    }

    .nav-open-btn {
        right: -12px;
    }

    .nav-close-btn {
        right: 11px;
        top: 11px;
    }

    .nav-open-btn.hide {
        display: none;
    }
        
    .nav-open-btn span,
    .nav-close-btn span {
        display: inline-block;
        position: absolute;
        left: 13px;
        height: 2px;
    }

    .nav-open-btn span {
        background-color: #fff;
    }

    .nav-close-btn span {
        background-color: #fff;
    }
    
    .nav-open-btn span:nth-of-type(1) {
        top:22px;	
        width: 50%;
    }
    
    .nav-open-btn span:nth-of-type(2) {
        top:29px;
        width:50%;
    }
    
    .nav-close-btn span:nth-of-type(1) {
        top: 20px;
        left: 16px;
        transform: translateY(6px) rotate(-30deg);
        width: 50%;
    }
    
    .nav-close-btn span:nth-of-type(2) {
        top: 32px;
        left: 16px;
        transform: translateY(-6px) rotate(30deg);
        width: 50%;
    }

    .nav__overlay {
        opacity: 0;
        pointer-events: none;
        padding: 20px;
        width: 100vw;
        height: 100vh;
        box-sizing:border-box;
        z-index: 10;
        position: fixed;
        top: 0;
        left: 0;
        transition: opacity 1.0s;
    }

    .nav__overlay .header_log h1 {
        opacity: 0;
        font-size: 56px;
        transform: translateY(20px);
        transition: opacity 1.25s ,transform 1.25s;
    }

    .nav__overlay li {
        margin-top: 10px;
        font-size: 48px;
        font-weight: lighter;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1.25s ,transform 1.25s;
    }

    .nav__overlay.show{
        opacity: 1;
        pointer-events: auto;
    }

    .nav__overlay .header_log h1 {
        opacity: 1;
        transform: none;
    }

    .nav__overlay.show li{
        opacity: 1;
        transform: none;
    }

    .nav__overlay .nav__items {
        margin-top: 50px;
    }

    .nav__work {
        padding: 0px;
    }

    .nav__works--items {
        opacity: 1;
        display: block;
        position: static;
        width: 100%;
        padding: 0px;
    }

    .nav__works--items li {
        margin: 4px 0px 0px 10px;
        font-size: 20px;
    }

    .nav__works::after {
        content: " ";
    }

    .scroll-icon span{
        left:-10px;
        bottom:70px;
    }
    
    /* 矢印の描写 */
    .scroll-icon:before {
        bottom: 0;
        right: -5.5px;
        bottom: 10px;
    }
    
    .scroll-icon:after{
        bottom:10px;
    }

    .tags {
        display: flex;
        margin: 16px 0px 12px;    
        font-size: 12px;
    }
    
    .tags .tag {
        border: solid 0.5px #fff;
        padding: 4px 12px;
        margin-right: 10px;
        border-radius: 20px;
    }

    .back__btn {
        width: 2em;
        height: 2em;
      }

    .footer__text {
        display: block;
        text-align: center;
    }
    
    .footer__text p {
        font-size: 14px;
    }

    .page__title {
        display: block;
        padding: 120px 20px 40px;
        margin-bottom: -1px;
    }

    .page__title h1 {
        font-size: 60px;
        margin-right: 0px;
        margin-bottom: 10px;
    }

    .page__title p {
        font-size: 16px;
    }

    .action__btn {
        display: block;
        text-align: center;
    }
    
    .action__btn a {
        display: inline;
        font-size: 24px;
        margin: 0px 0px;
    }

    .list-back__btn {
        margin: 0px auto;
        padding: 10px 0px;
    }

    .list-back__btn a {
        padding: 20px 40px;
    }

    .prev-btn,
    .next-btn {
        display: block;
    }

    .dli-chevron-round-left {
        width: 1rem;
        height: 1rem;
        top: 50px;
        left: -130px;
    }

    .dli-chevron-round-right {
        width: 1rem;
        height: 1rem;
        top: -46px;
        right: -130px;
    }

    .action__btn {
        padding-bottom: 40px;
    }
}

/* top */

.fv__content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: start;
    min-height: 85vh;
}

.fv__title {
    position: absolute;
    z-index: 1;
}

.fv__title h1 {
    font-size: 10vw;
}

.fv__img-pc {
    position: absolute;
    right: -80px;
    bottom: 1px;
    width: 70vw;
}

.fv__img-pc img {
    width: 100%;
}

section {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.section__title {
    writing-mode: vertical-lr;
    min-width: 200px;
}

.section__title h1 {
    font-size: 88px;
}

.about__content,
.works__boxes,
.profile__content,
.skills__boxse,
.strengths__boxse,
.s-detail .content__box {
    display: grid;
    gap: 48px;
}

.about__content,
.works__content,
.profile__content,
.detail__content {
    max-width: 1350px;
}

.about__content,
.profile__content {
    display: flex;
    align-items: stretch;
}

.s-detail .content__box {
    grid-template-columns: 1fr 3fr;
}


.about__img,
.profile__img {
    width: 75%;
}

.about__text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.about__text .text__name,
.profile__text .text__name {
    margin-bottom: 20px;
}

.text__name {
    font-size: 20px;
}

.works-lists .more,
.works-lists .more-line-diagonal,
.works .s-movie .more,
.works .s-movie .more-line-diagonal {
    border-color: #fff;
}

.more,
.more-line-diagonal,
.works .s-graphic .more,
.works .s-graphic .more-line-diagona,
.works .s-web .more,
.works .s-web .more-line-diagona,
.works .s-ai .more,
.works .s-ai .more-line-diagona {
    border-bottom: solid 0.5px #000;
    border-color: #000;
}

.more {
    position: relative;
    font-size: 40px;
}

.more-line-diagonal {
    position: absolute;
    width: 70px;
    top: 54.5px;
    right: -5px;
    transform: rotate(30deg);
}

.s-works {
    color: #fff;
}

.works__boxes,
.skills__boxse,
.strengths__boxse {
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 48px;
    gap: 80px;
}

.skill__name,
.strength__name {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.skill__name p,
.strength__name p {
    font-size: 24px;
}

.skill__name img {
    width: 15%;
    margin-right: 16px;
}

.skill__text p:nth-child(2) {
    margin-bottom: 10px;
}

.skill__text .experience {
    display: flex;
}

.skill__text .experience .number {
    font-size: 24px;
    font-weight: 500;
}

.skill__text .experience p:nth-child(1) {
    margin-right: 16px;
}

.work__box__title {
    font-size: 24px;
    line-height: 2rem;
}

.s-detail .detail__top img {
    width: 100%;
    height: auto;
    /* background-color: #D9D9D9; */
}

.s-detail .content__title {
    font-size: 32px;
    margin: 75px 0px;
}

.s-detail .overview-first,
.s-detail .box__content--detail,
.s-detail .box__content {
    margin-bottom: 30px;
}

.s-detail .content__box {
    margin-bottom: 20px;
}

.s-detail .color__box img {
    width: 100%;
    height: 140px;
    /* background-color: #D9D9D9; */
    margin-top: 30px;
}

.s-detail .charge .box__content--detail {
    display: flex;
    justify-content: space-between;
    width: 200px;
}

.s-detail {
    width: 100%;
    height: auto;
}

.tool .box__content {
    display: flex;
}

.tool .box__content img {
    width: 80px;
    height: 80px;
    margin-right: 16px;
}

.detail__img {
    width: 50%;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.detail__img img {
    margin-bottom: 48px;
}

.category .tags a {
    border: solid 0.5px #000;
}

@media screen and (max-width: 768px) {
    .fv__title h1 {
        font-size: 15vw;
    }
    
    .fv__img-sp {
        position: absolute;
        bottom: 1px;
        left: auto;     
        right: -20px;   
        height: 66vh;   
    }

    .fv__img-sp img {
        height: 100%;        
    }

    section {
        display: block;
    }

    .section__title {
        writing-mode: horizontal-tb;
        margin-bottom: 30px;
    }

    .section__title h1 {
        font-size: 40px;
    }

    .about__content,
    .works__boxes,
    .profile__content,
    .skills__boxse,
    .strengths__boxse {
        display: block;
    }

    .about__content,
    .works__content,
    .profile__content {
        width: 100%;
    }

    .about__img,
    .profile__img {
        width: 100%;
    }

    .about__text {
        display: block; 
    }

    .text__content {
        font-size: 16px;
    }

    .text__name {
        font-size: 20px;
        margin: 24px 0px;
    }

    .about__text--box {
        margin-bottom: 30px;
    }

    .more {
        position: relative;
        font-size: 24px;
    }

    .more-line-diagonal {
        position: absolute;
        width: 50px;
        top: 30.5px;
        right: -3.5px;
        transform: rotate(30deg);
    }

    .s-works {
        margin-bottom: -1px;
    }
    
    .works__boxes,
    .skills__boxse,
    .strengths__boxse {
        margin-bottom: 36px;
    }

    .work__box,
    .skill__box,
    .strength__box {
        margin-bottom: 36px;
    }

    .work__box p,
    .skill__name,
    .strength__name {
        font-size: 24px;
    }

    .skill__name,
    .strength__name {
        margin-bottom: 4px;
    }

    .skill__text,
    .strength__text {
        font-size: 16px;
    }

    .s-detail .detail__top img {
        height: 100%;
        width: 100%;
    }
    
    .s-detail .content__title {
        font-size: 24px;
        margin: 24px 0px;
    }
    
    .s-detail .overview-first,
    .s-detail .box__content--detail,
    .s-detail .box__content {
        margin-bottom: 10px;
    }
    
    .s-detail .content__box {
        display: block;
        font-size: 16px;
        margin-bottom: 24px;
    }

    .s-detail .box__title {
        margin-bottom: 4px;
    }
    
    .s-detail .color__box img {
        height: 100%;
        width: 100%;
        margin-top: 10px;
    }
    
    .s-detail .charge .box__content--detail {
        width: 150px;
    }
    
    .s-detail .detail__img img {
        height: 100%;
        width: 100%;
        background-color: #D9D9D9;
    }

    .about__text .text__name,
    .profile__text .text__name {
        margin-bottom: 16px;
    }

    .tool .box__content img {
        width: 72px;
        height: 72px;
        margin-right: 12px;
    }

    .detail__img {
        width: 100%;
    }

    .detail__img img {
        margin-bottom: 24px;
    }
}

/* contact */
.contact__box {
    display: flex;
    align-items: center;
    border-bottom: #e6e6e6 solid 1px;
    margin-bottom: 48px;
}

.contact__box--title {
    width: 15%;
    display: flex;
    align-items: center;
}

.contact__box--title span {
    display: block;
    color: #fff;
    background-color: #000;
    padding: 1px 4px 0px;
    margin-right: 8px;
    font-size: 12px;
}

.contact__box--content {
    width: 80%;
}

.contact__box input,
.contact__box textarea {
    background: none;
    border: none;
    width: 100%;
}

.contact__btn {
    margin-top: 48px;
}

.contact__btn input,
.thanks .prev a {
    background: none;
    border: solid 1px #000;
    width: 100%;
    font-size: 40px;
    padding: 8px;
    cursor: pointer;
    font-weight: 100;
}

.contact__textarea {
    align-items: flex-start;
    border-bottom: none;
}

.contact__box textarea {
    border: solid 1px #e6e6e6;
}

.wpcf7-list-item {
    margin: 0px;
}

.thanks {
    font-weight: 100;
    text-align: center;
    font-size: 20px;
    display: block;
}

.thanks .prev a {
    display: block;
    width: 35%;
    margin: 80px auto 0px;
}

.thanks .prev p {
    text-align: center;
}

@media screen and (max-width: 768px){
    .contact__box {
        display: block;
        margin-bottom: 40px;
    }

    .contact__box--title {
        width: 100%;
        margin-bottom: 4px;
    }

    .contact__box--content {
        width: 100%;
    }

    .contact__btn input,
    .thanks .prev a {
        font-size: 36px;
    }

    .thanks {
        font-size: 14px;
    }

    .thanks .prev a {
        width: 100%;
        margin-top: 40px;
    }

}