@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');

/* 全体の設定*/
body{
    color: #525050;  /* 文字の色 */
    background-color: #fdfbf6;   /* 背景の色 */
    max-width: 980px;  /* 幅を980pxに制限 */
    margin: 0 auto;    /* 左右の余白を自動にして中央寄せ */
    padding: 0 16px;   /* スマホ用に左右余白 */
}
/* スマホ用：幅375pxの中で345pxに収める */
@media screen and (max-width: 768px) {
  body{
    max-width: 345px;
    width: 100%;
    margin: 0 auto;
  }
}


/* ====== ② 共通スタイル（PC基準） ====== */
html {
  font-size: 16px;  /* PCはこれを基準に */
}

/* ヘッダーや本文のスタイル … */


/* PCだけ姓名の間隔を広めに */
.hero-name { word-spacing: .6em; }  /* 好みで調整 */

/* スマホでは控えめ＆折り返し許可 */
@media (max-width:768px){
  .hero-name{
    word-spacing: .2em;
    white-space: normal;     /* 折り返し可 */
  }
}

@media (max-width:768px){
  .hero-stage{               /* ヒーローブロック全体の中央寄せ（保険） */
    max-width: min(680px, 92vw);
    margin: 0 auto;
  }

  .hero-photo{               /* 写真はコンテナ幅にフィット */
    width: 100%;
    height: auto;
    display: block;
  }

  .hero-text{                /* 見出し・役職・本文の帯幅を制限 */
    max-width: min(640px, 90vw);
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    text-align: center;
  }

  /* サイズ感（好みで微調整OK） */
  .hero-name{ font-size: clamp(24px, 8vw, 30px); line-height:1.2; }
  .hero-role{ font-size: clamp(13px, 3.8vw, 16px); margin: 8px 0; }
  .hero-lead{ font-size: clamp(13px, 4vw, 16px); line-height:1.7; margin-top:10px; }

  /* PC専用改行をスマホで消す（HTMLの <br class="pc-only"> 用） */
  .pc-only{ display:none; }
}
/* --- PC（デフォルト）--- */
.hero-name{
  white-space: nowrap;   /* ← PCは折り返さない */
  word-spacing: .6em;    /* 姓名の間を広めに（好みで調整） */
}

/* 写真やテキストの幅制御は PC では何もしないこと！ */

/* --- スマホ --- */
@media (max-width:768px){
  .hero-name{
    white-space: normal; /* ← スマホでは折り返し許可 */
    word-spacing: .2em;  /* 字間少し控えめ */
    font-size: 26px;     /* お好みで */
    line-height: 1.2;
    text-align: center;
  }

  .hero-text{
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
  }

  .hero-photo{
    width:100%;
    max-width:100%;
    height:auto;
    display:block;
  }
}

/* ヘッダー全体 */
.site-header .header-inner {
  display: flex;
  justify-content: space-between; /* 左右に配置 */
  align-items: center;
  width: 980px;
  margin: 0 auto;
}

/* ロゴ */
#start img {
  width: 160px;
  height: auto;
  display: block;
}

/* ナビメニューを右寄せ */
.global-nav {
  margin-left: auto; /* ロゴから一番右に押し出す */
}

.global-nav ul {
  display: flex;
  gap: 30px;         /* メニュー間の余白 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.global-nav a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

/* --- PC共通（既存） --- */
.site-header .header-inner{
  width:980px; margin:0 auto;
  display:flex; align-items:center;
}
#start{ margin:0; }
#start img{ width:160px; height:auto; display:block; }
.global-nav{ margin-left:auto; }
.global-nav ul{
  display:flex; gap:30px; list-style:none; margin:0; padding:0;
}
.global-nav a{ text-decoration:none; color:#333; font-size:16px; }

/* --- ハンバーガーの見た目（最初はPCでは非表示） --- */
.hamburger{
  display:none; margin-left:auto;
  width:36px; height:28px; border:0; background:transparent; padding:0;
  position:relative; cursor:pointer;
}
.hamburger span{
  position:absolute; left:0; right:0; height:2px; background:#333; border-radius:1px;
}
.hamburger span:nth-child(1){ top:2px; }
.hamburger span:nth-child(2){ top:13px; }
.hamburger span:nth-child(3){ bottom:2px; }

/* 通常 */
.hamburger span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #717070;   /* ロゴと同じ色 */
  border-radius: 1px;
  transition: background-color 0.3s;
}

/* hover時 */
.hamburger:hover span {
  background: #555555;   /* ← 少し濃いグレー（#555555） */
}

/* --- 768px以下でスマホ表示 --- */
@media (max-width: 768px){

  /* 横幅は端まで、左右余白はお好みで */
  .site-header .header-inner{ width:100%; padding:12px 16px; }

  /* ロゴ少し小さめに */
  #start img{ width:120px; }

  /* PCの横並びナビは非表示にして、ハンバーガーを表示 */
  .global-nav{ margin-left:0; }
  .global-nav ul{ display:block; } /* 縦並び用 */
  .hamburger{ display:block; }

  /* メニューのドロップダウン（右上から） */
  #global-nav{
    display:none;
    position:absolute;
    top:64px; right:16px;   /* ヘッダー下に出す */
    background:#fff; color:#333;
    border:1px solid #eee; border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    width:max(180px, 40%);  /* 180px以上で40%幅 */
    padding:10px 6px;
    z-index:1000;
  }
  #global-nav.open{ display:block; }

  #global-nav li{ margin:0; }
  #global-nav a{
    display:block; padding:12px 14px;
    font-size:16px; color:#333; text-decoration:none;
  }
  #global-nav a:hover{ background:#f6f5f2; border-radius:8px; }

  /* メニュー展開中の×（アニメっぽく簡易） */
  .hamburger.active span:nth-child(1){ transform:translateY(11px) rotate(45deg); }
  .hamburger.active span:nth-child(2){ opacity:0; }
  .hamburger.active span:nth-child(3){ transform:translateY(-11px) rotate(-45deg); }
}

@media (max-width: 768px) {
  .myprofile {
    display: block;        /* 画像をブロック要素に */
    width: 60%;            /* スマホでは少し小さく（お好みで50〜70%） */
    max-width: 280px;      /* 大きすぎ防止 */
    margin: 24px auto 0;   /* 上に余白＋中央寄せ */
    height: auto;          /* 縦横比を保持 */
  }
}
@media (max-width: 768px) {

  /* a要素をブロック化して中央寄せの土台に */
  section.hero a[href="about.html"]{
    display:block;
    text-align:center;
    margin-top: 20px;   /* 写真やテキストからの余白 */
  }

  /* 画像そのものを小さく＆中央に */
  section.hero img.myprofile{
    display:inline-block; /* 親の text-align:center で中央へ */
    width: 50%;           /* ← Worksの見出し画像の “半分くらい” */
    max-width: 220px;     /* 端末が大きくても上限をかける */
    height: auto;
  }
}
@media (max-width: 768px) {
  img.midashi {
    display: block;
    width: 70%;          /* ← 今よりちょっと小さめ。60〜80%で調整OK */
    max-width: 260px;    /* 上限を決めておくと安心 */
    height: auto;
    margin: 0 auto 20px; /* 中央寄せ＋下に余白 */
  }
}

/* PC：右寄せ */
p > a > img.viewmore {
  display: block;
  width: 50%;
  max-width: 220px;
  margin-top: 4em;
  margin-left: auto;   /* ← これで右寄せ */
  margin-right: 0;
  height: auto;
}

/* スマホ：中央寄せ */
@media (max-width: 768px) {
  p > a > img.viewmore {
    margin: 4em auto 0; /* ← 上4em・中央寄せ */
  }
}

/* view more の画像を中央＆小さめにする */
img.viewmore {
  display: block;
  width: 50%;          /* Worksの半分くらい */
  max-width: 220px;    /* 上限 */
  margin: 4em auto 0;  /* ← 上に4行ぶんの余白、左右中央寄せ */
  height: auto;
}

/* TOPページ画像調整*/
.myprofile {
  display: block;       /* インライン要素をブロックに */
  margin-left: auto;    /* 左の余白を自動にして右に押す */
  margin-right: 0;      /* 念のため右は0 */
}
.viewmore{
    display: block;       /* インライン要素をブロックに */
    margin-left: auto;    /* 左の余白を自動にして右に押す */
    margin-right: 0;      /* 念のため右は0 */
}

/* セクションを中央揃え */
.about,
.works, 
.contact {
  text-align: center; /* 中の要素を中央寄せ */
  margin: 60px 0;     /* 上下に余白 */
}

.about h2 img,
.works h2 img,
.contact h2 img,
.contact p img {
  display: inline-block;
  margin: 0 auto;
}

/* Google Fonts 読み込み用：<head>に追加 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Raleway:wght@400&family=Noto+Sans+JP:wght@400&display=swap');

/* セクション外側の余白だけ */
.hero{ margin:60px 0; }

/* ── 写真とテキストの舞台 ── */
.hero-stage{
  position: relative;
  display: flex;
  justify-content: flex-end;    /* ← 写真を右側へ */
  gap: 0;                       /* 重ねるので不要 */
}

/* 写真（右側） */
.hero-photo{
  display:block;
  max-width: 62%;               /* 写真の見せる幅（調整可） */
  height:auto;
}

/* テキストを写真の上に重ねる（左寄せ） */
.hero-text{
  position:absolute;
  left: 0;                      /* 左端から */
  top: 14%;                     /* 好みで上下位置を調整 */
  width: 48%;                   /* テキストの箱幅（写真に少し食い込む） */
  color:#3b3b3b;
  text-align:left;
}

/* フォント指定（前に使っていた設定と同じ） */

.hero-name{
  font-family:"Playfair Display SC", serif;
  font-size:48px;
  font-weight:400;
  margin:0 0 12px;
  color:#3b3b3b;
  letter-spacing:0.05em;
}
.hero-role {
  font-family:"Raleway", sans-serif;
  font-size:24px;
  margin:0 0 60px;   /* ← ここ！下に60px余白を追加 */
  color:#555;
}
.hero-lead{
  font-family:"Noto Sans JP", sans-serif;
  font-size:20px; line-height:1.9; margin:0; color:#444;
}

/* My profile：写真の“下”で右揃え（980px枠の中で） */
.myprofile{
  display:block;
  margin:24px 0 0 auto;   /* ← 右寄せの決め手 */
  height:auto; max-width:100%;
}

/* ── スマホ：縦並びにして重なりをやめる ── */
@media (max-width: 768px){
  .hero-stage{
    flex-direction: column;
    align-items: center;
  }
  .hero-text{
    position: static;      /* 重ねない */
    width: 100%;
    margin-top: 16px;
    text-align: center;
  }
  .hero-name{ font-size:32px; }
  .hero-role{ font-size:18px; margin-bottom:12px; }
  .hero-lead{ font-size:16px; }

  .hero-photo{ max-width:100%; }
  /* 右寄せのままで良ければこのまま。中央にしたいなら margin:20px auto 0; に変更 */
  .myprofile{ margin:20px 0 0 auto; }
}
/* PCでは br 表示 */
.pc-only {
  display: inline;
}

/* スマホでは br 消す */
@media (max-width: 768px){
  .pc-only {
    display: none;
  }
}

/* viewmoreの上との間隔をあけてる*/
h2 {
  margin: 0; /* デフォルトの余白をリセット */
}

h2 .midashi {
  display: block;
  margin: 0 auto;        /* 中央寄せ */
}

h2 {
  margin-bottom: 72px;   /* ← 下に3行分の余白を追加 */
}

/* お問い合わせページへを下に間隔あけてる */
.contact-text {
  margin-bottom: 72px;  /* 下に3行分くらいの余白 */
  line-height: 1.8;     /* 読みやすい行間 */
  text-align: center;   /* 中央揃えなら追加 */
}

/* お問い合わせページの文字間隔の設定 */
.contact-lead {
  font-family: "Noto Sans", sans-serif;
  font-size: 32px;        /* Figmaと同じ */
  font-weight: 400;       /* Regular */
  text-align: center;
  margin-bottom: 32px;    /* 下に2行分くらい余白 */
}

.contact-text {
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  line-height: 1.8;
  text-align: left;   /* 👈 左揃えに変更 */
  margin: 0 auto;
  max-width: 700px;   /* 行幅を制御して真ん中に配置 */
}

.contact-space-lg {
  margin-top: 32px;       /* 2行分の余白 */
}

.contact-space-sm {
  margin-top: 16px;       /* 1行分の余白 */
}

p.contact-text.contact-space-lg,
p.contact-text.contact-space-sm {
  font-size: 16px;   /* ← 20pxから16pxに変更 */
  line-height: 1.6;  /* 読みやすさのため（お好みで調整） */
}

p.contact-lead {
  font-size: 24px;    /* ← 32pxから24pxに変更 */
  line-height: 1.5;   /* 読みやすく */
  margin-bottom: 24px; /* 下の余白はお好みで */
}
@media (min-width: 769px){
  p.contact-lead,
  p.contact-text {
    text-align: left;    
    margin-left: 200px;   /* ← 左端から10pxあける */
    margin-right: auto;  /* ← 右は自動 */
    max-width: 760px;    /* 幅はお好みで調整 */
  }
}
/* スマホだけ改行を有効化 */
.sp-only {
  display: none;
}
@media (max-width: 768px){
  .sp-only {
    display: inline;
  }
}


/* 写真のサイズ*/
.start{
    width: 130px;
    height: auto;
}

.photo-profile{
    width: 587px;
    height: auto;
}
.myprofile{
    width: 256px;
    height: auto;
}
.viewmore{
    width: 256px;
    height: auto;
}
.midashi{
    width: 258px;
    height: auto;
}
.otoiawase{
    width: 400px;
    height: auto;
}

/* スマホ時：お問合せページへの画像を小さく＆中央 */
@media (max-width: 768px){
  section.contact p > a > img.otoiawase{
    display: block;
    width: 90% !important;   /* 今より25%小さく。もっと小さく→ 70%/65% */
    max-width: 90vw;         /* 画面からはみ出さない保険 */
    height: auto;
    margin: 0 auto;          /* 中央寄せ */
  }
}

/* 制作の下の長方形ツール */
.works-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;          /* カードの間隔 */
  list-style: none;   /* ●を消す */
  padding: 0;
  margin: 0;
}

.works-list li {
  flex: 0 0 calc(33.333% - 20px); /* PCでは3列 */
  background: #F0F4F5;            /* 背景 */
  border-radius: 20px;            /* 角丸 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 影をつける */
  padding: 10px;                  /* 内側余白 */
  box-sizing: border-box;
  display: flex;                  /* 中身を整える */
  align-items: center;
  justify-content: center;
}

.works-list li img {
  width: 100%;
  height: auto;
  border-radius: 12px; /* 画像も少し角丸に */
  object-fit: cover;
}
.works-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PCは3列 */
  gap: 40px; /* 縦横の間隔 */
}

/* スマホ用（幅768px以下とかで指定） */
@media (max-width: 768px) {
  .works-list {
    grid-template-columns: 1fr; /* ←1列表示にする */
    gap: 20px; /* スマホ用に縦の余白少し調整してもOK */
  }
}

/* スマホ用（幅768px以下は1列にする） */
@media screen and (max-width: 768px) {
  .works-list li {
    flex: 0 0 100%;  /* 幅100%で1列表示 */
  }
}


/* ページトップへ戻る*/
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #827F7F;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 2px solid #827F7F;
    border-right: 2px solid #827F7F;
    transform: translateY(20%) rotate(-45deg);
}

footer img {
  display: block;
  margin: 0 auto 20px;  /* 下に8pxの余白（数字は調整可） */
  height: 20px;        /* 必要ならアイコンの高さ調整 */
  width: auto;
}

footer p {
  text-align: center;  /* コピーライトを中央に */
  margin: 0;
}

/* TOPに戻るの設定 */
.top-wrap {
  text-align: center;   /* 中央寄せ */
  margin: 40px 0;       /* 上下に余白（調整可） */
}

.top-btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #F2EEEE;
  color: #333;                 
  text-decoration: none;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid currentColor;  /* 文字色と同じ枠線 */
  transition: all 0.3s;
}

.top-btn:hover {
  background-color: #e0dfdf;
  border-color: #000;
}

footer {
  padding-bottom: 80px; /* フッター全体の下に余白 */
  text-align: center;   /* 真ん中寄せしてるなら */
}

.site-header {
  position: fixed;   /* 固定する */
  top: 0;            /* 上に固定 */
  left: 0;           /* 左端から */
  width: 100%;       /* 横幅いっぱい */
  z-index: 1000;     /* 他の要素より上に表示 */
  background-color: #fdfbf6; /* 背景色を指定（透明だと下が透ける） */
}
body {
  padding-top: 80px; /* ヘッダーが80pxの高さなら */
}



/* PC版（横並び・間15px） */
@media (min-width: 769px){
  .about {
    display: flex;
    align-items: flex-start;
    gap: 15px;              /* ←文字と画像の間 */
  }

  .about-text {
    flex: 1;
    font-size: 16px;
    text-align: left;
  }

  .about-img img {
    max-width: 350px;      /* 好きな幅に調整してね */
    height: auto;
    display: block;
  }
}

/* スマホ版（縦並び：画像が上・文字が下） */
@media (max-width: 768px){
  .about {
    display: block;
  }

  .about-img img {
    max-width: 100%;
    height: auto;
    margin: 0 auto 16px;  /* 下に余白 */
    display: block;
  }

  .about-text {
    font-size: 16px;
    text-align: left;
  }
}

/* 1) About セクションは block（flexにしない） */
section.about{
  display: block;              /* ← これで h2 は横並びに参加しない */
}

/* 2) 見出しの下に20px余白 */
section.about > h2{
  margin: 0 0 80px;
}

/* 3) PC：テキストと写真だけ横並び（間15px） */
@media (min-width: 769px){
  .about-text{
    flex: 1;
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
  }
  .about-img{                  /* 画像側の幅はお好みで */
    flex: 0 0 360px;
  }
  .about-img img{
    width: 100%;
    height: auto;
    display: block;
  }
}
.about-text {
  flex: 1;
  max-width: 600px; /* ← お好みで調整 */
}
 /* 自己紹介スマホ版改行設定 */
.about-text p {
  margin-bottom: 20px;
  line-height: 1.8;
}

@media (max-width: 768px) {
  br {
    display: none; /* スマホでは <br> 無効化 */
  }
}

/* 4) スマホは縦並び（画像 → 文字） */
@media (max-width: 768px){
  
  .about-img img{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 16px;
  }
  .about-text{
    font-size: 16px;
    line-height: 1.8;
  }
  /* ヘッダーの後ろスクロールしても文字見える */
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;   /* ヘッダーの高さ */
  background: #fff; /* 背景をつけると下が透けない */
  z-index: 1000;   /* 一番手前に表示 */
}

main {
  padding-top: 80px; /* ヘッダーの高さと同じ値 */
}

/* Aboutの行間 */
.about-text p {
  margin-bottom: 20px; /* 段落ごとに余白 */
  line-height: 1.8;    /* 行間を広めに */
}
/* Aboutのスマホ、写真と文字上下逆 */
@media (max-width: 768px){
 
  .about-img{ flex: none; width: 100%; max-width: 640px; margin: 0 auto; }
  .about-img img{ width: 100%; height: auto; display: block; }
  .about-text{ max-width: 680px; margin: 0 auto; line-height: 1.8; }
}

/* ===== About：PCは横並び、スマホは縦並び（画像→文字） ===== */

/* PC(>=769px)：必ず横並び */
@media (min-width: 769px){
  #about .about-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    gap: 24px;                  /* 文字と写真の間 */
  }
  #about .about-text{ flex: 1 1 0; min-width: 0; }  /* ←これ大事 */
  #about .about-img{ flex: 0 0 360px; }             /* 右側の幅は好みで */
  #about .about-img img{ width:100%; height:auto; display:block; }

  /* 横並びの時だけ、520pxオフセットを無効化 */
  #about .about-row .content-text{
    margin-left: 0 !important;
    max-width: none !important;
  }
}

/* スマホ(<=768px)：縦並びで「画像→文字」 */
@media (max-width: 768px){
  #about .about-row{
    display: flex !important;
    flex-direction: column-reverse !important;  /* 画像が上、文字が下 */
    gap: 16px;
  }
  #about .about-img img{ width:100%; height:auto; display:block; }
}

/* Aboutの上下の幅の間隔設定 */
@media (max-width: 768px){
  /* ヘッダーと見出しの間（Aboutだけ） */
  #about .midashi{
    margin-top: 0px;   /* 好きな値に調整 */
  }

  /* 見出しと写真の間（Aboutだけ） */
  #about .midashi{
    margin-bottom: 0px;  /* 好きな値に調整 */
  }

  /* 念のため、Aboutの行頭余白が他で上書きされていたら */
  #about { padding-top: 0; }      /* 使っていれば調整 */
  #about .about-row{ margin-top: 0; }
}

 /* Aboutページのスキルのとこの設定*/
 #skills {
  text-align: center;
  padding: 60px 20px;
}
@media (max-width: 768px){
  .skills-row {
    flex-direction: column;
    align-items: center;
  }

  .skill-card {
    width: 100%;
    max-width: 340px;
  }
}

#skills .midashi {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 40px;
}

.skills-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap; /* スマホ対応で折り返す */
}

.skill-card {
  width: 300px; /* ちょうどいいサイズ感 */
  text-align: center;
}

.skill-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 16px;
}

.skill-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.skill-card p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.skill-card .tools {
  font-size: 13px;
  color: #555;
}
.midashi-skill {
  text-align: center;
  margin-bottom: 30px;
}

.midashi-skill .en {
  font-family: 'Playfair Display', serif; /* 英語用 */
  font-size: 32px;
  font-weight: 600;
  margin-right: 8px;
}

.midashi-skill .jp {
  font-family: 'Noto Sans JP', sans-serif; /* 日本語用 */
  font-size: 18px;
  font-weight: 400;
  color: #555;
}

/* skillの表示整え */
/* ===== Skills セクション ===== */
.skills-row{
  max-width: 980px;       /* セクションの横幅 */
  margin: 0 auto 50px;    /* 下に少し余白（→使用ツールとの間） */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;              /* カード間の余白 */
}

.skill-card{
  flex: 1 1 0;
  text-align: center;
}

/* 画像：Figmaの雰囲気に */
.skill-card img{
  width: 100%;
  aspect-ratio: 4 / 3;    /* 好みで 16/9 でもOK */
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: 16px;
}

/* タイトル（英字セリフ体っぽく） */
.skill-card h3{
  font-family: 'Playfair Display', serif; /* 使ってなければお好みで */
  font-weight: 600;
  font-size: 28px;
  color: #5a5a5a;
  margin: 10px 0 12px;
}

/* 説明文 */
.skill-card p{
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin: 0;
  max-width: 340px;       /* 文章の行幅を整える */
  margin-left: auto;
  margin-right: auto;
}

/* 使用ツール（行全体のキャプション） */
.tools{
  text-align: center;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  margin: 8px 0 0;        /* skills-row との間を少しだけ */
}

/* ── レスポンシブ ───────────────────────── */
@media (max-width: 1024px){
  .skills-row{ gap: 24px; }
  .skill-card h3{ font-size: 24px; }
}

@media (max-width: 768px){
  .skills-row{
    flex-direction: column;  /* 1カラム */
    gap: 28px;
  }
  .skill-card{
    max-width: 360px;        /* カード幅を揃えて中央に */
    margin: 0 auto;
  }
  .skill-card h3{ font-size: 22px; }
  .skill-card p{ font-size: 15px; }
  .tools{ font-size: 14px; margin-top: 16px; }
}

/* 既に導入済みならOK：スマホで <br> 消す */
@media (max-width: 768px){
  br{ display:none; }
}
.skills-row{
  display:flex;
  gap:32px;
  flex-wrap:wrap;
}

.tools{
  display:block;
  width:100%;
  text-align:center;
  margin-top:16px;
}

/* ← skillsと上の写真との距離 */
#skills {
  margin-top: 80px;   /* ← 今より大きくしたい分ここで調整 */
  /* または padding-top でもOK */
}

/* ← skillsと下の写真との距離 */
.midashi-skill {
  margin-bottom: 60px;  /* ← 今より広げたい分ここを増やす */
}

/* ===== 共通デザイン ===== */
.midashi-skill,
.midashi-career,
.midashi-strength {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 60px;
}

.midashi-skill .en,
.midashi-career .en,
.midashi-strength .en {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 600;
  margin-right: 8px;
}

.midashi-skill .jp,
.midashi-career .jp,
.midashi-strength .jp {
  position: relative;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  color: #555;
  margin: 0 12px;
  padding: 0 20px;
}

/* 日本語の横棒（20px） */
.midashi-skill .jp::before,
.midashi-skill .jp::after,
.midashi-career .jp::before,
.midashi-career .jp::after,
.midashi-strength .jp::before,
.midashi-strength .jp::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;   /* ← 横棒20px */
  height: 1px;
  background: #555;
}

.midashi-skill .jp::before,
.midashi-career .jp::before,
.midashi-strength .jp::before {
  left: 0;
  transform: translateX(-100%);
}

.midashi-skill .jp::after,
.midashi-career .jp::after,
.midashi-strength .jp::after {
  right: 0;
  transform: translateX(100%);
}

/* 葉っぱサイズ */
.leaf {
  width: 30px;
  height: auto;
}

.midashi-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:80px auto 56px;   /* 上のブロックとの間 / 下の本文との間 */
  text-align:center;
}
.midashi-title .leaf{ width:35px; height:auto; flex:0 0 auto; }

.midashi-title .en{
  font-family:'Playfair Display', serif;
  font-weight:600;
  font-size:24px;
  line-height:1;
  color:#5a5756;
  margin-right:12px;
}
.midashi-title .jp{
  position:relative;
  font-family:'Noto Sans JP', sans-serif;
  font-weight:500;
  font-size:18px;
  color:#5a5756;
  padding:0 24px;
}
.midashi-title .jp::before,
.midashi-title .jp::after{
  content:"";
  position:absolute;
  top:50%;
  width:10px;              /* ←横棒は20px */
  height:1px;
  background:#5a5756;
}
.midashi-title .jp::before{ left:0;  transform:translateX(-100%); }
.midashi-title .jp::after { right:0; transform:translateX(100%); }

@media (max-width:768px){
  .midashi-title{ gap:12px; margin:56px auto 36px; }
  .midashi-title .leaf{ width:28px; }
  .midashi-title .en{ font-size:34px; margin-right:8px; }
  .midashi-title .jp{ font-size:18px; padding:0 16px; }
  .midashi-title .jp::before,.midashi-title .jp::after{ width:16px; height:1.5px; }
}

/* careerの文字の調整 */
.career-list {
  list-style: none;         /* デフォルトの黒丸を消す */
  padding: 0;
  margin: 40px 0;
}

.career-list li {
  position: relative;
  padding-left: 1.5em;      /* ● のための余白 */
  margin-bottom: 18px;      /* 各項目の間隔 */
  line-height: 1.8;         /* 行間を広めに */
}

.career-list li::before {
  content: "●";             /* 黒丸 */
  position: absolute;
  left: 0;
  top: 0.2em;               /* 縦位置微調整 */
  font-size: 0.8em;
  color: #333;              /* 点の色 */
}

.career-list .year {
  font-weight: bold;
  margin-right: 6px;
}

/* ← 文字のスタート位置 */
/* ===== 見出し：PCは横一列・棒線あり ===== */
.midashi-leaf{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:nowrap;             /* PCは横一列 */
  margin:48px auto 32px;
  color:#575452;
}

/* 葉っぱ */
.midashi-leaf .leaf{
  width:34px;
  height:auto;
  display:block;
}

/* 英語・日本語（PC） */
.midashi-leaf .en{
  font-size:45px;               /* お好みで調整OK */
  line-height:1;
  white-space:nowrap;
}
.midashi-leaf .jp{
  font-size:16px;               /* お好みで調整OK */
  line-height:1;
  white-space:nowrap;
}


/* ===== スマホ：2段に（英語+葉/葉 → 日本語）、棒線なし ===== */
@media (max-width: 768px){
  .midashi-leaf{
    flex-wrap:wrap;            /* 改行許可 */
    gap:8px;
    margin:36px auto 24px;
  }

  /* 並び順：左葉1 → 英語2 → 右葉3 → 日本語4（2段目） */
  .midashi-leaf img.leaf:first-of-type{ order:1; }
  .midashi-leaf .en{ order:2; font-size:32px; line-height:1; }
  .midashi-leaf img.leaf:last-of-type{ order:3; }
  .midashi-leaf .jp{
    order:4;
    flex:0 0 100%;
    text-align:center;
    font-size:16px;
    margin-top:4px;
  }

  /* 棒線はスマホで非表示 */
  .midashi-leaf .bar{ display:none !important; }
}

.tools {
  text-align: center;
  font-size: 16px;
  margin-top: 40px;
  line-height: 1.6;
}

.tools {
  text-align: center;
  font-size: 16px;
  margin-top: 40px;
  line-height: 1.6;
}

.tools .label {
  display: block;        /* ← 強制的に上段に */
  font-weight: bold;     /* ← 太字（好みで外せる） */
  margin-bottom: 6px;    /* ← 下に少し余白 */
}

/* 段落の下に余白を追加 */
.content-text p {
  margin-bottom: 2em;   /* 今1.5emなら → 2emとか3emに増やす */
  line-height: 1.8;
}
/* PC用（769px以上） */
@media (min-width: 769px) {
  .midashi-leaf {
    margin: 100px 0;   /* 上下100px、左右0 */
  }
}

/* スマホ用（768px以下） */
@media (max-width: 768px) {
  .midashi-leaf {
    margin: 60px 0;    /* 上下60px、左右0 */
  }
}
.content-text {
  max-width: 700px;       /* 横幅を制限 */
  margin: 0 auto;         /* 左右を自動調整で中央寄せ */
  line-height: 1.8;
  font-size: 16px;
  color: #333;
}
/* PC（769px以上）は横並び：左に文章、右に画像 */
@media (min-width: 769px) {
  #about .about-row{
    display: flex;
    align-items: flex-start;   /* 上揃え */
    gap: 24px;                 /* 文字と画像の間 */
    justify-content: center;   /* 全体を中央寄せ（任意） */
  }
  #about .about-text{
    flex: 1;                   /* 左側を伸ばす */
    min-width: 0;
  }
  #about .about-img{
    flex: 0 0 360px;           /* 画像の幅（好みで調整） */
  }
  #about .about-img img{
    width: 100%;
    height: auto;
    display: block;
  }
}

/* スマホ（768px以下）は縦並び（デフォルト） */
@media (max-width: 768px) {
  #about .about-row{
    display: block;            /* 念のため明示 */
  }
}

/* Worksページのメニュー（デフォルトはPC用横並び） */
.works-menu {
  display: flex;
  justify-content: center; /* 中央寄せ */
  gap: 40px; /* 各項目の間隔 */
  list-style: none;
  padding: 0;
  margin: 40px 0;
}

.works-menu li a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
}

.works-menu li a:hover {
  color: #7A7553; /* ホバー時の色 */
}

/* --- スマホ版（768px以下）は縦並びに変更 --- */
@media (max-width: 768px) {
  .works-menu {
    flex-direction: column;  /* 縦並び */
    align-items: center;     /* 真ん中に寄せる */
    gap: 20px;               /* 間隔を少し狭く */
    margin: 20px 0;
  }
}
.site-header {
  position: sticky; /* fixed でもOK、今の指定に合わせて */
  top: 0;
  z-index: 1000;   /* ← これが効く */
  background: #fdfaf2; /* 背景が透明なら任意で */
}
/* アンカーへ飛んだときのずれ対策（PC） */
#works, #web, #banner, #logo {
  scroll-margin-top: 120px;  /* ヘッダーの高さに合わせて調整 */
}

/* スマホ用に少し小さめに */
@media (max-width: 768px){
  #works, #web, #banner, #logo {
    scroll-margin-top: 80px;
  }
}

/* お好みでスクロールをなめらかに */
html { scroll-behavior: smooth; }

/* 見出しブロックの上下余白（PC/スマホ差分もここで） */
.works-block { margin: 80px auto; }
@media (max-width: 768px){
  .works-block { margin: 56px auto; }
}

/* ===== Works 決定版（古い flex 指定を上書き） ===== */

/* 共通：グリッドで中央寄せ・間隔 */
.works-list{
  list-style: none;
  margin: 40px auto;
  padding: 0;
  display: grid !important;        /* ← flex を上書き */
  gap: 48px 56px;                   /* 行×列の間隔 */
  justify-content: center;          /* グリッド自体を中央寄せ */
}

/* PC：2×2（470×307のカードを2列） */
.works-list--grid{
  grid-template-columns: repeat(2, 470px) !important;
}

/* Web/Logo：1枚だけ中央寄せ */
.works-list--single{
  display: flex !important;
  justify-content: center !important;
}

/* カード枠（背景固定サイズ）*/
.work-card{
  width: 470px;
  height: 307px;
  aspect-ratio: 470 / 307;
  background: #F0F4F5;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画像は “切らずに全体表示” */
.work-card img,
.works-list li img{                  /* ← 古い指定の上書き用に併記 */
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain !important;    /* ← これで切れない */
  border-radius: 12px;
  display: block;
}

/* スマホ：1列・カードは画面幅に合わせて縮む */
@media (max-width: 768px){
  .works-list{ gap: 28px 20px; }
  .works-list--grid{ grid-template-columns: 1fr !important; }
  .work-card{
    width: min(92vw, 470px);
    height: auto;
    aspect-ratio: 470 / 307;
  }
}

/* ===== Works の最終上書き（最後に置く）===== */

/* 共通：リスト自体 */
.works-list{
  list-style: none;
  margin: 40px auto;
  padding: 0;
  justify-content: center;
}

/* Banner：PCは 2列（470×307） */
.works-list--grid{
  display: grid;
  grid-template-columns: repeat(2, 470px);
  gap: 48px 56px;              /* 行×列の間隔 */
}

/* Web / Logo：1枚を中央寄せ */
.works-list--single{
  display: flex;
  justify-content: center;
}

/* 既存の li への古い指定を無効化（背景は消さない） */
.works-list li{
  flex: none !important;
  width: auto !important;
  padding: 0 !important;
  /* background/box-shadow は触らない！ */
}

/* すべてのカードの枠サイズを統一（470×307） */
.work-card{
  width: 470px !important;
  height: 307px !important;
  aspect-ratio: 470 / 307;
  background: #F0F4F5;           /* ← 背景あり */
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;   /* 👈 内側に余白を追加 */
  box-sizing: border-box; /* ← paddingを含めてサイズ維持 */
}

/* 画像は「全体が見える」ように収める */
.work-card img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* 切れないで全部見える */
  display: block;
}

/* スマホ */
@media (max-width: 768px){
  .works-list--grid{ grid-template-columns: 1fr; gap: 28px; }
  .work-card{
    width: min(92vw, 470px) !important;
    height: auto !important;
    aspect-ratio: 470 / 307;   /* 比率維持 */
  }
}
/* ==== Works のカード余白をしっかり付ける（最後に貼る） ==== */
.works-list .work-card{
  width: 470px;
  height: 307px;
  aspect-ratio: 470 / 307;
  background: #F0F4F5;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 10px !important;    /* ← 余白をしっかり付ける */
  box-sizing: border-box;      /* padding 分も含めてサイズ維持 */
}

/* 画像は余白内に“切れずに”収まる */
.works-list .work-card img{
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important; /* ← パツパツ防止（切れない） */
  display: block;
}

/* Contact セクションの上に余白 */
section.contact {
  margin-top: 180px;   /* 好みで調整（60px～100pxくらい） */
}
/* Worksセクションの上下余白 */
.works {
  margin: 30px 0;   /* ← 60px から 30px に減らすなど */
}

/* Works見出しの下余白 */
.works h2 {
  margin-bottom: 10px;  /* ← 今72pxだから減らす */
}

/* Contact セクションの見出し余白を調整 */
section.contact {
  margin-top: 40px;   /* ← 上の余白を減らす（60px → 40pxなど） */
}

section.contact h2 {
  margin-bottom: 40px;  /* ← 下の余白も少し詰める */
}
/* 左右2カラム */
.works-layout{
  display:flex;
  align-items:flex-start;
  gap:40px;
}

/* サイドバー（固定） */
.works-sidebar{
  position: sticky;
  top: 120px;       /* ヘッダー分の余白 */
  flex: 0 0 180px;  /* 幅 */
}
.works-sidebar ul{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column; gap:14px;
}
.works-sidebar a{
  color:#333; text-decoration:none;
}
.works-sidebar a:hover{ color:#7A7553; }

/* 右側メイン */
.works-main{
  flex:1;
  min-width:0; /* はみ出し防止 */
}

/* スマホで縦並び */
@media (max-width:768px){
  .works-layout{ display:block; }
  .works-sidebar{ position:static; margin-bottom:16px; }
}

/* 作品カードの内側余白（パツパツ対策） */
.work-card{ padding: 20px; } /* ←お好みで 16〜24px */

/* === Transparent Header (always) === */
.site-header{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent !important;  /* ←完全透明 */
  box-shadow: none !important;
  transition: background .2s ease, backdrop-filter .2s ease;
}
/* ヘッダー内も透過でOK */
.site-header .header-inner{ background: transparent; }

/* アンカー飛びのズレ対策は現状の scroll-margin-top でOK */

/* サイドバーを980pxの外に出す */
.works-sidebar{
  position: fixed;     /* ← これで画面に固定 */
  top: 300px;          /* ヘッダーの高さ分だけ下げる */
  right: 40px;          /* 画面の右から40pxの位置に */
  width: 160px;        /* 好みで幅を調整 */
  z-index: 900;        /* ヘッダーより下にしたいなら小さめ */
}

.works-sidebar ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.works-sidebar a{
  color: #333;
  text-decoration: none;
  font-size: 18px;
}

.works-sidebar a:hover{
  color: #7A7553;
}

/* ===== Contact form (new) ===== */
.contact-form{
  max-width: 900px;
  margin: 36px auto 0;
  background: #f8f6f1;              /* 背景なじませ */
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.contact-form .form-row{
  margin-bottom: 18px;
}

.contact-form label{
  display: block;
  font-weight: 500;
  color: #444;
  margin-bottom: 8px;
}

.contact-form .req{
  color: #b37a66;                   /* 必須の＊の色（お好みで） */
  font-weight: 700;
  margin-left: 4px;
}

/* 共通フィールド */
.contact-form input,
.contact-form textarea,
.contact-form select{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e6e2da;
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 16px;
  color: #aba8a8;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  border-color: #b7aaa0;
  box-shadow: 0 0 0 3px rgba(183,170,160,.25);
}

/* セレクトの矢印（カスタム） */
.select-wrap{
  position: relative;
}
.select-wrap select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
}
.select-wrap::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid #777;
  border-bottom: 2px solid #777;
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

/* テキストエリア */
.contact-form textarea{
  resize: vertical;
  min-height: 180px;
  line-height: 1.7;
}

/* 送信ボタン（幅いっぱい/角丸のダーク） */
.contact-form .submit-btn{
  display: block;
  width: 100%;
  border: none;
  height: 56px;
  border-radius: 28px;
  background: #4b4947;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .1em;
  cursor: pointer;
  margin-top: 8px;
  transition: transform .05s ease, filter .2s ease;
}
.contact-form .submit-btn:hover{ filter: brightness(1.05); }
.contact-form .submit-btn:active{ transform: translateY(1px); }

/* スマホ */
@media (max-width: 768px){
  .contact-form{ padding: 18px; border-radius: 10px; }
  .contact-form .submit-btn{ height: 52px; }
}

/* ===== スマホ調整（<=768px） ===== */
@media (max-width: 768px){

  /* ヘッダーとハンバーガーを最前面に */
  .site-header{
    position: sticky;   /* そのままでOK */
    top: 0;
    z-index: 3000;      /* ← 重なり順を強める */
    background: rgba(253,251,246,.7); /* うっすら背景（任意） */
    backdrop-filter: blur(6px);       /* 任意：半透明のとき見栄えUP */
  }
  .site-header .header-inner{
    width: 100%;
    padding: 12px 16px;
    position: relative;
    z-index: 3000;
  }
  .hamburger{
    display: block !important;  /* ← 念のため強制表示 */
    position: relative;
    z-index: 4000;              /* ← 何があっても前に出す */
  }
  /* ドロップダウンメニュー（開いた時に最前面） */
  #global-nav{
    display: none;              /* JSで .open になったら表示 */
    position: fixed;
    top: 64px; right: 16px;
    background: #fff;
    color: #333;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    width: max(180px, 60vw);
    padding: 10px 6px;
    z-index: 5000;              /* ← いちばん前 */
  }
  #global-nav.open{ display: block; }

  /* ===== Works：サイドメニュー（All〜）を中央の縦1列に ===== */
  .works-layout{               /* 右側と縦並びにする */
    display: block;
  }
  .works-sidebar{
    position: static;          /* sticky解除 */
    width: 100%;
    margin: 16px 0 24px;
    display: flex;
    justify-content: center;   /* 中央寄せ */
  }
  .works-sidebar ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;    /* ← 縦1列 */
    align-items: center;       /* 中央に揃える */
    gap: 12px;
  }
  .works-sidebar a{
    font-size: 18px;
    text-decoration: none;
    color: #333;
  }
  /* “今ここ”の目印（スマホ用は左の●を消して下線に） */
  .works-sidebar a.is-active{
    color: #7A7553;
    font-weight: 600;
    border-bottom: 2px solid #7A7553;
    padding-bottom: 2px;
  }
  .works-sidebar a.is-active::after{ display:none; } /* PC用の●を無効化 */
}

/* 全セクションのカードを統一サイズに */
.work-card {
  width: 100%;                 /* 親に合わせる */
  max-width: 470px;            /* バナーに合わせて最大470px */
  aspect-ratio: 470 / 307;     /* バナー比率を固定 */
  background: #F0F4F5;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;               /* 内側余白をそろえる */
  box-sizing: border-box;
}

/* 中の画像も切れないように統一 */
.work-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* 全体を表示 */
  border-radius: 12px;
}

/* ========= Works 強制上書き（必ずファイルの一番下） ========= */

/* Web / Banner / Logo すべてのカードを同サイズに */
.works-list .work-card{
  width: 470px !important;
  height: 307px !important;
  aspect-ratio: 470 / 307 !important;

  background: #F0F4F5;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 16px !important;      /* 余白も固定 */
  box-sizing: border-box;
}

/* 画像は“切らずに”枠内に収める（SVGでも効く） */
.works-list .work-card img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important; /* ← 全体が見える */
  display: block;
}

/* 1枚だけの Web / Logo も中央寄せに */
.works-list--single{
  display: flex !important;
  justify-content: center !important;
}

/* 既存の li の横幅指定などを無効化 */
.works-list li{
  flex: none !important;
  width: auto !important;
  padding: 0 !important;
}

/* スマホ：1列＆比率維持で縮小 */
@media (max-width: 768px){
  .works-list--grid{ grid-template-columns: 1fr !important; gap: 28px !important; }
  .works-list .work-card{
    width: min(92vw, 470px) !important;
    height: auto !important;
    aspect-ratio: 470 / 307 !important;
  }
}

/* ==== ヘッダーのモザイク/影/半透明を全消し（最終上書き）==== */
.site-header,
.site-header::before,
.site-header::after,
header,
header::before,
header::after {
  background: transparent !important;   /* ぜんぶ透明に */
  box-shadow: none !important;          /* 影を消す */
  filter: none !important;              /* ぼかし等を消す */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;     /* “ガラス”効果を消す */
  outline: none !important;
  border: none !important;
}

/* ヘッダー内の箱にも影が残っている場合に備えて */
.site-header * {
  box-shadow: none !important;
  background: transparent !important;
  filter: none !important;
}

/* 念のため：ヘッダーに重ねているグラデ/白帯があれば無効化 */
.site-header .header-inner::before,
.site-header .header-inner::after,
header .header-inner::before,
header .header-inner::after,
main::before {          /* まれに main::before で帯を作っているケース */
  content: none !important;
  display: none !important;
}

/* === ハンバーガー復活（透明リセットの影響を打ち消し）=== */
.hamburger{
  position: relative;
  width: 36px;
  height: 28px;
  border: 0;
  background: transparent !important;   /* ボタン自体は透明でOK */
  padding: 0;
  cursor: pointer;
}

/* 3本線の見た目（リセットで消えた色を戻す） */
.hamburger span{
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #717070 !important;       /* ← これが透明になっていた */
  border-radius: 1px;
  content: "";
  display: block;
}
.hamburger span:nth-child(1){ top: 2px; }
.hamburger span:nth-child(2){ top: 13px; }
.hamburger span:nth-child(3){ bottom: 2px; }

.hamburger:hover span{ background: #555555 !important; }

/* スマホでは表示、PCでは非表示（念のため強めに） */
@media (max-width: 768px){
  .hamburger{ display: block !important; }
  /* ドロップダウンの背景は白に戻す（透過で見えにくいとき） */
  #global-nav{
    background: #fff !important;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
  }
  #global-nav.open{ display: block !important; }
}

@media (min-width: 769px){
  .hamburger{ display: none !important; }
}
/* スマホ版は余白を小さめに */
@media (max-width: 768px) {
  body {
    padding-top: 5px;   /* ← 80px → 60px に調整（好みで40〜60px） */
  }
  main {
    padding-top: 5px;   /* ← 同じく揃える */
  }
}


@media (max-width: 768px) {
  #about .midashi {
    margin-top: 40px;     /* 上の余白（好きな値に調整） */
    margin-bottom: 5px;  /* 下の余白を小さく（例: 20px） */
  }
}
/* My Strengths の見出し上に余白を追加 */
#strengths {
  margin-top: 150px;   /* ←今より大きくする。お好みで80〜120pxくらい */
}

/* Contact のセクション上に余白を追加 */
.contact {
  margin-top: 150px;   /* ←ここも調整可能 */
}


/* 仕様ブロック（左：項目、右：本文） */
.spec {
  display: grid;
  grid-template-columns: 160px 1fr; /* 左カラム幅は好みで */
  row-gap: 20px;
  column-gap: 24px;
  margin-top: 28px;
}

.spec > div { /* 各行をブロック化して整える */
  display: contents; /* dtとddをグリッドに直接流し込む */
}

.spec dt {
  color: #b7b7b7;            /* スクショの薄グレーっぽく */
  font-weight: 500;
  line-height: 1.9;
}

.spec dd {
  margin: 0;                 /* 既定の余白を消す */
  line-height: 2;            /* 読みやすい行間 */
}

/* スマホ（1カラムに） */
@media (max-width: 768px){
  .spec {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .spec dt {
    margin-top: 8px;
  }
  .spec dd {
    margin-top: 4px;
  }
  /* 行間の区切りが欲しければ */
  .spec > div:not(:last-child) dd {
    border-bottom: 1px solid #eee;
    padding-bottom: 14px;
  }
}
/* Xアイコンの場所 */
footer {
  display: flex;
  flex-direction: column; /* ←縦並びの場合 */
  align-items: center;
  gap: 30px;              /* ←要素の間の距離 */
  padding: 30px 0;
}
/* SNSアイコン横並び */
.footer-sns {
  display: flex;
  gap: 20px;
  align-items: center;
}

/* アイコンサイズ調整 */
.footer-sns img {
  width: 28px;
  height: auto;
  opacity: 0.8;
  transition: opacity 0.3s, transform 0.3s;
}

/* hover演出（さりげなく） */
.footer-sns img:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.footer-sns a {
  display: inline-flex;
}

/* ===== Works: 最終上書き（リンク付きでも切れない＆背景出す） ===== */

/* リストはグリッドで中央寄せ */
.works-list{
  display: grid !important;
  grid-template-columns: repeat(2, 470px) !important; /* PC:2列固定 */
  gap: 48px 56px !important;
  list-style: none !important;
  margin: 40px auto !important;
  padding: 0 !important;
  justify-content: center !important;
  justify-items: center !important;
}

/* SPは1列 */
@media (max-width: 768px){
  .works-list{ grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* li についていた古い装飾を完全オフ */
.works-list li{
  display: block !important;
  flex: none !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* カードの枠（背景と角丸・影） */
.work-card{
  width: 470px !important;
  height: 307px !important;
  aspect-ratio: 470 / 307 !important;
  background: #EEF6F8 !important;        /* ← 背景を確実に表示 */
  border-radius: 20px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

/* a をブロック化して中身をクリップ */
.work-card > a{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* 画像が途中で切れないように：高さは自動、ベースライン余白も消す */
.work-card img{
  display: block !important;
  width: 100% !important;
  height: auto !important;          /* ← これが超重要（切れ防止） */
  max-width: 100% !important;
  object-fit: contain !important;   /* 全体を収める（トリミングしない） */
  border-radius: 0 !important;
}

/* ===== Works 背景パネルを強制的に表示 ===== */
.works-list{ justify-items:center !important; }

/* カード本体 */
.work-card{
  position: relative !important;
  width: 470px !important;
  height: 307px !important;
  aspect-ratio: 470 / 307 !important;
  padding: 16px !important;           /* 画像のまわりの余白 */
  box-sizing: border-box !important;
  overflow: hidden !important;         /* 角からはみ出さない */
}

/* 背景パネル（常に下に敷く） */
.work-card::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;                 /* 親いっぱい */
  background: #F6F1E7 !important;      /* ← 好きな色 */
  border-radius: 20px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;
  z-index: 0 !important;
}

/* 中身（リンク＆画像）は前面に */
.work-card > a{
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.work-card img{
  display: block !important;
  width: 100% !important;
  height: auto !important;             /* 切れ防止 */
  object-fit: contain !important;      /* 全体を見せる */
}
/* ===== 作品詳細ページ（背景・カード消す） ===== */
.page-detail .work-card,
.page-detail .works-list,
.page-detail .works-list li{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto;
}

/* ===== 詳細ページの作品画像を中央に大きく ===== */
.page-detail .detail-art {
  text-align: center;   /* 中央寄せ */
  margin: 40px auto;
}

.page-detail .detail-art img {
  display: block;
  margin: 0 auto;
  max-width: min(1000px, 90vw);  /* 横幅は画面の90%か1000pxまで */
  height: auto;
  object-fit: contain;
}

/* ===== 詳細ページ：カード系の制約を無効化 ===== */
.page-detail .works-list{ 
  display:block !important; 
  margin:0 !important; 
  padding:0 !important;
}
.page-detail .work-card{
  position: static !important;
  width:auto !important; 
  height:auto !important; 
  background:transparent !important; 
  box-shadow:none !important; 
  padding:0 !important; 
  border-radius:0 !important;
}
.page-detail .work-card::before{ 
  content:none !important; 
  pointer-events:none !important; 
}

/* ===== 作品詳細ページ：背景/影なしで中央ドーン ===== */
.page-detail .detail-art{
  margin: 32px auto;
  text-align: center;
}
.detail-art img {
  max-width: 80%;   /* 横幅を親要素の8割に */
  height: auto;     /* 縦横比を保つ */
  display: block;
  margin: 0 auto;   /* 真ん中に配置 */
}


/* 念のため：カード系の指定が残っていても無効化 */
.page-detail .works-list,
.page-detail .work-card,
.page-detail .work-card::before{
  all: unset;  /* 古い指定を一掃 */
}
/* ===== スマホ時の見出し調整 ===== */
@media (max-width: 768px){
  .works-midashi .en,
  .midashi-leaf .en {
    font-size: 15px;      /* ← 好みで調整（今より小さめに） */
    white-space: nowrap;  /* ← 折り返さないで1行 */
  }

  .works-midashi .jp,
  .midashi-leaf .jp {
    font-size: 14px;      /* 日本語部分も少し小さめに */
    white-space: nowrap;  /* ← こちらも折り返さない */
  }
}
.btn-area {
  display: flex;          /* 横並びにする */
  justify-content: center;/* 真ん中に配置（左寄せならflex-start） */
  gap: 20px;              /* ボタン同士の間隔 */
  margin: 30px 0;         /* 上下に余白を追加 */
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #666;
  border-radius: 20px;
  text-decoration: none;
  color: #333;
  background-color: #f6f3f3;
}
.btn-area {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 80px;  /* ← 上に余白を追加 */
}
.works-midashi {
  margin-top: 40px;   /* ← 今より小さめにする */
  text-align: center; /* 中央寄せ（すでにやってるなら不要） */
}

/* ====== 作品詳細ページ：最終上書き（必ずファイルの一番下） ====== */


/* fullbleed-photo 以外の画像は60%のまま */
.page-detail .detail-art img:not(.fullbleed-photo){
  max-width: 60% !important;
  width: 60% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

/* 見出しの上下マージンを詰める（midashi-leaf / works-midashi） */
.page-detail .midashi-leaf,
.page-detail .works-midashi{
  margin: 24px auto 24px !important;   /* 上下をグッと詰める */
}

/* セクション自体の上余白もリセット（#web が余白を持っている時用） */
.page-detail #web{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.contact-form .submit-btn{
  width: 100%;
  text-align: center;
}

/* 入力前（プレースホルダー文字） */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #b7b7b7;   /* 薄いグレー */
}

/* 入力後（実際に入力した文字） */
.contact-form input,
.contact-form textarea,
.contact-form select {
  color: #333333;   /* 濃いグレー */
}
/* THANKYOUの上の幅 */
.contact h2 {
  margin-top: 8px;   /* ← 今80pxとかなら小さく */
  margin-bottom: 40px;
}
/* THANKSページだけヘッターの余白なし  */
.page-thanks {
  padding-top: 20px; /* 通常80px → 20pxなどに変更 */
}
/* 画像リンクのクリック範囲＝画像だけにする */
.link-img{
  display: inline-block;   /* a を画像サイズだけに */
  line-height: 0;          /* 余白によるクリック範囲拡大を防ぐ */
}

/* スマホ用に a を block にしていた指定を打ち消す */
section.hero a[href="about.html"]{
  display: inline-block !important;
  text-align: left;        /* 必要なら調整。中央にしたい時は親を text-align:center; に */
}

/* 念のため、p で囲んでいても a が広がらないように */
.works p a,
.contact p a{
  display: inline-block;
}
.side-link {
  display: flex;              /* フレックスで配置 */
  justify-content: flex-end;  /* 右端に寄せる */
  margin: 40px 0;
}

.side-link img {
  width: 220px;  /* My profile の基準サイズ */
  height: auto;
  display: block;
}
/* 右端にピタッと寄せる器 */
.side-right{
  display: flex !important;
  justify-content: flex-end !important; /* ←これで右端 */
  margin: 24px 0;
}

/* クリック範囲＝画像の実寸だけ */
.link-img{
  display: inline-block;      /* a を画像サイズだけに */
  line-height: 0;             /* 行高の余白でクリック面積が広がるのを防ぐ */
}

/* 画像のサイズを揃える（必要なら調整） */
.myprofile,
.viewmore{
  width: 256px;               /* 同じ大きさにする */
  height: auto;
  display: block;
}
/* === この1枚だけを大きく＆スマホはフルブリード === */
.page-detail .detail-art img.fullbleed-photo{
  display: block;
  height: auto;
  width: min(100%, 1100px) !important;  /* PCで大きめに見せたい時は数値調整 */
  max-width: none !important;
  margin: 24px auto;
}

/* PCは現状キープ。スマホだけ fullbleed-photo を端まで広げる */
@media (max-width: 768px){
  .page-detail .detail-art img.fullbleed-photo{
    width: 100vw !important;           /* 画面幅いっぱい */
    max-width: none !important;        /* 60%などの上限を無効化 */
    height: auto !important;
    display: block !important;

    /* コンテナの中央から左右の余白を打ち消してフル幅にする定番技 */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  /* もし figure に左右余白やパディングがある場合の保険 */
  .page-detail .detail-art{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* === スマホだけ：詳細ページの対象画像を画面いっぱいに === */
@media (max-width: 768px){
  body.page-detail .detail-art img.fullbleed-photo{
    display: block !important;
    width: 100vw !important;                 /* 画面幅いっぱい */
    max-width: none !important;              /* 60%の上限を解除 */
    height: auto !important;
    margin-left: calc(50% - 50vw) !important;/* 余白を打ち消す */
    margin-right: calc(50% - 50vw) !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  /* 親の左右余白が影響していた場合の保険 */
  body.page-detail .detail-art{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* ===== 詳細ページの対象画像：PCは60%、スマホは親幅いっぱい ===== */

/* PC(>=769px)：60%のままに固定 */
@media (min-width: 769px){
  .page-detail .detail-art img.fullbleed-photo{
    width: 60% !important;
    max-width: 60% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;      /* 中央寄せ */
    object-fit: contain !important;
  }
}

/* スマホ(<=768px)：親要素の幅いっぱい（左右16pxの余白は残す） */
@media (max-width: 768px){
  .page-detail .detail-art img.fullbleed-photo{
    width: 100% !important;         /* 親幅いっぱい */
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 16px auto !important;   /* 余白はお好みで */
    object-fit: contain !important;
  }
}
/* Contact：見出し画像の上に同じ余白（PC/スマホ共通） */
section.contact h2 {
  margin-top: 180px !important;   /* 好みで 80–150px に調整OK */
}

/* ==== デスクトップ：いままで通り（横並び） ==== */
.site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between;
}

/* PCではハンバーガー非表示、ナビは横並び・背景なし */
.hamburger{ display:none; }
.global-nav{
  display:block;                     /* 常に表示 */
  position:static;                   /* 位置固定しない */
  background: transparent;
  width:auto;
}
.global-nav ul{
  display:flex; gap:30px; list-style:none; margin:0; padding:0;
}
.global-nav a{
  color:#333; text-decoration:none; padding:0;  /* PCは行内リンク */
}

/* ==== スマホ：ハンバーガー表示、ドロップダウン ==== */
@media (max-width:768px){
  .hamburger{
    display:block;
    width:50px;height:50px; position:relative; border:0; background:transparent; padding:0; cursor:pointer;
  }
  .hamburger span{
    position:absolute; left:50%; transform:translateX(-50%); width:44%; height:2px; background:#242424; transition:.5s;
  }
  .hamburger span:nth-child(1){ top:16px; }
  .hamburger span:nth-child(2){ top:24px; }
  .hamburger span:nth-child(3){ top:32px; }

  /* × 状態 */
  .hamburger.active span:nth-child(1){ top:50%; transform:translate(-50%,-50%) rotate(45deg); }
  .hamburger.active span:nth-child(2){ display:none; }
  .hamburger.active span:nth-child(3){ top:50%; transform:translate(-50%,-50%) rotate(-45deg); }

  /* メニューはデフォ非表示、開いたら .open で表示 */
  .global-nav{
    display:none;
    position:absolute; top:100%; right:16px; left:16px;
    background:#242424; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08);
    z-index:1000;
  }
  .global-nav.open{ display:block; }
  .global-nav ul{ display:block; padding:8px 0; }
  .global-nav li{ border-top:1px solid #474747; }
  .global-nav li:last-child{ border-bottom:1px solid #474747; }
  .global-nav a{
    display:block; color:#fff; padding:14px 12px; text-decoration:none;
  }
  @media (hover:hover){ .global-nav a:hover{ background:#333; } }
}

/* ===== Works card：中身をど真ん中＆角丸4つ統一（最終上書き） ===== */
.works-list .work-card{
  position: relative !important;
  background: #F6F1E7 !important;   /* 好きな色に */
  border-radius: 20px !important;  /* 角丸はここで統一 */
  box-shadow: 0 10px 24px rgba(0,0,0,.06) !important;

  overflow: hidden !important;     /* 角丸を確実に効かせる */
  padding: 16px !important;        /* PCっぽい余白 */
  box-sizing: border-box !important;

  display: flex !important;        /* ← 中身を中央へ */
  align-items: center !important;
  justify-content: center !important;
}

/* 以前の「背景パネル用 ::before」を使ってた場合は無効化（角丸ズレ防止） */
.works-list .work-card::before{
  content: none !important;
}

/* リンク領域も中央寄せの器に */
.works-list .work-card > a{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px !important;  /* 内側も角丸を揃える */
  overflow: hidden !important;
}

/* 画像は「切らずに全体表示」＋ど真ん中 */
.works-list .work-card img{
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}