@charset "utf-8";
body {
	display:flex;
	flex-direction: column;
	min-height: 100vh;
}

.head-shadow {
	box-shadow: 0 0 50px 40px var(--dark-fone);
}

main {
    flex-grow: 1;
    background: #FFF;
    padding: 50px 40px;
}
section {
    margin: 40px 0;
}

section:last-child {
    min-height: 80vh;
}

.inner {
	flex-grow: 1;
}

.with-contents {
    display: flex;
    justify-content: center;
    max-width: 100%;
}

.main-content {
    flex-grow: 1;
    max-width: 900px;
    margin: 0 auto;
}

.indent p {
    text-indent: 20px;
}

.inner-text-block {
    margin: 15px 0;
    background-color: #fffff3;
    border-radius: 15px;
    border: 1px solid #ccc;
    padding: 10px;
}

.inner-text-block:last-child {
    margin-bottom: 50vh;
}

.inner-text-block > h2 {
    text-align: left;
    margin-left: 20px;
}

.inner-text-block > ul {
    list-style: none;
    padding: 0 0 0 30px;
}

.inner-text-block > ul > li {
    padding: 4px 0;
    position: relative;
    width: fit-content;
}

.inner-text-block > ul > li:hover a {
	text-decoration: none;
}

.inner-text-block > ul > li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
    transition: .2s;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: green;
}

.inner-text-block > ul > li::after {
    content: '';
    width: 0%;
    position: absolute;
    top: 100%;
    left: 0;
    transition: .2s;
    border-bottom: 1px solid #970808;
}

.inner-text-block > ul > li:hover::after {
    width: 100%;
}

.inner-text-block > ul > li:hover::before {
    background-color: #970808;
}

.screenshots {
	text-align: center;
}

.screenshots a {
	display: inline-flex;
	margin: 10px;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	font-size: .9em;
	color: #000;
}

.screenshots img {
	max-height: 100px;
}

.contents {padding: 10px;position: relative;}

.inner-nav-wrapper {
	position: sticky;
  top: 70px;
}

.contents nav {
    border: 1px solid #aaa;
    border-radius: 10px;
    padding: 10px;
    position: relative;
}

.contents-opener {
	display: none;
}

.contents-opener::before {
	content: '\f0ca';
	font-size: 20px;
}

.contents nav > .price-details-close {
	right: 5px;
	display: none;
}

.contents nav > .price-details-close::before,
.contents nav > .price-details-close::after {
    background-color: #000;
}

.inner-nav-list {
    margin: 10px 0;
    padding: 0;
    list-style: none;
    max-height: calc(100vh - 115px);
    overflow-y: auto;
}

.inner-nav-list li {
    margin: 3px 0;
}

.inner-nav-list > li > a {
    font-weight: bold;
}

.inner-nav-list ul > li > a {
    font-size: .9em;
}

.inner-nav-list a.active {
    color: #ff0000;
}

.inner-nav-list ul {
    list-style: none;
    margin: 4px 0 0 20px;
    padding: 0 0 0 5px;
    border-left: 1px solid #ccc;
    position: relative;
}

.inner-nav-list ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    width: 20px;
    border-bottom: 1px solid #ccc;
}

.inner-nav-header {
    display: block;
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFF;
    padding: 0 10px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 5px;
}

h1 {
	text-align: center;
}

.compare-table {
	border-spacing: 5px;
width: 900px;}

.compare-table th, .compare-table td {padding: 7px;background: #f3f3f3;text-align: center;vertical-align: middle;border-top: 1px solid transparent;border-bottom: 1px solid transparent;transition: .2s;}

.compare-table > tbody > tr:not(:first-child):hover > td {border-color: #950606;}

.compare-table > tbody > tr > td:first-child {text-align: left;}

.compare-table > tbody > tr > td:not(:first-child) {width: 16%;}

.compare-table td:only-child {text-align: center !important;font-weight: bold;font-size: 1.1em;background: none;}

.compare-table th {position: sticky;top: 55px;background: darkorange;}

.compare-table th:empty {background: none;}

.compare-table td > span {font-family: 'icons';font-size: 1.5em;}

span.yes::before {content: '\f058';color: #009500;}

span.no::before {content: '\f056';color: #FF0000;}

@media (max-width:1000px) {
	main {
    padding: 50px 0;
 }
	.contents-opener {
        display: block;
	}

	.contents nav {
		position: fixed;
		top: 70px;
		left: 100%;
		background: #FFF;
		width: 100%;
		box-sizing: border-box;
		transition: .3s;
	}

#contents-expander:checked + nav {
    left: 0%;
}
.main-content {
    padding: 0 0 0 20px;
}

.contents {
    padding: 0 10px 0 5px;
}

.contents nav > .price-details-close {
    display: block;
}

.compare-table {display: block;width: 100%;box-sizing: border-box;overflow: auto;max-height: 80vh;}

.compare-table th {top:0px;}
}