@charset "UTF-8";
/* CSS Document */

:root{
  --stage: 1024px;
  --content: 624px;
  --pad: clamp(16px, 3vw, 28px);
  --hero-bottom-h: 100px;

  --fz-hero: clamp(24px, 3.2vw, 36px);
  --fz-h2: clamp(20px, 2.2vw, 28px);
  --fz-body: clamp(14px, 1.6vw, 16px);
  --fz-small: clamp(12px, 1.3vw, 14px);

  --teal: #00a8aa;
  --teal-dark: #00a8aa;
	--teal-soft: #2fbfc0;
  --page: #f4f5f3;
  --ink: #1b1b1b;
  --muted: #666;
  --line: #d9ddd6;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",
               "MS PMincho","MS Mincho",serif;
  color: var(--ink);
  background: var(--page);
  font-size: var(--fz-body);
  line-height: 1.9;
  letter-spacing: .02em;
}

/* === サイト全体 背景ライン === */
body{
  background-image: url("img/bg-line.png");
  background-repeat: repeat-y;      /* 縦リピートOK */
  background-position: center top;  /* 中央寄せ */
  background-size: 1024px auto;     /* 横1024px固定 */
  background-attachment: scroll;   /* ← 明示的にスクロール */
}


a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }

/* 1024基準の“外側”コンテナ */
.stage{
  width: min(var(--stage), 100% - (var(--pad) * 2));
  margin-inline: auto;
}
/* 実コンテンツ幅 624px */
.content{
  width: min(var(--content), 100% - (var(--pad) * 2));
  margin-inline: auto;
}

/* --- header / nav --- */
/* ヘッダーだけゴシック */
header{
  position: absolute;  /* ← stickyじゃなく一旦absolute */
  top: 0;
  left: 0;
  width: 100%;
  background: transparent; /* ヒーローと地続きに見せる */
  border-bottom: none;
  z-index: 10;
}


header,
header a,
header .brand{
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic",
               "Noto Sans JP", Arial, sans-serif;
  color: #fff;
}

/* メニューリンクを白に */
header .nav a{
  color:#fff;
}

/* hoverも白系で（好みで） */
header .nav a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 0;
  gap: 16px;
}

.brand{
  display:flex; align-items:center; gap: 10px;
  font-weight: 700;
  letter-spacing: .10em;
}

.brand-logo{
  width: 200px;
  object-fit: contain;
  display: block;
}
.brand img{ height: auto; width: 180px; }

.nav ul{
  display:flex;
  list-style:none;
  padding:0; margin:0;
  gap: clamp(10px, 2vw, 18px);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav a{
  font-size: var(--fz-small);
  color: #2a2a2a;
  padding: 8px 10px;
}
.nav a:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* --- hero --- */
.hero{
  position: relative;
  background-color: var(--teal);

  /* 線画を背景として固定 */
  background-image: url("img/head-lineart.svg");
  background-repeat: no-repeat;

  /* まずは中央下に置く（PDFの雰囲気に近い） */
  background-position: 50% calc(100% - var(--hero-bottom-h));

  /* “幅は1024基準、でも画面に収まる” */
  background-size: min(var(--stage), 100%) auto;

  min-height: 675px;
  overflow: hidden;
	padding-bottom: var(--hero-bottom-h);
}

@media (max-width: 1000px){
  .hero{
    background-position: 50% calc(100% - var(--hero-bottom-h));
    /* min-heightは好みでOK */
  }
}

@media (max-width: 640px){
  .hero{
    /* 下端(100%)より“上”に寄せる */
    background-position: 40% 0%;
		background-size: 640px auto; /* 800〜1100pxくらいで調整 */
		min-height: 425px;
  }
}

.hero-inner{
  position: relative;
  z-index: 2;
  padding-top: 70px;

  /* いまは中央寄せ前提になってるので、レイアウトをgridに切り替える */
  display: grid;
  grid-template-columns: 1fr minmax(0, 624px); /* 左＝余白/線画ゾーン、右＝コピーゾーン */
  align-items: start;

  /* 下の線画と干渉しないための下余白（調整ポイント） */
  padding-bottom: clamp(140px, 18vw, 220px);
}

.hero-copy{
  grid-column: 2;        /* 右カラムに置く */
  width: 100%;
  margin: 0;             /* 中央寄せ解除 */
  text-align: left;      /* 左揃え */
  color: #fff;

  /* 右端にベタ付きしない最低限の余白 */
  padding-right: clamp(0px, 2vw, 24px);
}

/* SPは“左ガター + 右コピー”で右に寄せる */

@media (max-width: 860px){
  .hero-inner{
    grid-template-columns: minmax(180px, 1fr) minmax(0, 624px);
  }
}

@media (max-width: 640px){
  .hero-inner{
    grid-template-columns: clamp(84px, 22vw, 160px) 1fr;
    /* 左：線画の余白（可変） / 右：コピー */
		padding-top: 50px;
  }

  .hero-copy{
    grid-column: 2;
    width: 100%;
    margin: 0;
    text-align: left;

    /* 右端にちょい余白 */
    padding-right: 10px;
  }
}

.hero-cut{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--hero-bottom-h); /* 断面の厚み：ここだけ調整 */
  display: block;
  pointer-events: none;
  z-index: 10;            /* いったん最前面＝“えぐる”優先 */
}

.hero-cut path{
  fill: var(--page);      /* 次セクションの背景色 */
}

.hero h1{
  font-size: var(--fz-hero);
  line-height: 1.4;
  margin: 0 0 10px 0;
  letter-spacing: .16em;
  font-weight: 700;
}
.hero h1 .en{
  font-family: "EB Garamond", serif;
  font-weight: 500;
	font-size: 1.2em;
  letter-spacing: .16em;
}
.hero .lead{
  margin: 0 0 18px 0;
  opacity: .95;
  font-size: clamp(14px, 1.7vw, 17px);
}

.hero .art{
  border: 1px solid rgba(255,255,255,.35);
  padding: 14px;
  background: rgba(255,255,255,.06);
  min-height: 180px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero .art img{ width:100%; height:auto; opacity: .95; }
.hero .art .placeholder{
  font-size: var(--fz-small);
  opacity:.9;
  letter-spacing:.10em;
  text-align:center;
  padding: 18px;
}

/* --- sections --- */
section{ padding: clamp(26px, 4.5vw, 54px) 0; }
.section-title{
  text-align:center;
  margin-bottom: clamp(16px, 3vw, 26px);
}
.section-title h2{
  font-size: var(--fz-h2);
  margin: 0;
  letter-spacing: .18em;
  font-weight: 600;
}
.section-title .en{
  font-family: "EB Garamond", serif;
  font-size: 14px;          /* 少し上品に */
  letter-spacing: .12em;
  font-weight: 500;
  color: #00a8aa;
}


/* --- message --- */
.message{ background: transparent; }
.message .box{
  padding: clamp(16px, 3vw, 26px);
}
.message p{ margin: 0 0 12px 0; color:#2b2b2b; }
.message p:last-child{ margin-bottom:0; }


/* --- services --- */
/* SERVICESだけ中身800pxにする */
.services .content{
  width: min(800px, 100% - (var(--pad) * 2));
}
/* サービスカード：基本は2カラム */
.services .cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  align-items: start;
}

/* 640px以下だけ1カラム（縦） */
@media (max-width: 640px){
  .services .cards{ grid-template-columns: 1fr; }
  .services .card--shelf{
    max-width: 360px;   /* PC:420 → SP:360くらいがバランス良い */
  }

  /* カード同士の縦間も少し詰める */
  .services .cards{
    gap: 15px;
  }
}

.card--shelf{
  background: transparent;
  border: none;
  overflow: visible;
}

.card--shelf .book{
  position: relative;
	display: flex;
  justify-content: center;
}

.card--shelf .book img{
  width: 85%;
  height: auto;
  display: block;
}

.services .card--shelf{
  max-width: 460px; 
  margin-inline: auto;
}


.card--shelf .book-text{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12%;
  color: #1b1b1b;
}

.card--shelf .book-text h3{
  margin: 0;
  font-size: clamp(16px, 1.9vw, 26px);
  line-height: 1.25;
  letter-spacing: .10em;
  font-weight: 600;
	margin-bottom: 0.3em;
}

/* h3内サブタイトル（span） */
.card--shelf .book-text h3{
  margin: 0;
  line-height: 1.25;          /* 見出しの塊を締める */
}

.card--shelf .book-text h3 .sub{
  display: block;             /* 改行扱い */
  margin-top: 0.7em;          /* “間”はここでコントロール */
  font-size: 0.58em;          /* 見出しに対して小さく */
  letter-spacing: .08em;
  font-weight: 500;
  line-height: 1.4;
}

.card--shelf .book-text p{
  margin: 0;
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: .10em;
	margin-top: 0;          /* デフォルトの余白を殺す */
  line-height: 1.6;
}

/* 棚＋ボタン */
.card--shelf .shelf{
  position: relative;
  margin-top: 0;
}

.card--shelf .shelf img{
  width: 100%;
  height: auto;
  display: block;
}

/* ボタン：緑罫線＋右の飾り線（2枚目寄せ） */
.card--shelf .shelf-btn{
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);

  width: min(320px, 88%);
  height: clamp(44px, 5vw, 56px);

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

  background: var(--page);
  color: #1b1b1b;
  border: 1px solid var(--teal);
  letter-spacing: .12em;
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 18px);

  position: absolute;
}

.card--shelf .shelf-btn{
  width: auto;                         /* 固定幅やmin()を解除 */
  min-width: 0;
  padding: 10px 45px;                  /* ←コンパクト化 */
  height: auto;

  top: 40%;                            /* ←棚の中の位置。40→46くらいが収まりやすい */
  font-size: clamp(13px, 1.4vw, 16px); /* 少し控えめに */
}


/* 右の横線 */
.card--shelf .shelf-btn::after{
  content:"";
  position:absolute;
  top: 50%;
  right: -10px;
  width: 30px;
  height: 1px;
  background: var(--teal);
  transform: translateY(-50%);
}

/* 先端の縦線（飾り） */
.card--shelf .shelf-btn::before{
  content: none;
}


.card--shelf .shelf-btn:hover{
  filter: brightness(.98);
}

.card--shelf .shelf-btn{
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.card--shelf .shelf-btn:hover{
  background: var(--teal-soft);
  color: #fff;
  border-color: var(--teal);
}

.card--shelf .shelf-btn:hover,
.card--shelf .shelf-btn:focus-visible{
  background: var(--teal-soft);
  color: #fff;
  border-color: var(--teal);
}

/* --- tables (profile & history unified) --- */
.table-wrap{
  background: transparent;
  border: none;
  overflow: visible;
}
table{
  width:100%;
  border-collapse: collapse;
  background: var(--page);
  font-size: var(--fz-body);
}
th, td{
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
/* th幅固定（PC） */
th{
  width: 180px;
  min-width: 180px;
  text-align:left;
  background: transparent;
  letter-spacing: .08em;
  font-weight: 600;
  white-space: nowrap;
}
tr:last-child th, tr:last-child td{ border-bottom: none; }

/* --- contact form --- */
.contact .form{
  padding: clamp(14px, 3vw, 22px);
}
.form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.field{ display:flex; flex-direction:column; gap: 6px; }
label{
  font-size: var(--fz-small);
  color:#333;
  letter-spacing:.10em;
}
.req{ color: #c13a3a; font-weight: 700; margin-left: 4px; }
input, textarea{
  width:100%;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 0;
  font: inherit;
  background: #fff;
}
input:focus, textarea:focus{
  outline: 2px solid rgba(10,167,155,.25);
  border-color: rgba(10,167,155,.60);
}
textarea{ min-height: 140px; resize: vertical; }
.span-2{ grid-column: 1 / -1; }
.actions{
  display:flex;
  justify-content:center;
  margin-top: 14px;
}
.actions .btn{
  border: none;
  border-radius: 0;
  min-width: 180px;
}

/* 送信ボタン（画像の感じ） */
.actions{
  display: flex;
  justify-content: center;
  margin-top: 22px; /* 少し余白増やすと近い */
}

.actions .btn{
  -webkit-appearance: none;
  appearance: none;

  margin-top: 20px;
	width: min(460px, 100%); /* 横長（必要なら数値調整） */
  padding: 10px 0;

  background: #fff;
  color: #1b1b1b;

  border: 1px solid rgba(0,0,0,.55); /* 細い枠線 */
  border-radius: 0;

  font: inherit;
  font-weight: 600;
  letter-spacing: .18em;

  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;
}

/* ホバーは好み（画像はフラットだけど、少しだけ反応つけるなら） */
.actions .btn:hover{
  filter: brightness(.98);
}

/* フォーカス見やすく（アクセシビリティ） */
.actions .btn:focus-visible{
  outline: 2px solid rgba(10,167,155,.25);
  outline-offset: 3px;
}

.actions .btn{
  background: #fff;
  color: var(--teal);
  border: 1px solid var(--teal);
}

.actions .btn:hover{
  background: var(--teal-soft);
  color: var(--page);
  border-color: var(--teal);
}

.actions .btn:hover,
.actions .btn:focus-visible{
  background: var(--teal-soft);
  color: #fff;
  border-color: var(--teal);
}

/* === フッター直前のロゴ === */
.foot-logo{
  display: flex;
  justify-content: center;
  align-items: center;
	padding-top: clamp(32px, 6vw, 56px);
  padding-bottom: calc(var(--hero-bottom-h) + 5px); /* 波高 + 余白 */
}

.foot-logo img{
  width: min(150px, 60vw); /* 最大200px、SPでは縮む */
  height: auto;
  display: block;
}


/* --- footer --- */
footer{
  position: relative;
  background: var(--teal);
  color: #fff;
  overflow: visible; /* ←外にはみ出させるため */
  padding-top: calc(var(--hero-bottom-h) + 18px);
	padding-bottom: 20px;
}

/* 白い“断面”をフッターの上に貼る */
footer{
  position: relative;
  background: var(--teal);
  color: #fff;
  overflow: visible; /* 波を外に出す */
	padding-top: 10px; /* 波の分は含めない（中身の上余白だけ） */
}

/* フッター上の“白い断面（波）” */
.footer-cut{
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: var(--hero-bottom-h);

  /* フッターの外（上）へ出す */
  transform: translateY(calc(-100% + 1px)); /* 1px重ねて隙間防止 */
  display: block;
  pointer-events: none;
}

.footer-cut path{
  fill: var(--teal); /* ←ここが重要：白じゃなく緑！ */
}


.footer-cap path{
  fill: var(--page); /* ←白地の“板” */
}


.foot{
  display:grid;
  gap: 8px;
  text-align:center;
  font-size: var(--fz-small);
  opacity: .95;
  letter-spacing: .08em;
}



/* --- responsive --- */
@media (max-width: 860px){
  .hero .grid{ grid-template-columns: 1fr; }
  /* .services .cards{ grid-template-columns: 1fr; }  ←これ削除 */
}
@media (max-width: 640px){
  .nav ul{ display:none; }
  /* スマホではth固定を緩める */
  th{
    width: 38%;
    min-width: 0;
    white-space: normal;
  }
  .form-grid{ grid-template-columns: 1fr; }
  .span-2{ grid-column: auto; }
}