@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  color: #545353;
  font-family: "Century Gothic","Futura PT", "Segoe UI", sans-serif;
  /* font-family: "Futura PT","Century Gothic","Segoe UI", sans-serif; */
}
a {
  color: #545353;
  text-decoration: none;
  transition: 0.3s;
}
a:hover {
  opacity: 0.7;
}
img {
  vertical-align: bottom;
  object-fit:cover;  
  width: 100%;
  height: auto;
}
iframe {
  vertical-align: bottom;
}
li {
  list-style: none;
}

.eng{
  text-transform: uppercase;
}

.h-ttl{
  font-size: 66px;
  letter-spacing: 0.04em;
  font-weight: 500;
  position: relative;
  line-height: 0.7;
  margin-left: 375px;
}

.h-ttl::before {
    position: absolute;
    content: "";
    top: 50%;
    width: 150px;  /* 横線の幅 */
    height: 2px;  /* 横線の高さ */
    left: -170px; 
    background-color: #a09a9a;
}

.h-ttl.no-before::before {
  content: none;
}

.btn a{
  font-size: 18px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: #F9F8F8;  
  background-color: #E9ACBA; 
  padding: 16px 40px;
  border-radius: 11px;
  text-shadow: 0px -3px 6px rgba(104, 25, 25, 0.16); 
  transition: all 0.3s ease-out; /*アニメーションの指定*/ 
  display: inline-block;
}

.btn a:hover {
  color: #354D68;
  background-color: #F8E3E7;
  transform: scale(1.05);
   /* box-shadow: 0 15px 15px rgba(57,250,215,0.4); */
}


/* アニメーション */

/* fade-in */
.fade-in{
    opacity: 0;
  visibility: hidden;
  transform: translateY(100px); /* 下方向からスタート */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-active {
  /*要素を表示させる*/
  opacity: 1;
  visibility: visible;
  /*元の位置に戻す*/
  transform: translateY(0);
  
}

/* fade-in-right */
.fade-in-right {
  opacity: 0;
  transform: translateX(40px); /* 右方向からスタート */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.fade-in-right.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* fade-in-left */
.fade-in-left {
  opacity: 0;
  transform: translateX(-50px); /* 左方向からスタート */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.fade-in-left.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* fadeup */
.fadeup {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,50px,0.1px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.fadeup.is-animated {  
  opacity: 1;
  visibility: visible; /* アニメーション時に表示 */
  animation: fadeup 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}


@keyframes fadeup {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------
header
----------------------------------- */

#header{
  padding: 25px 70px;
  display: flex;
  gap: 110px;
  justify-content: end;
  align-items: center;
}
#header nav{
  max-width: 510px;
  width: 100%;
}
#header ul{
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

#header ul li{
  font-size: 20px;
  letter-spacing: 0.04em;
}


/* ハンバーガーメニュー */
.hmb {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 9px;
  width: 70px;
  height: 70px;
  border-radius: 8px;
  z-index: 110;
  position: relative;
}

.hmb__line,
.hmb::before,
.hmb::after {
  content: "";
  width: 50px;
  height: 2px;
  background-color: #999999;
  border-radius: 2px;
  transition: transform 0.6s, opacity 0.6s;
}

.hmb.is-opened .hmb__line {
  opacity: 0;
}

.hmb.is-opened::before {
  transform: translateY(10px) rotate(45deg);
}

.hmb.is-opened::after {
  transform: translateY(-10px) rotate(-45deg);
}

/* ハンバーガーメニューを開いたとき */
.hmb-menu {
  position: absolute;
  top: 80px; /* ボタン下に */
  right: 20px;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 100;
  top: 0;
  right: 0;
  width: 33vw;
  border-radius: 10px;
  text-align: center;
  background: #fff3f3;    
  box-shadow: -17px 17px 20px rgb(111 112 118 / 16%);
  padding: 100px 50px;
}
.hmb-menu ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  flex-direction: column;
}
.hmb-menu li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #545353;
  font-size: 26px;
  letter-spacing: 0.04em;
}
.hmb-menu li a:hover {
  background-color: #f0f0f0;
}

/* 開いたとき */
.hmb.is-opened + .hmb-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* -----------------------------------
mv
----------------------------------- */

#mv{
  position: relative;
}

#mv .mv-img img{
  object-fit: cover;
    width: 100%;
    height: auto;
}


#mv .ttl{
  position: absolute;
  top: 38.7vh;
  left: 22vh;
  /* top: 31vh;
  left: 22vh; */
}

#mv .ttl h1{
  height: 110px;
  width: auto;
}

#mv .ttl p{
  height: 69px;
  width: auto;
}

/* -----------------------------------
works
----------------------------------- */

#works{
  padding-top: 150px;
}

/* スライドショーの設定 */
.slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider {
  width: 100%;
}

.slider-img {
  margin: 0 50px;
  width: auto; /* 幅はスライダーが自動調整 */
  aspect-ratio: 426 / 240; /* 横426:縦240の比率を強制 */
}

.slider-img img {
    width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: 5px 7px 17px rgba(0, 0, 0, 0.16);
}

.slider-wrapper {
  width: 100%;
  overflow: hidden;
  display: block;
  padding-top: 70px;
}

.slick-list{
  overflow: visible;
}

/* ドット用コンテナのレイアウト調整 */
.slider-bars {
  display: flex;
  justify-content: center;
  padding: 0;
  margin-top: 16px;
  padding-top: 30px;
}

/* 標準バー */
.slider-bars li {
  width: 25px;   /* バーの幅 */
  height: 4px;   /* バーの高さ */
  margin: 0 6px;
  background: #dbd7d7;  /* 非アクティブ時の色 */
  cursor: pointer;
}

/* 現在スライドのバー */
.slider-bars li.slick-active {
  background: rgb(151, 157, 163); /* アクティブ時の色 */
}

/* デフォルトドットの記号を非表示に */
.slider-bars li button,
.slider-bars li button:before {
  display: none;
}

#works .btn{
  text-align: center;
  padding-top: 60px;
}

/* -----------------------------------
about
----------------------------------- */

#about{
  padding-top: 150px;
}

.a-contents{
  display: flex;
  justify-content: center;
  padding-top: 100px;
  gap: 130px;
}
.a-contents img{
  width: auto;
  height: 250px;
  object-fit: cover;
  border-radius: 11px;
  box-shadow: 5px 7px 6px rgba(0, 0, 0, 0.16);
}

.a-contents .text{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 540px;
  padding-top: 20px;
}

.a-contents .eng{
  font-size: 52px;
  font-weight: 500;
  padding-bottom: 10px;
  line-height: 0.8;
}

.a-contents .jp{
  font-size: 20px;
  letter-spacing: 0.04em;
  padding-bottom: 40px;
}

.a-contents .career{
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 1.678;
}

#about .btn{
  text-align: center;
  padding-top: 70px;
  padding-bottom: 150px;
}


/* -----------------------------------
skill
----------------------------------- */


#skill{
  background-color: #F9F9F9;
  padding-top: 80px;
  padding-bottom: 90px;
}

#skill h3{
  text-align: center;
  padding: 0;
  margin: 0;
}

#skill .s-contents{
  padding: 100px 20px 0;
  display: grid;
  gap: 1rem;
  max-width: 1360px;
  margin: 0 auto;

  grid-template-columns: repeat(3, 1fr);
}

#skill .box{
  padding: 1rem;
  text-align: center;
  max-width: 100%; 
}

#skill .img{
  max-width: 360px;
  width: 80%;
  margin: 0 auto;
}

#skill img{
  border-radius: 11px;

    width: 100%;
    height: auto;
    display: block;
}

.skill-name{
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #95b6cb;
  text-transform:capitalize;
  text-align: center;
  padding-bottom: 25px;
}

#skill .text{
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1.8;
  padding-top: 50px;
  word-break: auto-phrase;
  text-align: center;
}

/* -----------------------------------
contact
----------------------------------- */

#cta{
  background-color: #9ECADD;
  padding: 60px 250px;
  width: 910px;
  border-radius: 183px;
  margin: 150px auto 120px;
  color: #fff;
}

#cta .contents{
  display: flex;
  flex-direction: column;
  align-items: center; 
}

#cta h2{
  font-size: 86px;
  letter-spacing: 0.04em;
  line-height: 0.8;
}

#cta p{
  font-size: 20px;
  letter-spacing: 0.1em;
  padding: 50px 0 25px;
  white-space: nowrap;
}

#cta a{
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #545353;
  background-color: #fff;
  padding: 12px 38px;  
  border-radius: 183px;
}

/* -----------------------------------
footer
----------------------------------- */

#footer{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#footer nav{
  max-width: 460px;
  width: 100%;
}
#footer ul{
  display: flex;
  justify-content: space-between;
}

#footer ul li{
  font-size: 18px;
  letter-spacing: 0.04em;
}

small{
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 60px 0 30px;
}



/* -----------------------------------
-----------------------------------

works-listページ　

-----------------------------------
----------------------------------- */
#works-list {
  padding-top: 150px;
}
#works-list h3{    
  margin-left: 375px;
}

#works-list .list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1140px;
  row-gap: 130px;
  margin: 0 auto;
  padding-top: 80px;
}

#works-list .contents{
    max-width: 498px;
    width: 100%;
    height: auto;
}

#works-list .contents img{
    width: 100%;
    height: auto;
    box-shadow: 5px 7px 17px rgba(0, 0, 0, 0.16);
}

#works-list .contents .detail{
  padding-left: 15px;
}

#works-list .category{
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #749FD6;
    padding-top: 5px;
}


#works-list .site-name{
    font-size: 22px;
    letter-spacing: 0.04em;
    padding-top: 20px;
}


#works-list .tag{
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #a18181;
    display: flex;
    align-items: center;
    gap: 17px;
    padding-top: 13px;
}

#works-list .tag li{
  background-color: #FFEFEF;
  border-radius: 14px;
  padding: 2px 24px;
  
}

/* -----------------------------------
-----------------------------------

works-detailページ　

-----------------------------------
----------------------------------- */

#works-detail .h-ttl{
  padding-top: 75px;
  padding-bottom: 40px;
}

#works-detail .h-ttl::before{
  top: 60%;
}

#works-detail .wrap{
  background-color: #F9F9F9;
}

/* info */
#works-detail .info{
  max-width: 1080px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding-left: 7%;
  padding-top: 20px;
}

#works-detail .category{
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #749FD6;
    padding-top: 5px;
}

#works-detail .site-name{
    font-size: 22px;
    letter-spacing: 0.04em;
    padding-top: 20px;
}

#works-detail .tag{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #a18181;
  display: flex;
  align-items: center;
  gap: 17px;
  padding-top: 13px;
}

#works-detail .tag p{
  background-color: #FFEFEF;
  border-radius: 14px;
  padding: 2px 24px;
}

#works-detail .url{
  padding-top: 20px;
  text-decoration: underline;
  text-decoration-color: #545353;
  font-size: 14px;
}

#works-detail .login{
  font-weight: 600;
  color: #6d6d6d;
  padding-top: 3px;
  font-size: 14px;
}


#works-detail .mockup{
  text-align: center;
  padding-top: 60px;
}

#works-detail .mockup img{
  max-width: 1080px;
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 9px 8px 26px rgba(199, 207, 215, 1.0);
}

/* 簡単な説明 */
#works-detail .container{
  max-width: 1080px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 60px 7% 140px;
}

#works-detail .description{
  font-size: 16px;
  letter-spacing: 0.17em;
  line-height: 2.0;
}

#works-detail .vs img{
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 10px 18px 38px rgba(0, 0, 0, 0.16);
}

/* 作品制作についての説明 */
#works-detail .detail{
  width: 1050px;
  margin: 0 auto;
  padding: 170px 0 120px;
}

#works-detail .detail > div{
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 50px 1em;         /* セット内部の余白 */
  border-top: 2px solid #d1cfcf; /* 各セットの上線 */
}

/* 最後のセットにだけ下線を追加 */
.detail > div:last-child {
  border-bottom: 2px solid #d1cfcf;
}

#works-detail .detail dt{
  font-size: 20px;
  letter-spacing: 0.04em;
  font-weight: 500;

}
#works-detail .detail dd{
  width: 790px;
  font-size: 16px;
  letter-spacing: 0.17em;
  line-height: 2.0;
  word-break: auto-phrase;
}

/* dt+dd の間隔（セット内余白を dt/dd に均等に追加） */
.detail dt,
.detail dd {
  margin: 0;
  padding: 0 2em;        /* 左右余白 */
}

#works-detail .image{
  display: flex;
  gap: 80px;
  justify-content: center;
  align-items: flex-start;
  padding: 120px 0;
}
#works-detail .image img{
  box-shadow: 9px 8px 26px rgba(199, 207, 215, 1.0);
}

#works-detail .slider-wrapper{
  padding-top: 120px;
}

#works-detail .btn{
  text-align: center;
  padding-top: 40px;
}

#works-detail .line {
  width: 100%;           /* 横幅いっぱい */
  height: 0;             /* 高さはボーダーだけ */
  border-top: 1px solid #cfcccc;
  margin: 80px 0;         /* 上下の余白 */
}


/* -----------------------------------
-----------------------------------

aboutページ　

-----------------------------------
----------------------------------- */

#about-page .h-ttl{
  padding-top: 75px;
}

#about-page .h-ttl::before{
  top: 80%;
}


.sub-hd{
  font-size: 44px;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 0.7;

  display: inline-flex;
  align-items: center;
  padding: 0 10%; /* 文字と画面端との余白 */
  width: 100%;
  /* 必要なら width: 100%; にして親コンテナで制御 */
}

.sub-hd span {
  padding: 0 40px; /* 文字と線の間の余白 */
  z-index: 1; /* 線より上に表示 */
}

.sub-hd::before,
.sub-hd::after {
  content: "";
  height: 2px;
  background: #a8a8a8;
}

.sub-hd::before {
  max-width: 15%;/* 最大幅の制限（％ or px）*/
  flex: 1;       /* 左側の線を自動拡張 */
}

.sub-hd::after {
  max-width: 85%;/* 最大幅の制限 */
  flex: 2;       /* 右側の線をより長く */
}

/* ----------ここからプロフィール---------- */
#about-page .about-profile{
  display: flex;
  justify-content: center;
  gap: 7%;
  padding-top: 40px;
  align-items: flex-start;
}

#about-page .about-profile .profile{
  max-width: 410px;
  width: 100%;
  padding-top: 140px;
  
}

#about-page .eng-name{
  font-size: 48px;
  font-weight: 500;
  padding-bottom: 10px;
}

#about-page .jp{
  font-size: 22px;
  letter-spacing: 0.04em;
  padding-bottom: 60px;
}

#about-page .career{
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 2.0;
}

#about-page .about-profile .img{
  max-width: 400px;
  width: 100%;
  height: auto;
}

/* ----------ここからskill---------- */

.all-sp{
  display: none;
}

#about-page #skill{
  background-color: #fff;
  padding-top: 240px;
  /* padding-bottom: 150px; */
}

#about-page .skill-list{
  display: flex;
  justify-content: center;
  gap: 140px;
  padding-top: 120px;
}

#about-page .skill-list .left{
  width: 320px;
}

#about-page .skill-list .right{
  width: 360px;
}

#about-page .skill-list li{
  display: flex;
  justify-content: space-between;
  padding-bottom: 50px;
}

#about-page .skill-list li:last-child{
  padding-bottom: 50px;
}

#about-page .skill-name{
  font-size: 22px;
  padding-bottom: 0;
}

#about-page .star{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 110px;
  height: auto;
}

#about-page .star img{
  width: 32px;
  height: auto;
  object-fit: contain;
}


#about-page .possible .list{
  display: flex;
  gap: 90px;
  justify-content: center;
  color: #70a4bb;
}

#about-page .possible .list p{
  font-size: 28px;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform:capitalize;
}

#about-page .possible > p{
  max-width: 930px;
  margin: 0 auto;
  padding-top: 30px;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 2.0;
}

/* ----------ここからstrength---------- */

#stren .sub-hd{
  padding-bottom: 120px;
}


#stren .stren-box {
  width: 880px;
  margin: 0 auto;
  height: 100%;
  background-color: #FFF9F9;
  padding: 40px 70px;
  margin-bottom: 70px;
  border-radius: 12px;
}

#stren .stren-box:last-child{
  margin-bottom: 150px;
}


#stren .box-ttl p{
  font-size: 22px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

#stren .line{
  border-bottom: 2px solid #d9d4d4;
  padding-top: 30px;
}

#stren .box-content p{
  font-size: 16px;
  letter-spacing: 0.17em;
  line-height: 2.0;
  padding-top: 30px;
  margin: 0;
}




/* ----------ここからcareer---------- */

.timeline {
  position: relative;
  max-width: 930px;
  margin: 120px auto;
}

/* 縦線 */
.timeline::before {
  content: "";
  position: absolute;
  left: 13%;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: #d7d7d7;
  transform: translateX(-50%);
}
.timeline ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline li {
  display: flex;
  margin: 80px 0;
  align-items: baseline;
}

.date {
  text-align: right;
  padding-right: 9rem;
  font-size: 18px;
}
.point {
  width: 20px;
  height: 20px;
  background-color: #37a8d9;
  border-radius: 50%;
  position: absolute; 
  left: 13%;         
  transform: translateX(-50%); /* ← 中央揃いに整える */
  z-index: 2;
} 
.content {
  width: 100%;
  text-align: left;
}

.content .event{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #7b7878;
  line-height: 1.5;
}


.content .text{
  padding-top: 25px;
  padding-left: 10px;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  word-break: normal;
}



/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {

.sp{
  display: none;
}

.h-ttl{
  font-size: 40px;
  letter-spacing: 0.02em;
  margin-left: 118px;
}

.h-ttl::before {
    position: absolute;
    content: "";
    top: 50%;
    width: 88px;  /* 横線の幅 */
    height: 2px;  /* 横線の高さ */
    left: -92px; 
    background-color: #a09a9a;
}

.btn a{
  font-size: 16px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: #F9F8F8;  
  background-color: #E9ACBA; 
  padding: 14px 34px;
  border-radius: 11px;
  transition: background-color 0.3s ease, /* 背景色 */
              color 0.3s ease;            /* 文字色 */
  text-shadow: 0px -3px 6px rgba(104, 25, 25, 0.16);
}


/* -----------------------------------
header
----------------------------------- */

#header{
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  z-index: 10;
  padding: 0;
  gap: 0;
  padding: 0 20px;
}

/* ハンバーガーメニュー */
#nav-menu{
  height: 100vh;
  padding-top: 150px;
}

/* -----------------------------------
mv
----------------------------------- */

#mv{
  position: relative;
}

#mv .mv-img img{
  object-fit: cover;
  max-width: 780px;
  width: 100%;
  height: auto;
}

#mv .ttl{
  max-width: 670px;
  width: 90%;
  position: absolute;
  top: 13vh;
  left: 2vh;
}

#mv .ttl h1{
  max-width: 690px;
  width: 100%;
  height: auto;
}

#mv .ttl p{
  max-width: 220px;
  width: 40%;
  height: auto;
  padding-top: 2px;
}




/* -----------------------------------
works
----------------------------------- */

#works{
  padding-top: 90px;
}

/* スライドショーの設定 */
.slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}

.slider-img {
  margin: 0 20px;
}

.slider-wrapper {
  padding-top: 70px;
}

.slick-list{
  overflow: visible;
}

/* ドット用コンテナのレイアウト調整 */
.slider-bars {
  margin: 16px 60px;
  padding-top: 20px;
}

#works .btn{
  padding-top: 30px;
}


/* -----------------------------------
about
----------------------------------- */

#about{
  padding-top: 120px;
}

.a-contents{
  flex-direction: column;
  align-items: center;
  padding-top: 70px;
  gap: 0px;
}

.a-contents img{
  height: 210px;
}

.a-contents .text{
  flex-direction: column;
  max-width: 280px;
  /* padding-top: 30px; */
  padding-top: 50px;
}
.a-contents .eng{
  font-size: 28px;
  letter-spacing: 0.02em;
  padding-bottom: 10px;
}

.a-contents .jp{
  font-size: 14px;
  padding-bottom: 20px;
}

.a-contents .career{
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 1.78;
}

#about .btn{
  text-align: center;
  padding-top: 45px;
  padding-bottom: 90px;
}


/* -----------------------------------
skill
----------------------------------- */

#skill{
  padding-top: 40px;
  padding-bottom: 60px;
}

#skill .sub-hd{
  padding: 0;
}

#skill .s-contents{
  grid-template-columns: 1fr;
  padding: 60px 35px 0;
}

#skill .box{
  position: relative;
  max-width: 350px;
  width: 100%;
  margin: 0 auto;
}

.box:not(:last-child)::after {
display: none;
}

#skill .img{
  width: 70%;
}

.skill-name{
  font-size: 26px;
  font-weight: 600;
  padding-bottom: 15px;
}

#skill .text{
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  padding: 30px 20px 0;
  /* word-break: auto-phrase; */
  text-align: center;
}



/* -----------------------------------
contact
----------------------------------- */
.wrap-cta{
  width: 90%;
  height: 100%;
  margin: 0 auto;
}

#cta{
  padding: 45px 0 30px;
  width: 100%;
  margin: 60px auto 60px;
}

#cta .contents{
  display: flex;
  flex-direction: column;
  align-items: center; 
}

#cta h2{
  font-size: 36px;
  letter-spacing: 0.04em;
  line-height: 0.8;
}

#cta p{
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 25px 55px 12px;
  overflow-wrap: break-word;
  text-align: center;
  white-space: normal;
  word-break: auto-phrase; 
}

#cta a{
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 8px 20px;  
}

/* -----------------------------------
footer
----------------------------------- */

#footer{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#footer nav{
  max-width: 260px;
  width: 80%;
}

#footer ul li{
  font-size: 12px;
}

small{
  padding: 50px 0 30px;
}


/* -----------------------------------
-----------------------------------

works-listページ　

-----------------------------------
----------------------------------- */
#works-list {
  padding-top: 110px;
}
#works-list h3{
  margin-left: 118px;
}
#works-list .list{
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: start;
  width: 100%;
  max-width: 320px;
  row-gap: 60px;
  padding: 50px 0 30px;
}

#works-list .contents{
    max-width: 498px;
    width: 100%;
    height: auto;
}

#works-list .contents .detail{
  padding-left: 0;
}

#works-list .category{
    font-size: 14px;
    padding-top: 5px;
}

#works-list .site-name{
    font-size: 16px;
    padding-top: 8px;
    font-weight: 500;
}

#works-list .tag{
    font-size: 12px;
    font-weight: 600;
    padding-top: 10px;
}

#works-list .tag li{
  padding: 2px 20px;
  
}



/* -----------------------------------
-----------------------------------

works-detailページ　

-----------------------------------
----------------------------------- */

#works-detail .h-ttl{
  padding-top: 75px;
  padding-bottom: 40px;
}

#works-detail .h-ttl::before{
  top: 60%;
}

/* info */

#works-detail .category{
    font-size: 14px;
    padding-top: 5px;
}

#works-detail .site-name{
    font-size: 20px;
    letter-spacing: 0.04em;
    padding-top: 15px;
}

#works-detail .tag p{
  background-color: #FFEFEF;
  border-radius: 14px;
  padding: 2px 24px;
}


#works-detail .mockup{
  padding-top: 40px;
}

/* 簡単な説明 */
#works-detail .container{
  padding: 50px 7% 70px;
}

#works-detail .description{
  font-size: 14px;
  letter-spacing: 0.13em;
  line-height: 2.0;
}

#works-detail .vs img{
  width: auto;
  height: 150px;
  object-fit: cover;
}

/* 作品制作についての説明 */
#works-detail .detail{
  max-width: 320px;
  width: 100%;
  padding: 110px 0 60px;
}

#works-detail .detail > div{
  display: flex;
  flex-direction: column;
  justify-content: start;
  position: relative;
  padding: 25px 1em;         /* セット内部の余白 */
  border-top: 1px solid #d1cfcf; /* 各セットの上線 */
}

/* 最後のセットにだけ下線を追加 */
.detail > div:last-child {
  border-bottom: 1px solid #d1cfcf;
}

#works-detail .detail dt{
  font-size: 18px;
  letter-spacing: 0.04em;
  font-weight: 500;

}
#works-detail .detail dd{
  width: 100%;
  font-size: 14px;
  letter-spacing: 0.13em;
  line-height: 2.0;
  word-break: normal;
  padding-top: 15px;
  padding-left: 20px;
  
}

/* dt+dd の間隔（セット内余白を dt/dd に均等に追加） */
.detail dt,
.detail dd {
  margin: 0;
  padding: 0 1em;        /* 左右余白 */
}

#works-detail .image{
  display: flex;
  gap: 70px;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 60px 0;
}

#works-detail .image .img:first-child{
  width: 75%;
}

#works-detail .image .img:last-child{
  width: 50%;
}

#works-detail .slider-wrapper{
  padding-top: 60px;
}

#works-detail .btn{
  text-align: center;
  padding-top: 40px;
}

#works-detail .line {
  width: 100%;           /* 横幅いっぱい */
  height: 0;             /* 高さはボーダーだけ */
  border-top: 1px solid #cfcccc;
  margin: 70px 0;         /* 上下の余白 */
}


/* -----------------------------------
-----------------------------------

aboutページ　

-----------------------------------
----------------------------------- */
#hidden{
  overflow-x: hidden;
}


/* #about-page{
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
} */



#about-page .h-ttl{
  padding-top: 75px;
}

#about-page .h-ttl::before{
  top: 80%;
}


.sub-hd{
  font-size: 32px;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 0.7;
  display: inline-flex;
  align-items: center;
  padding: 0 10%; /* 文字と画面端との余白 */
  width: 100%;
  /* 必要なら width: 100%; にして親コンテナで制御 */
}

.sub-hd span {
  padding: 0 13px; /* 文字と線の間の余白 */
  z-index: 1; /* 線より上に表示 */
}

.sub-hd::before,
.sub-hd::after {
  content: "";
  height: 2px;
  background: #a8a8a8;
}

.sub-hd::before {
  max-width: 15%;/* 最大幅の制限（％ or px）*/
  flex: 1;       /* 左側の線を自動拡張 */
}

.sub-hd::after {
  max-width: 85%;/* 最大幅の制限 */
  flex: 2;       /* 右側の線をより長く */
}

/* ----------ここからプロフィール---------- */
#about-page .about-profile{
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10%;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto;
  padding: 60px 40px 0;
}

#about-page .about-profile .profile{
  width: 100%;
  padding-top: 40px;
  order: 2;
}


#about-page .eng-name{
  font-size: 30px;
  letter-spacing: 0em;
  font-weight: 500;
  padding-bottom: 5px;
}

#about-page .jp{
  font-size: 18px;
  letter-spacing: 0.04em;
  padding-bottom: 25px;
}

#about-page .career{
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 2.0;
  word-break: normal;
}

#about-page .about-profile .img{
  max-width: 230px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ----------ここからskill---------- */


.all-sp{
  display: block;
}

#about-page #skill{
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 100px 40px 0;
  /* padding: 100px 40px; */
}

#about-page .skill-list{
  padding-top: 50px;
}

#about-page .skill-list .all-sp{
  width: 420px;
}

#about-page .skill-list li{
  padding-bottom: 30px;
}
#about-page .skill-list li:last-child{
  padding-bottom: 60px;
}



#about-page .skill-name{
  font-size: 16px;
  padding-bottom: 0;
}

#about-page .star{
  width: 90px;
}

#about-page .star img{
  width: 26px;
}


#about-page .possible .list{
  display: flex;
  gap: 30px;
  justify-content: center;
}

#about-page .possible .list p{
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform:capitalize;
}

#about-page .possible > p{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-top: 30px;
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 2.0;
}

/* ----------ここからstrength---------- */

#stren .sub-hd{
  padding-bottom: 50px;
}

#stren .stren-box {
  width: 80%;
  padding: 30px 30px;
  margin-bottom: 50px;
}

#stren .stren-box:last-child{
  margin-bottom: 100px;
}

#stren .box-ttl p{
  font-size: 18px;
  letter-spacing: 0.04em;
  font-weight: 500;
  padding: 0 10px;
}

#stren .line{
  border-bottom: 1px solid #d9d4d4;
  padding-top: 15px;
}

#stren .box-content {
  padding: 0 10px;
}

#stren .box-content p{
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 2.0;
  padding-top: 25px;
}

/* ----------ここからcareer---------- */

#career{
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
}

#career .sub-hd{
  padding: 0;
}

.timeline {
  position: relative;
  max-width: 350px;
  margin: 50px auto 100px;
}

/* 縦線 */
.timeline::before {
  left: 22%;
  top: 0;
  height: 100%;
  width: 3px;
}

.timeline li {
  display: flex;
  margin: 60px 0;
  align-items: start;
}

.date {
  text-align: right;
  padding-right: 2.5rem;
  font-size: 14px;
  letter-spacing: 0em;
}
.point {
  width: 16px;
  height: 16px;
  left: 22%; 
} 
.content {
  width: 100%;
  text-align: left;
  padding-left: 10px;
}

.content .event{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.content .text{
  padding-top: 20px;
  padding-left: 0px;
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  word-break: normal;
  color: #7b7878ed;
}



}

/*-------------------------------------------
tab （ipad Mini向け）
-------------------------------------------*/

@media screen and (width: 768px) {

  
.h-ttl {
    font-size: 56px;
    margin-left: 255px;
}

.h-ttl::before {
    width: 120px;
    left: -130px;
}

.btn a {
    font-size: 16px;
  }

/* -----------------------------------
header
----------------------------------- */
#header {
  gap: 60px;
  padding: 15px 0;
}

#header nav {
    max-width: 430px;
    height: auto;
}

#header ul li {
  font-size: 18px;
}

#hamburger {
    margin-right: 40px;
}

/*　ハンバーガーメニュー */
#nav-menu{
  width: 100%;
  height: 100%;
  padding-top: 150px;
}
#nav-menu ul{
  gap: 40px;
}

#nav-menu li a{
  font-size: 32px;
}

/* -----------------------------------
mv
----------------------------------- */
#mv .mv-img img {
    height: 310px;
}

#mv .ttl{
  top: 13.6vh;
  left: 3.9vh;
}

#mv .ttl h1 {
    height: 72px;
}

#mv .ttl p {
    height: 58px;
}

/* -----------------------------------
works
----------------------------------- */
#works {
    padding-top: 110px;
}

.slider-img {
    margin: 0 25px;
}

#works .btn {
    padding-top: 10px;
}
/* -----------------------------------
about
----------------------------------- */
#about{
  padding-top: 120px;
}

.a-contents {
  gap: 40px;
  flex-direction: column;
  align-items: center;
}

.a-contents .eng {
  font-size: 38px;
  padding-bottom: 7px;
}

.a-contents .jp {
  font-size: 18px;
  padding-bottom: 25px;
}

.a-contents img {
  height: 220px;
}

.a-contents .text {
  padding-top: 5px;
  max-width: 370px;
}

#about .btn {
  padding-top: 40px;
  padding-bottom: 70px;
}

/* -----------------------------------
skill
----------------------------------- */

#skill {
    padding-top: 70px;
    padding-bottom: 80px;
}

#skill .s-contents{
  padding: 70px 35px 0;
  grid-template-columns: 1fr;
}

#skill .box{
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
}

.box:not(:last-child)::after {
    content:none;
}

.skill-name {
    font-size: 30px;
    padding-bottom: 15px;
    color: #95b6cb;
    font-weight: 600;
}

#skill .img {
    width: 80%;
}

#skill .text {
    font-size: 16px;
    letter-spacing: 0.06em;
    line-height: 1.8;
    word-break: normal;
    padding: 25px 20px 0;
}


/* -----------------------------------
contact
----------------------------------- */
.wrap-cta {
    width: 90%;
    height: 100%;
    margin: 0 auto;
}
#cta {
        width: 100%;
        padding: 90px 250px 60px;
}

#cta h2 {
    font-size: 78px;
}
/* -----------------------------------
-----------------------------------

works-listページ　

-----------------------------------
----------------------------------- */
#works-list {
  padding-top: 90px;
}
#works-list h3{
  margin-left: 180px;
}
#works-list .list{
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: start;
  width: 100%;
  max-width: 530px;
  row-gap: 80px;
  padding: 100px 0 30px;
}


#works-list .site-name{
    font-size: 18px;
    padding-top: 8px;
}




/* -----------------------------------
-----------------------------------

works-detailページ　

-----------------------------------
----------------------------------- */

#works-detail .h-ttl{
  margin-left: 180px;
}

/* info */


#works-detail .site-name{
    font-size: 20px;
    letter-spacing: 0.04em;
    padding-top: 15px;
}


#works-detail .mockup img {
    width: 80%
}

/* 簡単な説明 */
#works-detail .container{
  padding: 50px 15% 70px;
}

#works-detail .description{
  font-size: 14px;
  letter-spacing: 0.13em;
  line-height: 2.0;
}

#works-detail .vs img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 作品制作についての説明 */
#works-detail .detail{
  max-width: 540px;
  width: 100%;
  padding: 110px 0 60px;
}

#works-detail .detail > div{
  display: flex;
  flex-direction: column;
  justify-content: start;
  position: relative;
  padding: 30px 1em;         /* セット内部の余白 */
}

#works-detail .detail dt{
  font-size: 18px;
  letter-spacing: 0.04em;
  font-weight: 500;

}
#works-detail .detail dd{
  width: 100%;
  font-size: 14px;
  letter-spacing: 0.13em;
  line-height: 2.0;
  word-break: normal;
  padding-top: 15px;
  padding-left: 20px;
  
}

/* dt+dd の間隔（セット内余白を dt/dd に均等に追加） */
.detail dt,
.detail dd {
  margin: 0;
  padding: 0 1em;        /* 左右余白 */
}

#works-detail .image{
  gap: 80px;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 100px 0;
}

#works-detail .image .img:first-child{
  width: 60%;
}

#works-detail .image .img:last-child{
  width: 25%;
}

#works-detail .slider-wrapper{
  padding-top: 60px;
}


/* -----------------------------------
-----------------------------------

aboutページ　

-----------------------------------
----------------------------------- */


#about-page .h-ttl{
  padding-top: 75px;
  margin-left: 180px;
}

#about-page .h-ttl::before{
  top: 80%;
}


.sub-hd{
  font-size: 32px;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 0.7;
  display: inline-flex;
  align-items: center;
  padding: 0 30px;/* 文字と画面端との余白 */
  width: 100%;
  /* 必要なら width: 100%; にして親コンテナで制御 */
}

.sub-hd span {
  padding: 0 13px; /* 文字と線の間の余白 */
  z-index: 1; /* 線より上に表示 */
}

.sub-hd::before,
.sub-hd::after {
  content: "";
  height: 2px;
  background: #a8a8a8;
}

.sub-hd::before {
  max-width: 15%;/* 最大幅の制限（％ or px）*/
  flex: 1;       /* 左側の線を自動拡張 */
}

.sub-hd::after {
  max-width: 85%;/* 最大幅の制限 */
  flex: 2;       /* 右側の線をより長く */
}

/* ----------ここからプロフィール---------- */
#about-page .about-profile{
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10%;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto;
  padding: 60px 40px 0;
}

#about-page .about-profile .profile{
  width: 100%;
  padding-top: 40px;
  order: 2;
  margin: 0 auto;
}


#about-page .eng-name{
  font-size: 32px;
  letter-spacing: 0.02em;
  font-weight: 500;
  padding-bottom: 10px;
}

#about-page .jp{
  font-size: 18px;
  letter-spacing: 0.04em;
  padding-bottom: 40px;
}

#about-page .career{
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 2.0;
  word-break: normal;
}
#about-page .about-profile .profile {
    max-width: 380px;
}

#about-page .about-profile .img{
  max-width: 300px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ----------ここからskill---------- */

#skill .sub-hd{
  padding: 0 40px;
}

.all-sp{
  display: none;
}

#about-page #skill{
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 100px 0;
}

#about-page .skill-list{
  padding: 50px 90px 0;
}

#about-page .skill-list .all-sp{
  width: 420px;
}

#about-page .skill-list li{
  padding-bottom: 30px;
}
#about-page .skill-list li:last-child{
  padding-bottom: 0px;
}

#about-page .skill-name{
  font-size: 16px;
  padding-bottom: 0;
  width: 100%;
  text-align: start;
}

#about-page .star{
  width: 90px;
}

#about-page .star img{
  width: 26px;
}
#about-page .possible{
  padding: 0 90px;
}

#about-page .possible .list{
  display: flex;
  gap: 30px;
  justify-content: center;
}

#about-page .possible .list p{
  font-size: 20px;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform:capitalize;
}

#about-page .possible > p{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-top: 30px;
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 2.0;
}

/* ----------ここからstrength---------- */

#stren .sub-hd{
  padding: 0 40px 50px;
}

#stren .stren-box {
  width: 80%;
  padding: 30px 30px;
  margin-bottom: 50px;
}

#stren .stren-box:last-child{
  margin-bottom: 100px;
}

#stren .box-ttl p{
  font-size: 18px;
  letter-spacing: 0.04em;
  font-weight: 500;
  padding: 0 10px;
}

#stren .line{
  border-bottom: 1px solid #d9d4d4;
  padding-top: 15px;
}

#stren .box-content {
  padding: 0 10px;
}

#stren .box-content p{
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 2.0;
  padding-top: 25px;
}

/* ----------ここからcareer---------- */

#career{
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
}

#career .sub-hd{
  padding: 0 10px;
}

.timeline {
  position: relative;
  max-width: 520px;
  margin: 50px auto 100px;
}

/* 縦線 */
.timeline::before {
  left: 20%;
  top: 0;
  height: 100%;
  width: 3px;
}

.timeline li {
  display: flex;
  margin: 70px 0;
  align-items: start;
}

.date {
  text-align: right;
  padding-right: 6.0rem;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.point {
  width: 16px;
  height: 16px;
  left: 20%; 
} 
.content {
  width: 100%;
  text-align: left;
}

.content .event{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.content .text{
  padding-top: 20px;
  padding-left: 15px;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  word-break: normal;
  color: #7b7878ed;
}
}

/*-------------------------------------------
tab
-------------------------------------------*/
/* タブレット全般（iPad、Airなど） */
@media only screen
  and (min-device-width: 769px) and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
  /* 共通スタイル */


.h-ttl {
    font-size: 56px;
    margin-left: 255px;
}

.h-ttl::before {
    width: 120px;
    left: -130px;
}

.btn a {
    font-size: 16px;
  }

/* -----------------------------------
header
----------------------------------- */
#header {
  gap: 80px;
  padding: 20px 0;
}

#header nav {
    max-width: 450px;
    height: auto;
}

#hamburger {
    margin-right: 40px;
}

/*　ハンバーガーメニュー */
#nav-menu{
  width: 100%;
  height: 100%;
  padding-top: 150px;
}
#nav-menu ul{
  gap: 40px;
}

#nav-menu li a{
  font-size: 32px;
}

/* -----------------------------------
mv
----------------------------------- */
#mv .mv-img img {
    height: auto;
}

#mv .ttl{
  top: 22.1vh;
  left: 3vh;
}

#mv .ttl h1 {
    height: 120px;
}

/* -----------------------------------
works
----------------------------------- */
#works {
    padding-top: 110px;
}

.slider-img {
    margin: 0 30px;
}

#works .btn {
    padding-top: 40px;
}
/* -----------------------------------
about
----------------------------------- */
.a-contents {
    gap: 60px;
}

.a-contents .eng {
    font-size: 42px;
    padding-bottom: 5px;
}

.a-contents .jp {
    padding-bottom: 30px;
}

.a-contents img {
    height: 220px;
}

.a-contents .text {
    padding-top: 5px;
    max-width: 410px;
}

#about .btn {
    padding-bottom: 110px;
}

/* -----------------------------------
skill
----------------------------------- */

#skill {
    padding-top: 70px;
    padding-bottom: 80px;
}

#skill .s-contents{
  padding: 70px 80px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

#skill .box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.box:not(:last-child)::after {
    right: 0%;
    content:none;
}

.skill-name {
    font-size: 30px;
    padding-bottom: 20px;
    color: #95b6cb;
    font-weight: 600;
}

#skill .img {
    width: 75%;
}

#skill .text {
    font-size: 16px;
    letter-spacing: 0.08em;
    line-height: 1.6;
    word-break: normal;
    padding: 40px 25px 0;
}


/* -----------------------------------
contact
----------------------------------- */
#cta {
    width: 700px;
    padding: 90px 250px 60px;
}

#cta h2{
  font-size: 70px;
}



/* -----------------------------------
-----------------------------------

works-listページ　

-----------------------------------
----------------------------------- */
#works-list {
  padding-top: 90px;
}
#works-list h3{
  margin-left: 180px;
}
#works-list .list{
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: start;
  width: 100%;
  max-width: 530px;
  row-gap: 80px;
  padding: 100px 0 30px;
}


#works-list .site-name{
    font-size: 18px;
    padding-top: 8px;
}




/* -----------------------------------
-----------------------------------

works-detailページ　

-----------------------------------
----------------------------------- */

#works-detail .h-ttl{
  margin-left: 180px;
}

/* info */


#works-detail .site-name{
    font-size: 20px;
    letter-spacing: 0.04em;
    padding-top: 15px;
}


#works-detail .mockup img {
    width: 80%
}

/* 簡単な説明 */
#works-detail .container{
  padding: 50px 15% 70px;
}

#works-detail .description{
  font-size: 14px;
  letter-spacing: 0.13em;
  line-height: 2.0;
}

#works-detail .vs img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 作品制作についての説明 */
#works-detail .detail{
  max-width: 540px;
  width: 100%;
  padding: 110px 0 60px;
}

#works-detail .detail > div{
  display: flex;
  flex-direction: column;
  justify-content: start;
  position: relative;
  padding: 30px 1em;         /* セット内部の余白 */
}

#works-detail .detail dt{
  font-size: 18px;
  letter-spacing: 0.04em;
  font-weight: 500;

}
#works-detail .detail dd{
  width: 100%;
  font-size: 14px;
  letter-spacing: 0.13em;
  line-height: 2.0;
  word-break: normal;
  padding-top: 15px;
  padding-left: 20px;
  
}

/* dt+dd の間隔（セット内余白を dt/dd に均等に追加） */
.detail dt,
.detail dd {
  margin: 0;
  padding: 0 1em;        /* 左右余白 */
}

#works-detail .image{
  gap: 80px;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 100px 0;
}

#works-detail .image .img:first-child{
  width: 60%;
}

#works-detail .image .img:last-child{
  width: 25%;
}

#works-detail .slider-wrapper{
  padding-top: 60px;
}


/* -----------------------------------
-----------------------------------

aboutページ　

-----------------------------------
----------------------------------- */


#about-page .h-ttl{
  padding-top: 75px;
  margin-left: 180px;
}

#about-page .h-ttl::before{
  top: 80%;
}


.sub-hd{
  font-size: 32px;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 0.7;
  display: inline-flex;
  align-items: center;
  padding: 0 30px;/* 文字と画面端との余白 */
  width: 100%;
  /* 必要なら width: 100%; にして親コンテナで制御 */
}

.sub-hd span {
  padding: 0 13px; /* 文字と線の間の余白 */
  z-index: 1; /* 線より上に表示 */
}

.sub-hd::before,
.sub-hd::after {
  content: "";
  height: 2px;
  background: #a8a8a8;
}

.sub-hd::before {
  max-width: 15%;/* 最大幅の制限（％ or px）*/
  flex: 1;       /* 左側の線を自動拡張 */
}

.sub-hd::after {
  max-width: 85%;/* 最大幅の制限 */
  flex: 2;       /* 右側の線をより長く */
}

/* ----------ここからプロフィール---------- */
#about-page .about-profile{
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10%;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto;
  padding: 60px 40px 0;
}

#about-page .about-profile .profile{
  width: 100%;
  padding-top: 40px;
  order: 2;
  margin: 0 auto;
}


#about-page .eng-name{
  font-size: 32px;
  letter-spacing: 0.02em;
  font-weight: 500;
  padding-bottom: 10px;
}

#about-page .jp{
  font-size: 18px;
  letter-spacing: 0.04em;
  padding-bottom: 40px;
}

#about-page .career{
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 2.0;
  word-break: normal;
}
#about-page .about-profile .profile {
    max-width: 380px;
}

#about-page .about-profile .img{
  max-width: 300px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ----------ここからskill---------- */

#skill .sub-hd{
  padding: 0 40px;
}

.all-sp{
  display: none;
}

#about-page #skill{
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 100px 0;
}

#about-page .skill-list{
  padding: 50px 90px 0;
}

#about-page .skill-list .all-sp{
  width: 420px;
}

#about-page .skill-list li{
  padding-bottom: 30px;
}

#about-page .skill-list li:last-child{
  padding-bottom: 0px;
}

#about-page .skill-name{
  font-size: 16px;
  padding-bottom: 0;
}

#about-page .star{
  width: 90px;
}

#about-page .star img{
  width: 26px;
}
#about-page .possible{
  padding: 0 90px;
}

#about-page .possible .list{
  display: flex;
  gap: 30px;
  justify-content: center;
}

#about-page .possible .list p{
  font-size: 20px;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform:capitalize;
}

#about-page .possible > p{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-top: 30px;
  font-size: 14px;
  letter-spacing: 0.03em;
  line-height: 2.0;
}

/* ----------ここからstrength---------- */

#stren .sub-hd{
  padding: 0 40px 50px;
}

#stren .stren-box {
  width: 80%;
  padding: 30px 30px;
  margin-bottom: 50px;
}

#stren .stren-box:last-child{
  margin-bottom: 100px;
}

#stren .box-ttl p{
  font-size: 18px;
  letter-spacing: 0.04em;
  font-weight: 500;
  padding: 0 10px;
}

#stren .line{
  border-bottom: 1px solid #d9d4d4;
  padding-top: 15px;
}

#stren .box-content {
  padding: 0 10px;
}

#stren .box-content p{
  font-size: 14px;
  letter-spacing: 0.08em;
  line-height: 2.0;
  padding-top: 25px;
}

/* ----------ここからcareer---------- */

#career{
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
}

#career .sub-hd{
  padding: 0 10px;
}

.timeline {
  position: relative;
  max-width: 520px;
  margin: 50px auto 100px;
}

/* 縦線 */
.timeline::before {
  left: 20%;
  top: 0;
  height: 100%;
  width: 3px;
}

.timeline li {
  display: flex;
  margin: 70px 0;
  align-items: start;
}

.date {
  text-align: right;
  padding-right: 6.0rem;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.point {
  width: 16px;
  height: 16px;
  left: 20%; 
} 
.content {
  width: 100%;
  text-align: left;
}

.content .event{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.content .text{
  padding-top: 20px;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  word-break: normal;
  color: #7b7878ed;
}
}


/*-------------------------------------------
tab
-------------------------------------------*/
/* タブレット全般（iPadの画面を横向きにしたとき用） */
@media only screen
  and (min-width: 1025px) and (max-width: 1200px){

.a-contents{
  padding: 100px 40px 0;
}


#works-list .list {
  padding: 80px 40px 0;
}

#works-detail .detail {
    padding: 170px 100px 120px;
}

#works-detail .detail dd {
    width: 600px;
}

  }



/*-------------------------------------------
画面変化
-------------------------------------------*/
/* 1900px以上、3000px以下 */
@media screen and (min-width: 2200px) and (max-width: 3500px){


.h-ttl {
    margin-left: 540px;
}



/*-------------------------------------------
mv
-------------------------------------------*/

  #mv .mv-img img{
  object-fit: cover;
    width: 100%;
    height: auto;
}

  #mv .ttl{
  position: absolute;
  top: 28vh;
  left: 18vh;
}

#mv .ttl h1{
  height: 175px;
}

#mv .ttl p{
  height: 100px;
}
.btn a {
    font-size: 22px;
}
/* -----------------------------------
about
----------------------------------- */

.a-contents .career {
    font-size: 18px;
}

.a-contents img {
    height: 300px;
}

.a-contents .jp {
    font-size: 22px;
}

#about .btn {
    padding-top: 90px;
}

/* -----------------------------------
skill
----------------------------------- */


#skill .s-contents {
    padding-top: 100px;
}

#skill .text {
    font-size: 18px;
}

}

/*-------------------------------------------
画面変化
-------------------------------------------*/
/* 3001px以上　*/
@media screen and (min-width: 3001px) {


/*-------------------------------------------
mv
-------------------------------------------*/

  #mv .ttl {
      position: absolute;
      top: 17.1vh;
      left: 30vh;
  }

    #mv .ttl h1 {
      height: 175px;
  }

#mv .ttl p {
      height: 100px;
  }


}