/*

開発用

*/

.debug-area {
	background-color: #23282d;
	color: #fff;
}
nav[aria-label] {
	position: relative;
}
nav[aria-label]::before {
	content: attr(aria-label);
	height: 100%;
	float: left;
	/*
	position: absolute;
	top: 0;
	left: 0;
*/
	background-color: rgba(128,128,128,.5);
	font-size: 10px;
	font-family: monospace;
	color: #fff;
	line-height: 1;
	margin-right: 1em;
	padding: .125em .25em;
	border-radius: .25em;
}
a {
	color: #963;
}

/*

汎用候補

*/

.ut-invisible {
	position: absolute !important;
	height: 1px;
	width: 1px; 
	overflow: hidden;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
.page-top {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	background-color: #963;
	color: #fff;
}
.page-top.-fixed {
	position: fixed;
	bottom: 40px;
	right: 40px;
}
.js-stopScroll {
	overflow: hidden;
}

/*

基本ランドマーク

*/

.role-document {
}
.wrapper-block {
}
.role-banner {
	background-color: #eee;
}
.container-block {
	display: flex;
	flex-wrap: wrap;
}
.sect-block.-s00 {
	flex: 1 0 100%;
}
.role-main {
	flex: 1 1 auto;
	width: calc(100% - 240px);
	min-width: 0;
}
.role-complementary {
	flex: 0 0 240px;
	background-color: #eee;
}
.role-contentinfo {
	background-color: #eee;
}

/*

ヘッダー

*/
.role-banner>.inner>.branding-area {
	text-align: center;
	width: 100%;
	margin: auto;
}
.site-title>a>img {
	max-width: 120px;
}
.role-navigation {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}
.role-banner>.inner>.button-area {
	display: none;
}
/*

ヘディング

*/

.block-header>.title {
	border-bottom: double 3px currentColor;
}
.block-header>.block-title {
	margin: 1em 0;
}

.entry-header>.title {
	border-bottom: solid 1px currentColor;
}
.entry-header>.entry-title {
	margin: 1em 0;
}

/*

メイン直下ブロック

*/

.role-main>.content {
	border: solid 1px currentColor;
}

.role-article+.role-article {
}
.role-article:nth-child(2n) {
	background-color: #eee;
}
.entry-body>.theContent {
	overflow: hidden;
}
.wp-theContent {
	line-height: 1.75;
}
.wp-theContent *+* {
	margin-top: 1em;
}

/*

フッター

*/

.role-contentinfo>.inner {
	display: flex;
}
.role-contentinfo>.inner>.content {
	flex: 1 1 33.33%;
}
.footer-nav>.menu-item>.sub-menu {
	padding-left: 1em;
}
.colophone-area {
	text-align: center;
}

/*

グロナビ

*/

/*サブメニュー展開の必須要素*/
.global-nav {
	display: flex;
}
.global-nav>.page_item,
.global-nav>.menu-item {
	position: relative;
	vertical-align: top;
}
.global-nav a {
	display: block;
}
.global-nav .children,
.global-nav .sub-menu {
	display: none;
}
.global-nav .children .page_item,
.global-nav .sub-menu .menu-item {
	display: block;
}
.global-nav .page_item_has_children a:hover + .children,
.global-nav .page_item_has_children a:focus + .children,
.global-nav .page_item_has_children a + .children:hover,
.global-nav .page_item_has_children a + .children:focus-within,
.global-nav .menu-item-has-children a:hover + .sub-menu,
.global-nav .menu-item-has-children a:focus + .sub-menu,
.global-nav .menu-item-has-children a + .sub-menu:hover,
.global-nav .menu-item-has-children a + .sub-menu:focus-within {
	display: block;
}
.global-nav>.page_item_has_children>a:hover + .children,
.global-nav>.page_item_has_children>a:focus + .children,
.global-nav>.page_item_has_children>a + .children:hover,
.global-nav>.page_item_has_children>a + .children:focus-within,
.global-nav>.menu-item-has-children>a:hover + .sub-menu,
.global-nav>.menu-item-has-children>a:focus + .sub-menu,
.global-nav>.menu-item-has-children>a + .sub-menu:hover,
.global-nav>.menu-item-has-children>a + .sub-menu:focus-within {
	position: absolute;
	top: 100%;
	z-index: 10;
}
/*以下、装飾要素*/
.global-nav {
	padding-left: 0;
}
.global-nav>.page_item,
.global-nav>.menu-item {
	border-left: solid 1px currentColor;
}
.global-nav>.page_item:last-child,
.global-nav>.menu-item:last-child {
	border-right: solid 1px currentColor;
}
.global-nav a {
	padding: 0 .5em;
}
.global-nav .page_item_has_children>a:after,
.global-nav .menu-item-has-children>a:after {
	content: ' ▾';
}
.global-nav .page_item_has_children>.children,
.global-nav .menu-item-has-children>.sub-menu {
	margin-left: -1px;
}
.global-nav .children a,
.global-nav .sub-menu a {
	background: #eee;
	white-space: nowrap;
}
.global-nav .current_page_item>a,
.global-nav .current-menu-item>a {
	background-color: #fff;
	color: #666;
}
.global-nav a:hover,
.global-nav a:focus {
	color: #666;
}

/*

ヘッダーのサブナビ

*/

.sub-nav {
	display: flex;
}
.sub-nav a {
	display: block;
	padding: 0 .5em;
}
[class^=ut-icon] {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	width: 40px;
	height: 40px;
	overflow: hidden;
}
[class^=ut-icon] a {
	display: block;
	width: 100%;
	height: 100%;
}
.ut-iconFb {
	background-image: url(../img/icon_fb.svg);
}
.ut-iconIg {
	background-image: url(../img/icon_ig.svg);
}
.ut-iconTw {
	background-image: url(../img/icon_tw.svg);
}

/*

ボタン

*/

.btn-area {
	display: flex;
	flex-wrap: wrap;
}
.block-footer>.btn-area {
	justify-content: center;
	margin: 2em 0;
}
.btn-part {
	padding: .25em;
}
.btn-part>.button {
	padding: .125em .5em;
	display: block;
	border: solid 1px currentColor;
}

/*

タグナビ

*/

.post_tag-nav {
	display: flex;
	flex-wrap: wrap;
}
.post_tag-nav>.item {
	padding: .25em;
}
.post_tag-nav>.item>a {
	padding: .125em .5em;
	display: block;
	border: solid 1px currentColor;
}
.post_tag-nav>.item.-current>a {
	background-color: #eee;
}

/*

カテゴリナビ

*/

.category-nav {
	display: flex;
	flex-wrap: wrap;
}
.s00-block>.category-nav {
	justify-content: center;
}
.category-nav>.item {
	padding: .25em;
}
.category-nav>.item>a {
	padding: .125em .5em;
	display: block;
	border-left: solid 1px currentColor;
}
.category-nav>.item:last-child>a {
	border-right: solid 1px currentColor;
}
.category-nav>.item.-current>a {
	background-color: #eee;
}

/*

日付ナビ

*/

.date-nav {
	display: flex;
	align-items: center;
	padding: .25em;
}
.date-nav::before {
	content: '【';
}
.date-nav::after {
	content: '】';
}
.date-nav>.item {
	display: flex;
}
.date-nav>.item>a {
	padding: .125em .5em;
	display: block;
}
.date-nav>.item:not(:last-child)::after {
	content: '-';
}

/*

パンくずナビ

*/

.breadcrumb-nav {
	display: flex;
}
.breadcrumb-nav>.item:not(:last-child)::after {
	content: '»';
	padding: 0 .5em;
}

/*

分割記事

*/

.pages-nav {
	display: flex;
}
.pages-nav>.item {
	border-left: solid 1px currentColor;
}
.pages-nav>.item>.post-page-numbers {
	padding: .25em .5em;
}
.pages-nav>.item:last-child {
	border-right: solid 1px currentColor;
}
.pages-nav>.item>.current {
	background-color: #eee;
}
[class$=Single]>.linkPages>.pages-nav {
	justify-content: center;
	margin: 2em 0;
}

/*

ページネーション

*/

.paginate-nav {
	display: flex;
}
.paginate-nav>.item {
	padding: .25em;
}
.paginate-nav>.item>.page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1.5em;
	height: 1.5em;
	border: solid 1px currentColor;
}
.paginate-nav>.item>.page-numbers.prev>.inner,
.paginate-nav>.item>.page-numbers.next>.inner {
	font-size: 50%;
}
.paginate-nav>.item>.current {
	background-color: #eee;
}
.block-footer>.pageLinks-area>.paginate-nav {
	justify-content: center;
	margin: 2em 0;
}


/*

前後記事

*/

.prevNext-nav {
	display: flex;
}
.prevNext-nav>.item {
	padding: .25em;
}
.prevNext-nav>.item>a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .25em;
	border: solid 1px currentColor;
}
.prevNext-nav>.item>a>.inner.-prev,
.prevNext-nav>.item>a>.inner.-next {
	font-size: 50%;
}
.prevNext-nav>.item:empty {
	border: none;
}
.block-footer>.pageLinks-area>.prevNext-nav {
	justify-content: center;
	align-items: center;
	margin: 2em 0;
}


/* standard */
@media standard, print, screen and (max-width: 768px) {

	/*

	基本ランドマーク

	*/

	.role-document {
	}
	.wrapper-block {
	}
	.role-banner {
	}
	.container-block {
		display: block;
	}
	.sect-block.-s00 {
	}
	.role-main {
		width: 100%;
	}
	.role-complementary {
	}
	.role-contentinfo {
	}

	/*

	ヘッダー

	*/

	.role-navigation {
		display: block;
	}
	.role-banner>.inner>.button-area {
		display: block;
		position: fixed;
		top: 10px;
		left: calc(100vw - 70px);
	}

	.role-navigation.-fromSide,
	.role-navigation.-fromTop {
		top: 0;
		background-color: #fff;
	}
	.role-navigation.-fromSide {
		height: 100%;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
		overflow-y: auto;
		position: fixed;
	}
	.role-navigation.-fromTop {
		display: none;
	}
	.role-navigation.-fixed {
		position: fixed;
		overflow-y: auto;
		width: 100%;
		height: 100%;
	}
	.role-navigation.-right {
		right : -100%;
	}
	.role-navigation.-right.active{
		right : 0px;
	}
	.role-navigation.-left {
		left : -100%;
	}
	.role-navigation.-left.active {
		left : 0px;
	}
	
	
	
	.nav-button,
	.nav-button span {
		transition: all .4s;
	}
	.nav-button {
		display: flex;
		position: relative;
		width: 50px;
		height: 40px;
		background: none;
		border: none;
		padding: 0;
		outline: none;
	}
	.nav-button:focus {
		opacity: .8;
	}
	
	.nav-button span,
	.nav-button::before,
	.nav-button::after {
		display: inline-block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 20%;
		background-color: #963;
	}
	.nav-button::before,
	.nav-button::after {
		content: '';
	}
	.nav-button span {
		top: 40%;
	}
	.nav-button::before {
		top: 0;
	}
	.nav-button::after {
		bottom: 0;
	}
	
	
/*
	.move-1.on.nav-button{
		position: fixed;
		right: 25px;
		top: 10px;
	}

	.move-2.on.nav-button{
	position: fixed;
	left: 100px;
	top: 10px;
}

	*/
	
	/*

	フッター

	*/

	.role-contentinfo>.inner {
		display: block;
	}

	/*

	グロナビ

	*/

	.global-nav {
		display: block;
	}
	.global-nav .children,
	.global-nav .sub-menu {
		display: block;
	}
	.global-nav>.page_item_has_children>a:hover + .children,
	.global-nav>.page_item_has_children>a:focus + .children,
	.global-nav>.page_item_has_children>a + .children:hover,
	.global-nav>.page_item_has_children>a + .children:focus-within,
	.global-nav>.menu-item-has-children>a:hover + .sub-menu,
	.global-nav>.menu-item-has-children>a:focus + .sub-menu,
	.global-nav>.menu-item-has-children>a + .sub-menu:hover,
	.global-nav>.menu-item-has-children>a + .sub-menu:focus-within {
		position: static;
	}
	.global-nav>.page_item,
	.global-nav>.menu-item,
	.global-nav>.page_item:last-child,
	.global-nav>.menu-item:last-child {
		border: none;
	}
	.global-nav a {
		padding: 0;
	}
	.global-nav .page_item_has_children>a:after,
	.global-nav .menu-item-has-children>a:after {
		content: none;
	}
	.global-nav .page_item_has_children>.children,
	.global-nav .menu-item-has-children>.sub-menu {
		padding-left: 1em;
	}
	.global-nav .children a,
	.global-nav .sub-menu a {
		background: none;
		white-space: wrap;
	}
	
}