@charset "UTF-8";
html{font-size: 100%;}

/*HEADER*/
.page-header{position: fixed;top: 0;left: 0;width: 100%;z-index: 1000;background-color: #ffffff;}
.logo {
  margin-top: 0;
  font-size: 3rem;
  color: #000000;
  font-family: "Alex Brush", cursive;
  font-weight: 400;
  font-style: normal;
}
li a{text-decoration: none;}
.main-nav {display: flex;
font-size: 1rem;
text-transform: uppercase;
margin-top: 34px;
list-style: none;}
.main-nav li{margin-left: 36px;}
.main-nav a{color: black;}
.main-nav a:hover{color: red;}
.page-header{display: flex;justify-content: space-between;}
.kiso-content {margin-top: 10%;}
.kiso-content h2{font-size: 2.000rem;color: #000000; }
.kiso-content p {
  font-family: "Shippori Mincho B1", serif;
  font-weight: 400;
  font-style: normal;
}

/* 全体のフォント設定（履歴書らしく明朝体系） */
body {
    font-family: "MS Mincho", "Hiragino Mincho ProN", serif;
    padding: 20px;
}

/* 項目全体のコンテナ */
.field-container {
    display: flex;
    align-items: stretch; /* ラベルと入力欄の高さを揃える */
    max-width: 600px;
    border: 1px solid #333; /* 外枠 */
    background-color: #fff;
}

/* 「名前」という見出し部分 */
.label {
    margin: 0;
    padding: 10px;
    width: 100px;
    font-size: 16px;
    text-align: center;
    border-right: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 入力ボックスの親要素 */
.input-box {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

/* 入力欄（input）の装飾 */
input[type="text"] {
    width: 100%;
    border: none; /* 枠線を消してスッキリさせる */
    padding: 10px 15px;
    font-size: 18px;
    font-family: inherit;
    outline: none; /* クリックした時の青い枠を消す */
}

/* 入力中だけ背景色を少し変える（書き込みやすさの演出） */
input[type="text"]:focus {
    background-color: #fffef0;
}

#red {
    background-color: #db5151; /* 濃い赤色 */
    color: white;              /* 文字を白に */
    font-size: 1.0rem;         /* 文字を大きく */
    font-weight: bold;         /* 太字 */
    padding: 10px 20px;        /* ボタンの内側に余白を作る */
    border: none;              /* 標準の枠線を消す */
    border-radius: 5px;        /* 角を少し丸くする */
    cursor: pointer;          /* マウスを乗せた時に指の形にする */
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* 少し立体感を出す */
    margin: 20px 0;            /* 上下に隙間を作る */
    transition: background 0.3s; /* 色の変化を滑らかに */
}

/* マウスを乗せた時に少し色を明るくする */
#btn-pdf:hover {
    background-color: #f44336;
}

@media print {
    #btn-pdf {
        display: none !important;
    }

    @media print {
    button, nav, .page-header {
        display: none !important; /* 印刷時にはボタンやナビを隠す */
    }
}}