/* ===============================
   お問い合わせフォーム 共通CSS
   背景：白 / 入力ボックス：薄いグレー / 角丸ボタン：#ffc68e
================================= */

/*--------------------------------
ヘッダー
---------------------------------*/
.header {
  position: fixed; top: 0; z-index: 1; width: 100%;
  background-color: #fff; box-shadow: 0 5px 10px -6px rgba(0,0,0,.1);
}
.header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px;
}
.header-logo { font-size: 20px; font-weight: bold; line-height: 1.2; margin-right: 20px; letter-spacing: .05em; }
.header-logo a { color: #333; }
.gnav-list { display: flex; justify-content: space-between; list-style: none; }
.gnav-item:not(:last-child) { margin-right: 20px; }
.gnav-item a {
  position: relative; font-size: 13px; font-weight: bold; display: inline-block;
  padding: 5px 0; transition: .3s; letter-spacing: .05em; color: #333;
}
.gnav-item a:after {
  position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; content: "";
  transition: .3s; transform: translateX(-50%); background-color: #333;
}
.gnav-item a:hover:after { width: 100%; }

a {
  transition: opacity .3s;
  text-decoration: none;
  color: #1ca9e3;
}

/* ベース */
html, body {
  background: #fff;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic",
               "Meiryo", sans-serif;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

/* 見出し（どのページでも中央＆同じ横幅感） */
h1 {
  font-size: 1.8rem;
  font-weight: 700;
  max-width: 780px;
  margin: 24px auto 0px;
  padding: 0 16px;
  text-align: center;
}

/* 入力画面（contact.php） */
form {
  max-width: 780px;
  margin: 0 auto 48px;
  padding: 24px 16px 32px;
}

/* ラベルは縦並び（項目名の下に入力） */
label {
  display: block;
  font-weight: 600;
  margin: 18px 0 8px;
}

/* 入力系（薄いグレー、角丸） */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin-top: 8px;
  background: #f5f6f7;
  border: 1px solid #e4e6e8;
  border-radius: 10px;
  font-size: 16px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  text-align: left;
}

/* テキストエリア */
textarea { min-height: 160px; resize: vertical; }

/* フォーカス時の視認性 */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: #ffc68e;
  box-shadow: 0 0 0 3px rgba(255,198,142,.25);
  background: #fff;
}

/* 送信ボタン（単体でも見た目が整う） */
button[type="submit"] {
  display: inline-block;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  background: #ffc68e;
  color: #3b2f26;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  transition: transform .05s ease, filter .15s ease, box-shadow .15s ease;
}
button[type="submit"]:hover { filter: brightness(.96); }
button[type="submit"]:active { transform: translateY(1px); }

/* エラーメッセージ（contact.php） */
form p.error,
p[style*="color:#b00"] {
  margin: 8px auto 0;
  max-width: 780px;
  padding: 8px 12px;
  background: #fff5f5;
  border: 1px solid #f5c2c7;
  border-radius: 8px;
}

/* --------------- 確認画面（confirm.php） --------------- */

/* h1 / 表 / ボタンを同じ横幅に揃えるコンテナ */
.container-narrow {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 16px;
}

/* テーブル（箱ごと中央・中身は左寄せ） */
.confirm-table {
  width: 100%;
  margin: 0 auto 24px;
  border-collapse: collapse;
  table-layout: fixed; /* 列幅を固定してブレ防止 */
}

/* 列幅（見出し35% / 値65%）→ confirm.php に <colgroup> を入れて使用 */
.confirm-table col.c-label { width: 35%; }
.confirm-table col.c-value { width: 65%; }

.confirm-table th,
.confirm-table td {
  padding: 12px 14px;
  border: 1px solid #e4e6e8;
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.confirm-table th {
  background: #fafafa;
  font-weight: 700;
  color: #333;
}

/* ボタン行（修正・送信）は中央で等間隔 */
.form-actions {
  display:flex;
  justify-content:center;
  gap:12px;
  margin:24px 0 48px;
}
.form-actions button{
  -webkit-appearance:none; appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* 高さはココで統一 */
  height:48px;           /* ← お好みで 44〜52px に調整可 */
  padding:0 22px;        /* ← 上下0、左右だけ余白 */
  line-height:1;         /* ← 行高の差を無効化 */
  box-sizing:border-box;
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #fff;

  font-weight: 600;
  transition:transform .05s ease, filter .15s ease, box-shadow .15s ease;
  white-space:nowrap;     /* 長文でも折り返さない */
}

/* 配色だけ個別に */
.form-actions button[type="submit"]{
    background-color: #b0e0e6;
    color: #333;
}

.form-actions button[type="button"]{ background:#87ceeb; color:#333; }

.form-actions button:hover { filter:brightness(.97); }
.form-actions button:active{ transform:translateY(1px); }

/* 完了メッセージ */
.thanks-message {
  text-align: center;
  font-size: 1.1rem;
  margin: 32px 0;
  line-height: 1.8;
}

/* 戻るボタンを送信ボタンと同じテイストに */
.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: #e9ecef;   /* ← 修正ボタンと同じグレー */
  color: #333;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
  transition: transform .05s ease, filter .15s ease;
}

.btn-back:hover { filter: brightness(.97); }
.btn-back:active { transform: translateY(1px); }

/*--------------------------------
 ページトップ
---------------------------------*/
.page-top { font-weight: bold; padding: 10px; cursor: pointer; text-align: center; background-color: #4c4c4c; }
.page-top .material-icons-outlined { vertical-align: bottom; color: #fff; }

/*--------------------------------
 フッター
---------------------------------*/
.footer { padding: 30px; background-color: #333; }
.copyright { font-size: 10px; text-align: center; color: #797979; }

/*media Queries 767
----------------------------------------------------*/
@media screen and (max-width: 767px) {
  body { font-size: 14px; }
  .pc-only { display: none; }
  .sp-only { display: block; }

  .title { font-size: 26px; margin-bottom: 20px; }
  .lead { font-size: 14px; line-height: 1.7; margin-bottom: 20px; }

  .wrapper { padding-top: 0; }
  .section { padding: 60px 0; }
  .container { padding: 0 20px; }

  .header .container { padding: 15px; }
  .header-logo { font-size: 15px; margin-right: 15px; }
  .gnav-item:not(:last-child) { margin-right: 10px; }
  .gnav-item a { font-size: 10px; }
  .gnav-item a:after { display: none; }

  .mv { height: 40vh; }
  .mv-container { padding: 0 20px; }
  .mv-title { font-size: 30px; }
  .mv-subtitle { font-size: 16px; margin-bottom: 20px; }
  .mv-text { top: 75%; font-size: 14px; line-height: 1.7; }

  .works-name { font-size: 12px; }
  .works-info { margin-top: 3px; }
  .works-list { justify-content: space-between; }
  .works-item { flex: 0 0 48%; margin-right: 0; margin-bottom: 30px; }

  .skill-list { display: block; margin-bottom: 0; }
  .skill-item { width: 100%; margin-bottom: 35px; }
  .skill-item:last-child { margin-bottom: 0; }
  .skill-name { margin-bottom: 5px; }
  .skill-text { font-size: 13px; line-height: 1.7; }

  .profile { display: block; }
  .profile-img { width: 150px; margin: 0 auto; margin-bottom: 25px; }
  .profile-body p { font-size: 14px; line-height: 1.7; }
  .profile-body p:not(:last-child) { margin-bottom: 20px; }

  .footer { padding: 20px; }

  .article { padding: 50px 0; }
  .article-body h3 { font-size: 16px; padding-left: .8em; }
  .article-body h3:not(:first-child) { margin-top: 30px; }
  .article-body p { font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
}

.cp_hr06 {
	position: relative;
	height: 1px;
	border-width: 0;
	background-image: -webkit-linear-gradient(left,
	transparent 0%,#283593 50%,transparent 100%);
	background-image:         linear-gradient(90deg,
	transparent 0%,#283593 50%,transparent 100%);
}

p {
  text-align: center;
}