/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
} /* end -599 */

@media (min-width: 600px) and (max-width:959px) {
} /* end 600-959 */

@media (min-width: 960px) {
} /* 960- */


/* ---------------------------------------- common */

@media (min-width: 1000px) {
    header span img {
        width: 200px;
        height: auto;
    }
}


@media (max-width: 1179px) {
    header span img {
        width: 180px;
        height: auto;
    }
}


#visual {
	background: url(../images/commentary/commentary_1450x440.jpg) no-repeat center center; 
	background-size: cover;
}

html { scroll-behavior: smooth; }

main article + article { margin: 6em 0 0; }

main .inside + .inside { margin: 4em 0 0; }

ul.disc {
    margin-left: 2em;
    padding-left: 0;
    list-style: disc;
}
ul.decimal {
    margin-left: 2em;
    padding-left: 0;
    list-style: circled-decimal;
}

/* ---------------------------------------- gallery */

.gallery small,
.chart small{
	display: block;
	margin: .5em 0 0;
}

@media (max-width: 767px) {
	.gallery small,.chart small { font-size: 1.3rem; }
	.gallery li,.chart li { margin: 0 0 20px 0; }
	.gallery li img,.chart li img { width: 100%; }
}

/* 718px幅はプリンター用 */ 
/* @media (min-width: 768px) */ 
@media (min-width: 718px) {
	.chart li { width: 50%; }
	.gallery li { width: 33%; }
	.gallery,
	.chart {
		width:100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.gallery small,
	.chart small { font-size: 1.4rem; }
}

/* ---------------------------------------- contents */

article h1 { 
	color: var( --blue-color ); 
	margin: 0 0 .75em;
}

.archivelinks { margin: 5em 0 0; }

/* mokuji */

@media (min-width: 769px) {
	.mokuji {
		width: 80%;
    	margin: 0 auto !important;
	}
}

.mokuji {
	background: var( --light-green );
	padding: 1em;
}
.mokuji h2 {
	font-size: clamp( 1.6rem, 1.5vw, 2.0rem );
	text-align: center;
	margin: 0 0 .5em;
}
.mokuji ul {
	list-style:none !important;
}
.mokuji li { border-bottom: 1px #ccc solid; }
.mokuji li a {
	display: block;
	line-height: 1.6;
	padding: .5em 1em .5em 0em;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-decoration: none !important;
}

@media (max-width: 599px) {
	.mokuji { padding: 0 !important; }
	.mokuji ul { margin-left: 0 !important; }
} /* end -599 */

/* editors */

#editors { line-height: 2; }
#editors h2 { 
	color: var( --blue-color );
	margin: 0 0 .75em;
}
#editors a, #editors a:focus, #editors a:hover {
    color: #1e8291;
    text-decoration: underline;
}

/* ---------------------------------------- main */

.home main { background: var( --home-back ); }
.under main { padding: 4em 0 6em; }

/* columns */

@media (max-width: 959px) {
	.columns #contents { margin: 0 0 5em; }
}

@media (min-width: 960px) {
	main > .columns {
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	main > .columns > #contents { width: 72%; }
	main > .columns > #sidebar { width: 22%; }
}

/* ---------------------------------------- archive h1 */
#editors p, #editors ol, #editors ul, #editors dl, #editors dt {
    line-height: 2;
    margin-bottom: 1.5em;
}

#postlist .inside h1 {
	color: var( --blue-color );
	margin: 0 0 .5em;
}
@media (max-width: 480px) {
	#postlist .inside h1 { font-size: 1.6rem; }
}
@media (min-width: 481px) and (max-width:768px) {
	#postlist .inside h1 { font-size: 1.8rem; }
}
@media (min-width: 769px) and (max-width:959px) {
	#postlist .inside h1 { font-size: 2.0rem; }
}
@media (min-width: 960px) {
	#postlist .inside h1 { font-size: 2.4rem; }
}

/*
.property-icon {
	display: inline-block;
	color: #fff;
	background: var( --blue-color );
	line-height: 1;
	padding: .5em 1em;
}
*/

#editors h2 {
    border-bottom: 1px dotted var( --blue-color );
}

#editors hr {
    border: none;
    border-top: 1px dotted var( --blue-color );
    margin: 2em auto;
    width: 100%;
}

/* ---------------------------------------- sidebar */

#sidebar h3 , #sidebar h5 {
	color: #fff;
	background: #2c7896;
	line-height: 1;
	text-align: center;
	padding: 1em;
	margin: 0;
}

#sidebar ul { border-top: 1px #ccc solid; }
#sidebar li { border-bottom: 1px #ccc solid; }
#sidebar li a {
	display: inline-block;
	color: var( --blue-color );
	padding: 1em 0 0;
}

@media (min-width: 960px) {
	#sidebar {
		/* position: fixed;
		top: 20vh;
		right: 3vw;
		z-index: 10; */
	}
	.sidebar-container {
		position: sticky;
		position: -webkit-sticky;
		top: 20vh;
	}
}

/* ---------------------------------------- font */

h1 { margin: 0 0 1.25em; }
h2 { margin: 0 0 1em; }
h2, h3 { line-height: 1.6; }

@media (max-width: 480px) {
	#wrapper { font-size: 1.2rem; }
	h1 { font-size: 2.0rem; }
	h2 { font-size: 1.6rem; }
	h3 { font-size: 1.4rem; }
}

@media (min-width: 481px) and (max-width:768px) {
	#wrapper { font-size: 1.35rem; }
	h1 { font-size: 2.2rem; }
	h2 { font-size: 1.8rem; }
	h3 { font-size: 1.5rem; }
}

@media (min-width: 769px) and (max-width:959px) {
	#wrapper { font-size: 1.45rem; }
	h1 { font-size: 2.5rem; }
	h2 { font-size: 2.0rem; }
	h3 { font-size: 1.6rem; }
}

@media (min-width: 960px) {
	#wrapper { font-size: 1.6rem; }
	h1 { font-size: 2.8rem; }
	h2 { font-size: 2.4rem; }
	h3 { font-size: 1.8rem; }
}