/*
  Skin Name: ゆるふわ-シンプル
  Description: 「ゆるふわ日記」専用スキン
  Skin URI: 
  Author: ゆるりん
  Author URI: https://yuwa-log.com/
  Screenshot URI: 
  Version: 0.0.1
  Priority: 9999000000
*/
/*以下にスタイルシートを記入してください*/


/* *************************
 * カラー調整
 ************************* */
:root{
	--my-main-color: #FFC56C;
	--my-main-color-rgb:255,197,108;
	--my-second-color: #5e5e5e;
	--my-second-color-rgb: 94, 94, 94;
	--my-accent-color: #90D277;
	--my-accent-color-rgb: 144, 210, 119;
	--cocoon-red-color: #FF756B;
	--cocoon-pink-color: #e874a8;
	--cocoon-blue-color: #4078c0;
	--cocoon-green-color: #73a85f;
	--cocoon-yellow-color: #ffc56c;
	--cocoon-rakuten-color: #ef5350;
	--cocoon-yahoo-shopping-color: #66a7ff;
	--cocoon-amazon-color: #f79256;
}
/* *************************
 * 余白調整
 ************************* */
:root{	
	--cocoon-list-padding: 1.5em;
}
/* *************************
 * Google Fonts
 ************************* */
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}
/* *************************
 * Fons Awesome 5 Free
 ************************* */
.toc-list>li>a::before,
.sidebar h2::before,
.widget-sidebar ul li::before,
.btn-m::after{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

/* *************************
 * 初期値リセット
 ************************* */

.article h4,
.article h5,
.article h6{
	border: none;
}

.normal-table table tr:nth-of-type(2n+1){
	background-color: unset;
}

/* *************************
 * body
 ************************ */
body {
	color: #333;
}
/***************************
 * header
 **************************/
#header{
	background-color: #fff;
	border-top: solid 6px var(--my-main-color);
	padding-top: 24px;
}
.appeal{
    background-color: #fff;
}

.recommended {
    background-color: #fff;
    margin-top: 0;
    padding-bottom: 10px;
}
/***************************
 * footer
 **************************/
.footer{
	border-top: solid 20px var(--my-main-color);
}

/* *************************
 * 目次
 ************************* */
.toc,
.toc a{
	color: #747474;
}
.toc-list>li>a{
	position: relative;
	padding-left: 1.8em;
	font-size: 1em;
	font-weight: bold;
}
.toc-content ul li {
    margin: 1em;
}
.toc-list{
	counter-reset:indexnum 0;
}
.toc-list>li>a::before{
    display: block;
    content: counter(indexnum);
    counter-increment: indexnum 1;
    font-size: 1em;
    font-weight: normal;
    color: #fff;
    background-color: var(--my-main-color);
    border-radius: 99%;
    text-align: center;
    line-height: 2.05;
    letter-spacing: 0;
    width: 2em;
    height: 2em;
    position: absolute;
    bottom: 0;
    left: -0.6em;
    z-index: 1;
}
.toc-list>li{
	margin: 1.2em 1em;
}
.toc-list>li li{
	margin: 0.1em;
}
.toc-list>li li>a{
	position: relative;
	padding-left: 1.5em;
}
.toc-list>li li>a::before {
    display: block;
    content: "";
    background-color: var(--cocoon-grey-color);
    width: 0.8em;
    height: 1px;
    position: absolute;
    top: 0.7em;
    left: 0em;
    z-index: 1;
}


/* *************************
 * 見出しデザイン
 ************************* */
.article h2,
.article h3{
	margin-top: 3em;
}

.article h1{
	font-size: 32px;
	letter-spacing: -0.8px;
}
.article h2{
	padding: 10px;
	border-radius: 4px;
	font-size: 28px;
}
.article h3{
	position: relative;
	border: none;
	background-color: #f9f9f9;
	border-top: 1px solid #c7c7c7;
	border-bottom: 4px solid #c7c7c7;
	padding: 6px;
	font-size: 25px;
}
.article h3:before{
	position: absolute;
	left: 0;
	bottom: -4px;
	content: "";
	width: 30%;
	height: 4px;
	border-bottom: 4px solid var(--my-main-color);
	
}

.article h4{
	position: relative;
	font-size: 23px;
	padding: 6px 12px;
}
.article h4:before{
	position: absolute;
	content: "";
	left: 0;
	top: 4px;
	border-style: solid;
	border-color: var(--my-main-color);
	height: 28px;
	border-radius: 4px;	
}
.article h5,
.article h6{
	font-size: 21px;
}
.article h5{
	border-bottom: dashed 1px #747474;
}

/* *************************
 * サイドバー
 ************************ */
.sidebar h3 {
	color: #747474 !important;
}
.sidebar h3 {
    position: relative;
    background-color: #fff !important;
    border-bottom: solid 4px #747474;
    padding: 0px 1em;
}
.sidebar h3::before,
.sidebar h3::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 15%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.sidebar h3::before {
    border: solid 14px transparent;
    border-top: solid 14px #747474;
}
.sidebar h3::after {
    border: solid 14px transparent;
    border-top: solid 14px #fff;
    margin-top: -5px;
}

.widget-sidebar ul li{
	position: relative;
	padding-left: 20px;
	margin-left: 0.5em;
}
.widget-sidebar ul li::before {
	position: absolute;
	left: 0;
	top: 10px;
	content: "\f138";
	color: var(--wp--preset--color--key-color);
	opacity: 0.8;
}
.widget-sidebar ul li a:hover {
    background-color: unset;
}
.widget-sidebar ul li:hover {
	background-color: rgb(var(--my-main-color-rgb),0.1);
}



/* ********************
 * 通知エリア
 ******************* */
.notice-area{
	padding: unset;
}

/* ********************
 * シェアボタン
 * ****************** */
.sns-buttons a{
	background-color: var(--my-accent-color);
	width: 45px !important;
}
.sns-share a .button-caption{
	display: none !important;
}
.sns-share-buttons,
.sns-follow-buttons.sns-buttons {
	justify-content: center;
}
.sns-share-buttons a{
	margin: auto 6px;
}

/* ********************
 * 検索ボタン
 ******************* */
.wp-element-button{
	background-color: var(--wp--preset--color--key-color);
}



/* ボックスメニュー */
.box-menu-icon {
	color: var(--my-main-color) !important;
}
.box-menu:hover {
	box-shadow: inset 2px 2px 0 0 #cccccc, 2px 2px 0 0 #cccccc, 2px 0 0 0 #cccccc, 0 2px 0 0 #cccccc;
}

/* ページ送りボタン */
.pagination-next {
    margin-top: 24px;
    width: 70%;
    margin: 24px auto;
}
.pagination-next a{
	padding: 4px;
	border-radius: 40px;
}

/* テーブルデザイン */
tr th{
	background-color: rgb(var(--my-main-color-rgb),0.2);
}
.wp-block-table thead{
	border: unset;
}

/* Cocoonボタン ********** */
.btn{
	background-color: var(--my-accent-color);
}
a.btn.btn-m {
    position: relative;
}
.btn-m::after{
	content: "\f105";
	position: absolute;
	right: 0;
	font-size: 20px;
}

/* バッジ（リンクあり） ********** */
span[class^="badge"] a {
	color: #fff;
	text-decoration: none;
}

/* ブログカード ********** */
.blogcard{
	border-radius: unset;
}
.blogcard-label{
	border-radius: 0;
}
.internal-blogcard::after{
	content: 'つづきを読む...'; /* 右下枠のテキスト */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 0.8em;
	background-color: rgb(var(--my-second-color-rgb),0.5);
	padding: .4em 1.5em;
	color: #fff; /* 右下枠の文字色 */
}


/* *************************
 * --- Cocoon ボックス --- *
 ************************* */

/* ボックススタイル ****** */
.is-style-border-solid,
.is-style-border-double,
.is-style-border-dashed,
.is-style-border-dotted,
.is-style-border-radius-s-solid,
.is-style-border-radius-s-double,
.is-style-border-radius-s-dashed,
.is-style-border-radius-s-dotted{
	border-color: var(--cocoon-grey-color);
	padding: var(--cocoon-list-padding) !important;
}
.is-style-border-radius-l-solid,
.is-style-border-radius-l-double,
.is-style-border-radius-l-dashed,
.is-style-border-radius-l-dotted,
.is-style-border-radius-l-thin-and-thick{
	border-color: rgb(var(--my-main-color-rgb), 0.5);
  border-radius: 20px;
	padding: var(--cocoon-list-padding) !important;
}

.is-style-border-convex,
.is-style-border-thin-and-thick,
.is-style-border-radius-s-convex,
.is-style-border-radius-s-thin-and-thick,
.is-style-blank-box-red,
.is-style-blank-box-pink,
.is-style-blank-box-navy,
.is-style-blank-box-blue,
.is-style-blank-box-purple,
.is-style-blank-box-orange,
.is-style-blank-box-yellow,
.is-style-blank-box-green{	
	padding: var(--cocoon-list-padding) !important;
}

/* リストスタイル ********** */
[class*=is-style-numeric-list-] > li::before{
	left: -4px;
}
.is-style-numeric-list-enclosed > li::before,
.is-style-numeric-list-step > li::before{
	background-color: var(--my-main-color);
}
.is-style-numeric-list-step > li{
	padding-left: 2.5em;
}
.is-style-numeric-list-step > li::before{
	color: #fff;
	font-size: 18px;
	top: -5px;
}
.is-style-numeric-list-step > li::before,
.is-style-numeric-list-step > li::after{
	border-color: var(--my-main-color);
}
.article .has-list-style li:not(:last-child){
	padding-bottom: 1.5em;
}

/* アイコンボックス ******  */
.information-box,
.question-box,
.alert-box,
.memo-box,
.comment-box,
.ok-box,
.ng-box,
.good-box,
.bad-box,
.profile-box{
	background-color: #f7f7f7;
	border: 2px solid #e7e7e7;
}
.information-box::before{
	color: #5ECCCA;
}
.question-box::before{
	color: #f1d600;
}
.alert-box::before{
	color: #FF756B;
}

.wp-block-cocoon-blocks-icon-box.common-icon-box {
    width: 90%;
    margin-top: 3em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3em !important;
}

/* 付箋風ボックス ****** */
.blank-box.sticky{
	border-radius: unset;
}
.blank-box.sticky.st-yellow,
.blank-box.sticky.st-red,
.blank-box.sticky.st-blue,
.blank-box.sticky.st-green{
	background-color: var(--cocoon-xx-thin-color);
}
.blank-box.sticky.st-yellow{
	border-color: #f1d600;
}
.blank-box.sticky.st-red{
	border-color: #FF756B;
}
.blank-box.sticky.st-blue{
	border-color: #5ECCCA;
}
.blank-box.sticky.st-green{
	border-color: #73a85f;
}

/* タブandタブ見出しボックス */
.blank-box.bb-tab .bb-label,
.tab-caption-box-label{
	border-radius: 0 18px 0 0;
	padding-right: 1.2em;
}

.tab-caption-box-content,
.label-box-content{
	border-radius: var(--cocoon-basic-border-radius);
}

/* *************************
 * ----- タグ調整 ----- *
 ************************* */
mark,
.marker {
    background-color: #ff9;
    background-color: #fff5b3;
}
.marker-under {
    background: linear-gradient(transparent 60%, #fff5b3 60%);
}

cite {
    display: block;
    text-align: right;
}
pre,
code,
kbd,
.keyboard-key{
	font-family: Consolas, Monaco, monospace;
}
kbd,
.keyboard-key{
	border-radius: 4px;
	box-shadow: 1px 1px 0px 1px #ccc;
}
kbd{
	background-color: rgb(249,249,249);
	font-size: 0.85em;
	border: 1px solid var(--cocoon-middle-thickness-color);
	padding: 1px 3px;
}