@charset "UTF-8";
/*
Theme Name:   THE SONIC Child
Theme URI:    https://the-sonic.jp
Description:  THE SONICカスタマイズ用子テーマ
Author:       SONIC Team
Author URI:   https://the-sonic.jp
Template:     thesonic
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
* ここから下に記述
*/




/*--------------------------------------
    記事一覧デザイン
--------------------------------------*/
/*****  記事一覧デザイン　すべてに共通  *****/
.main-kiji {
	transition: all 0.3s ease 0s
    background-color: #fff;
}

article.main-kiji:hover {
    box-shadow:none;
	opacity: 0.6;
}



.def-mode .kiji-cat {
   font-weight:700;
}


/*****************************************

    4.メイン：投稿ページ（ヘッダー）

******************************************/

/*--------------------------------------
  パンくずリスト
--------------------------------------*/


@media (min-width: 1030px) {
.breadcrumb {
    padding: 12px 5px 0;
}
/*--------------------------------------
  タイトル
--------------------------------------*/
.entry-title,
.notpage-title,
 .main-title h1{
    line-height: 1.6em;
    margin: 0;
    padding: 4px 16px;
    font-weight: 700;
    font-size: 1.5em;
}
@media (min-width: 1030px) {
.entry-title,
.main-title h1 {
    font-size: 1.8em;
    padding: 16px 36px;
}}
@media (min-width: 768px) and (max-width: 1029px) {
.entry-title,
.notpage-title,
.main-title h1 {
    font-size: 1.6em;
}}
/*--------------------------------------
  投稿日・更新日・閲覧数・読む時間
--------------------------------------*/

.entry-header-item {
    display:block;
	padding: 4px 0 0 0;
	text-align:end;
}

.entry-header-item:after{
	display:block;
    content: "こちらのサイトはアフィリエイト広告を利用しています";	
    width: 100%;
	margin: 0;
	padding:3px 0;
	background:#F6F5F1;
	color: #4C4948;
	text-align:center;
    font-size:12px;
	font-weight:normal;
}
/*URLコピーボタン*/
.urlcopy-btn {
	display:block;
    width: 100%;
    line-height: 50px;
    margin: 20px auto 0;
    border: #4C4948 solid 2px;
    border-radius: 6px;
    background: #fff;
	color: #4C4948 !important;
    font-size: 1.2em;
	font-weight:700;
}

.entry-header-item span {
    margin-right: 1em;
	font-size:0.7em;
}



/*--------------------------------------
  段落ブロック
--------------------------------------*/
/*共通*/
p[class*="is-style-para-mark"] {
    padding: 1em 1.5em;
}
/*共通（アイコンブロック）*/
p[class*="is-style-para-icon"] {
    padding: 1em 1.5em 1em 70px;
    position: relative;

}
p[class*="is-style-para-icon"]:before {
    position: absolute;
    left: 0;
    width: 60px;
    line-height: 60px;
    text-align: center;
    top: calc(50% - 30px);
    margin-left: 3px;
	background: none;
}


/*--------------------------------------
  引用
--------------------------------------*/
.wp-block-quote,
.wp-block-quote.is-style-large {
    position: relative;
    margin: 5px 10px 20px;
    padding: 10px 20px;
    box-sizing: border-box;
    color: #4e4e4e;
    background: #F3F2F0;
    font-size: 0.8em;
}
.wp-block-quote:before {
     display: inline-block;
    position: absolute;
    top: 7px;
    left: 10px;
    content: "\f10d";
    font-family: font awesome 5 free;
    color: #E2DCDC;
    font-size: 58px;
    line-height: 1;
	    font-style: italic;
    font-weight: 900;
}
.wp-block-quote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

cite {
    line-height: 1;
    opacity: 1;
    position: relative;
    z-index: 3;
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
@media (min-width: 1030px) {
.wp-block-quote,
.wp-block-quote.is-style-large {
    margin: 0 2em 3em;
}}



/*--------------------------------------
  タイトル（見出し）
--------------------------------------*/
/*================================
    デザインパターン
================================*/



.cate-banner-box{
    width: 100%;/* 幅を指定 */
	margin:0 auto;

}
.cate-banner{
    position: relative;
	max-width:300px;
	margin:0 auto;
	border-radius:6px;
	overflow:hidden;
	display: flex;
    align-items: flex-start ;
    justify-content: center;	
}

.cate-banner img {
  width: 100%;
  border:#D3CBC6 1px solid;
}
.cate-banner-link {
  position: absolute;
  top: 40%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);  margin:0;
  padding:0;
  text-align:center;
  font-size: 28px;
  color: #ffffff;
    font-weight: 700;
  text-shadow:  2px  2px 10px #777 ,
               -2px  2px 10px #777 ,
                2px -2px 10px #777 ,
               -2px -2px 10px #777;

}
.cate-banner a:hover{
		opacity: 0.6;
}

@media all and (min-width: 500px) {
.cate-banner-box{
	display: flex;
	 flex-wrap: wrap;
	 justify-content:space-between ;
  }
}
	
/*--------------------------------------
  ボックスメニューナビ
--------------------------------------*/

.p-nav ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style:none;
margin:0;
padding:0;
border:none;
}
.p-nav ul li{
-ms-flex-preferred-size: calc(100%/4);/* 4列 */
flex-basis: calc(100%/4);/* 4列 */
margin:0;
margin-bottom: -1px !important;
padding:0;
text-align:center;
box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
min-height:110px;/* 最低の高さ */
cursor:pointer;
background:#fff;/* 背景色 */
}
.p-nav ul li:hover{
z-index:2;
box-shadow: inset 2px 2px 0 0 #F3CF75, 2px 2px 0 0 #F3CF75, 2px 0 0 0 #F3CF75, 0 2px 0 0 #F3CF75;/* 罫線(マウスホバー) */
background:#FFFCD4;
transition: 0.35s ease-in-out;
}



.p-nav ul li:before{
content:unset !important;
}
.p-nav ul li a{
display:block;
padding: 0.5em 1em;/* 内余白 */
text-decoration:none;
width:100%;
}
.p-nav ul li a:hover{
background:none;
opacity:1;
}
.p-nav ul li a img{
max-width:75% !important;/* 画像横幅 */
height: auto !important;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
display: inline-block;
}
.p-nav .p-nav-title{
display: block;
color: #333;/* 文字色 */
font-size: 0.9em;/* 文字大きさ */
letter-spacing: 1px;
font-weight: 700;/* 文字太さ */
text-align: center;
line-height: 1.3;/* 文字行間高さ */
    text-decoration: underline;
    text-decoration-color:#FFE31A;
     text-decoration-style: wavy;
}
/* サイドバー */
.sidebar .p-nav ul li{
	-ms-flex-preferred-size: calc(100%/2);
	flex-basis: calc(100%/2);
}

#custom_html-5 .p-nav {
	margin-top: 0;
}
/* サイドバーのときの上余白 */
.sidebar .p-nav{
	margin-top: 0;
}
/* スマホ */
@media screen and (max-width: 559px) {
.p-nav ul li {
	-ms-flex-preferred-size: calc(100%/2);
	flex-basis: calc(100%/2);
  }
}