style.css

/*!
Theme Name: kanso-general
Theme URI: http://kansowp.toiee.jp/
Author: toiee Lab
Author URI: http://toiee.jp/
Description: KANSO General は、できるだけ少ない設定、学習コストで、美しく、洗練され、オリジナリティがあるWebサイトを作るためのテーマです。シンプル・簡素 is best の精神で作られています。 詳細は、<a href="http://kansowp.toiee.jp/">http://kansowp.toiee.jp/</a>
Version: 1.5.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kanso-general
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

kanso-general is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ----- wp admin ---- */
#wp-admin-bar-nestedpages a:before
{
	content: "\f333";
	top: 2px;
}

/* ----- ナビ部分 ---- */
#navigation
{
	width: 100%;
	height: 100px;
	background-color: gray;
}

.uk-container-small {
	max-width: 650px;
}

/*
.uk-light .uk-navbar-nav>li>a{
	color: rgba(255, 255, 255, 0.7);
}
.uk-light .uk-navbar-nav>li:hover>a{
	color: rgba(255, 255, 255, 1);
	text-shadow: 1px 1px 4px #eee;
}
*/

.custom-logo{
	max-height: 24px;
}

/* ----- 全体の設定 ------ */
html {
	/*font-size: 18px;*/
	font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
}

/* ----- ヘッダー部分 ------ */
#kns-header
{
	height:400px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#kns-header-text h1{
	margin-bottom: 0;
	text-align: center;
}
#kns-header-text h2{
	margin-top: 0;
	margin-bottom: 0;
	text-align: center;
	font-size: 1.5em;
}

@media(max-width: 420px)
{
	#kns-header h1{
		font-size: 2.3rem;
	}
	#kns-header h2{
		font-size: 1.2rem;
	}
}

#kns-head-nav>nav  {
	height: 80px;
}



/* ----- コンテンツ部分 ----- */

.main-content,
.main-content-large {
	margin-top: 40px;
	margin-bottom: 40px;
	font-size: 17px;
	line-height: 1.75;
}

.main-content {
	max-width: 650px;
}
@media(min-width: 650px) {
	.main-content {
		width: 650px;
	}
}
@media(min-width: 960px) {
	.main-content-sidebar {
		margin-left: 15px;
	}
}

h2.main-subtitle,
h1.entry-title + h2,
h1.main-title + h2
{
	margin-top: -1rem;
	font-weight: 300;
	color: #999;
}

.main-content h2{
	margin-top: 45px;
}

.main-content h2+h3{
	margin-top: -0.5rem;
}

.main-content h2+p{
	margin-top: -0.5rem;
}

.main-content h3+p{
	margin-top: -15px;
}


.main-content li{
	margin-bottom: 0.8em;
}

blockquote {
	border-left: 3px solid #666;
	padding-left: 1em;
	margin-left: 0.2em;
}

/* ----- footer ----- */
#footer{
	background-color: #f2f2f2;
}


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

.sidebar-wrapper {
	width: 240px;
}

.uk-offcanvas-bar{
	background-color: rgba(255, 255, 255, 0.89);
}
.uk-offcanvas-bar,
.uk-close,
.uk-offcanvas-bar h1,
.uk-offcanvas-bar h2,
.uk-offcanvas-bar h3,
.uk-offcanvas-bar h4,
.uk-offcanvas-bar p
{
	color: black;
}
.uk-offcanvas-bar a
{
	color: #666;
}
.uk-offcanvas-bar .uk-nav-default>li.uk-active>a
{
	color: #666;
}
.uk-offcanvas-bar .uk-close{
	color: #999;
}
.uk-offcanvas-bar .uk-close:hover{
	color: #333;
}

/* --- 目次 widget --- */
section.pagetoc-widget p,
section.pagetoc-widget a,
.widget p,
.widget a
{
	font-size: .875rem;
}
.uk-offcanvas-bar p.pagetoc-widget-text
{
	color: #999;
	margin-top: -15px;
}

section.pagetoc-widget li.page_item_has_children
{
	margin-bottom: 0.5em;
}
section.pagetoc-widget > ul > li.page_item_has_children > a
{
	border-bottom-color: rgb(229, 229, 229);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	color: rgb(34, 34, 34);
}

section.pagetoc-widget ul.tm-nav {
	margin-bottom: 2rem;
}

section.pagetoc-widget ul.tm-nav li a {
	color: #666;
	font-size: .875rem;
	text-decoration: none;
}

section.pagetoc-widget ul.tm-nav li a:hover,
.uk-offcanvas-bar a:hover {
	color: #aaa;
	font-size: .875rem;
	text-decoration: none;
}


section.pagetoc-widget ul.tm-nav > li > a{
	color: rgb(34, 34, 34);
}

section.pagetoc-widget > ul > li > ul li
{
	line-height: 2rem;
}

section.pagetoc-widget > ul > li > ul > li > ul
{
	margin-left: 1em;
}

section.pagetoc-widget > ul > li > ul > li > ul li
{
	line-height: 1.8em;
}

section.pagetoc-widget li.current_page_item > a:before
{
	content: "\02192";
	margin-left: -15px;
	padding-right: 5px;
	color: #1e87f0;
	font-weight: bold;
}

.widget-title{
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
}

.textwidget{
	margin-bottom: 2rem;
}
.textwidget li{
	list-style: none;
}
div.textwidget > ul,
div.textwidget > ol
{
	padding-left: 0;
}


/* --- footer --- */
#footer {
	color : #888;
}

#footer-copyright{
	margin: 0;
	text-align: right;
	padding: 1rem;
	font-size: 0.8rem;
	color: #aaa;
}

#footer p,
#footer ul,
#footer ol {
	font-size: 0.8rem;
	color : #888;
}
#footer ul{
	list-style: none;
	padding-left: 0;
}
#footer li{
	line-height: 1.8em;
}

#footer a{
	color : #666;
}

#footer h3{
	font-size: 1.5rem;
	color: #666;
	margin-bottom: 0.5rem;
}


/* ---- blog ---- */
.entry-header h2,
.entry-header h2 a{
	color: #333;
	font-size: 1.8rem;
	margin-top: 2rem;
	margin-bottom: 0.5rem;
}
.main-content h2.entry-title{
	margin-top: 2rem;
}
.entry-header h3.main-subtitle{
	color: #999;
	font-weight: 400;
	font-size: 1.5rem;
	margin-top: -1rem;
	margin-bottom: 0.5rem;
}
article.post{
	margin-bottom: 3rem;
}
.entry-meta{
	font-size: 0.8rem;
}
.posted-on a{
	color : #333;
}
.entry-footer{
	font-size: 0.8rem;
}
.screen-reader-text{
	display: none;
}
.logged-in-as a{
	font-size: 1rem;
}

/* ---- comment ----- */
.main-content .comments-title {
	font-size: 1.5rem;
}
.main-content .comment-content p{
	font-size: 0.8em;
}
.comment-metadata,
.comment-author
{
	font-size: 0.6em;
}
.comment-metadata
{
	margin-bottom: 1rem;
}
.comment-metadata a:not([class])
{
	text-decoration: none;
}
.reply{
	font-size: 0.8em;
}


/* ---- shortcode ---- */
.uk-accordion-title {
	display: block;
	font-size: 20px;
	line-height: 1.4;
	color: #222;
	overflow: hidden;
}
.uk-accordion-title:hover,
.uk-accordion-title:focus {
	color: #666;
	text-decoration: none;
	outline: none;
}
.uk-accordion-content,
.uk-accordion-content p {
	color : #666;
	font-size: 1rem;
}
ul.kns-li-content,
ul.kns-li-content li p
{
	color : #666;
	font-size: 1rem;

}
.uk-card-body p{
	font-size: 1rem;
}
.uk-card-title {
	font-weight: bold;
	font-size: 1.1rem;
}
.uk-card-title a{
	color : #444;
}
.uk-description-list>dd{
	font-size: .875rem;
	font-weight: 400;
}

/* --- main content with sidebar --- */
.main-content-sidebar{
	max-width:700px;
}

#content-sidebar{
	max-width:240px;
	height: calc( 100vh - 80px );
	overflow-y: scroll;
	border-right: 1px solid #ddd;
	padding-right: 2rem;
}

/* --- breadcrumb for page ---*/
.kns-breadcrumb{
	margin-top: 30px;
}
.kns-breadcrumb ul li{
	display: inline;
}
.kns-breadcrumb ul {
	margin-bottom: 0;
	padding-left: 0;
	font-size: 12px;
}
.kns-breadcrumb a {
	color: #888;
	font-size: 12px;
}
.bc-divider {
	margin-left: 10px;
	margin-right: 10px;
	color: #888;
}
.kns-breadcrumb+h1,
.kns-breadcrumb+img{
	margin-top: 1rem;
}
.kns-breadcrumb li.bc-current_page{
	color: #444;
}

/* --- gutenberg --- */
/**
 * ワイド幅、全幅のスタイル定義
 */
.alignwide {
	margin-left  : calc( -100vw / 2 + 100% / 2 );
	margin-right : calc( -100vw / 2 + 100% / 2 );
	max-width    : 100vw;
}

.alignfull,
.uk-container-large .alignwide
{
	width: 100vw;
	max-width: 100vw;
	position: relative;
	margin-left: -50vw;
	left: 50%;
}

.alignfull img,
.uk-container-large .alignwide img
{
	display: block;
	margin: 0 auto;
	max-width: 100vw;
	height: auto;
}

.main-content-sidebar .alignwide,
.main-content-sidebar .alignfull
{
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	left: 0;
}


.wp-block-cover-image {
	width: inherit;
}

@media only screen and ( min-width: 940px ) {

	.alignwide {
		margin-left  : -100px;
		margin-right : -100px;
		max-width    : 850px;
		width        : 850px;
	}
}

.wp-block-code {
	white-space: pre-wrap;
}


/* uikit expanded */
.post-card-avatar {
	width: 40px;
}
.uk-card-footer{
	border-top: none;
}

.uk-cover-container a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent:-999px;
}

ul.uk-pagination>li>span.current {
	color: #444;
}

.card-height {
	height : 200px;
}

.uk-label-muted {
	background : rgba(117, 117, 117, 0.6);
	color : #ffffff;
	text-transform: none;
}

pre {
	word-break: break-all;
	white-space: pre-wrap;
}