/*
  Skin Name: 自作スキン
  Description: オリジナルスキンです
  Skin URI: https://wp-cocoon.com/
  Author: はっちゃん
  Author URI: https://turicco.com/fishing/
  Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png
  Version: 1.0.2
  Priority: 9999000000
*/
/*以下にスタイルシートを記入してください*/

/* プロパティ関数---------------------------------------------- */
:root {
	--main-color:#757575;/*#7B766E;*/
	--second-color:#efbf75;
	--cocoon-blue-color:#51677a;
	--gray-color: #f7f7f7;
	--shadow-color:#ccc;
	--border-color:#ccc;
	--box-padding:2em;
	--box-margin:3em auto;
	--cocoon-red-color: #bc5731;
}

/*480px以下*/
@media screen and (max-width: 480px){
	:root {
		--box-padding:1.5em;
	}
}







/* 全体設定---------------------------------------------- */
body{
	overflow-x: clip;
}

/* 中央揃え---------------------------------------------- */
.center {
    text-align: center;
}


/* 余白調整---------------------------------------------- */
.a-wrap {
	margin-bottom:0;
}

.entry-content {
	margin-top: 2em;
}

/* リンクカラー変更---------------------------------------------- */
a,
.has-text-color a {
	color:var(--cocoon-blue-color);
}

/* 固定ページの日付 */
.page .date-tags {
	display:none;
}


/* 投稿日位置変更（順番）---------------------------------------------- */
.article-header{
	display:flex;
	flex-flow: column;
}
.entry-title{order:-2;}
.date-tags{order:-1;}




/*Webフォント*/
.item-description,
.appeal-title,
.sidebar h3,
.toc-title,
.list-new-entries-title,
.heading, 
.footer-title, 
.related-entry-main-heading,
.comment-title,
.mobile-menu-buttons .menu-caption,
.list-more-button,
.blank-box.bb-tab .bb-label,
.blogcard::after,
:where(.prev-post-title,.next-post-title):before{
	font-family: 'Poiret One', sans-serif;
	font-weight:bold;
	letter-spacing:.1em;/*文字間の余白*/
}


/* 広告表記---------------------------------------------- */
.pr-label-l {
	border-radius:0;
	border-left:0;
	border-right:0;
	padding:.7em 0;
}

.pr-label-l:before{
	font-family:"Font Awesome 5 Free";
	content: "\f05a";
	font-weight:bold;
	margin-right:5px;
	color:var(--main-color);
}

/*表示順変更*/
.entry-categories-tags {
    order: 1;
}

/* 改行---------------------------------------------- */
/*改行PCでは無効（改行しない）*/
.sma{
    display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .sma{
        display: block;
    }
}

/* スムーススクロール---------------------------------------------- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px;/*位置調整*/
}



/* カラムブロック｜モバイル2列（767px以下） */
@media only screen and (max-width: 767px) {
   .wp-block-columns.is-style-mobile-two-columns {
      flex-wrap: wrap!important;
      gap:1rem;
  }
   .wp-block-columns.is-style-mobile-two-columns .wp-block-column {
      flex: 0 0 calc(50% - 0.5rem); /* 50% - ギャップの半分 (1rem / 2) */
  }
}





/* ホバーアクション1（上に動く）---------------------------------------------- */
body,
.appeal-button,
.breadcrumb a,
.go-to-top-button,
.link-btn,
input[type=submit],
.blogcard::after{
	transition: all .5s;
} 

.a-wrap:hover{
	background:initial;
	transform: translateY(-5px); 
}


/* ホバーアクション2（影）---------------------------------------------- */
.a-wrap:hover img{
	box-shadow: 1px 5px 5px var(--shadow-color);
}

/* ホバーアクション3（反転／塗り）---------------------------------------------- */
.breadcrumb a:hover,
.pagination-next-link:hover{
	border-color:var(--main-color);
	background:var(--main-color)!important;
	color:var(--cocoon-white-color)!important;
}

/* ホバーアクション4（反転／白抜き）---------------------------------------------- */

input[type=submit]:hover,
.comment-reply-link:hover{
	border:1px solid var(--main-color)!important;
	color:var(--main-color)!important;
	background-color:var(--cocoon-white-color)!important;
	opacity:1;
}

/* トップへ戻るボタン---------------------------------------------- */
.go-to-top-button:hover {
	transform: translateY(-40px);
}

/* トップへ戻るボタン画像の表示調整 */
.go-to-top-button {
	width: 60px; /* ボタン画像の表示幅 */
	height: auto; /* ボタン画像の高さは自動調整 */
}
.go-to-top {
	right: 10px; /* 右から10pxの位置に配置 */
	bottom: 50px; /* 下から30pxの位置に配置 */
}

/*通知エリア*/
.home .notice-area{
	display:none;
}

.notice-area{
	background-color:var(--main-color);
	font-weight:bold;
}



/* ヘッダー---------------------------------------------- */


/*1023px以上*/
@media screen and (min-width: 1023px){
	.header-container{
		display: flex;
		align-items: center;
		height:80px;
		background-color: rgba(255,255,255,0.15);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}
}



/* グローバルナビ---------------------------------------------- */

#navi a{
	color:var(--main-color);
	font-size:1em;
}

#navi,
#navi a:hover{
	background-color:transparent;
}

#navi .navi-in>ul>li>a {
	padding: 0 .5em!important;
}

.sub-caption {
    opacity: 1;
}


/* フッター---------------------------------------------- */
.footer{
	padding-top:3em;
}

/*834px以下*/
@media screen and (max-width: 834px){
	.navi-footer-in > .menu-footer li.menu-item {
		width: fit-content;
	}
	.navi-footer-in>.menu-footer a{
		font-size:.8em;
	}
} 

/*スマホでもウィジェットを表示*/
@media screen and (max-width: 768px) {
	.footer-widgets {
		display: block;
	}
}

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

.breadcrumb.sbp-main-before{
    background-color: transparent;
}

.breadcrumb a{
	padding:2px 5px;
	border-radius:1px;
}

/* 「ホーム」を消す */
.breadcrumb .breadcrumb-home a span{
	font-size: 0px;
}

/* 「HOME」を挿入 */
.breadcrumb .breadcrumb-home a span::before{
	content: "Home";
	font-size:13px;
}

/*パンくずリストアイコン非表示*/
/*.breadcrumb .fa-home,*/
.breadcrumb .fa-folder,
.breadcrumb .fa-file-o
{
	display: none; /*非表示*/
}

/*アイコン>まわりの余白*/
.breadcrumb .sp {
	margin: 0 3px;
}





/* アピールエリア---------------------------------------------- */

/*アニメーション*/
.fade-in{
	animation:fadein-anime 2s forwards;
}

.fade-in{
	opacity:0;
}

@keyframes fadein-anime{
	0% {opacity: 0}
	100% {opacity: 1}
}

.time01 {animation-delay: 0.5s;}
.time02 {animation-delay: 1.5s;}
.time03 {animation-delay: 2.5s;}




/*834px以下高さいっぱいに*/
@media screen and (max-width: 834px){
	.front-top-page .appeal{
		height:100svh;
		display:flex;
		align-items: center;
	}
}

.appeal-content {
    background-color: initial;
	padding:0;
}

.appeal-title {
	font-size: 1.5em;
	color:var(--main-color);
	margin-bottom:1em;
}





/* 記事カード設定---------------------------------------------- */
.entry-card-title,
.widget-entry-cards.card-large-image .e-card {
    font-size:16px;
}

.e-card-title {
    margin-top: 0!important;
}




/* ウィジェット設定---------------------------------------------- */

.widget-entry-card-link.a-wrap .widget-entry-card-thumb img {
    margin-bottom: 3px;
}

/*三リーダー省略*/
.entry-card-title,
.widget-entry-cards:not(.large-thumb-on) .card-title,
.widget-entry-card-snippet {
    -webkit-line-clamp: 3!important;
}

/*記事タイトル*/
.widget-entry-card-title{
	font-weight:bold;
}

/*文字の大きさ調整*/
/*480px以下*/
@media screen and (max-width: 480px){
	.e-card-title,
	.widget-entry-card-title{
		 font-size: 14px!important;
	}
	.e-card-title{
		margin-top:.5em;
	}
}
 
/* ウィジェット設定（横並び）---------------------------------------------- */

.widget-entry-cards.large-thumb{
	display: flex;
	flex-wrap: wrap;/*折り返す*/
	justify-content: center;
}

.popular-entry-cards.large-thumb a{
	width:calc(100% / 3);
}

/*480px以下*/
@media screen and (max-width: 480px){
	.popular-entry-cards.large-thumb a{
		width:calc(100% / 2);
	}
}


/*投稿日を表示する---------------------------------------------- */

.entry-card-info.e-card-info,
.widget-entry-card-date {
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
	font-size:.9em;
}

.widget-entry-card-date > span:nth-last-of-type(2) {
	display:none;
}


/*トップページカスマイズ***************************************/

/* 見出し---------------------------------------------- */
.heading{
	text-align:center; /*中央寄せ*/
	font-size:2.5rem; /*文字の大きさ（お好みで調整）*/
	color:var(--main-color);
}

.heading span{
	display:block; /*ブロック要素にする*/
	font-size:.8rem; /*サブ見出しを小さめに（お好みで調整）*/
	font-weight:normal;/*通常の太さ（不要なら削除）*/
}

/* トップページ非表示*/
.home .article-header,
.home .article-footer{
     display: none;
}




/* 見出しタイトル---------------------------------------------- */


.related-entry-heading{
	text-align:center;
}

.footer-title,
.related-entry-main-heading,
.comment-title{
    font-size: 30px;
	margin-bottom:2rem;
	padding: 0;
	text-align:center;
	line-height:1.6;
}

.related-entry-main-heading,
.comment-title{
	color: var(--main-color);
}


/*２行目のスタイル*/
.related-entry-sub-heading,
.comment-title span,
.title-memo{
	display:block;
	font-size:.8rem;
	letter-spacing:initial;
	font-weight:initial;
}




/* 見出しデザイン---------------------------------------------- */
.article h1,
.article h2,
.article h3,
.article h4{
	border: none;
	background: none;
	border-radius:0;
}

/*アーカイブページタイトル*/
.archive-title .fas{
	display:none;
}

.page .entry-title,
.archive-title{
	margin:2em 0;
	text-align: center;
	font-size:20px;
	padding-bottom:1em;
	position:relative;
}

:where(.page .entry-title,.archive-title)::after{
    background-color: var(--main-color);
    position: absolute;
    top: auto;
    bottom: 0;
    left: calc(50% - 1em);
    right: auto;
    display: block;
    width: 2em;
    height: 1px;
    border-radius: 10px;
    content: "";
}


/*記事一覧ページタイトル*/
.article h1{
	padding-left:0;
	padding-right:0;
}


.article h2 {
	margin-top:5em;
	position: relative;
	background:var(--main-color);
	color:var(--cocoon-white-color);
	padding:.7em 1em .7em;
}

.article h2:before,
.article h2:after {
	position: absolute;
	left: 0;
	width: 100%;
	content: '';
	border-top: 1px solid var(--cocoon-white-color);/*ライン：太さ・実線・色*/
}

.article h2:before {
	top: 3px;
}

.article h2:after {
	bottom: 3px;
}

.sidebar h3,
.article h3{
	position: relative;
	border-bottom: 3px solid var(--gray-color);
	background: none;
	color: var(--main-color);
	padding-left:0;
}

.article h3{
	margin-top:3em;
}

.sidebar h3{
	font-size: 1.5em;
	letter-spacing:.2em;
	padding-bottom:.2em;
}

.sidebar h3::after,
.article h3::after{
	display: block;
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 30%;
	border-bottom: 3px solid var(--main-color);
	content: " ";
}


.article h4{
	margin-top:3em;
	margin-bottom:1em!important;
	border-left:3px solid var(--main-color);
	padding:.1rem .8rem;
	font-size:1.1em;
	position:relative;
}

/*先頭に四角のアクセント*/
.article h5 {
	background:none;
	position: relative;
	font-size: 1em;
	padding:.5em .5em .5em 2em;
  }

.article h5::before{
	position: absolute;
	content: '';
}

.article h5::before {
	top: .6em;
	left: .2em;
	z-index: 2;
	width: 1em;
	height: 1em;
	background: var(--main-color);
	opacity: .7;
}





/* ボタンのスタイル---------------------------------------------- */

/*cocoonボタン*/
.btn{
	background-color:var(--main-color);
	font-size:1em!important;
}

.btn-m,
.btn-wrap.btn-wrap-m > a {
    padding: 14px 20px;
}


/*囲みボタン*/

.btn-wrap a{
	font-size:1em!important;
	margin-bottom:0!important;
}





/* カラム（ワードプレス）---------------------------------------------- */

/*ボタン時にクラス追加　btn-flex */
.is-layout-flex.btn-flex{
	gap: .5rem;
}


@media screen and (max-width: 834px){
	.container .column-wrap {
		gap: .5em!important;
	}
}


/* モバイルボタン---------------------------------------------- */

/*1023px以下*/
@media screen and (max-width: 1023px){
	.mobile-menu-buttons .menu-button img {
	width:fit-content;
	}
 
	.mobile-menu-buttons {
		box-shadow:none;
		align-items:center;
	}
	
	.mobile-footer-menu-buttons{
		 background-color:initial;
	}
	
	 /*アイコン、文字色*/
	.mobile-footer-menu-buttons :is(.menu-button >a,.menu-button label){
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width:45px;
		height:45px;
		margin:auto;
		backdrop-filter: blur(6px);
		 -webkit-backdrop-filter: blur(6px);
		color:var(--main-color);
		border-radius:99px;
	}
	.mobile-menu-buttons .menu-icon {
		font-size: .9em;
	}
	
	/*ホバー*/
	.mobile-footer-menu-buttons :is(.menu-button >a,.menu-button label):hover{
		animation: fuwafuwa 1s;
	}
	@keyframes fuwafuwa {
		0% {
			transform: translateY(0px);
		}
		50% {
			transform: translateY(-10px);
		}
		100% {
			transform: translateY(0px);
		}
	}
}

/*border-radiusリセット*/
#navi-menu-close, #sidebar-menu-close, #search-menu-close, #share-menu-close, #follow-menu-close{
	border-radius:initial;
}




/* 目次設定---------------------------------------------- */

.toc{
	padding:2em 8em 3em;
	width:100%;
	border:none;
	border-top:2px solid var(--main-color);
	border-bottom:2px solid var(--main-color);
}

/*834px以下*/
@media screen and (max-width: 834px){
	.toc{
		padding:2em 1.5em 3em 2.5em;
	}
}

.toc li{
	line-height:2;
}


/*『目次』のタイトル文字 */
.toc-title {
	text-align:center;
	font-size: 2em;
	color:var(--main-color);
}

.toc-title:before{
	display:block;
	content:'＼見たいところをクリックできます／';
	font-size:.8rem;
	font-weight:initial;
	letter-spacing:initial;
}

.toc li {
    line-height: 2;
}



/* 目次の「続きを読む」ボタンのスタイル */
.morelink {
    display: block;
    margin: 1em auto 0!important;
	padding:.3em 1em!important;
    text-decoration: none!important;
    cursor: pointer;
    text-align: center;
	color: var(--main-color)!important;
	background-color:#eee;
	border-radius:40px;
	width:10em;
	transition:.5s ease;
}

.morelink:hover {
	color: var(--cocoon-white-color)!important;
	background-color:var(--main-color);
}


/* 矢印（アイコン）---------------------------------------------- */
.toc .arrow-down,
.toc .arrow-up{
	margin:1em;
}

.article .arrow-down span,
.article .arrow-up span {
	margin:auto;
	display: block;
	color: var(--main-color);
	line-height: 1;
	width: 1em;
	height: 1em;
	border-bottom: 1px solid var(--main-color);
	border-left: 1px solid var(--main-color);
}
	
.article .arrow-down span{
	transform: translateY(-25%) rotate(-45deg);
}

.article .arrow-up span{
	transform: translateY(25%) rotate(135deg);
}








/**サイドバー目次---------------------------------------------- */
.widget_toc{
	overflow-y:auto;/*縦方向スクロールを設置*/
	max-height: calc(100vh - 150px); /* 目次の高さ上限*/
}

/*サイドバータイトル非表示*/
.widget .toc-title{
	display:none!important;
}



/* サイドバー目次追従---------------------------------------------- */
.nwa .toc {
	padding:0;
}

/*目次追従スクロール*/
.widget_toc.widget_toc{
	overflow-y:auto;
	max-height:calc(100vh - 250px); /* 目次の高さ上限 */
	margin-top:50px;
}

/*サイドバー目次追従（行の高さ）*/
.toc-checkbox:checked~.toc-content {
    line-height: 1.8;
}

/*サイドバータイトル非表示*/
.widget .toc-title{
	display:none;
}

/* サイドバーの設定---------------------------------------------- */

.widget-sidebar{
	margin-bottom:0!important;
}

.sidebar aside{
	padding:0 2em 3em;
	font-size:.9em;
}


/*カテゴリーウィジェット---------------------------------------------- */
.widget_nav_menu ul li,
.widget_categories ul li{
	line-height:1;/*変えない*/
}

/*サイドメニューホバー時*/
.widget_categories ul li a:hover,
.widget_nav_menu ul li a:hover,
.tagcloud a:hover{
    background-color: unset;
}







/* タグクラウド---------------------------------------------- */

.tagcloud{
	list-style:none;
}

ul.tagcloud{
	padding-left:0!important;
}

.tagcloud li{
	flex-grow:1;
}

.tagcloud a {
	border-color:var(--main-color);
	color:var(--main-color);
	border-radius: 99px;
	padding: 3px 12px;
}

.fa-tag:before {
	content: "\f578";
}

.tagcloud a:hover{
	background-color:var(--main-color);
	color:var(--cocoon-white-color);
}





/*ワードプレスのタグクラウド*/
.wp-block-tag-cloud a {
    margin-right: 0;
	line-height:1;
	margin-right:0;/*リセット*/
	padding:1ch;
    font-size: .9em !important;
	flex:1 1 auto;
}

.wp-block-tag-cloud span {
    display: flex;
	gap: 3px;
    margin-left: 0;
}




/* 検索ボックスのカスタマイズ（分離型・検索ボタン右側）---------------------------------------------- */
.search-box input:focus,
.search-box button:focus {
	outline: 0; /*フォーカス時の枠線を消す*/
}

/*入力欄*/
.search-box .search-edit {
	border-radius:1px;
	font-size:.9rem;
}


/* アーカイブプルダウンメニュー---------------------------------------------- */
select{
	border-radius: 1px; /* 角丸の指定 */
	font-size:.8em;
}




/* モバイルサイドバー---------------------------------------------- */

/*モバイルサイドバーの幅*/
@media screen and (max-width: 480px) {
    .menu-content {
		max-width: 99%;
    }
}

/*開くときのアニメーション*/
#sidebar-menu-input:checked ~ #sidebar-menu-content,
#search-menu-input:checked ~ #search-menu-content{
	transition: 0.5s ease-in-out;
}
/*閉じるときのアニメーション*/
.menu-content{
	transition:.5s ease-out;
}


/* モバイルサイドバーのCLOSEボタン---------------------------------------------- */
.menu-close-button {
	position:sticky!important;/*スクロール追従*/
	z-index: 9; /*最前面に指定*/
	top: 0px; /*表示位置*/
	display:flex;
	flex-direction: column;
	backdrop-filter: blur(2px);
}

.menu-close-button::after{
	content: "CLOSE";
	font-size:10px;
}




/* プロフィールボックス---------------------------------------------- */

.author-box{
	border:none;
}

.author-name a{
	pointer-events: none;
	text-decoration:none;
	color:var(--cocoon-text-color);
	font-size:.9em;
}

.author-box p {
	line-height:1.8;
}




/* カテゴリーラベル---------------------------------------------- */
.eye-catch .cat-label{
	display: none;
}

.cat-label {
    position: unset;
	border:0;
	padding:2px 10px;
}

.entry-categories-tags {
    margin-bottom: 0;
}



/* ページネーション（次ページ）---------------------------------------------- */
.pagination-next-link {
	border-radius: 1px;
	font-size: .9em;
	border:1px solid var(--border-color);
	background-color:initial;
}

.page-numbers{
	border: none;
	background-color:initial;
	border-radius: 0%;
	height:auto;
	box-shadow: 0 1px 1px var(--shadow-color);
}

a.page-numbers:hover {
	transform: translateY(-10px);
	box-shadow: 0 5px 5px var(--shadow-color);
}

.pagination .current {
/*現在のページ*/
	color:var(--cocoon-white-color);
	background-color:var(--main-color);
}


/* 関連記事記事下ページ送り---------------------------------------------- */

/*835px以上*/
@media screen and (min-width: 835px){
	  .pager-post-navi{
		  display: grid;
		  grid-template-columns: repeat(2, 1fr);
	}
}

/* ページ送り文字の追加---------------------------------------------- */
.prev-post-title,
.next-post-title{
	line-height:1.5;
	font-size:12px;
}

:where(.prev-post-title,.next-post-title):before{
	display:block;
	font-size: 16px; /* 文字サイズ */
	color:var(--main-color);
}
.next-post-title:before {
	content: 'Next';
}
.prev-post-title:before {
	content: 'Prev';
}

.pager-post-navi a .iconfont{
	color:var(--main-color);
}

/* カテゴリー、タグリンク--------------------------------------------- */

.cat-link{
	background-color:var(--main-color);
}

.tag-link{
	border-color:var(--main-color);
	color:var(--main-color);
}


/* SNSシェア・フォローボタン---------------------------------------------- */
.ss-bottom{
	margin-bottom:1em;
}
.sns-follow{
	margin-bottom:3em;
}

.sns-buttons{
	justify-content: center;
	margin-bottom:0;
}

.main .sns-buttons a {
	width: 34px!important;
	height: 34px!important;
	margin:2px;
	border-radius:0;
	background:initial;
	opacity:.8;
}

.sns-follow-buttons a {
	font-size:20px;
}

.sns-share-message, .sns-follow-message {
    font-size: .8em;
}

/* SNSアイコンサイズ調整(上)---------------------------------------------- */
.sns-share.ss-high-and-low-lc a .social-icon {
	font-size: 18px;
}

.sns-share-buttons a .button-caption {
	display: none!important;
}

/*ホバー*/
.sns-buttons a{
	transition:all .5s;
}
.sns-buttons a:hover{
	transform: translateY(-4px);
	/*transform: scale(1.1);*/
}


/***SNSボタン画面左に固定（トップのみ）***/
/*1023px以上*/
@media screen and (min-width: 1023px){
	.ss-top .sns-share-buttons{
		flex-direction: column;
		position: fixed;
		top: 50%;
		transform: translatey(-50%);
		left: 1%;
		z-index: 999;
	}

	.ss-top .sns-share-buttons:before{
		content:'SHARE';
		font-size:12px;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	.ss-top .sns-buttons a{
		border:none;
	}
}


/* 最近のコメントウィジェット---------------------------------------------- */
/*全体*/
.recent-comments {
	padding: 0em;
}

 /*アバターの位置調整*/
.recent-comment-avatar .avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin-right:0px;
}

/*名前部分*/
.recent-comment-author {
	line-height:30px;
}

.recent-comment-info,
.recent-comment-article {
	font-size:1em;
	color:var(--main-color);
}

/*日付*/
.recent-comment-date{
	text-align:right;
	font-size:9px;
}

/*記事名*/
.recent-comment-article {
	font-size: .8em;
	margin-top: 1em;
}

/*コメント部分*/
.recent-comment-content {
	padding: 1em;
	border-color:var(--border-color);
	position: relative;
	color:var(--cocoon-text-color);/*消さない*/
}

.recent-comment-content:before{ /*吹き出しの三角部分*/
	content:none;
}

/*吹き出しの三角部分（内側）*/
.recent-comment-content:after{
	content: "";
	position: absolute;
	top: -12px;
	left: 50px;
	border-style:solid;
	border-color:transparent transparent var(--cocoon-white-color) transparent;
	border-width: 0 20px 20px 0;
	transition: all .5s;
}

/*吹き出しの三角部分（外側）*/
.recent-comment-content:before{
	content: "";
	position: absolute;
	top: -14px;
	left: 52px;
	border-style:solid;
	border-color:transparent transparent var(--border-color) transparent;
	border-width: 0 14px 14px 0;
}

/* コメント--------------------------------------------- */

.commets-list .comment-meta a {
	font-size: .8em;
	text-decoration: none;
	text-align:right;
}

.commets-list > li {
	border-top: 2px dashed var(--gray-color); /*スレッドを区切る点線*/
	margin: 30px 0;
	padding-top: 20px;
}
.commets-list > li:first-child {
	border: none;
	margin-top: 0;
	padding-top: 0;
}
.commets-list .children {
	border-left: 2px solid var(--border-color); /*返信コメントの左側のボーダー*/
	margin: 0;
	padding-left:1em!important;
}
.commets-list .avatar { /*アバターの位置調整*/
	float: left;
	border-radius: 50%;
	margin-right: 10px;
}
.comment-content { /*コメントの吹き出し*/
	background-color:var(--gray-color);
	padding: 1.5em;
	margin: 20px 0 6px;
	border-radius: 10px;
	position: relative;
	font-size:.9em!important;
}
.comment-content::before { /*吹き出しの三角部分*/
	content: "";
	position: absolute;
	top: -14px;
	left: 50px;
	border-style: solid;
	border-color:transparent transparent var(--gray-color) transparent;
	border-width: 0 20px 20px 0;
}
.comment-content p { /*吹き出し内の文字を調整*/
	margin: 0em!important;
}


.comment-reply-link { /*返信ボタンの装飾*/
	color:var(--cocoon-white-color);
	background-color:var(--main-color);
	border: none;
	border-radius: 1px;
	padding: 3px 12px;
	transition: 0.5s;
}


/*コメントを送信*/

input[type=submit] {
	color:var(--cocoon-white-color);
	background-color:var(--main-color);
	border-color:var(--main-color);
}



/* 比較表---------------------------------------------- */
/* 比較表全体 */
.compare-box {
	display:flex;/* 配置 */
	margin:var(--box-margin);
	border-radius:1px;/* 角丸 */
	box-shadow: 0 1px 3px var(--shadow-color);
}
/* 左のボックス、右のボックス */
.compare-box .compare-left-wrap, 
.compare-box .compare-right-wrap{
	width:50%;/* 横幅半分ずつ */
	overflow:hidden;/*はみ出さない*/
}

.compare-box .compare-left-wrap{
	border-right:.5px #eee solid;
}

/* 左のタイトル、右のタイトル */
.compare-box .compare-left-head,
.compare-box .compare-right-head{
	text-align: center;/* 中央寄せ */
	color:var(--cocoon-white-color);/* 文字色 */ 
	font-weight: bold;/* 文字太さ */
	padding:0em 1em;/* 余白 */
	height:55px;/* 縦幅 */
	display:table-cell;/* 形式 */ 
	vertical-align:middle;/* 高さ中央寄せ */
	width:1000px;/* 横幅 */
}
/* 左のタイトル */
.compare-box .compare-left-head{
	border-radius:1px 0 0 0;/* 角丸 */
	background-color:var(--second-color);/* 背景色 */
}
/* 右のタイトル */
.compare-box .compare-right-head{
	border-radius:0 1px 0 0;/* 角丸 */
	background-color:var(--cocoon-blue-color);/* 背景色 */
}
/* 左のコンテンツ、右のコンテンツ */
.compare-box .compare-left, .compare-box .compare-right{ 
	padding:1em 1.5em;/* 余白 */
	/*text-align: justify;均等割り付け*/
	/*text-justify: inter-ideograph;段落両端 */
}

/*スマホで見たとき*/
@media screen and (max-width: 834px){
	/* 左のタイトル、右のタイトル */  
	.compare-box .compare-left-head, 
	.compare-box .compare-right-head{
		height:40px;/* 高さ */
		font-size:.9em;
	}
	/* 左のコンテンツ、右のコンテンツ */
	.compare-box .compare-left, .compare-box .compare-right { 
		padding:1em;/* 余白 */
		font-size:.8em;
	}
}



/************************************
箇条書きリスト余白調整
************************************/

/* リストスタイル---------------------------------------------- */

.has-list-style {
    padding: 0;
}

/*○*/
.is-style-icon-list-circle>li::before {
    color: #dbb6a2 !important;
}



/*目次の最終行*/
.toc :last-child {
	padding-bottom:0;
}

/*余白を狭くする*/
ol, ul {
    padding-left: 25px;
}

@media screen and (max-width: 834px){
	.article ul{
		padding-left: 1em; /* 26px→1em */
	}
	ul.has-list-style{
		padding-left: 0;/*リストスタイル調整*/
	}
}

/*２行目以降のリストスタイルを消す*/
:where(ol,ul):not(.timeline) ul{
	list-style: none;
	padding-left:0;
}

:where(ol,ul):not(.timeline) ul li{
	margin:0;/*0.2emの余白を消す*/
}

::marker{
	color:var(--main-color);
}


/* 箇条書き高さ調整--------------------------------------------- */

/*下余白追加*/
.article ul li:has(ol),
.article ul li:has(ul),
.article ol li:has(ol),
.article ol li:has(ul) {
	padding-bottom:.5em;
    margin-bottom:.5em;
}

:is(ol,ul).list-height li{
	padding-bottom:.5em;
	margin-bottom:.5em;
}

.block-box :where(ol,ul) li:has(ol):last-child,
.block-box :where(ol,ul) li:has(ul):last-child{
		padding-bottom:0;
}



/* 箇条書き(番号)---------------------------------------------- */

.ol-list{
	counter-reset:number!important; /* 番号リセット */
	list-style: none;/* 行頭番号削除 */
}

/* 箇条書き(番号) 行 */
.ol-list > li{
	position: relative;/* 配置 */
}

/* 箇条書き(番号) 行頭番号 */
.ol-list > li:before{
	counter-increment: number;/* 番号 */
	position: absolute;/* 配置 */
}

.ol-list > li:before {
    content: counter(number);
    position: absolute;
    top: 0.4em;
    left: -1.7rem;
    width: 1.5em;
    height: 1.5em;
	line-height:1.5em;
	text-align:center;
    font-size: .8em;
    font-weight: bold;
    border-radius: 50%;
    background-color: var(--main-color);
    color: var(--cocoon-white-color);
}


/************************************
箇条書き(点)
************************************/

::marker{
	color:var(--main-color);
}


.ul-list {
	list-style: none;
}

.ul-list > li{ 
	position: relative;/*ここを基準に*/
}

.ul-list > li:before {
	background-color: var(--main-color);/*色はここで変更*/
	position: absolute;/*ここを動かす*/
	content: '';
	width: 7px;/*円の幅*/
	height: 7px;/*円の高さ*/
	line-height:7px;
	top:.7em;/*高さの位置調整*/
	left: -1em;/*左側位置調整*/
	border-radius: 50%;
}



/*リストに下線を引く---------------------------------------------- */
.timeline-item-snippet,
:where(.widget_categories ul, .iconbox ul) li:not(:last-child){
	border-bottom:1px dashed var(--border-color);
}

.under-line > li {
	border-bottom:1px dashed var(--border-color);
}

.block-box .under-line > li:last-child{
	border:none;
}


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

/* FAQボックス------------------------------------------------------- */

.faq-wrap {
    --cocoon-custom-border-color: #e8ecef;
}

.faq-wrap.blank-box{
	border-width:1px;
	border-radius:1px;
}

.is-style-accordion.blank-box{
	padding:0;
}

.faq-question {
	align-items: unset;
}

.faq .faq-item-label {
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    height: 100%;
    width: 1.8em;
    padding: 0;
	margin-right: .5em;
}

.faq-item-content {
    margin-top: 0;
}

.is-style-accordion > .faq > .faq-question::before {
	opacity: 1;
}





/* アコーディオン（トグル）-------------------------------------------------------- */

/* ボタンのアイコンを常に表示 */
:where(
    .is-style-toggle1, .is-style-toggle2, .is-style-toggle1-l, .is-style-toggle2-l, 
    .is-style-toggle3, .is-style-toggle3-l, .is-style-toggle4, 
    .is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button::before {
	opacity: 1;
}

/* ボタンの背景色（スタイル1, FAQ1） */
.toggle-box:where(.is-style-toggle1, .is-style-toggle1-l, .is-style-faq1) .toggle-button {
	background-color: #f5f4f3;
}

/* スタイル1 & 2 & FAQ1, FAQ2：シンプルな枠線 */
.toggle-box:where(
    .is-style-toggle1, .is-style-toggle2, .is-style-toggle1-l, .is-style-toggle2-l, 
    .is-style-faq1, .is-style-faq2) {
	border: 1px solid var(--cocoon-custom-border-color);
}

/* スタイル3 & FAQ3：下線のみ */
.toggle-box:where(.is-style-toggle3, .is-style-toggle3-l, .is-style-faq3) {
	border-bottom: 1px solid var(--cocoon-custom-border-color);
}

/* ボタンのデフォルトスタイル（角丸なし・枠なし） */
:where(
    .is-style-toggle1, .is-style-toggle1-l, .is-style-toggle2, .is-style-toggle2-l, 
    .is-style-toggle3, .is-style-toggle3-l, .is-style-toggle4, 
    .is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button {
	border-radius: 0;
	border: none;
}

/* ボタンの背景なし（スタイル2,3,4, FAQ2,3） */
:where(
    .is-style-toggle2, .is-style-toggle2-l, .is-style-toggle3, .is-style-toggle3-l, 
    .is-style-toggle4, .is-style-faq2, .is-style-faq3) .toggle-button {
	background: none;
}

/* ボタンの余白調整 */
:where(.is-style-toggle1, .is-style-toggle2, .is-style-toggle3) .toggle-button {
	padding: 0.5em 1em;
}

/* 左寄せボタン（スタイル1L, 2L, 3L） */
:where(.is-style-toggle1-l, .is-style-toggle2-l, .is-style-toggle3-l) .toggle-button {
	padding: 0.5em 2em 0.5em 1em;
	text-align: left;
}

/* アイコンの配置（左寄せタイプ & FAQスタイル） */
:where(.is-style-toggle1-l, .is-style-toggle2-l, .is-style-toggle3-l, .is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button::before {
	position: absolute;
	right: 1em;
	margin: 0;
	font-size: 1em;
}

/* チェック時のボタンスタイル */
:where(.is-style-toggle1, .is-style-toggle2, .is-style-toggle1-l, .is-style-toggle2-l, .is-style-faq1, .is-style-faq2) .toggle-checkbox:checked ~ .toggle-button {
	border-bottom-color: transparent;
}

/* チェック時のコンテンツスタイル（ボーダー削除） */
:where(
    .is-style-toggle1, .is-style-toggle2, .is-style-toggle1-l, .is-style-toggle2-l, 
    .is-style-toggle3, .is-style-toggle3-l, .is-style-toggle4, 
    .is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-checkbox:checked ~ .toggle-content {
	border: none;
	border-radius: 0;
}


/* 余白調整（スタイル1,2） */
:where(.is-style-toggle1, .is-style-toggle2, .is-style-toggle1-l, .is-style-toggle2-l).toggle-wrap .toggle-content {
	padding: 0 1.5em;
}

/* チェック時の余白調整 */
:where(
    .is-style-toggle1, .is-style-toggle2, .is-style-toggle1-l, .is-style-toggle2-l) .toggle-checkbox:checked ~ .toggle-content {
	padding: 1em 1.5em;
}

/* 点線ボーダー（スタイル2, FAQ2） */
:where(.is-style-toggle2, .is-style-toggle2-l, .is-style-faq2) .toggle-checkbox:checked ~ .toggle-button {
	border-bottom: 1px dashed var(--cocoon-custom-border-color);
}

/* ボタン風デザイン（スタイル4） */
.is-style-toggle4 .toggle-button {
	width: fit-content;
	border: 1px solid var(--cocoon-custom-border-color);
	border-radius: 99px;
	background-color: unset;
	padding: 0.3em 1.2em;
	margin: auto;
}

/* チェック時のボタン（スタイル4） */
.is-style-toggle4 .toggle-checkbox:checked ~ .toggle-button {
	border-radius: 99px;
	margin-bottom:1em;
}


/* FAQボタンとコンテンツの基本配置 */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button,
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-content {
	position: relative;
	text-align: left;
}

/* FAQコンテンツの余白 */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3).toggle-wrap .toggle-content {
	padding: 0 2em 0 2.2em;
}

/* FAQのボタン・チェック時コンテンツの余白 */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button{
	padding: 0.5em 2em 0.5em 2.2em;
}

:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-checkbox:checked ~ .toggle-content {
	padding: 1em 2em 1em 2.2em;
}

/* Q&Aラベル設定 */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button:after,
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-checkbox:checked ~ .toggle-content:after {
	font-weight: bold;
	position: absolute;
	left: 1em;
}

/*「Q」マーク */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button:after {
	content: 'Q';
	color: #004aad;
	top: 0.5em;
}

/*「A」マーク */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-checkbox:checked ~ .toggle-content:after {
	content: 'A';
	color: #bc5731;
	top: 1em;
}

/* FAQのアイコン変更（開閉時） */
:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-button::before {
	content: "\f0d7";
}

:where(.is-style-faq1, .is-style-faq2, .is-style-faq3) .toggle-checkbox:checked ~ .toggle-button::before {
	content: "\f0d8";
}




/* 白抜きボックス---------------------------------------------- */

.blank-box {
	padding:var(--box-padding);
	border-width:1px;
	border-radius:0;
}

/* 白抜きボックスのスタイル（切り替え） --------------------------------------------------- */

/* スタイル 1: ダブル線の枠線と幅4pxのボックス */
.blank-box.is-style-blank-1 {
	border-radius: 0; /* 角丸をなしに */
	border-width: 4px; /* 枠線の幅を4pxに */
	border-style: double; /* ダブル線の枠線スタイル */
}

/* スタイル 2: 幅1pxのシンプルな枠線 */
.blank-box.is-style-blank-2 {
	border-radius: 0;
	border-width: 1px;
}

/* スタイル 3: 幅2pxのシンプルな枠線 */
.blank-box.is-style-blank-3 {
	border-radius: 0;
	border-width: 5px;
}

/* スタイル 4: 幅1pxの点線スタイル */
.blank-box.is-style-blank-4 {
	border-radius: 0;
	border-width: 1px;
	border-style: dashed; /* 点線の枠線スタイル */
}

/* スタイル 5: 幅2pxの点線スタイル */
.blank-box.is-style-blank-5 {
	border-radius: 0;
	border-width: 2px;
	border-style: dashed;
}

/* スタイル 6: 幅2pxのドット線スタイル */
.blank-box.is-style-blank-6 {
	border-radius: 0;
	border-width: 2px;
	border-style: dotted; /* ドット線の枠線スタイル */
}

/* スタイル 7: 幅4pxのドット線スタイル */
.blank-box.is-style-blank-7 {
	border-radius: 0;
	border-width: 4px;
	border-style: dotted;
}

/* スタイル 8: 右・左・下の枠線なし、上のみ幅5pxの枠線 */
.blank-box.is-style-blank-8 {
	border-radius: 0;
	border-width: 5px;
	border-right: none;
	border-left: none;
	border-bottom: none;
}

/* スタイル 9: 左・上・下の枠線なし、右のみ幅5pxの枠線 */
.blank-box.is-style-blank-9 {
	border-radius: 0;
	border-width: 5px;
	border-right: none;
	border-top: none;
	border-bottom: none;
}

/* スタイル 10: ストライプ背景（斜めの繰り返し線） */
.blank-box.is-style-blank-10 {
	border-radius: 0;
	border-width: 0;
	background-image: repeating-linear-gradient(-45deg, #f2f3f7 0, #f2f3f7 3px, transparent 3px, transparent 6px); /* ストライプパターン */
}

/* スタイル 11: チェックパターンの背景 */
.blank-box.is-style-blank-11 {
	border-radius: 0;
	border-width: 0;
	background-image: linear-gradient(0deg, transparent 19px, #ccc 20px), linear-gradient(90deg, transparent 19px, #ccc 20px); /* チェックパターン */
	background-size: 20px 20px; /* パターンのサイズ設定 */
}

/* スタイル 12: 右上に折り返し効果を追加 */
.blank-box.is-style-blank-12 {
	border-radius: 0;
	border-width: 0;
	position: relative;
}

.blank-box.is-style-blank-12:after {
	position: absolute;
	content: '';
	right: 0px;
	top: 0px;
	border-width: 0 20px 20px 0; /* 三角形の折り返し部分 */
	border-style: solid;
	border-color: #ccc #fff #ccc; /* 三角形の色 */
	box-shadow: -1px 1px 1px rgb(0 0 0 / .15); /* 影の効果 */
}

/* スタイル 13: 外枠の破線を追加 */
.blank-box.is-style-blank-13 {
	border-radius: 0;
	border-width: 0;
	position: relative;
	z-index: 0;
}

.blank-box.is-style-blank-13:before {
	position: absolute;
	border: 2px dashed #fff; /* 破線の太さと色 */
	content: '';
	display: block;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: 5px; /* 内側の余白 */
	z-index: -1;
	border-radius: 3px; /* 破線の角丸設定 */
}




/* 見出しボックス---------------------------------------------- */
.caption-box {
	border-width:1px;
	border-radius:0px;/* 角丸 */
	/*box-shadow: 1px 1px 3px var(--shadow-color);*/
}

.caption-box-content {
	padding:var(--box-padding);
}

.caption-box-label{
	display: block;
	text-align: center;
	padding:5px 0;
}



/* ラベルボックス-------------------------------------------------------- */

/* 共通スタイル */
.label-box[class*="is-style-label"]{
	position: relative; /* 子要素を配置する際の基準点 */
}

[class*="is-style-label"] .label-box-content {
	margin-top: 0; /* 上の余白をリセット */
	border-width: 1px; /* 枠線の幅を設定 */
	color:var(--cocoon-text-color)!important; /* テキストの色を強制的に設定 */
}

/* 丸み設定 */
:where(.is-style-labelout,.is-style-labelin,.is-style-labelicon) .label-box-content {
	border-radius: 1px; /* 角を四角に */
}

/* スタイル1（ラベルアウト） */
[class*="is-style-labelout"] .label-box-label {
	position: absolute; /* ラベルを絶対位置に配置 */
	top: -.8em; /* 上位置を調整 */
	padding:0 .5em; /* 内側余白を上下ゼロ、左右に設定 */
	text-shadow: none; /* テキストシャドウを削除 */
	background-color:var(--cocoon-white-color); /* 背景色を白に設定 */
}

[class*="is-style-labelout"] .label-box-content {
	padding: 2em; /* コンテンツの内側余白を設定 */
	background-color: transparent!important;/* 背景色なし */
}

/* スタイル2（ラベルイン） */
[class*="is-style-labelin"] .label-box-label {
	position: absolute; /* ラベルを絶対位置に配置 */
	top: 1.5em; /* 上位置を調整 */
	left: 2em;
	padding:0; /* 内側余白を上下ゼロ、左右に設定 */
	margin:0;
	text-shadow: none; /* テキストシャドウを削除 */
}

[class*="is-style-labelin"] .label-box-content {
	padding:3em 2em 1.5em; /* 内側余白を上に広く設定 */
}

/* スタイル3（アイコン） */
[class*="is-style-labelicon"] .label-box-label {
	display: grid; /* ラベル内のアイテムをグリッドで配置 */
	place-content: center; /* 中央に配置 */
	height: 100%; /* 高さを親要素に合わせる */
	position: absolute; /* ラベルを絶対位置に配置 */
	top: 0; /* 上位置を調整 */
	margin: 0; /* 外側余白をゼロに設定 */
	padding: 0 .5em; /* 内側余白を設定 */
	text-shadow: none; /* テキストシャドウを削除 */
	font-size:1em; /* フォントサイズを設定 */
}

[class*="is-style-labelicon"] .label-box-label:before {
	border-right: 1px solid var(--cocoon-custom-border-color); /* 右側に線を追加 */
	color: var(--cocoon-custom-border-color); /* 線の色を設定 */
	line-height: 1em; /* 行の高さを設定 */
	text-align: center; /* テキストを中央揃え */
	width: 2.5em; /* 幅を設定 */
	margin:0; /* 外側余白 */
}
[class*="is-style-labelicon"] .label-box-label-text {
	display: none; /* ラベルテキストを非表示 */
}

[class*="is-style-labelicon"] .label-box-content{
	padding: 1.5em 1.5em 1.5em 4em; /* 内側余白（上・右・下・左） */
}




/*タブボックス----------------------------------------------*/
.wp-block-cocoon-blocks-tab-box-1{
	padding:2em 2em 1em!important;
}

.blank-box.bb-tab .bb-label{
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
}



/* タブ見出しボックスのスタイル ------------------------------------ */

/* 共通スタイル */
[class*="-my-tab-caption"] .tab-caption-box-label {
    font-weight: bold;
}

[class*="-my-tab-caption-position"].tab-caption-box {
    position: relative; /* ラベル配置の基準 */
}

[class*="-my-tab-caption-position"] .tab-caption-box-label {
    position: absolute; /* ラベルを絶対配置 */
}

/* 共通：box-content スタイル */
[class*="-my-tab-caption"] .tab-caption-box-content {
    border-radius: 0;
    border-width: 1px;
}

/* スタイル1：ラベルが左上に表示される */
.is-style-1-my-tab-caption .tab-caption-box-content {
    padding: 1.5em 2em;
    margin-top: -1px;
}

.is-style-1-my-tab-caption .tab-caption-box-label {
    padding: 0 1em;
    border-radius: 2px 2px 0 0;
}

/* スタイル2：ラベルが枠内左上 */
.is-style-2-my-tab-caption-position .tab-caption-box-content {
    padding: 2.5em 2em 1.5em;
}

.is-style-2-my-tab-caption-position .tab-caption-box-label {
    padding: 0 1em;
    border-radius: 0 0 1px 0;
    top: 0;
    left: 0;
}

/* スタイル3,4：ラベルを枠に重ねて配置 */
:where(.is-style-3-my-tab-caption-position, .is-style-4-my-tab-caption-position) .tab-caption-box-content {
    padding: 2em;
}

:where(.is-style-3-my-tab-caption-position, .is-style-4-my-tab-caption-position) .tab-caption-box-label {
    top: -0.8em;
    left: 1em;
}

.is-style-3-my-tab-caption-position .tab-caption-box-label {
    padding: 0 1em;
    border-radius: 2px;
}

.is-style-4-my-tab-caption-position .tab-caption-box-label {
    padding: 0 1.2em;
    border-radius: 30px;
}

/* スタイル5：ラベルが幅いっぱいに表示される */
.is-style-5-my-tab-caption .tab-caption-box-content {
    padding: 1.5em 2em 1.5em;
}

.is-style-5-my-tab-caption .tab-caption-box-label {
    padding: 0.5em 1em;
    border-radius: 0;
    width: 100%;
    text-align: center;
}

/* スタイル6,7 共通：アイコン表示向けのラベル配置 */
:where(.is-style-6-my-tab-caption-position, .is-style-7-my-tab-caption-position) .tab-caption-box-label {
    display: grid;
    place-content: center;
    line-height: 2em;
}

:where(.is-style-6-my-tab-caption-position, .is-style-7-my-tab-caption-position) .block-box-label::before {
    margin-right: 0;
}

:where(.is-style-6-my-tab-caption-position, .is-style-7-my-tab-caption-position) .tab-caption-box-label-text {
    display: none;
}

/* スタイル6：丸アイコンが左上に表示される */
.is-style-6-my-tab-caption-position .tab-caption-box-content {
    padding: 1.5em 2em;
    border-radius: 4px;
    border-width: 2px;
}

.is-style-6-my-tab-caption-position .tab-caption-box-label {
    width: 2em;
    height: 2em;
    padding: 0;
    border-radius: 99px;
    top: -0.9em;
    left: 1em;
    box-shadow: 0 0 0 2px;
    font-size: 1em;
}

/* スタイル7：縦長のアイコンが左に表示される */
.is-style-7-my-tab-caption-position .tab-caption-box-content {
    padding: 1.5em 1.5em 1.5em 3.5em;
}

.is-style-7-my-tab-caption-position .tab-caption-box-label {
    padding: 0;
    border-radius: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 2.2em;
}

/* ラベルテキストの省略（三点リーダー）対応 */
:where(
    .is-style-1-my-tab-caption,
    .is-style-2-my-tab-caption-position,
    .is-style-3-my-tab-caption-position,
    .is-style-4-my-tab-caption-position
) .tab-caption-box-label {
    max-width: calc(100% - 2em);
    display: flex;
}

:where(
    .is-style-1-my-tab-caption,
    .is-style-2-my-tab-caption-position,
    .is-style-3-my-tab-caption-position,
    .is-style-4-my-tab-caption-position
) .tab-caption-box-label-text {
    min-width: 0;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ::before 擬似要素には最小幅を適用しない */
:where(
    .is-style-1-my-tab-caption,
    .is-style-2-my-tab-caption-position,
    .is-style-3-my-tab-caption-position,
    .is-style-4-my-tab-caption-position
) .tab-caption-box-label::before {
    flex-shrink: 0;
}









/* アイコンボックス----------------------------------------------*/

.wp-block-cocoon-blocks-icon-box{
	border-width: 1px;
	border-radius:0;
	padding: 1em 1.5em 1em 4.5em;
}

.wp-block-cocoon-blocks-icon-box::before{
	font-size:initial;
}

/*480px以下*/
@media screen and (max-width: 480px){
	.wp-block-cocoon-blocks-icon-box{
		padding:1.5em 1.5em 1.5em 3.5em;
	}
	.wp-block-cocoon-blocks-icon-box::before{
		top:50%;
		left: 0;
		margin-left: 3px;
		border-right: 1px solid;
		width: 35px;
	}
}

/* アイコンボックス（各カラー変更）----------------------------------------------*/

/*インフォボックス*/
.information-box::before{
    content: '\f0a1';
}
.information-box{
}

/*クエスチョンボックス*/
.question-box::before{
	content: '\f128';
}
.question-box{
  background: #fff7cc;
}

/*アラートボックス*/
.alert-box{
}

/*メモボックス*/
:where(.fab-pencil,.is-style-memo-box,.memo-box,.bb-memo .bb-label .fa)::before{
	content: "\f304"!important;
}

.memo-box::before{
	color:#96a3a3;
	border-color:#93A4A4;
}
.memo-box{
	/*background:#ebf1f2;（薄緑）*/
}

	
.comment-box {
}

.ok-box {
}

.ng-box {
  background: #ffe7e7;
}

.good-box::before {
	
}
.good-box {
	
}


/*badボックス*/
.bad-box::before{
}
.bad-box {
 
}

/*プロフィールボックス*/
.profile-box {
  background: #fafafa;
}


/* タブブロック */
:root {
--cocoon-tab-label-active-color: var(--maon-color); /* 選択したタブの背景色 */
}


.tab-content-group {
	border: none; /* タブ内容の枠線をなしにする */
	padding:1.2em 0;/* 上下の余白を設定 */
}

.tab-label-group .tab-label {
    padding: 0.6em 1.5em; /* タブの内側余白を設定 */
    text-align: center; /* 文字を中央揃え */
    transition: .3s all;/*なめらかに変化*/
    border-radius: 0; /* タブの角丸をなしにする */
}

.tab-label-group .tab-label:not(.is-active) {
    background-color: unset; /* 背景色をリセット */
}

.tab-label-group .tab-label {
    background: none; /* 背景色をなしにする */
    border-bottom: 2px solid var(--cocoon-tab-label-color); /* 下線を追加 */
}

.tab-label-group .tab-label.is-active {
    background:none;/* 背景色をなしにする */
    border-color: var(--cocoon-tab-label-active-color); /* 下線の色を変更 */
    color: var(--cocoon-tab-label-active-color); /* 文字色を設定 */
}

.tab-label-group .tab-label:hover {
    border-color:var(--cocoon-tab-label-active-color);
    color: var(--cocoon-tab-label-active-color);
}


.tab-label-group {
    justify-content: center;/*タブを中央寄せ*/
}




/* キーボードキー--------------------------------------------- */
.keyboard-key {
  background-color:var(--cocoon-white-color);
  border: 1px solid #888;
  border-radius: 2px;
  box-shadow:none;
  font-size: 0.9em;
	padding:3px 5px;
	margin:auto 3px;
}




/* ブログカード---------------------------------------------- */
.blogcard-wrap{
	width:100%;
}

.blogcard {
	position: relative;
	border-radius: 1px;
	line-height: 1.4;
	padding:1em;
}

.tab-caption-box .blogcard{
	border:none;
}

@media screen and (max-width: 834px) {
    .blogcard-content {
        line-height: 1.6;
    }
}

.blogcard-title{
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	color:var(--cocoon-text-color);
	font-size:.95em;
}

.blogcard-snippet{
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color:var(--cocoon-text-color);
}

/*834px以下*/
@media screen and (max-width: 834px){
	
	.blogcard-snippet {
		display: none;
	}
}


/*ブログカードラベル*/
.blogcard-label{
	top:-8px;
	padding:0 5px!important;
	border-radius: 0px;
	font-size:12px;
	color:var(--main-color);
	background:var(--cocoon-white-color);
}

/*ブログカードラベルアイコン*/

/*関連、参考記事、参考リンク、あわせて読みたい、詳細*/
:where(.bct-related,.bct-reference,.bct-reference-link,.bct-together,.bct-detail) .blogcard-label .fa::before{
    content: "\f518";
}

.blogcard-favicon {
    line-height: 1;
}


/*続きを読むを追加する*/
.blogcard::after{
	display:block;
    content: 'Read More';
    position: absolute;
    bottom: 1rem;
	right: 1rem;
    color:var(--main-color);
	border:1px solid transparent;
	background-color:var(--gray-color);
	font-size:12px;
	width: fit-content;
    height: auto;
    padding: 0.3em 2.4em;
    z-index: 1;
	transition:all .5s;
}

/*ホバー時ボタン*/
a.blogcard-wrap:hover .blogcard::after{
	background-color:var(--main-color);
	color:var(--cocoon-white-color);
	border-color:var(--main-color);
}


/* 位置調整 */
.blogcard-site {
	align-items: flex-start;
}







/* 検索ボックスフォーム---------------------------------------------- */
div.search-form {
    max-width: 100%;
}

.search-form div.sbtn {
    background-color:var(--main-color);
}

.search-form div.sbtn::after {
    font-weight: 900;
    content: "\f245";
    bottom: -1.2em;
    right: 0px;
    font-size: 24px;
}

/* 検索ボックスフォーム---------------------------------------------- */
.search-form div.sbtn {
    background-color:var(--main-color);
}

.search-form div.sbtn::after {
    font-weight: 900;
    content: "\f245";
    bottom: -1.2em;
    right: 0px;
    font-size: 24px;
}

/* マイクロバルーン---------------------------------------------- */

.micro-balloon{
	border-color:#aaa;/*固定*/
    border-radius: 2px;
    padding: 0.3em 1.25em;
    width: fit-content;
	font-size:1em;
}

.micro-balloon.micro-top:before,
.micro-balloon.micro-top:after {
top: 100%;
}

.micro-balloon.micro-bottom:before,
.micro-balloon.micro-bottom:after{
bottom:100%;
}

/* cocoon吹き出し---------------------------------------------- */

div.speech-balloon {
	border-width:1px;
	border-radius:8px;
	padding:1em!important;
	max-width:100%;
}

@media screen and (min-width: 481px) {
	.speech-wrap {
		align-items: center; /*縦位置中央*/
	}

    .speech-person {
        width: 10%;
        min-width: 10%;
    }
}

/*線を細くする*/
.speech-balloon::after{
    left: -11px;
}

.sbp-r:not(.not-nested-style) .speech-balloon::after,
.cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::after{
    right: -10px;
}

@media screen and (max-width: 480px) {
    .cocoon-block-balloon.not-nested-style.sbp-r > .speech-balloon::after{
        right: -5px;
    }
}







/* 表（テーブル）スタイル調整---------------------------------------------- */


.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr th,
.wp-block-flexible-table-block-table.wp-block-flexible-table-block-table>table tr td {
    font-size: max(.8em, 12px);
	padding: 1em .8em!important;
    text-align: center;
	min-width: 100px !important;
	white-space: normal !important;
}

/* 枠線の色 */
table:not(.has-border-color) :where(th, td) {
	border-color:var(--cocoon-thin-color)!important;
}

.scrollable-table th {
    background-color: var(--main-light-color);
}

:where(table th,table td) .wp-block-image{
	margin-bottom:0!important;
}

.wp-block-flexible-table-block-table {
	overflow-x: auto;
}

table a{
	text-decoration:none;
}

/* 一列目固定 */
.sticky :where(table th,table td):first-child {
    position: sticky;
	left: -1px;
    z-index: 1;
	font-weight:bold;
}

table tr:nth-of-type(2n+1) {
	background-color:var(--cocoon-white-color);
}

.s-circle:before, .d-circle:before, .triangle:before, .cross:before, .b-check:before, .b-question:before, .b-none:before {
    height: 3em;
    width: 3em;
	opacity: 0.2;
}




/* タイムライン（デフォルト）---------------------------------------------- */

.timeline-box {
	border:0;
	overflow: hidden;
}

.timeline > li.timeline-item {
	display: flex;
    flex-direction: column;
	padding-left: 1em;
}

.timeline-item:before {
	background-color:var(--cocoon-white-color);
	border:2px solid var(--main-color);
	width: 12px;
	height: 12px;
	top:23px;
	left: .6em;
}

.timeline-item-content {
	border:none;
	width: 100%;
	padding: 0 1em;
	border-left: solid 2px var(--border-color);
	background-image: linear-gradient(transparent calc(100% - 1px), var(--gray-color) 50%, var(--gray-color)), linear-gradient(90deg, transparent calc(100% - 1px), var(--gray-color) 50%, var(--gray-color));
    background-repeat: repeat;
    background-size: 16px 16px;
}

.timeline-item-label {
	text-align:left;
	padding-left:1.5em;
	width:auto;
	font-weight:bold;
	color:var(--main-color);
}

.timeline-item-snippet{
	padding-bottom:10px;
}


@media screen and (max-width: 480px){
	.timeline > li.timeline-item {
		padding-left: 0;
	}
	
	.timeline-item:before {
		left: -7px;
	}
	
	.timeline > li.timeline-item {
		border-left: none;
	}
}





/* ギャラリー（スマホで横１列）---------------------------------------------- */
.wp-block-gallery{
	gap:5px!important;
}


/****************************************** 
 追加css
**************************************/

/*めくれた紙風*/
.paper {
	position:relative;
	border:none;
}

.paper:after{
	position: absolute;
	content: '';
	right: 0px;
	top: 0px;
	border-width: 0 20px 20px 0;
	border-style: solid;
	border-color: #ccc #fff  #ccc;
	box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}


/*テキストリンク*/
.txt-link a,
.txt-link-box a{
	display: inline-block;
    position: relative;
    padding-left: 1.2em;
}

.txt-link a:before,
.txt-link-box a:before{
	content: "";
	height: 1em;
	width: 1em;
	position: absolute;
    top: .4em;
    left: 0;
	background-color:currentColor;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8l4 4-4 4M8 12h7"/></svg>');
}

ul.txt-link-box{
	list-style: none;
	padding-left:0;
}

.txt-link-box p{
	margin-bottom:1em!important;
}





/*新着NEWリボン*/
#new .new-entry-cards.large-thumb a{
	position:relative;
	z-index:0;
	overflow: hidden;
}

#new .new-entry-cards.large-thumb a:first-of-type:before{
    content: "NEW";
    position: absolute;
    background-color:#BE887C;
    color: #fff;
	text-shadow: 0 1px 1px rgb(0 0 0 / 20%);
	padding: 0px 40px;
    z-index: 1;
    top: 1em;
    left: -2em;
    transform: rotate(-45deg);
	max-width:185px;
}

/*480px以下*/
@media screen and (max-width: 480px){
	#new .new-entry-cards.large-thumb a:first-of-type:before{
		padding: 0px 35px;
	}
}

/* 点滅 */
.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}
 
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*改行PCでは無効（改行しない）*/
.sma{
    display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:768px) {
    .sma{
        display: block;
    }
}

/* カッコ---------------------------------------------- */
.kakko{
    padding: var(--box-padding);
    position: relative;
}

.kakko:after,
.kakko:before {
    content: "";
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 0.75em;
}

.kakko:before {
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-top: 1px solid;
    bottom: 0;
    left: 0;
}
.kakko:after {
    border-bottom: 1px solid;
    border-right: 1px solid;
    border-top: 1px solid;
    bottom: 0;
    right: 0;
}

/* ストライプ背景---------------------------------------------- */
.stripe{
	background: linear-gradient(-45deg,transparent 25%,var(--gray-color) 25%,var(--gray-color) 50%,transparent 50%,transparent 75%,var(--gray-color) 75%,var(--gray-color));
    background-clip: padding-box;
    background-size: 6px 6px;
    padding: var(--box-padding);
    position: relative;
}


/* 方眼---------------------------------------------- */
.grid{
	margin: 0 auto;
    /*box-shadow: 0 4px 4px rgb(0 0 0 / 5%), 0 2px 3px -2px rgb(0 0 0 / 1%);*/
    background-image: linear-gradient(transparent calc(100% - 1px), #ddd 50%, #ddd), linear-gradient(90deg, transparent calc(100% - 1px), #ddd 50%, #ddd);
    background-size: 15px 15px;
    background-repeat: repeat;
    background-color:transparent;
}


/* ポチップ---------------------------------------------- */

.pochipp-box{
	box-shadow: none!important;
}

/* ボタンのスタイルを調整する：アウトラインスタイルの設定 */
.pochipp-box[data-btn-style=outline] .pochipp-box__btn{
	box-shadow: none!important;
	border:1px solid currentColor;
	transition: background-color 0.3s;
}

 /* マウスオーバー時に文字色を白に変更 */
.pochipp-box[data-btn-style=outline] .pochipp-box__btn:hover {
	color: #fff !important;
}

/* マウスオーバー時に背景色をAmazonカラーに設定 */
.pochipp-box[data-btn-style=outline] .-amazon>.pochipp-box__btn:hover {
	background-color: var(--pchpp-color-amazon) !important;
	border-color:var(--pchpp-color-amazon);
}

 /* マウスオーバー時に背景色を楽天カラーに設定 */
.pochipp-box[data-btn-style=outline] .-rakuten>.pochipp-box__btn:hover {
	background-color: var(--pchpp-color-rakuten) !important;
	border-color:var(--pchpp-color-rakuten);
}

/* マウスオーバー時に背景色をYahooカラーに設定 */
.pochipp-box[data-btn-style=outline] .-yahoo>.pochipp-box__btn:hover {
	background-color: var(--pchpp-color-yahoo) !important; 
	border-color:var(--pchpp-color-yahoo);
}

/* マウスオーバー時に背景色をメルカリカラーに設定 */
.pochipp-box[data-btn-style=outline] .-mercari>.pochipp-box__btn:hover {
	background-color: var(--pchpp-color-mercari) !important; 
	border-color:var(--pchpp-color-mercari);
}

/* 画像サイズ */
@media screen and (min-width: 1000px) {
    .pochipp-box[data-lyt-pc=big] ,
	.pochipp-box[data-lyt-pc=imgbig] {
        grid-template-columns: 40% 1fr!important;
    }
	.pochipp-box__image img {
    max-height: 200px!important;
	}
}

@media screen and (max-width: 599px) {
    .pochipp-box[data-lyt-mb=vrtcl] .pochipp-box__image img {
		width: 100%!important;
		max-width: 250px!important;
		max-height:200px!important;
    }
}



/*文字色の設定*********************/

.bold-blue{
	color:var(--main-color);
}

/* ポイントマーカー色---------------------------------------------- */

.badge-pink{
	background-color:#DDC5B5;
}
.badge-blue{
	background-color:var(--cocoon-blue-color);
}
.badge-grey{
	background-color:#666;
}

/* マーカー---------------------------------------------- */
.marker{
	background:rgba(252, 185, 0, .4);
}
.marker-red {
	background:#EADAD5;
}
.marker-blue {
	background:rgba(152, 163, 160, .4);
}

/* マーカー（下線）---------------------------------------------- */
.marker-under,
.marker-under-red,
.marker-under-blue {
	background:none;
	padding-bottom:2px;
	border-bottom: 1px dashed;
}

.marker-under {
	border-color:var(--main-color);
}
.marker-under-red {
	border-color: var(--accent-color);
	
}
.marker-under-blue {
	border-color: var(--cocoon-blue-color);
}


/*ストライプマーカー*/
.marker-stripe{
	background-image: repeating-linear-gradient(-45deg,#ddd 0, #ddd 2px,transparent 2px, transparent 4px);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 0.5em;
}

/***********************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	/*必要ならばここにコードを書く */
}