@charset "UTF-8";

/* 共通部分
------------------------------ */
html {
    font-size: 100%;
}
body{
    font-family: 'Poppins', 'Noto Sans JP', sans-serif; line-height: 1.7;
    color: #0C1A57;
    background-color: #FAF3EB;
    padding-top: var(--header-height);
}
a {
    text-decoration: none;
}
.section {
  padding-block: 100px;
  padding-inline: 0;
  scroll-margin-top: var(--header-height);
}
:root{
  --header-height: 80px;
}


/* ヘッダー
------------------------------ */
.page-header {
  height: var(--header-height);
  background-color: #FA9EBB;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.site-title {
  font-family: "Poppins", sans-serif;
  color: #FAF3EB;
  font-size: 32px;
  font-weight: 900;
}
.site-title a {
  color: #FAF3EB;
  text-decoration: none;
  transition: 0.3s;
  display: inline-block;
}
.site-title a:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}
.menu a {
  color: #FAF3EB;
  text-decoration: none;
  transition: 0.3s;
  display: inline-block;
}
.menu a:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

/* ===== ハンバーガー ===== */

/* checkboxは見えなくする（hiddenは使わない） */
#menu-toggle{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* ハンバーガーアイコン（右上固定・常に押せる） */
.menu-icon{
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  z-index: 20000;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

/* 3本線 */
.menu-icon span{
  display: block;
  width: 32px;
  height: 4px;
  background: #FAF3EB;
  border-radius: 2px;
  transition: 0.3s;
}

/* ×に変形 */
#menu-toggle:checked + .menu-icon span:nth-child(1){
  transform: translateY(10px) rotate(45deg);
}
#menu-toggle:checked + .menu-icon span:nth-child(2){
  opacity: 0;
}
#menu-toggle:checked + .menu-icon span:nth-child(3){
  transform: translateY(-10px) rotate(-45deg);
}

/* overlay（押したら閉じる） */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  z-index: 1000;
}
#menu-toggle:checked ~ .overlay{
  opacity: 1;
  pointer-events: auto;
}

/* メニュー本体（右から出る） */
.menu{
  position: fixed;
  top: 0;
  right: -260px;     /* 右に隠す */
  width: 260px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
  transition: right 0.3s;
  z-index: 1500;
}
#menu-toggle:checked ~ .menu{
  right: 0;
}

.menu ul{
  list-style: none;
  padding: 80px 20px;
  text-align: center;
}
.menu li{
  margin: 20px 0;
}
.menu a{
  color: #0C1A57;
  font-size: 1.2rem;
  text-decoration: none;
}

.nav-contact {
  background: #0C1A57;
  color: #FAF3EB !important;
  padding: 2px 18px;
  border-radius: 999px;
  font-weight: 700;
  display: inline-block;
}
.nav-contact:hover {
  background: #1A2E7A;
  color: #fff;
}

#menu-toggle:checked + .menu-icon span{
  background: #FA9EBB;
}



/* ===== FV全体 ===== */
.fv{
  display: flex;
  flex-direction: column; /* 縦に積む */
}
.fv-inner{
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  padding: 0 16px;      /* 左右余白 */
  max-width: 430px;     /* スマホの中で広がりすぎ防止 */
  margin: 0 auto;       /* 真ん中寄せ */
}

/* タイトル（Portfolio） */
.fv-title{
  margin: 0 0 10px 0;     /* タイトル下に10pxあける */
  text-align: center;     /* 真ん中寄せ */
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 0.05em;  
}

/* ===== 画像重ねの土台 ===== */

/* 画面の横はみ出しをカット */
html, body{
  overflow-x: hidden;
}

.fv-image {
  width: 100%;
}
.fv-image img {
  width: 100%;
  height: auto;
  display: block;
}

.fv-visual{
  position: relative; /* 針を重ねるために必要 */
  width: 100%;
  max-width: 365px;   /* Figma基準 */
  margin: 0 auto;
}

/* レコード */
.fv-record{
  width: 100%;
  height: 100%;
  object-fit: contain;    /* 画像を切らずに収める */
  display: block;         /* 変な隙間対策 */
}

/* 針 */
.fv-needle{
  position: absolute;     /* ★土台(fv-visual)の上に重ねる */
  top: -50px;               /* 針の上からの位置 */
  right: -60px;           /* 針の右はみ出し（好みで調整） */
  width: 100%;             /* 針の大きさ（画面に合わせて伸縮） */
  height: auto;
}

/* レコード回転アニメ */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* レコードだけ回す */
.fv-record{
  animation: spin 10s linear infinite; /* 6秒で1回転 */
  transform-origin: 50% 50%;          /* 念のため中心 */
}



/* ===== ABOUT ===== */
.section.about{
  padding: 100px 20px;
}

.about__content{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.section-title__main{
 position: relative;
 margin: 0 auto;
 display: grid;
 place-items: center;
}

/* 波線 */
.section-title__main::before{
 content:"";
 position:absolute;
 inset:0;

 background-repeat:no-repeat;
 background-position:center;
 background-size:contain;

}

/* 共通：セクションタイトル */
.section-title{
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* 波線＋ABOUTを重ねる箱 */
.section-title__main{
  display: grid;
  place-items: center;
  position: relative;
  width: 202px;
  height: 60px;
  margin: 0 auto;
}

/* ABOUT（波線の上） */
.section-title__en{
  grid-area: 1 / 1;
  margin: 0;
  font-size: 32px;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.04em;
  position:relative;
  z-index:1;
}

/* わたしについて */
.section-title__jp{
  margin-top: 4px;       /* ←波線とJPの間を4px */
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  text-align:center;
}

/* 名前 */
.about__name,
.about__id{
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.about__meta{
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 400; 
  flex-wrap: nowrap;
  white-space: nowrap;
  line-height: 1;
}

/* ID */
.about__id{
  font-weight: 900;
}

/* 文章 */
.about__text{
  width: 100%;
  max-width: 520px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0; 
}

.about__text p{
  margin: 0;
}
.about__text p + p{
  margin-top: 4px;    /* 段落間4px */
}

/* イラスト */
.about__illust{
  width: 182px;
  height: auto;
}

.about__profile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.about__text-wrap{
  order:1;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.about__illust{
  order:2;
  display:block;
  margin:0 auto;
}

.about__names{
  display:flex;
  flex-direction:column;
  gap:16px;
}


/* ===== WORKS ===== */
.works{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px;
  gap: 12px;
  background-color: #FA9EBB;
  border-radius: 60px;
}

/* カード一覧：スマホは2列 */
.works__list{
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 175px));
  gap: 16px;
  justify-content: center;
}

/* カード */
.works-card{
  display: block;
  background: #FAF3EB;
  border-radius: 16px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.works-card:hover{
  background-color: #0C1A57;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.works-card:hover .works-card__title,
.works-card:hover .works-card__desc{
  color: #fff;
}
.works-card:hover .works-card__tag{
  color: #FA9EBB;
}

/* サムネ枠 */
.works-card__thumb{
  background: #EDEDED; /* 画像の周りのグレー枠っぽい部分 */
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.works-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 中央トリムでいい感じに */
  display: block;
}
.works-card__title{
  font-family: "Noto Sans JP", sans-serif;
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #0C1A57;
}
.works-card__desc{
  margin: 6px 0 0;
  font-size: 14px;
  color: #0C1A57;
}
.works-card__tag{
  margin: 8px 0 0;
  font-size: 12px;
  color: #FA9EBB;
  font-weight: 400;
}
.works .container{
  padding: 0;
}

/* 中央寄せ */
.works-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ボタン全体 */
.more-btn {
  position: relative;
  width: 220px;   /* 画像サイズに合わせて */
  display: block;
}

/* 共通 */
.more-img {
  width: 100%;
  display: block;
  transition: 
    opacity 0.2s ease,
}

/* hover用は最初は非表示 */
.is-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

/* hover時の動き */
.more-btn:hover .is-default {
  opacity: 0;
}

.more-btn:hover .is-hover {
  opacity: 1;
}

/* WORKSページ用 */
.works-page {
  background-color: #F8CCCA;
}
.works-page .works {
  background-color: transparent;
  border-radius: 0;
}

.home-btn {
  position: relative;
  width: 220px;
  display: block;
}
.home-img {
  width: 100%;
  display: block;
  transition: opacity 0.2s ease;
}
.home-img.is-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
/* hover */
.home-btn:hover .is-default {
  opacity: 0;
}
.home-btn:hover .is-hover {
  opacity: 1;
}


/* ===== BETWEEN ===== */

:root{
  --wave-h: clamp(56px, 8vw, 80px); /* ←ここで波の大きさ調整 */
}

.between-section{
  position: relative;
  padding-bottom: 0;
}

.between-section::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 40px;
  background-image: url("../image/service-back.svg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 40px;
  z-index: 5;
}

.between-inner{
  position: relative;
  z-index: 3; /* 犬を前 */
}

.between-illust{
  width: clamp(240px, 70%, 300px);
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.between-wave{
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
  height: 30px;
  display: block;
  object-fit: cover;
  object-position: center bottom;
  transform: translateY(3px);
  z-index: 2;
}

/* パグとテキストは波の上に */
.between-illust,
.between-text{
  position: relative;
  z-index: 1;
}

/* テキストを画像の上に重ねる */
.between-text{
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%); /* 微調整 */
  width: 90%;                      /* 行幅を固定 */
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  color: #0c1a57;
  text-align: center;
}

/* ===== SERVICE ===== */

/* 上下ナミナミ共通 */
.service-wave{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}

/* つなぎ目の白線対策 */
.service-wave--top{ margin-bottom: -1px; }
.service-wave--bottom{
  transform: rotate(180deg);
  margin-top: -1px;
}

/* ピンク背景の本体（ここに波の高さ分を足す！） */
.service__bg{
  background: #FFDCD1;
  padding: 24px 20px 40px;
  position: relative;
  z-index: 1;
}

.service__bg > .container{
  position: relative;
  z-index: 3;
}

.section.service{
  position: relative;
  padding-top: 0; /* 波の高さ分あける */
}

/* ===== SERVICE CARDS ===== */
.service__content{
  width: 100%;
  margin-top: 40px;   /* タイトル↔カードの間隔 */
  display: flex;
  flex-direction: column;
  gap: 40px;          /* カード↔カードの間隔 */
  align-items: center;
}

/* カード本体 */
.service-card{
  width:360px;
  max-width: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start; /* ← 左揃え */
  box-shadow: 0 10px 30px rgba(12, 26, 87, 0.12);
  font-size: 14px;
}

/* ラベル */
.service-card__label{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 18px;
  background: #fff;
  border: 1px solid #1B2649;

  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 900;

  /* 階段影に変更 */
  box-shadow:
  1px 1px #1B2649,
  2px 2px #1B2649,
  3px 3px #1B2649,
  4px 4px #1B2649,
  5px 5px #1B2649;
}

.service-card__lead {
  line-height: 1.8;
  min-height: 3.6em;
}

/* 画像 */
.service-card__img{
  width: 70%;
  max-width: 240px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.service__bg{
  background: #FFDCD1;
  padding: 24px 20px 40px;
  position: relative;
  margin-bottom: 0;
}

/* ↓↓↓ 波線はここに付ける！！！ */
.service__bg::after{
  content: "";
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  height: 30px;
  background-image: url("../image/service-back.svg");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 30px;

  transform: scaleY(-1);
}

/* ===== DESIGN TOOL ===== */
.service-tool{
  width:318px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.service-tool__title{
  position: relative;
  width: 260px;
}

/* 雲タイトル */
.service-tool__title img{
  max-width: 100%;
  height: auto;
  display: block;
}

.service-tool__title-text{
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 22px;
  font-style: italic;
  color: #fff;
}

/* デザインツール文字 */
.service-tool__sub{
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

/* ツールリスト */
.service-tool__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.service-tool__list li{
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1; 
  margin: 0;
}



/* ===== FLOW ===== */

.flow {
  padding-block: 40px;
}

/* FLOW内の横幅・中央寄せ（containerが既にあるなら不要） */
.flow__content{
  width: 100%;
  text-align: center;
}

/* リード文 */
.flow-lead{
  max-width: 260px;
  margin: 24px auto 32px;
  text-align: center;

  font-size: 14px;
  line-height: 1.25;
}

/* カード並び */
.flow-cards{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* カード本体 */
.flow-card{
  width: min(360px, 100% - 40px);
  margin: 0 auto;
  background: #fff;
  border: 1px solid #1B2649;
  border-radius: 20px;
  overflow: hidden;
  box-sizing: border-box;
}

/* 上の帯 */
.flow-card__head{
  padding: 14px 20px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  color: #1B2649;
}

/* 下の白部分：高さを揃える */
.flow-card__body{
  padding: 12px 20px 14px;
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  color: #1B2649;
  min-height: 70px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 番号（強調したいなら） */
.flow-card__number{
  font-weight: 700;
  margin-right: 6px;
}

/* ===== 色（Figmaのグラデ） ===== */
.flow-card--01 .flow-card__head{ background: #F3ABBB; }
.flow-card--02 .flow-card__head{ background: #F5B6C1; }
.flow-card--03 .flow-card__head{ background: #F7C1C5; }
.flow-card--04 .flow-card__head{ background: #F8CCCA; }
.flow-card--05 .flow-card__head{ background: #FADACE; }



/* CONTACT */
.contact{
  position: relative;
  padding-top: 120px;
  padding-bottom: 40px;
  overflow: hidden;
  background: transparent;
}

/* ネイビーの“山”背景（飾り） */
.contact::before{
  content: "";
  position: absolute;
  top: 30%;
  left: -10vw;
  width: 120vw;
  height: 120vw;
  background: #0B1C5A;
  clip-path: ellipse(75% 100% at 50% 100%);
  z-index: 0;
}

/* 中身は前面に */
.contact .container{
  position: relative;
  z-index: 1;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* CONTACT 見出し */
.contact__title{
  position: relative;
  z-index: 2;
  transform: translateY(10px);
  margin: 0 0 18px;
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-size: 40px;
  letter-spacing: 0.04em;
  line-height: 60px;
  color: #FA9EBB;
  font-style: italic;
}

/* リード文 */
.contact__lead{
  margin: 0 0 28px;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.25;
}

/* LINEボタン行 */
.contact__cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 0 32px;
  flex-wrap: wrap; /* 幅が狭い時に折り返せる */
}

/* LINEアイコン */
.contact__icon{
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* LINEボタン */
.contact__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 28px;
  border-radius: 999px;
  background: #FA9EBB;
  color: #fff;
  text-decoration: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: 0.3s;
}
.contact__btn:hover {
  background: #FFDCD1;
  transform: translateY(-2px);
  color: #0C1A57;
}

/* XとInstagram */
.contact__sns-link{
  width: 35px;
  height: 35px;
  display: inline-block;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}
.contact__sns-link:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

/* SNS */
.contact__sns{
  display: flex;
  justify-content: center;
  gap: 40px;
}
.contact__sns-icon{
  width: 35px;
  height: 35px;
  display: block;
  object-fit: contain;
}

/* ===== works-page ===== */
.works-page .contact__title{
  color: #fff;
}
.works-page .contact__lead{
  color: #fff;
}
.works-page .container{
  padding: 0;
}

.works-detail{
  padding: 100px clamp(20px, 8vw, 100px) ;
}
.works-detail .container{
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1080px;
}
.works-detail__card{
  background: #FAF3EB;
  border-radius: 20px;
  padding: 50px 50px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.works-detail__top{
  display: flex;
  gap: 50px;
  align-items: flex-start;
  width: 100%;
}
.works-detail__top img{
  width: 310px;
  height: 310px;
  object-fit: cover;
  border-radius: 12px;
}
.works-detail__text{
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  width: 600px;
  min-width: 0;
}
.works-detail__text .works-card__title{
  margin-top: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.meta-text a {
  color: #0C1A57;
  text-decoration: underline;
}
.meta-text a:hover {
  opacity: 0.7;
}
.sp-br{
  display: none;
}
@media (max-width: 1279px){
  .sp-br{
    display: block;
  }
  .title-bar{
    display: none;
  }
  .works-detail__text{
    width: 100%;
  }
}
.works-detail__text .works-card__desc{
  margin-top: 10px;
  font-size: 20px;
  line-height: 1.2;
}
.works-detail__text .works-card__tag{
  margin-top: 10px;
  font-size: 14px;
}
.works-detail__lead{
  margin-top: 16px;
}
.works-detail__lead p{
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.7;
}
.works-detail__lead p:first-child{
  margin-top: 0;
}
.works-detail__meta{
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.8;
  max-width: 600px;
}
.works-detail__meta span{
  font-weight: bold;
}
.meta-row{
  display: flex;
  gap: 20px;
  margin-top: 10px;
  align-items: flex-start;
}
.meta-row:first-child{
  margin-top: 0;
}
/* 左のラベル */
.meta-label{
  min-width: 100px;
  font-weight: bold;
}
/* 右の文章 */
.meta-text{
  flex: 1;
  margin: 0;
  line-height: 1.8;
}
.meta-label,.meta-text{
  line-height: 1.7;
}
.works-detail__back{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 376px;
  height: 65px;
  margin: 0px auto 0;
  background: #0C1A57;
  color: #fff;
  border-radius: 32px;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.works-detail__back:hover{
  background-color: #1F2F7A; /* 少し明るいネイビー */
}
.arrow{
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #fff;
  margin-right: 8px;
}

/* hover */
.works-detail__back:hover{
  opacity: 0.8;
}

/* ===== セクションタイトル 波線 ===== */

.section-title__main--pink::before{
  background-image: url("../image/titlepink.svg");
}

.section-title__main--white::before{
  background-image: url("../image/titlewhite.svg");
}


.container{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}


@media (max-width: 767px) {
  .service-card {
    margin-bottom: 20px;
  }
  .works-detail{
  padding: 50px clamp(20px, 8vw, 100px);
}
  .works-detail__card{
    padding: 25px;
  }
   .works-detail__top{
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .works-detail__top img{
    width: 100%;
    max-width: 310px; /* ←ここがキモ */
    height: auto;
  }
  .works-detail__lead p{
    font-size: 14px;
    text-align: left;
  }
  .works-detail__text{
    text-align: center;
    width: 100%;
  }
  .meta-row{
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
  }
  .meta-label{
    min-width: auto;
  }
  .works-detail__back{
    width: 100%;
    max-width: 280px;
    height: 50px;
    font-size: 20px;
  }
}

@media (min-width: 768px) {

.container{
  max-width: 720px;
  margin: 0 auto;
}

.section-title__main{
    width: 281px;
    height: 84px;
  }

.about__profile{
  flex-direction:row;
  align-items:center;
  gap:16px;
}
.about__content{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.about__illust{
  width:182px;
  height:182px;
  object-fit:contain;
  display:inline-block;
  order:1;
}
.about__names{
  display:flex;
  gap:12px;
  justify-content:flex-start;
  flex-direction: row;
}
.about__text-wrap{
  align-items:flex-start;
  text-align:left;
  order:2;
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:520px;
  flex:1;
}

.works__list{
    grid-template-columns: repeat(2, 330px);
    justify-content: center;
    gap: 20px;
  }
.works-card{
    width: 330px;
    height: 456px;
    padding: 28px;
  }
.works-card__title{
    margin-top: 24px;
  }

  .between-illust{
    content: url("../image/between-illust2.png");
    width: calc(100% - 76px);
    width: 100%;
    max-width: 984px; /* ←PCと揃える */
    margin: 0 auto;
    display: block;
  }
  .between-text{
    font-size: 20px;
    top: 40%;
  }

  .service__content{
    flex-direction: column;
    align-items: center;
  }
  .service-card{
    width: 360px;
  }
  .service-card__img{
    width: 100%;
    max-width: 148px;
    max-height: 173px;
    height: 173px; /* ←ここがポイント */
    object-fit: contain; /* ←画像の比率を保つ */
    margin: 0 auto;
    display: block;
  }
  .service-cards{
    display: flex;
    gap: 20px;
    justify-content: center;
  }

  .flow-lead{
    max-width: 500px;
  }
  .flow-card{
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }
   .flow-cards{
    gap: 30px;
  }

  /* works詳細ページ */
  .works-detail__top{
    flex-direction: column;
    align-items: center;
  }
  .works-detail__top img{
    width: 100%;
    max-width: 310px; /* ←Figmaに合わせるならここ */
  }
  .works-detail__text{
    text-align: center; /* テキストも中央 */
  }

}

@media (min-width: 1280px){

  /* ハンバーガー非表示 */
  .menu-icon{
    display: none;
  }
  .overlay{
    display: none;
  }
  /* メニューを普通のナビにする */
  .menu{
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    right: 0;
  }
  /* ul横並び */
  .menu ul{
    display: flex;
    gap: 40px;
    padding: 0;
    align-items: center;
  }
  .menu li{
    margin: 0;
  }
  .menu a{
    color: #FAF3EB;
    font-size: 24px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
  }
  .page-header{
    padding: 0 80px;
  }

  .container{
    max-width: 1080px;
  }

  .about__profile{
    align-items: center;
    gap: 40px;
  }
  .about__illust{
    width: 260px;
  }
  .about__text-wrap{
    max-width: 600px;
  }
  .about__meta{
    font-size: 16px;
  }
  .about__text{
    font-size: 20px;
    line-height: 1.8;
    max-width: 600px;
  }
  .about__name,
  .about__id{
    font-size: 24px;
  }

   .works__list{
    grid-template-columns: repeat(3, 1fr);
  }
  .works-card__title{
    font-size: 20px;
  }
  .works-card__desc{
    font-size: 18px;
    line-height: 1.7;
  }
  .works-card__tag{
    font-size: 16px;
  }

  .between-section{
    padding-top: 160px; /* ← 上余白 */
  }
  .between-illust{
    width: 100%;
    max-width: 984px;  /* ← Figmaサイズ */
    height: auto;
    margin: 0 auto;
    display: block;
  }
  .between-text{
    font-size: clamp(20px, 2.5vw, 20px);
    top: 40%;
  }

  .service-card{
    width: 440px;
  }
  .service-cards{
    gap: 40px;
  }
  .service-card__label{
    font-size: 18px;
    padding: 12px 22px;
  }
  /* サブテキスト */
  .service-card__lead{
    font-size: 16px;
    line-height: 1.8;
  }
  /* 画像 */
  .service-card__img{
    max-width: 200px;
    height: 200px;
  }
  /* 本文 */
  .service-card__text{
    font-size: 16px;
    line-height: 1.8;
  }

  .flow-card{
    width: 100%;
    max-width: 680px;
  }
  .flow-lead{
    max-width: 600px;
    font-size: 18px;
  }
  .flow-card__head{
    font-size: 22px;
  }
  .flow-card__text{
  font-size: 20px;
  line-height: 1.8;
  font-weight: 400;
}

  .contact__lead{
    font-size: 20px;
  }
  .contact__btn{
    padding: 18px 40px; 
    font-size: 20px;
    gap: 20px;
  }
  .contact__icon{
    width: 40px;
    height: 40px;
  }

  /* works詳細ページ */
  .works-detail__top{
    flex-direction: row;
    align-items: flex-start;
  }
  .works-detail__text{
    text-align: left;
  }

}