@charset "UTF-8";
.photobox img {
	display: block;
	height: 220px;
	float: left;
	margin: 0 5px 5px 0;
}
.photobox img.main {
	height: 445px;
	margin-right: 5px;
}
.photobox::after {
	content: "";
	display: table;
	clear: both;
}
.moviebox {
	width: 77vw;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.figbox {
	text-align: center;
}
.figbox img {
	display: block;
	margin: 1em auto;
}
.figbox img {
	max-width: 100%;
}
.figbox img.fig01 {
	width: 320px;
}
.figbox img.fig02 {
	width: 960px;
}
img.fig03 {}
.figbox2 img {
	width: 320px;
	max-width: 100%;
	display: block;
	float: left;
	margin: 0 1em 1em 0;
}
.figbox2 > div {
	display: block;
	float: left;
	margin-top: 50px;
}
.figbox2::after {
	content: "";
	display: table;
	clear: both;
}
@media screen and (max-width: 960px) {
	.figbox2 img {
		width: 160px;
	}
	.figbox2 > div {
		margin-top: 0;
	}
}
.voice_balloon {
	position: relative;
	padding: 0.5em;
	border-radius: 1.0em;
	background: #e6f4ea;
	color: #222;
	font-size: 0.9rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	word-break: break-word;
	width: 29em;
	max-width: 100%;
	margin-bottom: 2em;
}
.voice_balloon.right {
	background: #d0e6f7;
}
.voice_balloon.left::before, .voice_balloon.right::before, .voice_balloon.top::before, .voice_balloon.bottom::before {
	content: "";
	position: absolute;
	border: 8px solid transparent;
}
.voice_balloon.left {
	background: #d0e6f7;
	margin-left: 1.5em;
}
.voice_balloon.left::before {
	left: -25px;
	top: 1em;
	border-right: 18px solid #d0e6f7;
}
.voice_balloon.right::before {
	right: -16px;
	top: 18px;
	border-left: 16px solid #d0e6f7;
}
.voice_balloon.top {
	background: #d0e6f7;
}
.voice_balloon.top::before {
	left: 1em;
	top: -26px;
	border-bottom: 24px solid #d0e6f7;
}
.voice_balloon.bottom1 {
	background: #ffdeae;
	width: 6em;
}
.voice_balloon.bottom1::before {
	left: -16px;
	bottom: 18px;
	border-right: 18px solid #ffdeae;
}
.voice_balloon.bottom2 {
	background: #ffea5a;
	width: 10em;
}
.voice_balloon.bottom2::before {
	left: -16px;
	bottom: 18px;
	border-right: 18px solid #ffea5a;
}
.voice_text {
	display: block;
	line-height: 1.7;
}
.ind_kakko li {
	list-style: none;
	margin-left: 1.5em;
	text-indent: -1.5em;
}
.ind_num li {
	list-style: none;
	margin-left: 1em;
	text-indent: -1em;
}
.fighead {
	font-size: 0.9rem;
	margin-bottom: 1.2em
}
.grid_2 {
	justify-content: space-between;
	padding-left: 5%;
	paaaing-right: 5%;
}
.grid_2 > div {
	width: 31em;
	max-width: 100%;
	margin-bottom: 3em;
}
.grid_2 > div > h3 {
	font-size: 1.4rem;
	margin-bottom: 0.5rem;
}
.grid_2 > div > h3 img {
	width: 1em;
	margin-left: 0.25em;
}
.grid_2 > div > h3 span.type1 {
	font-weight: bold;
	color: #FF7E00;
	font-size: 1.1em;
}
.grid_2 > div > h3 span.type2 {
	font-weight: bold;
	color: #FF7E00;
	font-size: 1.1em;
}
table.diagonal {
	border-collapse: collapse;
	width: 60em;
	max-width: 100%;
}
table.diagonal tr:first-child th:first-child {
	background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #666 50%, #666 calc(50% + 0.5px), transparent calc(50% + 1px));
	display: grid;
	/*
    width: max-content;
	*/
	justify-content: space-between;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	border-right: none;
	border-bottom: none;
}
table.diagonal .col-header {
	grid-column-start: 2;
	text-align: right;
}
table.diagonal .row-header {
	grid-column-start: 1;
}
table.diagonal tr th, table.diagonal tr td {
	font-weight: normal;
	padding: 1em;
	text-align: center;
	border: 1px solid #666;
}

table.diagonal tr th.title.half{
	background-color: #5f3f2c;
	color: #fff;
}
table.diagonal tr th.title.km10{
	background-color: #3e455c;
	color: #fff;
	font-weight: bold;
}
table.diagonal tr td.half{
	background-color: #f8e8df;
	font-size: 125%;
	width: 33.3%;
}
table.diagonal tr td.km10{
	background-color: #dce0eb;
	font-size: 125%;
	width: 33.3%;
}
table.diagonal tr td span {
	color: #c00;
	font-weight: bold;
}
.honbun.box {
	border: 1px solid #eaeaea;
	border-radius: 5px;
	padding: 1em;
}
h4.roundtitle.rev {
	color: #A5181D;
	background-color: #fff;
	border: 1px solid #A5181D;
}


.scroll-container {
  position: relative;
  overflow-x: auto;
  padding: 1rem 0.5rem;
}

.scroll-content {
  display: flex;
  gap: 1rem;
}

/* 共通のアイテムスタイル */
.item {
  min-width: 200px;
  background: #e0e0e0;
  padding: 1rem;
  border-radius: 8px;
  flex-shrink: 0;
  text-align: center;
}

/* スクロールヒント */
.scroll-hint {
  position: absolute;
  top: 0.2rem;
  right: 1rem;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  pointer-events: none;
  animation: blink 1.5s infinite;
}

/* PCではアイテムが折り返して全部表示されるように調整 */
@media screen and (min-width: 961px) {
  .scroll-container {
    overflow-x: hidden;
  }
  .scroll-content {
    flex-wrap: wrap;
  }
  .item {
    flex: 1 1 calc(20% - 1rem);
    min-width: auto;
  }
}




@keyframes blink {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}
@media screen and (max-width: 960px) {
	table.diagonal {
		width: 100%;
		max-width: 60em;
	}
	table.diagonal tr td.half,
	table.diagonal tr td.km10{
		width: 33.3%;
	}
	.grid_2 > div {
		width: calc(100% - 6em);
	}
	.voice_balloon.top {}
	.figbox2 img {
		width: 160px;
	}
	.figbox2 > div {
		margin-top: 0;
	}
	
	table.diagonal tr th.half,
	table.diagonal tr th.km10,
	table.diagonal tr td.half,
	table.diagonal tr td.km10{
		font-size: 85%;
	}
	
}
@media screen and (min-width: 961px) {
	.figbox img.forsp{display: none !important}
	.forsp{display: none !important}
}
@media screen and (max-width: 960px) {
	.figbox img.forpc{display: none !important}
	.forpc{display: none !important}
}