@charset "UTF-8";

#key-visual02{
	background-image: url(../images/calculation-key-visual.jpg);
	background-image: image-set(url(../images/calculation-key-visual.jpg) 1x, url(../images/calculation-key-visual-l.jpg) 2x);
	background-image: -webkit-image-set(url(../images/calculation-key-visual.jpg) 1x, url(../images/calculation-key-visual-l.jpg) 2x);
}



p.inner {
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 12px;              /* 改行代わりの余白 */
}


p.vertical {
  display: flex;
  flex-direction: row;
  gap: 2px;

    padding-left: 60px;
    padding-right: 60px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}


button.vertical {
  display: flex;
  flex-direction: row;
  gap: 12px;

    padding-left: 5px;
    padding-right: 5px;

    margin-left: 60pt;
    margin-right: auto;
}


input[type="time"] {
  width: 100px;
  height: 30px;
  border: 2px solid #005bac;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 16px;
}

input[type="time"]:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 6px rgba(0, 91, 172, 0.35);
}


.time-label {
  font-size: 18px;   /* ← ここで文字の大きさを調整 */
  color: #000000;
  font-weight: bold; /* 必要なら強調 */
  margin-right: 6px; /* inputとの間隔 */
}


/* 行（横並びの土台） */
.summary-row {
    /* ラベルと入力欄の間隔 */
    width: 1100px;
    padding-left: 60px;
    padding-right: 60px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}




/* ラベル（幅固定で揃える） */
.summary-label {
  font-size: 14px;
  color: black;
  width: 60px;        /* ← ラベル幅 */
  text-align: center;
}

/* ラベル（幅固定で揃える） */
.summary-label2 {
  font-size: 14px;
  color: black;
  width: 80px;        /* ← ラベル幅 */
  text-align: center;
}

/* ラベル（幅固定で揃える） */
.summary-label3 {
  font-size: 14px;
  color: black;
  width: 64px;        /* ← ラベル幅 */
  text-align: center;
}

/* 入力欄（ラベルと同じ幅） */
.summary-input {
  width: 60px;        /* ← ラベルと同じ幅にすると完全に揃う */
  height: 30px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

/* 入力欄（ラベルと同じ幅） */
.summary-input2 {
  width: 80px;        /* ← ラベルと同じ幅にすると完全に揃う */
  height: 30px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

.big2-button {
  font-size: 14px; /* 文字サイズを大きく */

  background-color: #0000FF; /* 背景色（青） */
  color: #fff; /* 文字色（白） */
  border: none; /* 枠線を消す */
  border-radius: 6px; /* 角を丸く */

}

.wide {
  width: 80px;
  height: 30px;
  border: 2px solid #005bac;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 16px;
}

.narrow {
  width: 70px;
  height: 30px;
  border: 2px solid #005bac;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 16px;
}


.narrow2 {
  width: 90px;
  height: 30px;
  border: 2px solid #005bac;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 16px;
}

.narrow3 {
  width: 60px;
  height: 30px;
  border: 2px solid #005bac;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 16px;
}