@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* リセットcss*/
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #334155;
  background-color: #FAF9F6;
}

main {
    /* margin-top: 15vh; */
    
}

.main-visual {
    display: flex;
    position: relative;
    height: 45vw;
    align-items: center;      /* 垂直方向の中央寄せ */
    justify-content: center;  /* 水平方向の中央寄せ（margin: autoの代わり） */
    background: linear-gradient(135deg, #fcfaf5 0%, #f1f3f5 100%);
}

.mv-box {
    display: flex;
    max-width: 100%;
}

.scroll {
  position: absolute;
  right: 10%;
  bottom: -10px;
  z-index: 10;
}

.scroll-text {
  color: #334155;
  font-size: 1.1vw;
  text-align: center;
  transform: rotate(90deg);
}

.scroll-border {
  position: relative;
  top: 20px;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

.scroll-border::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 40px;
  top: 0;
  left: 0;
  right: 0;
  background: #334155;
  animation: scrollbar 2.0s ease-in-out infinite;
  margin: auto;
}

@keyframes scrollbar {
  0% {
    height: 0;
    top: 0;
  }
  30% {
    height: 100%;
  }
  100% {
    top: 100%;
  }
}

.vertical-label {
    margin-right: 5vw;
    writing-mode: vertical-lr;
    letter-spacing: 0.5em;
    font-size: 1.3vw;
    color: rgb(148 163 184 / 50%);
}

h2 {
    font-size: 4vw;
    line-height: 1.8;
    white-space: pre-wrap;
    font-family: 'Tenor Sans', serif; /* エレガントな英字フォント */
}

.mv-sub {
    line-height: 3;
    font-size: 1.2vw;
    letter-spacing: 0.4em;
    color: #94A3B8;
}

.skill-box {
    width: 70%;
    margin-top: 7%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 7%;
}

h3 {
    text-align: center;
    font-size: 1.5vw;
}

.h3-decoration {
    display: block;
    line-height: 3;
    font-family: 'Tenor Sans', serif; /* エレガントな英字フォント */
    font-size: 0.8vw;
    color: #94A3B8;
    letter-spacing: 0.1em;
}

.skill-container {
    display: flex;
    margin-top: 3%;
    gap: 5%;
}

.skill-card {
    width: 30%;
    padding-top: 2%;
    padding-bottom: 2%;
}

.skill-iconbox {
    text-align: center;

}
.fa-brands {
    font-size: 4vw;
}

.skill-container h4 {
    text-align: center;
    font-size: 1.4vw;
    line-height: 3;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.skill-container p {
    line-height: 1.7;
    font-size: 1vw;
}

.design-work-box {
    margin-bottom: 7%;
}

.works-inner {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.works-container {
    display: flex;
    margin-top: 4%;    
    gap: 5%;
}

.works-card {
    width: 30%;
    
}

.works-card a {
    text-decoration: none;
    color: #334155;
}

.works-card-img {
    margin-bottom: 4%;
    background-color: antiquewhite;
    overflow: hidden;    
}

.works-card-img img {
    width: 100%;
    vertical-align: bottom;
    transition: 0.5s;
}

.works-card:hover img {
    transform: scale(1.1,1.1);
    transition: 0.5s;
}

.works-tags {
    display: flex;
    gap: 5%;
}

.tag-status {
    margin-bottom: 4%;
    padding: 1% 2%;
    border-radius: 30%;
    font-size: 1vw;
    background-color: #DDDACE;
}

.tag-category {
    padding: 2%;
    font-size: 1vw;
}

.works-card h4 {
    font-size: 1.3vw;
}

.more-btn {
    width: 16%;
    margin-top: 4%;
    margin-left: auto;
    text-align: center;
    border: 1px solid #334155;
}

.more-btn a {
    display: block;
    line-height: 2.4;
    color: #334155;
    transition: 0.5s;
    text-decoration: none;
}

.more-btn a:hover {
   background-color: #334155;
    color: #FAF9F6; /* 文字色を背景のオフホワイトに変える */
    transition: 0.5s;
    
    /*  transitionは変化に時間をかけるプロパティ。1s=1秒 */
}


/*スライドショー*/
.slide-box {
    position: relative;
    width: 100%;
    height: 20vw;
    margin-top: 5%;
    overflow: hidden;
}

.slide-box:hover .image-frame {
	animation-play-state: paused;
    /* ホバー時に止めるときの記述 */
}

.image-frame {
    position: absolute;
	top: 0;
    display: flex;
    width: 378vw;
	height: 20vw;
    animation: move 20s linear infinite;
    transform: translateX(0vw);
}

@keyframes move {
    100% {
        transform: translateX(-189vw);
    }
}

.image-frame div {
    width: 20vw;
	margin-right: 1vw;
}

.image-frame div img {
	width: 100%;
	border-radius: 1vw;
}





.photography-box {
    margin-bottom: 7%;
}

.photo-inner {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.photo-container {
    display: flex;
    margin-top: 4%;
    gap: 5%;
}

.photo-card {
    width: 30%;
}

.photo-card-img  img {
    width: 100% ;
}

.photo-more {
    width: 70%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    background-color: red;
}