@charset "UTF-8";

body {
    overflow-x:hidden;
    font-family: "Yu Mincho", "Hiragino Mincho ProN";
}
main {
    padding-top: 80px;
}
img {
    z-index: 0;
}


.about-photo {
    width: 40%;
    rotate: 5deg;
}
.about-text {
    margin-left: 430px;
    margin-top: 3%;
    text-align: left;
}

/*プロフィール*/
.about-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.about-text {
    margin: 0 auto;
    text-align: center;
    line-height: 1.8;
    font-size: 16px;
}
.about-photo {
width: 50%;
height: auto;
margin-top: 50px;
margin-bottom: -50px;
}

.profile-section {
    background: #3f3f3f;
    margin-top: 120px;
    color: white;
    text-align: center;
    padding-top: 100px;
}
.film-bg {
    background-image: url("img/Group\ 16\ \(1\).png");
    background-repeat: repeat-x;
    background-size: auto 1px;
    height: 10px;
    margin-bottom: 100px;
}
.scroll-box {
  margin-top: -50px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.scroll-box::-webkit-scrollbar {
    height: 8px;
}
.card {
    flex: 0 0 400px;
    text-align: left;
    white-space: normal;
    scroll-behavior: smooth;
}

.card-img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 40px;
}
.profile-cards {
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 120px;
    gap: 100px;
    text-align: left;
}

/*強み*/
.strength-section {
    margin-top: 150px;
}
.strength-section h2 {
    margin-bottom: 50px;
}
.box-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: -90px;
    text-align: left;
}
.strength-item:nth-child(odd) {
    margin-right: 50px;
}
.strength-item:nth-child(even) {
    margin-left: 50px;
}

.box {
    position: relative;
    width: 100%;
    padding: 20px -40px;
}

.box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 1px;
    background: #000;
    animation: none;
}
.box::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    width: 1px;
    height: 0;
    background: #000;
    animation: none;
}
.box.active::before {
    animation: lineHorizontal .5s linear forwards;
}
.box.box.active::after {
    animation: lineVertical .5s linear .5s forwards;
}

@keyframes lineHorizontal {
    0% {width: 0;}
    100% {width: 100%;}
}
@keyframes lineVertical {
    0% { height: 0;}
    100% {height: 100%;}
}

.skill-title span {
  opacity: 0;
  transform: translateY(10px);
  display: inline-block;
  transition: all 0.3s ease;
}

.skill-title.show span {
  opacity: 1;
  transform: translateY(0);
}



@media screen and (max-width: 480px) {
  body {
    overflow-x: hidden;
    font-size: 11px;
  }
  .about-text {
   font-size: 10px;
  }
  .about-section h2 {
    margin-top: 40px;
  }
 .card-img {
    width: 80%;
 }
 .card {
    max-width: 80%;
 }
 .profile-cards {
    margin-top: -50px;
 }
 .profile-section {
    margin-top: 150px;
 }
 .profile-section h2 {
    margin-top:-10px;
 }

  .box-inner {
    display: grid !important;
    grid-template-columns: 1fr !important; /* ←これで縦1列 */
    gap: 20px !important;
    padding: 20px !important;
  }

  .strength-item {
    width: 100% !important;
    margin: 0 auto !important;
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 30px !important;
  }

  .box::before,
  .box::after,
  .box.active::before,
  .box.active::after {
    display: none !important;
  }

  .strength-item {
  border-bottom: 1px solid transparent;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.strength-item.active {
  border-bottom-color: #ccc;
  opacity: 1;
  transform: translateY(0);
}

.strength-section h2 {
    margin-top: 120px;
    margin-bottom: 50px;
}
}

@media screen and (max-width: 780px) {

  .strength-item h3 {
    font-size: 12px;
  }
  .strength-item p {
    font-size: 10px;
  }
}

@media screen and (max-width: 1024px) {

  .strength-item h3 {
    font-size: 14px;
  }
  .strength-item p {
    font-size: 12px;
  }
}