/*
Theme Name: b1001
Theme URI: 
Author: af-partner
Author URI: 
Description: クールでかっこいいWordPressブロックテーマ Ver.01
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 5.7
Version: 
Text Domain: b1001
Tags: 
*/

html {
  -webkit-text-size-adjust: 100%;
}


body {
  margin: 0;
}
img {	
		max-width: 100%; 
		height: auto;
		transition:all 0.25s ease-in-out;
		vertical-align: bottom;
}
.link a img,
a.link img,
a img.link {
		margin: 0;
		overflow: hidden!important;
}
.link a:hover img,
a:hover.link img,
a:hover img.link {
		transform: scale(1.15,1.15)!important;
}
.wp-block-post-featured-image {	
		border: 1px solid var(--wp--preset--color--base-4);
		overflow: hidden;
}

/* ナビ */
.wp-block-navigation__submenu-container {
		padding: 0 0.2em;
		background-color:#00000010!important;
		transition: 1.0s!important;
}
.wp-block-navigation__responsive-container-content li {
		position: relative;
}
.wp-block-navigation__responsive-container-content ul > li > a:before {
		content: '●';
		position: absolute;
		left: -.5rem;
		top: .5rem;
		font-size: .3rem;
		color: var(--wp--preset--color--accent);
}
.wp-block-navigation__responsive-container-content ul > li > ul > li > a:before{
		content: '';
}

/* category title */
h1.cat-title:before {
		font-family: "dashicons";
		content: '\f318';
		font-size: 2.4rem;
		line-height: 1.15;
		margin-right: .2em;
		vertical-align: text-bottom;
		color: var(--wp--preset--color--accent)!important;
}

/* tag title */
h1.tag-title:before {
		font-family: "dashicons";
		content: '\f323';
		font-size: 2.4rem;
		line-height: 1.15;
		margin-right: .2em;
		vertical-align: text-bottom;
		color: var(--wp--preset--color--accent)!important;
}


/* read more */
a.wp-block-read-more:hover {
		background-color: var(--wp--preset--color--plinkhover)!important;
}

/* アイキャッチ画像 */
.wp-block-post-featured-image img {
		border: 1px solid #CCC!important;
}

/* テーブル */
table {
		width: 96%;
		margin: 0 auto;
		border-collapse: collapse;
		border-spacing:0;
		border: 1px solid var(--wp--preset--color--base-2)!important;
}
th {
		padding: 5px;
		font-weight: bold;
		border: 1px solid var(--wp--preset--color--base-2)!important;
		text-align: center;
		background-color: var(--wp--preset--color--base-4)!important;
}
td {
		padding: 5px;
		border: 1px solid var(--wp--preset--color--base-2)!important;
}

/* index */
.wp-pagenavi {
		padding: 10px 0;
		letter-spacing: 0;
		text-align: center;
		display: block;
}
.wp-pagenavi a, .wp-pagenavi span {
		color: var(--wp--preset--color--base-1);
		background-color: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--base-2);
		padding: 8px 15px!important;
		margin:0 2px;
		white-space: nowrap; 
		border-radius: 3px;
		transition: 0.2s ease-in-out;
}
.wp-pagenavi a:hover{
		color: var(--wp--preset--color--plinkhover);
		font-weight: 600;
}
.wp-pagenavi span.current{
		color: var(--wp--preset--color--plink);
		background-color: var(--wp--preset--color--base-3);
		font-weight: 600;
}


/* ページネーション */
#toc_container {
	background:#FFF!important;
	border: 2px solid #CCC!Important;
	margin: 0 auto 2em!important;
	padding: 1em 2em!important;
	border-radius: 8px;
}
#toc_container p.toc_title {
	font-size: 2em;
	color: #C00;}
#toc_container ul li .toc_number{
	padding-right: .5em;
	color: #C00;
	font-weight: 700;}
#toc_container a{
	color: #333;
}
#toc_container span.toc_toggle{
	font-size: 0.6em!important;
}

ul.toc_list li ul{ padding-left: 1em!important;}

/* 関連記事リスト */
.related-title {
		position: relative;
		margin: 10px 0;
		padding: .5rem 0 0 2rem;
		line-height: 1.2;
		font-size: x-large;
		font-weight: bold;
		color: var(--wp--preset--color--contrast);
}
.related-title::before {
		font-family: "dashicons";
		content: '\f105';
		position: absolute;
		left: 0;
		top: .1em;
		font-size: xx-large;
		color: var(--wp--preset--color--accent);
}
.related-posts {
		margin: 0 auto; 
		letter-spacing: -0.4em;
}
.related-posts  section {
		display: inline-block;
		vertical-align: top;
		width: 31.5%; 
		margin: 0; 
		padding: 5px;
		letter-spacing: 0;
		overflow: hidden;
		z-index: 100;
}
.related-posts  section .img-set {
		position: relative;
		border: 1px solid var(--wp--preset--color--base-2);
		overflow: hidden;
}
.related-posts  section .img-set p { margin-block-start: 0em;
		margin-block-end: 0em;
}
.r-tirle a {
		color: var(--wp--preset--color--contrast);
		font-weight: bold;
}

/* 関連記事リスト：カテゴリー表示 */
.p-cate {
		position: absolute;
		bottom: auto;
		top: 0;
		right: 0;
		margin: 0;
		padding: .4em .5em;
		font-size: 0.6rem;
		line-height: 1.0em;
		color: var(--wp--preset--color--base);
		background-color: var(--wp--preset--color--base-1);
}
.p-cate a {
		color: var(--wp--preset--color--base);
}
.p-cate a:hover {
		color: var(--wp--preset--color--base);
		text-decoration: underline;
}
#top-post-list .p-cate,
#sub-post-list .p-cate{
		padding-left: 0;
}
.p-list .p-cate {
		font-size: .78em;
		line-height: 1.2em;
}


/* 関連記事リスト：公開日等表示 */
.post-date {
		margin: 0;
		padding: .4em 0;
		font-size: 0.8em;
		font-weight: normal;
		color: var(--wp--preset--color--base-2);
		line-height: 1.2em;
}
#posts-date {
		padding: 0 1em 1em;
		font-size: 0.8em;
		font-weight: normal;
		font-style: italic;
		text-align: left;
}

/* Recent Posts */
.wp-block-latest-posts__post-title { 
		font-size: 1rem!important;
		font-weight: bold!important;
		line-height: 1.2!important;
		padding-bottom: .5em!important;
} 
.wp-block-latest-posts__featured-image {
		border: 1px solid var(--wp--preset--color--base-2)!important;
		overflow: hidden!important;
}

/* ボタン */
.cool-btn {display: inline-block; padding: 0.8em 2em; font-size: 1.2em; color: #FFF; background-color: #900 ; border-radius: .6em;}
.cool-btn:hover{color: #FFF; background-color: #C00; animation: yureru 1s linear infinite;}
.cool-btn.org {display: inline-block; padding: 0.8em 2em; font-size: 1.2em; color: #FFF; background-color: #900 ; border-radius: .6em;}
.cool-btn.org:hover{color: #FFF; background-color: #C00; animation: yureru 1s linear infinite;}
.cool-btn.red {color: #FFF; background: linear-gradient(180deg, #C00, #800);}
.cool-btn.red:hover {color: #FFF; background: linear-gradient(180deg, #E00, #B00);}
.cool-btn.blue {color: #FFF; background: linear-gradient(180deg, #0061D8, #049);}
.cool-btn.blue:hover {background: linear-gradient(180deg, #2386FE, #0061D8);}
.cool-btn.green {color: #FFF; background: linear-gradient(180deg, #00A894, #005A4F);}
.cool-btn.green:hover {background: linear-gradient(180deg, #00B29D, #008E7E);}
.cool-btn.pink {color: #FFF; background: linear-gradient(180deg, #E96790, #E33F73);}
.cool-btn.pink:hover {background: linear-gradient(180deg, #EF93B0, #E96790);}
.cool-btn.brown {color: #FFF; background: linear-gradient(180deg, #B56D62, #9A5449);}
.cool-btn.brown:hover {background: linear-gradient(180deg, #CE9E96, #B56D62);}
.cool-btn.purple {color: #FFF; background: linear-gradient(180deg, #A26FB3, #7C4B8D);}
.cool-btn.purple:hover {background: linear-gradient(180deg, #B790C4, #975EAA);}
.cool-btn.grey {color: #FFF; background: linear-gradient(180deg, #8B8D8C, #646766);}
.cool-btn.grey:hover {background: linear-gradient(180deg, #A4A6A6, #7E807F);}
@keyframes yureru {
  0%{-webkit-transform: translateY(0);transform: translateY(0);}
  25%{-webkit-transform: translateY(-5px); transform: translateY(-5px);}
  75%{-webkit-transform: translateY(5px); transform: translateY(5px);}
  100%{-webkit-transform: translateX(0); transform: translateX(0);}
}

/* Youtube */
.youtube {position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe {position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

/* 引用 */
blockquote {color: #666; font-size: 100%; font-style: italic; font-weight: bold; background-color:#F5F5F5; padding:1em 1em 1em 3em; position:relative;}
blockquote:before{content: '“'; font-size: 4em; line-height:1em; color:#CCC; position:absolute; left:0; top: 10px;;}

/* 人気記事  */
.rank-post {
		margin-top: 0;
		padding: 0;
		overflow: hidden;
}
.rank-post .p-post {
		padding: 10px 0;
		border-bottom: 1px solid #CCC;
}
.rank-post h5{
		display: block;
		margin: 0;
		padding: 0 0 10px;
		font-size: 1em;
		line-height: 1.2em;
		font-weight: 600;
		text-align: left;
}
.rank-post .p-post:last-child {
		border-bottom: none;
}
.rank-post .p-post a {
		color: var(--wp--preset--color--plink);
		text-decoration: none;
}
.rank-post .p-post a:hover {
		color: var(--wp--preset--color--plinkhover);
		text-decoration: underline;
}
.rank-post .p-post p {
		margin: 0;
		font-size: .9em;
		line-height: 1.3em;
		color: #666;
}
.rank-post .p-post .img-set{
		position: relative;
		float: left;
		margin-right: 8px;
		max-width: 100px;
		border: 1px solid #CCC;
		display: block;
		overflow: hidden;
}
.rank-post .p-post .num {
		position: absolute;
		top: 4px;
		right: 4px;
		font-size: 12px;
		line-height: 12px;
		font-weight: bold;
		color: #FFF;
		padding: 4px 6px;
		background-color: var(--wp--preset--color--accent);
		border-radius: 10px;
}
.rank-post .p-post .next {
		text-align: right;
}
.rank-post .p-post .next a{
		font-size: var(--wp--preset--font-size--x-small);
		color: var(--wp--preset--color--base);
		background-color: var(--wp--preset--color--base-1);
		padding: 2px 1em;
		border-radius: 1em;
}
.rank-post .p-post .next a:hover{
		text-decoration: none;
		background-color: var(--wp--preset--color--plinkhover);
}
.clr{
	clear: both;
}

/* オリジナルブロックスタイル */
.is-style-align-bottom{
		align-items:end;
}

.is-style-leftline { 
		border-left: solid 8px var(--wp--preset--color--accent); 
		padding: .2em 0 .2em 8px!important;
}

.is-style-underline {
		border-bottom: solid 3px var(--wp--preset--color--accent); 
		padding: .2em 0 .2em 8px!important;
}

.is-style-leftline02 { 
		border-left: solid 8px var(--wp--preset--color--accent); 
		border-bottom: solid 1px var(--wp--preset--color--accent); 
		padding: .2em 0 .2em 8px!important;
}

.is-style-underline02{ 
		padding: .3em .5em!important;
		background: var(--wp--preset--color--base-4);
		border-bottom: solid 3px var(--wp--preset--color--accent-2)!important;
}

.is-style-tagstyle { 
		position: relative;
		line-height: 1.5em!important;
		padding: .2em .2em .2em 1em!important;
		border-radius: .5em 0 0 .5em!important;
		vertical-align: middle;
		color: var(--wp--preset--color--base);
		background: var(--wp--preset--color--accent);
}
.is-style-tagstyle::after {
		position: absolute;
		content: "・";
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
		display: inline-block;
		font-size: 1.36em;
		line-height: 1.36em;
		position: absolute;
		padding: 0em;
		width: 1.36em;
		text-align: center;
		height: 1.36em;
		line-height: 1.36em;
		left: -.6em;
		top: 50%;
		transform: translateY(-50%);
		border-radius: 50% 0 0 50%;
}

.is-style-check { 
		position: relative;
		padding-left: 1.2em!important;
		line-height: 1.4!important;
}
.is-style-check::before {
		font-family: "dashicons";
		content: "\f12a"; 
		font-weight: bold;
		font-size: 1em;
		position: absolute;
		left: 0;
		top: 0;
		color: var(--wp--preset--color--accent);
}

.is-style-circle-icon { 
		position: relative;
		background: var(--wp--preset--color--base-3);
		padding: .4em .4em .4em 2em!important;
		border-radius: 1em 0.2em 0.2em 1em!important;
}
.is-style-circle-icon::before {
		position: absolute;
		font-family: "dashicons";
		content: "\f147";
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
		display: inline-block;
		font-size: 1.3em;
		line-height: 1.3em;
		position: absolute;
		padding: 0em;
		width: 1.3em;
		text-align: center;
		height: 1.3em;
		line-height: 1.3em;
		left: -0.2em;
		top: 50%;
		transform: translateY(-50%);
		border: solid 3px white; 
		border-radius: 50%;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

 .is-style-arrow { 
	 	position: relative;
	 	padding-left: 1.2em!important;
	 	line-height: 1.4!important;
}
.is-style-arrow::before {
		font-family: "dashicons";
		content: "\f344"; 
		font-weight: bold;
		font-size: 1em!important;
		position: absolute;
		left: 0;
		top: 0;
		color: var(--wp--preset--color--accent);
}

.is-style-check-label { 
		position: relative;
		color: var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--base-4);
		border: 1px solid var(--wp--preset--color--accent);
		line-height: 1.4;
		padding: 0.25em 0.5em;
		margin: 2em 0 0.5em;
		border-radius: 0 5px 5px 5px;
}
.is-style-check-label::after {
		position: absolute;
		font-family: "dashicons","Arial",sans-serif;
		content: "\f147 Check";
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
		left: -1px;
		bottom: 100%;
		border-radius: 5px 5px 0 0;
		padding: 3px 7px 2px;
		font-size: 0.6em;
		line-height: 1;
		letter-spacing: 0.05em	        
}

.is-style-myquote { 
		color: var(--wp--preset--color--base-2);
		font-size: 1rem;
		font-style: italic;
		font-weight: bold;
		background-color: var(--wp--preset--color--base-5);
		padding:1em ;
}

.is-style-moving-button a:hover {      
		animation: yureru 1s linear infinite;
}
@keyframes yureru {
		0% { transform: translateY( 0 );}
		25% { transform: translateY( -5px );}
		75% { transform: translateY(5px);}
		100% { transform: translateX( 0 );}
}

.is-style-trembling-button a:hover {      
		animation: buruburu 0.1s linear infinite;
}
@keyframes buruburu {
		0% { transform: translate(0px, 0px) rotateZ(0deg) }
		25% { transform: translate(2px, 2px) rotateZ(1deg) }
		50% { transform: translate(0px, 2px) rotateZ(0deg) }
		75% { transform: translate(2px, 0px) rotateZ(-1deg) }
		100% { transform: translate(0px, 0px) rotateZ(0deg) } 
}

.is-style-invert-button .wp-block-button a.wp-block-button__link {
		color: var(--wp--preset--color--base)!important;
		background-color: var(--wp--preset--color--accent)!important;
		border: solid 2px var(--wp--preset--color--accent)!important;
}
.is-style-invert-button .wp-block-button a.wp-block-button__link:hover{
		color: var(--wp--preset--color--accent)!important;
		background-color: var(--wp--preset--color--base)!important;
		border: solid 2px var(--wp--preset--color--accent)!important;
}

.is-style-door-button .wp-block-button a.wp-block-button__link {
		display: inline-block;
		position: relative;
		z-index: 2; 
		color: #fff!important;
		background-color: #674e99!important;
		border: solid 2px #674e99!important;
		border-radius: .5em!important;
}
.is-style-door-button .wp-block-button a.wp-block-button__link::before,
.is-style-door-button .wp-block-button a.wp-block-button__link::after{
		position: absolute;
		z-index: -1;
		display: block;
		content: '';
}
.is-style-door-button .wp-block-button a.wp-block-button__link::before,
.is-style-door-button .wp-block-button a.wp-block-button__link::after{
		transition: all 1s;
}
.is-style-door-button .wp-block-button a.wp-block-button__link:hover{
		color: #674e99!important;
		background-color: #fff!important;
		border-color: #674e99!important;
}
.is-style-door-button .wp-block-button a.wp-block-button__link::before,
.is-style-door-button .wp-block-button a.wp-block-button__link::after{
		top: 0;
		width: 50%;
		height: 100%;
}
.is-style-door-button .wp-block-button a.wp-block-button__link::before {
		right: 0;
}
.is-style-door-button .wp-block-button a.wp-block-button__link::after {
		left: 0;
}
.is-style-door-button .wp-block-button a.wp-block-button__link:hover::before,
.is-style-door-button .wp-block-button a.wp-block-button__link:hover::after {
		width: 0;
		background-color: #674e99!important;
}

.is-style-list-box { 
		position: relative;
		color: var(--wp--preset--color--contrast);
		border: 2px solid var(--wp--preset--color--accent);
		line-height: 1.5;
		padding: 1em 1em 1em 2.5em;
		border-radius: .8em;
}

.is-style-check-box { 
		position: relative;
		color: var(--wp--preset--color--contrast);
		border: 2px solid var(--wp--preset--color--accent);
		line-height: 1.5;
		padding: 1em 1em 1em 2.5em;
		border-radius: 0 .8em .8em .8em;
}
.is-style-check-box::after {
		position: absolute;
		font-family: "dashicons","Arial",sans-serif;
		content: "\f147 Check";
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
		left: -2px;
		bottom: 100%;
		border-radius: 5px 5px 0 0;
		padding: 3px 7px 2px;
		font-size: 0.9rem;
		line-height: 1;
		letter-spacing: 0.05em	        
}

.is-style-check-list {
		padding: .5em 1em;
}
.is-style-check-list li {
		list-style: none;
		position: relative;
		padding: 0.2em 1.2em;
		font-size: 1.0em;
		line-height: 1.8em;
		color:  var(--wp--preset--color--contrast);
}
.is-style-check-list li:before {
		position: absolute;
		left: 0;
		font-family: "dashicons";
		content: '\f12a';
}
.is-style-check-list li.red:before {
		color: #FF2232;
}
.is-style-check-list li.blue:before {
		color: #3CF;
}
.is-style-check-list li.green:before {
		color: #00BF62;
}
.is-style-check-list li.pink:before {
		color: #F39;
}
.is-style-check-list li.brown:before {
		color: #ED682A;
}
.is-style-check-list li.purple:before {
		color: #814EAA;
}
.is-style-check-list li.grey:before {
		color: #666;
}

@media (max-width: 599px) {
	.wp-block-navigation {
		--navigation-layout-justification-setting: flex-start!important;
		--navigation-layout-justify: flex-start!important;
	}
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
			border-style: solid;
			border-width: 1px;
	}
	.wp-block-navigation__responsive-container-content {
			width: 60%!important;
			margin: 0 auto!important;
	}
	.wp-block-navigation__responsive-container-content li {
			position: relative;
			font-size: 1.2rem!important;
			text-align: left!important;
			line-height: 1.3rem!important;
			padding-bottom: .8rem!important;
	}
	.wp-block-navigation__responsive-container-content ul > li > a:before {
			content: '●';
			position: absolute;
			left: -1rem;
			top: 0;
			font-size: .5rem;
			color: var(--wp--preset--color--accent);
	}
	.related-posts section {
			display: inline-block;
			vertical-align: top;
			width: 100%;
	}
	/*  テーブル  */
	table {
			display: block;
			width: auto;
			position: relative;
			overflow-x: auto;
			white-space: nowrap;
	}
}