/* ===============================
   ボックスサイズ統一
=============================== */
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-size: 100%; /* rem算出用 */
}

/* ===============================
   ボタン共通
=============================== */
.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

/* ===============================
   エンジンスタートボタン
=============================== */
.btn-engine-start {
  position: relative;
  width: 145px;
  height: 145px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, white 0%, white 22%, #ddd 44%, #a5a5a5 52%, black 100%);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.btn-engine-start:before {
  content: "";
  position: absolute;
  top: 7.5px;
  left: 7.5px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: linear-gradient(135deg, #515151 0%, #515151 19%, #ededed 50%, white 77%, white 100%);
}

a.btn-engine-start-in {
  font-size: 14px;
  line-height: 1.2;
  position: absolute;
  top: 18px;
  left: 18px;
  width: 109px;
  height: 109px;
  padding: 35px 0 0;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 69%, #1b1b1b 100%);
  box-shadow: inset 0 2px 2px white, 0 2px 4px rgba(0, 0, 0, 0.5);
}

a.btn-engine-start-in:before {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(50% - 13px);
  width: 26px;
  height: 8px;
  border-radius: 10px;
  background: #555;
  transition: all 0.3s ease;
}

a.btn-engine-start-in span {
  font-size: 10px;
}

.btn-engine-start:hover a.btn-engine-start-in {
  padding-top: 37px;
  color: #b4e391;
  box-shadow: inset 0 1px 1px black, 0 1px 2px rgba(0,0,0,0.5);
  text-shadow: 0 0 6px rgba(97,196,25,0.3), 0 0 6px rgba(97,196,25,0.3);
}

.btn-engine-start:hover a.btn-engine-start-in:before {
  top: 20px;
  background: #61c419;
  box-shadow: 0 0 6px rgba(97,196,25,0.3);
}

/* ===============================
   ボックススタイル
=============================== */
.box27, .box27-2, .box11, .box17 {
	background-color: #fdf6e3;
	color: #013220;
}

.box27 {
	border: solid 3px #556b2f;
}

.box27 .box-title {
	background: #556b2f;
	color: #fff;
}

.box27-2 {
	border: solid 3px #8b008b;
}

.box27-2 .box-title {
	background: #8b008b;
	color: #fff;
}

.box11 {
	border-top: solid 5px #556b2f;
	box-shadow: 0 3px 5px rgba(0,0,0,0.22);
}

.box17 {
	border-top: solid 2px #556b2f;
	border-bottom: solid 2px #556b2f;
}

.box17:before, .box17:after {
	background-color: #556b2f;
}

/* ===============================
   リストスタイル
=============================== */
.list-front {
  padding: 0;
  position: relative;
}
.list-front li {
  color: black;
  border-left: 8px solid orange;
  background: whitesmoke;
  margin-bottom: 5px;
  line-height: 1.5;
  border-radius: 0 15px 15px 0;
  padding: 0.5em;
  list-style-type: none !important;
}

ol.Nested {
	list-style: none;
	counter-reset: counter;
	color: #013220;
}

ol.Nested li::before {
	content: counters(counter, "-") "｜ ";
	counter-increment: counter;
}

ol.Nested li ol {
	list-style: none;
	counter-reset: counter;
}

ol.niju {
	color: #013220; 
	border: double 5px #556b2f;
	background: #fdf6e3;
	padding: 0.5em 0.5em 0.5em 2em;
}

ol.niju li {
	line-height: 1.5;
	padding: 0.5em 0;
}

ol.sikaku {
	counter-reset: number;
	list-style-type: none !important;
	padding: 0.5em;
	border: dashed 1px #556b2f;
}

ol.sikaku li {
	position: relative;
	line-height: 1.5em;
	padding: 0.5em 0.5em 0.5em 30px;
}

ol.sikaku li:before {
	position: absolute;
	counter-increment: number;
	content: counter(number);
	display: inline-block;
	background: #556b2f;
	color: #fff;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight: bold;
	font-size: 15px;
	left: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
}

/* ===============================
   Readmore
=============================== */
.readmore {
  position: relative;
}

.readmore-content {
  position: relative;
  overflow: hidden;
  height: 200px;
}
.readmore-content::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  content: "";
  height: 100px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, #fff 100%);
}

.readmore-label {
  display: table;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  z-index: 2;
  padding: 0 10px;
  background-color: #ff7777;
  border-radius: 10px;
  color: #fff;
}
.readmore-label:before { content: '続きを読む'; }

.readmore-check { display: none; }
.readmore-check:checked ~ .readmore-label:before { content: '閉じる'; }
.readmore-check:checked ~ .readmore-content { height: auto; }
.readmore-check:checked ~ .readmore-content::before { display: none; }

/* ===============================
   その他スタイル
=============================== */
.mirror {
  position: relative;
  color: black;
  font-size: 30px;
  line-height: 1.2;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0) 10%, rgba(0,0,0,0.6));
}

span.del {
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-color: red;
}

.button3 {
  display: inline-block;
  border-radius: 8px;
  font-size: 13pt;
  text-align: center;
  cursor: pointer;
  padding: 10px 10px;
  background: white;
  color: #7f007f;
  line-height: 1.75em;
  transition: .3s;
  border: 1px dotted #333;
}

/* ===============================
   テーブル全体
=============================== */
table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-family: "Yu Gothic", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
	font-size: 16px;
	text-align: left;
	table-layout: auto;
	background-color: #fdf6e3; /* クリーム系で統一感 */
}

table thead tr {
	background-color: #013220;
	color: #daa520;
}

table th,
table td {
	padding: 12px 15px;
	border: 1px solid #b2b2b2;
	vertical-align: top;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
	min-width: 80px;
	max-width: 300px;
	color: #013220;
}

table tbody tr:nth-child(even) {
	background-color: #f4f6f2;
}

table tbody tr:hover {
	background-color: #e6e9e2;
}

table a {
	color: #013220;
}

table a:hover {
	color: #b8860b;
	text-decoration: underline;
}

/* ===============================
   折り返し共通
=============================== */
p,
a {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}