@charset "utf-8";

body{
    margin: auto;
    background-color: rgb(233, 232, 232);
}

h1{
    font-size: 8vw;
    margin: 1.25vw 39vw 2.2vw 2.4vw;
    font-family: "Alfa Slab One", serif;
    font-weight: 400;
    font-style: normal;
}

h2{
    font-size: 8vw;
    font-family: "Alfa Slab One", serif;
    font-weight: 400;
    font-style: normal;
}

.workstitle, .abouttitle {
    margin: 5.25vw 39vw 0 2.4vw;
}

a { 
    text-decoration: none; /* デフォルトの下線を消す */
    color: black;
}

p {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    margin: 0;
}
h3,a {
    font-size: 3.0vw;
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
}

ul{
    margin: 0;
    padding: 0;
}

li{
    list-style: none;
}

.workspage-txt, .aboutpage-txt{
    margin: 5vw 0 ;
    text-align: center;
}

.mobile_title{
    display: none;
}

/* ハンバーガーアイコンの基本設定 */
.nav_mobile {
    display: none;
}

.hamburger {
    display: block; /* クリックできるようにブロック要素にする */
    width: 30px;
    height: 30px;
    position: relative;
    z-index: 100; /* メニューの上に表示 */
    cursor: pointer;
}

/* 3本の線（span要素）の共通スタイル */
.hamburger span {
    display: block;
    position: absolute;
    height: 3px; /* 線の太さ */
    width: 100%;
    background: #fcfbfb; /* 線の色 */
    transition: all 0.3s ease; /* アニメーション用 */
    left: 0;
}

/* 線の位置調整 */
.hamburger span:nth-child(1) {
    top: 0; /* 1本目 */
}
.hamburger span:nth-child(2) {
    top: 50%; /* 2本目（真ん中） */
    transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
    bottom: 0; /* 3本目 */
}

/* モバイルメニューの非表示とアニメーション設定 */
.mobile_menu ul {
    /* メニューの初期位置 (画面外など) */
    position: fixed;
    top: 0;
    left: 100%; /* 画面右外に隠す例 */
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9); /* メニューの背景色 */
    list-style: none;
    padding-top: 80px;
    transition: left 0.3s ease; /* アニメーション用 */
    z-index: 90; /* アイコンより奥 */
}
.mobile_menu.active ul {
    left: 0;
}

/* アイコンをXマークに変形 */
.hamburger.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg); /* 1本目を45度回転 */
}
.hamburger.active span:nth-child(2) {
    opacity: 0; /* 2本目（真ん中）を非表示 */
}
.hamburger.active span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg); /* 3本目を-45度回転 */
}

a.worksItem {
    display: flex;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin: 0 3.5vw 0 3.5vw;
    gap: 5vw;
    padding: 2vw 0;
    justify-content: space-between;
}

h3.workstitletxt{
    font-size: 4.5vw;
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.1vw;
}


.subTxtTop{
    display: flex;
    margin-top: 5.0vw;
}
.subTxtleft, .subTxtright{
    font-size: 1.2vw;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    margin: 0;
}

.subTxtTop span {
    content: ""; 
}

.subTxtTop span::before {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    margin: 0 1vw; 
    background-color: black;
}

.workspage-subTxtTop span{
    content: ""; 
}
.workspage-subTxtTop span::before{
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    margin: 0 1vw; 
    background-color: black;
}
.subTxtunder{
    font-size: 1.6vw;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    margin-top: 3vw;
}


img{
    width: 100%;
    height: auto; 
}

.worksphoto {
    display: block;
    width: 548px;
    height: 365px;
    overflow: hidden;
}
.worksphoto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aboutContens{
    display: flex;
    border-top: 1px solid black;
    margin: 0 3.5vw 0 3.5vw;
    gap: 5vw;
    padding: 6vw 0;
    justify-content: center;
}
.aboutItem{
    display: flex;
    justify-content: center;
}
.aboutimg{
    width: 75%;
    height: inherit;
    overflow: hidden;
    border-radius: 30px;
}
/* .aboutimg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.aboutTxt-contents{
    display: flex;
    width: 35%;
    flex-direction: column;
    gap: 1.5vw;
}
.mainName, .subName, .aboutmainTxt{
    margin: 0;
}
.mainName{
    font-size: 1.7vw;
    margin-top: 0.5vw;
}
.subName{
    font-size: 1.0vw;
}
.aboutmainTxt{
    font-size: 1.3vw;
}
.aboutsubTxt{
    margin-top: 1.7vw;
    font-size: 1.2vw;
    line-height: 1.5;
}
.aboutothersTxt{
    margin-top: 1.5vw;
    font-size: 1.2vw;
}
.aboutspan{
    width: 75%;
    height: 1px;
    background-color: black;
}
.aboutlink-button{
    padding-bottom: 5px;
    background-image: linear-gradient(#333, #333);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    transition: background-size 0.3s;
    font-size: 3vw;
}
.aboutlink-button:hover {
    background-position: bottom left;
    background-size: 100% 1px;
}
.title-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid black;
    margin: 0.3vw 2.4vw 0 2.4vw;
}

.nav-list, h3.header-titletxt{
    margin-top: 2.5vw;
    margin-bottom: 0.3vw;
}

.list-contents {
    display: flex;
    gap: 2.0vw;
}


/*---------aboutpage---------------*/

.about_prof-wrapper{
    margin: 10vw 2.5vw 10vw 2.5vw;
}

.about_prof-contents {
    display: flex;
    justify-content: center;
    gap: 5vw;
}
.abouttxt_container{
    display: flex;
    flex-direction: column;
}
.aboutsubtxt_container{
    font-size: 1.8vw;
    margin-top: 3vw;
}
.about_subtxt{
    margin-top: 1vw;
}
.aboutpage_subtitle{
    border-bottom: 1px solid #333;
    padding-bottom: 1vw;
}

.about_name {
    font-size: 3vw;
    margin-bottom: 3vw;
}
.about_txt{
    font-size: 2vw;
    margin-top: 1vw;
    line-height: 1.2;
}

.aboutphoto {
    width: 30%;
    height: inherit;
    border-radius: 30px;
}
.skills_box-wrapper {
    display: flex;
    justify-content: center;
    gap: 5vw;
    margin: 8vw 0 3vw 0;
    font-size: 3.5vw;
}
.skills_box {
    font-size: 2.5vw;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    background-color: #66cc9f;
    padding: 40px;
    border-radius: 20px;
    align-items: center;
}
.skills_txt-wrapper {
    margin-top: 5vw;
}
.skills_txt{
    font-size: 2.3vw;
    text-align: center;
    margin-top: 1vw;
}
.strength_values_biography_txt-wrapper{
    display: flex;
    gap: 5vw;
    font-size: 2vw;
    margin: 10vw 10vw 0 10vw ;
    justify-content: space-between;
}
.about_right-txt-wrapper{
    display: flex;
    gap: 1.2vw;
    flex-direction: column;
}


.img_gallery-box{
    display: flex;
    gap: 5px;
    margin-top: 4vw;
}

.img_gallery-box img {
    width: 33.333%;
    height: auto;
    object-fit: contain;
}
.works-overview-top{
    /* display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10vw 2.5vw 10vw 2.5vw; */
    padding: 10vw 6.9vw 10.4vw;
}
.main-img {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}
.main-img-bg {
    background-color: #333;
    padding: 5vw ;
    width: 60%;
    height: inherit;
}

.works-overview-titletxt{
    font-size: 7vw;
}
.workspage-overview-title{
    margin-bottom: 3.5vw;
}
.workspage-subTxtTop{
    display: flex;
    gap: 5px;
    margin-top: 4vw;
    padding-bottom: 5vw;
    border-bottom: 1px solid #333;
    font-size: 2vw;
}
.worksItem {
    display: flex;
    margin: 0 2.5vw 0 2.5vw;
    padding: 10vw 2.5vw 10vw 2.5vw;
    gap: 8vw;
    border-top: 1px solid #333;
}
dl, .urltxt {
    font-size: 2.5vw;
    font-family: sans-serif;
}
.titletxt {
    margin-left: 7vw;
    white-space: nowrap;
}

.works-overview-photo {
    margin-top: 5vw;
    border-top: 1px solid #333;
}
.works-overview-photo-contents{
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 5vw;
}

.wfimg {
    width: 30vw;
}

footer{
    margin-top: 5vw;
}
.footer-menu{
    font-size: 2.8vw;
}
.footer-menu ul {
    display: flex; 
    gap: 30px;    
    padding: 0;    
    margin: 1.25vw 39vw 2.2vw 2.4vw;
}

.mobile_footer-menu {
    display: none;
}

.swiper-slide img{
  width: 100%;
  height: auto;
}


.swiper-wrapper {
  transition-timing-function: linear;
}
    swiper-container {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;
    }

    swiper-slide img {
      display: block;
      width: 100%;
    }

/* ローディング画面全体の設定（画面全体を覆うため必須） */
#loading-screen {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #8fb6a7; /* 背景色を設定 */
    color: #ffffff; /* 数字の色 */
    z-index: 9999; /* 最前面に表示 */
    
    display: flex; 
    justify-content: center;
    align-items: center;
    flex-direction: column; /* 縦に並べる */
    transition: opacity 0.5s ease-out; /* フェードアウトを滑らかにする */
}

/* 数字の表示を調整 */
.loader-content {
    margin-top: 15px;
    font-size: 3em; 
    font-weight: bold;
}

/* メーターとアイコンをまとめるラッパー */
.tracker-and-bar-wrapper {
    position: relative;
    width: 200px; /* メーターとアイコンの動作領域 */
    margin-bottom: 5px;
}

/* メーターの外枠（背景） */
.progress-bar-container {
    width: 100%; 
    height: 10px;
    background-color: #333333;
    border-radius: 5px;
    overflow: hidden; 
}

/* 実際に伸びるメーター */
#progress-bar {
    height: 100%;
    width: 0%; 
    background-color: #ffcc00; /* アイコンと同じ色 */
}

/* 追従アイコンのスタイル */
.progress-tracker {
    position: absolute; 
    bottom: 20px; /* メーターの上に浮かす位置 */
}

/* アイコン画像そのもののスタイル */
.progress-tracker img {
    display: block;
    width: 60%; 
    height: auto;
}

/* ローディング画面非表示時のクラス */
.is-loaded {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none; /* クリックを無効化 */
}

.wrapper {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.loop_text {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 2.5vw;
  overflow: hidden;
  padding-left: 20px;
  color: #ffa07a;
  }

.loop_text:nth-child(odd) {
  animation: loop 50s -25s linear infinite;
}

.loop_text:nth-child(even) {
  animation: loop2 50s linear infinite;
}

@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
}

@keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
}

@media screen and (max-width: 768px){
    h1{
        font-size: 60px;
        margin-right: 2vw;
    }
    h2{
        font-size: 60px;
    }
    a {
        font-size: 5vw;
    }
    .wfimg {
    width: 150px;
    }
    dl {
        font-size: 12px;
    }
    .titletxt {
        margin: 0;
    }
    .workspage-subTxtTop {
        font-size: 12px;
    }
    .mobile_title{
        display: block;
    }
    .nav_mobile {
    display: flex; /* Flexboxを有効にする */
    justify-content: space-between; /* 子要素を両端に寄せる */
    align-items: center; /* 垂直方向の中央揃え */
    padding: 10px 20px; /* 適度な余白 */
    background-color: #333;
    }
    .mobile_list{
        display: block;
        font-size: 10vw;
        color: #ffffff;
        text-align: center;
        font-family: "Alfa Slab One", serif;
        font-weight: 400;
        font-style: normal;
        margin-top: 5vw;
        margin-bottom: 5vw;
    }
    /* .footer-menu {
        display: none;
    }
    .mobile_footer-menu {
        display: block;
        background-color: #333;
    } */

    .title-box {
        display: none;
    }
    .swiper-slide img{
        width: 250%;
    }
    .workstitle, .abouttitle{
        text-align: center;
        margin: 15vw 5.4vw 0 5.4vw ;
    }
    a.worksItem {
        align-items: center;
        flex-direction: column-reverse;
    }
    .worksphoto{
        width: 80%;
        height: inherit;
    }
    .loop_text{
        font-size: 5.5vw;
    }
    h3.workstitletxt {
        font-size: 16px;
        text-align: center;
    }
    .aboutItem{
    display: flex;
    justify-content: center;
    }
    .aboutimg{
        width: 50%;
    }
    .subTxtTop{
        justify-content: center;
    }
    .subTxtleft, .subTxtright{
        font-size: 14px;
        text-align: center;
    }
    .subTxtunder {
        font-size: 12px;
        text-align: center;
    }
    .aboutTxt-contents{
        width: 100%;
    }
    
    .aboutContens{
    flex-direction: column;
    align-items: center;
    text-align: center;
    }
    .aboutContens{
        align-items: center;
    }
    .aboutspan{
        width: 100%;
    }
    .works_titletxt_br {
        display: none;
    }
    .subName{
        font-size: 12px;
    }
    .mainName{
        font-size: 20px;
    }
    .aboutmainTxt-box{
        margin: 20px 0;
    }
    .aboutmainTxt{
        font-size: 16px;
    }
    .aboutsubTxt{
        font-size: 16px;
        line-height: 1.5;
    }
    .aboutothersTxt{
        font-size: 16px;
    }
    .about-link{
        margin-top: 20px;
    }
    .aboutlink-button{
        font-size: 30px;
    }
    .about_prof-contents{
        flex-direction: column;
        align-items: center;
    }
    .abouttxt_container{
        text-align: center;
    }
    .aboutphoto{
        width: 70%;
    }
    .about_name{
        font-size: 24px;
    }
    .about_txt {
        font-size: 16px;
    }
    .about_subtxt{
        font-size: 14px;
        text-align: center;
    }
    .skills_txt{
        font-size: 16px;
    }
    .skills_box{
        padding: 30px;
        font-size: 12px;
    }
    .skills_box_txt{
        font-size: 16px;
    }
    .aboutpage_subtitle{
        text-align: center;
        font-size: 40px;
    }
    .strength_values_biography_txt-wrapper{
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
    }
    .about_left-txt {
        font-size: 18px;
    }
    .about_right-txt {
        font-size: 16px;
    }

}