/*
Theme Name: bb_original
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: This is the cssfile to normalize and customize of this site. If you want to write original common css for this site, you should write here not "style.css"!
Version: 1.0.0
*/
:root {
	--contwide-01: 1280px;
	--contwide-02: 1080px;
	--contwide-03: 970px;

	--bgcolor-01: #F9F9F9;
        --bgcolor-02: #E3F5F4;
	--bgcolor-03: #EFEBE2;
	--bgcolor-04: #807497;
	--bgcolor-05: #707070;
	--bgcolor-05: #bda8c1;
        /*--thcolor-02: #9370DC;*/
	--thcolor-02: #5f4f6b;
	--thcolor-03: #8080808a;
}
*, *::before, *::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background: var(--bgcolor-03);
	font-family: 'Zen Old Mincho', serif;
}
main {
	font-family: 'Libre Baskerville', 'Zen Old Mincho', serif;
}
i::before {
	font-family: "Font Awesome 6 Free";
}
.forSp,
.widgettitle {
	display: none;
}
@media screen and (max-width: 768px) {
.forPc,
.pcBr {
	display: none;
}
.forSp,
.spBr {
	display: block;
}
}
a {
	transition: all 0.3s;
	text-decoration: none;
	display: block;
	width: fit-content;
	word-break:break-all;
	color: #333;
}
ul, ol { margin: 0; }
ul li, ol li { list-style: none; }
/*-------------------------------
　　コンテンツ幅の調整
-------------------------------*/
.pageContainer {
	width: 100%;
	padding: 0 20px;
}
.innerBlock {
        max-width: var(--contwide-01);
        width: 100%;
        margin: auto;
}
.singlePage {
	    padding: 0 20px;
        max-width: 880px;
	    width: 100%;
        margin: auto;
}
@media screen and (max-width: 768px) {
.singlePage {
        padding: 0 10px;
        overflow: hidden;
}
}
/*-------------------------------
　　タイトル
-------------------------------*/
.pageTtl {
        font-size: 4rem;
	font-weight: 100;
}
.catTtl {
        font-size: 38px;
        display: flex;
        gap: 20px;
        align-items: center;
        margin: 0 0 30px;
	font-weight: 500;
	white-space: nowrap;
}
.catTtl::after {
	content: '';
        display: block;
        width: 100%;
        height: 3px;
        background: var(--thcolor-03);
}
@media screen and (max-width: 768px) {
.catTtl {
	font-size: 24px;
}
}
/*-------------------------------
　　カテゴリータグ
-------------------------------*/
.categoryArea * {
    font-family: 'Zen Old Mincho', serif;
}
.catBox {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        font-weight: 500;
}
.catBox a {
        padding: 5px 15px;
        border-radius: 50px;
        background: var(--bgcolor-01);
}
.catBox a:hover {
        background: var(--bgcolor-05);
        color: #fff;
}
/*　投稿記事専用カスタマイズ　*/
.categoryArea.singleArea {
        padding: 0 20px;
        max-width: 880px;
        width: 100%;
        margin: 50px auto 0;
}
.singleArea .circleBtn {
    margin: 20px 0 0 auto;
	
}
@media screen and (max-width: 768px){
.catBox a {
        font-size: 15px;
}
}
/*-------------------------------
　　ブルーベリーボタン
-------------------------------*/
.circleBtn {
	color: var(--bgcolor-04);
	font-size: 26px;
	display: flex;
	align-items: center;
	transition: all 0.3s;
	gap: 0 5px;
	padding: 0 5px;
	font-family: 'Libre Baskerville' !important;
}
.circleBtn::after {
	content: '';
	background: url(/blueberry-blog/wp-content/uploads/2023/08/btn_more.png);
	width: 60px;
	height: 60px;
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	transition: all 0.3s;
}
.circleBtn:hover::after {
	transform: scale(1.06) rotate(45deg);
}
@media screen and (max-width: 768px){
.circleBtn {
	font-size: 22px;
}
}
/*-------------------------------
　　記事一覧スタイル
-------------------------------*/
.topicsArea .four img {
	height: 190px;
	object-fit: cover;
	object-position: center;
	display: block;
	width: 100%;
}
.topicsArea .gridBlock {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 25px;
}
.topicsArea .gridBlock a { 
	width: 100%;
}
.topicsArea .contTtl {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	font-weight: 800;
	font-family: 'Zen Old Mincho', serif;
	font-size: 17.5px;
}
.topicsArea .blogThum {
	object-fit: cover;
	width: 100%;
	height: 195px
}
.postTime {
	font-family: 'Zen Old Mincho', serif;
	font-size: 17px;
	letter-spacing: 0.5px;
}
.topicsArea .gridBlock img {
	transition: all 0.3s;
}
.topicsArea .gridBlock a:hover img {
	opacity: .70;
}
@media screen and (max-width: 980px) {
.topicsArea .gridBlock {
	grid-template-columns: 1fr 1fr;
}
.topicsArea .blogThum {
	height: 240px;
}
}
@media screen and (max-width: 500px) {
.topicsArea .gridBlock {
	grid-template-columns: 1fr;
	    gap: 35px 0;
}
.topicsArea .blogThum {
	height: 190px;
}
}
/*-------------------------------
　　ページネーション
-------------------------------*/
.nav-links {
	display: flex;
	gap: 15px;
	justify-content: center;
	padding: 100px 0 0;
}
.nav-links * {
	display: grid;
	width: 45px;
	height: 45px;
	place-content: center;
	background: #fff;
	border-radius: 50px;
}
.nav-links a:hover {
	color: #fff;
	background: var(--bgcolor-05);
}
.nav-links .nav-links .current {
    background: var(--bgcolor-05);
    color: #fff;
}
@media screen and (max-width: 980px) {
.nav-links {
		gap: 5px;
}
.nav-links * {
		font-size: 14px;
}
}